.dockerignore

@@ -1,23 +0,0 @@
-Dockerfile
-.dockerignore
-.git
-.gitignore
-.gitattributes
-README.md
-.npmrc
-.prettierrc
-.eslintrc.cjs
-.graphqlrc
-.editorconfig
-.svelte-kit
-.vscode
-node_modules
-build
-package
-**/.env
-
-scripts/
-downloads
-
-yt-dlp
-build.tar.gz

.env.example

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

.forgejo/workflows/ci.yaml

@@ -17,5 +17,5 @@ jobs:
           node-version: '20'
       - name: Prepare, Check, Lint and Format
         run: |
-          npm i
+          npm ci
           npm run prepare

.forgejo/workflows/dependency_check.yaml

@@ -23,10 +23,10 @@ jobs:
       - name: Update deps, install them (to change package-lock.json) and commit
         run: |
           npx npm-check-updates --target minor -u
-          npm install
+          npm ci
           git config --global user.name "forgejo-bot"
           git config --global user.email "bot@pweapon.org"
-          git add package* || exit 0
+          git add package.json || exit 0
           git commit -m "chore: update minor dependencies"
           git push origin HEAD:${GITHUB_REF#refs/heads/}
         env:

README.md

@@ -2,23 +2,22 @@
 
 ![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.
+<img src='./static/screen.webp' alt='screen' height=300>
 
-[`... 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/)
+It's a svelte(kit) frontend that uses `yt-dlp` to let the user download things from the web.
 
-<a href='https://dl.emersa.it'><img src='./static/screen.webp' alt='screen' height=300></a>
-
-## Self-Hosting
+## How to Deploy
 
 ### Node
 
-- Install NodeJS
-- Create a new directory (`"${PROJECT_ROOT}"`)
-- run `scripts/install.sh "${PROJECT_ROOT}"`
-
-Edit `scripts/deploy_example.sh` if you need to deploy `scaricatore` to some server using `SSH`.
+0. Install nodejs
+1. Download the latest release from the [releases](https://git.pweapon.org/odo/dl.emersa.it/releases) page.
+2. Unpack and decompress (`tar xvf build.tar.gz`) the release
+3. Then `cd` into it and run: `npm ci` and `npm run build`
+4. Copy `.env.example` to `.env`, and add needed variables
+5. Run it: `node .`
+6. You can also try to configure the systemd unit file inside the `configurations` folder.
 
 ### Docker
 
@@ -26,8 +25,8 @@ Edit `scripts/deploy_example.sh` if you need to deploy `scaricatore` to some ser
 
 ## Development: getting started
 
-- run `git clone git@git.pweapon.org:odo/dl.emersa.it.git`
-- Run `cd dl.emersa.it; npm install` (you have to have node installed)
+- Clone the repo
+- Run `npm install` (you have to have node installed)
 - Run `npm run download-yt-dlp`
 - Copy `.env.example` to `.env`
 - Change `.env` to set `YTDLP_PATH` to the yt-dlp binary previously downloaded
@@ -36,6 +35,7 @@ Edit `scripts/deploy_example.sh` if you need to deploy `scaricatore` to some ser
 
 ## To do:
 
+- Proper logs (I don't like them, not useful for production build)
 - Containerfile for container build
 - Source spotify (spotdl)
 - Parse URL info without `youtube-dl-exec`

configurations/downloader.service

@@ -5,9 +5,9 @@ After=network.target
 [Service]
 User=user
 Group=user
-WorkingDirectory=/home/user/downloader
-EnvironmentFile=/home/user/downloader/.env
-ExecStart=/usr/bin/node /home/user/downloader
+WorkingDirectory=<PROJECT_ROOT>
+ExecStart=/usr/bin/node <PROJECT_ROOT>
+Environment=ORIGIN=http://example.com
 Restart=always
 RestartSec=10
 StandardOutput=syslog
@@ -16,4 +16,3 @@ SyslogIdentifier=downloader
 
 [Install]
 WantedBy=multi-user.target
-

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "dl.emersa.it",
 	"private": true,
-	"version": "0.9.3-c",
+	"version": "0.7.2",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",
@@ -15,34 +15,32 @@
 		"lint": "prettier --check . && eslint ."
 	},
 	"devDependencies": {
-		"@eslint/compat": "^1.2.8",
-		"@eslint/js": "^9.25.0",
+		"@eslint/compat": "^1.2.7",
+		"@eslint/js": "^9.21.0",
 		"@sveltejs/adapter-node": "^5.2.12",
-		"@sveltejs/kit": "^2.20.7",
+		"@sveltejs/kit": "^2.17.2",
 		"@sveltejs/vite-plugin-svelte": "^5.0.3",
-		"@tailwindcss/vite": "^4.1.4",
-		"eslint": "^9.25.0",
-		"eslint-config-prettier": "^10.1.2",
-		"eslint-plugin-svelte": "^3.5.1",
+		"@tailwindcss/vite": "^4.0.8",
+		"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.3",
+		"prettier": "^3.5.2",
 		"prettier-plugin-svelte": "^3.3.3",
 		"prettier-plugin-tailwindcss": "^0.6.11",
-		"svelte": "^5.28.1",
-		"svelte-check": "^4.1.6",
-		"sveltekit-sse": "^0.13.18",
-		"tailwindcss": "^4.1.4",
-		"typescript": "^5.8.3",
-		"typescript-eslint": "^8.30.1",
-		"vite": "^6.3.2"
+		"svelte": "^5.20.2",
+		"svelte-check": "^4.1.4",
+		"tailwindcss": "^4.0.8",
+		"typescript": "^5.7.3",
+		"typescript-eslint": "^8.24.1",
+		"vite": "^6.1.1"
 	},
 	"dependencies": {
 		"@tailwindcss/forms": "^0.5.10",
-		"@tailwindcss/postcss": "^4.1.4",
+		"@tailwindcss/postcss": "^4.0.8",
 		"@tailwindcss/typography": "^0.5.16",
-		"@types/node": "^22.14.1",
-		"winston": "^3.17.0",
-		"youtube-dl-exec": "^3.0.20"
+		"@types/node": "^22.13.5",
+		"youtube-dl-exec": "^3.0.15"
 	}
 }

scripts/configure.sh

@@ -1,8 +1,11 @@
 #!/bin/bash
-
-## Prepares the current environment:
-## - Installing dependencies
-## - Configuring git hooks
+#
+# An example hook script to verify what is about to be committed.
+# Called by "git commit" with no arguments.  The hook should
+# exit with non-zero status after issuing an appropriate message if
+# it wants to stop the commit.
+#
+# To enable this hook, rename this file to "pre-commit".
 
 set -e
 

scripts/deploy_example.sh

@@ -1,20 +1,9 @@
 #!/usr/bin/bash
 
-# This is a script for running `install.sh`
-# in a remote server using SSH.
-# Configure SSH_SERVER and PROJECT_ROOT variables
-# for using this script.
-
-###### ATTENTION ######
-# The install.sh script has a confirmation prompt
-# because it deletes the content of the PROJECT_ROOT folder,
-# just put "yes | install.sh" to automatically confirm.
-
 __dir="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
 
 SSH_SERVER="example"
 PROJECT_ROOT=example_directory
-
 SSH_REMOTE_DIR="${SSH_SERVER}:${PROJECT_ROOT}"
 
 ssh "${SSH_SERVER}" "mkdir -p ${PROJECT_ROOT}"

scripts/install.sh

@@ -1,33 +1,18 @@
 #!/usr/bin/bash
 
-### This is a script for installing the latest release
-### of `scaricatore`.
-
 PROJECT_ROOT=$1
-PROXY=$2
 
 if [ -z ${PROJECT_ROOT+x} ]; then
-    echo "ERROR: No PROJECT_ROOT set (first argument to ${0})"
+    echo "error no project_root set"
     exit 1
 fi
 
-if [ -z ${PROXY+x} ]; then
-    echo "INFO: no proxy given"
-fi
-
 mkdir -p "${PROJECT_ROOT}"
 cd "${PROJECT_ROOT}" || exit 1
-
-read -p "We're about to run rm -rf ${PROJECT_ROOT}/*. Are you sure?" -n 1 -r
-if [[ $REPLY =~ ^[Yy]$ ]]
-then
-    rm -rf ./*
-fi
-
+rm -rf ./*
 wget https://git.pweapon.org/odo/dl.emersa.it/releases/download/latest/build.tar.gz
 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

src/hooks.server.ts

@@ -1,7 +0,0 @@
-import { logger } from '$lib/server/helpers';
-
-export async function handle({ event, resolve }) {
-	logger.info(`Received ${event.request.method} request: ${event.url}`);
-
-	return await resolve(event);
-}

src/lib/common/supportedFormats.json

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

src/lib/components/Loader.svelte

@@ -1,28 +1,8 @@
-<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
+	class=" backdrop-blur-xs bg-black/20 absolute inset-0 z-10 flex items-center justify-center "
+	id="spinner"
+>
+	<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

@@ -1,20 +1,22 @@
 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',
-	format: winston.format.json(),
-	transports: [new winston.transports.Console()]
-});
-const formatMime = new Map(Object.entries(formats));
+const formatMime = new Map(Object.entries(formats))
 export const isURLValid = (url: string) => {
-	try {
-		new URL(url);
-	} catch {
-		return false;
-	}
+    try {
+        new URL(url)
+    } catch {
+        return false
+    }
 
-	return true;
-};
+    return true;
+}
 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

@@ -2,10 +2,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 { logger, mimeTypeMap } from '$lib/server/helpers';
+import { mimeTypeMap } from '$lib/server/helpers';
 
 const YTDLP_PATH: string = env.YTDLP_PATH as string;
-const HTTPS_PROXY: string = env.v as string;
 
 export const ytdl = create(YTDLP_PATH);
 
@@ -17,8 +16,7 @@ export async function getYouTubeMetadata(link: string) {
 		dumpSingleJson: true,
 		noCheckCertificates: true,
 		noWarnings: true,
-		preferFreeFormats: true,
-		proxy: HTTPS_PROXY ? HTTPS_PROXY : ''
+		preferFreeFormats: true
 	});
 }
 
@@ -26,55 +24,33 @@ export async function getYouTubeMetadata(link: string) {
  * Streams the YouTube video/audio using youtube-dl-exec
  */
 export function streamYouTube(link: string, format: string): ReadableStream<Uint8Array> {
-	logger.debug(`Starting to stream: ${link}`);
-	const mimeType: string | undefined = mimeTypeMap.get(format);
-
+	const mimeType: string | undefined = mimeTypeMap.get(format)
+	
 	if (!mimeType) {
-		throw new Error('Unsupported format');
+		throw new Error("Unsupported format");
 	}
-	logger.debug(`Given format is compatible: ${mimeType}`);
 
 	return new ReadableStream({
 		start(controller) {
-			const args = ['--no-write-thumbnail', '-o', '-'];
+			const args = [
+				'-o',
+				'-',
+			].filter(Boolean);
 
-			if (HTTPS_PROXY) {
-				args.push('--proxy', HTTPS_PROXY);
-			}
-
-			if (mimeType?.includes('audio')) {
-				args.push(
-					...['--extract-audio', '--embed-metadata', '--embed-thumbnail', '--audio-format', format]
-				);
+			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]);
+				args.push(...['--embed-metadata', '--embed-thumbnail', '--format', format])
 			}
 
-			const cmd = `${YTDLP_PATH} ${args.join(' ')} ${link}`;
-			logger.debug(`Running: ${cmd}`);
+			console.info(`${YTDLP_PATH} ${args.join(' ')} ${link}`)
 
-			const process = spawn(YTDLP_PATH, [...args, link], {
-				cwd: '/tmp',
-				stdio: ['ignore', 'pipe', 'pipe']
-			});
+			const process = spawn('yt-dlp', [...args, link], { stdio: ['ignore', 'pipe', 'ignore'] });
 
-			process.stdout.on('data', (chunk) => {
-				try {
-					controller.enqueue(chunk);
-				} catch (ex) {
-					process.kill();
-				}
-			});
-			process.stderr.on('data', (chunk) => logger.debug(chunk.toString()));
-			process.stdout.on('end', () => {
-				try {
-					controller.close();
-				} catch (ex) {
-					logger.error(ex);
-				}
-			});
+			process.stdout.on('data', (chunk) => controller.enqueue(chunk));
+			process.stdout.on('end', () => controller.close());
 			process.stdout.on('error', (err) => {
-				logger.error('Stream error:', err);
+				console.error('Stream error:', err);
 				controller.error(err);
 			});
 		}

src/routes/+layout.svelte

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

src/routes/+page.server.ts

@@ -1,3 +0,0 @@
-export const prerender = true;
-export const ssr = true;
-export const csr = true;

src/routes/+page.svelte

@@ -10,49 +10,42 @@
 	let showModal = $state(false);
 	let href = $state('');
 	let disabled = $state(true);
-	let metadata = $state(false);
+	let metadata = $state(true);
 	let downloading = $state(false);
-	let logs = $state('');
-	let logId = undefined;
 
 	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';
+		document.cookie = 'downloading=0'
 	});
 
-	const readLogs = () => {
-		logId = setInterval(() => {
-			logs += "We're downloading <br>";
-		}, 2000);
-	};
 	const onClick = () => {
-		let checkIterations = 0;
 		link = '';
 		downloading = true;
-		document.cookie = 'downloading=1';
-
-		readLogs();
+		document.cookie = 'downloading=1'
 
 		const id = setInterval(() => {
-			if (document.cookie.includes('downloading=0') || checkIterations > 3) {
-				downloading = false && clearInterval(id) && clearInterval(logId);
+			if (document.cookie.includes('downloading=0')) {
+				console.log("FINITO!")
+				downloading = false && clearInterval(id);
 			}
-			checkIterations++;
 		}, 1000);
 	};
 
 	const createAnchor = () => {
+		console.log({
+			source,
+			link,
+			format,
+			metadata
+		});
+
 		if (!(source && link && format)) {
 			disabled = true;
 			return;
@@ -75,8 +68,7 @@
 		searchParams.append('source', source);
 		searchParams.append('link', link);
 		searchParams.append('format', format);
-
-		if (metadata) searchParams.append('metadata', '1');
+		searchParams.append('metadata', metadata);
 
 		href = `/download?${searchParams.toString()}`;
 	};
@@ -91,20 +83,12 @@
 		}
 	});
 </script>
-
 <div
 	id="wrapper"
-	class="relative mx-auto rounded-lg bg-black p-6 text-[#00ff7f] shadow-lg sm:mt-10 sm:max-w-sm sm:border-4 sm:border-[#00ff7f] lg:max-w-lg 2xl:max-w-2xl"
+	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"
 >
-	<div
-		id="loader"
-		class={[
-			'absolute inset-0 z-10 flex items-center justify-center bg-black/20 backdrop-blur-xs',
-			{ downloading }
-		]}
-	>
+	<div id="loader" class={[{ downloading }]}>
 		<Loader />
-		{@html logs}
 	</div>
 
 	<!-- Info Icon -->
@@ -120,42 +104,46 @@
 		</svg>
 	</button>
 
-	<p id="title" class="mb-6 text-center text-[#00e5ff]">🐙 Scaricatore 🐙</p>
+	<h1 id="title" class="mb-6 text-center text-2xl text-[#00e5ff]">🐙 Scaricatore 🐙</h1>
 	<form class="space-y-6">
-		<!-- Source selection -->
-		<div class="flex justify-between">
-			<div class="w-2/6 lg:w-3/6">
-				<label for="source" class="mb-2 block text-[#00e5ff]"> Choose Source: </label>
-				<select
-					id="source"
-					name="source"
-					bind:value={source}
-					class="w-full rounded-lg border-4 border-[#00ff7f] bg-[#001a00] px-4 py-3 text-[#00ff7f] focus:border-[#ff3399] focus:outline-none"
-				>
-					{#each sources as source}
-						<option value={source.value}>{source.label}</option>
-					{/each}
-				</select>
-			</div>
+		<!-- Source Selection -->
+		<fieldset class="space-y-4">
+			<legend class="text-[#00e5ff]">Choose Source:</legend>
+
+			<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"
+					name="source"
+					value="spotify"
+					bind:group={source}
+					class="retro-radio"
+				/>
+				<span class="not-available">Spotify</span>
+			</label>
+
+			<label class="flex items-center space-x-3">
+				<input type="radio" name="source" value="other" bind:group={source} class="retro-radio" />
+				<span>
+					Other (<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>
 
-			<!-- Format Selection -->
-			<div class="w-2/6">
-				<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>
-		</div>
 		<!-- Link Input -->
 		<div>
-			<label for="link" class="mb-2 block text-[#00e5ff]"> Enter Video Link: </label>
+			<label for="link" class="mb-2 block text-[#00e5ff]"> Enter Playlist or Video Link: </label>
 			<input
 				name="link"
 				type="url"
@@ -167,11 +155,24 @@
 			/>
 		</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
-			>
+			<label for="metadata" class="mb-2 block text-[#00e5ff]"> Filename </label>
 			<input
 				type="checkbox"
 				id="metadata"
@@ -184,7 +185,6 @@
 		<a
 			id="btn-download"
 			{href}
-			rel="external"
 			onclick={onClick}
 			class="{disabled
 				? 'disabled'
@@ -207,7 +207,7 @@
 				source, paste the link, and select a format to start downloading!
 			</p>
 			<span class="mt-10 block">
-				<a class="text-[#00e5ff] underline" href="https://git.pweapon.org/odo/dl.emersa.it"
+				<a class="underline text-[#00e5ff]" href="https://git.pweapon.org/odo/dl.emersa.it"
 					>Click here for the source code</a
 				>
 			</span>
@@ -223,29 +223,35 @@
 
 <style>
 	* {
+		font-size: 14px;
 		font-family: 'Press Start 2P', cursive;
 	}
 
-	@media (max-height: 1000px) {
-		* {
-			font-size: 10px;
-		}
-	}
-
-	@media (min-width: 1400px) {
-		* {
-			font-size: 12px;
-		}
-	}
-
 	#loader {
 		display: none;
 	}
-
 	#loader.downloading {
-		display: grid;
-		justify-items: center;
-		align-items: center;
+		display: block;
+	}
+	.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'],
@@ -254,7 +260,7 @@
 	}
 
 	#title {
-		font-size: 18px;
+		font-size: 24px;
 	}
 
 	#btn-download {

src/routes/download/+server.ts

@@ -1,14 +1,14 @@
 import { error } from '@sveltejs/kit';
 import type { RequestHandler } from './$types';
 import { getYouTubeMetadata, streamYouTube, ytdl } from '$lib/server/ytdlp';
-import { isURLValid, logger, mimeTypeMap } from '$lib/server/helpers';
+import { contentTypeFromFormat, isURLValid, mimeTypeMap } from '$lib/server/helpers';
 
-const validateRequest = (url: URL) => {
+const validateRequest = (url) => {
 	// Get query params
 	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');
+	const metadata = url.searchParams.get('metadata');
 
 	// Validate input
 	if (!link || !format || !source) {
@@ -27,46 +27,42 @@ const validateRequest = (url: URL) => {
 		throw error(400, 'format not valid');
 	}
 
-	logger.debug(`Request is valid`);
-
 	return {
-		link,
-		format,
-		source,
-		metadata
-	};
-};
+		link, format, source, metadata
+	}
+}
 export const GET: RequestHandler = async ({ url }) => {
-	const { format, source, metadata, link } = validateRequest(url);
-	let filename = `noname.${format}`;
+	const { format, source, metadata, link } = validateRequest(url)
+	let filename = `you-clicked-no-metadata-so-i-cant-put-a-correct-name.${format}`;
 
-	if (!!metadata) {
+	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 metadata = await getYouTubeMetadata(link);
+			const { title, uploader } = metadata;
 			const safeTitle = `${uploader} - ${title}`;
 			filename = `${safeTitle}.${format}`;
 		} catch (err) {
-			logger.error(err);
-			logger.error('Error fetching metadata:');
+			console.error(err)
+			console.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': `${mimeTypeMap.get(format)}`,
+				'Content-Type': contentTypeFromFormat(format),
 				'Content-Disposition': `attachment; filename="${filename}"`,
 				'Set-Cookie': 'downloading=0'
 			}
 		});
+
 	} catch (err) {
-		logger.error(err);
-		logger.error('Filed to stream file');
+		console.error(err)
+		console.error('Filed to stream file');
 		throw error(500, 'Failed to stream file');
 	}
 };

static/manifest.json

@@ -1,16 +1,16 @@
 {
-	"name": "scaricatore",
+	"name": "EmersaDownloader",
 	"start_url": "https://dl.emersa.it",
 	"theme_color": "rgb(34,197,94)",
 	"background": "black",
 	"orientation": "portrait",
 	"display": "fullscreen",
-	"short_name": "scaricatore",
+	"short_name": "e-downloader",
 	"icons": [
 		{
 			"src": "favicon.png",
 			"type": "image/png",
-			"sizes": "512x512"
+			"sizes": "128x128"
 		}
 	]
 }