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

Initial commit

Browse source
This commit is contained in:
0d0 2025-01-24 19:04:29 +01:00
commit 1f35f0411b
28 changed files with 5703 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/app.css Normal file
View file

@ -0,0 +1,3 @@
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

13
src/app.d.ts vendored Normal file
View file

@ -0,0 +1,13 @@
// See https://svelte.dev/docs/kit/types#app.d.ts
// for information about these interfaces
declare global {
namespace App {
// interface Error {}
// interface Locals {}
// interface PageData {}
// interface PageState {}
// interface Platform {}
}
}
export {};

39
src/app.html Normal file
View file

@ -0,0 +1,39 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<link rel="manifest" href="manifest.json">
<meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head%
<style>
@font-face {
font-family: 'Press Start 2P';
src: url('/fonts/PressStart2P-Regular.ttf');
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
background: black; /* Fallback */
background-image: radial-gradient(circle, #37ff1456 8%, transparent 8%),
radial-gradient(circle, #37ff1456 8%, transparent 8%);
background-size:
60px 60px,
30px 30px; /* Larger grid sizes for more spacing */
background-position:
0 0,
15px 15px; /* Offset the smaller pattern slightly */
font-family: 'Press Start 2P', sans-serif;
color: #37ff1456; /* Retro green text */
margin: 0;
}
</style>
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>

3
src/lib/components/DownloadManager.svelte Normal file
View file

@ -0,0 +1,3 @@
<script lang='ts'>
let props = $props();
</script>

6
src/lib/components/Loader.svelte Normal file
View file

@ -0,0 +1,6 @@
<div
class="absolute inset-0 z-10 flex items-center justify-center bg-white bg-opacity-50"
id="spinner"
>
<div class="h-20 w-20 animate-spin rounded-full border-b-2 border-t-2 border-gray-900"></div>
</div>

1
src/lib/index.ts Normal file
View file

@ -0,0 +1 @@
// place files you want to import through the `$lib` alias in this folder.

20
src/routes/+layout.svelte Normal file
View file

@ -0,0 +1,20 @@
<script lang="ts">
import '../app.css';
let { children } = $props();
</script>
{@render children()}
<footer
class="absolute bottom-0 w-[100dvw] mt-10 bg-black text-green-500 text-center py-4 border-t-4 border-green-500"
>
Made with ❤️ by Emersa <span>©</span>
</footer>
<style>
span {
transform: rotate(180deg);
display: inline-block;
}
</style>

202
src/routes/+page.svelte Normal file
View file

@ -0,0 +1,202 @@
<script>
let source = $state('youtube');
let link = $state('');
let format = $state('mp3');
let loading = $state(true);
let showModal = $state(false);
let error = $state(false);
let href = $state('');
// let formats = ['ogg', 'mp3', 'mp4']
const formats = [{ value: 'mp3', label: 'MP3' }];
const toggleModal = () => {
showModal = !showModal;
};
const handleSubmit = async (e) => {
e.preventDefault();
console.log({
source,
link,
format
});
const searchParams = new URLSearchParams();
searchParams.append('source', source);
searchParams.append('link', link);
searchParams.append('format', format);
href = `/download?${searchParams.toString()}`;
};
$effect(() => {
// Auto selected the radio button based on url regex
if (link.includes('spotify')) {
source = 'spotify';
} else if (link.includes('youtube')) {
source = 'youtube';
}
});
</script>
<div
id="wrapper"
class="relative mx-auto rounded-lg bg-black p-6 text-green-500 shadow-lg sm:max-w-sm sm:border-4 sm:border-green-500 md:mt-10 md:max-w-md lg:max-w-lg 2xl:max-w-2xl"
>
<!-- Info Icon -->
<button
onclick={toggleModal}
class="absolute right-3 top-3 text-pink-500 transition hover:text-pink-300"
aria-label="Open Info Modal"
>
<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>
<h1 id='title' class="mb-6 text-center text-xl">🐙 Scaricatore 🐙</h1>
<form class="space-y-6" onsubmit={handleSubmit}>
<!-- Source Selection -->
<fieldset class="space-y-4">
<legend class="text-green-400">Choose Source:</legend>
<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"
value="spotify"
bind:group={source}
class="retro-radio"
/>
<span class="not-available">Spotify</span>
</label>
<label class="flex items-center space-x-3">
<input type="radio" name="source" value="other" bind:group={source} class="retro-radio" />
<span>
Other (<a
href="https://github.com/yt-dlp/yt-dlp/blob/master/supportedsites.md"
target="_blank"
rel="noopener noreferrer"
class="text-pink-500 hover:underline"
>supported sites
</a>)
</span>
</label>
</fieldset>
<!-- Link Input -->
<div>
<label for="link" class="mb-2 block text-green-400"> Enter Playlist or 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-green-500 bg-green-200 px-4 py-3 text-black focus:border-pink-500 focus:outline-none"
/>
</div>
<!-- Format Selection -->
<div>
<label for="format" class="mb-2 block text-green-400"> Choose Format: </label>
<select
id="format"
name="format"
bind:value={format}
class="w-full rounded-lg border-4 border-green-500 bg-green-200 px-4 py-3 text-black focus:border-pink-500 focus:outline-none"
>
{#each formats as format}
<option value={format.value}>{format.label}</option>
{/each}
</select>
</div>
<!-- Submit Button -->
<button
type="submit"
class="w-full rounded-lg border-4 border-pink-700 bg-pink-500 px-4 py-3 text-black transition hover:bg-pink-600 active:border-yellow-500"
>
Create download link
</button>
{#if href}
<a class="download-link" {href}> Download </a>
{/if}
</form>
</div>
<!-- Modal -->
{#if showModal}
<div class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-80">
<div
class="w-4/5 max-w-lg rounded-lg border-4 border-green-500 bg-green-900 p-6 text-center text-green-100"
>
<h2 class="mb-4 text-lg">ℹ️ Retro Media Downloader Info</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>
<button
onclick={toggleModal}
class="mt-6 rounded-lg border-4 border-pink-700 bg-pink-500 px-4 py-2 text-black hover:bg-pink-600"
>
Close
</button>
</div>
</div>
{/if}
<style>
* {
font-size: 12px;
}
.download-link {
margin: 0 auto;
padding: 5px;
display: block;
text-decoration: underline;
text-align: center;
}
.not-available {
text-decoration-line: line-through;
text-decoration-color: red;
}
.retro-radio {
appearance: none;
background-color: #000;
border: 2px solid #39ff14;
width: 20px;
height: 20px;
cursor: pointer;
}
.retro-radio:checked {
background-color: #39ff14;
box-shadow:
0 0 4px #39ff14,
0 0 10px #39ff14;
}
input[type='url'],
select {
font-family: inherit;
}
#title {
font-size: 22px;
}
</style>

91
src/routes/download/+server.ts Normal file
View file

@ -0,0 +1,91 @@
import { DOWNLOAD_PATH } from '$env/static/private';
import { redirect } from '@sveltejs/kit';
import ytdl from 'youtube-dl-exec';
import { json, error } from '@sveltejs/kit';
import type { RequestHandler } from './$types';
import { spawn } from 'child_process';
/**
* Fetch YouTube metadata (title, uploader/artist)
*/
async function getYouTubeMetadata(link: string) {
return await ytdl(link, {
dumpSingleJson: true,
noCheckCertificates: true,
noWarnings: true,
preferFreeFormats: true
});
}
/**
* Streams the YouTube video/audio using youtube-dl-exec
*/
function streamYouTube(link: string, format: string): ReadableStream<Uint8Array> {
return new ReadableStream({
start(controller) {
const args = [
'-o',
'-',
format === 'mp3' ? '--embed-metadata' : '',
'--format',
format === 'mp3' ? 'bestaudio' : 'best',
'--audio-format',
format === 'mp3' ? 'mp3' : '',
'--no-playlist'
].filter(Boolean);
const process = spawn('yt-dlp', [...args, link], { stdio: ['ignore', 'pipe', 'ignore'] });
process.stdout.on('data', (chunk) => controller.enqueue(chunk));
process.stdout.on('end', () => controller.close());
process.stdout.on('error', (err) => {
console.error('Stream error:', err);
controller.error(err);
});
}
});
}
/**
* Sanitize filename by removing unsafe characters
*/
function sanitizeFilename(name: string): string {
return name.replace(/[\/:*?"<>|]/g, '').trim();
}
export const GET: RequestHandler = async ({ url }) => {
// Get query params
const link = url.searchParams.get('link');
const format = url.searchParams.get('format'); // mp3, mp4
const source = url.searchParams.get('source'); // youtube or spotify
// Validate input
if (!link || !format || !source) {
throw error(400, 'Missing required query parameters: link, format, or source');
}
if (source !== 'youtube') {
throw error(400, 'Currently, only YouTube is supported');
}
try {
// Fetch metadata for filename
const metadata = await getYouTubeMetadata(link);
const { title, uploader } = metadata;
const safeTitle = sanitizeFilename(`${uploader} - ${title}`);
const filename = `${safeTitle}.${format}`;
console.log(filename)
// Stream video/audio
return new Response(streamYouTube(link, format), {
headers: {
'Content-Type': format === 'mp3' ? 'audio/mpeg' : 'video/mp4',
'Content-Disposition': `attachment; filename="${filename}"`
}
});
} catch (err) {
console.error('Error fetching metadata:', err);
throw error(500, 'Failed to fetch video metadata');
}
};

79
src/service-worker.js Normal file
View file

@ -0,0 +1,79 @@
import { build, files, version } from '$service-worker';
// Create a unique cache name for this deployment
const CACHE = `cache-${version}`;
const ASSETS = [
...build, // the app itself
...files // everything in `static`
];
self.addEventListener('install', (event) => {
// Create a new cache and add all files to it
async function addFilesToCache() {
const cache = await caches.open(CACHE);
await cache.addAll(ASSETS);
}
event.waitUntil(addFilesToCache());
});
self.addEventListener('activate', (event) => {
// Remove previous cached data from disk
async function deleteOldCaches() {
for (const key of await caches.keys()) {
if (key !== CACHE) await caches.delete(key);
}
}
event.waitUntil(deleteOldCaches());
});
self.addEventListener('fetch', (event) => {
// ignore POST requests etc
if (event.request.method !== 'GET' || event.request.pathname === 'download') return;
async function respond() {
const url = new URL(event.request.url);
const cache = await caches.open(CACHE);
// `build`/`files` can always be served from the cache
if (ASSETS.includes(url.pathname)) {
const response = await cache.match(url.pathname);
if (response) {
return response;
}
}
// for everything else, try the network first, but
// fall back to the cache if we're offline
try {
const response = await fetch(event.request);
// if we're offline, fetch can return a value that is not a Response
// instead of throwing - and we can't pass this non-Response to respondWith
if (!(response instanceof Response)) {
throw new Error('invalid response from fetch');
}
if (response.status === 200) {
cache.put(event.request, response.clone());
}
return response;
} catch (err) {
const response = await cache.match(event.request);
if (response) {
return response;
}
// if there's no cache, then just error out
// as there is nothing we can do to respond to this request
throw err;
}
}
event.respondWith(respond());
});