Eclypsed/Lazuli
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Nicholas Tamassia
2023-10-09 17:49:46 -04:00
commit b2790a7151
33 changed files with 3027 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
.gitignore vendored Normal file
View File

@@ -0,0 +1,10 @@
.DS_Store
node_modules
/build
/.svelte-kit
/package
.env
.env.*
!.env.example
vite.config.js.timestamp-*
vite.config.ts.timestamp-*

2
.npmrc Normal file
View File

@@ -0,0 +1,2 @@
engine-strict=true
resolution-mode=highest

16
.prettierrc Normal file
View File

@@ -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"
}
}
]
}

2
.vscode/settings.json vendored Normal file
View File

@@ -0,0 +1,2 @@
{
}

38
README.md Normal file
View File

@@ -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.

10
feature-ideas.txt Normal file
View File

@@ -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

2181
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

26
package.json Normal file
View File

@@ -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"
}
}

6
postcss.config.js Normal file
View File

@@ -0,0 +1,6 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

14
src/app.css Normal file
View File

@@ -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 */
}

18
src/app.html Normal file
View File

@@ -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>

74
src/lib/Jellyfin-api.js Normal file
View File

@@ -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)
}
}

8
src/lib/albumBG.svelte Normal file
View File

@@ -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>

43
src/lib/albumCard.svelte Normal file
View File

@@ -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>

21
src/lib/audio-manager.js Normal file
View File

@@ -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],
})
}

35
src/lib/header.svelte Normal file
View File

@@ -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>

27
src/lib/listItem.svelte Normal file
View File

@@ -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>

56
src/lib/mediaControl.svelte Normal file
View File

@@ -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>

187
src/lib/mediaPlayer.svelte Normal file
View File

@@ -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>

16
src/lib/navbar.svelte Normal file
View File

@@ -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>

20
src/lib/utils.js Normal file
View File

@@ -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)}`
}
}

6
src/routes/+layout.svelte Normal file
View File

@@ -0,0 +1,6 @@
<script>
import '../app.css'
import '@fortawesome/fontawesome-free/css/all.min.css'
</script>
<slot />

2
src/routes/+page.svelte Normal file
View File

@@ -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>

40
src/routes/album/[id]/+page.js Normal file
View File

@@ -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,
}
}

57
src/routes/album/[id]/+page.svelte Normal file
View File

@@ -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>

5
src/routes/artist/[id]/+page.js Normal file
View File

@@ -0,0 +1,5 @@
export const load = ({ params }) => {
return {
id: params.id,
}
}

39
src/routes/artist/[id]/+page.svelte Normal file
View File

@@ -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>

5
src/routes/song/[id]/+page.js Normal file
View File

@@ -0,0 +1,5 @@
export const load = ({ params }) => {
return {
id: params.id,
}
}

25
src/routes/song/[id]/+page.svelte Normal file
View File

@@ -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>

BIN
static/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

15
svelte.config.js Normal file
View File

@@ -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

17
tailwind.config.js Normal file
View File

@@ -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: [],
}

6
vite.config.js Normal file
View File

@@ -0,0 +1,6 @@
import { sveltekit } from '@sveltejs/kit/vite'
import { defineConfig } from 'vite'
export default defineConfig({
plugins: [sveltekit()],
})