General theme: add license and add URL source code in footer
This commit is contained in:
parent
701786a9cc
commit
0f78e73e80
@ -21,6 +21,14 @@ def homepage():
|
||||
return flask.render_template('home.html', title="Youtube local")
|
||||
|
||||
|
||||
@yt_app.route('/licenses')
|
||||
def licensepage():
|
||||
return flask.render_template(
|
||||
'licenses.html',
|
||||
title="Licenses - YouTube Local"
|
||||
)
|
||||
|
||||
|
||||
theme_names = {
|
||||
0: 'light_theme',
|
||||
1: 'gray_theme',
|
||||
|
||||
@ -462,6 +462,12 @@ hr {
|
||||
|
||||
.footer {
|
||||
grid-area: footer;
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer > p {
|
||||
@ -554,4 +560,15 @@ hr {
|
||||
grid-row-gap: 1rem;
|
||||
grid-column-gap: 1rem;
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, auto);
|
||||
grid-column-gap: 2rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -245,6 +245,12 @@ label[for=options-toggle-cbox] {
|
||||
|
||||
.footer {
|
||||
grid-area: footer;
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer > p {
|
||||
@ -280,4 +286,15 @@ label[for=options-toggle-cbox] {
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, auto);
|
||||
grid-column-gap: 2rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -159,6 +159,12 @@ label[for=options-toggle-cbox] {
|
||||
|
||||
.footer {
|
||||
grid-area: footer;
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer > p {
|
||||
@ -194,4 +200,15 @@ label[for=options-toggle-cbox] {
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, auto);
|
||||
grid-column-gap: 2rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
86
youtube/static/js/playlistadd.js
Normal file
86
youtube/static/js/playlistadd.js
Normal file
@ -0,0 +1,86 @@
|
||||
(function main() {
|
||||
/* Takes control of the form if javascript is enabled, so that adding stuff to a playlist will not cause things to stop loading, and will display a status message. If javascript is disabled, the form will still work using regular HTML methods, but causes things on the page (such as the video) to stop loading. */
|
||||
const playlistAddForm = document.getElementById('playlist-edit');
|
||||
|
||||
function setStyle(element, property, value){
|
||||
element.style[property] = value;
|
||||
}
|
||||
function removeMessage(messageBox){
|
||||
messageBox.parentNode.removeChild(messageBox);
|
||||
}
|
||||
|
||||
function displayMessage(text, error=false){
|
||||
let currentMessageBox = document.getElementById('message-box');
|
||||
if(currentMessageBox !== null){
|
||||
currentMessageBox.parentNode.removeChild(currentMessageBox);
|
||||
}
|
||||
let messageBox = document.createElement('div');
|
||||
if(error){
|
||||
messageBox.setAttribute('role', 'alert');
|
||||
} else {
|
||||
messageBox.setAttribute('role', 'status');
|
||||
}
|
||||
messageBox.setAttribute('id', 'message-box');
|
||||
let textNode = document.createTextNode(text);
|
||||
messageBox.appendChild(textNode);
|
||||
document.querySelector('main').appendChild(messageBox);
|
||||
let currentstyle = window.getComputedStyle(messageBox);
|
||||
let removalDelay;
|
||||
if(error){
|
||||
removalDelay = 5000;
|
||||
} else {
|
||||
removalDelay = 1500;
|
||||
}
|
||||
window.setTimeout(setStyle, 20, messageBox, 'opacity', 1);
|
||||
window.setTimeout(setStyle, removalDelay, messageBox, 'opacity', 0);
|
||||
window.setTimeout(removeMessage, removalDelay+300, messageBox);
|
||||
}
|
||||
// https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript
|
||||
function sendData(event){
|
||||
var clicked_button = document.activeElement;
|
||||
if(clicked_button === null || clicked_button.getAttribute('type') !== 'submit' || clicked_button.parentElement != event.target){
|
||||
console.log('ERROR: clicked_button not valid');
|
||||
return;
|
||||
}
|
||||
if(clicked_button.getAttribute('value') !== 'add'){
|
||||
return; // video(s) are being removed from playlist, just let it refresh the page
|
||||
}
|
||||
event.preventDefault();
|
||||
var XHR = new XMLHttpRequest();
|
||||
var FD = new FormData(playlistAddForm);
|
||||
|
||||
if(FD.getAll('video_info_list').length === 0){
|
||||
displayMessage('Error: No videos selected', true);
|
||||
return;
|
||||
}
|
||||
|
||||
if(FD.get('playlist_name') === ""){
|
||||
displayMessage('Error: No playlist selected', true);
|
||||
return;
|
||||
}
|
||||
|
||||
// https://stackoverflow.com/questions/48322876/formdata-doesnt-include-value-of-buttons
|
||||
FD.append('action', 'add');
|
||||
|
||||
XHR.addEventListener('load', function(event){
|
||||
if(event.target.status == 204){
|
||||
displayMessage('Added videos to playlist "' + FD.get('playlist_name') + '"');
|
||||
} else {
|
||||
displayMessage('Error adding videos to playlist: ' + event.target.status.toString(), true);
|
||||
}
|
||||
});
|
||||
|
||||
XHR.addEventListener('error', function(event){
|
||||
if(event.target.status == 0){
|
||||
displayMessage('XHR failed: Check that XHR requests are allowed', true);
|
||||
} else {
|
||||
displayMessage('XHR failed: Unknown error', true);
|
||||
}
|
||||
});
|
||||
|
||||
XHR.open('POST', playlistAddForm.getAttribute('action'));
|
||||
XHR.send(FD);
|
||||
}
|
||||
|
||||
playlistAddForm.addEventListener('submit', sendData);
|
||||
}());
|
||||
13
youtube/static/js/speedyplay.js
Normal file
13
youtube/static/js/speedyplay.js
Normal file
@ -0,0 +1,13 @@
|
||||
(function main() {
|
||||
'use strict';
|
||||
const video = document.getElementById('js-video-player');
|
||||
const speedInput = document.getElementById('speed-control');
|
||||
speedInput.addEventListener('keyup', (event) => {
|
||||
if (event.key === 'Enter') {
|
||||
let speed = parseFloat(speedInput.value);
|
||||
if(!isNaN(speed)){
|
||||
video.playbackRate = speed;
|
||||
}
|
||||
}
|
||||
});
|
||||
}());
|
||||
287
youtube/static/license.css
Normal file
287
youtube/static/license.css
Normal file
@ -0,0 +1,287 @@
|
||||
html {
|
||||
font-family: "liberation serif", "times new roman", calibri, carlito, serif;
|
||||
background: var(--background);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
body {
|
||||
display: grid;
|
||||
grid-gap: 20px;
|
||||
grid-template-areas:
|
||||
"header"
|
||||
"main"
|
||||
"footer";
|
||||
/* Fix height */
|
||||
height: 100vh;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
/* fix top and bottom */
|
||||
margin-left: 1rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
a:link {
|
||||
color: var(--link);
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: var(--link-visited);
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="search"] {
|
||||
background: var(--background);
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 5px;
|
||||
padding: 0.4rem 0.4rem;
|
||||
font-size: 15px;
|
||||
color: var(--search-text);
|
||||
}
|
||||
|
||||
input[type='search'] {
|
||||
border-bottom: 1px solid var(--button-border);
|
||||
border-top: 0px;
|
||||
border-left: 0px;
|
||||
border-right: 0px;
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
header {
|
||||
display: grid;
|
||||
grid-gap: 1px;
|
||||
grid-template-areas:
|
||||
"home"
|
||||
"form";
|
||||
grid-area: header;
|
||||
}
|
||||
|
||||
.home {
|
||||
grid-area: home;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.form {
|
||||
display: grid;
|
||||
grid-gap: 4px;
|
||||
grid-template-areas:
|
||||
"search-box"
|
||||
"search-button"
|
||||
"dropdown";
|
||||
grid-area: form;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
grid-area: search-box;
|
||||
}
|
||||
.search-button {
|
||||
grid-area: search-button;
|
||||
|
||||
cursor: pointer;
|
||||
padding-bottom: 6px;
|
||||
padding-left: .75em;
|
||||
padding-right: .75em;
|
||||
padding-top: 6px;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
background-color: var(--buttom);
|
||||
border: 1px solid var(--button-border);
|
||||
color: var(--buttom-text);
|
||||
border-radius: 5px;
|
||||
}
|
||||
.search-button:hover {
|
||||
background-color: var(--buttom-hover);
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
display: grid;
|
||||
grid-gap: 1px;
|
||||
grid-template-areas:
|
||||
"dropdown-label"
|
||||
"dropdown-content";
|
||||
grid-area: dropdown;
|
||||
z-index: 1;
|
||||
}
|
||||
.dropdown-label {
|
||||
grid-area: dropdown-label;
|
||||
|
||||
padding-bottom: 6px;
|
||||
padding-left: .75em;
|
||||
padding-right: .75em;
|
||||
padding-top: 6px;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
background-color: var(--buttom);
|
||||
border: 1px solid var(--button-border);
|
||||
color: var(--buttom-text);
|
||||
border-radius: 5px;
|
||||
}
|
||||
.dropdown-label:hover {
|
||||
background-color: var(--buttom-hover);
|
||||
}
|
||||
|
||||
/* ------------- Menu Mobile sin JS ---------------- */
|
||||
/* input hidden */
|
||||
.opt-box {
|
||||
display: none;
|
||||
}
|
||||
.dropdown-content {
|
||||
display: none;
|
||||
grid-area: dropdown-content;
|
||||
}
|
||||
label[for=options-toggle-cbox] {
|
||||
cursor: pointer;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#options-toggle-cbox:checked ~ .dropdown-content {
|
||||
display: inline-grid;
|
||||
white-space: nowrap;
|
||||
}
|
||||
/*- ----------- End Menu Mobile sin JS ------------- */
|
||||
|
||||
.main {
|
||||
grid-area: main;
|
||||
margin: 0 auto;
|
||||
max-width: 80ch;
|
||||
}
|
||||
|
||||
.code-error {
|
||||
background: var(--secondary-background);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.footer {
|
||||
grid-area: footer;
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer > p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ---- ---- Table ---- ---- */
|
||||
.table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.table caption {
|
||||
margin: 1rem 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.table td,.table th {
|
||||
padding: 10px 10px;
|
||||
border: 1px solid var(--secondary-background);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.table th{
|
||||
background-color: var(--secondary-background);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.table tbody tr:nth-child(even){
|
||||
background-color: var(--secondary-focus);
|
||||
}
|
||||
|
||||
.table thead tr th:nth-last-child(1) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.table tbody tr td:nth-last-child(1) > button {
|
||||
color: var(--text);
|
||||
width: 40px;
|
||||
height: 30px;
|
||||
background-color: var(--secondary-background);
|
||||
border: 1px solid var(--secondary-background);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.table tbody tr td:nth-last-child(1) > a {
|
||||
color: var(--text);
|
||||
cursor: pointer;
|
||||
padding: 2px 10px;
|
||||
}
|
||||
|
||||
/* ---- ---- End table ---- ---- */
|
||||
|
||||
/* ---- Table responsive ---- */
|
||||
@media (max-width: 580px) {
|
||||
.table thead {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.table tr{
|
||||
margin-bottom:15px;
|
||||
}
|
||||
|
||||
.table,
|
||||
.table tbody,
|
||||
.table tr,
|
||||
.table td {
|
||||
display: block;
|
||||
width: auto;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.table td::before {
|
||||
content: attr(data-label) ": ";
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
/* End table responsive */
|
||||
|
||||
@media (min-width: 780px) {
|
||||
body {
|
||||
display: grid;
|
||||
grid-template-columns: 0.3fr 2fr 1fr 0.3fr;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
grid-template-areas:
|
||||
"header header header header"
|
||||
"main main main main"
|
||||
"footer footer footer footer";
|
||||
}
|
||||
.form {
|
||||
display: grid;
|
||||
grid-gap: 1px;
|
||||
grid-template-columns: 1fr 1.4fr 0.3fr 1.3fr;
|
||||
grid-template-areas: ". search-box search-button dropdown";
|
||||
grid-area: form;
|
||||
position: relative;
|
||||
}
|
||||
.dropdown {
|
||||
display: grid;
|
||||
grid-gap: 1px;
|
||||
grid-template-columns: minmax(50px, 100px);
|
||||
grid-template-areas:
|
||||
"dropdown-label"
|
||||
"dropdown-content";
|
||||
grid-area: dropdown;
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, auto);
|
||||
grid-column-gap: 2rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
@ -432,6 +432,12 @@ hr {
|
||||
|
||||
.footer {
|
||||
grid-area: footer;
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer > p {
|
||||
@ -524,4 +530,15 @@ hr {
|
||||
grid-row-gap: 1rem;
|
||||
grid-column-gap: 1rem;
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, auto);
|
||||
grid-column-gap: 2rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -442,6 +442,12 @@ hr {
|
||||
|
||||
.footer {
|
||||
grid-area: footer;
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer > p {
|
||||
@ -534,4 +540,15 @@ hr {
|
||||
grid-row-gap: 1rem;
|
||||
grid-column-gap: 1rem;
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, auto);
|
||||
grid-column-gap: 2rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -404,6 +404,12 @@ hr {
|
||||
|
||||
.footer {
|
||||
grid-area: footer;
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer > p {
|
||||
@ -492,4 +498,15 @@ hr {
|
||||
grid-row-gap: 1rem;
|
||||
grid-column-gap: 1rem;
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, auto);
|
||||
grid-column-gap: 2rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -188,6 +188,12 @@ label[for=options-toggle-cbox] {
|
||||
|
||||
.footer {
|
||||
grid-area: footer;
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer > p {
|
||||
@ -238,4 +244,15 @@ label[for=options-toggle-cbox] {
|
||||
.setting-item input {
|
||||
max-width: 250px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, auto);
|
||||
grid-column-gap: 2rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -436,6 +436,12 @@ hr {
|
||||
|
||||
.footer {
|
||||
grid-area: footer;
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer > p {
|
||||
@ -528,4 +534,15 @@ hr {
|
||||
grid-row-gap: 1rem;
|
||||
grid-column-gap: 1rem;
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, auto);
|
||||
grid-column-gap: 2rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -300,6 +300,12 @@ hr {
|
||||
|
||||
.footer {
|
||||
grid-area: footer;
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer > p {
|
||||
@ -400,4 +406,15 @@ hr {
|
||||
grid-row-gap: 1rem;
|
||||
grid-column-gap: 1rem;
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, auto);
|
||||
grid-column-gap: 2rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -548,6 +548,12 @@ label[for=options-toggle-cbox] {
|
||||
|
||||
.footer {
|
||||
grid-area: footer;
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer > p {
|
||||
@ -634,4 +640,15 @@ label[for=options-toggle-cbox] {
|
||||
". side-videos";
|
||||
grid-area: sc-info;
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, auto);
|
||||
grid-column-gap: 2rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -130,95 +130,7 @@
|
||||
<button type="reset" id="item-selection-reset">Clear selection</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
(function main() {
|
||||
/* Takes control of the form if javascript is enabled, so that adding stuff to a playlist will not cause things to stop loading, and will display a status message. If javascript is disabled, the form will still work using regular HTML methods, but causes things on the page (such as the video) to stop loading. */
|
||||
const playlistAddForm = document.getElementById('playlist-edit');
|
||||
|
||||
function setStyle(element, property, value){
|
||||
element.style[property] = value;
|
||||
}
|
||||
function removeMessage(messageBox){
|
||||
messageBox.parentNode.removeChild(messageBox);
|
||||
}
|
||||
|
||||
function displayMessage(text, error=false){
|
||||
let currentMessageBox = document.getElementById('message-box');
|
||||
if(currentMessageBox !== null){
|
||||
currentMessageBox.parentNode.removeChild(currentMessageBox);
|
||||
}
|
||||
let messageBox = document.createElement('div');
|
||||
if(error){
|
||||
messageBox.setAttribute('role', 'alert');
|
||||
} else {
|
||||
messageBox.setAttribute('role', 'status');
|
||||
}
|
||||
messageBox.setAttribute('id', 'message-box');
|
||||
let textNode = document.createTextNode(text);
|
||||
messageBox.appendChild(textNode);
|
||||
document.querySelector('main').appendChild(messageBox);
|
||||
let currentstyle = window.getComputedStyle(messageBox);
|
||||
let removalDelay;
|
||||
if(error){
|
||||
removalDelay = 5000;
|
||||
} else {
|
||||
removalDelay = 1500;
|
||||
}
|
||||
window.setTimeout(setStyle, 20, messageBox, 'opacity', 1);
|
||||
window.setTimeout(setStyle, removalDelay, messageBox, 'opacity', 0);
|
||||
window.setTimeout(removeMessage, removalDelay+300, messageBox);
|
||||
}
|
||||
// https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript
|
||||
function sendData(event){
|
||||
var clicked_button = document.activeElement;
|
||||
if(clicked_button === null || clicked_button.getAttribute('type') !== 'submit' || clicked_button.parentElement != event.target){
|
||||
console.log('ERROR: clicked_button not valid');
|
||||
return;
|
||||
}
|
||||
if(clicked_button.getAttribute('value') !== 'add'){
|
||||
return; // video(s) are being removed from playlist, just let it refresh the page
|
||||
}
|
||||
event.preventDefault();
|
||||
var XHR = new XMLHttpRequest();
|
||||
var FD = new FormData(playlistAddForm);
|
||||
|
||||
if(FD.getAll('video_info_list').length === 0){
|
||||
displayMessage('Error: No videos selected', true);
|
||||
return;
|
||||
}
|
||||
|
||||
if(FD.get('playlist_name') === ""){
|
||||
displayMessage('Error: No playlist selected', true);
|
||||
return;
|
||||
}
|
||||
|
||||
// https://stackoverflow.com/questions/48322876/formdata-doesnt-include-value-of-buttons
|
||||
FD.append('action', 'add');
|
||||
|
||||
XHR.addEventListener('load', function(event){
|
||||
if(event.target.status == 204){
|
||||
displayMessage('Added videos to playlist "' + FD.get('playlist_name') + '"');
|
||||
} else {
|
||||
displayMessage('Error adding videos to playlist: ' + event.target.status.toString(), true);
|
||||
}
|
||||
});
|
||||
|
||||
XHR.addEventListener('error', function(event){
|
||||
if(event.target.status == 0){
|
||||
displayMessage('XHR failed: Check that XHR requests are allowed', true);
|
||||
} else {
|
||||
displayMessage('XHR failed: Unknown error', true);
|
||||
}
|
||||
});
|
||||
|
||||
XHR.open('POST', playlistAddForm.getAttribute('action'));
|
||||
XHR.send(FD);
|
||||
}
|
||||
|
||||
playlistAddForm.addEventListener('submit', sendData);
|
||||
}());
|
||||
</script>
|
||||
<script src="/youtube.com/static/js/playlistadd.js"></script>
|
||||
{% endif %}
|
||||
|
||||
</header>
|
||||
@ -230,12 +142,23 @@
|
||||
|
||||
</main>
|
||||
<footer class="footer">
|
||||
<p>This site is Free/Libre Software</p>
|
||||
{% if current_commit and current_version %}
|
||||
<p>Current version: {{ current_version }}-{{ current_commit }} @ {{ current_branch }}</p>
|
||||
{% else %}
|
||||
<p>Current version: {{ current_version }}</p>
|
||||
{% endif %}
|
||||
<div>
|
||||
<a href="https://libregit.org/heckyel/yt-local.git"
|
||||
rel="noopener noreferrer" target="_blank">
|
||||
Released under the AGPLv3 or later
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<p>This site is Free/Libre Software</p>
|
||||
{% if current_commit and current_version %}
|
||||
<p>Current version: {{ current_version }}-{{ current_commit }} @ {{ current_branch }}</p>
|
||||
{% else %}
|
||||
<p>Current version: {{ current_version }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div>
|
||||
<a href="/youtube.com/licenses" data-jslicense="1" rel="noopener noreferrer" target="_blank">JavaScript licenses</a>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
|
||||
49
youtube/templates/licenses.html
Normal file
49
youtube/templates/licenses.html
Normal file
@ -0,0 +1,49 @@
|
||||
{% set page_title = title %}
|
||||
{% extends "base.html" %}
|
||||
{% block style %}
|
||||
<link href="/youtube.com/static/license.css" rel="stylesheet"/>
|
||||
{% endblock style %}
|
||||
{% block main %}
|
||||
<table id="jslicense-labels1" class="table">
|
||||
<caption>JavaScript Licensing Table</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>File</th>
|
||||
<th>License</th>
|
||||
<th>Source</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="File"><a href="/youtube.com/static/js/comments.js">comments.js</a></td>
|
||||
<td data-label="License"><a href="http://www.gnu.org/licenses/agpl-3.0.html">AGPL-3.0 or later</a></td>
|
||||
<td data-label="Source"><a href="/youtube.com/static/js/comments.js">comments.js</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="File"><a href="/youtube.com/static/js/common.js">common.js</a></td>
|
||||
<td data-label="License"><a href="http://www.gnu.org/licenses/agpl-3.0.html">AGPL-3.0 or later</a></td>
|
||||
<td data-label="Source"><a href="/youtube.com/static/js/common.js">common.js</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="File"><a href="/youtube.com/static/js/hotkeys.js">hotkeys.js</a></td>
|
||||
<td data-label="License"><a href="http://www.gnu.org/licenses/agpl-3.0.html">AGPL-3.0 or later</a></td>
|
||||
<td data-label="Source"><a href="/youtube.com/static/js/hotkeys.js">hotkeys.js</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="File"><a href="/youtube.com/static/js/playlistadd.js">playlistadd.js</a></td>
|
||||
<td data-label="License"><a href="http://www.gnu.org/licenses/agpl-3.0.html">AGPL-3.0 or later</a></td>
|
||||
<td data-label="Source"><a href="/youtube.com/static/js/playlistadd.js">playlistadd.js</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="File"><a href="/youtube.com/static/js/speedyplay.js">speedyplay.js</a></td>
|
||||
<td data-label="License"><a href="http://www.gnu.org/licenses/agpl-3.0.html">AGPL-3.0 or later</a></td>
|
||||
<td data-label="Source"><a href="/youtube.com/static/js/speedyplay.js">speedyplay.js</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="File"><a href="/youtube.com/static/js/transcript-table.js">transcript-table.js</a></td>
|
||||
<td data-label="License"><a href="http://www.gnu.org/licenses/agpl-3.0.html">AGPL-3.0 or later</a></td>
|
||||
<td data-label="Source"><a href="/youtube.com/static/js/transcript-table.js">transcript-table.js</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
{% endblock main %}
|
||||
@ -76,21 +76,7 @@
|
||||
|
||||
<div class="external-player-controls">
|
||||
<input class="speed" id="speed-control" type="text">
|
||||
<script>
|
||||
(function main() {
|
||||
'use strict';
|
||||
const video = document.getElementById('js-video-player');
|
||||
const speedInput = document.getElementById('speed-control');
|
||||
speedInput.addEventListener('keyup', (event) => {
|
||||
if (event.key === 'Enter') {
|
||||
let speed = parseFloat(speedInput.value);
|
||||
if(!isNaN(speed)){
|
||||
video.playbackRate = speed;
|
||||
}
|
||||
}
|
||||
});
|
||||
}());
|
||||
</script>
|
||||
<script src="/youtube.com/static/js/speedyplay.js"></script>
|
||||
</div>
|
||||
|
||||
<input class="v-checkbox" name="video_info_list" value="{{ video_info }}" form="playlist-edit" type="checkbox">
|
||||
@ -184,6 +170,7 @@
|
||||
</nav>
|
||||
{% if playlist['current_index'] is not none %}
|
||||
<script>
|
||||
// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later
|
||||
(function main() {
|
||||
// from https://stackoverflow.com/a/6969486
|
||||
function escapeRegExp(string) {
|
||||
@ -260,10 +247,12 @@
|
||||
}
|
||||
}
|
||||
}());
|
||||
// @license-end
|
||||
</script>
|
||||
{% endif %}
|
||||
{% if playlist['id'] is not none %}
|
||||
<script>
|
||||
// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later
|
||||
(function main() {
|
||||
// lazy load playlist images
|
||||
// copied almost verbatim from
|
||||
@ -296,6 +285,7 @@
|
||||
observer.observe(img);
|
||||
});
|
||||
}());
|
||||
// @license-end
|
||||
</script>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user