function & state for pre-buffering option setup

NUXT/components/Player/index.vue

@@ -374,10 +374,15 @@ export default {
   mounted() {
     console.log("sources", this.sources);
     console.log("recommends", this.recommends);
-    this.audSrc = this.sources[this.sources.length - 1].url;
-    this.vidSrc = this.sources[0].url;
     let vid = this.$refs.player;
 
+    // TODO: this.$store.state.player.quality, check if exists and select the closest one
+    if (this.$store.state.player.preload) this.prebuffer(this.sources[0].url);
+    else {
+      this.audSrc = this.sources[this.sources.length - 1].url;
+      this.vidSrc = this.sources[0].url;
+    }
+
     this.$youtube.getSponsorBlock(this.video.id, (data) => {
       console.log("sbreturn", data);
       if (Array.isArray(data)) {
@@ -389,8 +394,8 @@ export default {
       // TODO: detect video loading state and send this.loading to play button :loading = loading here
       // console.log(e);
       if (vid.readyState >= 3) {
-        this.$refs.audio.currentTime = vid.currentTime;
         this.$refs.audio.play();
+        this.$refs.audio.currentTime = vid.currentTime;
         vid.addEventListener("timeupdate", () => {
           if (!this.seeking) this.progress = vid.currentTime; // for seekbar
 
@@ -415,6 +420,7 @@ export default {
         // TODO: handle buffering with audio track
         // TODO: handle video ending with a "replay" button if not on loop
         // TODO: detect video loading state and send this.loading to play button :loading = loading here
+        // TODO: split buffering into multiple sections as it should be for back/forth scrubbing
         vid.addEventListener("progress", () => {
           this.buffered = (vid.buffered.end(0) / vid.duration) * 100;
         });
@@ -431,6 +437,46 @@ export default {
     screen.orientation.removeEventListener("change");
   },
   methods: {
+    prebuffer(url) {
+      var xhr = new XMLHttpRequest();
+      xhr.open("GET", url, true);
+      xhr.responseType = "blob";
+
+      xhr.addEventListener(
+        "load",
+        function () {
+          if (xhr.status === 200) {
+            console.log(window.URL || window.webkitURL);
+            var URL = window.URL || window.webkitURL;
+            var blob_url = URL.createObjectURL(xhr.response);
+
+            console.log(xhr.response);
+            console.log(blob_url);
+
+            // NOTE: blob resolves, no CORS issues. But blob_url is broken because https://youtube.com is the window.URL
+            this.vidSrc = blob_url;
+            console.log("pre-fetched", xhr);
+          } else {
+            console.error("errorred", xhr.status);
+          }
+        },
+        false
+      );
+
+      var prev_pc = 0;
+      // TODO: big progress overlay (##%) to replace controls while loading if pre-buffering is enabled
+      xhr.addEventListener("progress", function (event) {
+        if (event.lengthComputable) {
+          var pc = Math.round((event.loaded / event.total) * 100);
+          if (pc != prev_pc) {
+            prev_pc = pc; // ##%
+            console.log("buffering progress", pc);
+          }
+        }
+      });
+
+      xhr.send();
+    },
     shortNext() {
       this.shortTransition = true;
       setTimeout(() => {

NUXT/components/Player/seekbar.vue

@@ -109,7 +109,7 @@ export default {
           this.video.clientHeight / 3
         );
     },
-    // TODO: better scrubbing preview (don't delet ples 🙏)
+    // TODO: better scrubbing preview start
     // loadVideoFrames() {
     //   // Exit loop if desired number of frames have been extracted
     //   if (this.frames.length >= frameCount) {
@@ -147,37 +147,6 @@ export default {
     //   //  Load the next frame
     //   loadVideoFrames();
     // },
-    // prefetch_file(url, fetched_callback, progress_callback, error_callback) {
-    //   var xhr = new XMLHttpRequest();
-    //   xhr.open("GET", url, true);
-    //   xhr.responseType = "blob";
-
-    //   xhr.addEventListener(
-    //     "load",
-    //     function () {
-    //       if (xhr.status === 200) {
-    //         var URL = window.URL || window.webkitURL;
-    //         var blob_url = URL.createObjectURL(xhr.response);
-    //         fetched_callback(blob_url);
-    //       } else {
-    //         error_callback();
-    //       }
-    //     },
-    //     false
-    //   );
-
-    //   var prev_pc = 0;
-    //   xhr.addEventListener("progress", function (event) {
-    //     if (event.lengthComputable) {
-    //       var pc = Math.round((event.loaded / event.total) * 100);
-    //       if (pc != prev_pc) {
-    //         prev_pc = pc;
-    //         progress_callback(pc);
-    //       }
-    //     }
-    //   });
-    //   xhr.send();
-    // },
     // async extractFramesFromVideo(videoUrl, fps = 25) {
     //   // fully download it first (no buffering):
     //   console.log(videoUrl);

NUXT/store/player/index.js

@@ -0,0 +1,25 @@
+export const state = () => ({
+  loop: null,
+  speed: null,
+  preload: null,
+  quality: null,
+  // qualityAutoSwitch: null,
+  // shortFullscreen: null,
+  // autoplay: null,
+  // shorts: null,
+  // music: null,
+});
+export const mutations = {
+  setLoop(state, payload) {
+    state.loop = payload;
+  },
+  setSpeed(state, payload) {
+    state.loading = payload;
+  },
+  setPreload(state, payload) {
+    state.preload = payload;
+  },
+  setQuality(state, payload) {
+    state.quality = payload;
+  },
+};