diff options
| -rw-r--r-- | youtube/static/shared.css | 12 | ||||
| -rw-r--r-- | youtube/templates/base.html | 71 |
2 files changed, 82 insertions, 1 deletions
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 %} |