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

Changing sources to remoteImage

Browse Source
This commit is contained in:
Eclypsed
2024-04-09 14:22:14 -04:00
parent 998dc81143
commit 8cff75bc9e
4 changed files with 34 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -17,7 +17,14 @@
<div id="card-wrapper" class="flex-shrink-0">
<button id="thumbnail" class="relative h-52 transition-all duration-200 ease-out" on:click={() => goto(`/details/${mediaItem.type}?id=${mediaItem.id}`)}>
{#if mediaItem.thumbnail}
<img bind:this={image} id="card-image" on:load={() => (captionText.style.width = `${image.width}px`)} class="h-full rounded transition-all" src={mediaItem.thumbnail} alt="{mediaItem.name} thumbnail" />
<img
bind:this={image}
id="card-image"
on:load={() => (captionText.style.width = `${image.width}px`)}
class="h-full rounded transition-all"
src="/api/remoteImage?url={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" />

10
src/lib/components/media/mediaPlayer.svelte
View File

@@ -17,12 +17,14 @@
const fac = new FastAverageColor()
$: fac.getColorAsync(`/api/remoteImage?url=${song.thumbnail}`, { algorithm: 'dominant' }).then((color) => (bgColor = color.rgb))
$: fac.getColorAsync(`/api/remoteImage?url=${song.thumbnail}`, { algorithm: 'simple' }).then((color) => (primaryColor = color.rgb))
// let audioSource: HTMLAudioElement, progressBar: HTMLInputElement
// onMount(() => (audioSource.volume = 0.4))
const getColor = async () => {
const rgb = await fac.getColorAsync(`/api/remoteImage?url=${song.thumbnail}`, { algorithm: 'dominant' }).then((color) => color.value)
console.log(rgb)
}
</script>
<main class="relative m-4 flex h-24 flex-grow-0 gap-4 overflow-clip rounded-xl text-white transition-colors duration-1000" style="background-color: {bgColor};">
<img src={song.thumbnail} alt="" class="aspect-square max-h-full object-cover" />
<img src="/api/remoteImage?url={song.thumbnail}" alt="" class="aspect-square max-h-full object-cover" />
<section class="flex w-96 flex-col justify-center gap-1">
<div class="line-clamp-2">{song.name}</div>
<div class="text-sm text-neutral-400">{song.artists?.map((artist) => artist.name) || song.createdBy?.name}</div>
@@ -32,7 +34,7 @@
<button on:click={() => (shuffle = !shuffle)} class="aspect-square h-8">
<i class="fa-solid fa-shuffle" style="color: {shuffle ? primaryColor : 'rgb(163, 163, 163)'};" />
</button>
<button class="aspect-square h-8">
<button on:click={() => getColor()} class="aspect-square h-8">
<i class="fa-solid fa-backward-step" />
</button>
<button on:click={() => (playing = !playing)} class="grid aspect-square h-10 place-items-center rounded-full bg-white">