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

autoplay-toggle: use label tag

Browse Source 
from upstream:

<label> is semantic and makes clicking the text activate in checkbox
This commit is contained in:
Jesús 2021-06-29 19:07:40 -05:00
parent 8d45ca855a
commit c6fe980a7a
No known key found for this signature in database
GPG Key ID: F6EE7BC59A315766
2 changed files with 24 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
youtube/static/watch.css
View File

@ -346,7 +346,6 @@ label[for=options-toggle-cbox] {
.side-videos { grid-area: side-videos; } .side-videos { grid-area: side-videos; }
.side-videos .related-autoplay { .side-videos .related-autoplay {
list-style: none;
display: grid; display: grid;
grid-template-columns: repeat(2, auto); grid-template-columns: repeat(2, auto);
justify-content: start; justify-content: start;

31
youtube/templates/watch.html
View File

@ -154,7 +154,7 @@
<div class="playlist-header"> <div class="playlist-header">
<a href="{{ playlist['url'] }}" title="{{ playlist['title'] }}"><h3>{{ playlist['title'] }}</h3></a> <a href="{{ playlist['url'] }}" title="{{ playlist['title'] }}"><h3>{{ playlist['title'] }}</h3></a>
<ul class="playlist-metadata"> <ul class="playlist-metadata">
<li>Autoplay: <input type="checkbox" id="autoplay-toggle"></li> <li><label for="playlist-autoplay-toggle">Autoplay: </label><input type="checkbox" id="playlist-autoplay-toggle"></li>
{% if playlist['current_index'] is none %} {% if playlist['current_index'] is none %}
<li>[Error!]/{{ playlist['video_count'] }}</li> <li>[Error!]/{{ playlist['video_count'] }}</li>
{% else %} {% else %}
@ -214,7 +214,7 @@
{% endif %} {% endif %}
</div> </div>
{% elif settings.related_videos_mode != 0 %} {% elif settings.related_videos_mode != 0 %}
<li class="related-autoplay">Autoplay: <input type="checkbox" id="autoplay-toggle"></li> <div class="related-autoplay"><label for="related-autoplay-toggle">Autoplay: </label><input type="checkbox" id="related-autoplay-toggle"></div>
{% endif %} {% endif %}
{% if settings.related_videos_mode != 0 or playlist %} {% if settings.related_videos_mode != 0 or playlist %}
@ -252,18 +252,24 @@
autoplayEnabled = Number(cookieValue); autoplayEnabled = Number(cookieValue);
} }
// check the checkbox if autoplay is on // check the autoplay checkbox if autoplay is on
let checkbox = document.querySelector('#autoplay-toggle'); {% if isPlaylist %}
let PlaylistAutoplayCheck = document.getElementById('playlist-autoplay-toggle');
if(autoplayEnabled){ if(autoplayEnabled){
checkbox.checked = true; PlaylistAutoplayCheck.checked = true;
} }
{% else %}
let RelatedAutoplayCheck = document.getElementById('related-autoplay-toggle');
if(autoplayEnabled){
RelatedAutoplayCheck.checked = true;
}
{% endif %}
// listen for checkbox to turn autoplay on and off // listen for checkbox to turn autoplay on and off
let cookie = 'autoplay' let cookie = 'autoplay'
{% if isPlaylist %} {% if isPlaylist %}
cookie += '_' + playlist_id; cookie += '_' + playlist_id;
{% endif %} PlaylistAutoplayCheck.addEventListener( 'change', function() {
checkbox.addEventListener( 'change', function() {
if(this.checked) { if(this.checked) {
autoplayEnabled = 1; autoplayEnabled = 1;
document.cookie = cookie + '=1; SameSite=Strict'; document.cookie = cookie + '=1; SameSite=Strict';
@ -272,6 +278,17 @@
document.cookie = cookie + '=0; SameSite=Strict'; document.cookie = cookie + '=0; SameSite=Strict';
} }
}); });
{% else %}
RelatedAutoplayCheck.addEventListener( 'change', function() {
if(this.checked) {
autoplayEnabled = 1;
document.cookie = cookie + '=1; SameSite=Strict';
} else {
autoplayEnabled = 0;
document.cookie = cookie + '=0; SameSite=Strict';
}
});
{% endif %}
const vid = document.getElementById('js-video-player'); const vid = document.getElementById('js-video-player');
if(!playability_error){ if(!playability_error){