Integrate quality selection into Plyr

Signed-off-by: Jesús <heckyel@hyperbola.info>

youtube/static/js/plyr-start.js

@@ -11,6 +11,64 @@ default:
   captionsActive = false;
 }
 
+var qualityOptions = [];
+var qualityDefault;
+for (var src of data['uni_sources']) {
+  qualityOptions.push(src.quality_string)
+}
+for (var src of data['pair_sources']) {
+  qualityOptions.push(src[0].quality_string)
+}
+if (data['using_pair_sources'])
+  qualityDefault = data['pair_sources'][data['pair_idx']][0].quality_string;
+else if (data['uni_sources'].length != 0)
+  qualityDefault = data['uni_sources'][data['uni_idx']].quality_string;
+else
+  qualityDefault = 'None';
+
+
+
+// Fix plyr refusing to work with qualities that are strings
+Object.defineProperty(Plyr.prototype, 'quality', {
+  set: function(input) {
+    const config = this.config.quality;
+    const options = this.options.quality;
+
+    if (!options.length) {
+      return;
+    }
+
+    // removing this line:
+    //let quality = [!is.empty(input) && Number(input), this.storage.get('quality'), config.selected, config.default].find(is.number);
+    // replacing with:
+    quality = input;
+    let updateStorage = true;
+
+    if (!options.includes(quality)) {
+      // Plyr sets quality to null at startup, resulting in the erroneous
+      // calling of this setter function with input = null, and the
+      // commented out code below would set the quality to something
+      // unrelated at startup. Comment out and just return.
+      return;
+      /*const value = closest(options, quality);
+        this.debug.warn(`Unsupported quality option: ${quality}, using ${value} instead`);
+        quality = value; // Don't update storage if quality is not supported
+        updateStorage = false;*/
+    } // Update config
+
+
+    config.selected = quality; // Set quality
+
+    this.media.quality = quality; // Save to storage
+
+    if (updateStorage) {
+      this.storage.set({
+        quality
+      });
+    }
+  }
+});
+
 const player = new Plyr(document.getElementById('js-video-player'), {
   disableContextMenu: false,
   captions: {
@@ -32,5 +90,35 @@ const player = new Plyr(document.getElementById('js-video-player'), {
   iconUrl: "/youtube.com/static/modules/plyr/plyr.svg",
   blankVideo: "/youtube.com/static/modules/plyr/blank.webm",
   debug: false,
-  storage: {enabled: false}
+  storage: {enabled: false},
+  quality: {
+    default: qualityDefault,
+    options: qualityOptions,
+    forced: true,
+    onChange: function(quality) {
+      if (quality == 'None')
+        return;
+      if (quality.includes('(integrated)')) {
+        for (var i=0; i < data['uni_sources'].length; i++) {
+          if (data['uni_sources'][i].quality_string == quality) {
+            changeQuality({'type': 'uni', 'index': i});
+            return;
+          }
+        }
+      } else {
+        for (var i=0; i < data['pair_sources'].length; i++) {
+          if (data['pair_sources'][i][0].quality_string == quality) {
+            changeQuality({'type': 'pair', 'index': i});
+            return;
+          }
+        }
+      }
+    },
+  },
+  settings: ['captions', 'quality', 'speed', 'loop'],
+});
+
+// Hide the external quality selector
+window.addEventListener('DOMContentLoaded', function(){
+    document.getElementById('quality-select').hidden = true;
 });

youtube/templates/watch.html

@@ -56,6 +56,30 @@
         </figure>
 
         <script src="/youtube.com/static/js/av-merge.js"></script>
+        <script>
+         function changeQuality(selection) {
+             var video = document.getElementById('js-video-player');
+             var currentVideoTime = video.currentTime;
+             var videoPaused = video.paused;
+             var videoSpeed = video.playbackRate;
+             var videoSource;
+             if (avMerge)
+                 avMerge.close();
+             if (selection.type == 'uni'){
+                 videoSource = data['uni_sources'][selection.index];
+                 video.src = videoSource.url;
+             } else {
+                 let srcPair = data['pair_sources'][selection.index];
+                 videoSource = srcPair[0];
+                 avInitialize(video, srcPair, currentVideoTime);
+             }
+             video.currentTime = currentVideoTime;
+             if (!videoPaused){
+                 video.play();
+             }
+             video.playbackRate = videoSpeed;
+         }
+        </script>
         {% if using_pair_sources %}
             <!-- Initialize av-merge -->
             <script>
@@ -104,7 +128,7 @@
                 <script src="/youtube.com/static/js/speedyplay.js"></script>
                 <select id="quality-select">
                     {% for src in uni_sources %}
-                        <option value='{"type": "uni", "index": {{ loop.index0 }}}' {{ 'selected' if loop.index0 == uni_idx and not using_pair_sources else '' }} >{{ src['quality_string'] }} (integrated)</option>
+                        <option value='{"type": "uni", "index": {{ loop.index0 }}}' {{ 'selected' if loop.index0 == uni_idx and not using_pair_sources else '' }} >{{ src['quality_string'] }}</option>
                     {% endfor %}
                     {% for src_pair in pair_sources %}
                         <option value='{"type": "pair", "index": {{ loop.index0}}}' {{ 'selected' if loop.index0 == pair_idx and using_pair_sources else '' }} >{{ src_pair[0]['quality_string'] }}, {{ src_pair[1]['quality_string'] }}</option>
@@ -113,28 +137,7 @@
                 <script>
                  document.getElementById('quality-select').addEventListener(
                      'change', function(e) {
-                         var video = document.getElementById('js-video-player');
+                         changeQuality(JSON.parse(this.value))
-                         var selection = JSON.parse(this.value);
-                         var currentVideoTime = video.currentTime;
-                         var videoPaused = video.paused;
-                         var videoSpeed = video.playbackRate;
-                         var videoSource;
-                         if (avMerge)
-                             avMerge.close();
-                         if (selection.type == 'uni'){
-                             videoSource = data['uni_sources'][selection.index];
-                             video.src = videoSource.url;
-                         } else {
-                             let srcPair = data['pair_sources'][selection.index];
-                             videoSource = srcPair[0];
-                             avInitialize(video, srcPair, currentVideoTime);
-                         }
-                         setVideoDimensions(videoSource.height, videoSource.width);
-                         video.currentTime = currentVideoTime;
-                         if (!videoPaused){
-                             video.play();
-                         }
-                         video.playbackRate = videoSpeed;
                      }
                  );
                 </script>
@@ -445,11 +448,6 @@
 
     </div>
 
-    <script>
-     // @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later
-     data = {{ js_data|tojson }};
-     // @license-end
-    </script>
     <script src="/youtube.com/static/js/common.js"></script>
     <script src="/youtube.com/static/js/transcript-table.js"></script>
     {% if settings.use_video_player == 2 %}

youtube/watch.py

@@ -48,6 +48,7 @@ def get_video_sources(info):
                 'type': 'video/' + fmt['ext'],
                 'quality_string': short_video_quality_string(fmt),
             }
+            source['quality_string'] += ' (integrated)'
             source.update(fmt)
             uni_sources.append(source)
             continue
@@ -661,6 +662,7 @@ def get_watch_page(video_id=None):
             'settings': settings.current_settings_dict,
             'has_manual_captions': any(s.get('on') for s in subtitle_sources),
             **source_info,
+            'using_pair_sources': using_pair_sources,
         },
         font_family=youtube.font_choices[settings.font],
         **source_info,