autoplay-toggle: use label tag

from upstream:

<label> is semantic and makes clicking the text activate in checkbox

2 files changed, 24 insertions, 8 deletions

diff --git a/youtube/static/watch.css b/youtube/static/watch.css
index cedc43e..d9487bf 100644
--- a/youtube/static/watch.css
+++ b/youtube/static/watch.css
@@ -346,7 +346,6 @@ label[for=options-toggle-cbox] {
 .side-videos { grid-area: side-videos; }
 
 .side-videos .related-autoplay {
-    list-style: none;
     display: grid;
     grid-template-columns: repeat(2, auto);
     justify-content: start;
diff --git a/youtube/templates/watch.html b/youtube/templates/watch.html
index 3b2c2da..9a80c68 100644
--- a/youtube/templates/watch.html
+++ b/youtube/templates/watch.html
@@ -154,7 +154,7 @@
                     <div class="playlist-header">
                         <a href="{{ playlist['url'] }}" title="{{ playlist['title'] }}"><h3>{{ playlist['title'] }}</h3></a>
                         <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 %}
                                 <li>[Error!]/{{ playlist['video_count'] }}</li>
                             {% else %}
@@ -214,7 +214,7 @@
                     {% endif %}
                 </div>
             {% 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 %}
 
             {% if settings.related_videos_mode != 0 or playlist %}
@@ -252,18 +252,34 @@
                      autoplayEnabled = Number(cookieValue);
                  }
 
-                 // check the checkbox if autoplay is on
-                 let checkbox = document.querySelector('#autoplay-toggle');
+                 // check the autoplay checkbox if autoplay is on
+                 {% if isPlaylist %}
+                 let PlaylistAutoplayCheck = document.getElementById('playlist-autoplay-toggle');
+                 if(autoplayEnabled){
+                     PlaylistAutoplayCheck.checked = true;
+                 }
+                 {% else %}
+                 let RelatedAutoplayCheck = document.getElementById('related-autoplay-toggle');
                  if(autoplayEnabled){
-                     checkbox.checked = true;
+                     RelatedAutoplayCheck.checked = true;
                  }
+                 {% endif %}
 
                  // listen for checkbox to turn autoplay on and off
                  let cookie = 'autoplay'
                  {% if isPlaylist %}
                  cookie += '_' + playlist_id;
-                 {% endif %}
-                 checkbox.addEventListener( 'change', function() {
+                 PlaylistAutoplayCheck.addEventListener( 'change', function() {
+                     if(this.checked) {
+                         autoplayEnabled = 1;
+                         document.cookie = cookie + '=1; SameSite=Strict';
+                     } else {
+                         autoplayEnabled = 0;
+                         document.cookie = cookie + '=0; SameSite=Strict';
+                     }
+                 });
+                 {% else %}
+                 RelatedAutoplayCheck.addEventListener( 'change', function() {
                      if(this.checked) {
                          autoplayEnabled = 1;
                          document.cookie = cookie + '=1; SameSite=Strict';
@@ -272,6 +288,7 @@
                          document.cookie = cookie + '=0; SameSite=Strict';
                      }
                  });
+                 {% endif %}
 
                  const vid = document.getElementById('js-video-player');
                  if(!playability_error){