diff options
Diffstat (limited to 'youtube/templates/base.html')
| -rw-r--r-- | youtube/templates/base.html | 397 |
1 files changed, 216 insertions, 181 deletions
diff --git a/youtube/templates/base.html b/youtube/templates/base.html index 3d9f1e9..4d03c05 100644 --- a/youtube/templates/base.html +++ b/youtube/templates/base.html @@ -1,203 +1,238 @@ <!DOCTYPE html> <html> <head> - <meta charset="utf-8"> + <meta charset="UTF-8"/> + <meta name="viewport" content="width=device-width, initial-scale=1"/> + <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline'; media-src 'self' https://*.googlevideo.com; {{ "img-src 'self' https://*.googleusercontent.com https://*.ggpht.com https://*.ytimg.com;" if not settings.proxy_images else "" }}"> <title>{{ page_title }}</title> - <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline'; media-src 'self' https://*.googlevideo.com; - {{ "img-src 'self' https://*.googleusercontent.com https://*.ggpht.com https://*.ytimg.com;" if not settings.proxy_images else "" }}"> - <link href="{{ theme_path }}" type="text/css" rel="stylesheet"> - <link href="/youtube.com/shared.css" type="text/css" rel="stylesheet"> - <link href="/youtube.com/static/comments.css" type="text/css" rel="stylesheet"> - <link href="/youtube.com/static/favicon.ico" type="image/x-icon" rel="icon"> - <link title="Youtube local" href="/youtube.com/opensearch.xml" rel="search" type="application/opensearchdescription+xml"> - <style type="text/css"> -{% block style %} -{{ style }} -{% endblock %} - </style> + <link title="Youtube local" href="/youtube.com/opensearch.xml" rel="search" type="application/opensearchdescription+xml"/> + <link href="/youtube.com/static/favicon.ico" type="image/x-icon" rel="icon"/> + <link href="/youtube.com/static/normalize.css" rel="stylesheet"/> + <link href="{{ theme_path }}" rel="stylesheet"/> + {% block style %} + {{ style }} + {% endblock %} </head> - <body> - <header> - <a href="/youtube.com" id="home-link">Home</a> - <form id="site-search" action="/youtube.com/search"> - <input type="search" name="query" class="search-box" value="{{ search_box_value }}" - {{ "autofocus" if request.path == "/" else "" }}> - <button type="submit" value="Search" class="search-button">Search</button> - <div class="dropdown"> - <button class="dropdown-label">Options</button> - <div class="css-sucks"> - <div class="dropdown-content"> - <h3>Sort by</h3> - <input type="radio" id="sort_relevance" name="sort" value="0"> - <label for="sort_relevance">Relevance</label> - - <input type="radio" id="sort_upload_date" name="sort" value="2"> - <label for="sort_upload_date">Upload date</label> - - <input type="radio" id="sort_view_count" name="sort" value="3"> - <label for="sort_view_count">View count</label> - - <input type="radio" id="sort_rating" name="sort" value="1"> - <label for="sort_rating">Rating</label> - - - <h3>Upload date</h3> - <input type="radio" id="time_any" name="time" value="0"> - <label for="time_any">Any</label> - - <input type="radio" id="time_last_hour" name="time" value="1"> - <label for="time_last_hour">Last hour</label> - - <input type="radio" id="time_today" name="time" value="2"> - <label for="time_today">Today</label> - - <input type="radio" id="time_this_week" name="time" value="3"> - <label for="time_this_week">This week</label> - - <input type="radio" id="time_this_month" name="time" value="4"> - <label for="time_this_month">This month</label> - - <input type="radio" id="time_this_year" name="time" value="5"> - <label for="time_this_year">This year</label> - <h3>Type</h3> - <input type="radio" id="type_any" name="type" value="0"> - <label for="type_any">Any</label> - - <input type="radio" id="type_video" name="type" value="1"> - <label for="type_video">Video</label> - - <input type="radio" id="type_channel" name="type" value="2"> - <label for="type_channel">Channel</label> - - <input type="radio" id="type_playlist" name="type" value="3"> - <label for="type_playlist">Playlist</label> - - <input type="radio" id="type_movie" name="type" value="4"> - <label for="type_movie">Movie</label> - - <input type="radio" id="type_show" name="type" value="5"> - <label for="type_show">Show</label> - - - <h3>Duration</h3> - <input type="radio" id="duration_any" name="duration" value="0"> - <label for="duration_any">Any</label> + <body> + <header class="header"> + <nav class="home"> + <a href="/youtube.com" id="home-link">YouTube Local</a> + </nav> + <form class="form" id="site-search" action="/youtube.com/search"> + <input type="search" name="query" class="search-box" value="{{ search_box_value }}" + {{ "autofocus" if request.path == "/" else "" }} placeholder="Type to search..."> + <button type="submit" value="Search" class="search-button">Search</button> + <!-- options --> + <div class="dropdown"> + <!-- hidden box --> + <input id="options-toggle-cbox" class="opt-box" role="button" type="checkbox"> + <!-- end hidden box --> + <label class="dropdown-label" for="options-toggle-cbox">Options</label> + <div class="dropdown-content"> + <h3>Sort by</h3> + <div class="option"> + <input type="radio" id="sort_relevance" name="sort" value="0"> + <label for="sort_relevance">Relevance</label> + </div> + <div class="option"> + <input type="radio" id="sort_upload_date" name="sort" value="2"> + <label for="sort_upload_date">Upload date</label> + </div> + <div class="option"> + <input type="radio" id="sort_view_count" name="sort" value="3"> + <label for="sort_view_count">View count</label> + </div> + <div class="option"> + <input type="radio" id="sort_rating" name="sort" value="1"> + <label for="sort_rating">Rating</label> + </div> - <input type="radio" id="duration_short" name="duration" value="1"> - <label for="duration_short">Short (< 4 minutes)</label> + <h3>Upload date</h3> + <div class="option"> + <input type="radio" id="time_any" name="time" value="0"> + <label for="time_any">Any</label> + </div> + <div class="option"> + <input type="radio" id="time_last_hour" name="time" value="1"> + <label for="time_last_hour">Last hour</label> + </div> + <div class="option"> + <input type="radio" id="time_today" name="time" value="2"> + <label for="time_today">Today</label> + </div> + <div class="option"> + <input type="radio" id="time_this_week" name="time" value="3"> + <label for="time_this_week">This week</label> + </div> + <div class="option"> + <input type="radio" id="time_this_month" name="time" value="4"> + <label for="time_this_month">This month</label> + </div> + <div class="option"> + <input type="radio" id="time_this_year" name="time" value="5"> + <label for="time_this_year">This year</label> + </div> - <input type="radio" id="duration_long" name="duration" value="2"> - <label for="duration_long">Long (> 20 minutes)</label> + <h3>Type</h3> + <div class="option"> + <input type="radio" id="type_any" name="type" value="0"> + <label for="type_any">Any</label> + </div> + <div class="option"> + <input type="radio" id="type_video" name="type" value="1"> + <label for="type_video">Video</label> + </div> + <div class="option"> + <input type="radio" id="type_channel" name="type" value="2"> + <label for="type_channel">Channel</label> + </div> + <div class="option"> + <input type="radio" id="type_playlist" name="type" value="3"> + <label for="type_playlist">Playlist</label> + </div> + <div class="option"> + <input type="radio" id="type_movie" name="type" value="4"> + <label for="type_movie">Movie</label> + </div> + <div class="option"> + <input type="radio" id="type_show" name="type" value="5"> + <label for="type_show">Show</label> + </div> - </div> + <h3>Duration</h3> + <div class="option"> + <input type="radio" id="duration_any" name="duration" value="0"> + <label for="duration_any">Any</label> + </div> + <div class="option"> + <input type="radio" id="duration_short" name="duration" value="1"> + <label for="duration_short">Short (< 4 minutes)</label> + </div> + <div class="option"> + <input type="radio" id="duration_long" name="duration" value="2"> + <label for="duration_long">Long (> 20 minutes)</label> </div> </div> - </form> + </div> + </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 %} + <form class="playlist" id="playlist-edit" action="/youtube.com/edit_playlist" method="post" target="_self"> + <input class="play-box" name="playlist_name" id="playlist-name-selection" list="playlist-options" type="search" placeholder="I added your playlist..."> + <datalist class="play-hidden" 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> + <button class="play-add" type="submit" id="playlist-add-button" name="action" value="add">+List</button> + <div class="play-clean"> + <button type="reset" id="item-selection-reset">Clear selection</button> + </div> </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); - - 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); + (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> {% endif %} + </header> - <main> -{% block main %} -{{ main }} -{% endblock %} + <main class="main"> + + {% block main %} + {{ main }} + {% endblock %} + </main> + <footer class="footer"> + <p>This site is Free/Libre Software</p> + <p>Current version: 3304bab @ master</p> + </footer> </body> + </html> |