suricata/yt2mp3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

submit form complete

Browse Source
This commit is contained in:
suricata
2026-01-15 23:12:09 +00:00
parent 665e0425dc
commit b8d4d444fb
1 changed files with 42 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
app/pages/index.vue
View File

@@ -1,11 +1,28 @@
<script setup lang="ts">
import * as z from 'zod'
import type { FormSubmitEvent } from '@nuxt/ui'
const { loggedIn } = useUserSession()
const video = ref(0);
const url = ref("");
const in_url = ref("");
const output_name = ref("");
const music_params_schema = z.object({
song: z.string("Song name required"),
artist: z.string("Artist name required"),
album: z.string().optional()
})
type musicParamsSchema = z.output<typeof music_params_schema>
const music_params = reactive<Partial<musicParamsSchema>>({
song: undefined,
artist: undefined,
album: undefined
})
function get_yt_vid() {
url.value = in_url.value
@@ -13,7 +30,7 @@
else video.value = 0
}
function start_conversion() {
async function start_conversion(event: FormSubmitEvent<musicParamsSchema>) {
return fetch("/convert", {
method: "POST",
headers: {
@@ -21,10 +38,14 @@
},
body: JSON.stringify({
url: url.value,
name: output_name.value,
name: music_params.song,
artist: music_params.artist,
album: music_params.album
})
}).then(r => {
if(r.status == 401) navigateTo("/login")
console.log(r.status)
if(r.status == 401)
window.location.href = "/login"
})
}
@@ -37,32 +58,37 @@
<div class="w-full flex self-center justify-center">
<UInput
class="self-center geist-mono mt-5 mb-5 max-sm:6/7 max-md:w-4/5 max-lg:w-4/5 lg:w-2/3 max-w-300"
class="self-center geist-mono mt-5 mb-5 max-sm:w-[92%] max-md:w-4/5 max-lg:w-4/5 lg:w-2/3 max-w-300"
:ui="{ base: 'rounded-2xl h-15 text-toned', trailing: 'p-0' }"
placeholder="Search for a YouTube video..."
v-model="in_url" >
<template #trailing>
<UButton class="self-end rounded-r-2xl h-15 px-3" icon="lucide:search" @click="get_yt_vid" />
<UButton class="self-end rounded-r-2xl h-15 px-3 hover:cursor-pointer" icon="lucide:search" @click="get_yt_vid" />
</template>
</UInput>
</div>
</div>
<div class="w-full max-w-md mx-auto mt-8 p-6 light:bg-zinc-50 dark:bg-zinc-950 rounded-xl" v-if="video">
<div class="w-full max-w-md mx-auto mt-8 mb-5 p-7 light:bg-zinc-50 dark:bg-zinc-950 rounded-2xl" v-if="video">
<div class="video-container">
<LazyYoutube :src="url" />
</div>
<!---<UFormField id="videoUrl" class="w-full mt-3 mb-4" label="Video URL:" >
<UInput type="text" :value="url" class="w-full" />
</UFormField>-->
<UFormField id="outputFile" class="w-full mt-4 mb-3" label="Output File Name:">
<UInput type="text" v-model="output_name" class="w-full" />
<UForm :schema="music_params_schema" :state="music_params" @submit="start_conversion()">
<UFormField name="song" class="w-full mt-4 mb-3" label="Track Name:">
<UInput type="text" v-model="music_params.song" class="w-full" />
</UFormField>
<UFormField name="artist" class="w-full mt-4 mb-3" label="Artist Name:">
<UInput type="text" v-model="music_params.artist"class="w-full" />
</UFormField>
<UFormField name="album" class="w-full mt-4 mb-3" label="Album Name:">
<UInput type="text" v-model="music_params.album" class="w-full" />
</UFormField>
<div class="text-center">
<UButton class="mt-4 rounded-md px-6 py-3 text-white" loading-auto @click="start_conversion()">Convert to MP3</UButton>
<UButton class="mt-4 rounded-2xl px-9 w-2/3 py-3 justify-center text-center " loading-auto type="submit">Convert to MP3</UButton>
</div>
</UForm>
</div>
</template>