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

Making the frontend barely less ugly.

Browse Source
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 {
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;
}

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

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

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

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