Dantenerosas/video_downloader_service
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added loader, added video format check, fix video download

Browse Source
This commit is contained in:
Dantenerosas
2023-08-15 01:38:45 +03:00
committed by nikili0n
parent acc48c7bc8
commit e89855d91a
4 changed files with 67 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/templates/index.html
View File

@ -5,10 +5,9 @@
<title>Video Downloading</title>
</head>
<style>
.custom-btn {
width: 130px;
height: 40px;
width: 145px;
height: 60px;
color: #fff;
border-radius: 5px;
padding: 10px 25px;
@ -48,16 +47,69 @@
font-size: 1.5em; /* Размер шрифта */
word-wrap: break-word; /* Перенос слов */
}
@keyframes spinner-border {
100% {
transform: rotate(360deg);
}
}
.submit-spinner {
display: inline-block;
width: 1rem;
height: 1rem;
vertical-align: -0.125em;
border: 0.2em solid currentColor;
border-right-color: transparent;
border-radius: 50%;
-webkit-animation: .75s linear infinite spinner-border;
animation: .75s linear infinite spinner-border;
}
.submit-spinner_hide {
display: none;
}
</style>
<body>
<form method="post" action="/submit">
<form method="post" action="/submit" id="download">
<input type="text" name="link">
<button type="submit" class="custom-btn btn-1">Download</button>
<button type="submit" class="custom-btn btn-1"><span class="submit-spinner submit-spinner_hide"></span> Download</button>
</form>
<div class="col">
<p> Ссылка для скачивания:</p>
<br>
<a href={{result}}>{{result}}</a>
<a id="result" href=""></a>
<div class="loader">
<div class="loader_inner"></div>
</div>
</div>
</body>
<script>
function sendForm() {
const xhr = new XMLHttpRequest();
xhr.open('POST', document.forms.download.action);
xhr.responseType = 'json';
xhr.onload = () => {
document.forms.download.querySelector('[type="submit"]').disabled = false;
document.forms.download.querySelector('.submit-spinner').classList.add('submit-spinner_hide');
if (xhr.status !== 200) {
return;
}
const response = xhr.response;
result.innerHTML = xhr.response.result;
result.href = xhr.response.result;
}
xhr.onerror = () => {
document.forms.download.querySelector('[type="submit"]').disabled = false;
document.forms.download.querySelector('.submit-spinner').classList.add('submit-spinner_hide');
};
document.forms.download.querySelector('[type="submit"]').disabled = true;
document.forms.download.querySelector('.submit-spinner').classList.remove('submit-spinner_hide');
xhr.send(new FormData(document.forms.download));
}
// при отправке формы
document.forms.download.addEventListener('submit', (e) => {
e.preventDefault();
sendForm();
});
</script>
</html>