chore: update minor dependencies

README.md

@@ -2,6 +2,7 @@
 
 ![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.
 

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "dl.emersa.it",
 	"private": true,
-	"version": "0.9.0",
+	"version": "0.9.3-c",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",
@@ -15,34 +15,34 @@
 		"lint": "prettier --check . && eslint ."
 	},
 	"devDependencies": {
-		"@eslint/compat": "^1.2.7",
+		"@eslint/compat": "^1.2.8",
-		"@eslint/js": "^9.21.0",
+		"@eslint/js": "^9.24.0",
 		"@sveltejs/adapter-node": "^5.2.12",
-		"@sveltejs/kit": "^2.17.3",
+		"@sveltejs/kit": "^2.20.7",
 		"@sveltejs/vite-plugin-svelte": "^5.0.3",
-		"@tailwindcss/vite": "^4.0.9",
+		"@tailwindcss/vite": "^4.1.4",
-		"eslint": "^9.21.0",
+		"eslint": "^9.24.0",
-		"eslint-config-prettier": "^10.0.1",
+		"eslint-config-prettier": "^10.1.2",
-		"eslint-plugin-svelte": "^2.46.1",
+		"eslint-plugin-svelte": "^3.5.1",
 		"globals": "^16.0.0",
 		"mdsvex": "^0.12.3",
-		"prettier": "^3.5.2",
+		"prettier": "^3.5.3",
 		"prettier-plugin-svelte": "^3.3.3",
 		"prettier-plugin-tailwindcss": "^0.6.11",
-		"svelte": "^5.20.4",
+		"svelte": "^5.27.2",
-		"svelte-check": "^4.1.4",
+		"svelte-check": "^4.1.6",
-		"sveltekit-sse": "^0.13.14",
+		"sveltekit-sse": "^0.13.18",
-		"tailwindcss": "^4.0.9",
+		"tailwindcss": "^4.1.4",
-		"typescript": "^5.7.3",
+		"typescript": "^5.8.3",
-		"typescript-eslint": "^8.25.0",
+		"typescript-eslint": "^8.30.1",
-		"vite": "^6.2.0"
+		"vite": "^6.3.1"
 	},
 	"dependencies": {
 		"@tailwindcss/forms": "^0.5.10",
-		"@tailwindcss/postcss": "^4.0.9",
+		"@tailwindcss/postcss": "^4.1.4",
 		"@tailwindcss/typography": "^0.5.16",
-		"@types/node": "^22.13.5",
+		"@types/node": "^22.14.1",
 		"winston": "^3.17.0",
-		"youtube-dl-exec": "^3.0.16"
+		"youtube-dl-exec": "^3.0.20"
 	}
 }

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

@@ -18,6 +18,10 @@
 	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;
@@ -90,7 +94,7 @@
 
 <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 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"
 >
 	<div
 		id="loader"
@@ -118,47 +122,40 @@
 
 	<p id="title" class="mb-6 text-center text-[#00e5ff]">🐙 Scaricatore 🐙</p>
 	<form class="space-y-6">
-		<!-- Source Selection -->
+		<!-- Source selection -->
-		<fieldset class="space-y-4">
+		<div class="flex justify-between">
-			<legend class="text-[#00e5ff]">Choose Source:</legend>
+			<div class="w-2/6 lg:w-3/6">
-
+				<label for="source" class="mb-2 block text-[#00e5ff]"> Choose Source: </label>
-			<label class="flex items-center space-x-3">
+				<select
-				<input type="radio" name="source" value="youtube" bind:group={source} class="retro-radio" />
+					id="source"
-				<span>YouTube</span>
-			</label>
-
-			<label class="flex items-center space-x-3">
-				<input
-					disabled
-					type="radio"
 					name="source"
-					value="spotify"
+					bind:value={source}
-					bind:group={source}
+					class="w-full rounded-lg border-4 border-[#00ff7f] bg-[#001a00] px-4 py-3 text-[#00ff7f] focus:border-[#ff3399] focus:outline-none"
-					class="retro-radio"
+				>
-				/>
+					{#each sources as source}
-				<span class="not-available">Spotify</span>
+						<option value={source.value}>{source.label}</option>
-			</label>
+					{/each}
-
+				</select>
-			<label class="flex items-center space-x-3">
+			</div>
-				<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>
 
+			<!-- 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 Playlist or Video Link: </label>
+			<label for="link" class="mb-2 block text-[#00e5ff]"> Enter Video Link: </label>
 			<input
 				name="link"
 				type="url"
@@ -170,21 +167,6 @@
 			/>
 		</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]"
@@ -249,7 +231,8 @@
 			font-size: 10px;
 		}
 	}
-	@media (min-width: 1024px) {
+
+	@media (min-width: 1400px) {
 		* {
 			font-size: 12px;
 		}
@@ -258,31 +241,12 @@
 	#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 {

src/routes/download/+server.ts

@@ -38,7 +38,7 @@ const validateRequest = (url: URL) => {
 };
 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}`;
+	let filename = `noname.${format}`;
 
 	if (!!metadata) {
 		try {
@@ -59,7 +59,7 @@ export const GET: RequestHandler = async ({ url }) => {
 		// Stream video/audio
 		return new Response(streamYouTube(link, format), {
 			headers: {
-				'Content-Type': 'text/event-stream',
+				'Content-Type': `${mimeTypeMap.get(format)}`,
 				'Content-Disposition': `attachment; filename="${filename}"`,
 				'Set-Cookie': 'downloading=0'
 			}