136 lines
3.3 KiB
Vue
136 lines
3.3 KiB
Vue
<script setup lang="ts">
|
|
|
|
const { loggedIn } = useUserSession()
|
|
|
|
const video = ref(0);
|
|
const url = ref("");
|
|
const in_url = ref("");
|
|
const output_name = ref("");
|
|
|
|
function get_yt_vid() {
|
|
url.value = in_url.value
|
|
if (in_url.value !== "") video.value = 1
|
|
else video.value = 0
|
|
}
|
|
|
|
function start_conversion() {
|
|
return fetch("/convert", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json"
|
|
},
|
|
body: JSON.stringify({
|
|
url: url.value,
|
|
name: output_name.value,
|
|
})
|
|
}).then(r => {
|
|
if(r.status == 401) navigateTo("/login")
|
|
})
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<MainHeader :logged_in="loggedIn"/>
|
|
<div class="justify-center flex flex-col max-sm:mt-5 max-md:mt-7 max-lg:mt-10 lg:mt-15 mb-4 w-full">
|
|
<h1 class="inter font-bold text-center mt-3 mb-3 text-white white-glow max-sm:text-5xl sm:text-6xl md:text-7xl xl:text-8xl rgb-text">Youtube to MP3</h1>
|
|
|
|
<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"
|
|
: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" />
|
|
</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="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" />
|
|
</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>
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
<style>
|
|
|
|
.rgb-text {
|
|
background: linear-gradient(
|
|
90deg,
|
|
var(--color-red-500),
|
|
var(--color-yellow-500),
|
|
var(--color-lime-500),
|
|
var(--color-cyan-500),
|
|
var(--color-blue-500),
|
|
var(--color-pink-500),
|
|
var(--color-red-500)
|
|
);
|
|
background-size: 400% 100%;
|
|
animation: rgb 15s linear infinite;
|
|
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
|
|
}
|
|
|
|
@keyframes rgb {
|
|
to {
|
|
background-position: 400% 0;
|
|
}
|
|
}
|
|
|
|
.white-glow {
|
|
filter: drop-shadow(0 0 10px rgba(255,255,255,.2));
|
|
}
|
|
|
|
/*.rgb-input {
|
|
position: relative;
|
|
padding: 2px;
|
|
background: #111;
|
|
color: white;
|
|
border: none;
|
|
outline: none;
|
|
z-index: 0;
|
|
@apply: rounded-lg;
|
|
}
|
|
|
|
.rgb-input::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 2px;
|
|
border-radius: inherit;
|
|
background: linear-gradient(
|
|
90deg,
|
|
red,
|
|
yellow,
|
|
lime,
|
|
cyan,
|
|
blue,
|
|
magenta,
|
|
red
|
|
);
|
|
background-size: 400%;
|
|
animation: rgb 8s linear infinite;
|
|
filter: blur(2px);
|
|
z-index: -1;
|
|
@apply: rounded-lg;
|
|
}*/
|
|
|
|
</style> |