Big layout improvements, started on miniplayer

src/routes/(app)/+layout.js

@@ -0,0 +1,6 @@
+/** @type {import('./$types').LayoutLoad} */
+export const load = ({ url }) => {
+    return {
+        url: url.pathname,
+    }
+}

src/routes/(app)/+layout.svelte

@@ -0,0 +1,111 @@
+<script>
+    import Navbar from '$lib/components/utility/navbar.svelte'
+    import Footer from '$lib/components/utility/footer.svelte'
+    import MiniPlayer from '$lib/components/media/miniPlayer.svelte'
+    import { fly, fade } from 'svelte/transition'
+    import { pageWidth } from '$lib/utils/stores.js'
+
+    export let data
+
+    const contentTabs = {
+        '/': {
+            header: 'Home',
+            icon: 'fa-solid fa-house',
+        },
+        '/artist': {
+            header: 'Artists',
+            icon: 'fa-solid fa-guitar',
+        },
+        '/playlist': {
+            header: 'Playlists',
+            icon: 'fa-solid fa-bars-staggered',
+        },
+        '/library': {
+            header: 'Libray',
+            icon: 'fa-solid fa-book-open',
+        },
+    }
+
+    let previousPage = data.url
+    let direction = 1
+    $: calculateDirection(data.url)
+
+    const calculateDirection = (newPage) => {
+        const contentLinks = Object.keys(contentTabs)
+        const newPageIndex = contentLinks.indexOf(newPage)
+        const previousPageIndex = contentLinks.indexOf(previousPage)
+        if (newPageIndex > previousPageIndex) {
+            direction = 1
+        } else {
+            direction = -1
+        }
+        previousPage = data.url
+    }
+
+    let activeTab, indicatorBar, tabList
+    $: calculateBar(activeTab)
+
+    const calculateBar = (activeTab) => {
+        if (activeTab) {
+            const listRect = tabList.getBoundingClientRect()
+            const tabRec = activeTab.getBoundingClientRect()
+            indicatorBar.style.top = `${listRect.height}px`
+            if (direction === 1) {
+                indicatorBar.style.right = `${listRect.right - tabRec.right}px`
+                setTimeout(() => (indicatorBar.style.left = `${tabRec.left - listRect.left}px`), 300)
+            } else {
+                indicatorBar.style.left = `${tabRec.left - listRect.left}px`
+                setTimeout(() => (indicatorBar.style.right = `${listRect.right - tabRec.right}px`), 300)
+            }
+        }
+    }
+</script>
+
+<div class="flex h-full flex-col">
+    {#if $pageWidth > 768}
+        <Navbar>
+            <h1 slot="center-content" bind:this={tabList} class="relative flex items-center gap-12 text-lg">
+                {#each Object.entries(contentTabs) as [page, tabData]}
+                    {#if data.url === page}
+                        <span bind:this={activeTab} class="pointer-events-none">{tabData.header}</span>
+                    {:else}
+                        <a class="text-neutral-400 hover:text-lazuli-primary" href={page}>{tabData.header}</a>
+                    {/if}
+                {/each}
+                {#if data.url in contentTabs}
+                    <div bind:this={indicatorBar} transition:fade class="absolute h-0.5 bg-lazuli-primary transition-all duration-300 ease-in-out" />
+                {/if}
+            </h1>
+        </Navbar>
+    {:else}
+        <Navbar />
+    {/if}
+    <div class="relative flex-1 overflow-hidden">
+        {#key previousPage}
+            <div in:fly={{ x: 200 * direction, duration: 300, delay: 300 }} out:fly={{ x: -200 * direction, duration: 300 }} class="no-scrollbar h-full overflow-y-scroll px-8 py-4 md:px-32">
+                <slot />
+            </div>
+        {/key}
+        <div class="absolute bottom-0 w-full">
+            <MiniPlayer displayMode={$pageWidth > 768 ? 'horizontal' : 'vertical'} />
+        </div>
+    </div>
+    {#if $pageWidth < 768}
+        <Footer>
+            <section slot="content" class="flex items-center justify-center" style="height: 32px;">
+                <h1 bind:this={tabList} class="relative flex w-full items-center justify-around">
+                    {#each Object.entries(contentTabs) as [page, tabData]}
+                        {#if data.url === page}
+                            <span bind:this={activeTab} class="pointer-events-none"><i class={tabData.icon} /></span>
+                        {:else}
+                            <a class="text-neutral-400 hover:text-lazuli-primary" href={page}><i class={tabData.icon} /></a>
+                        {/if}
+                    {/each}
+                    {#if data.url in contentTabs}
+                        <div bind:this={indicatorBar} transition:fade class="absolute h-0.5 bg-lazuli-primary transition-all duration-300 ease-in-out" />
+                    {/if}
+                </h1>
+            </section>
+        </Footer>
+    {/if}
+</div>

src/routes/(app)/+page.server.js

@@ -0,0 +1,21 @@
+import { SECRET_INTERNAL_API_KEY } from '$env/static/private'
+
+export const prerender = false
+
+/** @type {import('./$types').PageServerLoad} */
+export const load = async ({ locals, fetch, url }) => {
+    const recommendationResponse = await fetch(`/api/user/recommendations?userId=${locals.userId}&limit=10`, {
+        headers: {
+            apikey: SECRET_INTERNAL_API_KEY,
+        },
+    })
+    const recommendationsData = await recommendationResponse.json()
+    const { recommendations, errors } = recommendationsData
+
+    return {
+        url: url.pathname,
+        user: locals.user,
+        recommendations,
+        fetchingErrors: errors,
+    }
+}

src/routes/(app)/+page.svelte

@@ -0,0 +1,31 @@
+<script>
+    import { onMount } from 'svelte'
+    import { newestAlert } from '$lib/utils/stores.js'
+    import ScrollableCardMenu from '$lib/components/media/scrollableCardMenu.svelte'
+
+    export let data
+
+    onMount(() => {
+        const logFetchError = (index, errors) => {
+            if (index >= errors.length) return
+
+            const errorMessage = errors[index]
+            $newestAlert = ['warning', errorMessage]
+
+            setTimeout(() => logFetchError((index += 1), errors), 100)
+        }
+
+        logFetchError(0, data.fetchingErrors)
+    })
+</script>
+
+{#if !data.recommendations && data.fetchingErrors.length === 0}
+    <main class="flex h-full flex-col items-center justify-center gap-4 text-center">
+        <h1 class="text-4xl">Let's Add Some Connections</h1>
+        <p class="text-neutral-400">Click the menu in the top left corner and go to Settings &gt; Connections to link to your accounts</p>
+    </main>
+{:else}
+    <main id="recommendations-wrapper" class="h-[200vh] w-full">
+        <ScrollableCardMenu header={'Listen Again'} cardDataList={data.recommendations} />
+    </main>
+{/if}

src/routes/(app)/album/[id]/+page.server.js

@@ -0,0 +1,11 @@
+export async function load({ fetch, params }) {
+    const albumId = params.id
+    const response = await fetch(`/api/jellyfin/album?albumId=${albumId}`)
+    const responseData = await response.json()
+
+    return {
+        id: albumId,
+        albumItemsData: responseData.albumItems,
+        albumData: responseData.albumData,
+    }
+}

src/routes/(app)/album/[id]/+page.svelte

@@ -0,0 +1,56 @@
+<script>
+    import { fly, slide } from 'svelte/transition'
+    import { cubicIn, cubicOut } from 'svelte/easing'
+
+    import { JellyfinUtils } from '$lib/utils'
+    import AlbumBg from '$lib/albumBG.svelte'
+    import Navbar from '$lib/navbar.svelte'
+    import ListItem from '$lib/listItem.svelte'
+    import Header from '$lib/header.svelte'
+    import MediaPlayer from '$lib/mediaPlayer.svelte'
+
+    export let data
+    let albumImg = JellyfinUtils.getImageEnpt(data.id)
+    let discArray = Array.from({ length: data.albumData?.discCount ? data.albumData.discCount : 1 }, (_, i) => {
+        return data.albumItemsData.filter((item) => item?.ParentIndexNumber === i + 1 || !item?.ParentIndexNumber)
+    })
+    let mediaPlayerOpen = false
+    let currentMediaPlayerItem
+
+    const playSong = (event) => {
+        currentMediaPlayerItem = event.detail.item
+        mediaPlayerOpen = true
+    }
+</script>
+
+<div id="main" class="flex h-screen flex-col" in:fly={{ easing: cubicOut, y: 10, duration: 1000, delay: 400 }} out:fly={{ easing: cubicIn, y: -10, duration: 500 }}>
+    <AlbumBg {albumImg} />
+    <Navbar />
+    <div id="layout" class="no-scrollbar relative m-[0_auto] grid w-full max-w-[92vw] grid-cols-1 gap-0 overflow-y-scroll pt-8 md:grid-cols-[1fr_2fr] md:gap-[4%] md:pt-48">
+        <img class="rounded object-cover" src={albumImg} alt="Jacket" draggable="false" />
+        <div class="my-12 flex flex-col gap-4 pr-2">
+            <Header header={data.albumData.name} artists={data.albumData.artists} year={data.albumData.year} length={data.albumData.length} />
+            <div class="flex flex-col gap-4">
+                {#each discArray as disc}
+                    <div>
+                        {#if data.albumData.discCount}
+                            <span class="m-3 block font-notoSans text-lg text-neutral-300">DISC {discArray.indexOf(disc) + 1}</span>
+                        {/if}
+                        <div class="flex w-full flex-col items-center divide-y-[1px] divide-[#353535]">
+                            {#each disc as song}
+                                <ListItem item={song} on:startPlayback={playSong} />
+                            {/each}
+                        </div>
+                    </div>
+                {/each}
+            </div>
+        </div>
+    </div>
+    <div class="fixed bottom-0 z-20 w-full">
+        {#if mediaPlayerOpen}
+            <div transition:slide={{ duration: 400 }} class="h-screen">
+                <MediaPlayer currentlyPlaying={currentMediaPlayerItem} playlistItems={data.albumItemsData} on:closeMediaPlayer={() => (mediaPlayerOpen = false)} on:startPlayback={playSong} />
+            </div>
+        {/if}
+    </div>
+</div>

src/routes/(app)/artist/+page.server.js

@@ -0,0 +1,8 @@
+export async function load({ url }) {
+    const { id, service } = Object.fromEntries(url.searchParams)
+
+    return {
+        artistId: id,
+        connectionId: service,
+    }
+}

src/routes/(app)/artist/+page.svelte

@@ -0,0 +1,8 @@
+<script>
+    export let data
+</script>
+
+<section>
+    <div>This is the page for artist: {data.artistId}</div>
+    <div>From connection: {data.connectionId}</div>
+</section>

src/routes/(app)/details/+page.svelte

@@ -0,0 +1 @@
+<div>Hello, this is where info about the music would go!</div>

src/routes/(app)/library/+page.svelte

@@ -0,0 +1 @@
+<h1>This is where library items will go</h1>

src/routes/(app)/playlist/+page.svelte

@@ -0,0 +1 @@
+<main>Hello this is where playlist go</main>