From 57c37a57e9c65b16ac4a9bafc4ce45b7dd82ac26 Mon Sep 17 00:00:00 2001
From: James Taylor <user234683@users.noreply.github.com>
Date: Sun, 15 Sep 2019 14:55:57 -0700
Subject: Add optional javascript for adding videos to playlists without the
 browser cancelling loading of the video, and to display a status message

---
 youtube/static/shared.css   | 12 ++++++++
 youtube/templates/base.html | 71 ++++++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 82 insertions(+), 1 deletion(-)
diff --git a/youtube/static/shared.css b/youtube/static/shared.css
index 72d290a..3ce7d4a 100644
--- a/youtube/static/shared.css
+++ b/youtube/static/shared.css
@@ -107,6 +107,18 @@ body{
         flex-grow: 1;
         padding-bottom: 20px;
     }
+        #message-box{
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            border-style: outset;
+            padding: 20px;
+            background-color: var(--interface-color);
+            opacity: 0;
+            transition-property: opacity;
+            transition-duration: 0.3s;
+        }
 
 
 .dropdown{
diff --git a/youtube/templates/base.html b/youtube/templates/base.html
index 9127efa..79bff96 100644
--- a/youtube/templates/base.html
+++ b/youtube/templates/base.html
@@ -3,7 +3,7 @@
     <head>
         <meta charset="utf-8">
         <title>{{ page_title }}</title>
-        <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline'; script-src 'none'; media-src 'self' https://*.googlevideo.com">
+        <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline'; media-src 'self' https://*.googlevideo.com">
         <link href="{{ theme_path }}" type="text/css" rel="stylesheet">
         <link href="/youtube.com/static/shared.css" type="text/css" rel="stylesheet">
         <link href="/youtube.com/static/comments.css" type="text/css" rel="stylesheet">
@@ -103,6 +103,75 @@
                 <button type="submit" id="playlist-add-button" name="action" value="add">Add to playlist</button>
                 <button type="reset" id="item-selection-reset">Clear selection</button>
             </form>
+            <script>
+                /* 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. */
+                var 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(){
+                    var XHR = new XMLHttpRequest();
+                    var FD = new FormData(playlistAddForm);
+                    // 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', function(event){
+                    event.preventDefault();
+                    sendData();
+                });
+            </script>
         </header>
         <main>
 {% block main %}
-- 
cgit v1.2.3

