Lydstyrke/lydstyrke
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Activity Actions

Make left sidebar interactive

Browse source
This commit is contained in:
Neshura 2024-04-29 07:13:33 +02:00
parent 7488b7cfeb
commit b69f04fbe8
Signed by: Neshura
GPG key ID: B6983AAA6B9A7A6C
2 changed files with 17 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
src/lib/components/custom/PlayerSidebar.svelte
View file

@ -3,24 +3,28 @@
<script lang="ts">
import {Separator} from "$lib/components/ui/separator";
import {Button} from "$lib/components/ui/button";
import {Views} from "$lib/components/custom/Views/views.svelte";
import {AlbumViews} from "$lib/components/custom/Views/views.svelte.js";
let { selectedPlayerView = $bindable() } = $props();
let { view = $bindable(), subView = $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>
<Button onclick={() => view=Views.Albums} class="flex flex-col h-fit">Albums
<Button variant="secondary" onclick={() => subView=AlbumViews.All}>All</Button>
<Button variant="secondary" onclick={() => subView=AlbumViews.Random}>Random</Button>
<Button variant="secondary" onclick={() => subView=AlbumViews.Favourites}>Favourites</Button>
<Button variant="secondary" onclick={() => subView=AlbumViews.TopRated}>Top Rated</Button>
<Button variant="secondary" onclick={() => subView=AlbumViews.RecentlyAdded}>Recently Added</Button>
<Button variant="secondary" onclick={() => subView=AlbumViews.RecentlyPlayed}>Recently Played</Button>
<Button variant="secondary" onclick={() => subView=AlbumViews.MostPlayed}>Most Played</Button>
</Button>
</div>
<Separator />
<h1>Artists</h1>
<Button onclick={() => view=Views.Artists}>Artists</Button>
<h1>Songs</h1>
<h1>Radios</h1>
<h1>Shares</h1>

3
src/routes/+page.svelte
View file

@ -33,6 +33,8 @@
let volume = $state(0.2);
let progress = $state(0);
let duration = $state(0);
let viewMode = $state(Views.Albums);
let subViewMode = $state(AlbumViews.All);
let queue: Array<Song> = $state([]);
@ -205,6 +207,7 @@
<div class="border border-2 col-span-3">
<h1>Center</h1>
</div>
<PlayerSidebar bind:view={viewMode} bind:subView={subViewMode} />
<QueueFrame {queue} {fetchQueue} {saveQueue} {removeSongFromQueue} {playSong} currentIndex={currentSong.queueIndex} />
</div>
<div class="border border-2 min-h-24 h-24">