abnazhor/Peertube-dl
1
0
Fork 0
forked from sergiotarxz/Peertube-dl
Code Issues Pull Requests Releases Wiki Activity

Adding sugar to loading times with a spinner and avoid auto download of video if not requested by the user.

Browse Source
This commit is contained in:
sergiotarxz 2020-12-30 05:30:51 +01:00
parent 394ede94d5
commit df2b70cd5a
Signed by untrusted user who does not match committer: sergiotarxz
GPG Key ID: E5903508B6510AC2
7 changed files with 101 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
MANIFEST
View File

@ -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
View File

@ -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

33
lib/Peertube/DL/public/css/index.css
View File

@ -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%;
}

3
lib/Peertube/DL/public/css/spinner.css Normal file
View File

@ -0,0 +1,3 @@
svg {
background: none;
}

17
lib/Peertube/DL/public/img/spinner.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

5
lib/Peertube/DL/public/index.html
View File

@ -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>

33
lib/Peertube/DL/public/js/peertube-dl-web.js
View File

@ -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);
});