Create download link

src/routes/+page.svelte

@@ -5,6 +5,7 @@
 	let loading = $state(true);
 	let showModal = $state(false);
 	let error = $state(false);
+	let href = $state('');
 
 	const toggleModal = () => {
 		showModal = !showModal;
@@ -24,13 +25,7 @@
 		searchParams.append('link', link);
 		searchParams.append('format', format);
 
-		const response = await fetch(`/download?${searchParams.toString()}`);
-		const file = window.URL.createObjectURL(await response.blob());
-
-		const anchor = document.createElement('a');
-		anchor.setAttribute('download', true);
-		anchor.href = file;
-		anchor.click();
+		href = `/download?${searchParams.toString()}`;
 	};
 
 	$effect(() => {
@@ -124,8 +119,12 @@
 			type="submit"
 			class="w-full rounded-lg border-4 border-pink-700 bg-pink-500 px-4 py-3 text-black transition hover:bg-pink-600 active:border-yellow-500"
 		>
-			Start Download!
+			Create download link
 		</button>
+
+		{#if href}
+			<a class="download-link" {href}> Download </a>
+		{/if}
 	</form>
 </div>
 
@@ -154,6 +153,15 @@
 	* {
 		font-size: 12px;
 	}
+
+	.download-link {
+		margin: 0 auto;
+		padding: 5px;
+		display: block;
+		text-decoration: underline;
+		text-align: center;
+	}
+
 	.retro-radio {
 		appearance: none;
 		background-color: #000;

src/routes/download/+server.ts

@@ -29,7 +29,6 @@ function streamYouTube(link: string, format: string): ReadableStream<Uint8Array>
 				'-o',
 				'-',
 				format === 'mp3' ? '--embed-metadata' : '',
-				format === 'mp3' ? '--embed-thumbnail' : '',
 				'--format',
 				format === 'mp3' ? 'bestaudio' : 'best',
 				'--audio-format',