Add play and pause functionality with a demo mp3

app/src/app/apps/app/player/controls/controls.component.html

@@ -1,25 +1,28 @@
 <div class="player" [ngClass]="{ miniplayer: miniplayer }">
   @if (!miniplayer) {
-  <div class="player-media">Media... {{ miniplayer }}</div>
+  <div class="player-media">{{ player.title() }}</div>
   }
   <div class="player-controls">
     <div>
-      <button class="nodrag" mat-icon-button>
+      <button class="nodrag" mat-icon-button (click)="player.previous()">
         <mat-icon>skip_previous</mat-icon>
       </button>
     </div>
+    @if (player.paused) {
     <div>
-      <button mat-icon-button>
+      <button mat-icon-button (click)="player.play()">
         <mat-icon>play_arrow</mat-icon>
       </button>
     </div>
-    <!-- <div>
-      <button mat-icon-button>
+    } @else {
+    <div>
+      <button mat-icon-button (click)="player.pause()">
         <mat-icon>pause</mat-icon>
       </button>
-    </div> -->
+    </div>
+    }
     <div>
-      <button mat-icon-button>
+      <button mat-icon-button (click)="player.next()">
         <mat-icon>skip_next</mat-icon>
       </button>
     </div>

app/src/app/apps/app/player/controls/controls.component.ts

@@ -3,6 +3,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { LayoutService } from '../../../../layout.service';
 import { CommonModule } from '@angular/common';
+import { PlayerService } from '../../../../player.service';
 
 @Component({
   selector: 'app-player-controls',
@@ -15,6 +16,8 @@ export class PlayerControlsComponent {
   @Input() miniplayer: boolean = false;
   layout = inject(LayoutService);
 
+  player = inject(PlayerService);
+
   constructor(private renderer: Renderer2, private el: ElementRef) {}
 
   // ngOnChanges(changes: SimpleChanges) {

app/src/app/apps/app/player/player.component.ts

@@ -1,6 +1,7 @@
 import { Component, inject } from '@angular/core';
 import { LayoutService } from '../../../layout.service';
 import { MatButtonModule } from '@angular/material/button';
+import { PlayerService } from '../../../player.service';
 
 @Component({
   selector: 'app-player',
@@ -12,6 +13,8 @@ import { MatButtonModule } from '@angular/material/button';
 export class PlayerComponent {
   layout = inject(LayoutService);
 
+  player = inject(PlayerService);
+
   constructor() {}
 
   toggleTray() {

app/src/app/layout/layout.component.scss

@@ -174,7 +174,7 @@
   }
 
   mat-sidenav-content {
-    padding-top: env(titlebar-area-height);
+    padding-top: env(titlebar-area-height, 0px);
   }
 }
 

app/src/app/player.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { PlayerService } from './player.service';
+
+describe('PlayerService', () => {
+  let service: PlayerService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(PlayerService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

app/src/app/player.service.ts

@@ -0,0 +1,52 @@
+import { Injectable, signal } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class PlayerService {
+  title = signal<string>('');
+
+  audio?: HTMLAudioElement;
+
+  constructor() {}
+
+  previous() {}
+
+  next() {}
+
+  async play() {
+    const url = 'https://file-examples.com/storage/fefcab211666f32e693a865/2017/11/file_example_MP3_700KB.mp3';
+    this.setTitle(url);
+
+    if (!this.audio) {
+      this.audio = new Audio(url);
+    }
+
+    await this.audio.play();
+  }
+
+  setTitle(url: string) {
+    const parsedUrl = new URL(url);
+    const pathname = parsedUrl.pathname;
+    const filename = pathname.substring(pathname.lastIndexOf('/') + 1);
+    this.title = signal<string>(filename);
+  }
+
+  pause() {
+    if (this.audio) {
+      this.audio.pause();
+    }
+  }
+
+  get paused() {
+    // if (this.videoMode) {
+    //   return this.youtubeUrl == null;
+    // } else {
+    if (!this.audio) {
+      return true;
+    }
+
+    return this.audio.paused;
+    // }
+  }
+}