From fcd14d3fcb7161e342ce86ce228de97f8ccead1c Mon Sep 17 00:00:00 2001
From: FireMasterK <20838718+FireMasterK@users.noreply.github.com>
Date: Thu, 6 May 2021 21:44:08 +0530
Subject: [PATCH] replace deprecated function: addTextTrack ->
 addTextTrackAsync

---
 src/components/Player.vue | 283 ++++++++++++++++++++------------------
 1 file changed, 148 insertions(+), 135 deletions(-)

diff --git a/src/components/Player.vue b/src/components/Player.vue
index 88c0a659..69034c9c 100644
--- a/src/components/Player.vue
+++ b/src/components/Player.vue
@@ -1,9 +1,14 @@
 <template>
-    <div class="uk-container-expand">
-        <div data-shaka-player-container ref="container">
-            <video data-shaka-player autoplay style="width: 100%; height: 100%" ref="videoEl"></video>
-        </div>
+  <div class="uk-container-expand">
+    <div data-shaka-player-container ref="container">
+      <video
+        data-shaka-player
+        autoplay
+        style="width: 100%; height: 100%"
+        ref="videoEl"
+      ></video>
     </div>
+  </div>
 </template>
 
 <script>
@@ -11,151 +16,159 @@ import("shaka-player/dist/controls.css");
 const shaka = import("shaka-player/dist/shaka-player.ui.js");
 
 export default {
-    props: {
-        video: Object,
-        sponsors: Object,
-        selectedAutoPlay: Boolean,
-    },
-    methods: {
-        loadVideo() {
-            const videoEl = this.$refs.videoEl;
+  props: {
+    video: Object,
+    sponsors: Object,
+    selectedAutoPlay: Boolean,
+  },
+  methods: {
+    loadVideo() {
+      const videoEl = this.$refs.videoEl;
 
-            videoEl.setAttribute("poster", this.video.thumbnailUrl);
+      videoEl.setAttribute("poster", this.video.thumbnailUrl);
 
-            if (this.$route.query.t) videoEl.currentTime = this.$route.query.t;
+      if (this.$route.query.t) videoEl.currentTime = this.$route.query.t;
 
-            const noPrevPlayer = !this.player;
+      const noPrevPlayer = !this.player;
 
-            var streams = [];
+      var streams = [];
 
-            streams.push(...this.video.audioStreams);
-            streams.push(...this.video.videoStreams);
+      streams.push(...this.video.audioStreams);
+      streams.push(...this.video.videoStreams);
 
-            const dash = require("@/utils/DashUtils.js").default.generate_dash_file_from_formats(
-                streams,
-                this.video.duration,
-            );
+      const dash = require("@/utils/DashUtils.js").default.generate_dash_file_from_formats(
+        streams,
+        this.video.duration
+      );
 
-            if (noPrevPlayer)
-                shaka
-                    .then(shaka => shaka.default)
-                    .then(shaka => {
-                        this.shaka = shaka;
-                        shaka.polyfill.installAll();
+      if (noPrevPlayer)
+        shaka
+          .then((shaka) => shaka.default)
+          .then((shaka) => {
+            this.shaka = shaka;
+            shaka.polyfill.installAll();
 
-                        const player = new shaka.Player(videoEl);
+            const player = new shaka.Player(videoEl);
 
-                        this.player = player;
+            this.player = player;
 
-                        this.setPlayerAttrs(player, videoEl, dash, shaka);
-                    });
-            else this.setPlayerAttrs(this.player, videoEl, dash, this.shaka);
+            this.setPlayerAttrs(player, videoEl, dash, shaka);
+          });
+      else this.setPlayerAttrs(this.player, videoEl, dash, this.shaka);
 
-            if (noPrevPlayer) {
-                videoEl.addEventListener("timeupdate", () => {
-                    if (this.sponsors && this.sponsors.segments) {
-                        const time = videoEl.currentTime;
-                        this.sponsors.segments.map(segment => {
-                            if (!segment.skipped) {
-                                const end = segment.segment[1];
-                                if (time >= segment.segment[0] && time < end) {
-                                    console.log("Skipped segment at " + time);
-                                    videoEl.currentTime = end;
-                                    segment.skipped = true;
-                                    return;
-                                }
-                            }
-                        });
-                    }
-                });
-
-                videoEl.addEventListener("volumechange", () => {
-                    if (localStorage) localStorage.setItem("volume", videoEl.volume);
-                });
-
-                videoEl.addEventListener("ended", () => {
-                    if (this.selectedAutoPlay && this.video.relatedStreams.length > 0)
-                        this.$router.push(this.video.relatedStreams[0].url);
-                });
-            }
-
-            //TODO: Add sponsors on seekbar: https://github.com/ajayyy/SponsorBlock/blob/e39de9fd852adb9196e0358ed827ad38d9933e29/src/js-components/previewBar.ts#L12
-        },
-        setPlayerAttrs(player, videoEl, dash, shaka) {
-            player.load("data:application/dash+xml;charset=utf-8;base64," + btoa(dash)).then(() => {
-                this.video.subtitles.map(subtitle => {
-                    player.addTextTrack(
-                        subtitle.url,
-                        subtitle.code,
-                        "SUBTITLE",
-                        subtitle.mimeType,
-                        null,
-                        subtitle.name,
-                    );
-                });
-                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);
+      if (noPrevPlayer) {
+        videoEl.addEventListener("timeupdate", () => {
+          if (this.sponsors && this.sponsors.segments) {
+            const time = videoEl.currentTime;
+            this.sponsors.segments.map((segment) => {
+              if (!segment.skipped) {
+                const end = segment.segment[1];
+                if (time >= segment.segment[0] && time < end) {
+                  console.log("Skipped segment at " + time);
+                  videoEl.currentTime = end;
+                  segment.skipped = true;
+                  return;
+                }
+              }
             });
-        },
-        onKeyPress(e) {
-            if (document.activeElement.tagName === "INPUT" && document.activeElement.type === "text") return;
-            const videoEl = this.$refs.videoEl;
-            switch (e.code) {
-                case "KeyF":
-                    if (document.fullscreenElement) document.exitFullscreen();
-                    else this.$refs.container.requestFullscreen();
-                    e.preventDefault();
-                    break;
-                case "KeyM":
-                    videoEl.muted = !videoEl.muted;
-                    e.preventDefault();
-                    break;
-                case "Space":
-                    if (videoEl.paused) videoEl.play();
-                    else videoEl.pause();
-                    e.preventDefault();
-                    break;
-                case "ArrowUp":
-                    videoEl.volume = Math.min(videoEl.volume + 0.05, 1);
-                    e.preventDefault();
-                    break;
-                case "ArrowDown":
-                    videoEl.volume = Math.max(videoEl.volume - 0.05, 0);
-                    e.preventDefault();
-                    break;
-                case "ArrowLeft":
-                    videoEl.currentTime = Math.max(videoEl.currentTime - 5, 0);
-                    e.preventDefault();
-                    break;
-                case "ArrowRight":
-                    videoEl.currentTime = videoEl.currentTime + 5;
-                    e.preventDefault();
-                    break;
-            }
-        },
+          }
+        });
+
+        videoEl.addEventListener("volumechange", () => {
+          if (localStorage) localStorage.setItem("volume", videoEl.volume);
+        });
+
+        videoEl.addEventListener("ended", () => {
+          if (this.selectedAutoPlay && this.video.relatedStreams.length > 0)
+            this.$router.push(this.video.relatedStreams[0].url);
+        });
+      }
+
+      //TODO: Add sponsors on seekbar: https://github.com/ajayyy/SponsorBlock/blob/e39de9fd852adb9196e0358ed827ad38d9933e29/src/js-components/previewBar.ts#L12
     },
-    mounted() {
-        document.addEventListener("keydown", this.onKeyPress);
+    setPlayerAttrs(player, videoEl, dash, shaka) {
+      player
+        .load("data:application/dash+xml;charset=utf-8;base64," + btoa(dash))
+        .then(() => {
+          this.video.subtitles.map((subtitle) => {
+            player.addTextTrackAsync(
+              subtitle.url,
+              subtitle.code,
+              "SUBTITLE",
+              subtitle.mimeType,
+              null,
+              subtitle.name
+            );
+          });
+          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);
+        });
     },
-    beforeUnmount() {
-        document.removeEventListener("keydown", this.onKeyPress);
-        if (this.player) {
-            this.player.destroy();
-            this.player = undefined;
-            this.ui = undefined;
-        }
+    onKeyPress(e) {
+      if (
+        document.activeElement.tagName === "INPUT" &&
+        document.activeElement.type === "text"
+      )
+        return;
+      const videoEl = this.$refs.videoEl;
+      switch (e.code) {
+        case "KeyF":
+          if (document.fullscreenElement) document.exitFullscreen();
+          else this.$refs.container.requestFullscreen();
+          e.preventDefault();
+          break;
+        case "KeyM":
+          videoEl.muted = !videoEl.muted;
+          e.preventDefault();
+          break;
+        case "Space":
+          if (videoEl.paused) videoEl.play();
+          else videoEl.pause();
+          e.preventDefault();
+          break;
+        case "ArrowUp":
+          videoEl.volume = Math.min(videoEl.volume + 0.05, 1);
+          e.preventDefault();
+          break;
+        case "ArrowDown":
+          videoEl.volume = Math.max(videoEl.volume - 0.05, 0);
+          e.preventDefault();
+          break;
+        case "ArrowLeft":
+          videoEl.currentTime = Math.max(videoEl.currentTime - 5, 0);
+          e.preventDefault();
+          break;
+        case "ArrowRight":
+          videoEl.currentTime = videoEl.currentTime + 5;
+          e.preventDefault();
+          break;
+      }
     },
+  },
+  mounted() {
+    document.addEventListener("keydown", this.onKeyPress);
+  },
+  beforeUnmount() {
+    document.removeEventListener("keydown", this.onKeyPress);
+    if (this.player) {
+      this.player.destroy();
+      this.player = undefined;
+      this.ui = undefined;
+    }
+  },
 };
 </script>