sergiotarxz/Peertube-dl
sergiotarxz
/
Peertube-dl
1
0
Fork 1
Code Issues 11 Pull Requests Releases Wiki Activity

feat: Improving the support of the format list.

This commit is contained in:
sergiotarxz 2021-01-22 01:19:18 +01:00
parent 0014816375
commit 27cfeed687
Signed by: sergiotarxz
GPG Key ID: E5903508B6510AC2
5 changed files with 145 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
themes/default/public/dist/css/index.css vendored
View File

@ -44,7 +44,7 @@ a:hover,a:focus {
border: 1px solid black;
}
#close-and-reset-video-container:hover,#close-and-reset-video-container:focus {
#close-and-reset-video-container:hover:#close-and-reset-video-container:focus {
background: black;
color: white;
}

100
themes/new_look_default/public/dist/css/index.css vendored
View File

@ -74,15 +74,6 @@ body {
display: flex;
}
#poping-notice {
position: absolute;
display: none;
padding: 3rem;
border-radius: 0.3rem;
background-color: #374151;
color: white;
}
#poping-notice-content a {
text-decoration: none;
color: #10b981;
@ -110,17 +101,29 @@ body {
background-color: #059;
}
#modal-video-container {
position: absolute;
display: none;
.modal {
position: absolute;
display: none;
color: white;
}
height: 100vh;
width: 100%;
#poping-notice {
padding: 3rem;
border-radius: 0.3rem;
background-color: #374151;
color: white;
overflow-y: scroll;
width: 94%;
}
flex-flow: column;
align-items: center;
#modal-video-container,#modal-format-selector {
height: 100%;
width: 100%;
background-color: #111827;
flex-flow: column;
align-items: center;
background-color: #111827;
}
.video-container-bar {
@ -192,24 +195,23 @@ body {
align-items: center;
}
#modal-loading,
#modal-format-selector {
display: none;
#modal-loading {
display: none;
}
#poping-notice.active,
#modal-video-container.active {
.modal {
--tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
overflow-y: scroll;
}
#poping-notice.active {
display: block;
}
#modal-video-container.active {
.modal.active {
display: flex;
}
@ -245,6 +247,58 @@ body {
justify-content: center;
}
.format-list > div {
display: grid;
grid-column-gap: 10px;
grid-row-gap: 10px;
grid-template-areas: "a";
grid-auto-columns: 99%;
margin: 1rem;
}
.format-list > div > a {
border: 1px solid black;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
padding-right: 5%;
padding-left: 5%;
text-decoration: none;
border-radius: 0.5rem;
background-color: #059669;
overflow-wrap: anywhere;
}
.format-list > div > a:focus,.format-list > div > a:hover {
background-color: #059;
}
.format-list > div > a:after {
padding-bottom: 100%;
display: block;
content: "";
}
.scale {
height: 1em;
width; 1em;
}
@media (min-width: 600px) {
.format-list > div {
grid-template-areas: "a a";
grid-auto-columns: 49.75%;
}
}
@media (min-width: 805px) {
.format-list > div {
grid-template-areas: "a a a";
grid-auto-columns: 33%;
}
}
@media (min-width: 812px) {
#poping-notice {
width: 40%;

18
themes/new_look_default/public/dist/img/audio_muted.svg vendored Normal file
View File

@ -0,0 +1,18 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
<g transform="matrix(.13811 0 0 .13811 4.964 5.832)" fill-opacity=".8">
<g transform="matrix(6.5167 0 0 6.5167-28.01-34.23)">
<g transform="matrix(1.17633 0 0 1.17633 1 1.589)" stroke-opacity=".85" fill="#000" stroke="none" fill-opacity="0" stroke-width=".73">
<path d="m11.243 12.993c-.192 0-.384-.073-.53-.22-.293-.293-.293-.768 0-1.061 2.047-2.047 2.047-5.378 0-7.425-.293-.293-.293-.768 0-1.061.293-.293.768-.293 1.061 0 1.275 1.275 1.977 2.97 1.977 4.773 0 1.803-.702 3.498-1.977 4.773-.146.146-.338.22-.53.22z"/>
<path d="m8.578 11.578c-.192 0-.384-.073-.53-.22-.293-.293-.293-.768 0-1.061 1.267-1.267 1.267-3.329 0-4.596-.293-.293-.293-.768 0-1.061.293-.293.768-.293 1.061 0 1.852 1.852 1.852 4.865 0 6.718-.146.146-.338.22-.53.22z"/>
</g>
<g transform="translate(16 4)">
<g fill="#f2f2f2" fill-opacity="0">
<path d="m-1.773 12.874c-.226 0-.452-.086-.623-.259-.345-.345-.345-.903 0-1.248 2.408-2.408 2.408-6.326 0-8.734-.345-.345-.345-.903 0-1.248.345-.345.903-.345 1.248 0 1.5 1.5 2.326 3.494 2.326 5.615 0 2.121-.826 4.115-2.326 5.615-.172.172-.398.259-.623.259z"/>
<path d="m-4.908 11.209c-.226 0-.452-.086-.623-.259-.345-.345-.345-.903 0-1.248 1.49-1.49 1.49-3.916 0-5.406-.345-.345-.345-.903 0-1.248.345-.345.903-.345 1.248 0 2.179 2.179 2.179 5.723 0 7.903-.172.172-.398.259-.623.259z"/>
</g>
<path d="m-7.353 15.235c-.153 0-.303-.06-.416-.172l-4.534-4.534h-2.109c-.325 0-.588-.263-.588-.588v-5.882c0-.325.263-.588.588-.588h2.109l4.534-4.534c.168-.168.421-.219.641-.127.22.092.363.306.363.543v15.292c0 .238-.144.453-.363.543-.073.031-.149.045-.225.045" fill="#4d4d4d" fill-opacity="1"/>
</g>
</g>
<path d="m14.75 9.674v1.326h-1.326l-1.674-1.674-1.674 1.674h-1.326v-1.326l1.674-1.674-1.674-1.674v-1.326h1.326l1.674 1.674 1.674-1.674h1.326v1.326l-1.674 1.674 1.674 1.674" fill="#4d4d4d" fill-opacity="1" transform="matrix(8.22579 0 0 8.22579-32.543-28.351)"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

6
themes/new_look_default/public/dist/index.html vendored
View File

@ -20,7 +20,7 @@
<button class="block" id="download-form-button" >Fetch from api</button>
</form>
</div>
<div id="modal-format-selector">
<div id="modal-format-selector" class="modal">
<div class="video-container-bar">
<a id="close-modal-format-selector">x</a>
</div>
@ -38,7 +38,7 @@
<div id="modal-loading">
<embed src="img/spinner.svg"/>
</div>
<div id="modal-video-container">
<div id="modal-video-container" class="modal">
<div class="video-container-bar">
<a id="close-and-reset-video-container">x</a>
</div>
@ -53,7 +53,7 @@
</div>
</div>
</div>
<div id="poping-notice">
<div id="poping-notice" class="modal">
<div id="poping-notice-content">
<p>This webpage is free as in freedom software, it is offered to you with the hope it will be useful, but without any warranty,
you can find the source code at <a href="https://gitea.sergiotarxz.freemyip.com/sergiotarxz/Peertube-dl">my gitea</a> with docs to setup your own

59
themes/new_look_default/public/src/view/format_selector.js
View File

@ -8,25 +8,58 @@ class FormatSelector {
appendFormat(container, object, is_video, callback) {
let a = document.createElement('a');
let br = function() { return document.createElement('br') };
let inner_text = [];
let muted_video = false;
if ( is_video ) {
a.innerText = 'Id: ' + object.id + "\n"
+ 'Format: ' + object.mimeType + "\n"
+ 'QualityLabel: ' + object.qualityLabel + "p\n"
+ 'Bitrate: ' + object.bitrate + "\n"
+ (
( object.audioSampleRate !== undefined ) ?
'AudioSampleRate: ' + object.audioSampleRate + ".\n" :
"No audio."
);
if ( object.audioSampleRate === undefined ) {
muted_video = true;
}
inner_text.push('Id: ' + object.id);
inner_text.push(br());
inner_text.push('Format: ' + object.mimeType);
inner_text.push(br());
inner_text.push('QualityLabel: ' + object.qualityLabel + "p");
inner_text.push(br());
inner_text.push('Bitrate: ' + object.bitrate);
inner_text.push(br());
inner_text.push( ( muted_video) ?
"No audio. " :
'AudioSampleRate: ' + object.audioSampleRate
);
} else {
a.innerText = 'Id: ' + object.id + "\n"
+ 'Format: ' + object.mimeType + "\n"
+ 'AudioSampleRate: ' + object.audioSampleRate + "\n"
+ 'Bitrate: ' + object.bitrate + ".\n";
inner_text.push('Id: ' + object.id + "\n");
inner_text.push(br());
inner_text.push('Format: ' + object.mimeType);
inner_text.push(br());
inner_text.push('AudioSampleRate: ' + object.audioSampleRate);
inner_text.push(br());
inner_text.push('Bitrate: ' + object.bitrate);
}
a.addEventListener( 'click', (event) => {
callback(object.id);
});
if (muted_video) {
let img_muted_video = document.createElement('img');
img_muted_video.classList.add('mute_img');
img_muted_video.classList.add('scale');
img_muted_video.src = 'img/audio_muted.svg';
inner_text.push(img_muted_video);
}
for (let text of inner_text) {
if (typeof text === "string"
|| text instanceof String) {
text = document.createTextNode(text);
a.appendChild(text);
} else if ( text instanceof Node) {
a.appendChild(text);
} else {
throw ('Text is not a instance of Node nor a String');
}
}
container.appendChild(a);
}