heckyel/yt-local
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Only display local playlist controls in header on pages with videos

Browse Source
This commit is contained in:
James Taylor 2019-09-15 14:59:19 -07:00
parent 57c37a57e9
commit 33a8898656
1 changed files with 75 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

148
youtube/templates/base.html
View File

@ -93,85 +93,87 @@
</div> </div>
</form> </form>
<form id="playlist-edit" action="/youtube.com/edit_playlist" method="post" target="_self"> {% if header_playlist_names is defined %}
<input name="playlist_name" id="playlist-name-selection" list="playlist-options" type="text"> <form id="playlist-edit" action="/youtube.com/edit_playlist" method="post" target="_self">
<datalist id="playlist-options"> <input name="playlist_name" id="playlist-name-selection" list="playlist-options" type="text">
{% for playlist_name in header_playlist_names %} <datalist id="playlist-options">
<option value="{{ playlist_name }}">{{ playlist_name }}</option> {% for playlist_name in header_playlist_names %}
{% endfor %} <option value="{{ playlist_name }}">{{ playlist_name }}</option>
</datalist> {% endfor %}
<button type="submit" id="playlist-add-button" name="action" value="add">Add to playlist</button> </datalist>
<button type="reset" id="item-selection-reset">Clear selection</button> <button type="submit" id="playlist-add-button" name="action" value="add">Add to playlist</button>
</form> <button type="reset" id="item-selection-reset">Clear selection</button>
<script> </form>
/* 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. */ <script>
var playlistAddForm = document.getElementById('playlist-edit'); /* 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){ function setStyle(element, property, value){
element.style[property] = value; element.style[property] = value;
} }
function removeMessage(messageBox){ function removeMessage(messageBox){
messageBox.parentNode.removeChild(messageBox); messageBox.parentNode.removeChild(messageBox);
} }
function displayMessage(text, error=false){ function displayMessage(text, error=false){
let currentMessageBox = document.getElementById('message-box'); let currentMessageBox = document.getElementById('message-box');
if(currentMessageBox !== null){ if(currentMessageBox !== null){
currentMessageBox.parentNode.removeChild(currentMessageBox); 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);
} }
}); let messageBox = document.createElement('div');
if(error){
XHR.addEventListener('error', function(event){ messageBox.setAttribute('role', 'alert');
if(event.target.status == 0){
displayMessage('XHR failed: Check that XHR requests are allowed', true);
} else { } else {
displayMessage('XHR failed: Unknown error', true); 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>
XHR.open('POST', playlistAddForm.getAttribute('action')); {% endif %}
XHR.send(FD);
}
playlistAddForm.addEventListener('submit', function(event){
event.preventDefault();
sendData();
});
</script>
</header> </header>
<main> <main>
{% block main %} {% block main %}