Minor

src/app/components/analyser/Analyser.ts

@@ -27,9 +27,9 @@ export class Analyser implements AfterViewInit {
     this.canvas.style.height = `${this.height}px`;
     this.canvas.style.top = `-${this.height}px`;
     document.onmousemove = (e: MouseEvent) => {
-      const cursorDistancefromBottom = document.documentElement.clientHeight - (e.clientY || 0);
-      let offset = cursorDistancefromBottom - (this.bottomOffset + this.offsetBuffer);
-      if (cursorDistancefromBottom < this.bottomOffset || cursorDistancefromBottom > (this.bottomOffset + this.height + this.offsetBuffer)) {
+      const cursorDistanceFromBottom = document.documentElement.clientHeight - (e.clientY || 0);
+      let offset = cursorDistanceFromBottom - (this.bottomOffset + this.offsetBuffer);
+      if (cursorDistanceFromBottom < this.bottomOffset || cursorDistanceFromBottom > (this.bottomOffset + this.height + this.offsetBuffer)) {
         offset = this.height;
       }
       this.canvas.style.height = `${offset}px`;

src/app/models/FileSystemFile.ts

@@ -1,9 +1,10 @@
 export class FileSystemFile {
+  public filename: string;
+
   constructor(
-    public filename: string,
     public filepath: string,
     public size: number,
   ) {
-
+    this.filename = filepath.substring((filepath.lastIndexOf('/') || 0) + 1);
   }
 }

src/app/pages/homepage/homepage.html

@@ -14,6 +14,14 @@ Home<br/>
 <button (click)="add($event)">Add</button>
 <button (click)="remove($event)">Remove</button>
 
+Files:
+@for (item of files; track item) {
+  <div>
+    <a (click)="audio.addItem(item)">{{ item.file.filename }}</a>
+  </div>
+}
+
+Playlist:
 @for (item of audio.list(); track item) {
   <div>
     @if ($index === audio.index()) {

src/app/pages/homepage/homepage.ts

@@ -14,8 +14,33 @@ export class HomePage implements AfterViewInit{
   @ViewChild('range') rangeRef!: ElementRef<HTMLInputElement>;
   protected input!: HTMLInputElement;
   protected audio: AudioService = inject(AudioService);
+  protected files: Track[] = [];
 
   constructor() {
+    this.files = [
+      new Track(
+        new FileSystemFile('audio/1.mp3', 0),
+        new TrackMeta(),
+        0,
+        'mp3',
+        0
+      ),
+      new Track(
+        new FileSystemFile('audio/2.mp3', 0),
+        new TrackMeta(),
+        0,
+        'mp3',
+        0
+      ),
+      new Track(
+        new FileSystemFile('audio/3.mp3', 0),
+        new TrackMeta(),
+        0,
+        'mp3',
+        0
+      ),
+    ];
+
     effect(() => {
       const progress = (this.audio.progress() || 0) * 100;
       if (this.input) this.input.value = `${progress}`;
@@ -56,7 +81,7 @@ export class HomePage implements AfterViewInit{
 
   add(event: Event): void {
     this.audio.addItem(new Track(
-      new FileSystemFile('3.mp3', 'audio/3.mp3', 0),
+      new FileSystemFile('3.mp3', 0),
       new TrackMeta(),
       0,
       'mp3',

src/app/services/audio.service.ts

@@ -20,30 +20,6 @@ export class AudioService {
     return current.currentTime() / current.duration();
   })
 
-  constructor() {
-    this.addItem(new Track(
-      new FileSystemFile('1.mp3', 'audio/1.mp3', 0),
-      new TrackMeta(),
-      0,
-      'mp3',
-      128
-    ));
-    this.addItem(new Track(
-      new FileSystemFile('2.mp3', 'audio/2.mp3', 0),
-      new TrackMeta(),
-      0,
-      'mp3',
-      128
-    ));
-    this.addItem(new Track(
-      new FileSystemFile('3.mp3', 'audio/3.mp3', 0),
-      new TrackMeta(),
-      0,
-      'mp3',
-      128
-    ));
-  }
-
   addItem(track: Track) {
     const item = new PlaylistItem(track, this);
     this.analyser.connectAudio(item);