Cleaned Up Controls Code

src/lib/components/ui/separator/index.ts

@@ -0,0 +1,7 @@
+import Root from "./separator.svelte";
+
+export {
+	Root,
+	//
+	Root as Separator,
+};

src/lib/components/ui/separator/separator.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { Separator as SeparatorPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = SeparatorPrimitive.Props;
+
+	let className: $$Props["class"] = undefined;
+	export let orientation: $$Props["orientation"] = "horizontal";
+	export let decorative: $$Props["decorative"] = undefined;
+	export { className as class };
+</script>
+
+<SeparatorPrimitive.Root
+	class={cn(
+		"shrink-0 bg-border",
+		orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+		className
+	)}
+	{orientation}
+	{decorative}
+	{...$$restProps}
+/>

src/routes/+page.svelte

@@ -4,7 +4,9 @@
     import {OpenSubsonic} from "$lib/opensubsonic";
     import {onMount} from "svelte";
     import QueueFrame from "$lib/components/custom/QueueFrame.svelte";
-    import PlayerFrame from "$lib/components/custom/PlayerFrame.svelte";
+    //import PlayerFrame from "$lib/components/custom/PlayerFrame.svelte";
+    import {Button} from "$lib/components/ui/button";
+    import {browser} from "$app/environment";
 
     //let audioSource: HTMLAudioElement = $state(new Audio());
     //let paused: boolean = $derived(audioSource.paused);
@@ -12,47 +14,10 @@
 
 
     let source: HTMLAudioElement = $state();
-
-    let audio = $state({
-        get paused() {
-            if (source) {
-                return source.paused;
-            }
-            else {
-                return true;
-            }
-        },
-
-        get volume() {
-            if (source) {
-                return source.volume;
-            }
-            else {
-                return 0;
-            }
-        },
-        set volume(volume) {
-            source.volume = volume;
-        },
-
-        get duration() {
-            if (source) {
-                return source.duration;
-            }
-            else {
-                return 0;
-            }
-        },
-
-        get currentTime() {
-            if (source) {
-                return source.currentTime;
-            }
-            else {
-                return 0;
-            }
-        }
-    });
+    let isPaused = $state(true);
+    let volume = $state(0.2);
+    let progress = $state(0);
+    let duration = $state(0);
 
     let queue: Array<unknown> = $state([]);
 
@@ -89,7 +54,7 @@
         }
     }
 
-    async function playSong(songIndex: number) {
+    function playSong(songIndex: number) {
         console.log(queue[songIndex].title);
         const chosenSong = queue[songIndex];
         let parameters = [
@@ -103,28 +68,62 @@
         ];
         let url = OpenSubsonic.getApiUrl("stream", parameters);
 
-        await pause();
-        source = new Audio(url);
-        await play();
+        pause();
+        newSong(url);
+        play();
     }
 
-    async function play() {
-        await source.play().catch(() => {});
-        await new Promise(resolve => {setTimeout(resolve, 50)});
-        audio.volume = 0.2;
-        forceUpdate();
+    function newSong(url: string) {
+        source = new Audio(url); // Assign new URL
+
+        // Reassign Event Handlers
+        source.onloadedmetadata = () => {
+            duration = source.duration;
+        };
+
+        source.onplay = () => {
+            source.volume = volume;
+            isPaused = source.paused;
         }
-    async function pause() {
+
+        source.onpause = () => {
+            isPaused = source.paused;
+        }
+
+        source.ontimeupdate = () => {
+            progress = source.currentTime;
+        }
+    }
+
+    function play() {
+        source.play().catch(() => {});
+    }
+    function pause() {
         source.pause();
-        await new Promise(resolve => {setTimeout(resolve, 50)});
-        forceUpdate();
-        //audio.paused = audio.source.paused;
     }
 
-    function forceUpdate() {
-        let tmp = audio;
-        audio = {};
-        audio = tmp;
+    $effect(() => {
+        if (source) {
+            source.volume = volume;
+        }
+    });
+
+    function progressPercent() {
+        return progress / duration * 100 || 0;
+    }
+
+    function displayTime(rawSeconds: number) {
+        const intSeconds = rawSeconds.toFixed(0);
+        const seconds = intSeconds % 60;
+        const minutes = (intSeconds / 60).toFixed(0) % 60;
+        const hours = (intSeconds / 360).toFixed(0);
+
+        if (hours == 0) {
+            return `${minutes.toString()}:${seconds.toString().padStart(2, 0)}`
+        }
+        else {
+            return `${hours}:${minutes.toString().padStart(2, 0)}:${seconds.toString().padStart(2, 0)}`
+        }
     }
 
     onMount(() => {
@@ -139,21 +138,21 @@
     </div>
     <div class="border border-2 col-span-3">
         <h1>Center</h1>
-        <button onclick={() => audio.volume += 0.1}>Louder</button>
-        <button onclick={() => audio.volume -= 0.1}>Quieter</button>
-        {#if typeof audio !== "undefined"}
-            <p>{audio.currentTime}</p>
-        {/if}
+        <button onclick={() => volume += 0.1}>Louder</button>
+        <button onclick={() => volume -= 0.1}>Quieter</button>
     </div>
     <QueueFrame {queue} {fetchQueue} {saveQueue} {removeSongFromQueue} {playSong} />
 </div>
 <div class="border border-2 min-h-24 h-24">
-    {#if typeof audio !== "undefined"}
-        <PlayerFrame
-                audio={audio}
-                pause={pause}
-                play={play}
-        />
+    <div class="flex flex-row gap-2">
+        <p class="border p-2">Volume: {volume}</p>
+        <p class="border p-2">{displayTime(progress)}/{displayTime(duration)}</p>
+        <p class="border p-2">{progressPercent().toFixed(2)}%</p>
+        {#if isPaused}
+            <Button onclick={play}>Play</Button>
+        {:else}
+            <Button onclick={pause}>Pause</Button>
         {/if}
+    </div>
 </div>