Add loader and new formats

src/lib/common/supportedFormats.json

@@ -0,0 +1,6 @@
+{
+    "mp3": "audio/mpeg",
+    "mp4": "video/mp4",
+    "opus": "audio/ogg",
+    "wav": "audio/wav"
+}

src/lib/components/Loader.svelte

@@ -1,6 +1,8 @@
 <div
-	class="bg-opacity-50 absolute inset-0 z-10 flex items-center justify-center bg-white"
+	class=" backdrop-blur-xs bg-black/20 absolute inset-0 z-10 flex items-center justify-center "
 	id="spinner"
 >
-	<div class="h-20 w-20 animate-spin rounded-full border-t-2 border-b-2 border-gray-900"></div>
+	<div class="w-[150px]">
+		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><linearGradient id="a3"><stop offset="0" stop-color="#FF156D" stop-opacity="0"></stop><stop offset="1" stop-color="#FF156D"></stop></linearGradient><circle fill="none" stroke="url(#a3)" stroke-width="15" stroke-linecap="round" stroke-dasharray="0 44 0 44 0 44 0 44 0 360" cx="100" cy="100" r="70" transform-origin="center"><animateTransform type="rotate" attributeName="transform" calcMode="discrete" dur="2" values="360;324;288;252;216;180;144;108;72;36" repeatCount="indefinite"></animateTransform></circle></svg>
+	</div>
 </div>

src/lib/server/helpers.ts

@@ -0,0 +1,14 @@
+import formats from '$lib/common/supportedFormats.json';
+
+const formatMime = new Map(Object.entries(formats))
+
+export const mimeTypeMap = formatMime;
+export const contentTypeFromFormat = (format: string): string => {
+    const toReturn: string | undefined = formatMime.get(format)
+
+    if (!toReturn) {
+        throw new Error("Unsupported format")
+    }
+
+    return toReturn;
+}

src/lib/server/ytdlp.ts

@@ -1,6 +1,9 @@
 import { create } from 'youtube-dl-exec';
 import { env } from '$env/dynamic/private';
 import { spawn } from 'node:child_process';
+import supportedFormats from '$lib/common/supportedFormats.json';
+import { mimeTypeMap } from '$lib/server/helpers';
+
 const YTDLP_PATH: string = env.YTDLP_PATH as string;
 
 export const ytdl = create(YTDLP_PATH);
@@ -21,19 +24,27 @@ export async function getYouTubeMetadata(link: string) {
  * Streams the YouTube video/audio using youtube-dl-exec
  */
 export function streamYouTube(link: string, format: string): ReadableStream<Uint8Array> {
+	const mimeType: string | undefined = mimeTypeMap.get(format)
+	
+	if (!mimeType) {
+		throw new Error("Unsupported format");
+	}
+
 	return new ReadableStream({
 		start(controller) {
 			const args = [
 				'-o',
 				'-',
-				format === 'mp3' ? '--embed-metadata' : '',
-				'--format',
-				format === 'mp3' ? 'bestaudio' : 'best',
-				'--audio-format',
-				format === 'mp3' ? 'mp3' : '',
-				'--no-playlist'
 			].filter(Boolean);
 
+			if(mimeType?.includes('audio')) {
+				args.push(...['--extract-audio', '--embed-metadata', '--embed-thumbnail', '--audio-format', format])
+			} else if (mimeType.includes('video')) {
+				args.push(...['--embed-metadata', '--embed-thumbnail', '--format', format])
+			}
+
+			console.info(`yt-dlp ${args.join(' ')} ${link}`)
+
 			const process = spawn('yt-dlp', [...args, link], { stdio: ['ignore', 'pipe', 'ignore'] });
 
 			process.stdout.on('data', (chunk) => controller.enqueue(chunk));