Initial commit v2
This commit is contained in:
parent
6266831532
commit
c6629b387f
8 changed files with 634 additions and 40 deletions
42
src/routes/+page.server.ts
Normal file
42
src/routes/+page.server.ts
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
import { DOWNLOAD_PATH } from "$env/static/private";
|
||||
import { redirect } from "@sveltejs/kit";
|
||||
import youtubedl from "youtube-dl-exec";
|
||||
|
||||
export const actions = {
|
||||
download: async ({ request, cookies }) => {
|
||||
const data = await request.formData();
|
||||
|
||||
const obj = {};
|
||||
for (const element of data) {
|
||||
obj[element[0]] = element[1];
|
||||
}
|
||||
|
||||
const { format, source, link } = obj;
|
||||
|
||||
if (!(format && source && link)) {
|
||||
throw redirect(307, "/");
|
||||
}
|
||||
|
||||
console.info(`Asked ${source} download of ${link}`);
|
||||
|
||||
switch (source) {
|
||||
case "youtube":
|
||||
const output = await youtubedl(link, {
|
||||
output: `${DOWNLOAD_PATH}/%(artist)s-%(title)s.%(ext)s`,
|
||||
embedThumbnail: true,
|
||||
audioFormat: format
|
||||
});
|
||||
|
||||
console.log(output);
|
||||
console.info(`Downloaded ${link} to ${output}`);
|
||||
|
||||
break;
|
||||
case "spotify":
|
||||
break;
|
||||
default:
|
||||
console.error("ops");
|
||||
}
|
||||
|
||||
return { success: true };
|
||||
},
|
||||
};
|
||||
|
|
@ -1,2 +1,209 @@
|
|||
<h1>Welcome to SvelteKit</h1>
|
||||
<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
|
||||
<script>
|
||||
let source = $state("youtube");
|
||||
let link = $state("");
|
||||
let format = "mp3";
|
||||
let showModal = false;
|
||||
|
||||
const toggleModal = () => {
|
||||
showModal = !showModal;
|
||||
};
|
||||
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
console.log({
|
||||
source,
|
||||
link,
|
||||
format,
|
||||
});
|
||||
};
|
||||
|
||||
$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
|
||||
class="relative sm:max-w-sm md:max-w-md lg:max-w-lg 2xl:max-w-2xl mx-auto mt-10 p-6 bg-black text-green-500 rounded-lg shadow-lg border-4 border-green-500"
|
||||
>
|
||||
<!-- Info Icon -->
|
||||
<button
|
||||
onclick={toggleModal}
|
||||
class="absolute top-3 right-3 text-pink-500 hover:text-pink-300 transition"
|
||||
aria-label="Open Info Modal"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
class="w-6 h-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 class="text-xl text-center mb-6">🐙 Scaricatore 🐙</h1>
|
||||
<form method="POST" action="?/download" class="space-y-6">
|
||||
<!-- Source Selection -->
|
||||
<fieldset class="space-y-4">
|
||||
<legend class="text-green-400 text-sm">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
|
||||
type="radio"
|
||||
name="source"
|
||||
value="spotify"
|
||||
bind:group={source}
|
||||
class="retro-radio"
|
||||
/>
|
||||
<span>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="block text-green-400 text-sm mb-2">
|
||||
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 px-4 py-3 text-black bg-green-200 border-4 border-green-500 rounded-lg focus:outline-none focus:border-pink-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Format Selection -->
|
||||
<div>
|
||||
<label for="format" class="block text-green-400 text-sm mb-2">
|
||||
Choose Format:
|
||||
</label>
|
||||
<select
|
||||
id="format"
|
||||
name="format"
|
||||
bind:value={format}
|
||||
class="w-full px-4 py-3 text-black bg-green-200 border-4 border-green-500 rounded-lg focus:outline-none focus:border-pink-500"
|
||||
>
|
||||
<option value="mp3">MP3</option>
|
||||
<option value="ogg">OGG</option>
|
||||
<option value="mp4">MP4</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Submit Button -->
|
||||
<button
|
||||
type="submit"
|
||||
class="w-full px-4 py-3 text-black bg-pink-500 border-4 border-pink-700 rounded-lg hover:bg-pink-600 active:border-yellow-500 transition"
|
||||
>
|
||||
Start Download!
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Modal -->
|
||||
{#if showModal}
|
||||
<div
|
||||
class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-80 z-50"
|
||||
>
|
||||
<div
|
||||
class="w-4/5 max-w-lg bg-green-900 text-green-100 p-6 rounded-lg border-4 border-green-500 text-center"
|
||||
>
|
||||
<h2 class="text-lg mb-4">ℹ️ Retro Media Downloader Info</h2>
|
||||
<p class="text-sm">
|
||||
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 px-4 py-2 bg-pink-500 text-black border-4 border-pink-700 rounded-lg hover:bg-pink-600"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Footer -->
|
||||
<footer
|
||||
class="absolute bottom-0 w-[100dvw] mt-10 bg-black text-green-500 text-center py-4 border-t-4 border-green-500"
|
||||
>
|
||||
Copyleft © 2024 - Made with ❤️ by Emersa
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");
|
||||
|
||||
* {
|
||||
font-family: "Press Start 2P", sans-serif;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
.retro-container {
|
||||
max-width: 800px;
|
||||
margin: auto;
|
||||
padding: 20px;
|
||||
background: rgba(0, 0, 0, 0.8); /* Semi-transparent black */
|
||||
border: 4px solid #39ff14;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 0 20px #39ff14;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue