General theme: add license and add URL source code in footer

13 files changed, 556 insertions, 0 deletions

diff --git a/youtube/static/channel.css b/youtube/static/channel.css
index 467bb0d..aefd769 100644
--- a/youtube/static/channel.css
+++ b/youtube/static/channel.css
@@ -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;
+    }
 }
diff --git a/youtube/static/comments.css b/youtube/static/comments.css
index 3d8ff25..eff4c73 100644
--- a/youtube/static/comments.css
+++ b/youtube/static/comments.css
@@ -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;
+    }
 }
diff --git a/youtube/static/home.css b/youtube/static/home.css
index 9bea07c..7138178 100644
--- a/youtube/static/home.css
+++ b/youtube/static/home.css
@@ -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;
+    }
 }
diff --git a/youtube/static/js/playlistadd.js b/youtube/static/js/playlistadd.js
new file mode 100644
index 0000000..0a2a027
--- /dev/null
+++ b/youtube/static/js/playlistadd.js
@@ -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);
+}());
diff --git a/youtube/static/js/speedyplay.js b/youtube/static/js/speedyplay.js
new file mode 100644
index 0000000..58b5d33
--- /dev/null
+++ b/youtube/static/js/speedyplay.js
@@ -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;
+            }
+        }
+    });
+}());
diff --git a/youtube/static/license.css b/youtube/static/license.css
new file mode 100644
index 0000000..4cb31a4
--- /dev/null
+++ b/youtube/static/license.css
@@ -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;
+    }
+}
diff --git a/youtube/static/local_playlist.css b/youtube/static/local_playlist.css
index bd68c5b..1f6a654 100644
--- a/youtube/static/local_playlist.css
+++ b/youtube/static/local_playlist.css
@@ -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;
+    }
 }
diff --git a/youtube/static/playlist.css b/youtube/static/playlist.css
index 8b75a7d..6eb6589 100644
--- a/youtube/static/playlist.css
+++ b/youtube/static/playlist.css
@@ -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;
+    }
 }
diff --git a/youtube/static/search.css b/youtube/static/search.css
index 6c463bc..c2e2acc 100644
--- a/youtube/static/search.css
+++ b/youtube/static/search.css
@@ -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;
+    }
 }
diff --git a/youtube/static/settings.css b/youtube/static/settings.css
index 2e72505..e358daa 100644
--- a/youtube/static/settings.css
+++ b/youtube/static/settings.css
@@ -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;
+    }
 }
diff --git a/youtube/static/subscription.css b/youtube/static/subscription.css
index 6fbe34a..fe40ec1 100644
--- a/youtube/static/subscription.css
+++ b/youtube/static/subscription.css
@@ -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;
+    }
 }
diff --git a/youtube/static/subscription_manager.css b/youtube/static/subscription_manager.css
index a7d9780..48ce2ea 100644
--- a/youtube/static/subscription_manager.css
+++ b/youtube/static/subscription_manager.css
@@ -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;
+    }
 }
diff --git a/youtube/static/watch.css b/youtube/static/watch.css
index 8e3e2f2..e448e39 100644
--- a/youtube/static/watch.css
+++ b/youtube/static/watch.css
@@ -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;
+    }
 }