243 lines
13 KiB
HTML
243 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<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>
|
|
<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 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>
|
|
|
|
<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>
|
|
|
|
<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>
|
|
|
|
<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>
|
|
</div>
|
|
</form>
|
|
|
|
{% if header_playlist_names is defined %}
|
|
<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 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>
|
|
(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 class="main">
|
|
|
|
{% block main %}
|
|
{{ main }}
|
|
{% endblock %}
|
|
|
|
</main>
|
|
<footer class="footer">
|
|
<p>This site is Free/Libre Software</p>
|
|
{% if current_commit and current_version %}
|
|
<p>Current version: {{ current_version }}-{{ current_commit }} @ {{ current_branch }}</p>
|
|
{% else %}
|
|
<p>Current version: {{ current_version }}</p>
|
|
{% endif %}
|
|
</footer>
|
|
</body>
|
|
|
|
</html>
|