Login basics

src/app/pages/home/home-page.html

@@ -0,0 +1,79 @@
+<div style="position: fixed; height: 50px; background: rgb(80,0,80); bottom: 0; width: 100vw">
+  <analyser></analyser>
+</div>
+
+
+<button (click)="logout()">Logout</button>
+
+Home<br/>
+Home<br/>
+Home<br/>
+
+<button (click)="play($event)">Play</button>
+<button (click)="stop($event)">Stop</button>
+<button (click)="next($event)">Next</button>
+<button (click)="prev($event)">Prev</button>
+<button (click)="pause($event)">Pause/Resume</button>
+<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()) {
+      *
+    }
+    <a (click)="setIndex($index)">{{ item.track.file.filename }}</a>
+  </div>
+}
+
+<div>{{ audio.current()?.currentTime()}} / {{audio.current()?.duration()}} -> {{ audio.progress() * 100 }} %</div>
+<input #range width="100%" type="range" value="0" min="0" max="100" step="0.1" (change)="seek($event)">
+Home<br/>
+Home<br/>
+Home<br/>
+Home<br/>
+Home<br/>
+Home<br/>
+Home<br/>
+Home<br/>
+Home<br/>
+Home<br/>
+Home<br/>
+Home<br/>
+Home<br/>
+Home<br/>
+Home<br/>
+Home<br/>
+Home<br/>
+Home<br/>
+Home<br/>
+Home<br/>
+Home<br/>
+Home<br/>
+Home<br/>
+Home<br/>
+Home<br/>
+Home<br/>
+Home<br/>
+Home<br/>
+Home<br/>
+Home<br/>
+Home<br/>
+Home<br/>
+Home<br/>
+Home<br/>
+Home<br/>
+Home<br/>
+Home<br/>
+Home<br/>
+Home<br/>
+Home<br/>
+<hr>