split & fix progressbar, sb error checker

NUXT/components/Player/index.vue

@@ -152,7 +152,12 @@
         @fullscreen="(controls = $refs.player.paused), handleFullscreenChange()"
       />
     </div>
-    <!-- NOTE: breaks in fullscreen -->
+    <progressbar
+      v-if="$refs.player"
+      :video="$refs.player"
+      :fullscreen="isFullscreen"
+      :current-time="$refs.player.currentTime"
+    />
     <seekbar
       v-if="$refs.player"
       v-show="!isFullscreen || controls"
@@ -160,6 +165,7 @@
       :video="$refs.player"
       :sources="sources"
       :controls="controls"
+      :current-time="$refs.player.currentTime"
       @seeking="seeking = !seeking"
     />
     <sponsorblock
@@ -181,10 +187,12 @@ import captions from "~/components/Player/captions.vue";
 import playpause from "~/components/Player/playpause.vue";
 import watchtime from "~/components/Player/watchtime.vue";
 import fullscreen from "~/components/Player/fullscreen.vue";
+import progressbar from "~/components/Player/progressbar.vue";
 import sponsorblock from "~/components/Player/sponsorblock.vue";
 export default {
   components: {
     sponsorblock,
+    progressbar,
     fullscreen,
     watchtime,
     playpause,

NUXT/components/Player/progressbar.vue

@@ -0,0 +1,47 @@
+<template>
+  <v-progress-linear
+    style="width: 100%; background: #ffffff22"
+    background-opacity="0.5"
+    background-color="primary"
+    :buffer-value="buffered"
+    :value="(currentTime / video.duration) * 100"
+    color="primary"
+    height="2"
+    :style="
+      fullscreen
+        ? 'width: calc(100% - 2rem); left: 1rem; position: absolute; bottom: 3rem;'
+        : 'width: 100%'
+    "
+  />
+</template>
+<script>
+export default {
+  props: {
+    video: {
+      type: Object,
+      required: true,
+    },
+    fullscreen: {
+      type: Boolean,
+      required: true,
+    },
+    currentTime: {
+      type: Number,
+      required: true,
+    },
+  },
+  data: () => ({
+    buffered: 0,
+  }),
+  mounted() {
+    this.video.addEventListener("loadeddata", (e) => {
+      if (this.video.readyState >= 3) {
+        this.video.addEventListener("progress", () => {
+          this.buffered =
+            (this.video.buffered.end(0) / this.video.duration) * 100;
+        });
+      }
+    });
+  },
+};
+</script>

NUXT/components/Player/seekbar.vue

@@ -7,22 +7,6 @@
       style="display: none"
       :src="vidWrs"
     />
-    <v-progress-linear
-      query
-      active
-      style="width: 100%; background: #ffffff22"
-      background-opacity="0.5"
-      background-color="white"
-      :buffer-value="buffered"
-      :value="percent"
-      color="primary"
-      height="3"
-      :style="
-        fullscreen
-          ? 'width: calc(100% - 2rem); left: 1rem; position: absolute; bottom: 3rem;'
-          : 'width: 100%'
-      "
-    />
     <!-- Scrubber -->
     <v-slider
       id="scrubber"
@@ -31,7 +15,7 @@
       dense
       track-color="transparent"
       :class="!controls && !fullscreen && !scrubbing ? 'invisible' : ''"
-      style="position: absolute; z-index: 2"
+      style="position: absolute; z-index: 3"
       :style="
         fullscreen
           ? 'width: calc(100% - 2rem); left: 1rem; bottom: 3rem;'
@@ -70,43 +54,64 @@
 
 <script>
 export default {
-  props: ["sources", "video", "controls", "fullscreen"],
-
-  data() {
-    return {
-      scrubbing: false,
-      percent: 0,
-      progress: 0,
-      buffered: 0,
-      duration: 0,
-      vidSrc: "",
-      vidWrs: "",
-    };
+  props: {
+    video: {
+      type: Object,
+      required: true,
+    },
+    controls: {
+      type: Boolean,
+      required: true,
+    },
+    fullscreen: {
+      type: Boolean,
+      required: true,
+    },
+    sources: {
+      type: Array,
+      required: true,
+    },
+    currentTime: {
+      type: Number,
+      required: true,
+    },
   },
+  data: () => ({
+    scrubbing: false,
+    progress: 0,
+    duration: 0,
+    vidWrs: "",
+  }),
   mounted() {
-    console.log("sources", this.sources);
-    this.vidSrc = this.sources[this.sources.length - 1].url;
-    this.vidWrs = this.sources[1].url;
-    let vid = this.video;
-    vid.addEventListener("loadeddata", (e) => {
-      // console.log("%c loadeddata", "color: #00ff00");
-      console.log(e);
-      //Video should now be loaded but we can add a second check
-      if (vid.readyState >= 3) {
-        vid.ontimeupdate = () => {
-          // console.log("%c timeupdate", "color: #aaaaff");
-          this.duration = vid.duration;
-          if (!this.scrubbing) this.progress = vid.currentTime;
-          this.percent = (vid.currentTime / vid.duration) * 100;
-        };
-        vid.onprogress = () => {
-          // console.log("%c progress", "color: #ff00ff");
-          this.buffered = (vid.buffered.end(0) / vid.duration) * 100;
-        };
+    // this.vidWrs = this.sources[1].url;
+    this.video.addEventListener("loadeddata", (e) => {
+      if (this.video.readyState >= 3) {
+        this.video.addEventListener("timeupdate", () => {
+          this.duration = this.video.duration;
+          if (!this.scrubbing) this.progress = this.currentTime;
+        });
       }
     });
   },
   methods: {
+    seek(e) {
+      // console.log(`scrubbing ${e}`);
+      let vid = this.$refs.playerfake;
+      let canvas = this.$refs.preview;
+      this.$refs.playerfake.currentTime = e;
+      canvas
+        .getContext("2d")
+        .drawImage(
+          vid,
+          0,
+          0,
+          this.video.clientWidth / 3,
+          this.video.clientHeight / 3
+        );
+    },
+    scrub(e) {
+      this.video.currentTime = e;
+    },
     // TODO: better scrubbing preview
     loadVideoFrames() {
       // Exit loop if desired number of frames have been extracted
@@ -228,24 +233,6 @@ export default {
       console.log(this.frames);
     },
     // TODO: scrubbing preview end
-    seek(e) {
-      // console.log(`scrubbing ${e}`);
-      let vid = this.$refs.playerfake;
-      let canvas = this.$refs.preview;
-      this.$refs.playerfake.currentTime = e;
-      canvas
-        .getContext("2d")
-        .drawImage(
-          vid,
-          0,
-          0,
-          this.video.clientWidth / 3,
-          this.video.clientHeight / 3
-        );
-    },
-    scrub(e) {
-      this.video.currentTime = e;
-    },
   },
 };
 </script>

NUXT/components/Player/sponsorblock.vue

@@ -1,5 +1,22 @@
 <template>
-  <div style="display: none"></div>
+  <div>
+    <!-- <v-progress-linear
+      v-for="segment in segments"
+      :key="segment.UUID"
+      background-opacity="0.5"
+      style="width: 100%; background: #ffffff22"
+      :background-color="segment.category"
+      :buffer-value="(segment.segments[1] / video.duration) * 100"
+      :value="(segment.segments[0] / video.duration) * 100"
+      color="red"
+      height="2"
+      :style="
+        fullscreen
+          ? 'width: calc(100% - 2rem); left: 1rem; position: absolute; bottom: 3rem;'
+          : 'width: 100%; left: 0; position: absolute; bottom: 0;'
+      "
+    /> -->
+  </div>
 </template>
 
 <script>
@@ -14,6 +31,9 @@ export default {
       required: true,
     },
   },
+  data: () => ({
+    segments: [],
+  }),
   mounted() {
     let vid = this.video;
     let id = this.videoid;
@@ -21,22 +41,35 @@ export default {
     vid.addEventListener("loadeddata", (e) => {
       if (vid.readyState >= 3) {
         this.$youtube.getSponsorBlock(id, (data) => {
-          console.log(data);
+          console.log("sbreturn", data);
+          if (Array.isArray(data)) {
+            this.segments = data;
 
-          // iterate over data.segments array
-            vid.ontimeupdate = () => {
-              data.forEach(function(sponsor) {
+            // iterate over data.segments array
+            vid.addEventListener("timeupdate", () => {
+              console.log("sb check", data);
+              data.forEach((sponsor) => {
                 let vidTime = vid.currentTime;
 
-                if (vidTime >= sponsor.segment[0] && vidTime <= sponsor.segment[1]) {
+                if (
+                  vidTime >= sponsor.segment[0] &&
+                  vidTime <= sponsor.segment[1]
+                ) {
                   console.log("Skipping the sponsor");
                   vid.currentTime = sponsor.segment[1];
                 }
-              })
-            }
-        })
+              });
+            });
+          }
+        });
       }
-    })
+    });
   },
 };
 </script>
+
+<style>
+.sponsor {
+  color: green;
+}
+</style>

NUXT/pages/watch.vue

@@ -228,6 +228,7 @@
         hide-overlay
         persistent
         no-click-animation
+        style="z-index: 2 !important"
         attach="#content-container"
       >
         <mainCommentRenderer