first commit

2023-10-09 17:49:46 -04:00
commit b2790a7151
33 changed files with 3027 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,10 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
--- a/.npmrc
+++ b/.npmrc
@@ -0,0 +1,2 @@
+engine-strict=true
+resolution-mode=highest
--- a/.prettierrc
+++ b/.prettierrc
@@ -0,0 +1,16 @@
+{
+    "tabWidth": 4,
+    "singleQuote": true,
+    "semi": false,
+    "printWidth": 250,
+    "bracketSpacing": true,
+    "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
+    "overrides": [
+        {
+            "files": "*.svelte",
+            "options": {
+                "parser": "svelte"
+            }
+        }
+    ]
+}
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -0,0 +1,2 @@
+{
+}
--- a/README.md
+++ b/README.md
@@ -0,0 +1,38 @@
+# create-svelte
+
+Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npm create svelte@latest
+
+# create a new project in my-app
+npm create svelte@latest my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
--- a/feature-ideas.txt
+++ b/feature-ideas.txt
@@ -0,0 +1,10 @@
+Settings:
+Light/Dark Mode
+Album Art Mode: Toggle whether or not album art is used in various backdrops and styling
+
+Integrations:
+Stream from YT
+last.fm
+MusicBrainz
+discogs marketplace
+bandcamp
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,26 @@
+{
+    "name": "lazuli",
+    "version": "0.0.1",
+    "private": true,
+    "scripts": {
+        "dev": "vite dev",
+        "build": "vite build",
+        "preview": "vite preview"
+    },
+    "devDependencies": {
+        "@sveltejs/adapter-auto": "^2.0.0",
+        "@sveltejs/kit": "^1.20.4",
+        "autoprefixer": "^10.4.15",
+        "postcss": "^8.4.28",
+        "prettier": "^3.0.3",
+        "prettier-plugin-svelte": "^3.0.3",
+        "prettier-plugin-tailwindcss": "^0.5.4",
+        "svelte": "^4.0.5",
+        "tailwindcss": "^3.3.3",
+        "vite": "^4.4.2"
+    },
+    "type": "module",
+    "dependencies": {
+        "@fortawesome/fontawesome-free": "^6.4.2"
+    }
+}
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+}
--- a/src/app.css
+++ b/src/app.css
@@ -0,0 +1,14 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+.no-scrollbar::-webkit-scrollbar {
+    display: none;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+.no-scrollbar {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+}
--- a/src/app.html
+++ b/src/app.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <link rel="icon" href="%sveltekit.assets%/favicon.png" />
+        <meta name="viewport" content="width=device-width" />
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+        <link
+            href="https://fonts.googleapis.com/css2?family=Noto+Sans+HK:wght@500&family=Noto+Sans+JP:wght@500&family=Noto+Sans+KR:wght@500&family=Noto+Sans+SC:wght@500&family=Noto+Sans+TC:wght@500&family=Noto+Sans:wght@500&display=swap"
+            rel="stylesheet"
+        />
+        %sveltekit.head%
+    </head>
+    <body data-sveltekit-preload-data="hover" class="no-scrollbar m-0">
+        <div style="display: contents">%sveltekit.body%</div>
+    </body>
+</html>
--- a/src/lib/Jellyfin-api.js
+++ b/src/lib/Jellyfin-api.js
@@ -0,0 +1,74 @@
+export const ROOT_URL = 'http://eclypsecloud:8096/'
+export const API_KEY = 'fd4bf4c18e5f4bb08c2cb9f6a1542118'
+export const USER_ID = '7364ce5928c64b90b5765e56ca884053'
+
+const baseURLGenerator = {
+    Items: () => `Users/${USER_ID}/Items`,
+    Image: (params) => `Items/${params.id}/Images/Primary`,
+    Audio: (params) => `Audio/${params.id}/universal`,
+}
+
+export const generateURL = ({ type, pathParams, queryParams }) => {
+    const baseURLFunction = baseURLGenerator[type]
+
+    if (baseURLFunction) {
+        const baseURL = ROOT_URL.concat(baseURLFunction(pathParams))
+        const queryParamList = queryParams ? Object.entries(queryParams).map(([key, value]) => `${key}=${value}`) : []
+        queryParamList.push(`api_key=${API_KEY}`)
+
+        return baseURL.concat('?' + queryParamList.join('&'))
+    } else {
+        throw new Error('API Url Type does not exist')
+    }
+}
+
+export const fetchArtistItems = async (artistId) => {
+    try {
+        const response = await fetch(
+            generateURL({
+                type: 'Items',
+                queryParams: { artistIds: artistId, recursive: true },
+            }),
+        )
+        const data = await response.json()
+
+        const artistItems = {
+            albums: [],
+            singles: [],
+            appearances: [],
+        }
+
+        // Filters the raw list of items to only the albums that were produced in fully or in part by the specified artist
+        artistItems.albums = data.Items.filter((item) => item.Type === 'MusicAlbum' && item.AlbumArtists.some((artist) => artist.Id === artistId))
+
+        data.Items.forEach((item) => {
+            if (item.Type === 'Audio') {
+                if (!('AlbumId' in item)) {
+                    artistItems.singles.push(item)
+                } else if (!artistItems.albums.some((album) => album.Id === item.AlbumId)) {
+                    artistItems.appearances.push(item)
+                }
+            }
+        })
+
+        return artistItems
+    } catch (error) {
+        console.log('Error Fetching Artist Items:', error)
+    }
+}
+
+export const fetchSong = async (songId) => {
+    try {
+        const response = await fetch(
+            generateURL({
+                type: 'Items',
+                queryParams: { ids: songId, recursive: true },
+            }),
+        )
+        const data = await response.json()
+
+        return data.Items[0]
+    } catch (error) {
+        console.log('Error Fetch Song', error)
+    }
+}
--- a/src/lib/albumBG.svelte
+++ b/src/lib/albumBG.svelte
@@ -0,0 +1,8 @@
+<script>
+    export let albumImg;
+</script>
+
+<div id="album-bg-wrapper" class="w-full h-screen overflow-hidden absolute z-0">
+    <div class="h-full bg-cover bg-center brightness-[30%]" style="background-image: url({albumImg});" draggable="false"/>
+    <div class="bg-neutral-900 w-full h-full absolute top-1/2 z-10 skew-y-6"/>
+</div>
--- a/src/lib/albumCard.svelte
+++ b/src/lib/albumCard.svelte
@@ -0,0 +1,43 @@
+<script>
+    export let item;
+    export let cardType;
+
+    import { generateURL } from '$lib/Jellyfin-api.js';
+
+    const getAlbumCardLink = (item) => {
+        if (cardType === "albums") {
+            return `/album/${item.Id}`;
+        } else if (cardType === "appearances") {
+            return `/album/${item.AlbumId}`;
+        } else if (cardType === "singles") {
+            return `/song/${item.Id}`
+        } else {
+            throw new Error("No such cardType: " + cardType);
+        };
+    };
+</script>
+
+<a href={getAlbumCardLink(item)} style="text-decoration: none;">
+    <div class="image-card">
+        <img src="{generateURL({type: 'Image', pathParams: {'id': 'Primary' in item.ImageTags ? item.Id : item.AlbumId}})}" alt="jacket">
+        <span>{item.Name}</span>
+    </div>
+</a>
+
+<style>
+    .image-card {
+        width: 100%;
+        aspect-ratio: 0.8;
+        background-color: rgb(32, 32, 32);
+        margin: 0;
+    }
+    img {
+        width: 100%;
+        aspect-ratio: 1;
+        object-fit: cover;
+    }
+    span {
+        color: white;
+        text-align: center;
+    }
+</style>
--- a/src/lib/audio-manager.js
+++ b/src/lib/audio-manager.js
@@ -0,0 +1,21 @@
+import { generateURL } from '$lib/Jellyfin-api'
+import { USER_ID } from '$lib/Jellyfin-api'
+
+const paramPresets = {
+    default: {
+        MaxStreamingBitrate: '999999999',
+        Container: 'opus,webm|opus,mp3,aac,m4a|aac,m4b|aac,flac,webma,webm|webma,wav,ogg',
+        TranscodingContainer: 'ts',
+        TranscodingProtocol: 'hls',
+        AudioCodec: 'aac',
+        userId: USER_ID,
+    },
+}
+
+export const buildAudioEndpoint = (id, params) => {
+    return generateURL({
+        type: 'Audio',
+        pathParams: { id: id },
+        queryParams: paramPresets[params],
+    })
+}
--- a/src/lib/header.svelte
+++ b/src/lib/header.svelte
@@ -0,0 +1,35 @@
+<script>
+    export let header;
+    export let artists;
+    export let year;
+    export let length;
+
+    import { ticksToTime } from '$lib/utils.js';
+</script>
+
+<div class="text-white flex flex-col items-baseline font-notoSans gap-2">
+    <span class="text-[3rem] leading-[4rem] line-clamp-2">{header}</span>
+    <div id="details" class="flex text-xl text-neutral-300">
+        {#if length}
+        <span>{ticksToTime(length)}</span>
+        {/if}
+        <span class="flex">
+            {#if artists}
+            {#each artists as artist}
+            <a class="no-underline hover:underline" href="/artist/{artist.Id}">{artist.Name}</a>
+            {#if artists.indexOf(artist) !== artists.length - 1}<span class="mx-2">/</span>{/if}
+            {/each}
+            {/if}
+        </span>
+        {#if year}
+        <span>{year}</span>
+        {/if}
+    </div>
+</div>
+
+<style>
+    #details > span:not(:last-child)::after {
+        content: "•";
+        margin: 0 .75rem;
+    }
+</style>
--- a/src/lib/listItem.svelte
+++ b/src/lib/listItem.svelte
@@ -0,0 +1,27 @@
+<script>
+    export let item
+
+    import { generateURL } from '$lib/Jellyfin-api.js'
+    import { ticksToTime } from '$lib/utils.js'
+    import { createEventDispatcher } from 'svelte'
+
+    $: jacketSrc = generateURL({ type: 'Image', pathParams: { id: 'Primary' in item.ImageTags ? item.Id : item.AlbumId } })
+
+    const dispatch = createEventDispatcher()
+
+    const startPlaybackDispatcher = () => {
+        dispatch('startPlayback', {
+            item: item,
+        })
+    }
+</script>
+
+<button on:click={startPlaybackDispatcher} class="grid w-full grid-cols-[1em_50px_auto_3em] items-center gap-3 bg-[#1111116b] p-3 text-left font-notoSans text-neutral-300 transition-[width] duration-100 hover:w-[102%]">
+    <div class="justify-self-center">{item.IndexNumber}</div>
+    <img class="justify-self-center" src={jacketSrc} alt="" draggable="false" />
+    <div class="justify-items-left">
+        <div class="line-clamp-2">{item.Name}</div>
+        <div class="mt-[.15rem] text-neutral-500">{item.Artists.join(', ')}</div>
+    </div>
+    <span class="text-right">{ticksToTime(item.RunTimeTicks)}</span>
+</button>
--- a/src/lib/mediaControl.svelte
+++ b/src/lib/mediaControl.svelte
@@ -0,0 +1,56 @@
+<script>
+    export let type
+
+    import { createEventDispatcher } from 'svelte'
+    import { onMount } from 'svelte'
+
+    const dispatch = createEventDispatcher()
+
+    const eventTypesIcons = {
+        playing: 'fa-solid fa-pause', // Reversed - If song is playing, should be pause icon
+        paused: 'fa-solid fa-play', // Reversed - If song is paused, should be play icon
+        stop: 'fa-solid fa-stop',
+        nexttrack: 'fa-solid fa-forward-step',
+        previoustrack: 'fa-solid fa-backward-step',
+    }
+
+    $: icon = eventTypesIcons[type] // Reacitive for when the type switches between playing/paused
+
+    onMount(() => {
+        if (!(type in eventTypesIcons)) {
+            throw new Error(`${type} type is not a valid mediaControl type`)
+        }
+    })
+
+    const mediaControlEvent = () => {
+        dispatch('mediaControlEvent', {
+            eventType: type,
+        })
+    }
+</script>
+
+<button id="button" on:click={mediaControlEvent} class="relative z-0 aspect-square max-h-full max-w-full overflow-hidden rounded-full">
+    <i class="{icon} text-3xl text-white" />
+</button>
+
+<style>
+    #button:hover::before {
+        background-color: rgba(0, 164, 220, 0.2);
+        height: 100%;
+    }
+    #button::before {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        background-color: #00a4dc;
+        border-radius: 100%;
+        height: 80%;
+        aspect-ratio: 1;
+        transition-property: height background-color;
+        transition-duration: 80ms;
+        transition-timing-function: linear;
+        z-index: -1;
+    }
+</style>
--- a/src/lib/mediaPlayer.svelte
+++ b/src/lib/mediaPlayer.svelte
@@ -0,0 +1,187 @@
+<script>
+    export let currentlyPlaying
+    export let playlistItems
+
+    import { buildAudioEndpoint } from '$lib/audio-manager.js'
+    import { onMount } from 'svelte'
+    import { createEventDispatcher } from 'svelte'
+    import { generateURL } from '$lib/Jellyfin-api.js'
+    import { fade } from 'svelte/transition'
+
+    import ListItem from '$lib/listItem.svelte'
+    import MediaControl from '$lib/mediaControl.svelte'
+
+    const dispatch = createEventDispatcher()
+
+    $: currentlyPlayingImageId = 'Primary' in currentlyPlaying.ImageTags ? currentlyPlaying.Id : currentlyPlaying.AlbumId
+    $: currentlyPlayingImage = generateURL({
+        type: 'Image',
+        pathParams: { id: currentlyPlayingImageId },
+    })
+
+    $: audioEndpoint = buildAudioEndpoint(currentlyPlaying.Id, 'default')
+    let audio
+    let audioVolume = 0.1
+    let progressBar
+
+    let playingState = 'paused'
+
+    onMount(() => {
+        audio = document.getElementById('audio')
+        audio.volume = audioVolume
+        progressBar = document.getElementById('progress-bar')
+
+        if ('mediaSession' in navigator) {
+            navigator.mediaSession.setActionHandler('play', () => playSong())
+            navigator.mediaSession.setActionHandler('pause', () => pauseSong())
+            navigator.mediaSession.setActionHandler('stop', () => closeMediaPlayer())
+            navigator.mediaSession.setActionHandler('nexttrack', () => playNext())
+            navigator.mediaSession.setActionHandler('previoustrack', () => playPrevious())
+        }
+    })
+
+    $: updateAudioSrc(audioEndpoint)
+    const updateAudioSrc = (newAudioEndpoint) => {
+        if (!audio) {
+            return onMount(() => {
+                audio.src = newAudioEndpoint
+                playSong()
+            })
+        }
+        audio.src = newAudioEndpoint
+        playSong()
+    }
+
+    $: updateMediaSession(currentlyPlaying)
+    const updateMediaSession = (media) => {
+        if ('mediaSession' in navigator) {
+            navigator.mediaSession.metadata = new MediaMetadata({
+                title: media.Name,
+                artist: media.Artists.join(' / '),
+                album: media.Album,
+                artwork: [
+                    {
+                        src: currentlyPlayingImage + '&width=96&height=96',
+                        sizes: '96x96',
+                        type: 'image/png',
+                    },
+                    {
+                        src: currentlyPlayingImage + '&width=128&height=128',
+                        sizes: '128x128',
+                        type: 'image/png',
+                    },
+                    {
+                        src: currentlyPlayingImage + '&width=192&height=192',
+                        sizes: '192x192',
+                        type: 'image/png',
+                    },
+                    {
+                        src: currentlyPlayingImage + '&width=256&height=256',
+                        sizes: '256x256',
+                        type: 'image/png',
+                    },
+                    {
+                        src: currentlyPlayingImage + '&width=384&height=384',
+                        sizes: '384x384',
+                        type: 'image/png',
+                    },
+                    {
+                        src: currentlyPlayingImage + '&width=512&height=512',
+                        sizes: '512x512',
+                        type: 'image/png',
+                    },
+                ],
+            })
+        }
+    }
+
+    const playSong = () => {
+        audio.play()
+        playingState = 'playing'
+    }
+
+    const pauseSong = () => {
+        audio.pause()
+        playingState = 'paused'
+    }
+
+    const playNext = () => {
+        let nextSong = playlistItems[playlistItems.indexOf(currentlyPlaying) + 1]
+        if (nextSong) {
+            dispatch('startPlayback', {
+                item: nextSong,
+            })
+        }
+    }
+
+    const playPrevious = () => {
+        let previousSong = playlistItems[playlistItems.indexOf(currentlyPlaying) - 1]
+        if (previousSong) {
+            dispatch('startPlayback', {
+                item: previousSong,
+            })
+        }
+    }
+
+    const updateProgressBar = (event) => {
+        if (event.target.currentTime) {
+            let currentPercentage = event.target.currentTime / event.target.duration
+            if (document.activeElement !== progressBar) {
+                progressBar.value = currentPercentage
+            }
+        }
+    }
+
+    const updateAudioTime = () => {
+        let audioTimeStamp = audio.duration * progressBar.value
+        audio.currentTime = audioTimeStamp
+    }
+
+    const closeMediaPlayer = () => {
+        dispatch('closeMediaPlayer')
+    }
+</script>
+
+<div id="layout" class="grid h-full grid-cols-1 grid-rows-[3fr_2fr] lg:grid-cols-[2fr_1fr] lg:grid-rows-1">
+    <div class="relative h-full overflow-hidden">
+        <div class="absolute z-0 flex h-full w-full items-center justify-items-center bg-neutral-900">
+            <div class="absolute z-10 h-full w-full backdrop-blur-3xl"></div>
+            {#key currentlyPlaying}
+                <img in:fade src={currentlyPlayingImage} alt="" class="absolute h-full w-full object-cover brightness-[70%]" />
+            {/key}
+        </div>
+        <div class="absolute grid h-full w-full grid-rows-[auto_8rem_3rem_6rem] justify-items-center p-8">
+            {#key currentlyPlaying}
+                <img in:fade src={currentlyPlayingImage} alt="" class="h-full min-h-[8rem] overflow-hidden rounded-xl object-contain p-2" />
+            {/key}
+            <div in:fade class="flex flex-col items-center justify-center gap-1 px-8 text-center font-notoSans">
+                {#key currentlyPlaying}
+                    <span class="text-xl text-neutral-500">{currentlyPlaying.Album}</span>
+                    <span class="text-3xl text-neutral-300">{currentlyPlaying.Name}</span>
+                    <span class="text-xl text-neutral-500">{currentlyPlaying.Artists.join(' / ')}</span>
+                {/key}
+            </div>
+            <input id="progress-bar" on:mouseup={updateAudioTime} type="range" value="0" min="0" max="1" step="any" class="w-[90%] cursor-pointer rounded-lg bg-gray-400" />
+            <div class="flex h-full w-11/12 justify-around overflow-hidden">
+                <MediaControl type={'previoustrack'} on:mediaControlEvent={() => playPrevious()} />
+                <MediaControl type={playingState} on:mediaControlEvent={(event) => (event.detail.eventType === 'playing' ? pauseSong() : playSong())} />
+                <MediaControl type={'stop'} on:mediaControlEvent={() => closeMediaPlayer()} />
+                <MediaControl type={'nexttrack'} on:mediaControlEvent={() => playNext()} />
+            </div>
+        </div>
+    </div>
+    <div class="no-scrollbar flex w-full flex-col items-center divide-y-[1px] divide-[#353535] overflow-y-scroll bg-neutral-900 p-4">
+        {#each playlistItems as item}
+            {#if item == currentlyPlaying}
+                <div class="flex w-full bg-neutral-500">
+                    <ListItem {item} />
+                </div>
+            {:else}
+                <div class="flex w-full hover:bg-neutral-500">
+                    <ListItem {item} on:startPlayback />
+                </div>
+            {/if}
+        {/each}
+    </div>
+    <audio id="audio" on:ended={playNext} on:timeupdate={updateProgressBar} crossorigin="anonymous" class="hidden" />
+</div>
--- a/src/lib/navbar.svelte
+++ b/src/lib/navbar.svelte
@@ -0,0 +1,16 @@
+<script>
+    import { onMount } from "svelte";
+
+    onMount(() => {
+        window.onscroll = () => {
+            const navbar = document.getElementById('navbar');
+            if (window.scrollY !== 0) {
+                navbar.style.backgroundColor = '#00000091';
+            } else if (window.scrollY == 0) {
+                navbar.style.backgroundColor = '#00000000';
+            };
+        };
+    })
+</script>
+
+<nav id="navbar" class="w-full h-16 z-10 bg-transparent fixed transition-[background_color] ease-linear duration-300"></nav>
--- a/src/lib/utils.js
+++ b/src/lib/utils.js
@@ -0,0 +1,20 @@
+export const ticksToTime = (ticks) => {
+    const totalSeconds = ~~(ticks / 10000000)
+    const totalMinutes = ~~(totalSeconds / 60)
+    const hours = ~~(totalMinutes / 60)
+
+    const remainderMinutes = totalMinutes - hours * 60
+    const remainderSeconds = totalSeconds - totalMinutes * 60
+
+    const format = (value) => {
+        return value < 10 ? `0${value}` : value
+    }
+
+    if (hours > 0) {
+        return `${hours}:${format(remainderMinutes)}:${format(
+            remainderSeconds
+        )}`
+    } else {
+        return `${remainderMinutes}:${format(remainderSeconds)}`
+    }
+}
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -0,0 +1,6 @@
+<script>
+    import '../app.css'
+    import '@fortawesome/fontawesome-free/css/all.min.css'
+</script>
+
+<slot />
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -0,0 +1,2 @@
+<h1 class="underline text-green-400">Welcome to SvelteKit</h1>
+<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
--- a/src/routes/album/[id]/+page.js
+++ b/src/routes/album/[id]/+page.js
@@ -0,0 +1,40 @@
+import { generateURL } from '$lib/Jellyfin-api.js'
+
+export async function load({ fetch, params }) {
+    const response = await fetch(
+        generateURL({
+            type: 'Items',
+            queryParams: { albumIds: params.id, recursive: true },
+        })
+    )
+    const albumItemsData = await response.json()
+
+    // This handles rare circumstances where a song is part of an album but is not meant to be included in the track list
+    // Example: Xronial Xero (Laur Remix) - Is tagged with the album Xronial Xero, but was a bonus track and not included as part of the album's track list.
+    const items = albumItemsData.Items.filter((item) => 'IndexNumber' in item)
+
+    // Idk if it's efficient, but this is a beautiful one liner that accomplishes 1. Checking whether or not there are multiple discs, 2. Sorting the Items
+    // primarily by disc number, and secondarily by track number, and 3. Defaulting to just sorting by track number if the album is only one disc.
+    items.sort((a, b) =>
+        a?.ParentIndexNumber !== b?.ParentIndexNumber
+            ? a.ParentIndexNumber - b.ParentIndexNumber
+            : a.IndexNumber - b.IndexNumber
+    )
+
+    const albumData = {
+        name: items[0].Album,
+        id: items[0].AlbumId,
+        artists: items[0].AlbumArtists,
+        year: items[0].ProductionYear,
+        discCount: Math.max(...items.map((x) => x?.ParentIndexNumber)),
+        length: items
+            .map((x) => x.RunTimeTicks)
+            .reduce((accumulator, currentValue) => accumulator + currentValue),
+    }
+
+    return {
+        id: params.id,
+        albumItemsData: items,
+        albumData: albumData,
+    }
+}
--- a/src/routes/album/[id]/+page.svelte
+++ b/src/routes/album/[id]/+page.svelte
@@ -0,0 +1,57 @@
+<script>
+    import { fly, slide } from 'svelte/transition'
+    import { cubicIn, cubicOut } from 'svelte/easing'
+
+    import { generateURL } from '$lib/Jellyfin-api.js'
+    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 = generateURL({ type: 'Image', pathParams: { id: data.id } })
+    // console.log(generateURL({type: 'Items', queryParams: {'albumIds': data.albumData.Id, 'recursive': true}}))
+    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>
--- a/src/routes/artist/[id]/+page.js
+++ b/src/routes/artist/[id]/+page.js
@@ -0,0 +1,5 @@
+export const load = ({ params }) => {
+    return {
+        id: params.id,
+    }
+}
--- a/src/routes/artist/[id]/+page.svelte
+++ b/src/routes/artist/[id]/+page.svelte
@@ -0,0 +1,39 @@
+<script>
+    import { onMount } from 'svelte';
+
+    import { fetchArtistItems } from '$lib/Jellyfin-api.js';
+    import AlbumCard from '$lib/albumCard.svelte';
+    export let data;
+
+    let artistItems = {
+        albums: [],
+        singles: [],
+        appearances: []
+    };
+    onMount(async () => {
+        artistItems = await fetchArtistItems(data.id);
+    })
+</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>
+
+<style>
+    .grid {
+        display: grid;
+        grid-template-columns: repeat(9, 200px);
+    }
+</style>
--- a/src/routes/song/[id]/+page.js
+++ b/src/routes/song/[id]/+page.js
@@ -0,0 +1,5 @@
+export const load = ({ params }) => {
+    return {
+        id: params.id,
+    }
+}
--- a/src/routes/song/[id]/+page.svelte
+++ b/src/routes/song/[id]/+page.svelte
@@ -0,0 +1,25 @@
+<script>
+    import { onMount } from 'svelte';
+
+    import { fetchSong } from '$lib/Jellyfin-api.js'
+
+    export let data;
+
+    let fetchedData = {};
+
+    onMount(async () => {
+        fetchedData = await fetchSong(data.id);
+    });
+</script>
+
+<div>
+    { #await fetchedData}
+        <p>Loading</p>
+    {:then songData}
+        <p>{songData.Name}</p>
+    {/await}
+</div>
+
+<style>
+
+</style>
--- a/static/favicon.png
+++ b/static/favicon.png
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -0,0 +1,15 @@
+import adapter from '@sveltejs/adapter-auto'
+import { vitePreprocess } from '@sveltejs/kit/vite'
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+    kit: {
+        // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
+        // If your environment is not supported or you settled on a specific environment, switch out the adapter.
+        // See https://kit.svelte.dev/docs/adapters for more information about adapters.
+        adapter: adapter(),
+    },
+    preprocess: vitePreprocess(),
+}
+
+export default config
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -0,0 +1,17 @@
+const defaultTheme = require('tailwindcss/defaultTheme')
+
+/** @type {import('tailwindcss').Config} */
+export default {
+    content: ['./src/**/*.{html,js,svelte,ts}'],
+    theme: {
+        extend: {
+            fontFamily: {
+                notoSans: [
+                    "'Noto Sans', 'Noto Sans HK', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans SC', 'Noto Sans TC'",
+                    ...defaultTheme.fontFamily.sans,
+                ],
+            },
+        },
+    },
+    plugins: [],
+}
--- a/vite.config.js
+++ b/vite.config.js
@@ -0,0 +1,6 @@
+import { sveltekit } from '@sveltejs/kit/vite'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+    plugins: [sveltekit()],
+})