87 lines
3.7 KiB
Vue
87 lines
3.7 KiB
Vue
<template>
|
|
<v-card class="bg-gradient" style="height: 100%">
|
|
<div class="wave"/>
|
|
<div class="wave"/>
|
|
<div class="wave"/>
|
|
<v-card-text class="d-flex justify-center align-center h-100">
|
|
<v-card class="bg-grey-darken-3 pl-6 pr-6 d-flex flex-column justify-center w-75" :class="isWide ? 'h-100' : 'h-auto'">
|
|
<v-card-title>Вставьте ссылку:</v-card-title>
|
|
<v-card-text class="d-flex flex-column justify-center w-100 h-auto flex-grow-0">
|
|
<v-text-field class="h-auto flex-grow-0" v-model="url" label="Ссылка" :loading="fetching"/>
|
|
<v-label v-if="error" class="text-wrap text-red mr-5 ml-5">{{ hint }}: {{ errorText }}</v-label>
|
|
<v-label v-if="error" class="text-wrap text-red mr-5 ml-5">Contact me on Telegram: <span class="tg-link"><a class="tg-link" target="_blank" href="https://t.me/Dhaverd">@Dhaverd</a></span></v-label>
|
|
<div class="d-flex align-center justify-center h-auto" :class="isWide ? '' : 'flex-column'">
|
|
<v-btn class="mt-3 mb-3 mr-5 ml-5" :class="isWide ? '' : 'w-75'" variant="elevated" color="blue" @click="startDownload">Найти</v-btn>
|
|
<v-btn v-if="downloadAvailable" :href="downloadLink" target="_blank" class="mt-3 mb-3 mr-5 ml-5" :class="isWide ? '' : 'w-75'" variant="elevated" color="blue">Скачать</v-btn>
|
|
</div>
|
|
<div class="d-flex justify-end align-end flex-grow-1 w-100 ml-5 mr-5">
|
|
<v-label>BETA</v-label>
|
|
</div>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-card-text>
|
|
</v-card>
|
|
</template>
|
|
|
|
<script>
|
|
import {ref} from "vue";
|
|
import axios from "axios";
|
|
|
|
export default {
|
|
name: "Main",
|
|
data: () => ({
|
|
url: ref(''),
|
|
fetching: ref(false),
|
|
downloadAvailable: ref(false),
|
|
downloadLink: '',
|
|
hint: ref(''),
|
|
error: ref(false),
|
|
errorText: ref(''),
|
|
windowHeight: document.documentElement.clientHeight,
|
|
windowWidth: document.documentElement.clientWidth,
|
|
isWide: window.innerWidth >= 460
|
|
}),
|
|
methods: {
|
|
startDownload(){
|
|
this.downloadAvailable = false;
|
|
this.error = false;
|
|
this.fetching = true;
|
|
axios.get(`/download_api?videourl=${this.url}`).then((responce)=>{
|
|
this.fetching = false;
|
|
if (responce.data.error){
|
|
this.error = true;
|
|
this.hint = 'Возникла ошибка';
|
|
this.errorText = responce.data.error;
|
|
console.log(responce.data.error);
|
|
} else if (responce.data.link){
|
|
this.downloadAvailable = true;
|
|
this.downloadLink = `/download/${responce.data.link}`;
|
|
}
|
|
}).catch((error)=>{
|
|
this.fetching = false;
|
|
this.errorText = error.response.data.message;
|
|
console.log(error);
|
|
this.error = true;
|
|
this.hint = 'Возникла ошибка';
|
|
})
|
|
},
|
|
resizeEventHandler(e) {
|
|
this.windowHeight = document.documentElement.clientHeight;
|
|
this.windowWidth = document.documentElement.clientWidth;
|
|
this.isWide = this.windowWidth >= 460;
|
|
}
|
|
},
|
|
created() {
|
|
window.addEventListener("resize", this.resizeEventHandler);
|
|
},
|
|
mounted() {
|
|
this.resizeEventHandler();
|
|
window.addEventListener("resize", this.resizeEventHandler, { passive: true });
|
|
}
|
|
}
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
</style>
|