Compare commits
No commits in common. "main" and "v0.9.0" have entirely different histories.
17 changed files with 871 additions and 1124 deletions
|
|
@ -2,4 +2,4 @@ HOST=0.0.0.0
|
|||
ORIGIN=https://dl.emersa.it
|
||||
YTDLP_PATH=./yt-dlp
|
||||
PUBLIC_VERSION=0.6.3
|
||||
HTTPS_PROXY=
|
||||
HTTPS_PROXY=
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
name: Just some continuos integration
|
||||
name: Bump deps (only minor versions)
|
||||
|
||||
on: [push]
|
||||
|
||||
|
|
@ -15,16 +15,7 @@ jobs:
|
|||
uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: '20'
|
||||
- name: Format things if needed
|
||||
- name: Prepare, Check, Lint and Format
|
||||
run: |
|
||||
npm install
|
||||
npm i
|
||||
npm run prepare
|
||||
npm run lint
|
||||
npm run format
|
||||
git config --global user.name "forgejo-bot"
|
||||
git config --global user.email "bot@pweapon.org"
|
||||
git add --all || exit 0
|
||||
git commit -m "chore: lint and format" || exit 0
|
||||
git push origin HEAD:${GITHUB_REF#refs/heads/}
|
||||
env:
|
||||
GITHUB_TOKEN: ${{ secrets.FORGEJO_TOKEN }}
|
||||
|
|
|
|||
|
|
@ -29,15 +29,13 @@ jobs:
|
|||
- name: Create Release
|
||||
run: |
|
||||
npm ci
|
||||
touch .env.production
|
||||
echo "HOST=0.0.0.0" >> .env.production
|
||||
echo "PORT=3000" >> .env.production
|
||||
echo "ORIGIN=https://dl.emersa.it" >> .env.production
|
||||
echo "PUBLIC_VERSION=$(cat package.json | jq .version)" >> .env.production
|
||||
echo "NODE_ENV=production" >> .env.production
|
||||
touch .env
|
||||
echo "HOST=0.0.0.0" >> .env
|
||||
echo "ORIGIN=https://dl.emersa.it" >> .env
|
||||
echo "PUBLIC_VERSION=$(cat package.json | jq .version)" >> .env
|
||||
npm run build
|
||||
cp package* build/
|
||||
cp .env.production build/
|
||||
cp .env build/
|
||||
mkdir releases
|
||||
cd build/
|
||||
tar czvf ../releases/build.tar.gz .
|
||||
|
|
|
|||
|
|
@ -2,10 +2,11 @@
|
|||
|
||||
|
||||
|
||||
|
||||
|
||||
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.
|
||||
|
||||
[`... we don't have the concept of users, when we refer to people, we call them people.`](https://ar.al/2020/08/07/what-is-the-small-web/)
|
||||
|
||||
<a href='https://dl.emersa.it'><img src='./static/screen.webp' alt='screen' height=300></a>
|
||||
|
||||
## Self-Hosting
|
||||
|
|
|
|||
1471
package-lock.json
generated
1471
package-lock.json
generated
File diff suppressed because it is too large
Load diff
48
package.json
48
package.json
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "dl.emersa.it",
|
||||
"private": true,
|
||||
"version": "1.0.2-b",
|
||||
"version": "0.9.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite dev",
|
||||
|
|
@ -15,34 +15,34 @@
|
|||
"lint": "prettier --check . && eslint ."
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/compat": "^1.3.1",
|
||||
"@eslint/js": "^9.30.1",
|
||||
"@eslint/compat": "^1.2.7",
|
||||
"@eslint/js": "^9.21.0",
|
||||
"@sveltejs/adapter-node": "^5.2.12",
|
||||
"@sveltejs/kit": "^2.22.2",
|
||||
"@sveltejs/vite-plugin-svelte": "^5.1.0",
|
||||
"@tailwindcss/vite": "^4.1.11",
|
||||
"eslint": "^9.30.1",
|
||||
"eslint-config-prettier": "^10.1.5",
|
||||
"eslint-plugin-svelte": "^3.10.1",
|
||||
"globals": "^16.3.0",
|
||||
"mdsvex": "^0.12.6",
|
||||
"prettier": "^3.6.2",
|
||||
"prettier-plugin-svelte": "^3.4.0",
|
||||
"prettier-plugin-tailwindcss": "^0.6.13",
|
||||
"svelte": "^5.34.9",
|
||||
"svelte-check": "^4.2.2",
|
||||
"sveltekit-sse": "^0.13.19",
|
||||
"tailwindcss": "^4.1.11",
|
||||
"typescript": "^5.8.3",
|
||||
"typescript-eslint": "^8.35.1",
|
||||
"vite": "^6.3.5"
|
||||
"@sveltejs/kit": "^2.17.3",
|
||||
"@sveltejs/vite-plugin-svelte": "^5.0.3",
|
||||
"@tailwindcss/vite": "^4.0.9",
|
||||
"eslint": "^9.21.0",
|
||||
"eslint-config-prettier": "^10.0.1",
|
||||
"eslint-plugin-svelte": "^2.46.1",
|
||||
"globals": "^16.0.0",
|
||||
"mdsvex": "^0.12.3",
|
||||
"prettier": "^3.5.2",
|
||||
"prettier-plugin-svelte": "^3.3.3",
|
||||
"prettier-plugin-tailwindcss": "^0.6.11",
|
||||
"svelte": "^5.20.4",
|
||||
"svelte-check": "^4.1.4",
|
||||
"sveltekit-sse": "^0.13.14",
|
||||
"tailwindcss": "^4.0.9",
|
||||
"typescript": "^5.7.3",
|
||||
"typescript-eslint": "^8.25.0",
|
||||
"vite": "^6.2.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tailwindcss/forms": "^0.5.10",
|
||||
"@tailwindcss/postcss": "^4.1.11",
|
||||
"@tailwindcss/postcss": "^4.0.9",
|
||||
"@tailwindcss/typography": "^0.5.16",
|
||||
"@types/node": "^24.0.10",
|
||||
"@types/node": "^22.13.5",
|
||||
"winston": "^3.17.0",
|
||||
"youtube-dl-exec": "^3.0.22"
|
||||
"youtube-dl-exec": "^3.0.16"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,5 +29,5 @@ tar -xvf build.tar.gz -C .
|
|||
rm build.tar.gz
|
||||
npm ci
|
||||
npm run download-yt-dlp
|
||||
echo "YTDLP_PATH=$(readlink -f yt-dlp)" >> .env.production
|
||||
echo "HTTPS_PROXY=${PROXY}" >> .env.production
|
||||
echo "YTDLP_PATH=$(readlink -f yt-dlp)" >>.env
|
||||
echo "HTTPS_PROXY=${PROXY}" >>.env
|
||||
|
|
|
|||
|
|
@ -14,5 +14,4 @@ __dir="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
|
|||
version="${1:?Error: No argument provided. Usage: $0 <version>}"
|
||||
|
||||
npm version "v${version}"
|
||||
git push --tags
|
||||
git push
|
||||
git push --tags
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
3
src/lib/components/DownloadManager.svelte
Normal file
3
src/lib/components/DownloadManager.svelte
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<script lang="ts">
|
||||
let props = $props();
|
||||
</script>
|
||||
28
src/lib/components/Loader.svelte
Normal file
28
src/lib/components/Loader.svelte
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<div class="w-[150px]">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"
|
||||
><linearGradient id="a3"
|
||||
><stop offset="0" stop-color="#FF156D" stop-opacity="0"></stop><stop
|
||||
offset="1"
|
||||
stop-color="#FF156D"
|
||||
></stop></linearGradient
|
||||
><circle
|
||||
fill="none"
|
||||
stroke="url(#a3)"
|
||||
stroke-width="15"
|
||||
stroke-linecap="round"
|
||||
stroke-dasharray="0 44 0 44 0 44 0 44 0 360"
|
||||
cx="100"
|
||||
cy="100"
|
||||
r="70"
|
||||
transform-origin="center"
|
||||
><animateTransform
|
||||
type="rotate"
|
||||
attributeName="transform"
|
||||
calcMode="discrete"
|
||||
dur="2"
|
||||
values="360;324;288;252;216;180;144;108;72;36"
|
||||
repeatCount="indefinite"
|
||||
></animateTransform></circle
|
||||
></svg
|
||||
>
|
||||
</div>
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
<script lang="ts">
|
||||
let { progress, filename } = $props();
|
||||
</script>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
<p class="mt-2 text-center text-pink-400">{progress}%</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,8 +1,9 @@
|
|||
import formats from '$lib/common/supportedFormats.json';
|
||||
import winston from 'winston';
|
||||
import { dev } from '$app/environment';
|
||||
|
||||
export const logger = winston.createLogger({
|
||||
level: 'debug',
|
||||
level: dev ? 'debug' : 'error',
|
||||
format: winston.format.json(),
|
||||
transports: [new winston.transports.Console()]
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
import { create, type Flags } from 'youtube-dl-exec';
|
||||
import { create } from 'youtube-dl-exec';
|
||||
import { env } from '$env/dynamic/private';
|
||||
import { spawn } from 'node:child_process';
|
||||
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);
|
||||
|
||||
|
|
@ -12,18 +13,13 @@ export const ytdl = create(YTDLP_PATH);
|
|||
* Fetch YouTube metadata (title, uploader/artist)
|
||||
*/
|
||||
export async function getYouTubeMetadata(link: string) {
|
||||
const options: Flags = {
|
||||
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 : ''
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -65,11 +61,10 @@ export function streamYouTube(link: string, format: string): ReadableStream<Uint
|
|||
process.stdout.on('data', (chunk) => {
|
||||
try {
|
||||
controller.enqueue(chunk);
|
||||
} catch {
|
||||
} catch (ex) {
|
||||
process.kill();
|
||||
}
|
||||
});
|
||||
|
||||
process.stderr.on('data', (chunk) => logger.debug(chunk.toString()));
|
||||
process.stdout.on('end', () => {
|
||||
try {
|
||||
|
|
|
|||
|
|
@ -17,11 +17,4 @@
|
|||
transform: rotate(180deg);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@media screen and (max-height: 600px) {
|
||||
/* Your CSS rules here */
|
||||
footer {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,74 +1,51 @@
|
|||
<script lang="ts">
|
||||
import { PUBLIC_VERSION } from '$env/static/public';
|
||||
import supportedFormats from '$lib/common/supportedFormats.json';
|
||||
import DownloadManager from '$lib/components/ProgressBar.svelte';
|
||||
import Loader from '$lib/components/Loader.svelte';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
let source = $state('youtube');
|
||||
let link = $state('');
|
||||
let downloading = $state(false);
|
||||
let format = $state('mp3');
|
||||
let showModal = $state(false);
|
||||
let href = $state('');
|
||||
let disabled = $state(true);
|
||||
let progress = $state(0);
|
||||
let filename = $state('');
|
||||
let metadata = $state(false);
|
||||
let downloading = $state(false);
|
||||
let logs = $state('');
|
||||
let logId = undefined;
|
||||
|
||||
const formats = Object.keys(supportedFormats).map((f) => {
|
||||
return { value: f, label: f.toUpperCase() };
|
||||
});
|
||||
const sources = [
|
||||
{ value: 'youtube', label: 'YouTube' },
|
||||
{ value: 'youtube', label: 'Any Other Website' }
|
||||
];
|
||||
|
||||
const toggleModal = () => {
|
||||
showModal = !showModal;
|
||||
};
|
||||
|
||||
const download = async (url: string) => {
|
||||
const response = await fetch(url);
|
||||
onMount(() => {
|
||||
document.cookie = 'downloading=0';
|
||||
});
|
||||
|
||||
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 } = await reader!.read();
|
||||
if (done) break;
|
||||
if (value) {
|
||||
chunks.push(value);
|
||||
receivedLength += value.length;
|
||||
progress = Math.round((receivedLength / 50000) * 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 readLogs = () => {
|
||||
logId = setInterval(() => {
|
||||
logs += "We're downloading <br>";
|
||||
}, 2000);
|
||||
};
|
||||
|
||||
const onClick = async (evt) => {
|
||||
evt.preventDefault();
|
||||
|
||||
downloading = true;
|
||||
await download(href);
|
||||
downloading = false;
|
||||
|
||||
const onClick = () => {
|
||||
let checkIterations = 0;
|
||||
link = '';
|
||||
progress = 0;
|
||||
filename = '';
|
||||
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 = () => {
|
||||
|
|
@ -80,9 +57,8 @@
|
|||
try {
|
||||
new URL(link);
|
||||
disabled = false;
|
||||
} catch {
|
||||
} catch (err) {
|
||||
/*
|
||||
|
||||
if (err.code === 'ERR_INVALID_URL') {
|
||||
|
||||
}
|
||||
|
|
@ -96,6 +72,8 @@
|
|||
searchParams.append('link', link);
|
||||
searchParams.append('format', format);
|
||||
|
||||
if (metadata) searchParams.append('metadata', '1');
|
||||
|
||||
href = `/download?${searchParams.toString()}`;
|
||||
};
|
||||
|
||||
|
|
@ -112,111 +90,216 @@
|
|||
|
||||
<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"
|
||||
>
|
||||
<!-- Info Button -->
|
||||
<div
|
||||
id="loader"
|
||||
class={[
|
||||
'absolute inset-0 z-10 flex items-center justify-center bg-black/20 backdrop-blur-xs',
|
||||
{ downloading }
|
||||
]}
|
||||
>
|
||||
<Loader />
|
||||
{@html logs}
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
<p id="title" class="mb-6 text-center text-[#00e5ff]">🐙 Scaricatore 🐙</p>
|
||||
<form class="space-y-6">
|
||||
<!-- Source Selection -->
|
||||
<fieldset class="space-y-4">
|
||||
<legend class="text-[#00e5ff]">Choose Source:</legend>
|
||||
|
||||
<!-- 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>
|
||||
<select
|
||||
id="source"
|
||||
<label class="flex items-center space-x-3">
|
||||
<input type="radio" name="source" value="youtube" bind:group={source} class="retro-radio" />
|
||||
<span>YouTube</span>
|
||||
</label>
|
||||
|
||||
<label class="flex items-center space-x-3">
|
||||
<input
|
||||
disabled
|
||||
type="radio"
|
||||
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"
|
||||
>
|
||||
{#each sources as source (source.label)}
|
||||
<option value={source.value}>{source.label}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
value="spotify"
|
||||
bind:group={source}
|
||||
class="retro-radio"
|
||||
/>
|
||||
<span class="not-available">Spotify</span>
|
||||
</label>
|
||||
|
||||
<div class="flex-1">
|
||||
<label for="format" class="mb-1 block text-cyan-300">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"
|
||||
>
|
||||
{#each formats as format (format.label)}
|
||||
<option value={format.value}>{format.label}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<label class="flex items-center space-x-3">
|
||||
<input type="radio" name="source" value="other" bind:group={source} class="retro-radio" />
|
||||
<span>
|
||||
Any other website
|
||||
<!--
|
||||
(<a
|
||||
href="https://github.com/yt-dlp/yt-dlp/blob/master/supportedsites.md"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="text-[#ff3399] hover:underline"
|
||||
>supported sites
|
||||
</a>)
|
||||
-->
|
||||
</span>
|
||||
</label>
|
||||
</fieldset>
|
||||
|
||||
<!-- Video Link -->
|
||||
<!-- Link Input -->
|
||||
<div>
|
||||
<label for="link" class="mb-1 block text-cyan-300">Video Link</label>
|
||||
<label for="link" class="mb-2 block text-[#00e5ff]"> Enter Playlist or Video Link: </label>
|
||||
<input
|
||||
name="link"
|
||||
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"
|
||||
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-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>
|
||||
|
||||
<!-- Metadata -->
|
||||
<div>
|
||||
<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="rounded-lg border-4 border-[#00ff7f] bg-[#001a00] px-4 py-3 text-[#00ff7f] focus:border-[#ff3399] focus:outline-none"
|
||||
/>
|
||||
</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>
|
||||
</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">
|
||||
<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>
|
||||
<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>
|
||||
Download Spotify playlists and YouTube videos with ease. Choose your source, paste a link,
|
||||
select format, go!
|
||||
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>
|
||||
<p class="mt-3">
|
||||
<a class="text-cyan-400 underline" href="https://git.pweapon.org/odo/dl.emersa.it"
|
||||
>Source Code</a
|
||||
<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
|
||||
>
|
||||
</p>
|
||||
</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;
|
||||
}
|
||||
.not-available {
|
||||
text-decoration-line: line-through;
|
||||
text-decoration-color: red;
|
||||
}
|
||||
|
||||
.retro-radio {
|
||||
appearance: none;
|
||||
background-color: #000;
|
||||
border: 2px solid #00ff7f;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.retro-radio:checked {
|
||||
background-color: #00ff7f;
|
||||
box-shadow:
|
||||
0 0 4px #00ff7f,
|
||||
0 0 10px #00ff7f;
|
||||
}
|
||||
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { error } from '@sveltejs/kit';
|
||||
import type { RequestHandler } from './$types';
|
||||
import { getYouTubeMetadata, streamYouTube } from '$lib/server/ytdlp';
|
||||
import { getYouTubeMetadata, streamYouTube, ytdl } from '$lib/server/ytdlp';
|
||||
import { isURLValid, logger, mimeTypeMap } from '$lib/server/helpers';
|
||||
|
||||
const validateRequest = (url: URL) => {
|
||||
|
|
@ -8,6 +8,7 @@ const validateRequest = (url: URL) => {
|
|||
const link = url.searchParams.get('link');
|
||||
const format = url.searchParams.get('format'); // mp3, mp4
|
||||
const source = url.searchParams.get('source'); // youtube or spotify
|
||||
const metadata = url.searchParams.has('metadata');
|
||||
|
||||
// Validate input
|
||||
if (!link || !format || !source) {
|
||||
|
|
@ -31,34 +32,36 @@ const validateRequest = (url: URL) => {
|
|||
return {
|
||||
link,
|
||||
format,
|
||||
source
|
||||
source,
|
||||
metadata
|
||||
};
|
||||
};
|
||||
export const GET: RequestHandler = async ({ url }) => {
|
||||
const { format, link } = validateRequest(url);
|
||||
let filename = '';
|
||||
const { format, source, metadata, link } = validateRequest(url);
|
||||
let filename = `you-clicked-no-metadata-so-i-cant-put-a-correct-name.${format}`;
|
||||
|
||||
logger.debug(`Requested: ${link}`);
|
||||
|
||||
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');
|
||||
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 {
|
||||
// Stream video/audio
|
||||
return new Response(streamYouTube(link, format), {
|
||||
headers: {
|
||||
'Content-Type': `${mimeTypeMap.get(format)}`,
|
||||
'Content-Disposition': `attachment; filename="${filename}"`
|
||||
'Content-Type': 'text/event-stream',
|
||||
'Content-Disposition': `attachment; filename="${filename}"`,
|
||||
'Set-Cookie': 'downloading=0'
|
||||
}
|
||||
});
|
||||
} catch (err) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue