Move Sidebar and Player into components
This commit is contained in:
parent
25536b078a
commit
6bff963d7a
2 changed files with 61 additions and 0 deletions
29
src/lib/components/custom/PlayerControls.svelte
Normal file
29
src/lib/components/custom/PlayerControls.svelte
Normal 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>
|
32
src/lib/components/custom/PlayerSidebar.svelte
Normal file
32
src/lib/components/custom/PlayerSidebar.svelte
Normal 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>
|
Loading…
Reference in a new issue