Update download logic

src/lib/client/downloader.ts

@@ -1,21 +0,0 @@
-const createAnchorElement = (url: string, filename: string): HTMLAnchorElement => {
-	const anchor = document.createElement('a');
-	anchor.href = url;
-	anchor.download = filename;
-	return anchor;
-};
-export const download = async (url: string, filename: string) => {
-	const response = await fetch(url);
-
-	if (!response.ok) {
-		throw new Error('Network response was not ok');
-	}
-
-	const blob = await response.blob();
-	const objectURL = window.URL.createObjectURL(blob);
-	const anchor = createAnchorElement(url, filename);
-	document.body.appendChild(anchor);
-	anchor.click();
-	anchor.remove();
-	window.URL.revokeObjectURL(objectURL);
-};

src/lib/components/DownloadManager.svelte

@@ -1,73 +1,22 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
+	let { progress, filename } = $props();
-	let { url, dismiss } = $props();
-
-	let visible = $state(false);
-	let progress = $state(0);
-	let filename = $state('');
-	onMount(async () => {
-		if (!url) return;
-
-		try {
-			visible = true;
-
-			const response = await fetch(url);
-			if (!response.ok) throw new Error('Download failed');
-
-			const contentDisposition: string = response?.headers?.get('content-disposition');
-			filename = contentDisposition.split('filename=')[1];
-			const contentLength: number = Number(response?.headers?.get('content-length'));
-			const reader = response?.body?.getReader();
-			const chunks: Uint8Array[] = [];
-			let receivedLength = 0;
-
-			while (true) {
-				const { done, value }: ReadableStreamReadResult<Uint8Array> = await reader.read();
-				if (done) break;
-				if (value) {
-					chunks.push(value);
-					receivedLength += value.length;
-					progress = Math.round((receivedLength / contentLength) * 100);
-				}
-			}
-
-			const blob = new Blob(chunks);
-			const downloadUrl = URL.createObjectURL(blob);
-
-			const a = document.createElement('a');
-			a.href = downloadUrl;
-			a.download = filename;
-			a.click();
-
-			URL.revokeObjectURL(downloadUrl);
-
-			setTimeout(() => {
-				visible = false;
-			}, 1500); // auto-dismiss
-		} catch (err) {
-			console.error(err);
-			visible = false;
-		}
-	});
 </script>
 
-{#if visible}
+<div
+	class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 font-mono backdrop-blur-sm"
+>
 	<div
-		class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 font-mono backdrop-blur-sm"
+		class="w-[90%] max-w-sm rounded-2xl border border-green-400 bg-[#000f00] p-6 text-sm text-green-300 shadow-2xl"
 	>
-		<div
+		<p class="mb-2 text-center text-cyan-300">
-			class="w-[90%] max-w-sm rounded-2xl border border-green-400 bg-[#000f00] p-6 text-sm text-green-300 shadow-2xl"
+			Downloading <span class="font-semibold text-green-400">{filename}</span>
-		>
+		</p>
-			<p class="mb-2 text-center text-cyan-300">
+		<div class="h-4 w-full overflow-hidden rounded-md border border-green-500 bg-black">
-				Downloading <span class="font-semibold text-green-400">{filename}</span>
+			<div
-			</p>
+				class="h-full bg-gradient-to-r from-green-400 to-green-600 transition-all duration-300"
-			<div class="h-4 w-full overflow-hidden rounded-md border border-green-500 bg-black">
+				style="width: {progress}%"
-				<div
+			/>
-					class="h-full bg-gradient-to-r from-green-400 to-green-600 transition-all duration-300"
-					style="width: {progress}%"
-				/>
-			</div>
-			<p class="mt-2 text-center text-pink-400">{progress}%</p>
 		</div>
+		<p class="mt-2 text-center text-pink-400">{progress}%</p>
 	</div>
-{/if}
+</div>

src/routes/+page.svelte

@@ -2,12 +2,12 @@
 	import { PUBLIC_VERSION } from '$env/static/public';
 	import supportedFormats from '$lib/common/supportedFormats.json';
 	import Loader from '$lib/components/Loader.svelte';
-	import { download } from '$lib/client/downloader';
 	import DownloadManager from '$lib/components/DownloadManager.svelte';
 	import { mount, unmount } from 'svelte';
 
 	let source = $state('youtube');
 	let link = $state('');
+	let downloading = $state(false);
 	let format = $state('mp3');
 	let showModal = $state(false);
 	let href = $state('');
@@ -15,6 +15,8 @@
 	let metadata = $state(false);
 	let logs = $state('');
 	let downloadManager: DownloadManager | null = null;
+	let progress = $state(0);
+	let filename = $state('');
 
 	const formats = Object.keys(supportedFormats).map((f) => {
 		return { value: f, label: f.toUpperCase() };
@@ -28,15 +30,46 @@
 		showModal = !showModal;
 	};
 
-	const dismiss = () => {
+	const download = async (url: string) => {
-		unmount(downloadManager);
+		const response = await fetch(url);
+
+		if (!response.ok) {
+			throw new Error('Network response was not ok');
+		}
+
+		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;
+
+		while (true) {
+			const { done, value }: ReadableStreamReadResult<Uint8Array> = await reader!.read();
+			if (done) break;
+			if (value) {
+				chunks.push(value);
+				receivedLength += value.length;
+				progress = Math.round((receivedLength / contentLength) * 100);
+			}
+		}
+
+		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();
 
-		const props = $state({ url: href });
+		downloading = true;
-		downloadManager = mount(DownloadManager, { target: document.body, props, events: { dismiss } });
+		await download(href);
+		downloading = false;
 
 		link = '';
 	};
@@ -187,6 +220,10 @@
 	</form>
 </div>
 
+{#if downloading}
+	<DownloadManager {filename} {progress}></DownloadManager>
+{/if}
+
 <!-- Modal -->
 {#if showModal}
 	<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/90 text-green-300">