From a2f95c9d9ef06134800dac808d3633f892867fe1 Mon Sep 17 00:00:00 2001
From: FireMasterK <20838718+FireMasterK@users.noreply.github.com>
Date: Tue, 8 Jun 2021 00:52:29 +0530
Subject: [PATCH] Create Player UI like how it was intended to be.

---
 src/components/Player.vue | 40 +++++++++++++++++++++------------------
 1 file changed, 22 insertions(+), 18 deletions(-)

diff --git a/src/components/Player.vue b/src/components/Player.vue
index 34c94d72..56a38647 100644
--- a/src/components/Player.vue
+++ b/src/components/Player.vue
@@ -49,11 +49,9 @@ export default {
                         this.shaka = shaka;
                         shaka.polyfill.installAll();
 
-                        const player = new shaka.Player(videoEl);
+                        const localPlayer = new shaka.Player(videoEl);
 
-                        this.player = player;
-
-                        this.setPlayerAttrs(player, videoEl, dash, shaka);
+                        this.setPlayerAttrs(localPlayer, videoEl, dash, shaka);
                     });
             else this.setPlayerAttrs(this.player, videoEl, dash, this.shaka);
 
@@ -87,7 +85,26 @@ export default {
 
             //TODO: Add sponsors on seekbar: https://github.com/ajayyy/SponsorBlock/blob/e39de9fd852adb9196e0358ed827ad38d9933e29/src/js-components/previewBar.ts#L12
         },
-        setPlayerAttrs(player, videoEl, dash, shaka) {
+        setPlayerAttrs(localPlayer, videoEl, dash, shaka) {
+            if (!this.ui) {
+                this.ui = new shaka.ui.Overlay(localPlayer, this.$refs.container, videoEl);
+
+                const config = {
+                    overflowMenuButtons: ["quality", "captions", "playback_rate"],
+                    seekBarColors: {
+                        base: "rgba(255, 255, 255, 0.3)",
+                        buffered: "rgba(255, 255, 255, 0.54)",
+                        played: "rgb(255, 0, 0)",
+                    },
+                };
+
+                this.ui.configure(config);
+            }
+
+            const player = this.ui.getControls().getPlayer();
+
+            this.player = player;
+
             player.load("data:application/dash+xml;charset=utf-8;base64," + btoa(dash)).then(() => {
                 this.video.subtitles.map(subtitle => {
                     player.addTextTrackAsync(
@@ -100,19 +117,6 @@ export default {
                     );
                 });
                 if (localStorage) videoEl.volume = localStorage.getItem("volume") || 1;
-
-                const ui = this.ui || (this.ui = new shaka.ui.Overlay(player, this.$refs.container, videoEl));
-
-                const config = {
-                    overflowMenuButtons: ["quality", "captions", "playback_rate"],
-                    seekBarColors: {
-                        base: "rgba(255, 255, 255, 0.3)",
-                        buffered: "rgba(255, 255, 255, 0.54)",
-                        played: "rgb(255, 0, 0)",
-                    },
-                };
-
-                ui.configure(config);
             });
         },
     },