first commit

2023-10-09 17:49:46 -04:00
commit b2790a7151
33 changed files with 3027 additions and 0 deletions
--- 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)}`
+    }
+}