dl.emersa.it/src/routes/+page.svelte

<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">🐙 Scaricatore 🐙</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="block mt-10">
				<a class="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-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>