Changing sources to remoteImage

.vscode/settings.json

@@ -1,3 +0,0 @@
-{
-    "terminal.integrated.scrollback": 1000
-}

src/lib/components/media/mediaCard.svelte

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

src/lib/components/media/mediaPlayer.svelte

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

src/routes/api/remoteImage/+server.ts

@@ -1,13 +1,27 @@
 import type { RequestHandler } from '@sveltejs/kit'
 
+// This endpoint exists to act as a proxy for images, bypassing any CORS or other issues
+// that could arise from using images from another origin
 export const GET: RequestHandler = async ({ url }) => {
-    // const connectionId = url.searchParams.get('connection')
-    // const id = url.searchParams.get('id')
-    // if (!(connectionId && id)) return new Response('Missing query parameter', { status: 400 })
     const imageUrl = url.searchParams.get('url')
-    if (!imageUrl) return new Response('Missing url', { status: 400 })
+    if (!imageUrl || !URL.canParse(imageUrl)) return new Response('Missing or invalid url parameter', { status: 400 })
 
-    const image = await fetch(imageUrl).then((response) => response.arrayBuffer())
+    const MAX_TRIES = 3
 
-    return new Response(image)
+    const fetchImage = async (): Promise<ArrayBuffer> => {
+        let tryCount = 0
+        while (tryCount < MAX_TRIES) {
+            ++tryCount
+            try {
+                return await fetch(imageUrl).then((response) => response.arrayBuffer())
+            } catch (error) {
+                console.error(error)
+                continue
+            }
+        }
+
+        throw new Error('Exceed Max Retires')
+    }
+
+    return new Response(await fetchImage())
 }