I'm tired

src/lib/components/media/mediaCard.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+    export let mediaItem: MediaItem
+
+    import Services from '$lib/services.json'
+    import IconButton from '$lib/components/util/iconButton.svelte'
+
+    const iconClasses = {
+        song: 'fa-solid fa-music',
+        album: 'fa-solid fa-compact-disc',
+        artist: 'fa-solid fa-user',
+        playlist: 'fa-solid fa-forward-fast',
+    }
+
+    let card: HTMLDivElement, cardGlare: HTMLDivElement
+
+    const rotateCard = (event: MouseEvent): void => {
+        const cardRect = card.getBoundingClientRect()
+        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 y = (2 * (cardRect.top - event.y)) / cardRect.height + 1
+
+        const 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]"
+
+        cardGlare.style.backgroundImage = `linear-gradient(${angle}rad, transparent ${distanceFromCorner * 50 + 50}%, rgba(255, 255, 255, 0.1) ${distanceFromCorner * 50 + 60}%, transparent 100%)`
+        card.style.transform = `rotateX(${y * 10}deg) rotateY(${x * 10}deg)`
+    }
+
+    const checkSong = (item: MediaItem): item is Song => {
+        return (item as Song).type === 'song'
+    }
+    const checkAlbum = (item: MediaItem): item is Album => {
+        return (item as Album).type === 'album'
+    }
+</script>
+
+<div id="card-wrapper" class="w-52 flex-shrink-0">
+    <div bind:this={card} id="card" class="relative transition-all duration-200 ease-out" on:mousemove={(event) => rotateCard(event)} on:mouseleave={() => (card.style.transform = '')} role="menuitem" tabindex="0">
+        {#if mediaItem.thumbnail}
+            <img id="card-image" class="h-full rounded-lg transition-all" src={mediaItem.thumbnail} alt="{mediaItem.name} thumbnail" />
+        {:else}
+            <div id="card-image" class="grid aspect-square h-full place-items-center rounded-lg bg-lazuli-primary transition-all">
+                <i class="fa-solid fa-compact-disc text-7xl" />
+            </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-12">
+                <IconButton halo={true}>
+                    <i slot="icon" class="fa-solid fa-play text-xl" />
+                </IconButton>
+            </span>
+        </div>
+    </div>
+    <div class="p-2.5 text-sm">
+        <div class="overflow-hidden text-ellipsis" title={mediaItem.name}>{mediaItem.name}</div>
+        <div class="flex w-full items-center gap-1.5 overflow-hidden text-neutral-400">
+            <span class="overflow-hidden text-ellipsis" style="font-size: 0; line-height: 0;">
+                {#if checkSong(mediaItem) || checkAlbum(mediaItem)}
+                    {#each mediaItem.artists as artist}
+                        {@const listIndex = mediaItem.artists.indexOf(artist)}
+                        <a class="text-sm hover:underline" href="/details/artist?id={artist.id}&connection={mediaItem.connectionId}">{artist.name}</a>
+                        {#if listIndex === mediaItem.artists.length - 2}
+                            <span class="mx-0.5 text-sm">&</span>
+                        {:else if listIndex < mediaItem.artists.length - 2}
+                            <span class="mr-0.5 text-sm">,</span>
+                        {/if}
+                    {/each}
+                {/if}
+            </span>
+            {#if mediaItem.type}
+                <span>&bull;</span>
+                <i title="Stream from {Services[mediaItem.service.type].displayName}" class="{iconClasses[mediaItem.type]} text-xs" style="color: var({Services[mediaItem.service.type].primaryColor});" />
+            {/if}
+        </div>
+    </div>
+</div>
+
+<style>
+    #card-wrapper {
+        perspective: 1000px;
+    }
+    #card-wrapper:focus-within #card-image {
+        filter: brightness(50%);
+    }
+    #card-wrapper:focus-within #card-glare {
+        opacity: 1;
+    }
+    #card:hover {
+        scale: 1.05;
+    }
+    #card:hover #card-image {
+        filter: brightness(50%);
+    }
+    #card:hover > #card-glare {
+        opacity: 1;
+    }
+</style>

src/lib/components/media/scrollableCardMenu.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+    export let header: string
+    export let cardDataList: MediaItem[]
+
+    import MediaCard from '$lib/components/media/mediaCard.svelte'
+    import IconButton from '$lib/components/util/iconButton.svelte'
+
+    let scrollable: HTMLDivElement,
+        scrollableWidth: number,
+        isScrollable = false,
+        scrollpos = 0
+
+    $: isScrollable = scrollable?.scrollWidth > scrollableWidth
+    $: scrollpos = scrollable?.scrollLeft / (scrollable?.scrollWidth - scrollableWidth)
+</script>
+
+<section>
+    <div class="flex h-10 items-center justify-between">
+        <h1 class="text-4xl"><strong>{header}</strong></h1>
+        <div class="flex h-full gap-2">
+            <IconButton disabled={scrollpos < 0.01 || !isScrollable} on:click={() => (scrollable.scrollLeft -= scrollable.clientWidth)}>
+                <i slot="icon" class="fa-solid fa-angle-left" />
+            </IconButton>
+            <IconButton disabled={scrollpos > 0.99 || !isScrollable} on:click={() => (scrollable.scrollLeft += scrollable.clientWidth)}>
+                <i slot="icon" class="fa-solid fa-angle-right" />
+            </IconButton>
+        </div>
+    </div>
+    <div
+        bind:this={scrollable}
+        bind:clientWidth={scrollableWidth}
+        on:scroll={() => (scrollpos = scrollable.scrollLeft / (scrollable.scrollWidth - scrollable.clientWidth))}
+        class="no-scrollbar flex gap-6 overflow-y-hidden overflow-x-scroll scroll-smooth p-4"
+    >
+        {#each cardDataList as mediaItem}
+            <MediaCard {mediaItem} />
+        {/each}
+    </div>
+</section>

src/lib/service-managers/jellyfin.ts

@@ -10,24 +10,27 @@ export class Jellyfin {
         }
     }
 
-    static mediaItemFactory = (item: Jellyfin.MediaItem, connection: Connection): MediaItem => {}
-
-    static songFactory = (song: Jellyfin.Song, connection: Connection): Song => {
+    static songFactory = (song: Jellyfin.Song, connection: Jellyfin.JFConnection): Song => {
         const { id, service } = connection
+        const thumbnail = song.ImageTags?.Primary
+            ? new URL(`Items/${song.Id}/Images/Primary`, service.urlOrigin).href
+            : song.AlbumPrimaryImageTag
+              ? new URL(`Items/${song.AlbumId}/Images/Primary`, service.urlOrigin).href
+              : undefined
 
-        const artists: Artist[] | undefined = song.ArtistItems
+        const artists = song.ArtistItems
             ? Array.from(song.ArtistItems, (artist) => {
-                  return { name: artist.Name, id: artist.Id }
+                  return { id: artist.Id, name: artist.Name }
               })
-            : undefined
-
-        const thumbnail = song.ImageTags?.Primary ? new URL(`Items/${song.Id}/Images/Primary`, service.urlOrigin).href : song.AlbumPrimaryImageTag ? new URL(`Items/${song.AlbumId}/Images/Primary`).href : undefined
+            : []
 
         const audoSearchParams = new URLSearchParams(this.audioPresets(service.userId))
         const audioSource = new URL(`Audio/${song.Id}/universal?${audoSearchParams.toString()}`, service.urlOrigin).href
 
-        const factorySong: Song = {
-            connection,
+        return {
+            connectionId: id,
+            service,
+            type: 'song',
             id: song.Id,
             name: song.Name,
             duration: Math.floor(song.RunTimeTicks / 10000),
@@ -37,6 +40,64 @@ export class Jellyfin {
             audio: audioSource,
             releaseDate: String(song.ProductionYear),
         }
-        return factorySong
+    }
+
+    static albumFactory = (album: Jellyfin.Album, connection: Jellyfin.JFConnection): Album => {
+        const { id, service } = connection
+        const thumbnail = album.ImageTags?.Primary ? new URL(`Items/${album.Id}/Images/Primary`, service.urlOrigin).href : undefined
+
+        const albumArtists = album.AlbumArtists
+            ? Array.from(album.AlbumArtists, (artist) => {
+                  return { id: artist.Id, name: artist.Name }
+              })
+            : []
+
+        const artists = album.ArtistItems
+            ? Array.from(album.ArtistItems, (artist) => {
+                  return { id: artist.Id, name: artist.Name }
+              })
+            : []
+
+        return {
+            connectionId: id,
+            service,
+            type: 'album',
+            id: album.Id,
+            name: album.Name,
+            duration: Math.floor(album.RunTimeTicks / 10000),
+            thumbnail,
+            albumArtists,
+            artists,
+            releaseDate: String(album.ProductionYear),
+        }
+    }
+
+    static playListFactory = (playlist: Jellyfin.Playlist, connection: Jellyfin.JFConnection): Playlist => {
+        const { id, service } = connection
+        const thumbnail = playlist.ImageTags?.Primary ? new URL(`Items/${playlist.Id}/Images/Primary`, service.urlOrigin).href : undefined
+
+        return {
+            connectionId: id,
+            service,
+            type: 'playlist',
+            id: playlist.Id,
+            name: playlist.Name,
+            duration: Math.floor(playlist.RunTimeTicks / 10000),
+            thumbnail,
+        }
+    }
+
+    static artistFactory = (artist: Jellyfin.Artist, connection: Jellyfin.JFConnection): Artist => {
+        const { id, service } = connection
+        const thumbnail = artist.ImageTags?.Primary ? new URL(`Items/${artist.Id}/Images/Primary`, service.urlOrigin).href : undefined
+
+        return {
+            connectionId: id,
+            service,
+            type: 'artist',
+            id: artist.Id,
+            name: artist.Name,
+            thumbnail,
+        }
     }
 }