diff --git a/lib/Peertube/DL/public/css/index.css b/lib/Peertube/DL/public/css/index.css index 9091cb3..08cf65c 100644 --- a/lib/Peertube/DL/public/css/index.css +++ b/lib/Peertube/DL/public/css/index.css @@ -1,5 +1,7 @@ body { - height: 90%; + height: 99.9%; + margin: 0; + padding: 0; } a { @@ -10,7 +12,12 @@ a:hover { text-decoration: underline; } -#video-container { +#video { + width: 100%; + margin: 3px; +} + +#modal-video-container { display: none; background: white; position: fixed; @@ -37,3 +44,61 @@ a:hover { background: black; color: white; } + +#download-video-container { + margin: 10px; + justify-content: center; +} + +#download-video { + display: none; + padding-left: 5px; + padding-right: 5px; + padding-top: 5px; + padding-bottom: 5px; + background: #0a0; + border-radius: 5px; + font-size: 30px; + color: white; +} + +#video-container { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + height: 100%; +} + +.block { + display: block; +} + +.application-container { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + height: 100%; + background: #000; + color: white; +} + +#download-form { + display: flex; + justify-content: center; + flex-direction: column; +} + +#download-form-button { + margin-top: 5px; + height: 50px; + font-size: 1.5rem; + background: #fff; + color: black; + border: none; +} + +h2 { + font-size: 2rem; +} diff --git a/lib/Peertube/DL/public/index.html b/lib/Peertube/DL/public/index.html index 2db6b60..5958371 100644 --- a/lib/Peertube/DL/public/index.html +++ b/lib/Peertube/DL/public/index.html @@ -4,16 +4,25 @@ -
- - -
-
+
+

Peertube-dl Web Application

+
+ + +
+
+ diff --git a/lib/Peertube/DL/public/js/peertube-dl-web.js b/lib/Peertube/DL/public/js/peertube-dl-web.js index 69390ae..60b6fec 100644 --- a/lib/Peertube/DL/public/js/peertube-dl-web.js +++ b/lib/Peertube/DL/public/js/peertube-dl-web.js @@ -1,7 +1,7 @@ "use strict"; let downloadFormButton; -let videoContainer; +let modalVideoContainer; let closeAndResetVideoContainer; let downloadFormUrl; let downloadVideo; @@ -12,10 +12,11 @@ function downloadFormButtonHandler(event) { event.preventDefault(); getRealURL(downloadFormUrl.value).then( (response) => { video.src = response.url; - videoContainer.style.display = 'block'; + modalVideoContainer.style.display = 'block'; generateBlobVideo(response.url).then( blob => { downloadVideo.href = URL.createObjectURL(blob); downloadVideo.download = response.filename; + downloadVideo.style.display = 'block'; }); }); } @@ -62,13 +63,13 @@ async function getRealURL(url) { function closeAndResetVideoContainerHandler(event) { event.preventDefault(); - videoContainer.style.display = 'none'; + modalVideoContainer.style.display = 'none'; } window.addEventListener('load', (event) => { downloadFormButton = document.querySelector('#download-form-button'); downloadForm = document.querySelector('#download-form'); - videoContainer = document.querySelector('#video-container'); + modalVideoContainer = document.querySelector('#modal-video-container'); video = document.querySelector('#video'); downloadFormUrl = document.querySelector('#download-form-url'); downloadVideo = document.querySelector('#download-video');