player now supports quality settings

desktop/src/scripts/anime/player.js

@@ -462,11 +462,14 @@ const AnimePlayer = (function() {
             });
 
             hlsInstance.on(Hls.Events.MANIFEST_PARSED, () => {
-                attachSubtitles(subtitles);
                 initPlyr();
 
+                plyrInstance.on('ready', () => {
+                    createAudioSelector(hlsInstance);
+                    createQualitySelector(hlsInstance);
+                });
+
                 els.video.play().catch(() => {});
-                els.loader.style.display = 'none';
             });
 
         } else {
@@ -493,6 +496,45 @@ const AnimePlayer = (function() {
         });
     }
 
+    function createQualitySelector(hls) {
+        const levels = hls.levels;
+        if (!levels || !levels.length) return;
+
+        const plyrEl = els.video.closest('.plyr');
+        const controls = plyrEl.querySelector('.plyr__controls');
+        if (!controls) return;
+
+        if (controls.querySelector('#quality-select')) return;
+
+        const wrapper = document.createElement('div');
+        wrapper.className = 'plyr__control';
+
+        const select = document.createElement('select');
+        select.id = 'quality-select';
+
+        // AUTO
+        const auto = document.createElement('option');
+        auto.value = -1;
+        auto.textContent = 'Auto';
+        select.appendChild(auto);
+
+        levels.forEach((l, i) => {
+            const opt = document.createElement('option');
+            opt.value = i;
+            opt.textContent = `${l.height}p`;
+            select.appendChild(opt);
+        });
+
+        select.value = hls.currentLevel;
+
+        select.onchange = () => {
+            hls.currentLevel = Number(select.value);
+        };
+
+        wrapper.appendChild(select);
+        controls.insertBefore(wrapper, controls.children[4]);
+    }
+
     function createAudioSelector(hls) {
         if (!hls.audioTracks || hls.audioTracks.length < 2) return;