Added please-wait
This commit is contained in:
Leon Etienne (ubuntu wsl)
parent
cb5f43bf25
commit
d57cb44d46
@ -1,9 +1,9 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Tubio - Video downloader</title><meta data-n-head="1" charset="utf-8"><meta data-n-head="1" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="1" data-hid="description" name="description" content=""><meta data-n-head="1" name="msapplication-TileColor" content="#031934"><meta data-n-head="1" name="theme-color" content="#031934"><link data-n-head="1" rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link data-n-head="1" rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"><link data-n-head="1" rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><link data-n-head="1" rel="manifest" href="/site.webmanifest"><link data-n-head="1" rel="mask-icon" href="/safari-pinned-tab.svg" color="#031934"><link rel="preload" href="/_nuxt/b0ecca0.js" as="script"><link rel="preload" href="/_nuxt/2b1a86c.js" as="script"><link rel="preload" href="/_nuxt/d429197.js" as="script"><link rel="preload" href="/_nuxt/7e93adc.js" as="script">
|
||||
<title>Tubio - Video downloader</title><meta data-n-head="1" charset="utf-8"><meta data-n-head="1" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="1" data-hid="description" name="description" content=""><meta data-n-head="1" name="msapplication-TileColor" content="#031934"><meta data-n-head="1" name="theme-color" content="#031934"><link data-n-head="1" rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link data-n-head="1" rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"><link data-n-head="1" rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><link data-n-head="1" rel="manifest" href="/site.webmanifest"><link data-n-head="1" rel="mask-icon" href="/safari-pinned-tab.svg" color="#031934"><link rel="preload" href="/_nuxt/067a6af.js" as="script"><link rel="preload" href="/_nuxt/2b1a86c.js" as="script"><link rel="preload" href="/_nuxt/719143f.js" as="script"><link rel="preload" href="/_nuxt/7e93adc.js" as="script">
|
||||
</head>
|
||||
<body>
|
||||
<div id="__nuxt"><style>#nuxt-loading{background:#fff;visibility:hidden;opacity:0;position:absolute;left:0;right:0;top:0;bottom:0;display:flex;justify-content:center;align-items:center;flex-direction:column;animation:nuxtLoadingIn 10s ease;-webkit-animation:nuxtLoadingIn 10s ease;animation-fill-mode:forwards;overflow:hidden}@keyframes nuxtLoadingIn{0%{visibility:hidden;opacity:0}20%{visibility:visible;opacity:0}100%{visibility:visible;opacity:1}}@-webkit-keyframes nuxtLoadingIn{0%{visibility:hidden;opacity:0}20%{visibility:visible;opacity:0}100%{visibility:visible;opacity:1}}#nuxt-loading>div,#nuxt-loading>div:after{border-radius:50%;width:5rem;height:5rem}#nuxt-loading>div{font-size:10px;position:relative;text-indent:-9999em;border:.5rem solid #f5f5f5;border-left:.5rem solid #000;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:nuxtLoading 1.1s infinite linear;animation:nuxtLoading 1.1s infinite linear}#nuxt-loading.error>div{border-left:.5rem solid #ff4500;animation-duration:5s}@-webkit-keyframes nuxtLoading{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes nuxtLoading{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}</style><script>window.addEventListener("error",function(){var e=document.getElementById("nuxt-loading");e&&(e.className+=" error")})</script><div id="nuxt-loading" aria-live="polite" role="status"><div>Loading...</div></div></div><script>window.__NUXT__={config:{},staticAssetsBase:"/_nuxt/static/1601654949"}</script>
|
||||
<script src="/_nuxt/b0ecca0.js"></script><script src="/_nuxt/2b1a86c.js"></script><script src="/_nuxt/d429197.js"></script><script src="/_nuxt/7e93adc.js"></script></body>
|
||||
<div id="__nuxt"><style>#nuxt-loading{background:#fff;visibility:hidden;opacity:0;position:absolute;left:0;right:0;top:0;bottom:0;display:flex;justify-content:center;align-items:center;flex-direction:column;animation:nuxtLoadingIn 10s ease;-webkit-animation:nuxtLoadingIn 10s ease;animation-fill-mode:forwards;overflow:hidden}@keyframes nuxtLoadingIn{0%{visibility:hidden;opacity:0}20%{visibility:visible;opacity:0}100%{visibility:visible;opacity:1}}@-webkit-keyframes nuxtLoadingIn{0%{visibility:hidden;opacity:0}20%{visibility:visible;opacity:0}100%{visibility:visible;opacity:1}}#nuxt-loading>div,#nuxt-loading>div:after{border-radius:50%;width:5rem;height:5rem}#nuxt-loading>div{font-size:10px;position:relative;text-indent:-9999em;border:.5rem solid #f5f5f5;border-left:.5rem solid #000;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:nuxtLoading 1.1s infinite linear;animation:nuxtLoading 1.1s infinite linear}#nuxt-loading.error>div{border-left:.5rem solid #ff4500;animation-duration:5s}@-webkit-keyframes nuxtLoading{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes nuxtLoading{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}</style><script>window.addEventListener("error",function(){var e=document.getElementById("nuxt-loading");e&&(e.className+=" error")})</script><div id="nuxt-loading" aria-live="polite" role="status"><div>Loading...</div></div></div><script>window.__NUXT__={config:{},staticAssetsBase:"/_nuxt/static/1601657397"}</script>
|
||||
<script src="/_nuxt/067a6af.js"></script><script src="/_nuxt/2b1a86c.js"></script><script src="/_nuxt/719143f.js"></script><script src="/_nuxt/7e93adc.js"></script></body>
|
||||
</html>
|
||||
|
||||
@ -1 +1 @@
|
||||
!function(e){function r(data){for(var r,n,l=data[0],f=data[1],d=data[2],i=0,h=[];i<l.length;i++)n=l[i],Object.prototype.hasOwnProperty.call(o,n)&&o[n]&&h.push(o[n][0]),o[n]=0;for(r in f)Object.prototype.hasOwnProperty.call(f,r)&&(e[r]=f[r]);for(v&&v(data);h.length;)h.shift()();return c.push.apply(c,d||[]),t()}function t(){for(var e,i=0;i<c.length;i++){for(var r=c[i],t=!0,n=1;n<r.length;n++){var f=r[n];0!==o[f]&&(t=!1)}t&&(c.splice(i--,1),e=l(l.s=r[0]))}return e}var n={},o={4:0},c=[];function l(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,l),t.l=!0,t.exports}l.e=function(e){var r=[],t=o[e];if(0!==t)if(t)r.push(t[2]);else{var n=new Promise((function(r,n){t=o[e]=[r,n]}));r.push(t[2]=n);var c,script=document.createElement("script");script.charset="utf-8",script.timeout=120,l.nc&&script.setAttribute("nonce",l.nc),script.src=function(e){return l.p+""+{2:"d4b440d",3:"d7b3322"}[e]+".js"}(e);var f=new Error;c=function(r){script.onerror=script.onload=null,clearTimeout(d);var t=o[e];if(0!==t){if(t){var n=r&&("load"===r.type?"missing":r.type),c=r&&r.target&&r.target.src;f.message="Loading chunk "+e+" failed.\n("+n+": "+c+")",f.name="ChunkLoadError",f.type=n,f.request=c,t[1](f)}o[e]=void 0}};var d=setTimeout((function(){c({type:"timeout",target:script})}),12e4);script.onerror=script.onload=c,document.head.appendChild(script)}return Promise.all(r)},l.m=e,l.c=n,l.d=function(e,r,t){l.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.t=function(e,r){if(1&r&&(e=l(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(l.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)l.d(t,n,function(r){return e[r]}.bind(null,n));return t},l.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(r,"a",r),r},l.o=function(object,e){return Object.prototype.hasOwnProperty.call(object,e)},l.p="/_nuxt/",l.oe=function(e){throw console.error(e),e};var f=window.webpackJsonp=window.webpackJsonp||[],d=f.push.bind(f);f.push=r,f=f.slice();for(var i=0;i<f.length;i++)r(f[i]);var v=d;t()}([]);
|
||||
!function(e){function r(data){for(var r,n,l=data[0],f=data[1],d=data[2],i=0,h=[];i<l.length;i++)n=l[i],Object.prototype.hasOwnProperty.call(o,n)&&o[n]&&h.push(o[n][0]),o[n]=0;for(r in f)Object.prototype.hasOwnProperty.call(f,r)&&(e[r]=f[r]);for(v&&v(data);h.length;)h.shift()();return c.push.apply(c,d||[]),t()}function t(){for(var e,i=0;i<c.length;i++){for(var r=c[i],t=!0,n=1;n<r.length;n++){var f=r[n];0!==o[f]&&(t=!1)}t&&(c.splice(i--,1),e=l(l.s=r[0]))}return e}var n={},o={4:0},c=[];function l(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,l),t.l=!0,t.exports}l.e=function(e){var r=[],t=o[e];if(0!==t)if(t)r.push(t[2]);else{var n=new Promise((function(r,n){t=o[e]=[r,n]}));r.push(t[2]=n);var c,script=document.createElement("script");script.charset="utf-8",script.timeout=120,l.nc&&script.setAttribute("nonce",l.nc),script.src=function(e){return l.p+""+{2:"10ae25b",3:"2434a68"}[e]+".js"}(e);var f=new Error;c=function(r){script.onerror=script.onload=null,clearTimeout(d);var t=o[e];if(0!==t){if(t){var n=r&&("load"===r.type?"missing":r.type),c=r&&r.target&&r.target.src;f.message="Loading chunk "+e+" failed.\n("+n+": "+c+")",f.name="ChunkLoadError",f.type=n,f.request=c,t[1](f)}o[e]=void 0}};var d=setTimeout((function(){c({type:"timeout",target:script})}),12e4);script.onerror=script.onload=c,document.head.appendChild(script)}return Promise.all(r)},l.m=e,l.c=n,l.d=function(e,r,t){l.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.t=function(e,r){if(1&r&&(e=l(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(l.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)l.d(t,n,function(r){return e[r]}.bind(null,n));return t},l.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(r,"a",r),r},l.o=function(object,e){return Object.prototype.hasOwnProperty.call(object,e)},l.p="/_nuxt/",l.oe=function(e){throw console.error(e),e};var f=window.webpackJsonp=window.webpackJsonp||[],d=f.push.bind(f);f.push=r,f=f.slice();for(var i=0;i<f.length;i++)r(f[i]);var v=d;t()}([]);
|
||||
1
Tubio/frontend/_nuxt/10ae25b.js
Normal file
1
Tubio/frontend/_nuxt/10ae25b.js
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1 +1 @@
|
||||
window.__NUXT__={staticAssetsBase:"\u002F_nuxt\u002Fstatic\u002F1601654949",layout:"default",error:null,state:{diskUsage:{usage:{}},dlcache:{cache:[]},logs:{logs:[]},serverOs:{os_name:""},settings:{config:{}}},serverRendered:true,routePath:"\u002Fsettings",config:{}};
|
||||
window.__NUXT__={staticAssetsBase:"\u002F_nuxt\u002Fstatic\u002F1601657397",layout:"default",error:null,state:{diskUsage:{usage:{}},dlcache:{cache:[]},logs:{logs:[]},serverOs:{os_name:""},settings:{config:{}}},serverRendered:true,routePath:"\u002Fsettings",config:{}};
|
||||
@ -1 +1 @@
|
||||
window.__NUXT__={staticAssetsBase:"\u002F_nuxt\u002Fstatic\u002F1601654949",layout:"default",error:null,state:{diskUsage:{usage:{}},dlcache:{cache:[]},logs:{logs:[]},serverOs:{os_name:""},settings:{config:{}}},serverRendered:true,routePath:"\u002F",config:{}};
|
||||
window.__NUXT__={staticAssetsBase:"\u002F_nuxt\u002Fstatic\u002F1601657397",layout:"default",error:null,state:{diskUsage:{usage:{}},dlcache:{cache:[]},logs:{logs:[]},serverOs:{os_name:""},settings:{config:{}}},serverRendered:true,routePath:"\u002F",config:{}};
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
123
tubio-frontend-nuxt-app/components/PleaseWaitBlocker.vue
Normal file
123
tubio-frontend-nuxt-app/components/PleaseWaitBlocker.vue
Normal file
@ -0,0 +1,123 @@
|
||||
<template>
|
||||
<div class="click-blocker flex justify-center md:items-center">
|
||||
<div class="box">
|
||||
<h2 class="mt-2">Please wait...</h2>
|
||||
|
||||
<div class="dots flex w-full justify-center items-center">
|
||||
<div class="dot" />
|
||||
<div class="dot" />
|
||||
<div class="dot" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.click-blocker {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.box {
|
||||
margin-top: 160px;
|
||||
width: 1200px;
|
||||
height: 800px;
|
||||
max-height: 70vh;
|
||||
background-color: #586679;
|
||||
opacity: 0.95;
|
||||
border-radius: 5px;
|
||||
border: 2px solid theme("colors.gray-1");
|
||||
overflow: hidden;
|
||||
|
||||
@media (max-width: theme('screens.md')) {
|
||||
margin-left: 15px;
|
||||
margin-right: 15px;
|
||||
height: 300px;
|
||||
margin-top: 80px;
|
||||
}
|
||||
|
||||
& h2 {
|
||||
text-align: center;
|
||||
font-size: 56pt;
|
||||
color: theme("colors.text-gray-1");
|
||||
|
||||
@media (max-width: theme('screens.md')) {
|
||||
margin-top: 36px;
|
||||
max-height: unset;
|
||||
}
|
||||
}
|
||||
|
||||
& .dots {
|
||||
margin-top: 250px;
|
||||
|
||||
@media (max-width: theme('screens.md')) {
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
& .dot {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: theme("colors.gray-1");
|
||||
border-radius: 50px;
|
||||
animation-fill-mode: both;
|
||||
animation-timing-function: ease-in-out;
|
||||
|
||||
&:nth-child(1) {
|
||||
animation: dot-hover 1.5s infinite;
|
||||
animation-delay: 0;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
animation: dot-hover 1.5s infinite;
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
animation: dot-hover 1.5s infinite;
|
||||
animation-delay: 0.6s;
|
||||
}
|
||||
|
||||
@media (max-width: theme('screens.md')) {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: theme('screens.md')) {
|
||||
font-size: 36pt; /* using font-size, to influence the em scale in the dot-hover animation */
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-left: 25px;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dot-hover {
|
||||
0% { transform: translateY(0); }
|
||||
50% { transform: translateY(1em); }
|
||||
100% { transform: translateY(0); }
|
||||
}
|
||||
</style>
|
||||
@ -35,6 +35,8 @@
|
||||
<Spacer height="2em" m_height="2em" />
|
||||
<DownloadBox />
|
||||
|
||||
<PleaseWaitBlocker v-if="isWaitingForResponse" />
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -42,6 +44,7 @@
|
||||
import Logo from "~/components/Logo";
|
||||
import Spacer from "~/components/Spacer";
|
||||
import DownloadBox from "~/components/DownloadBox";
|
||||
import PleaseWaitBlocker from "~/components/PleaseWaitBlocker";
|
||||
import IconArrowRightSquare from "~/components/Icons/arrow-right-square";
|
||||
import axios from "axios";
|
||||
|
||||
@ -50,9 +53,16 @@ export default {
|
||||
Logo,
|
||||
Spacer,
|
||||
DownloadBox,
|
||||
PleaseWaitBlocker,
|
||||
IconArrowRightSquare,
|
||||
},
|
||||
|
||||
data: function() {
|
||||
return {
|
||||
isWaitingForResponse: {type: Boolean, default: false}
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
downloadButtonClicked: function() {
|
||||
|
||||
@ -60,12 +70,14 @@ export default {
|
||||
if (this.$refs.video_url.value.match(/(https?:\/\/)?[a-zA-Z0-9-_.]+\.[a-zA-Z-_.]+/)) {
|
||||
const url = this.$refs.video_url.value;
|
||||
this.$refs.video_url.value = "";
|
||||
this.isWaitingForResponse = true;
|
||||
axios.post("/api", {
|
||||
request: "queue_download",
|
||||
video_url: url,
|
||||
mode: this.$refs.mode.options[this.$refs.mode.selectedIndex].value
|
||||
}).then(function(response){
|
||||
if (response.data.status === "OK") {
|
||||
that.isWaitingForResponse = false;
|
||||
that.$store.dispatch("dlcache/update", that);
|
||||
}
|
||||
});
|
||||
@ -79,6 +91,10 @@ export default {
|
||||
}
|
||||
return;
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.isWaitingForResponse = false;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user