Added video quality feature (#43)

* Fixed docker compose errors

* Added quality selector

* Remove log statement

Co-authored-by: Matthew Esposito <matt@matthew.science>

* Show kbps in quality

Co-authored-by: Matthew Esposito <matt@matthew.science>

* Make highest quality default

* Add styling, default option to highest

---------

Co-authored-by: Matthew Esposito <matt@matthew.science>

docker-compose.dev.yml

@@ -12,12 +12,11 @@ services:
     read_only: true
     security_opt:
       - no-new-privileges:true
+      - seccomp="seccomp-redlib.json"
     cap_drop:
       - ALL
     networks:
       - redlib
-    security_opt:
-      - seccomp="seccomp-redlib.json"
     healthcheck:
       test: ["CMD", "wget", "--spider", "-q", "--tries=1", "http://localhost:8080/settings"]
       interval: 5m

static/playHLSVideo.js

@@ -30,12 +30,21 @@
 
             function initializeHls() {
                 newVideo.removeEventListener('play', initializeHls);
-
                 var hls = new Hls({ autoStartLoad: false });
                 hls.loadSource(playlist);
                 hls.attachMedia(newVideo);
                 hls.on(Hls.Events.MANIFEST_PARSED, function () {
                     hls.loadLevel = hls.levels.length - 1;
+                    var availableLevels = hls.levels.map(function(level) {
+                        return {
+                            height: level.height,
+                            width: level.width,
+                            bitrate: level.bitrate,
+                        };
+                    });
+
+                    addQualitySelector(newVideo, hls, availableLevels);
+
                     hls.startLoad();
                     newVideo.play();
                 });
@@ -61,6 +70,30 @@
                 });
             }
 
+            function addQualitySelector(videoElement, hlsInstance, availableLevels) {
+                var qualitySelector = document.createElement('select');
+                qualitySelector.classList.add('quality-selector');
+                var last = availableLevels.length - 1;
+                availableLevels.forEach(function (level, index) {
+                    var option = document.createElement('option');
+                    option.value = index.toString();
+                    var bitrate = (level.bitrate / 1_000).toFixed(0);
+                    option.text = level.height + 'p (' + bitrate + ' kbps)';
+                    if (index === last) {
+                        option.selected = "selected";
+                    }
+                    qualitySelector.appendChild(option);
+                });
+                qualitySelector.selectedIndex = availableLevels.length - 1;
+                qualitySelector.addEventListener('change', function () {
+                    var selectedIndex = qualitySelector.selectedIndex;
+                    hlsInstance.nextLevel = selectedIndex;
+                    hlsInstance.startLoad();
+                });
+
+                videoElement.parentNode.appendChild(qualitySelector);
+            }
+
             newVideo.addEventListener('play', initializeHls);
 
             if (autoplay) {

static/style.css

@@ -1714,3 +1714,19 @@ td, th {
       justify-content: initial;
     }
 }
+
+.quality-selector {
+	border: 2px var(--outside) solid;
+	margin-top: 8px;
+	float: right;
+}
+
+.quality-selector option {
+	background-color: var(--background);
+	color: var(--text);  
+}
+
+.quality-selector option:hover {
+	background-color: var(--accent);
+	color: var(--text);
+}