chore: update minor dependencies

.env.example

@@ -2,4 +2,4 @@ HOST=0.0.0.0
 ORIGIN=https://dl.emersa.it
 YTDLP_PATH=./yt-dlp
 PUBLIC_VERSION=0.6.3
-HTTPS_PROXY=
+HTTPS_PROXY=

.forgejo/workflows/ci.yaml

@@ -1,4 +1,4 @@
-name: Bump deps (only minor versions)
+name: Just some continuos integration
 
 on: [push]
 
@@ -15,7 +15,16 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: '20'
-      - name: Prepare, Check, Lint and Format
+      - name: Format things if needed
         run: |
-          npm i
+          npm install
           npm run prepare
+          npm run lint
+          npm run format
+          git config --global user.name "forgejo-bot"
+          git config --global user.email "bot@pweapon.org"
+          git add --all || exit 0
+          git commit -m "chore: lint and format" || exit 0
+          git push origin HEAD:${GITHUB_REF#refs/heads/}
+        env:
+          GITHUB_TOKEN: ${{ secrets.FORGEJO_TOKEN }}

.forgejo/workflows/release.yaml

@@ -29,13 +29,15 @@ jobs:
       - name: Create Release
         run: |
           npm ci
-          touch .env
-          echo "HOST=0.0.0.0" >> .env
-          echo "ORIGIN=https://dl.emersa.it" >> .env
-          echo "PUBLIC_VERSION=$(cat package.json | jq .version)" >> .env
+          touch .env.production
+          echo "HOST=0.0.0.0" >> .env.production
+          echo "PORT=3000" >> .env.production
+          echo "ORIGIN=https://dl.emersa.it" >> .env.production
+          echo "PUBLIC_VERSION=$(cat package.json | jq .version)" >> .env.production
+          echo "NODE_ENV=production" >> .env.production
           npm run build
           cp package* build/
-          cp .env build/
+          cp .env.production build/
           mkdir releases
           cd build/
           tar czvf ../releases/build.tar.gz .

README.md

@@ -2,11 +2,10 @@
 
 ![version](https://git.pweapon.org/odo/dl.emersa.it/badges/release.svg 'version')
 ![status](https://git.pweapon.org/odo/dl.emersa.it/badges/workflows/ci.yaml/badge.svg 'status')
+![GNU](https://img.shields.io/badge/license-GPL--3.0-green?logo=gnu)
 
 It's a svelte(kit) frontend + backend that uses [`yt-dlp`](https://github.com/yt-dlp/yt-dlp) to let people download audio/video files from the web.
 
-[`... we don't have the concept of users, when we refer to people, we call them people.`](https://ar.al/2020/08/07/what-is-the-small-web/)
-
 <a href='https://dl.emersa.it'><img src='./static/screen.webp' alt='screen' height=300></a>
 
 ## Self-Hosting

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "dl.emersa.it",
 	"private": true,
-	"version": "0.9.1",
+	"version": "1.0.2-b",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",
@@ -15,34 +15,34 @@
 		"lint": "prettier --check . && eslint ."
 	},
 	"devDependencies": {
-		"@eslint/compat": "^1.2.7",
-		"@eslint/js": "^9.21.0",
+		"@eslint/compat": "^1.2.9",
+		"@eslint/js": "^9.26.0",
 		"@sveltejs/adapter-node": "^5.2.12",
-		"@sveltejs/kit": "^2.17.3",
+		"@sveltejs/kit": "^2.20.8",
 		"@sveltejs/vite-plugin-svelte": "^5.0.3",
-		"@tailwindcss/vite": "^4.0.9",
-		"eslint": "^9.21.0",
-		"eslint-config-prettier": "^10.0.1",
-		"eslint-plugin-svelte": "^2.46.1",
-		"globals": "^16.0.0",
-		"mdsvex": "^0.12.3",
-		"prettier": "^3.5.2",
+		"@tailwindcss/vite": "^4.1.6",
+		"eslint": "^9.26.0",
+		"eslint-config-prettier": "^10.1.5",
+		"eslint-plugin-svelte": "^3.5.1",
+		"globals": "^16.1.0",
+		"mdsvex": "^0.12.6",
+		"prettier": "^3.5.3",
 		"prettier-plugin-svelte": "^3.3.3",
 		"prettier-plugin-tailwindcss": "^0.6.11",
-		"svelte": "^5.20.4",
-		"svelte-check": "^4.1.4",
-		"sveltekit-sse": "^0.13.14",
-		"tailwindcss": "^4.0.9",
-		"typescript": "^5.7.3",
-		"typescript-eslint": "^8.25.0",
-		"vite": "^6.2.0"
+		"svelte": "^5.28.2",
+		"svelte-check": "^4.1.7",
+		"sveltekit-sse": "^0.13.19",
+		"tailwindcss": "^4.1.6",
+		"typescript": "^5.8.3",
+		"typescript-eslint": "^8.32.0",
+		"vite": "^6.3.5"
 	},
 	"dependencies": {
 		"@tailwindcss/forms": "^0.5.10",
-		"@tailwindcss/postcss": "^4.0.9",
+		"@tailwindcss/postcss": "^4.1.6",
 		"@tailwindcss/typography": "^0.5.16",
-		"@types/node": "^22.13.5",
+		"@types/node": "^22.15.17",
 		"winston": "^3.17.0",
-		"youtube-dl-exec": "^3.0.16"
+		"youtube-dl-exec": "^3.0.21"
 	}
 }

scripts/install.sh

@@ -29,5 +29,5 @@ tar -xvf build.tar.gz -C .
 rm build.tar.gz
 npm ci
 npm run download-yt-dlp
-echo "YTDLP_PATH=$(readlink -f yt-dlp)" >>.env
-echo "HTTPS_PROXY=${PROXY}" >>.env
+echo "YTDLP_PATH=$(readlink -f yt-dlp)" >> .env.production
+echo "HTTPS_PROXY=${PROXY}" >> .env.production

scripts/release.sh

@@ -14,4 +14,5 @@ __dir="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
 version="${1:?Error: No argument provided. Usage: $0 <version>}" 
 
 npm version "v${version}"
-git push --tags
+git push --tags
+git push

src/app.html

@@ -7,14 +7,11 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
 		<style>
-			@font-face {
-				font-family: 'Press Start 2P';
-				src: url('/fonts/PressStart2P-Regular.ttf');
+			* {
+				font-family: 'Fira Code', monospace;
 			}
-
 			body {
 				background: black; /* Fallback */
-				font-family: 'Press Start 2P', sans-serif;
 				color: #37ff1456; /* Retro green text */
 				margin: 0;
 			}

src/lib/components/DownloadManager.svelte

@@ -1,3 +0,0 @@
-<script lang="ts">
-	let props = $props();
-</script>

src/lib/components/Loader.svelte

@@ -1,28 +0,0 @@
-<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>

src/lib/components/ProgressBar.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	let { progress, filename } = $props();
+</script>
+
+<div
+	class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 font-mono backdrop-blur-sm"
+>
+	<div
+		class="w-[90%] max-w-sm rounded-2xl border border-green-400 bg-[#000f00] p-6 text-sm text-green-300 shadow-2xl"
+	>
+		<p class="mb-2 text-center text-cyan-300">
+			Downloading <span class="font-semibold text-green-400">{filename}</span>
+		</p>
+		<div class="h-4 w-full overflow-hidden rounded-md border border-green-500 bg-black">
+			<div
+				class="h-full bg-gradient-to-r from-green-400 to-green-600 transition-all duration-300"
+				style="width: {progress}%"
+			></div>
+		</div>
+		<p class="mt-2 text-center text-pink-400">{progress}%</p>
+	</div>
+</div>

src/lib/server/helpers.ts

@@ -1,9 +1,8 @@
 import formats from '$lib/common/supportedFormats.json';
 import winston from 'winston';
-import { dev } from '$app/environment';
 
 export const logger = winston.createLogger({
-	level: dev ? 'debug' : 'error',
+	level: 'debug',
 	format: winston.format.json(),
 	transports: [new winston.transports.Console()]
 });

src/lib/server/ytdlp.ts

@@ -1,11 +1,10 @@
-import { create } from 'youtube-dl-exec';
+import { create, type Flags } from 'youtube-dl-exec';
 import { env } from '$env/dynamic/private';
 import { spawn } from 'node:child_process';
-import supportedFormats from '$lib/common/supportedFormats.json';
 import { logger, mimeTypeMap } from '$lib/server/helpers';
 
 const YTDLP_PATH: string = env.YTDLP_PATH as string;
-const HTTPS_PROXY: string = env.v as string;
+const HTTPS_PROXY: string = env.HTTPS_PROXY as string;
 
 export const ytdl = create(YTDLP_PATH);
 
@@ -13,13 +12,18 @@ export const ytdl = create(YTDLP_PATH);
  * Fetch YouTube metadata (title, uploader/artist)
  */
 export async function getYouTubeMetadata(link: string) {
-	return await ytdl(link, {
+	const options: Flags = {
 		dumpSingleJson: true,
 		noCheckCertificates: true,
 		noWarnings: true,
-		preferFreeFormats: true,
-		proxy: HTTPS_PROXY ? HTTPS_PROXY : ''
-	});
+		preferFreeFormats: true
+	};
+
+	if (HTTPS_PROXY) {
+		options.proxy = HTTPS_PROXY;
+	}
+
+	return await ytdl(link, options);
 }
 
 /**
@@ -61,10 +65,11 @@ export function streamYouTube(link: string, format: string): ReadableStream<Uint
 			process.stdout.on('data', (chunk) => {
 				try {
 					controller.enqueue(chunk);
-				} catch (ex) {
+				} catch {
 					process.kill();
 				}
 			});
+
 			process.stderr.on('data', (chunk) => logger.debug(chunk.toString()));
 			process.stdout.on('end', () => {
 				try {

src/routes/+layout.svelte

@@ -17,4 +17,11 @@
 		transform: rotate(180deg);
 		display: inline-block;
 	}
+
+	@media screen and (max-height: 600px) {
+		/* Your CSS rules here */
+		footer {
+			display: none;
+		}
+	}
 </style>

src/routes/+page.svelte

@@ -1,51 +1,74 @@
 <script lang="ts">
 	import { PUBLIC_VERSION } from '$env/static/public';
 	import supportedFormats from '$lib/common/supportedFormats.json';
-	import Loader from '$lib/components/Loader.svelte';
-	import { onMount } from 'svelte';
+	import DownloadManager from '$lib/components/ProgressBar.svelte';
 
 	let source = $state('youtube');
 	let link = $state('');
+	let downloading = $state(false);
 	let format = $state('mp3');
 	let showModal = $state(false);
 	let href = $state('');
 	let disabled = $state(true);
-	let metadata = $state(false);
-	let downloading = $state(false);
-	let logs = $state('');
-	let logId = undefined;
+	let progress = $state(0);
+	let filename = $state('');
 
 	const formats = Object.keys(supportedFormats).map((f) => {
 		return { value: f, label: f.toUpperCase() };
 	});
+	const sources = [
+		{ value: 'youtube', label: 'YouTube' },
+		{ value: 'youtube', label: 'Any Other Website' }
+	];
 
 	const toggleModal = () => {
 		showModal = !showModal;
 	};
 
-	onMount(() => {
-		document.cookie = 'downloading=0';
-	});
+	const download = async (url: string) => {
+		const response = await fetch(url);
 
-	const readLogs = () => {
-		logId = setInterval(() => {
-			logs += "We're downloading <br>";
-		}, 2000);
-	};
-	const onClick = () => {
-		let checkIterations = 0;
-		link = '';
-		downloading = true;
-		document.cookie = 'downloading=1';
+		if (!response.ok) {
+			throw new Error('Network response was not ok');
+		}
 
-		readLogs();
+		const contentDisposition: string | null = response?.headers?.get('content-disposition');
+		filename = contentDisposition?.split('filename=')[1] || 'noname';
+		// const contentLength: number = Number(response?.headers?.get('content-length'));
+		const reader = response?.body?.getReader();
+		const chunks: Uint8Array[] = [];
+		let receivedLength = 0;
 
-		const id = setInterval(() => {
-			if (document.cookie.includes('downloading=0') || checkIterations > 3) {
-				downloading = false && clearInterval(id) && clearInterval(logId);
+		while (true) {
+			const { done, value } = await reader!.read();
+			if (done) break;
+			if (value) {
+				chunks.push(value);
+				receivedLength += value.length;
+				progress = Math.round((receivedLength / 50000) * 100);
 			}
-			checkIterations++;
-		}, 1000);
+		}
+
+		const blob = new Blob(chunks);
+		const downloadUrl = URL.createObjectURL(blob);
+
+		const a = document.createElement('a');
+		a.href = downloadUrl;
+		a.download = filename;
+		a.click();
+		window.URL.revokeObjectURL(downloadUrl);
+	};
+
+	const onClick = async (evt) => {
+		evt.preventDefault();
+
+		downloading = true;
+		await download(href);
+		downloading = false;
+
+		link = '';
+		progress = 0;
+		filename = '';
 	};
 
 	const createAnchor = () => {
@@ -57,8 +80,9 @@
 		try {
 			new URL(link);
 			disabled = false;
-		} catch (err) {
+		} catch {
 			/*
+
 			if (err.code === 'ERR_INVALID_URL') {
 
 			}
@@ -72,8 +96,6 @@
 		searchParams.append('link', link);
 		searchParams.append('format', format);
 
-		if (metadata) searchParams.append('metadata', '1');
-
 		href = `/download?${searchParams.toString()}`;
 	};
 
@@ -90,216 +112,111 @@
 
 <div
 	id="wrapper"
-	class="relative mx-auto rounded-lg bg-black p-6 text-[#00ff7f] shadow-lg sm:max-w-sm sm:border-4 sm:border-[#00ff7f] md:mt-10 md:max-w-md lg:max-w-lg 2xl:max-w-2xl"
+	class="relative mx-auto max-w-full rounded-2xl bg-black p-4 text-green-400 shadow-xl sm:max-w-sm md:max-w-md lg:max-w-lg"
 >
-	<div
-		id="loader"
-		class={[
-			'absolute inset-0 z-10 flex items-center justify-center bg-black/20 backdrop-blur-xs',
-			{ downloading }
-		]}
-	>
-		<Loader />
-		{@html logs}
-	</div>
-
-	<!-- Info Icon -->
+	<!-- Info Button -->
 	<button
 		onclick={toggleModal}
-		class="absolute top-3 right-3 text-[#ff007f] transition hover:text-[#ff3399]"
+		class="absolute top-3 right-3 text-pink-500 transition hover:text-pink-400"
 		aria-label="Open Info Modal"
 	>
-		<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="h-6 w-6" viewBox="0 0 24 24">
+		<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="h-5 w-5" viewBox="0 0 24 24">
 			<path
 				d="M12 0C5.373 0 0 5.373 0 12c0 6.627 5.373 12 12 12s12-5.373 12-12C24 5.373 18.627 0 12 0zm.75 18h-1.5v-6h1.5v6zm0-8h-1.5V8h1.5v2z"
 			/>
 		</svg>
 	</button>
 
-	<p id="title" class="mb-6 text-center text-[#00e5ff]">🐙 Scaricatore 🐙</p>
-	<form class="space-y-6">
-		<!-- Source Selection -->
-		<fieldset class="space-y-4">
-			<legend class="text-[#00e5ff]">Choose Source:</legend>
+	<!-- Title -->
+	<p id="title" class="mb-4 text-center font-mono text-xl tracking-tight text-cyan-300">
+		🐙 Scaricatore 🐙
+	</p>
 
-			<label class="flex items-center space-x-3">
-				<input type="radio" name="source" value="youtube" bind:group={source} class="retro-radio" />
-				<span>YouTube</span>
-			</label>
-
-			<label class="flex items-center space-x-3">
-				<input
-					disabled
-					type="radio"
+	<!-- Form -->
+	<form class="space-y-5 font-mono text-sm">
+		<!-- Source & Format -->
+		<div class="flex flex-col gap-4 sm:flex-row">
+			<div class="flex-1">
+				<label for="source" class="mb-1 block text-cyan-300">Source</label>
+				<select
+					id="source"
 					name="source"
-					value="spotify"
-					bind:group={source}
-					class="retro-radio"
-				/>
-				<span class="not-available">Spotify</span>
-			</label>
+					bind:value={source}
+					class="w-full rounded-md border border-green-400 bg-[#000f00] px-3 py-2 text-green-300 focus:border-pink-400 focus:outline-none"
+				>
+					{#each sources as source (source.label)}
+						<option value={source.value}>{source.label}</option>
+					{/each}
+				</select>
+			</div>
 
-			<label class="flex items-center space-x-3">
-				<input type="radio" name="source" value="other" bind:group={source} class="retro-radio" />
-				<span>
-					Any other website
-					<!-- 
-						(<a
-						href="https://github.com/yt-dlp/yt-dlp/blob/master/supportedsites.md"
-						target="_blank"
-						rel="noopener noreferrer"
-						class="text-[#ff3399] hover:underline"
-						>supported sites
-					</a>)
-					-->
-				</span>
-			</label>
-		</fieldset>
+			<div class="flex-1">
+				<label for="format" class="mb-1 block text-cyan-300">Format</label>
+				<select
+					id="format"
+					name="format"
+					bind:value={format}
+					class="w-full rounded-md border border-green-400 bg-[#000f00] px-3 py-2 text-green-300 focus:border-pink-400 focus:outline-none"
+				>
+					{#each formats as format (format.label)}
+						<option value={format.value}>{format.label}</option>
+					{/each}
+				</select>
+			</div>
+		</div>
 
-		<!-- Link Input -->
+		<!-- Video Link -->
 		<div>
-			<label for="link" class="mb-2 block text-[#00e5ff]"> Enter Video Link: </label>
+			<label for="link" class="mb-1 block text-cyan-300">Video Link</label>
 			<input
-				name="link"
 				type="url"
 				id="link"
+				name="link"
 				bind:value={link}
 				required
-				placeholder="Paste your link here"
-				class="w-full rounded-lg border-4 border-[#00ff7f] bg-[#001a00] px-4 py-3 text-[#00ff7f] focus:border-[#ff3399] focus:outline-none"
-			/>
-		</div>
-
-		<!-- Format Selection -->
-		<div>
-			<label for="format" class="mb-2 block text-[#00e5ff]"> Choose Format: </label>
-			<select
-				id="format"
-				name="format"
-				bind:value={format}
-				class="w-full rounded-lg border-4 border-[#00ff7f] bg-[#001a00] px-4 py-3 text-[#00ff7f] focus:border-[#ff3399] focus:outline-none"
-			>
-				{#each formats as format}
-					<option value={format.value}>{format.label}</option>
-				{/each}
-			</select>
-		</div>
-
-		<!-- Metadata -->
-		<div>
-			<label for="metadata" class="mb-2 block text-[#00e5ff]"
-				>Set filename (<span class="text-red-700">SLOW</span>)</label
-			>
-			<input
-				type="checkbox"
-				id="metadata"
-				name="metadata"
-				bind:checked={metadata}
-				class="rounded-lg border-4 border-[#00ff7f] bg-[#001a00] px-4 py-3 text-[#00ff7f] focus:border-[#ff3399] focus:outline-none"
+				placeholder="https://..."
+				class="w-full rounded-md border border-green-400 bg-[#000f00] px-3 py-2 text-green-300 placeholder:text-green-600 focus:border-pink-400 focus:outline-none"
 			/>
 		</div>
 
+		<!-- Download Button -->
 		<a
 			id="btn-download"
 			{href}
-			rel="external"
 			onclick={onClick}
 			class="{disabled
-				? 'disabled'
-				: ''} block w-full rounded-lg border-4 border-[#ff3399] bg-[#ff007f] px-4 py-3 text-center text-4xl text-black transition hover:bg-[#ff3399] active:border-yellow-500"
+				? 'pointer-events-none opacity-50'
+				: ''} block w-full rounded-md border border-pink-400 bg-pink-600 px-4 py-3 text-center text-base font-bold text-black transition hover:bg-pink-500 active:border-yellow-400"
 		>
 			DOWNLOAD
 		</a>
 	</form>
 </div>
 
+{#if downloading}
+	<DownloadManager {filename} {progress}></DownloadManager>
+{/if}
+
 <!-- Modal -->
 {#if showModal}
-	<div class="bg-opacity-80 fixed inset-0 z-50 flex items-center justify-center bg-black">
-		<div
-			class="w-4/5 max-w-lg rounded-lg border-4 border-[#00ff7f] bg-[#002b00] p-6 text-center text-[#00ff7f]"
-		>
-			<h2 class="mb-4 text-lg">🐙 Scaricatore v{PUBLIC_VERSION} 🐙</h2>
+	<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/90 text-green-300">
+		<div class="w-[90%] max-w-md rounded-lg border border-green-400 bg-[#001a00] p-5 text-center">
+			<h2 class="mb-3 text-base font-semibold">🐙 Scaricatore v{PUBLIC_VERSION} 🐙</h2>
 			<p>
-				This app allows you to download Spotify playlists and YouTube videos directly. Choose your
-				source, paste the link, and select a format to start downloading!
+				Download Spotify playlists and YouTube videos with ease. Choose your source, paste a link,
+				select format, go!
 			</p>
-			<span class="mt-10 block">
-				<a class="text-[#00e5ff] underline" href="https://git.pweapon.org/odo/dl.emersa.it"
-					>Click here for the source code</a
+			<p class="mt-3">
+				<a class="text-cyan-400 underline" href="https://git.pweapon.org/odo/dl.emersa.it"
+					>Source Code</a
 				>
-			</span>
+			</p>
 			<button
 				onclick={toggleModal}
-				class="mt-6 rounded-lg border-4 border-[#ff3399] bg-[#ff007f] px-4 py-2 text-black hover:bg-[#ff3399]"
+				class="mt-6 rounded-md border border-pink-400 bg-pink-600 px-4 py-2 text-black hover:bg-pink-500"
 			>
 				Close
 			</button>
 		</div>
 	</div>
 {/if}
-
-<style>
-	* {
-		font-family: 'Press Start 2P', cursive;
-	}
-
-	@media (max-height: 1000px) {
-		* {
-			font-size: 10px;
-		}
-	}
-	@media (min-width: 1024px) {
-		* {
-			font-size: 12px;
-		}
-	}
-
-	#loader {
-		display: none;
-	}
-	#loader.downloading {
-		display: grid;
-		justify-items: center;
-		align-items: center;
-	}
-	.not-available {
-		text-decoration-line: line-through;
-		text-decoration-color: red;
-	}
-
-	.retro-radio {
-		appearance: none;
-		background-color: #000;
-		border: 2px solid #00ff7f;
-		width: 20px;
-		height: 20px;
-		cursor: pointer;
-	}
-
-	.retro-radio:checked {
-		background-color: #00ff7f;
-		box-shadow:
-			0 0 4px #00ff7f,
-			0 0 10px #00ff7f;
-	}
-
-	input[type='url'],
-	select {
-		font-family: inherit;
-	}
-
-	#title {
-		font-size: 18px;
-	}
-
-	#btn-download {
-		font-size: 26px;
-		transition: opacity 0.3s ease;
-	}
-	a.disabled {
-		pointer-events: none;
-		cursor: default;
-		opacity: 0.5;
-	}
-</style>

src/routes/download/+server.ts

@@ -1,6 +1,6 @@
 import { error } from '@sveltejs/kit';
 import type { RequestHandler } from './$types';
-import { getYouTubeMetadata, streamYouTube, ytdl } from '$lib/server/ytdlp';
+import { getYouTubeMetadata, streamYouTube } from '$lib/server/ytdlp';
 import { isURLValid, logger, mimeTypeMap } from '$lib/server/helpers';
 
 const validateRequest = (url: URL) => {
@@ -8,7 +8,6 @@ const validateRequest = (url: URL) => {
 	const link = url.searchParams.get('link');
 	const format = url.searchParams.get('format'); // mp3, mp4
 	const source = url.searchParams.get('source'); // youtube or spotify
-	const metadata = url.searchParams.has('metadata');
 
 	// Validate input
 	if (!link || !format || !source) {
@@ -32,36 +31,34 @@ const validateRequest = (url: URL) => {
 	return {
 		link,
 		format,
-		source,
-		metadata
+		source
 	};
 };
 export const GET: RequestHandler = async ({ url }) => {
-	const { format, source, metadata, link } = validateRequest(url);
-	let filename = `you-clicked-no-metadata-so-i-cant-put-a-correct-name.${format}`;
+	const { format, link } = validateRequest(url);
+	let filename = '';
 
-	if (!!metadata) {
-		try {
-			logger.debug(`Fetching video data to set filename`);
-			// Fetch metadata for filename
-			const ytMetadata = await getYouTubeMetadata(link);
-			const { title, uploader } = ytMetadata;
-			const safeTitle = `${uploader} - ${title}`;
-			filename = `${safeTitle}.${format}`;
-		} catch (err) {
-			logger.error(err);
-			logger.error('Error fetching metadata:');
-			throw error(500, 'Failed to fetch video metadata');
-		}
+	logger.debug(`Requested: ${link}`);
+
+	try {
+		logger.debug(`Fetching video data to set filename`);
+		// Fetch metadata for filename
+		const ytMetadata = await getYouTubeMetadata(link);
+		const { title, uploader } = ytMetadata;
+		const safeTitle = `${uploader} - ${title}`;
+		filename = `${safeTitle}.${format}`;
+	} catch (err) {
+		logger.error(err);
+		logger.error('Error fetching metadata:');
+		throw error(500, 'Failed to fetch video metadata');
 	}
 
 	try {
 		// Stream video/audio
 		return new Response(streamYouTube(link, format), {
 			headers: {
-				'Content-Type': 'text/event-stream',
-				'Content-Disposition': `attachment; filename="${filename}"`,
-				'Set-Cookie': 'downloading=0'
+				'Content-Type': `${mimeTypeMap.get(format)}`,
+				'Content-Disposition': `attachment; filename="${filename}"`
 			}
 		});
 	} catch (err) {