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

I'm tired

Browse Source
This commit is contained in:
Eclypsed
2024-02-04 01:01:37 -05:00
parent cbe9b60973
commit c710f80178
8 changed files with 279 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/app.d.ts vendored
View File

@@ -11,6 +11,10 @@ declare global {
// interface Platform {}
}
// General Interface Desing tips:
// Use possibly undefined `?:` for when a property is optional, meaning it could be there, or it could be not applicable
// Use possibly null `| nulll` for when the property is expected to be there but could possbily be explicitly empty
interface User {
id: string
username: string
@@ -30,16 +34,25 @@ declare global {
accessToken: string
}
// These Schemas should only contain general info data that is necessary for data fetching purposes.
// They are NOT meant to be stores for large amounts of data, i.e. Don't include the data for every single song the Playlist type.
// Big data should be fetched as needed in the app, these exist to ensure that the info necessary to fetch that data is there.
interface MediaItem {
connection: Connection
connectionId: string
service: Service
type: 'song' | 'album' | 'playlist' | 'artist'
id: string
name: string
duration: number
thumbnail?: string
}
interface Song extends MediaItem {
artists?: Artist[]
type: 'song'
duration: number
artists: {
id: string
name: string
}[]
albumId?: string
audio: string
video?: string
@@ -47,20 +60,27 @@ declare global {
}
interface Album extends MediaItem {
artists: Artist[]
songs: Song[]
type: 'album'
duration: number
albumArtists: {
id: string
name: string
}[]
artists: {
id: string
name: string
}[]
releaseDate: string
}
interface Playlist extends MediaItem {
songs: Song[]
type: 'playlist'
duration: number
description?: string
}
interface Artist {
id: string
name: string
// Add more here in the future
interface Artist extends MediaItem {
type: 'artist'
}
namespace Jellyfin {
@@ -96,46 +116,52 @@ declare global {
interface MediaItem {
Name: string
Id: string
RunTimeTicks: number
Type: 'Audio' | 'MusicAlbum' | 'Playlist'
Type: 'Audio' | 'MusicAlbum' | 'Playlist' | 'MusicArtist'
ImageTags?: {
Primary?: string
}
}
interface Song extends Jellyfin.MediaItem {
RunTimeTicks: number
ProductionYear: number
Type: 'Audio'
ArtistItems?: {
ArtistItems: {
Name: string
Id: string
}[]
Album?: string
AlbumId?: string
AlbumPrimaryImageTag?: string
AlbumArtists?: {
AlbumArtists: {
Name: string
Id: string
}[]
}
interface Album extends Jellyfin.MediaItem {
RunTimeTicks: number
ProductionYear: number
Type: 'MusicAlbum'
ArtistItems?: {
ArtistItems: {
Name: string
Id: string
}[]
AlbumArtists?: {
AlbumArtists: {
Name: string
Id: string
}[]
}
interface Playlist extends Jellyfin.MediaItem {
RunTimeTicks: number
Type: 'Playlist'
ChildCount: number
}
interface Artist extends Jellyfin.MediaItem {
Type: 'MusicArtist'
}
}
namespace YouTubeMusic {

96
src/lib/components/media/mediaCard.svelte
View File

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

39
src/lib/components/media/scrollableCardMenu.svelte Normal file
View File

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

85
src/lib/service-managers/jellyfin.ts
View File

@@ -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 artists: Artist[] | undefined = song.ArtistItems
? Array.from(song.ArtistItems, (artist) => {
return { name: artist.Name, id: artist.Id }
})
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 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 artists = song.ArtistItems
? Array.from(song.ArtistItems, (artist) => {
return { id: artist.Id, name: artist.Name }
})
: []
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,
}
}
}

2
src/routes/(app)/+layout.svelte
View File

@@ -38,7 +38,7 @@
<div class="overflow-clip text-ellipsis text-neutral-400">Playlist &bull; {data.user.username}</div>
</div>
</div>
<section class="no-scrollbar overflow-y-scroll px-[max(7rem,_5vw)] pt-16">
<section class="no-scrollbar overflow-y-scroll px-[max(7rem,_7vw)] pt-16">
<slot />
</section>
<footer class="fixed bottom-0 flex w-full flex-col items-center justify-center">

12
src/routes/(app)/+page.server.ts Normal file
View File

@@ -0,0 +1,12 @@
import { SECRET_INTERNAL_API_KEY } from '$env/static/private'
import type { PageServerLoad } from './$types'
export const prerender = false
export const load: PageServerLoad = async ({ locals, fetch, url }) => {
const recommendationResponse = await fetch(`/api/users/${locals.user.id}/recommendations`, { headers: { apikey: SECRET_INTERNAL_API_KEY } })
const recommendationData = await recommendationResponse.json()
const { recommendations } = recommendationData
return { recommendations }
}

15
src/routes/(app)/+page.svelte
View File

@@ -1,7 +1,10 @@
<div id="test-box" class="h-[200vh]"></div>
<script lang="ts">
import ScrollableCardMenu from '$lib/components/media/scrollableCardMenu.svelte'
import type { PageData } from './$types'
<!-- <style>
#test-box {
background: linear-gradient(to bottom, white, black);
}
</style> -->
export let data: PageData
</script>
<div id="main">
<ScrollableCardMenu header={'Listen Again'} cardDataList={data.recommendations} />
</div>

10
src/routes/api/users/[userId]/recommendations/+server.ts
View File

@@ -1,15 +1,16 @@
import type { RequestHandler } from '@sveltejs/kit'
import { SECRET_INTERNAL_API_KEY } from '$env/static/private'
import { Jellyfin } from '$lib/service-managers/jellyfin'
// This is temporary functionally for the sake of developing the app.
// In the future will implement more robust algorith for offering recommendations
// In the future will implement more robust algorithm for offering recommendations
export const GET: RequestHandler = async ({ params, fetch }) => {
const userId = params.userId as string
const connectionsResponse = await fetch(`/api/users/${userId}/connections`, { headers: { apikey: SECRET_INTERNAL_API_KEY } })
const userConnections: Connection[] = await connectionsResponse.json()
const recommendations = []
const recommendations: Song[] = []
for (const connection of userConnections) {
const { service, accessToken } = connection
@@ -29,6 +30,11 @@ export const GET: RequestHandler = async ({ params, fetch }) => {
const mostPlayedResponse = await fetch(mostPlayedSongsURL, { headers: requestHeaders })
const mostPlayedData = await mostPlayedResponse.json()
mostPlayedData.Items.forEach((song: Jellyfin.Song) => recommendations.push(Jellyfin.songFactory(song, connection as Jellyfin.JFConnection)))
break
}
}
return Response.json({ recommendations })
}