Add Playback Modes

src/routes/+page.svelte

@@ -11,9 +11,43 @@
     //let audioSource: HTMLAudioElement = $state(new Audio());
     //let paused: boolean = $derived(audioSource.paused);
     //let volume: number = $derived(audioSource.volume);
+    enum PlaybackMode {
+        Linear,
+        LoopOne,
+        LoopQueue,
+    }
 
+    class PlaybackState {
+        values = {
+            [PlaybackMode.Linear]: "1",
+            [PlaybackMode.LoopOne]: "0",
+            [PlaybackMode.LoopQueue]: "00",
+        }
+
+        current: PlaybackMode = $state(PlaybackMode.Linear);
+
+        next = function() {
+            console.log(this.current)
+            if (this.current == PlaybackMode.LoopQueue) {
+                this.current = -1;
+            }
+            return this.values[++this.current];
+        }
+
+        prev = function() {
+            if (this.current == PlaybackMode.Linear) {
+                this.current = this.values.length;
+            }
+            return this.values[--this.current];
+        }
+
+        get = function() {
+            return this.values[this.current];
+        }
+    }
 
     let source: HTMLAudioElement = $state();
+    let mode = $state(new PlaybackState());
     let title = $state("");
     let queueIndex = $state(0);
     let currentSong = $state({
@@ -119,7 +153,11 @@
             progress = source.currentTime;
         }
 
-        source.load();
+        currentSong.source.onended = () => {
+            if (mode.current == PlaybackMode.LoopOne) {
+                currentSong.source.play();
+            }
+        }
     }
 
     function play() {
@@ -199,6 +237,7 @@
         {:else}
             <Button onclick={pause}>Pause</Button>
         {/if}
+        <Button class="border p-2" onclick={() => mode.next()}>{mode.get()}</Button>
     </div>
 </div>