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

17 files changed, 636 insertions, 110 deletions

diff --git a/youtube/__init__.py b/youtube/__init__.py
index f935f1e..ff5c984 100644
--- a/youtube/__init__.py
+++ b/youtube/__init__.py
@@ -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',
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;
+    }
 }
diff --git a/youtube/templates/base.html b/youtube/templates/base.html
index bb7437d..d410e0d 100644
--- a/youtube/templates/base.html
+++ b/youtube/templates/base.html
@@ -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>
 
diff --git a/youtube/templates/licenses.html b/youtube/templates/licenses.html
new file mode 100644
index 0000000..dc883a8
--- /dev/null
+++ b/youtube/templates/licenses.html
@@ -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 %}
diff --git a/youtube/templates/watch.html b/youtube/templates/watch.html
index dbc7e83..60fd941 100644
--- a/youtube/templates/watch.html
+++ b/youtube/templates/watch.html
@@ -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>