Compare commits

..

1 commit

Author SHA1 Message Date
0d0
af97bd59a0 0.9.3-b
All checks were successful
Bump deps (only minor versions) / ci (push) Successful in 17s
Create Release / create-release (push) Successful in 27s
2025-03-26 17:23:18 +01:00
13 changed files with 490 additions and 616 deletions

View file

@ -1,4 +1,3 @@
NODE_ENV=development
HOST=0.0.0.0
ORIGIN=https://dl.emersa.it
YTDLP_PATH=./yt-dlp

View file

@ -33,7 +33,6 @@ jobs:
echo "HOST=0.0.0.0" >> .env
echo "ORIGIN=https://dl.emersa.it" >> .env
echo "PUBLIC_VERSION=$(cat package.json | jq .version)" >> .env
echo "NODE_ENV=production" >> .env
npm run build
cp package* build/
cp .env build/

View file

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

699
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -1,7 +1,7 @@
{
"name": "dl.emersa.it",
"private": true,
"version": "1.0.0-b",
"version": "0.9.3-b",
"type": "module",
"scripts": {
"dev": "vite dev",
@ -15,34 +15,34 @@
"lint": "prettier --check . && eslint ."
},
"devDependencies": {
"@eslint/compat": "^1.2.8",
"@eslint/js": "^9.25.0",
"@eslint/compat": "^1.2.7",
"@eslint/js": "^9.23.0",
"@sveltejs/adapter-node": "^5.2.12",
"@sveltejs/kit": "^2.20.7",
"@sveltejs/kit": "^2.20.2",
"@sveltejs/vite-plugin-svelte": "^5.0.3",
"@tailwindcss/vite": "^4.1.4",
"eslint": "^9.25.0",
"eslint-config-prettier": "^10.1.2",
"eslint-plugin-svelte": "^3.5.1",
"@tailwindcss/vite": "^4.0.16",
"eslint": "^9.23.0",
"eslint-config-prettier": "^10.1.1",
"eslint-plugin-svelte": "^3.3.3",
"globals": "^16.0.0",
"mdsvex": "^0.12.3",
"prettier": "^3.5.3",
"prettier-plugin-svelte": "^3.3.3",
"prettier-plugin-tailwindcss": "^0.6.11",
"svelte": "^5.28.1",
"svelte-check": "^4.1.6",
"sveltekit-sse": "^0.13.18",
"tailwindcss": "^4.1.4",
"typescript": "^5.8.3",
"typescript-eslint": "^8.30.1",
"vite": "^6.3.2"
"svelte": "^5.25.3",
"svelte-check": "^4.1.5",
"sveltekit-sse": "^0.13.16",
"tailwindcss": "^4.0.16",
"typescript": "^5.8.2",
"typescript-eslint": "^8.28.0",
"vite": "^6.2.3"
},
"dependencies": {
"@tailwindcss/forms": "^0.5.10",
"@tailwindcss/postcss": "^4.1.4",
"@tailwindcss/postcss": "^4.0.16",
"@tailwindcss/typography": "^0.5.16",
"@types/node": "^22.14.1",
"@types/node": "^22.13.13",
"winston": "^3.17.0",
"youtube-dl-exec": "^3.0.20"
"youtube-dl-exec": "^3.0.19"
}
}

View file

@ -7,11 +7,14 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head%
<style>
* {
font-family: 'Fira Code', monospace;
@font-face {
font-family: 'Press Start 2P';
src: url('/fonts/PressStart2P-Regular.ttf');
}
body {
background: black; /* Fallback */
font-family: 'Press Start 2P', sans-serif;
color: #37ff1456; /* Retro green text */
margin: 0;
}

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

View file

@ -1,73 +1,3 @@
<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 props = $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="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>
</div>
</div>
{/if}

View file

@ -3,7 +3,7 @@ import winston from 'winston';
import { dev } from '$app/environment';
export const logger = winston.createLogger({
level: import.meta.env.DEV ? 'debug' : 'error',
level: dev ? 'debug' : 'error',
format: winston.format.json(),
transports: [new winston.transports.Console()]
});

View file

@ -5,7 +5,7 @@ import supportedFormats from '$lib/common/supportedFormats.json';
import { logger, mimeTypeMap } from '$lib/server/helpers';
const YTDLP_PATH: string = env.YTDLP_PATH as string;
const HTTPS_PROXY: string = env.HTTPS_PROXY as string;
const HTTPS_PROXY: string = env.v as string;
export const ytdl = create(YTDLP_PATH);
@ -13,18 +13,13 @@ export const ytdl = create(YTDLP_PATH);
* Fetch YouTube metadata (title, uploader/artist)
*/
export async function getYouTubeMetadata(link: string) {
const options = {
return await ytdl(link, {
dumpSingleJson: true,
noCheckCertificates: true,
noWarnings: true,
preferFreeFormats: true
};
if (HTTPS_PROXY) {
options.proxy = HTTPS_PROXY;
}
return await ytdl(link, options);
preferFreeFormats: true,
proxy: HTTPS_PROXY ? HTTPS_PROXY : ''
});
}
/**

View file

@ -17,11 +17,4 @@
transform: rotate(180deg);
display: inline-block;
}
@media screen and (max-height: 600px) {
/* Your CSS rules here */
footer {
display: none;
}
}
</style>

View file

@ -2,9 +2,7 @@
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';
import { onMount } from 'svelte';
let source = $state('youtube');
let link = $state('');
@ -13,8 +11,9 @@
let href = $state('');
let disabled = $state(true);
let metadata = $state(false);
let downloading = $state(false);
let logs = $state('');
let downloadManager: DownloadManager | null = null;
let logId = undefined;
const formats = Object.keys(supportedFormats).map((f) => {
return { value: f, label: f.toUpperCase() };
@ -28,17 +27,29 @@
showModal = !showModal;
};
const dismiss = () => {
unmount(downloadManager);
onMount(() => {
document.cookie = 'downloading=0';
});
const readLogs = () => {
logId = setInterval(() => {
logs += "We're downloading <br>";
}, 2000);
};
const onClick = async (evt) => {
evt.preventDefault();
const props = $state({ url: href });
downloadManager = mount(DownloadManager, { target: document.body, props, events: { dismiss } });
const onClick = () => {
let checkIterations = 0;
link = '';
downloading = true;
document.cookie = 'downloading=1';
readLogs();
const id = setInterval(() => {
if (document.cookie.includes('downloading=0') || checkIterations > 3) {
downloading = false && clearInterval(id) && clearInterval(logId);
}
checkIterations++;
}, 1000);
};
const createAnchor = () => {
@ -83,46 +94,42 @@
<div
id="wrapper"
class="relative mx-auto max-w-full rounded-2xl bg-black p-4 text-green-400 shadow-xl sm:max-w-sm md:max-w-md lg:max-w-lg"
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"
>
<!-- Loader Overlay -->
<div
id="loader"
class="absolute inset-0 z-10 hidden items-center justify-center bg-black/80 backdrop-blur-sm"
class={[
'absolute inset-0 z-10 flex items-center justify-center bg-black/20 backdrop-blur-xs',
{ downloading }
]}
>
<Loader />
{@html logs}
</div>
<!-- Info Button -->
<!-- Info Icon -->
<button
onclick={toggleModal}
class="absolute top-3 right-3 text-pink-500 transition hover:text-pink-400"
class="absolute top-3 right-3 text-[#ff007f] transition hover:text-[#ff3399]"
aria-label="Open Info Modal"
>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="h-5 w-5" viewBox="0 0 24 24">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="h-6 w-6" viewBox="0 0 24 24">
<path
d="M12 0C5.373 0 0 5.373 0 12c0 6.627 5.373 12 12 12s12-5.373 12-12C24 5.373 18.627 0 12 0zm.75 18h-1.5v-6h1.5v6zm0-8h-1.5V8h1.5v2z"
/>
</svg>
</button>
<!-- Title -->
<p id="title" class="mb-4 text-center font-mono text-xl tracking-tight text-cyan-300">
🐙 Scaricatore 🐙
</p>
<!-- Form -->
<form class="space-y-5 font-mono text-sm">
<!-- Source & Format -->
<div class="flex flex-col gap-4 sm:flex-row">
<div class="flex-1">
<label for="source" class="mb-1 block text-cyan-300">Source</label>
<p id="title" class="mb-6 text-center text-[#00e5ff]">🐙 Scaricatore 🐙</p>
<form class="space-y-6">
<!-- Source selection -->
<div>
<label for="source" class="mb-2 block text-[#00e5ff]"> Choose Source: </label>
<select
id="source"
name="source"
bind:value={source}
class="w-full rounded-md border border-green-400 bg-[#000f00] px-3 py-2 text-green-300 focus:border-pink-400 focus:outline-none"
class="w-full rounded-lg border-4 border-[#00ff7f] bg-[#001a00] px-4 py-3 text-[#00ff7f] focus:border-[#ff3399] focus:outline-none"
>
{#each sources as source}
<option value={source.value}>{source.label}</option>
@ -130,57 +137,57 @@
</select>
</div>
<div class="flex-1">
<label for="format" class="mb-1 block text-cyan-300">Format</label>
<!-- Link Input -->
<div>
<label for="link" class="mb-2 block text-[#00e5ff]"> Enter Video Link: </label>
<input
name="link"
type="url"
id="link"
bind:value={link}
required
placeholder="Paste your link here"
class="w-full rounded-lg border-4 border-[#00ff7f] bg-[#001a00] px-4 py-3 text-[#00ff7f] focus:border-[#ff3399] focus:outline-none"
/>
</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-md border border-green-400 bg-[#000f00] px-3 py-2 text-green-300 focus:border-pink-400 focus:outline-none"
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>
<!-- Video Link -->
<!-- Metadata -->
<div>
<label for="link" class="mb-1 block text-cyan-300">Video Link</label>
<input
type="url"
id="link"
name="link"
bind:value={link}
required
placeholder="https://..."
class="w-full rounded-md border border-green-400 bg-[#000f00] px-3 py-2 text-green-300 placeholder:text-green-600 focus:border-pink-400 focus:outline-none"
/>
</div>
<!-- Metadata Checkbox -->
<div class="flex items-center gap-2">
<label for="metadata" class="mb-2 block text-[#00e5ff]"
>Set filename (<span class="text-red-700">SLOW</span>)</label
>
<input
type="checkbox"
id="metadata"
name="metadata"
bind:checked={metadata}
class="h-4 w-4 border border-green-400 bg-[#000f00] text-green-500 focus:ring-pink-400"
class="rounded-lg border-4 border-[#00ff7f] bg-[#001a00] px-4 py-3 text-[#00ff7f] focus:border-[#ff3399] focus:outline-none"
/>
<label for="metadata" class="text-cyan-300"
>Set filename (<span class="text-red-500">slow</span>)</label
>
</div>
<!-- Download Button -->
<a
id="btn-download"
{href}
rel="external"
onclick={onClick}
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"
? 'disabled'
: ''} block w-full rounded-lg border-4 border-[#ff3399] bg-[#ff007f] px-4 py-3 text-center text-4xl text-black transition hover:bg-[#ff3399] active:border-yellow-500"
>
DOWNLOAD
</a>
@ -189,24 +196,71 @@
<!-- Modal -->
{#if showModal}
<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/90 text-green-300">
<div class="w-[90%] max-w-md rounded-lg border border-green-400 bg-[#001a00] p-5 text-center">
<h2 class="mb-3 text-base font-semibold">🐙 Scaricatore v{PUBLIC_VERSION} 🐙</h2>
<p>
Download Spotify playlists and YouTube videos with ease. Choose your source, paste a link,
select format, go!
</p>
<p class="mt-3">
<a class="text-cyan-400 underline" href="https://git.pweapon.org/odo/dl.emersa.it"
>Source Code</a
<div class="bg-opacity-80 fixed inset-0 z-50 flex items-center justify-center bg-black">
<div
class="w-4/5 max-w-lg rounded-lg border-4 border-[#00ff7f] bg-[#002b00] p-6 text-center text-[#00ff7f]"
>
<h2 class="mb-4 text-lg">🐙 Scaricatore v{PUBLIC_VERSION} 🐙</h2>
<p>
This app allows you to download Spotify playlists and YouTube videos directly. Choose your
source, paste the link, and select a format to start downloading!
</p>
<span class="mt-10 block">
<a class="text-[#00e5ff] underline" href="https://git.pweapon.org/odo/dl.emersa.it"
>Click here for the source code</a
>
</span>
<button
onclick={toggleModal}
class="mt-6 rounded-md border border-pink-400 bg-pink-600 px-4 py-2 text-black hover:bg-pink-500"
class="mt-6 rounded-lg border-4 border-[#ff3399] bg-[#ff007f] px-4 py-2 text-black hover:bg-[#ff3399]"
>
Close
</button>
</div>
</div>
{/if}
<style>
* {
font-family: 'Press Start 2P', cursive;
}
@media (max-height: 1000px) {
* {
font-size: 10px;
}
}
@media (min-width: 1024px) {
* {
font-size: 12px;
}
}
#loader {
display: none;
}
#loader.downloading {
display: grid;
justify-items: center;
align-items: center;
}
input[type='url'],
select {
font-family: inherit;
}
#title {
font-size: 18px;
}
#btn-download {
font-size: 26px;
transition: opacity 0.3s ease;
}
a.disabled {
pointer-events: none;
cursor: default;
opacity: 0.5;
}
</style>

View file

@ -38,15 +38,14 @@ const validateRequest = (url: URL) => {
};
export const GET: RequestHandler = async ({ url }) => {
const { format, source, metadata, link } = validateRequest(url);
let filename = '';
let contentLength = 0;
let filename = `you-clicked-no-metadata-so-i-cant-put-a-correct-name.${format}`;
if (!!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 { title, uploader } = ytMetadata;
const safeTitle = `${uploader} - ${title}`;
filename = `${safeTitle}.${format}`;
} catch (err) {
@ -54,14 +53,15 @@ export const GET: RequestHandler = async ({ url }) => {
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}"`
'Content-Disposition': `attachment; filename="${filename}"`,
'Set-Cookie': 'downloading=0'
}
});
} catch (err) {