From 6bff963d7af80008a3feba2ae360b4b44ece4d28 Mon Sep 17 00:00:00 2001
From: Neshura <neshura@neshweb.net>
Date: Thu, 25 Apr 2024 18:16:53 +0200
Subject: [PATCH] Move Sidebar and Player into components

---
 .../components/custom/PlayerControls.svelte   | 29 +++++++++++++++++
 .../components/custom/PlayerSidebar.svelte    | 32 +++++++++++++++++++
 2 files changed, 61 insertions(+)
 create mode 100644 src/lib/components/custom/PlayerControls.svelte
 create mode 100644 src/lib/components/custom/PlayerSidebar.svelte

diff --git a/src/lib/components/custom/PlayerControls.svelte b/src/lib/components/custom/PlayerControls.svelte
new file mode 100644
index 0000000..ef40d6b
--- /dev/null
+++ b/src/lib/components/custom/PlayerControls.svelte
@@ -0,0 +1,29 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+    import {Button} from "$lib/components/ui/button";
+    import {onMount} from "svelte";
+    let { audio, pause, play } = $props();
+    let mounted = $state(false);
+
+    $inspect(audio);
+
+    onMount(() => {
+        mounted = true;
+    })
+</script>
+
+<div class="flex flex-row gap-2">
+    {#if mounted}
+        <p>Paused: {audio.paused}</p>
+        <p>Volume: {audio.volume}</p>
+        <p>Duration: {audio.duration}</p>
+        {#if audio.paused}
+            <Button onclick={play}>Play</Button>
+        {:else}
+            <Button onclick={pause}>Pause</Button>
+        {/if}
+    {:else}
+        <p>Nothing going on here</p>
+    {/if}
+</div>
diff --git a/src/lib/components/custom/PlayerSidebar.svelte b/src/lib/components/custom/PlayerSidebar.svelte
new file mode 100644
index 0000000..ad886c2
--- /dev/null
+++ b/src/lib/components/custom/PlayerSidebar.svelte
@@ -0,0 +1,32 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+    import {Separator} from "$lib/components/ui/separator";
+    import {Button} from "$lib/components/ui/button";
+
+    let { selectedPlayerView = $bindable() } = $props();
+    let playlists = $state([]);
+</script>
+
+<div class="border border-2 col-span-1 flex flex-col gap-1 p-2">
+    <div class="flex flex-col gap-2">
+        <h1>Albums</h1>
+        <h2>All</h2>
+        <h2>Random</h2>
+        <h2>Favourites</h2>
+        <h2>Top Rated</h2>
+        <h2>Recently Added</h2>
+        <h2>Recently Played</h2>
+        <h2>Most Played</h2>
+    </div>
+    <Separator />
+    <h1>Artists</h1>
+    <h1>Songs</h1>
+    <h1>Radios</h1>
+    <h1>Shares</h1>
+    <Separator />
+    <h1>Playlists</h1>
+    {#each playlists as playlist}
+        <h2>{playlist}</h2>
+    {/each}
+</div>
\ No newline at end of file