Eclypsed/Lazuli
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI changes (now responsive) && fixed YT recommendations method

Browse Source
This commit is contained in:
Eclypsed
2024-07-18 22:52:08 -04:00
parent 8453e51d3f
commit f10a184284
25 changed files with 1602 additions and 605 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/(app)/+layout.svelte
+23 -76
View File
@@ -1,91 +1,38 @@
<script lang="ts">
import SearchBar from '$lib/components/util/searchBar.svelte'
import type { LayoutData } from './$types'
import NavTab from '$lib/components/util/navTab.svelte'
import MixTab from '$lib/components/util/mixTab.svelte'
import MediaPlayer from '$lib/components/media/mediaPlayer.svelte'
import { goto } from '$app/navigation'
import IconButton from '$lib/components/util/iconButton.svelte'
export let data: LayoutData
let mixData = [
{
name: 'J-Core Mix',
color: 'red',
id: 'SomeId',
},
{
name: 'Best of: 葉月ゆら',
color: 'purple',
id: 'SomeId',
},
]
$: currentPathname = data.url.pathname
let newMixNameInputOpen = false
import Navbar from '$lib/components/util/navbar.svelte'
import Sidebar from '$lib/components/util/sidebar.svelte'
import { queue } from '$lib/stores'
// I'm thinking I might want to make /albums, /artists, and /playlists all there own routes and just wrap them in a (library) layout
let sidebar: Sidebar
$: currentlyPlaying = $queue.current
$: shuffled = $queue.isShuffled
</script>
<main id="grid-wrapper" class="h-full">
<nav id="navbar" class="items-center">
<strong class="pl-6 text-3xl">
<i class="fa-solid fa-record-vinyl mr-1" />
Lazuli
</strong>
<SearchBar />
<div class="flex h-full justify-end p-4">
<IconButton halo={true} on:click={() => goto('/user')}>
<i slot="icon" class="fa-solid fa-user text-lg" />
</IconButton>
</div>
</nav>
<section id="sidebar" class="relative pt-4 text-sm font-normal">
<div class="mb-10">
<NavTab label="Home" icon="fa-solid fa-wave-square" redirect="/" disabled={currentPathname === '/'} />
<NavTab label="Playlists" icon="fa-solid fa-bars-staggered" redirect="/playlists" disabled={/^\/playlists.*$/.test(currentPathname)} />
<NavTab label="Library" icon="fa-solid fa-book" redirect="/library" disabled={/^\/library.*$/.test(currentPathname)} />
</div>
<h1 class="mb-1 flex h-5 items-center justify-between pl-6 text-sm text-neutral-400">
Your Mixes
<IconButton halo={true} on:click={() => (mixData = [{ name: 'New Mix', color: 'grey', id: 'SomeId' }, ...mixData])}>
<i slot="icon" class="fa-solid fa-plus" />
</IconButton>
</h1>
<div>
{#each mixData as mix}
<MixTab {...mix} />
{/each}
</div>
</section>
<section id="content-wrapper" class="no-scrollbar overflow-x-clip overflow-y-scroll pr-8">
<Navbar on:opensidebar={sidebar.open} />
<Sidebar bind:this={sidebar} />
<section id="content-wrapper" class="overflow-y-scroll no-scrollbar">
<slot />
</section>
<MediaPlayer />
{#if currentlyPlaying}
<MediaPlayer
mediaItem={currentlyPlaying}
{shuffled}
mediaSession={'mediaSession' in navigator ? navigator.mediaSession : null}
on:stop={() => $queue.clear()}
on:next={() => $queue.next()}
on:previous={() => $queue.previous()}
on:toggleShuffle={() => $queue.toggleShuffle()}
/>
{/if}
</main>
<style>
#grid-wrapper,
#navbar {
display: grid;
column-gap: 3rem;
grid-template-columns: 12rem auto 12rem;
}
#grid-wrapper {
row-gap: 1rem;
grid-template-rows: 4.5rem auto;
}
#navbar {
grid-area: 1 / 1 / 2 / 4;
}
#sidebar {
grid-area: 2 / 1 / 3 / 2;
}
#content-wrapper {
grid-area: 2 / 2 / 3 / 4;
display: grid;
grid-template-rows: min-content auto;
}
</style>