Add video quality selector

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

1 files changed, 45 insertions, 3 deletions

diff --git a/youtube/templates/watch.html b/youtube/templates/watch.html
index 9d7a36c..2c85e16 100644
--- a/youtube/templates/watch.html
+++ b/youtube/templates/watch.html
@@ -55,8 +55,17 @@
             </video>
         </figure>
 
-        {% if pair_sources and (not uni_sources or pair_sources[pair_idx][0]['quality'] != uni_sources[uni_idx]['quality']) %}
-            <script src="/youtube.com/static/js/av-merge.js"></script>
+        <script src="/youtube.com/static/js/av-merge.js"></script>
+        {% if using_pair_sources %}
+            <!-- Initialize av-merge -->
+            <script>
+             var srcPair = data['pair_sources'][data['pair_idx']];
+             var video = document.getElementById('js-video-player');
+             var videoSource = srcPair[0];
+             // Do it dynamically rather than as the default in jinja
+             // in case javascript is disabled
+             avInitialize(video, srcPair, 0);
+            </script>
         {% endif %}
 
         {% if time_start != 0 %}
@@ -93,8 +102,41 @@
             <div class="external-player-controls">
                 <input class="speed" id="speed-control" type="text" title="Video speed">
                 <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>
+                    {% 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>
+                    {% endfor %}
+                </select>
+                <script>
+                 document.getElementById('quality-select').addEventListener(
+                     'change', function(e) {
+                         var video = document.getElementById('js-video-player');
+                         var selection = JSON.parse(this.value);
+                         var currentVideoTime = video.currentTime;
+                         var videoPaused = video.paused;
+                         var videoSpeed = video.playbackRate;
+                         var videoSource;
+                         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>
             </div>
-
             <input class="v-checkbox" name="video_info_list" value="{{ video_info }}" form="playlist-edit" type="checkbox">
 
             <span class="v-direct-link"><a href="https://youtu.be/{{ video_id }}" rel="noopener noreferrer" target="_blank">Direct Link</a></span>