Update download method

src/routes/+page.svelte

@@ -2,7 +2,9 @@
 	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 { download } from '$lib/client/downloader';
+	import DownloadManager from '$lib/components/DownloadManager.svelte';
+	import { mount, unmount } from 'svelte';
 
 	let source = $state('youtube');
 	let link = $state('');
@@ -12,6 +14,7 @@
 	let disabled = $state(true);
 	let metadata = $state(false);
 	let logs = $state('');
+	let downloadManager: DownloadManager|null = null;
 
 	const formats = Object.keys(supportedFormats).map((f) => {
 		return { value: f, label: f.toUpperCase() };
@@ -25,7 +28,16 @@
 		showModal = !showModal;
 	};
 
-	const onClick = () => {
+	const dismiss = () => {
+		unmount(downloadManager)
+	}
+
+	const onClick = async (evt) => {
+		evt.preventDefault();
+
+		const props = $state( { url: href });
+		downloadManager = mount(DownloadManager, { target: document.body, props, events: { dismiss } });
+
 		link = '';
 	};
 
@@ -166,7 +178,6 @@
 			id="btn-download"
 			{href}
 			onclick={onClick}
-			rel="external"
 			class="{disabled
 				? '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"

src/routes/download/+server.ts

@@ -38,28 +38,30 @@ const validateRequest = (url: URL) => {
 };
 export const GET: RequestHandler = async ({ url }) => {
 	const { format, source, metadata, link } = validateRequest(url);
-	let filename = `noname.${format}`;
+	let filename = '';
+	let contentLength = 0;
 
-	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');
-		}
+	try {
+		logger.debug(`Fetching video data to set filename`);
+		// Fetch metadata for filename
+		const ytMetadata = await getYouTubeMetadata(link);
+		const { title, uploader, filesize_approx } = ytMetadata;
+		contentLength = filesize_approx;
+		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': `${mimeTypeMap.get(format)}`,
+				'Content-Length': contentLength,
 				'Content-Disposition': `attachment; filename="${filename}"`
 			}
 		});