Fix: Menu does not scroll when it contains many items

libretube-theme/static/modules/plyr/plyr.js

@@ -2551,7 +2551,7 @@ typeof navigator === "object" && (function (global, factory) {
 
 
       var type = 'captions';
-      var list = this.elements.settings.panels.captions.querySelector('[role="menu"]');
+      var list = this.elements.settings.panels.captions.querySelector('[role="menucaptions"]');
       var tracks = captions.getTracks.call(this);
       var toggle = Boolean(tracks.length); // Toggle the pane and tab
 
@@ -2998,6 +2998,10 @@ typeof navigator === "object" && (function (global, factory) {
 
             pane.appendChild(createElement('div', {
               role: 'menu'
+            })); // Menu Captions
+
+            pane.appendChild(createElement('div', {
+              role: 'menucaptions'
             }));
             inner.appendChild(pane);
             _this10.elements.settings.buttons[type] = menuItem;
@@ -3648,7 +3652,7 @@ typeof navigator === "object" && (function (global, factory) {
     iconPrefix: 'plyr',
     iconUrl: '/theme/modules/plyr/plyr.svg',
     // Blank video (used to prevent errors on source change)
-    blankVideo: '/theme/modules/plyr/blank.mp4',
+    blankVideo: '/theme/modules/plyr/blank.webm',
     // Quality default
     quality: {
       default: 576,
@@ -4655,16 +4659,15 @@ typeof navigator === "object" && (function (global, factory) {
               // L key
               player.loop = !player.loop;
               break;
-
+            // case 73:
-            /* case 73:
+            //     this.setLoop('start');
-                this.setLoop('start');
+            //     break;
-                break;
+            // case 76:
-             case 76:
+            //     this.setLoop();
-                this.setLoop();
+            //     break;
-                break;
+            // case 79:
-             case 79:
+            //     this.setLoop('end');
-                this.setLoop('end');
+            //     break;
-                break; */
 
             default:
               break;

libretube-theme/static/modules/plyr/plyr.mjs

@@ -2545,7 +2545,7 @@ var controls = {
 
 
     var type = 'captions';
-    var list = this.elements.settings.panels.captions.querySelector('[role="menu"]');
+    var list = this.elements.settings.panels.captions.querySelector('[role="menucaptions"]');
     var tracks = captions.getTracks.call(this);
     var toggle = Boolean(tracks.length); // Toggle the pane and tab
 
@@ -2992,6 +2992,10 @@ var controls = {
 
           pane.appendChild(createElement('div', {
             role: 'menu'
+          })); // Menu Captions
+
+          pane.appendChild(createElement('div', {
+            role: 'menucaptions'
           }));
           inner.appendChild(pane);
           _this10.elements.settings.buttons[type] = menuItem;
@@ -3642,7 +3646,7 @@ var defaults$1 = {
   iconPrefix: 'plyr',
   iconUrl: '/theme/modules/plyr/plyr.svg',
   // Blank video (used to prevent errors on source change)
-  blankVideo: '/theme/modules/plyr/blank.mp4',
+  blankVideo: '/theme/modules/plyr/blank.webm',
   // Quality default
   quality: {
     default: 576,
@@ -4649,16 +4653,15 @@ function () {
             // L key
             player.loop = !player.loop;
             break;
-
+          // case 73:
-          /* case 73:
+          //     this.setLoop('start');
-              this.setLoop('start');
+          //     break;
-              break;
+          // case 76:
-           case 76:
+          //     this.setLoop();
-              this.setLoop();
+          //     break;
-              break;
+          // case 79:
-           case 79:
+          //     this.setLoop('end');
-              this.setLoop('end');
+          //     break;
-              break; */
 
           default:
             break;

libretube-theme/static/modules/plyr/plyr.polyfilled.js

@@ -8356,7 +8356,7 @@ typeof navigator === "object" && (function (global, factory) {
 
 
       var type = 'captions';
-      var list = this.elements.settings.panels.captions.querySelector('[role="menu"]');
+      var list = this.elements.settings.panels.captions.querySelector('[role="menucaptions"]');
       var tracks = captions.getTracks.call(this);
       var toggle = Boolean(tracks.length); // Toggle the pane and tab
 
@@ -8803,6 +8803,10 @@ typeof navigator === "object" && (function (global, factory) {
 
             pane.appendChild(createElement('div', {
               role: 'menu'
+            })); // Menu Captions
+
+            pane.appendChild(createElement('div', {
+              role: 'menucaptions'
             }));
             inner.appendChild(pane);
             _this10.elements.settings.buttons[type] = menuItem;
@@ -9453,7 +9457,7 @@ typeof navigator === "object" && (function (global, factory) {
     iconPrefix: 'plyr',
     iconUrl: '/theme/modules/plyr/plyr.svg',
     // Blank video (used to prevent errors on source change)
-    blankVideo: '/theme/modules/plyr/blank.mp4',
+    blankVideo: '/theme/modules/plyr/blank.webm',
     // Quality default
     quality: {
       default: 576,
@@ -10472,16 +10476,15 @@ typeof navigator === "object" && (function (global, factory) {
               // L key
               player.loop = !player.loop;
               break;
-
+            // case 73:
-            /* case 73:
+            //     this.setLoop('start');
-                this.setLoop('start');
+            //     break;
-                break;
+            // case 76:
-             case 76:
+            //     this.setLoop();
-                this.setLoop();
+            //     break;
-                break;
+            // case 79:
-             case 79:
+            //     this.setLoop('end');
-                this.setLoop('end');
+            //     break;
-                break; */
 
             default:
               break;

libretube-theme/static/modules/plyr/plyr.polyfilled.mjs

@@ -8350,7 +8350,7 @@ var controls = {
 
 
     var type = 'captions';
-    var list = this.elements.settings.panels.captions.querySelector('[role="menu"]');
+    var list = this.elements.settings.panels.captions.querySelector('[role="menucaptions"]');
     var tracks = captions.getTracks.call(this);
     var toggle = Boolean(tracks.length); // Toggle the pane and tab
 
@@ -8797,6 +8797,10 @@ var controls = {
 
           pane.appendChild(createElement('div', {
             role: 'menu'
+          })); // Menu Captions
+
+          pane.appendChild(createElement('div', {
+            role: 'menucaptions'
           }));
           inner.appendChild(pane);
           _this10.elements.settings.buttons[type] = menuItem;
@@ -9447,7 +9451,7 @@ var defaults$1 = {
   iconPrefix: 'plyr',
   iconUrl: '/theme/modules/plyr/plyr.svg',
   // Blank video (used to prevent errors on source change)
-  blankVideo: '/theme/modules/plyr/blank.mp4',
+  blankVideo: '/theme/modules/plyr/blank.webm',
   // Quality default
   quality: {
     default: 576,
@@ -10466,16 +10470,15 @@ function () {
             // L key
             player.loop = !player.loop;
             break;
-
+          // case 73:
-          /* case 73:
+          //     this.setLoop('start');
-              this.setLoop('start');
+          //     break;
-              break;
+          // case 76:
-           case 76:
+          //     this.setLoop();
-              this.setLoop();
+          //     break;
-              break;
+          // case 79:
-           case 79:
+          //     this.setLoop('end');
-              this.setLoop('end');
+          //     break;
-              break; */
 
           default:
             break;

libretube-theme/templates/article.html

@@ -261,7 +261,7 @@
 {% block extend_js %}
     <!-- Plyr -->
     <script src="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/modules/plyr/plyr.min.js"
-            integrity="sha512-p4TVMvzkt8tG2YGY+x9ES/2cC11GJXCXCqRLWA9wLcMaXwpdMHop16LdU42GFzXmodvkRWET8wYY06HiDDIPdA=="
+            integrity="sha512-OuNuHhTUuTAbvDItUy1JPT/L9bBLBK71KDEgEiCUyzyZtVCKMALXfkyi5lQV30FoadAZoSlLoHxXeXQUGxoduw=="
             crossorigin="anonymous"></script>
     <script src="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/js/play.js"
             integrity="sha512-OTfMWEmqrlXA9I5xteZxMa4a1DXs+ocTB5E+9S3TF0asQFqsDltZ8q3AxoMPXLJSW5Bk6ysA/16bIwME7w8CnA=="