Adding sugar to loading times with a spinner and avoid auto download of video if not requested by the user.
This commit is contained in:
sergiotarxz
parent
394ede94d5
commit
df2b70cd5a
GPG Key ID:
E5903508B6510AC2
2
MANIFEST
2
MANIFEST
|
|
@ -8,6 +8,8 @@ cpanfile
|
|||
lib/Peertube/DL.pm
|
||||
lib/Peertube/DL/Downloaders.pm
|
||||
lib/Peertube/DL/public/css/index.css
|
||||
lib/Peertube/DL/public/css/spinner.css
|
||||
lib/Peertube/DL/public/img/spinner.svg
|
||||
lib/Peertube/DL/public/index.html
|
||||
lib/Peertube/DL/public/js/peertube-dl-web.js
|
||||
lib/Peertube/DL/URLHandler.pm
|
||||
|
|
|
|||
14
README.md
14
README.md
|
|
@ -61,6 +61,20 @@ It is doable anyway if you want to give a try.
|
|||
|
||||
You can assume the supported urls are the ones which have a media player.
|
||||
|
||||
## Webpage
|
||||
|
||||
You can deploy a webpage using:
|
||||
|
||||
`peertube-dl-web daemon`
|
||||
|
||||
For testing or:
|
||||
|
||||
`peertube-dl-hypnotoad`
|
||||
|
||||
In production.
|
||||
|
||||
The environment variable support for PIDFILE makes easy to write an init script.
|
||||
|
||||
## Disclaimer
|
||||
|
||||
SEEING THE ADS TO SUPPORT THE JOB OF THE DISTRIBUTORS AND CONTENT CREATORS
|
||||
|
|
|
|||
|
|
@ -50,16 +50,26 @@ a:hover {
|
|||
justify-content: center;
|
||||
}
|
||||
|
||||
#download-video {
|
||||
#download-video-container a {
|
||||
display: none;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
width: 100%;
|
||||
background: #0a0;
|
||||
border-radius: 5px;
|
||||
font-size: 30px;
|
||||
color: white;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
#download-video-container a.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#download-video-container a embed {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
#video-container {
|
||||
|
|
@ -102,3 +112,24 @@ a:hover {
|
|||
h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
#modal-loading {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
transform: translate(-50%, -50%);
|
||||
border: black 1px solid;
|
||||
justify-content: right;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#modal-loading.active {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#modal-loading embed {
|
||||
width: 10%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
svg {
|
||||
background: none;
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<?xml-stylesheet href="/css/spinner.css" type="text/css"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin:auto;display:block;" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
|
||||
<g>
|
||||
<g transform="translate(50 50)">
|
||||
<g transform="scale(0.8)">
|
||||
<g transform="translate(-50 -58)">
|
||||
<path fill="#f47e60" d="M27.1,79.4c-1.1,0.6-2.4,1-3.7,1c-2.6,0-5.1-1.4-6.4-3.7c-2-3.5-0.8-8,2.7-10.1c1.1-0.6,2.4-1,3.7-1c2.6,0,5.1,1.4,6.4,3.7 C31.8,72.9,30.6,77.4,27.1,79.4z"></path>
|
||||
<path fill="#f8b26a" d="M72.9,79.4c1.1,0.6,2.4,1,3.7,1c2.6,0,5.1-1.4,6.4-3.7c2-3.5,0.8-8-2.7-10.1c-1.1-0.6-2.4-1-3.7-1c-2.6,0-5.1,1.4-6.4,3.7 C68.2,72.9,69.4,77.4,72.9,79.4z"></path>
|
||||
<circle fill="#abbd81" cx="50" cy="27" r="7.4"></circle>
|
||||
<path fill="#8ebfc7" d="M86.5,57.5c-3.1-1.9-6.4-2.8-9.8-2.8c-0.5,0-0.9,0-1.4,0c-0.4,0-0.8,0-1.1,0c-2.1,0-4.2-0.4-6.2-1.2 c-0.8-3.6-2.8-6.9-5.4-9.3c0.4-2.5,1.3-4.8,2.7-6.9c2-2.9,3.2-6.5,3.2-10.4c0-10.2-8.2-18.4-18.4-18.4c-0.3,0-0.6,0-0.9,0 C39.7,9,32,16.8,31.6,26.2c-0.2,4.1,1,7.9,3.2,11c1.4,2.1,2.3,4.5,2.7,6.9c-2.6,2.5-4.6,5.7-5.4,9.3c-1.9,0.7-4,1.1-6.1,1.1 c-0.4,0-0.8,0-1.2,0c-0.5,0-0.9-0.1-1.4-0.1c-3.1,0-6.3,0.8-9.2,2.5c-9.1,5.2-12,17-6.3,25.9c3.5,5.4,9.5,8.4,15.6,8.4 c2.9,0,5.8-0.7,8.5-2.1c3.6-1.9,6.3-4.9,8-8.3c1.1-2.3,2.7-4.2,4.6-5.8c1.7,0.5,3.5,0.8,5.4,0.8c1.9,0,3.7-0.3,5.4-0.8 c1.9,1.6,3.5,3.5,4.6,5.7c1.5,3.2,4,6,7.4,8c2.9,1.7,6.1,2.5,9.2,2.5c6.6,0,13.1-3.6,16.4-10C97.3,73.1,94.4,62.5,86.5,57.5z M29.6,83.7c-1.9,1.1-4,1.6-6.1,1.6c-4.2,0-8.4-2.2-10.6-6.1c-3.4-5.9-1.4-13.4,4.5-16.8c1.9-1.1,4-1.6,6.1-1.6 c4.2,0,8.4,2.2,10.6,6.1C37.5,72.8,35.4,80.3,29.6,83.7z M50,39.3c-6.8,0-12.3-5.5-12.3-12.3S43.2,14.7,50,14.7 c6.8,0,12.3,5.5,12.3,12.3S56.8,39.3,50,39.3z M87.2,79.2c-2.3,3.9-6.4,6.1-10.6,6.1c-2.1,0-4.2-0.5-6.1-1.6 c-5.9-3.4-7.9-10.9-4.5-16.8c2.3-3.9,6.4-6.1,10.6-6.1c2.1,0,4.2,0.5,6.1,1.6C88.6,65.8,90.6,73.3,87.2,79.2z"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" keyTimes="0;1" values="0 50 50;360 50 50"></animateTransform>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
|
|
@ -11,6 +11,9 @@
|
|||
<button class="block" id="download-form-button" >Fetch from api</button>
|
||||
</form>
|
||||
</div>
|
||||
<div id="modal-loading">
|
||||
<embed src="img/spinner.svg"/>
|
||||
</div>
|
||||
<div id="modal-video-container">
|
||||
<div class="video-container-bar">
|
||||
<a id="close-and-reset-video-container">X</a>
|
||||
|
|
@ -20,6 +23,8 @@
|
|||
<video id="video" controls="controls"></video>
|
||||
</div>
|
||||
<div id="download-video-container" class="block">
|
||||
<a id="download-video-prepare" class="active">Prepare download</a>
|
||||
<a id="download-video-loading"><embed src="img/spinner.svg"/></a>
|
||||
<a id="download-video">Download</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,19 +5,34 @@ let modalVideoContainer;
|
|||
let closeAndResetVideoContainer;
|
||||
let downloadFormUrl;
|
||||
let downloadVideo;
|
||||
let downloadVideoPrepare;
|
||||
let downloadVideoLoading;
|
||||
let downloadForm;
|
||||
let video;
|
||||
let modalLoading;
|
||||
let filename;
|
||||
let url;
|
||||
|
||||
function downloadFormButtonHandler(event) {
|
||||
event.preventDefault();
|
||||
modalLoading.classList.add('active');
|
||||
getRealURL(downloadFormUrl.value).then( (response) => {
|
||||
video.src = response.url;
|
||||
filename = response.filename;
|
||||
url = response.url;
|
||||
modalLoading.classList.remove('active');
|
||||
modalVideoContainer.style.display = 'block';
|
||||
generateBlobVideo(response.url).then( blob => {
|
||||
downloadVideo.href = URL.createObjectURL(blob);
|
||||
downloadVideo.download = response.filename;
|
||||
downloadVideo.style.display = 'block';
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function downloadVideoPrepareHandler(event) {
|
||||
downloadVideoPrepare.classList.remove('active');
|
||||
downloadVideoLoading.classList.add('active');
|
||||
generateBlobVideo(url).then( blob => {
|
||||
downloadVideo.href = URL.createObjectURL(blob);
|
||||
downloadVideo.download = filename;
|
||||
downloadVideoLoading.classList.remove('active');
|
||||
downloadVideo.classList.add('active');
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -64,6 +79,9 @@ async function getRealURL(url) {
|
|||
function closeAndResetVideoContainerHandler(event) {
|
||||
event.preventDefault();
|
||||
modalVideoContainer.style.display = 'none';
|
||||
downloadVideo.classList.remove('active');
|
||||
downloadVideoLoading.classList.remove('active');
|
||||
downloadVideoPrepare.classList.add('active');
|
||||
}
|
||||
|
||||
window.addEventListener('load', (event) => {
|
||||
|
|
@ -73,8 +91,13 @@ window.addEventListener('load', (event) => {
|
|||
video = document.querySelector('#video');
|
||||
downloadFormUrl = document.querySelector('#download-form-url');
|
||||
downloadVideo = document.querySelector('#download-video');
|
||||
downloadVideoLoading = document.querySelector('#download-video-loading');
|
||||
downloadVideoPrepare = document.querySelector('#download-video-prepare');
|
||||
closeAndResetVideoContainer = document.querySelector('#close-and-reset-video-container');
|
||||
modalLoading = document.querySelector('#modal-loading');
|
||||
|
||||
downloadFormButton.addEventListener('click', downloadFormButtonHandler);
|
||||
downloadVideoPrepare.addEventListener('click', downloadVideoPrepareHandler);
|
||||
downloadForm.addEventListener('submit', downloadFormHandler);
|
||||
closeAndResetVideoContainer.addEventListener('click', closeAndResetVideoContainerHandler);
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue