Show/display html quality selector statically, not dynamically

Removing the html quality selector with javascript on page load in theory is good and ensures it will be present if plyr fails, but it's annoying to have elements flashing when the page loads
user234683 · Mar 27, 2022 · 96dcefa · 96dcefa
1 parent 0a999b2
commit 96dcefa
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 20 deletions.
diff --git a/youtube/static/js/plyr-start.js b/youtube/static/js/plyr-start.js
@@ -132,9 +132,3 @@ player.eventListeners.forEach(function(eventListener) {
 player.started = false;
 player.once('playing', function(){this.started = true});
 
-// Hide the external quality selector
-window.addEventListener('DOMContentLoaded', function(){
-    var qs = document.querySelector('#quality-select');
-    if (qs)
-        qs.hidden = true;
-});
diff --git a/youtube/static/js/watch.js b/youtube/static/js/watch.js
@@ -58,11 +58,13 @@ if (data.using_pair_sources) {
 }
 
 // Quality selector
-document.querySelector('#quality-select').addEventListener(
-    'change', function(e) {
-        changeQuality(JSON.parse(this.value))
-    }
-);
+var qualitySelector = document.querySelector('#quality-select')
+if (qualitySelector)
+    qualitySelector.addEventListener(
+        'change', function(e) {
+            changeQuality(JSON.parse(this.value))
+        }
+    );
 
 // Set up video start time from &t parameter
 if (data.time_start != 0 && video)

diff --git a/youtube/templates/watch.html b/youtube/templates/watch.html
@@ -515,15 +515,16 @@ <h2 class="title">{{ title }}</h2>
 
         <div class="external-player-controls">
             <input id="speed-control" type="text" title="Video speed" placeholder="Speed">
-
-            <select id="quality-select" autocomplete="off">
-                {% 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'] }}</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['quality_string'] }}</option>
-                {% endfor %}
-            </select>
+            {% if settings.video_player == 0 %}
+                <select id="quality-select" autocomplete="off">
+                    {% 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'] }}</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['quality_string'] }}</option>
+                    {% endfor %}
+                </select>
+            {% endif %}
         </div>
         <input class="checkbox" name="video_info_list" value="{{ video_info }}" form="playlist-edit" type="checkbox">