From e78b5bdec48aa5a758b730a0aff2503a0d03474d Mon Sep 17 00:00:00 2001
From: FireMasterK <20838718+FireMasterK@users.noreply.github.com>
Date: Thu, 25 Feb 2021 12:38:47 +0530
Subject: [PATCH] Add quality selector.

---
 src/components/WatchVideo.vue | 25 +++++++++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/components/WatchVideo.vue b/src/components/WatchVideo.vue
index 672070fc..f3545839 100644
--- a/src/components/WatchVideo.vue
+++ b/src/components/WatchVideo.vue
@@ -1,6 +1,13 @@
 <template>
     <div class="uk-container uk-container-xlarge">
-        <video controls></video>
+        <div data-shaka-player-container>
+            <video
+                data-shaka-player
+                controls
+                autoplay
+                style="width: 100%; height: 100%"
+            ></video>
+        </div>
         <h1 class="uk-text-bold">{{ video.title }}</h1>
 
         <img :src="video.uploaderAvatar" loading="lazy" />
@@ -73,7 +80,9 @@
 </template>
 
 <script>
-const shaka = import("shaka-player/dist/shaka-player.compiled.js");
+import "shaka-player/dist/shaka-player.ui.js";
+import("shaka-player/dist/controls.css");
+const shaka = import("shaka-player/dist/shaka-player.ui.js");
 import Constants from "@/Constants.js";
 
 export default {
@@ -194,6 +203,18 @@ export default {
                                                     localStorage.getItem(
                                                         "volume"
                                                     ) || 1;
+
+                                            const ui = new shaka.ui.Overlay(
+                                                player,
+                                                document.querySelector(
+                                                    "div[data-shaka-player-container]"
+                                                ),
+                                                videoEl
+                                            );
+                                            const config = {
+                                                overflowMenuButtons: ["quality"]
+                                            };
+                                            ui.configure(config);
                                         });
 
                                     videoEl.setAttribute(