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

Making the frontend barely less ugly.

This commit is contained in:
sergiotarxz 2020-12-29 10:38:25 +01:00
parent e38f298e40
commit 7a9870d517
Signed by untrusted user who does not match committer: sergiotarxz
GPG Key ID: E5903508B6510AC2
3 changed files with 88 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,7 @@
body { body {
height: 90%; height: 99.9%;
margin: 0;
padding: 0;
} }
a { a {
@ -10,7 +12,12 @@ a:hover {
text-decoration: underline; text-decoration: underline;
} }
#video-container { #video {
width: 100%;
margin: 3px;
}
#modal-video-container {
display: none; display: none;
background: white; background: white;
position: fixed; position: fixed;
@ -37,3 +44,61 @@ a:hover {
background: black; background: black;
color: white; 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;
}

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

@ -4,16 +4,25 @@
<link rel="stylesheet" href="css/index.css"></script> <link rel="stylesheet" href="css/index.css"></script>
</head> </head>
<body> <body>
<form id="download-form"> <div class="application-container">
<input type="text" id="download-form-url" placeholder="Introduce the url you want to download."/> <h2>Peertube-dl Web Application</h2>
<button id="download-form-button" >Fetch from api</button> <form id="download-form">
</form> <input class="block" type="text" id="download-form-url" placeholder="Introduce the url you want to download."/>
<div id="video-container"> <button class="block" id="download-form-button" >Fetch from api</button>
</form>
</div>
<div id="modal-video-container">
<div class="video-container-bar"> <div class="video-container-bar">
<a id="close-and-reset-video-container">X</a> <a id="close-and-reset-video-container">X</a>
</div> </div>
<video id="video"></video> <div id="video-container">
<a id="download-video">Download</a> <div class="block">
<video id="video" controls="controls"></video>
</div>
<div id="download-video-container" class="block">
<a id="download-video">Download</a>
</div>
</div>
</div> </div>
</body> </body>
</html> </html>

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

@ -1,7 +1,7 @@
"use strict"; "use strict";
let downloadFormButton; let downloadFormButton;
let videoContainer; let modalVideoContainer;
let closeAndResetVideoContainer; let closeAndResetVideoContainer;
let downloadFormUrl; let downloadFormUrl;
let downloadVideo; let downloadVideo;
@ -12,10 +12,11 @@ function downloadFormButtonHandler(event) {
event.preventDefault(); event.preventDefault();
getRealURL(downloadFormUrl.value).then( (response) => { getRealURL(downloadFormUrl.value).then( (response) => {
video.src = response.url; video.src = response.url;
videoContainer.style.display = 'block'; modalVideoContainer.style.display = 'block';
generateBlobVideo(response.url).then( blob => { generateBlobVideo(response.url).then( blob => {
downloadVideo.href = URL.createObjectURL(blob); downloadVideo.href = URL.createObjectURL(blob);
downloadVideo.download = response.filename; downloadVideo.download = response.filename;
downloadVideo.style.display = 'block';
}); });
}); });
} }
@ -62,13 +63,13 @@ async function getRealURL(url) {
function closeAndResetVideoContainerHandler(event) { function closeAndResetVideoContainerHandler(event) {
event.preventDefault(); event.preventDefault();
videoContainer.style.display = 'none'; modalVideoContainer.style.display = 'none';
} }
window.addEventListener('load', (event) => { window.addEventListener('load', (event) => {
downloadFormButton = document.querySelector('#download-form-button'); downloadFormButton = document.querySelector('#download-form-button');
downloadForm = document.querySelector('#download-form'); downloadForm = document.querySelector('#download-form');
videoContainer = document.querySelector('#video-container'); modalVideoContainer = document.querySelector('#modal-video-container');
video = document.querySelector('#video'); video = document.querySelector('#video');
downloadFormUrl = document.querySelector('#download-form-url'); downloadFormUrl = document.querySelector('#download-form-url');
downloadVideo = document.querySelector('#download-video'); downloadVideo = document.querySelector('#download-video');