Screwed around with the layout a bit

src/hooks.server.js

@@ -7,7 +7,7 @@ export async function handle({ event, resolve }) {
     const nonProtectedRoutes = ['/login']
     const urlpath = event.url.pathname
 
-    if (urlpath.startsWith('/api') && event.request.headers.get('apikey') !== SECRET_INTERNAL_API_KEY) {
+    if (urlpath.startsWith('/api') && event.request.headers.get('apikey') !== SECRET_INTERNAL_API_KEY && event.url.searchParams.get('apikey') !== SECRET_INTERNAL_API_KEY) {
         return new Response('Unauthorized', { status: 400 })
     }
 

src/lib/components/media/mediaCard.svelte

@@ -3,7 +3,6 @@
 
     import Services from '$lib/services.json'
     import IconButton from '$lib/components/utility/iconButton.svelte'
-    import { onMount } from 'svelte'
 
     const iconClasses = {
         song: 'fa-solid fa-music',
@@ -12,24 +11,12 @@
         playlist: 'fa-solid fa-forward-fast',
     }
 
-    let card,
+    let card, cardGlare
-        cardGlare,
-        cardWidth,
-        cardHeight,
-        icon = iconClasses[mediaData.mediaType]
-
-    onMount(() => {
-        const cardRect = card.getBoundingClientRect()
-        cardWidth = cardRect.width
-        cardHeight = cardRect.height
-    })
 
     const rotateCard = (event) => {
         const cardRect = card.getBoundingClientRect()
-        const cardCenterX = cardRect.left + cardWidth / 2
+        const x = (2 * (event.x - cardRect.left)) / cardRect.width - 1 // These are simplified calculations to find the x-y coords relative to the center of the card
-        const cardCenterY = cardRect.top + cardHeight / 2
+        const y = (2 * (cardRect.top - event.y)) / cardRect.height + 1
-        const x = ((event.x - cardCenterX) * 2) / cardWidth
-        const y = ((cardCenterY - event.y) * 2) / cardHeight
 
         let angle = Math.atan(x / y) // You'd think it should be y / x but it's actually the inverse
         const distanceFromCorner = Math.sqrt((x - 1) ** 2 + (y - 1) ** 2) // This is a cool little trick, the -1 on the x an y coordinate is effective the same as saying "make the origin of the glare [1, 1]"
@@ -38,11 +25,11 @@
         card.style.transform = `rotateX(${y * 10}deg) rotateY(${x * 10}deg)`
     }
 
-    // TEST IMAGES (Remember to refresh! Vite doesn't retrigger the onMount calculation) ---> https://f4.bcbits.com/img/a2436961975_10.jpg | {mediaData.image} | https://i.ytimg.com/vi/yvFgNP9iqd4/maxresdefault.jpg
+    // TEST IMAGES --> https://f4.bcbits.com/img/a2436961975_10.jpg | {mediaData.image} | https://i.ytimg.com/vi/yvFgNP9iqd4/maxresdefault.jpg
 </script>
 
 <a id="card-wrapper" on:mousedown|preventDefault on:mousemove={(event) => rotateCard(event)} on:mouseleave={() => (card.style.transform = null)} href="/details?id={mediaData.id}&service={mediaData.connectionId}">
-    <div bind:this={card} id="card" class="relative h-56 transition-all duration-200 ease-out">
+    <div bind:this={card} id="card" class="relative h-60 transition-all duration-200 ease-out">
         {#if mediaData.image}
             <img id="card-image" class="h-full max-w-none rounded-lg transition-all" src={mediaData.image} alt="{mediaData.name} thumbnail" />
         {:else}
@@ -51,7 +38,7 @@
             </div>
         {/if}
         <div bind:this={cardGlare} id="card-glare" class="absolute top-0 grid h-full w-full place-items-center rounded-lg opacity-0 transition-opacity duration-200 ease-out">
-            <span class="relative h-14">
+            <span class="relative h-12">
                 <IconButton on:click={() => console.log(`Play ${mediaData.name}`)}>
                     <i slot="icon" class="fa-solid fa-play text-xl" />
                 </IconButton>
@@ -60,10 +47,21 @@
         <div id="card-label" class="absolute -bottom-3 w-full px-2.5 text-sm">
             <div class="overflow-hidden text-ellipsis whitespace-nowrap" title={mediaData.name}>{mediaData.name}</div>
             <div class="flex w-full items-center gap-1.5 overflow-hidden text-neutral-400">
-                <span class="overflow-hidden text-ellipsis">{Array.from(mediaData.artists, (artist) => artist.name).join(', ')}</span>
+                <span id="artist-list" class="overflow-hidden text-ellipsis" style="font-size: 0;">
+                    <!-- the font size of zero is to remove the stupid little gaps between the spans -->
+                    {#each mediaData.artists as artist}
+                        {@const listIndex = mediaData.artists.indexOf(artist)}
+                        <a class="text-sm hover:underline" href="/artist?id={artist.id}&service={mediaData.connectionId}">{artist.name}</a>
+                        {#if listIndex === mediaData.artists.length - 2}
+                            <span class="mx-0.5 text-sm">&</span>
+                        {:else if listIndex < mediaData.artists.length - 2}
+                            <span class="mr-0.5 text-sm">,</span>
+                        {/if}
+                    {/each}
+                </span>
                 {#if mediaData.mediaType}
                     <span>&bull;</span>
-                    <i class="{icon} text-xs" style="color: var({Services[mediaData.serviceType].primaryColor});" />
+                    <i class="{iconClasses[mediaData.mediaType]} text-xs" style="color: var({Services[mediaData.serviceType].primaryColor});" />
                 {/if}
             </div>
         </div>

src/lib/components/media/scrollableCardMenu.svelte

@@ -3,44 +3,15 @@
     export let cardDataList
 
     import Card from '$lib/components/media/mediaCard.svelte'
-    import { onMount } from 'svelte'
-
-    let scrollableWrapper,
-        scrollableWrapperWidth,
-        scrollable,
-        scrollableWidth,
-        isHovered,
-        scrollpos = 0
-
-    onMount(() => {
-        scrollableWrapperWidth = scrollableWrapper.clientWidth - 96 // Account for x padding
-        scrollableWidth = Math.abs(scrollableWrapperWidth - scrollable.scrollWidth)
-    })
 </script>
 
-<section>
+<section class="overflow-visible">
     {#if header}
-        <h1 class="px-12 text-4xl"><strong>{header}</strong></h1>
+        <h1 class="text-4xl"><strong>{header}</strong></h1>
     {/if}
-    <div
+    <div class="no-scrollbar flex gap-6 overflow-y-hidden overflow-x-scroll py-4">
-        bind:this={scrollableWrapper}
-        role="menu"
-        tabindex="-1"
-        class="overflow-hidden px-12 py-4"
-        on:focus={() => (isHovered = true)}
-        on:blur={() => (isHovered = false)}
-        on:wheel={(event) => {
-            if (isHovered) {
-                scrollpos += event.deltaY / 2 // Change divisor to adjust speed
-                scrollpos = Math.min(Math.max(0, scrollpos), scrollableWidth)
-                scrollable.style.transform = `translateX(-${scrollpos}px)`
-            }
-        }}
-    >
-        <div id="scrollable" bind:this={scrollable} class="no-scrollbar flex gap-6 transition-transform duration-200 ease-out">
         {#each cardDataList as cardData}
             <Card mediaData={cardData} />
         {/each}
     </div>
-    </div>
 </section>

src/lib/components/utility/hamburgerMenu.svelte

@@ -3,6 +3,14 @@
     import { spin } from '$lib/utils/animations'
     import { page } from '$app/stores'
 
+    export let alignDropdown = 'left'
+
+    const align = {
+        left: 'left-0',
+        right: 'right-0',
+        center: 'left-1/2 -translate-x-1/2',
+    }[alignDropdown]
+
     let button,
         icon,
         open = false
@@ -33,16 +41,13 @@
         {/if}
     </button>
     {#if open}
-        <section transition:slide={{ duration: 200, axis: 'y' }} id="dropdown" class="absolute w-screen max-w-sm">
+        <section transition:slide={{ axis: 'y' }} class="absolute top-full {align}">
             <slot name="menu-items" />
         </section>
     {/if}
 </div>
 
 <style>
-    #dropdown {
-        top: calc(100% + 0.6rem);
-    }
     #button::before {
         content: '';
         width: 0;

src/lib/components/utility/navbar.svelte

@@ -1,5 +1,4 @@
 <script>
-    import HamburgerMenu from './hamburgerMenu.svelte'
     import IconButton from './iconButton.svelte'
     import SearchBar from './searchBar.svelte'
     import { goto, afterNavigate } from '$app/navigation'
@@ -15,19 +14,12 @@
 </script>
 
 <svelte:window bind:scrollY={windowY} />
-<nav id="navbar" class="fixed left-0 top-0 isolate z-10 h-16 w-full">
+<nav id="navbar" class="sticky left-0 top-0 isolate z-10 h-16">
-    <div class="grid h-full grid-cols-3">
+    <div class="flex h-full items-center justify-between gap-6 px-6">
-        <div class="flex h-full items-center gap-5 py-4 pl-6">
+        <div class="w-full max-w-2xl">
-            <HamburgerMenu>
+            <SearchBar />
-                <ol slot="menu-items" class="overflow-hidden rounded-lg border-2 border-neutral-800 bg-neutral-925 p-2">
+        </div>
-                    <li>
+        <div class="flex h-full gap-4 py-4">
-                        <button class="w-full rounded-md px-3 py-2 text-left hover:bg-neutral-900" on:click={() => goto('/settings')}>
-                            <i class="fa-solid fa-gear mr-1" />
-                            Settings
-                        </button>
-                    </li>
-                </ol>
-            </HamburgerMenu>
             {#if previousPage && $page.url.pathname !== '/'}
                 <IconButton on:click={() => history.back()}>
                     <i slot="icon" class="fa-solid fa-arrow-left text-xl" />
@@ -39,10 +31,8 @@
                 </IconButton>
             {/if}
         </div>
-        <SearchBar />
     </div>
     {#if windowY > 0}
         <div transition:fade={{ duration: 150 }} id="navbar-background" class="absolute left-0 top-0 -z-10 h-full w-full bg-neutral-925" />
-        <!-- This would be a cool place for personalization -->
     {/if}
 </nav>

src/routes/+layout.svelte

@@ -21,13 +21,7 @@
     onMount(() => (loaded = true))
 </script>
 
-{#if $page.url.pathname === '/api'}
+<main class="h-screen font-notoSans text-white">
-    <slot />
-{:else}
-    <main class="h-screen font-notoSans text-white">
-        {#if $page.url.pathname !== '/login'}
-            <Navbar />
-        {/if}
     <div class="fixed isolate -z-10 h-full w-full bg-black">
         <!-- This whole bg is a complete copy of ytmusic, design own at some point (Place for customization w/ album art etc?) (EDIT: Ok, it looks SICK with album art!) -->
         <div id="background-gradient" class="absolute z-10 h-1/2 w-full bg-cover" />
@@ -36,10 +30,21 @@
             <img id="background-image" src={backgroundImage} alt="" class="h-1/2 w-full object-cover blur-xl" in:fade={{ duration: 1000 }} />
         {/if}
     </div>
+    {#if $page.url.pathname === '/login'}
         <slot />
+    {:else}
+        <div class="grid h-full grid-cols-[5rem_auto]">
+            <div class="h-full bg-slate-600" />
+            <div class="grid h-full grid-rows-[4rem_auto] gap-8">
+                <Navbar />
+                <div class="no-scrollbar overflow-y-scroll">
+                    <slot />
+                </div>
+            </div>
+        </div>
         <AlertBox bind:this={alertBox} />
-    </main>
+    {/if}
-{/if}
+</main>
 
 <style>
     #background-gradient {

src/routes/+page.svelte

@@ -25,7 +25,7 @@
         <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="pt-24">
+    <main id="recommendations-wrapper" class="h-screen px-8">
         <ScrollableCardMenu header={'Listen Again'} cardDataList={data.recommendations} />
     </main>
 {/if}

src/routes/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/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/artist/[id]/+page.server.js

@@ -1,10 +0,0 @@
-export async function load({ params, fetch }) {
-    const artistId = params.id
-    const response = await fetch(`/api/jellyfin/artist?artistId=${artistId}`)
-    const responseData = await response.json()
-
-    return {
-        id: artistId,
-        artistItems: responseData,
-    }
-}

src/routes/artist/[id]/+page.svelte

@@ -1,32 +0,0 @@
-<script>
-    import AlbumCard from '$lib/albumCard.svelte';
-    export let data;
-
-    const artistItems = data.artistItems
-</script>
-
-<div class="grid">
-    { #each artistItems.albums as item }
-        <AlbumCard {item} cardType="albums"/>
-    { /each }
-</div>
-<div class="grid">
-    { #each artistItems.singles as item }
-        <AlbumCard {item} cardType="singles"/>
-    { /each }
-</div>
-<div class="grid">
-    { #each artistItems.appearances as item }
-        <AlbumCard  {item} cardType="appearances"/>
-    { /each }
-</div>
-<div>
-    Test
-</div>
-
-<style>
-    .grid {
-        display: grid;
-        grid-template-columns: repeat(9, 200px);
-    }
-</style>

src/routes/song/[id]/+page.server.js

@@ -1,10 +0,0 @@
-export async function load ({ params, fetch }) {
-    const songId = params.id
-    const response = await fetch(`/api/jellyfin/song?songId=${songId}`)
-    const responseData = await response.json()
-
-    return {
-        id: songId,
-        songData: responseData
-    }
-}

src/routes/song/[id]/+page.svelte

@@ -1,9 +0,0 @@
-<script>
-    export let data;
-
-    const songData = data.songData
-</script>
-
-<div>
-    <p>{songData.Name}</p>
-</div>