diff options
| author | James Taylor <user234683@users.noreply.github.com> | 2019-09-15 14:55:57 -0700 |
|---|---|---|
| committer | James Taylor <user234683@users.noreply.github.com> | 2019-09-15 14:55:57 -0700 |
| commit | 57c37a57e9c65b16ac4a9bafc4ce45b7dd82ac26 (patch) | |
| tree | 5b9e69243f7742d0e202d4f27e0382bf5eda5e78 | |
| parent | f48de1aad2a3aafd6ed5a721813d629429da3425 (diff) | |
| download | yt-local-57c37a57e9c65b16ac4a9bafc4ce45b7dd82ac26.tar.lz yt-local-57c37a57e9c65b16ac4a9bafc4ce45b7dd82ac26.tar.xz yt-local-57c37a57e9c65b16ac4a9bafc4ce45b7dd82ac26.zip | |
Add optional javascript for adding videos to playlists without the browser cancelling loading of the video, and to display a status message
| -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 %} |