feat(hls): add video quality preference (#306)

src/settings.rs

@@ -21,7 +21,7 @@ struct SettingsTemplate {
 
 // CONSTANTS
 
-const PREFS: [&str; 17] = [
+const PREFS: [&str; 18] = [
 	"theme",
 	"front_page",
 	"layout",
@@ -39,6 +39,7 @@ const PREFS: [&str; 17] = [
 	"hide_awards",
 	"hide_score",
 	"disable_visit_reddit_confirmation",
+	"video_quality",
 ];
 
 // FUNCTIONS

src/utils.rs

@@ -612,6 +612,7 @@ pub struct Preferences {
 	pub show_nsfw: String,
 	pub blur_nsfw: String,
 	pub hide_hls_notification: String,
+	pub video_quality: String,
 	pub hide_sidebar_and_summary: String,
 	pub use_hls: String,
 	pub autoplay_videos: String,
@@ -652,6 +653,7 @@ impl Preferences {
 			blur_nsfw: setting(req, "blur_nsfw"),
 			use_hls: setting(req, "use_hls"),
 			hide_hls_notification: setting(req, "hide_hls_notification"),
+			video_quality: setting(req, "video_quality"),
 			autoplay_videos: setting(req, "autoplay_videos"),
 			fixed_navbar: setting_or_default(req, "fixed_navbar", "on".to_string()),
 			disable_visit_reddit_confirmation: setting(req, "disable_visit_reddit_confirmation"),

static/playHLSVideo.js

@@ -1,5 +1,7 @@
 // @license http://www.gnu.org/licenses/agpl-3.0.html AGPL-3.0
 (function () {
+    const configElement = document.getElementById('video_quality');
+    const qualitySetting = configElement.getAttribute('data-value');
     if (Hls.isSupported()) {
         var videoSources = document.querySelectorAll("video source[type='application/vnd.apple.mpegurl']");
         videoSources.forEach(function (source) {
@@ -28,13 +30,26 @@
 
             oldVideo.parentNode.replaceChild(newVideo, oldVideo);
 
+            function getIndexOfDefault(length) {
+                switch (qualitySetting) {
+                    case 'best':
+                        return length - 1;
+                    case 'medium':
+                        return Math.floor(length / 2);
+                    case 'worst':
+                        return 0;
+                    default:
+                        return length - 1;
+                }
+            }
+
             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;
+                    hls.loadLevel = getIndexOfDefault(hls.levels.length);
                     var availableLevels = hls.levels.map(function(level) {
                         return {
                             height: level.height,
@@ -73,18 +88,18 @@
             function addQualitySelector(videoElement, hlsInstance, availableLevels) {
                 var qualitySelector = document.createElement('select');
                 qualitySelector.classList.add('quality-selector');
-                var last = availableLevels.length - 1;
+                var defaultIndex = getIndexOfDefault(availableLevels.length);
                 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) {
+                    if (index === defaultIndex) {
                         option.selected = "selected";
                     }
                     qualitySelector.appendChild(option);
                 });
-                qualitySelector.selectedIndex = availableLevels.length - 1;
+                qualitySelector.selectedIndex = defaultIndex;
                 qualitySelector.addEventListener('change', function () {
                     var selectedIndex = qualitySelector.selectedIndex;
                     hlsInstance.nextLevel = selectedIndex;

templates/base.html

@@ -27,6 +27,8 @@
 		<link rel="manifest" type="application/json" href="/manifest.json">
 		<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"> 
 		<link rel="stylesheet" type="text/css" href="/style.css?v={{ env!("CARGO_PKG_VERSION") }}">
+		<!-- Video quality -->
+		<div id="video_quality" data-value="{{ prefs.video_quality }}"></div>
 		{% endblock %}
 		</head>
 	<body class="

templates/settings.html

@@ -46,6 +46,12 @@
 			</fieldset>
 			<fieldset>
 				<legend>Content</legend>
+				<div class="prefs-group">
+					<label for="video_quality">Video quality:</label>
+					<select name="video_quality" id="video_quality"> 
+						{% call utils::options(prefs.video_quality, ["best", "medium", "worst"], "best") %}
+					</select>
+				</div>
 				<div class="prefs-group">
 					<label for="post_sort" title="Applies only to subreddit feeds">Default subreddit post sort:</label>
 					<select name="post_sort">