diff options
Diffstat (limited to 'youtube/templates')
| -rw-r--r-- | youtube/templates/base.html | 100 | ||||
| -rw-r--r-- | youtube/templates/local_playlists_list.html | 17 | ||||
| -rw-r--r-- | youtube/templates/subscription_manager.html | 2 | ||||
| -rw-r--r-- | youtube/templates/watch.html | 2 |
4 files changed, 109 insertions, 12 deletions
diff --git a/youtube/templates/base.html b/youtube/templates/base.html index 9127efa..554e116 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"> @@ -93,16 +93,94 @@ </div> </form> - <form id="playlist-edit" action="/youtube.com/edit_playlist" method="post" target="_self"> - <input name="playlist_name" id="playlist-name-selection" list="playlist-options" type="text"> - <datalist id="playlist-options"> - {% for playlist_name in header_playlist_names %} - <option value="{{ playlist_name }}">{{ playlist_name }}</option> - {% endfor %} - </datalist> - <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> + {% if header_playlist_names is defined %} + <form id="playlist-edit" action="/youtube.com/edit_playlist" method="post" target="_self"> + <input name="playlist_name" id="playlist-name-selection" list="playlist-options" type="text"> + <datalist id="playlist-options"> + {% for playlist_name in header_playlist_names %} + <option value="{{ playlist_name }}">{{ playlist_name }}</option> + {% endfor %} + </datalist> + <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(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); + + // 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> + {% endif %} </header> <main> {% block main %} diff --git a/youtube/templates/local_playlists_list.html b/youtube/templates/local_playlists_list.html index 9b5f510..a9fccff 100644 --- a/youtube/templates/local_playlists_list.html +++ b/youtube/templates/local_playlists_list.html @@ -1,6 +1,23 @@ {% set page_title = 'Local playlists' %} {% extends "base.html" %} +{% block style %} +main{ + display: flex; + justify-content: center; +} + ul{ + background-color: var(--interface-color); + margin-top: 20px; + padding: 20px; + min-width: 400px; + align-self: start; + } + li{ + margin-bottom: 10px; + } +{% endblock style %} + {% block main %} <ul> {% for playlist_name, playlist_url in playlists %} diff --git a/youtube/templates/subscription_manager.html b/youtube/templates/subscription_manager.html index c9683ce..34d38d0 100644 --- a/youtube/templates/subscription_manager.html +++ b/youtube/templates/subscription_manager.html @@ -61,6 +61,8 @@ display:flex; margin-bottom: 10px; break-inside:avoid; + } + .sub-list-item:not(.muted){ background-color: var(--interface-color); } .tag-list{ diff --git a/youtube/templates/watch.html b/youtube/templates/watch.html index 5bd2a25..a06e895 100644 --- a/youtube/templates/watch.html +++ b/youtube/templates/watch.html @@ -35,7 +35,7 @@ width: {{ theater_video_target_width }}px; max-height: {{ video_height }}px; margin-bottom: 10px; - background-color: var(--background-color); + background-color: var(--video-background-color); } .related-videos-outer{ grid-row: 2 /span 3; |