Add auto play for videos as a preference.

src/components/Player.vue

@@ -1,14 +1,9 @@
 <template>
-  <div class="uk-container-expand">
+    <div class="uk-container-expand">
-    <div data-shaka-player-container ref="container">
+        <div data-shaka-player-container ref="container">
-      <video
+            <video data-shaka-player :autoplay="shouldAutoPlay" style="width: 100%; height: 100%" ref="videoEl"></video>
-        data-shaka-player
+        </div>
-        autoplay
-        style="width: 100%; height: 100%"
-        ref="videoEl"
-      ></video>
     </div>
-  </div>
 </template>
 
 <script>
@@ -16,159 +11,157 @@ import("shaka-player/dist/controls.css");
 const shaka = import("shaka-player/dist/shaka-player.ui.js");
 
 export default {
-  props: {
+    props: {
-    video: Object,
+        video: Object,
-    sponsors: Object,
+        sponsors: Object,
-    selectedAutoPlay: Boolean,
+        selectedAutoPlay: Boolean,
-  },
-  methods: {
-    loadVideo() {
-      const videoEl = this.$refs.videoEl;
-
-      videoEl.setAttribute("poster", this.video.thumbnailUrl);
-
-      if (this.$route.query.t) videoEl.currentTime = this.$route.query.t;
-
-      const noPrevPlayer = !this.player;
-
-      var streams = [];
-
-      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
-      );
-
-      if (noPrevPlayer)
-        shaka
-          .then((shaka) => shaka.default)
-          .then((shaka) => {
-            this.shaka = shaka;
-            shaka.polyfill.installAll();
-
-            const player = new shaka.Player(videoEl);
-
-            this.player = player;
-
-            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) {
+    computed: {
-      player
+        shouldAutoPlay: () => {
-        .load("data:application/dash+xml;charset=utf-8;base64," + btoa(dash))
+            const value = localStorage.getItem("playerAutoPlay");
-        .then(() => {
+            return value === null || value === "true";
-          this.video.subtitles.map((subtitle) => {
+        },
-            player.addTextTrackAsync(
+    },
-              subtitle.url,
+    methods: {
-              subtitle.code,
+        loadVideo() {
-              "SUBTITLE",
+            const videoEl = this.$refs.videoEl;
-              subtitle.mimeType,
+
-              null,
+            videoEl.setAttribute("poster", this.video.thumbnailUrl);
-              subtitle.name
+
+            if (this.$route.query.t) videoEl.currentTime = this.$route.query.t;
+
+            const noPrevPlayer = !this.player;
+
+            var streams = [];
+
+            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,
             );
-          });
-          if (localStorage) videoEl.volume = localStorage.getItem("volume") || 1;
 
-          const ui =
+            if (noPrevPlayer)
-            this.ui ||
+                shaka
-            (this.ui = new shaka.ui.Overlay(player, this.$refs.container, videoEl));
+                    .then(shaka => shaka.default)
+                    .then(shaka => {
+                        this.shaka = shaka;
+                        shaka.polyfill.installAll();
 
-          const config = {
+                        const player = new shaka.Player(videoEl);
-            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);
+                        this.player = player;
-        });
+
+                        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.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);
+            });
+        },
+        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;
+            }
+        },
     },
-    onKeyPress(e) {
+    mounted() {
-      if (
+        document.addEventListener("keydown", this.onKeyPress);
-        document.activeElement.tagName === "INPUT" &&
+    },
-        document.activeElement.type === "text"
+    beforeUnmount() {
-      )
+        document.removeEventListener("keydown", this.onKeyPress);
-        return;
+        if (this.player) {
-      const videoEl = this.$refs.videoEl;
+            this.player.destroy();
-      switch (e.code) {
+            this.player = undefined;
-        case "KeyF":
+            this.ui = undefined;
-          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>

src/components/Preferences.vue

@@ -30,6 +30,10 @@
     <b>Skip Music: Non-Music Section</b>
     <br />
     <input class="uk-checkbox" v-model="skipMusicOffTopic" @change="onChange($event)" type="checkbox" />
+    <br />
+    <b>Autoplay Video</b>
+    <br />
+    <input class="uk-checkbox" v-model="autoPlayVideo" @change="onChange($event)" type="checkbox" />
     <h2>Instances List</h2>
     <table class="uk-table">
         <thead>
@@ -75,6 +79,7 @@ export default {
             skipInteraction: true,
             skipSelfPromo: true,
             skipMusicOffTopic: true,
+            autoPlayVideo: true,
         };
     },
     mounted() {
@@ -133,6 +138,9 @@ export default {
                     }
                 });
             }
+
+            this.autoPlayVideo =
+                localStorage.getItem("playerAutoPlay") === null || localStorage.getItem("playerAutoPlay") === "true";
         }
     },
     methods: {
@@ -149,6 +157,8 @@ export default {
                 if (this.skipSelfPromo) sponsorSelected.push("selfpromo");
                 if (this.skipMusicOffTopic) sponsorSelected.push("music_offtopic");
                 localStorage.setItem("selectedSkip", sponsorSelected);
+
+                localStorage.setItem("playerAutoPlay", this.autoPlayVideo);
             }
         },
         sslScore(url) {