Initial commit
This commit is contained in:
commit
1f35f0411b
28 changed files with 5703 additions and 0 deletions
20
src/routes/+layout.svelte
Normal file
20
src/routes/+layout.svelte
Normal 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
202
src/routes/+page.svelte
Normal 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
91
src/routes/download/+server.ts
Normal 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');
|
||||
}
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue