odo/dl.emersa.it
1
0
Fork 0
Code Issues Pull requests Releases 26 Packages Activity Actions

Update download logic
Some checks failed
Bump deps (only minor versions) / ci (push) Has been cancelled
Details

Browse source
This commit is contained in:
0d0 2025-04-22 20:37:21 +02:00
parent 0706e42e85
commit 8e760a905f
3 changed files with 57 additions and 92 deletions
Download patch file Download diff file Expand all files Collapse all files

21
src/lib/client/downloader.ts
View file

@ -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);
};

81
src/lib/components/DownloadManager.svelte
View file

@ -1,73 +1,22 @@
<script lang="ts">
import { onMount } from 'svelte';
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;
}
});
let { progress, filename } = $props();
</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
class="w-[90%] max-w-sm rounded-2xl border border-green-400 bg-[#000f00] p-6 text-sm text-green-300 shadow-2xl"
>
<p class="mb-2 text-center text-cyan-300">
Downloading <span class="font-semibold text-green-400">{filename}</span>
</p>
<div class="h-4 w-full overflow-hidden rounded-md border border-green-500 bg-black">
<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>
<p class="mb-2 text-center text-cyan-300">
Downloading <span class="font-semibold text-green-400">{filename}</span>
</p>
<div class="h-4 w-full overflow-hidden rounded-md border border-green-500 bg-black">
<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>
{/if}
</div>

47
src/routes/+page.svelte
View file

@ -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 = () => {
unmount(downloadManager);
const download = async (url: string) => {
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 });
downloadManager = mount(DownloadManager, { target: document.body, props, events: { dismiss } });
downloading = true;
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">