Move Sidebar and Player into components

This commit is contained in:
Neshura 2024-04-25 18:16:53 +02:00
parent 25536b078a
commit 6bff963d7a
Signed by: Neshura
GPG key ID: B6983AAA6B9A7A6C
2 changed files with 61 additions and 0 deletions

View file

@ -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>

View file

@ -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>