diff --git a/MANIFEST b/MANIFEST
index 490bf5d..5d38098 100644
--- a/MANIFEST
+++ b/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
diff --git a/README.md b/README.md
index d556e90..75fea9e 100644
--- a/README.md
+++ b/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
diff --git a/lib/Peertube/DL/public/css/index.css b/lib/Peertube/DL/public/css/index.css
index 08cf65c..c2b3075 100644
--- a/lib/Peertube/DL/public/css/index.css
+++ b/lib/Peertube/DL/public/css/index.css
@@ -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%;
+}
diff --git a/lib/Peertube/DL/public/css/spinner.css b/lib/Peertube/DL/public/css/spinner.css
new file mode 100644
index 0000000..557853f
--- /dev/null
+++ b/lib/Peertube/DL/public/css/spinner.css
@@ -0,0 +1,3 @@
+svg {
+ background: none;
+}
diff --git a/lib/Peertube/DL/public/img/spinner.svg b/lib/Peertube/DL/public/img/spinner.svg
new file mode 100644
index 0000000..8889d98
--- /dev/null
+++ b/lib/Peertube/DL/public/img/spinner.svg
@@ -0,0 +1,17 @@
+
+
+
diff --git a/lib/Peertube/DL/public/index.html b/lib/Peertube/DL/public/index.html
index 5958371..29f5cff 100644
--- a/lib/Peertube/DL/public/index.html
+++ b/lib/Peertube/DL/public/index.html
@@ -11,6 +11,9 @@
+
+
+
diff --git a/lib/Peertube/DL/public/js/peertube-dl-web.js b/lib/Peertube/DL/public/js/peertube-dl-web.js
index 60b6fec..3ee44eb 100644
--- a/lib/Peertube/DL/public/js/peertube-dl-web.js
+++ b/lib/Peertube/DL/public/js/peertube-dl-web.js
@@ -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);
});