Make Center Module reactive & use snippets

This commit is contained in:
Neshura 2024-04-29 07:14:45 +02:00
parent b69f04fbe8
commit e162c674bf
Signed by: Neshura
GPG key ID: B6983AAA6B9A7A6C

View file

@ -10,6 +10,8 @@
import {Button} from "$lib/components/ui/button"; import {Button} from "$lib/components/ui/button";
import {PlaybackMode, PlaybackStateSvelte} from "$lib/player.svelte.js"; import {PlaybackMode, PlaybackStateSvelte} from "$lib/player.svelte.js";
import PlayerSidebar from "$lib/components/custom/PlayerSidebar.svelte"; import PlayerSidebar from "$lib/components/custom/PlayerSidebar.svelte";
import AlbumView from "$lib/components/custom/Views/AlbumView.svelte";
import {AlbumViews, Views} from "$lib/components/custom/Views/views.svelte";
function toFixedNumber(num, digits, base){ function toFixedNumber(num, digits, base){
const pow = Math.pow(base ?? 10, digits); const pow = Math.pow(base ?? 10, digits);
@ -202,13 +204,29 @@
<meta name="robots" content="noindex nofollow" /> <meta name="robots" content="noindex nofollow" />
</svelte:head> </svelte:head>
<div class="border border-2 flex-1 grid grid-cols-5"> {#snippet centerModule()}
<PlayerSidebar /> <div class="border border-2 col-span-3 overflow-hidden">
<div class="border border-2 col-span-3"> {#if viewMode === Views.Albums}
<h1>Center</h1> <AlbumView viewMode={subViewMode}/>
{:else if viewMode === Views.Artists}
<p>Get Fucked</p>
{/if}
</div> </div>
{/snippet}
{#snippet leftModule()}
<PlayerSidebar bind:view={viewMode} bind:subView={subViewMode} /> <PlayerSidebar bind:view={viewMode} bind:subView={subViewMode} />
{/snippet}
{#snippet rightModule()}
<QueueFrame {queue} {fetchQueue} {saveQueue} {removeSongFromQueue} {playSong} currentIndex={currentSong.queueIndex} /> <QueueFrame {queue} {fetchQueue} {saveQueue} {removeSongFromQueue} {playSong} currentIndex={currentSong.queueIndex} />
{/snippet}
<div class="border border-2 flex-1 grid grid-cols-5 h-1 min-h-fit">
{@render leftModule()}
{@render centerModule()}
{@render rightModule()}
</div> </div>
<div class="border border-2 min-h-24 h-24"> <div class="border border-2 min-h-24 h-24">
<div class="flex flex-row gap-2"> <div class="flex flex-row gap-2">