Implement default quality preference.

src/components/Player.vue

@@ -1,7 +1,12 @@
 <template>
     <div class="uk-container-expand">
         <div data-shaka-player-container ref="container">
-            <video data-shaka-player :autoplay="shouldAutoPlay" style="width: 100%; height: 100%; max-height: 75vh; min-height: 250px;" ref="videoEl"></video>
+            <video
+                data-shaka-player
+                :autoplay="shouldAutoPlay"
+                style="width: 100%; height: 100%; max-height: 75vh; min-height: 250px;"
+                ref="videoEl"
+            ></video>
         </div>
     </div>
 </template>
@@ -134,7 +139,27 @@ export default {
             )
                 this.player.configure("manifest.disableVideo", true);
 
+            const quality = Number(localStorage.getItem("quality"));
+            const qualityConds = quality > 0 && (this.video.audioStreams.length > 0 || this.video.livestream);
+            if (qualityConds) this.player.configure("abr.enabled", false);
+
             player.load(uri, 0, uri.indexOf("dash+xml") >= 0 ? "application/dash+xml" : "video/mp4").then(() => {
+                if (qualityConds) {
+                    var leastDiff = Number.MAX_VALUE;
+                    var bestStream = null;
+                    player
+                        .getVariantTracks()
+                        .sort((a, b) => a.bandwidth - b.bandwidth)
+                        .forEach(stream => {
+                            const diff = Math.abs(quality - stream.height);
+                            if (diff < leastDiff) {
+                                leastDiff = diff;
+                                bestStream = stream;
+                            }
+                        });
+                    player.selectVariantTrack(bestStream);
+                }
+
                 this.video.subtitles.map(subtitle => {
                     player.addTextTrackAsync(
                         subtitle.url,

src/components/Preferences.vue

@@ -38,6 +38,21 @@
     <b>Audio Only</b>
     <br />
     <input class="uk-checkbox" v-model="audioOnly" @change="onChange($event)" type="checkbox" />
+    <br />
+    <b>Default Quality</b>
+    <br />
+    <select class="uk-select" v-model="defaultQuality" @change="onChange($event)">
+        <option value="0">Disable</option>
+        <option>144</option>
+        <option>240</option>
+        <option>360</option>
+        <option>480</option>
+        <option>720</option>
+        <option>1080</option>
+        <option>1440</option>
+        <option>2160</option>
+        <option>4320</option>
+    </select>
     <h2>Instances List</h2>
     <table class="uk-table">
         <thead>
@@ -85,6 +100,7 @@ export default {
             skipMusicOffTopic: true,
             autoPlayVideo: true,
             audioOnly: false,
+            defaultQuality: 0,
         };
     },
     mounted() {
@@ -147,6 +163,7 @@ export default {
             this.autoPlayVideo =
                 localStorage.getItem("playerAutoPlay") === null || localStorage.getItem("playerAutoPlay") === "true";
             this.audioOnly = localStorage.getItem("audioOnly") === "true";
+            this.defaultQuality = Number(localStorage.getItem("quality"));
         }
     },
     methods: {
@@ -166,6 +183,7 @@ export default {
 
                 localStorage.setItem("playerAutoPlay", this.autoPlayVideo);
                 localStorage.setItem("audioOnly", this.audioOnly);
+                localStorage.setItem("quality", this.defaultQuality);
             }
         },
         sslScore(url) {