From 4fb7e764a6c12028260b5e446224865438935dee Mon Sep 17 00:00:00 2001
From: Nikita Krupin <krupin.nikita0110@gmail.com>
Date: Mon, 23 May 2022 16:03:03 -0400
Subject: [PATCH 01/13] background opacity, better scrubber preview thumbnail
 styling, mor copypasta

---
 .../compactChannelRenderer.vue                |   2 +
 NUXT/components/Player/legacy.vue             | 211 +++++++++++++-----
 NUXT/components/playlistCard.vue              |  12 +-
 NUXT/components/topNavigation.vue             |   6 +-
 NUXT/pages/watch.vue                          |   2 +-
 5 files changed, 164 insertions(+), 69 deletions(-)

diff --git a/NUXT/components/CompactRenderers/compactChannelRenderer.vue b/NUXT/components/CompactRenderers/compactChannelRenderer.vue
index 643b968..7712300 100644
--- a/NUXT/components/CompactRenderers/compactChannelRenderer.vue
+++ b/NUXT/components/CompactRenderers/compactChannelRenderer.vue
@@ -51,6 +51,8 @@
         fab
         text
         elevation="0"
+        class="background--text"
+        :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
         style="width: 50px !important; height: 50px !important; z-index: 420"
       >
         <v-icon>mdi-share-outline</v-icon>
diff --git a/NUXT/components/Player/legacy.vue b/NUXT/components/Player/legacy.vue
index c586822..8fe61b8 100644
--- a/NUXT/components/Player/legacy.vue
+++ b/NUXT/components/Player/legacy.vue
@@ -14,6 +14,7 @@
       autoplay
       width="100%"
       :src="vidSrc"
+      style="filter: brightness(50%)"
       @webkitfullscreenchange="handleFullscreenChange"
     />
     <video
@@ -27,12 +28,12 @@
       query
       active
       style="width: 100%"
-      background-color="primary"
       background-opacity="0.5"
+      background-color="primary"
       :buffer-value="buffered"
       :value="percent"
       color="primary"
-      height="4"
+      height="2"
     />
 
     <!-- <v-btn
@@ -129,35 +130,44 @@
     </v-btn> -->
     <v-slider
       v-if="$refs.player"
-      dense
-      height="4"
       hide-details
+      height="2"
+      dense
       style="
         position: absolute;
+        z-index: 69420;
+        width: 100%;
         bottom: 0;
         left: 0;
-        width: 100%;
-        z-index: 69420;
       "
-      :value="progress"
+      :thumb-size="0"
       :max="duration"
+      :value="progress"
       @start="scrubbing = true"
       @end="scrubbing = false"
-      @input="seek($event)"
       @change="scrub($event)"
+      @input="seek($event)"
     >
+      <!-- :thumb-size="$refs.player.clientHeight / 3" -->
       <template #thumb-label="{ value }">
-        <canvas
-          ref="preview"
-          class="rounded-lg mb-8"
-          style="
-            border: 4px solid var(--v-primary-base);
-            margin-top: -20px !important;
-            top: -20px !important;
-          "
-          :width="$refs.player.clientWidth / 4"
-          :height="$refs.player.clientHeight / 4"
-        ></canvas>
+        <div style="transform: translateY(-50%)">
+          <canvas
+            ref="preview"
+            class="background"
+            :class="$vuetify.theme.dark ? 'lighten-4' : 'darken-4'"
+            :width="$refs.player.clientWidth / 3"
+            :height="$refs.player.clientHeight / 3"
+            style="border: 2px solid"
+            :style="{
+              borderRadius: $store.state.tweaks.roundWatch
+                ? `${$store.state.tweaks.roundTweak / 3}rem`
+                : '0',
+            }"
+          ></canvas>
+          <div class="text-center pb-5" style="font-size: 0.8rem">
+            <b>{{ $vuetube.humanTime(value) }}</b>
+          </div>
+        </div>
       </template>
     </v-slider>
   </div>
@@ -199,47 +209,126 @@ export default {
       }
     });
   },
-  // TODO: screenshot-based faster dynamic thumbnail preview
-  //   var video = document.getElementById("thumb");
-  // video.addEventListener("loadedmetadata", initScreenshot);
-  // video.addEventListener("playing", startScreenshot);
-  // video.addEventListener("pause", stopScreenshot);
-  // video.addEventListener("ended", stopScreenshot);
-
-  // var canvas = document.getElementById("canvas");
-  // var ctx = canvas.getContext("2d");
-  // var ssContainer = document.getElementById("screenShots");
-  // var videoHeight, videoWidth;
-  // var drawTimer = null;
-
-  // function initScreenshot() {
-  //   videoHeight = video.videoHeight;
-  //   videoWidth = video.videoWidth;
-  //   canvas.width = videoWidth;
-  //   canvas.height = videoHeight;
-  // }
-
-  // function startScreenshot() {
-  //   if (drawTimer == null) {
-  //     drawTimer = setInterval(grabScreenshot, 1000);
-  //   }
-  // }
-
-  // function stopScreenshot() {
-  //   if (drawTimer) {
-  //     clearInterval(drawTimer);
-  //     drawTimer = null;
-  //   }
-  // }
-
-  // function grabScreenshot() {
-  //   ctx.drawImage(video, 0, 0, videoWidth, videoHeight);
-  //   var img = new Image();
-  //   img.src = canvas.toDataURL("image/png");
-  //   img.width = 120;
-  //   ssContainer.appendChild(img);
-  // }
   methods: {
+    loadVideoFrames() {
+      // Exit loop if desired number of frames have been extracted
+      if (this.frames.length >= frameCount) {
+        this.visibleFrame = 0;
+
+        // Append all canvases to container div
+        this.frames.forEach((frame) => {
+          this.frameContainerElement.appendChild(frame);
+        });
+        return;
+      }
+
+      // If extraction hasn’t started, set desired time for first frame
+      if (this.frames.length === 0) {
+        this.requestedTime = 0;
+      } else {
+        this.requestedTime = this.requestedTime + this.frameTimestep;
+      }
+
+      // Send seek request to video player for the next frame.
+      this.videoElement.currentTime = this.requestedTime;
+    },
+    extractFrame(videoWidth, videoHeight) {
+      // Create DOM canvas object
+      var canvas = document.createElement("canvas");
+      canvas.className = "video-scrubber-frame";
+      canvas.height = videoHeight;
+      canvas.width = videoWidth;
+
+      // Copy current frame to canvas
+      var context = canvas.getContext("2d");
+      context.drawImage(this.videoElement, 0, 0, videoWidth, videoHeight);
+      this.frames.push(canvas);
+
+      //  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);
+      console.log(fps);
+      let videoBlob = await fetch(videoUrl, {
+        headers: { range: "bytes=0-567139" },
+      }).then((r) => r.blob());
+      console.log(videoBlob);
+      let videoObjectUrl = URL.createObjectURL(videoBlob);
+      let video = document.createElement("video");
+
+      let seekResolve;
+      video.addEventListener("seeked", async function () {
+        if (seekResolve) seekResolve();
+      });
+
+      video.src = videoObjectUrl;
+
+      // workaround chromium metadata bug (https://stackoverflow.com/q/38062864/993683)
+      while (
+        (video.duration === Infinity || isNaN(video.duration)) &&
+        video.readyState < 2
+      ) {
+        await new Promise((r) => setTimeout(r, 1000));
+        video.currentTime = 10000000 * Math.random();
+      }
+      let duration = video.duration;
+
+      let canvas = document.createElement("canvas");
+      let context = canvas.getContext("2d");
+      let [w, h] = [video.videoWidth, video.videoHeight];
+      canvas.width = w;
+      canvas.height = h;
+
+      let interval = 1;
+      let currentTime = 0;
+
+      while (currentTime < duration) {
+        video.currentTime = currentTime;
+        await new Promise((r) => (seekResolve = r));
+
+        context.drawImage(video, 0, 0, w, h);
+        let base64ImageData = canvas.toDataURL();
+        console.log(base64ImageData);
+        this.frames.push(base64ImageData);
+
+        currentTime += interval;
+      }
+      console.log("%c frames", "color: #00ff00");
+      console.log(this.frames);
+    },
     seek(e) {
       console.log(`scrubbing ${e}`);
       let vid = this.$refs.playerfake;
@@ -251,8 +340,8 @@ export default {
           vid,
           0,
           0,
-          this.$refs.player.clientWidth / 4,
-          this.$refs.player.clientHeight / 4
+          this.$refs.player.clientWidth / 3,
+          this.$refs.player.clientHeight / 3
         );
     },
     scrub(e) {
diff --git a/NUXT/components/playlistCard.vue b/NUXT/components/playlistCard.vue
index 47e3709..66623c2 100644
--- a/NUXT/components/playlistCard.vue
+++ b/NUXT/components/playlistCard.vue
@@ -25,19 +25,19 @@
       :class="$vuetify.theme.dark ? 'lighten-3' : 'darken-3'"
       :style="{
         borderRadius: $store.state.tweaks.roundThumb
-          ? `${$store.state.tweaks.roundTweak / 4}rem`
+          ? `${$store.state.tweaks.roundTweak / 2}rem`
           : '0',
       }"
     >
       <div
-        class="background d-flex flex-column justify-center align-center"
+        class="d-flex flex-column justify-center align-center"
         style="
           position: absolute;
           top: 0;
           right: 0;
-          width: 40%;
+          width: 50%;
           height: 100%;
-          opacity: 0.5;
+          background: linear-gradient(var(--v-background-base) -1000%, #00000000 1000%);
         "
       >
         <div>420</div>
@@ -64,7 +64,7 @@
         class="flex-grow-1"
         style="width: 2rem !important"
       >
-        <v-icon>mdi-playlist-plus</v-icon>
+        <v-icon>mdi-share-outline</v-icon>
       </v-btn>
       <v-btn
         text
@@ -73,7 +73,7 @@
         class="flex-grow-1"
         style="width: 2rem !important"
       >
-        <v-icon>mdi-share-outline</v-icon>
+        <v-icon>mdi-playlist-plus</v-icon>
       </v-btn>
     </div>
   </v-card>
diff --git a/NUXT/components/topNavigation.vue b/NUXT/components/topNavigation.vue
index 56a8a96..c16dcbd 100644
--- a/NUXT/components/topNavigation.vue
+++ b/NUXT/components/topNavigation.vue
@@ -1,5 +1,7 @@
 <template>
   <v-card style="display: flex" class="rounded-0 pa-3 topNav background">
+    <!-- opacity with vue 😉 -->
+    <!-- :style="{ background: $vuetify.theme.currentTheme.primary + '55' }" -->
     <h3
       v-show="!search"
       class="my-auto ml-4"
@@ -112,7 +114,9 @@ export default {
 
 <style scoped>
 .topNav {
-  /* box-shadow: inset 0 1rem 10rem var(--v-background-base) !important; */
+  /* opacity with hex, wow 😉 */
+  /* background: linear-gradient(var(--v-background-base) -1000%, #00000000 1000%); */
+  /* box-shadow: inset 0 0 5rem var(--v-background-base) !important; */
   height: calc(4rem + env(safe-area-inset-top)) !important;
   padding-top: env(safe-area-inset-top) !important;
   box-shadow: none !important;
diff --git a/NUXT/pages/watch.vue b/NUXT/pages/watch.vue
index 973f068..80aad62 100644
--- a/NUXT/pages/watch.vue
+++ b/NUXT/pages/watch.vue
@@ -57,7 +57,7 @@
           <v-icon class="ml-4" v-if="showMore">mdi-chevron-up</v-icon>
           <v-icon class="ml-4" v-else>mdi-chevron-down</v-icon>
         </div>
-        <div class="d-flex pl-2">
+        <div class="d-flex pl-6">
           <v-btn
             v-for="(item, index) in interactions"
             :key="index"

From 2d4b6e4424d8bd5181a7aa5fa9b3b387d3e450a5 Mon Sep 17 00:00:00 2001
From: Nikita Krupin <krupin.nikita0110@gmail.com>
Date: Fri, 27 May 2022 17:57:03 -0400
Subject: [PATCH 02/13] a functioning fullscreen toggle

---
 NUXT/components/Player/legacy.vue | 129 +++++++++++++++++-------------
 1 file changed, 73 insertions(+), 56 deletions(-)

diff --git a/NUXT/components/Player/legacy.vue b/NUXT/components/Player/legacy.vue
index 8fe61b8..f81e2b6 100644
--- a/NUXT/components/Player/legacy.vue
+++ b/NUXT/components/Player/legacy.vue
@@ -1,5 +1,6 @@
 <template>
   <div
+    ref="vidcontainer"
     class="d-flex flex-column"
     style="position: relative"
     :style="{
@@ -10,13 +11,12 @@
   >
     <video
       ref="player"
-      controls
       autoplay
       width="100%"
       :src="vidSrc"
-      style="filter: brightness(50%)"
-      @webkitfullscreenchange="handleFullscreenChange"
+      style="filter: brightness(50%); max-height: 100vh"
     />
+    <!-- @webkitfullscreenchange="handleFullscreenChange" -->
     <video
       ref="playerfake"
       muted
@@ -36,10 +36,9 @@
       height="2"
     />
 
-    <!-- <v-btn
+    <v-btn
       text
       tile
-      class="debug"
       style="position: absolute; top: 0; left: 0; width: 50%; height: 100%"
     >
       <v-icon>mdi-rewind</v-icon>
@@ -48,32 +47,25 @@
     <v-btn
       text
       tile
-      class="debug"
       style="position: absolute; top: 0; left: 50%; width: 50%; height: 100%"
     >
       <v-icon>mdi-fast-forward</v-icon>
     </v-btn>
 
-    <v-btn
-      text
-      class="debug"
-      style="position: absolute; top: 1rem; left: 1rem; border-radius: 2rem"
-      to="home"
-      disabled
-    >
+    <v-btn fab text style="position: absolute; top: 0; left: 0">
       <v-icon>mdi-chevron-down</v-icon>
     </v-btn>
+    <v-btn fab text style="position: absolute; top: 0; right: 7rem">
+      <v-icon>mdi-sync</v-icon>
+    </v-btn>
+    <v-btn fab text style="position: absolute; top: 0; right: 3.5rem">
+      <v-icon>mdi-closed-caption-outline</v-icon>
+    </v-btn>
+    <v-btn fab text style="position: absolute; top: 0; right: 0">
+      <v-icon>mdi-close</v-icon>
+    </v-btn>
 
     <v-btn
-      text
-      class="debug"
-      style="position: absolute; top: 1rem; right: 1rem; border-radius: 2rem"
-      to="home"
-    >
-      <v-icon>mdi-close</v-icon>
-    </v-btn> -->
-
-    <!-- <v-btn
       v-if="$refs.player"
       fab
       text
@@ -84,7 +76,6 @@
         top: calc(50% - 2.5rem);
         left: calc(50% - 2.5rem);
       "
-      class="debug"
       color="white"
       @click="$refs.player.paused ? $refs.player.play() : $refs.player.pause()"
     >
@@ -93,41 +84,33 @@
         size="5rem"
         v-text="$refs.player.paused ? 'mdi-play' : 'mdi-pause'"
       />
-    </v-btn> -->
+    </v-btn>
 
-    <!-- <div
-      v-if="$vuetify"
-      class="debug px-4 rounded-xl"
-      style="position: absolute; bottom: 2rem; left: 1rem"
+    <div
+      v-if="$refs.player"
+      style="position: absolute; bottom: 1.25rem; left: 1.25rem"
     >
       {{ watched }}
       <span style="color: #999"> / {{ total }} </span>
     </div>
-
-    <v-btn
-      text
-      class="debug"
-      style="
-        position: absolute;
-        bottom: 2rem;
-        right: 1rem;
-        border-radius: 0 2rem 2rem 0;
-      "
-    >
+    <v-btn fab text style="position: absolute; bottom: 0.25rem; right: 7rem">
+      1X
+    </v-btn>
+    <v-btn fab text style="position: absolute; bottom: 0.25rem; right: 3.5rem">
       HD
     </v-btn>
     <v-btn
+      fab
       text
-      class="debug"
-      style="
-        position: absolute;
-        bottom: 2rem;
-        right: 5rem;
-        border-radius: 2rem 0 0 2rem;
-      "
+      style="position: absolute; bottom: 0.25rem; right: 0"
+      @click="handleFullscreenChange()"
     >
-      1X
-    </v-btn> -->
+      <v-icon>{{
+        isFullscreen ? "mdi-fullscreen-exit" : "mdi-fullscreen"
+      }}</v-icon>
+    </v-btn>
+
+    <!-- Scrubber -->
     <v-slider
       v-if="$refs.player"
       hide-details
@@ -153,18 +136,17 @@
         <div style="transform: translateY(-50%)">
           <canvas
             ref="preview"
-            class="background"
-            :class="$vuetify.theme.dark ? 'lighten-4' : 'darken-4'"
+            class="white"
             :width="$refs.player.clientWidth / 3"
             :height="$refs.player.clientHeight / 3"
-            style="border: 2px solid"
+            style="border: 2px solid white"
             :style="{
               borderRadius: $store.state.tweaks.roundWatch
                 ? `${$store.state.tweaks.roundTweak / 3}rem`
                 : '0',
             }"
           ></canvas>
-          <div class="text-center pb-5" style="font-size: 0.8rem">
+          <div class="text-center pb-4" style="font-size: 0.8rem">
             <b>{{ $vuetube.humanTime(value) }}</b>
           </div>
         </div>
@@ -178,6 +160,7 @@ export default {
   props: ["vidSrc"],
   data() {
     return {
+      isFullscreen: false,
       scrubbing: false,
       percent: 0,
       progress: 0,
@@ -348,13 +331,47 @@ export default {
       this.$refs.player.currentTime = e;
     },
     handleFullscreenChange() {
-      if (document.fullscreenElement === this.$refs.player) {
-        this.$vuetube.statusBar.hide();
-        this.$vuetube.navigationBar.hide();
-      } else {
+      console.log(document.fullscreenElement);
+      if (document?.fullscreenElement === this.$refs.vidcontainer) {
+        // const cancellFullScreen =
+        //   document.exitFullscreen ||
+        //   document.mozCancelFullScreen ||
+        //   document.webkitExitFullscreen ||
+        //   document.msExitFullscreen;
+        // cancellFullScreen.call(document);
+        if (document.exitFullscreen) {
+          document.exitFullscreen();
+        } else if (document.mozCancelFullScreen) {
+          document.mozCancelFullScreen();
+        } else if (document.webkitExitFullscreen) {
+          document.webkitExitFullscreen();
+        }
+        this.isFullscreen = false;
         this.$vuetube.statusBar.show();
         this.$vuetube.navigationBar.show();
+      } else {
+        // const element = document;
+        // const requestFullScreen =
+        //   element.requestFullscreen ||
+        //   element.webkitRequestFullScreen ||
+        //   element.mozRequestFullScreen ||
+        //   element.msRequestFullScreen;
+        // requestFullScreen.call(element);
+        this.$refs.vidcontainer.requestFullscreen({
+          requireOrientation: "landscape",
+        });
+        this.isFullscreen = true;
+        this.$vuetube.statusBar.hide();
+        this.$vuetube.navigationBar.hide();
       }
+      // screen.orientation
+      //   .lock("landscape")
+      //   .then(function () {
+      //     console.log("Locked");
+      //   })
+      //   .catch(function (error) {
+      //     console.log(error);
+      //   });
     },
   },
 };

From a71bf8ba3191754ace2837177783a55ef36c44d6 Mon Sep 17 00:00:00 2001
From: Nikita Krupin <krupin.nikita0110@gmail.com>
Date: Fri, 27 May 2022 19:03:02 -0400
Subject: [PATCH 03/13] video controls toggle

---
 NUXT/components/Player/legacy.vue | 189 ++++++++++++++++++------------
 NUXT/pages/watch.vue              |   1 -
 2 files changed, 113 insertions(+), 77 deletions(-)

diff --git a/NUXT/components/Player/legacy.vue b/NUXT/components/Player/legacy.vue
index f81e2b6..ef0d326 100644
--- a/NUXT/components/Player/legacy.vue
+++ b/NUXT/components/Player/legacy.vue
@@ -8,15 +8,126 @@
         ? `${$store.state.tweaks.roundTweak / 3}rem`
         : '0',
     }"
+    @click="controls = !controls"
   >
     <video
       ref="player"
+      v-touch="{
+        down: () => ($refs.player.innerWidth = '50%'),
+        up: () => ($refs.player.fillStyle = 'cover'),
+      }"
       autoplay
       width="100%"
       :src="vidSrc"
-      style="filter: brightness(50%); max-height: 100vh"
+      style="transition: filter 0.15s ease-in-out; object-fit: cover"
+      :style="
+        controls ? 'filter: brightness(50%); max-height: 100vh' : 'filter: none'
+      "
     />
     <!-- @webkitfullscreenchange="handleFullscreenChange" -->
+
+    <v-btn
+      text
+      tile
+      style="
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 50%;
+        height: 100%;
+        opacity: 0;
+      "
+      @doubleclick.stop="$refs.player.currentTime -= $refs.player.duration / 10"
+    >
+      <v-icon>mdi-rewind</v-icon>
+    </v-btn>
+
+    <v-btn
+      text
+      tile
+      style="
+        position: absolute;
+        top: 0;
+        left: 50%;
+        width: 50%;
+        height: 100%;
+        opacity: 0;
+      "
+      @doubleclick.stop="$refs.player.currentTime += $refs.player.duration / 10"
+    >
+      <v-icon>mdi-fast-forward</v-icon>
+    </v-btn>
+
+    <div
+      style="transition: opacity 0.15s ease-in-out"
+      :style="controls ? 'opacity: 1;' : 'opacity: 0; pointer-events: none'"
+    >
+      <v-btn fab text style="position: absolute; top: 0; left: 0">
+        <v-icon>mdi-chevron-down</v-icon>
+      </v-btn>
+      <v-btn fab text style="position: absolute; top: 0; right: 7rem">
+        <v-icon>mdi-sync</v-icon>
+      </v-btn>
+      <v-btn fab text style="position: absolute; top: 0; right: 3.5rem">
+        <v-icon>mdi-closed-caption-outline</v-icon>
+      </v-btn>
+      <v-btn fab text style="position: absolute; top: 0; right: 0">
+        <v-icon>mdi-close</v-icon>
+      </v-btn>
+
+      <v-btn
+        v-if="$refs.player"
+        fab
+        text
+        style="
+          height: 5rem;
+          width: 5rem;
+          position: absolute;
+          top: calc(50% - 2.5rem);
+          left: calc(50% - 2.5rem);
+        "
+        color="white"
+        @click.stop="
+          $refs.player.paused
+            ? ($refs.player.play(), (controls = false))
+            : $refs.player.pause()
+        "
+      >
+        <v-icon
+          ref="pausePlayIndicator"
+          size="5rem"
+          v-text="$refs.player.paused ? 'mdi-play' : 'mdi-pause'"
+        />
+      </v-btn>
+
+      <div
+        v-if="$refs.player"
+        style="position: absolute; bottom: 1.25rem; left: 1.25rem"
+      >
+        {{ watched }}
+        <span style="color: #999"> / {{ total }} </span>
+      </div>
+      <v-btn fab text style="position: absolute; bottom: 0.25rem; right: 7rem">
+        1X
+      </v-btn>
+      <v-btn
+        fab
+        text
+        style="position: absolute; bottom: 0.25rem; right: 3.5rem"
+      >
+        HD
+      </v-btn>
+      <v-btn
+        fab
+        text
+        style="position: absolute; bottom: 0.25rem; right: 0"
+        @click.stop="(controls = $refs.player.paused), handleFullscreenChange()"
+      >
+        <v-icon>{{
+          isFullscreen ? "mdi-fullscreen-exit" : "mdi-fullscreen"
+        }}</v-icon>
+      </v-btn>
+    </div>
     <video
       ref="playerfake"
       muted
@@ -35,81 +146,6 @@
       color="primary"
       height="2"
     />
-
-    <v-btn
-      text
-      tile
-      style="position: absolute; top: 0; left: 0; width: 50%; height: 100%"
-    >
-      <v-icon>mdi-rewind</v-icon>
-    </v-btn>
-
-    <v-btn
-      text
-      tile
-      style="position: absolute; top: 0; left: 50%; width: 50%; height: 100%"
-    >
-      <v-icon>mdi-fast-forward</v-icon>
-    </v-btn>
-
-    <v-btn fab text style="position: absolute; top: 0; left: 0">
-      <v-icon>mdi-chevron-down</v-icon>
-    </v-btn>
-    <v-btn fab text style="position: absolute; top: 0; right: 7rem">
-      <v-icon>mdi-sync</v-icon>
-    </v-btn>
-    <v-btn fab text style="position: absolute; top: 0; right: 3.5rem">
-      <v-icon>mdi-closed-caption-outline</v-icon>
-    </v-btn>
-    <v-btn fab text style="position: absolute; top: 0; right: 0">
-      <v-icon>mdi-close</v-icon>
-    </v-btn>
-
-    <v-btn
-      v-if="$refs.player"
-      fab
-      text
-      style="
-        height: 5rem;
-        width: 5rem;
-        position: absolute;
-        top: calc(50% - 2.5rem);
-        left: calc(50% - 2.5rem);
-      "
-      color="white"
-      @click="$refs.player.paused ? $refs.player.play() : $refs.player.pause()"
-    >
-      <v-icon
-        ref="pausePlayIndicator"
-        size="5rem"
-        v-text="$refs.player.paused ? 'mdi-play' : 'mdi-pause'"
-      />
-    </v-btn>
-
-    <div
-      v-if="$refs.player"
-      style="position: absolute; bottom: 1.25rem; left: 1.25rem"
-    >
-      {{ watched }}
-      <span style="color: #999"> / {{ total }} </span>
-    </div>
-    <v-btn fab text style="position: absolute; bottom: 0.25rem; right: 7rem">
-      1X
-    </v-btn>
-    <v-btn fab text style="position: absolute; bottom: 0.25rem; right: 3.5rem">
-      HD
-    </v-btn>
-    <v-btn
-      fab
-      text
-      style="position: absolute; bottom: 0.25rem; right: 0"
-      @click="handleFullscreenChange()"
-    >
-      <v-icon>{{
-        isFullscreen ? "mdi-fullscreen-exit" : "mdi-fullscreen"
-      }}</v-icon>
-    </v-btn>
-
     <!-- Scrubber -->
     <v-slider
       v-if="$refs.player"
@@ -162,6 +198,7 @@ export default {
     return {
       isFullscreen: false,
       scrubbing: false,
+      controls: false,
       percent: 0,
       progress: 0,
       buffered: 0,
diff --git a/NUXT/pages/watch.vue b/NUXT/pages/watch.vue
index 80aad62..52cbe14 100644
--- a/NUXT/pages/watch.vue
+++ b/NUXT/pages/watch.vue
@@ -12,7 +12,6 @@
         v-if="useBetaPlayer !== 'true'"
         id="player"
         ref="player"
-        v-touch="{ down: () => $router.push('/home') }"
         :vid-src="vidSrc"
       />
     </div>

From 1b4e05746d941f9823c5e15333df55db564e04bb Mon Sep 17 00:00:00 2001
From: Nikita Krupin <krupin.nikita0110@gmail.com>
Date: Fri, 27 May 2022 19:49:18 -0400
Subject: [PATCH 04/13] controls fadein fix

---
 NUXT/components/Player/legacy.vue | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/NUXT/components/Player/legacy.vue b/NUXT/components/Player/legacy.vue
index ef0d326..789578e 100644
--- a/NUXT/components/Player/legacy.vue
+++ b/NUXT/components/Player/legacy.vue
@@ -1,6 +1,10 @@
 <template>
   <div
     ref="vidcontainer"
+    v-touch="{
+      down: () => ($refs.player.styles.width = '50% !important'),
+      up: () => ($refs.player.styles['object-fit'] = 'contain !important'),
+    }"
     class="d-flex flex-column"
     style="position: relative"
     :style="{
@@ -12,16 +16,14 @@
   >
     <video
       ref="player"
-      v-touch="{
-        down: () => ($refs.player.innerWidth = '50%'),
-        up: () => ($refs.player.fillStyle = 'cover'),
-      }"
       autoplay
       width="100%"
       :src="vidSrc"
-      style="transition: filter 0.15s ease-in-out; object-fit: cover"
+      style="transition: filter 0.15s ease-in-out; max-height: 100vh"
       :style="
-        controls ? 'filter: brightness(50%); max-height: 100vh' : 'filter: none'
+        controls
+          ? 'filter: brightness(50%); object-fit: contain'
+          : 'filter: none; object-fit: cover'
       "
     />
     <!-- @webkitfullscreenchange="handleFullscreenChange" -->
@@ -368,6 +370,7 @@ export default {
       this.$refs.player.currentTime = e;
     },
     handleFullscreenChange() {
+      console.log(this.$refs.player);
       console.log(document.fullscreenElement);
       if (document?.fullscreenElement === this.$refs.vidcontainer) {
         // const cancellFullScreen =

From be68be7842f291293cbadacc3e38c2af50ad4542 Mon Sep 17 00:00:00 2001
From: Nikita Krupin <krupin.nikita0110@gmail.com>
Date: Fri, 27 May 2022 20:17:30 -0400
Subject: [PATCH 05/13] dividers bugfix

---
 NUXT/store/tweaks/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/NUXT/store/tweaks/index.js b/NUXT/store/tweaks/index.js
index 3244659..f66e1cb 100644
--- a/NUXT/store/tweaks/index.js
+++ b/NUXT/store/tweaks/index.js
@@ -8,7 +8,7 @@ export const mutations = {
     // NOTE: localStorage is not reactive, so it will only be used on first load
     // currently called on mounted() in pages/index.vue
     if (process.client) {
-      state.roundTweak = localStorage.getItem("roundTweak") || 0;
+      state.roundTweak = JSON.parse(localStorage.getItem("roundTweak")) || 0;
       state.roundThumb =
         JSON.parse(localStorage.getItem("roundThumb")) === true;
       state.roundWatch =

From c41c66fa5b4c496857bf8c2addec91077657bcde Mon Sep 17 00:00:00 2001
From: Nikita Krupin <krupin.nikita0110@gmail.com>
Date: Fri, 27 May 2022 21:36:26 -0400
Subject: [PATCH 06/13] nuke legacy

---
 NUXT/components/Player/index.vue  | 407 +++++++++++++++++++++++++++--
 NUXT/components/Player/legacy.vue | 418 ------------------------------
 NUXT/pages/watch.vue              |  46 +---
 3 files changed, 400 insertions(+), 471 deletions(-)
 delete mode 100644 NUXT/components/Player/legacy.vue

diff --git a/NUXT/components/Player/index.vue b/NUXT/components/Player/index.vue
index b59fde3..abc230d 100644
--- a/NUXT/components/Player/index.vue
+++ b/NUXT/components/Player/index.vue
@@ -1,23 +1,193 @@
 <template>
-  <div style="position: relative">
+  <div
+    ref="vidcontainer"
+    v-touch="{
+      down: () => ($refs.player.styles.width = '50% !important'),
+      up: () => ($refs.player.styles['object-fit'] = 'contain !important'),
+    }"
+    class="d-flex flex-column"
+    style="position: relative"
+    :style="{
+      borderRadius: $store.state.tweaks.roundWatch
+        ? `${$store.state.tweaks.roundTweak / 3}rem`
+        : '0',
+    }"
+    @click="controls = !controls"
+  >
     <video
       ref="player"
       autoplay
-      :src="vidSrc"
       width="100%"
-      style="max-height: 50vh; display: block; overflow: hidden !important"
-      :style="{
-        borderRadius: $store.state.tweaks.roundWatch
-          ? `${$store.state.tweaks.roundTweak / 4}rem`
-          : '0',
-      }"
-      @webkitfullscreenchange="handleFullscreenChange"
+      :src="vidSrc"
+      style="transition: filter 0.15s ease-in-out; max-height: 100vh"
+      :style="
+        controls
+          ? 'filter: brightness(50%); object-fit: contain'
+          : 'filter: none; object-fit: cover'
+      "
     />
+    <!-- @webkitfullscreenchange="handleFullscreenChange" -->
 
-    <seekbar :video="$refs.player" v-if="$refs.player" />
-    <controls v-if="$refs.player" :video="$refs.player" />
+    <v-btn
+      text
+      tile
+      style="
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 50%;
+        height: 100%;
+        opacity: 0;
+      "
+      @doubleclick.stop="$refs.player.currentTime -= $refs.player.duration / 10"
+    >
+      <v-icon>mdi-rewind</v-icon>
+    </v-btn>
 
-    <!-- <v-slider v-model="value" step="0"></v-slider> -->
+    <v-btn
+      text
+      tile
+      style="
+        position: absolute;
+        top: 0;
+        left: 50%;
+        width: 50%;
+        height: 100%;
+        opacity: 0;
+      "
+      @doubleclick.stop="$refs.player.currentTime += $refs.player.duration / 10"
+    >
+      <v-icon>mdi-fast-forward</v-icon>
+    </v-btn>
+
+    <div
+      style="transition: opacity 0.15s ease-in-out"
+      :style="controls ? 'opacity: 1;' : 'opacity: 0; pointer-events: none'"
+    >
+      <v-btn fab text style="position: absolute; top: 0; left: 0">
+        <v-icon>mdi-chevron-down</v-icon>
+      </v-btn>
+      <v-btn fab text style="position: absolute; top: 0; right: 7rem">
+        <v-icon>mdi-sync</v-icon>
+      </v-btn>
+      <v-btn fab text style="position: absolute; top: 0; right: 3.5rem">
+        <v-icon>mdi-closed-caption-outline</v-icon>
+      </v-btn>
+      <v-btn fab text style="position: absolute; top: 0; right: 0">
+        <v-icon>mdi-close</v-icon>
+      </v-btn>
+
+      <v-btn
+        v-if="$refs.player"
+        fab
+        text
+        style="
+          height: 5rem;
+          width: 5rem;
+          position: absolute;
+          top: calc(50% - 2.5rem);
+          left: calc(50% - 2.5rem);
+        "
+        color="white"
+        @click.stop="
+          $refs.player.paused
+            ? ($refs.player.play(), (controls = false))
+            : $refs.player.pause()
+        "
+      >
+        <v-icon
+          ref="pausePlayIndicator"
+          size="5rem"
+          v-text="$refs.player.paused ? 'mdi-play' : 'mdi-pause'"
+        />
+      </v-btn>
+
+      <div
+        v-if="$refs.player"
+        style="position: absolute; bottom: 1.25rem; left: 1.25rem"
+      >
+        {{ watched }}
+        <span style="color: #999"> / {{ total }} </span>
+      </div>
+      <!-- <v-btn fab text style="position: absolute; bottom: 0.25rem; right: 7rem">
+        1X
+      </v-btn>
+      <v-btn fab text style="position: absolute; bottom: 0.25rem; right: 3rem">
+        HD
+      </v-btn> -->
+      <v-btn
+        fab
+        text
+        style="position: absolute; bottom: 0.25rem; right: 0"
+        @click.stop="(controls = $refs.player.paused), handleFullscreenChange()"
+      >
+        <v-icon>{{
+          isFullscreen ? "mdi-fullscreen-exit" : "mdi-fullscreen"
+        }}</v-icon>
+      </v-btn>
+    </div>
+    <div>
+      <video
+        ref="playerfake"
+        muted
+        autoplay
+        style="display: none"
+        :src="vidWrs"
+      />
+      <v-progress-linear
+        query
+        active
+        style="width: 100%"
+        background-opacity="0.5"
+        background-color="primary"
+        :buffer-value="buffered"
+        :value="percent"
+        color="primary"
+        height="2"
+      />
+      <!-- Scrubber -->
+      <v-slider
+        v-if="$refs.player"
+        hide-details
+        height="2"
+        dense
+        style="
+          position: absolute;
+          z-index: 69420;
+          width: 100%;
+          bottom: 0;
+          left: 0;
+        "
+        :thumb-size="0"
+        :max="duration"
+        :value="progress"
+        @start="scrubbing = true"
+        @end="scrubbing = false"
+        @change="scrub($event)"
+        @input="seek($event)"
+      >
+        <!-- :thumb-size="$refs.player.clientHeight / 3" -->
+        <template #thumb-label="{ value }">
+          <div style="transform: translateY(-50%)">
+            <canvas
+              ref="preview"
+              class="white"
+              :width="$refs.player.clientWidth / 3"
+              :height="$refs.player.clientHeight / 3"
+              style="border: 2px solid white"
+              :style="{
+                borderRadius: $store.state.tweaks.roundWatch
+                  ? `${$store.state.tweaks.roundTweak / 3}rem`
+                  : '0',
+              }"
+            ></canvas>
+            <div class="text-center pb-4" style="font-size: 0.8rem">
+              <b>{{ $vuetube.humanTime(value) }}</b>
+            </div>
+          </div>
+        </template>
+      </v-slider>
+    </div>
   </div>
 </template>
 
@@ -33,23 +203,226 @@ export default {
   props: ["sources"],
   data() {
     return {
+      isFullscreen: false,
+      scrubbing: false,
+      controls: false,
+      percent: 0,
+      progress: 0,
+      buffered: 0,
+      duration: 0,
+      watched: 0,
+      total: 0,
       vidSrc: "",
+      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.$refs.player;
+    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;
+          this.watched = this.$vuetube.humanTime(vid.currentTime);
+          this.total = this.$vuetube.humanTime(vid.duration);
+        };
+        vid.onprogress = () => {
+          console.log("%c progress", "color: #ff00ff");
+          this.buffered = (vid.buffered.end(0) / vid.duration) * 100;
+        };
+      }
+    });
   },
   methods: {
-    handleFullscreenChange() {
-      if (document.fullscreenElement === this.$refs.player) {
-        this.$vuetube.statusBar.hide();
-        this.$vuetube.navigationBar.hide();
+    loadVideoFrames() {
+      // Exit loop if desired number of frames have been extracted
+      if (this.frames.length >= frameCount) {
+        this.visibleFrame = 0;
+
+        // Append all canvases to container div
+        this.frames.forEach((frame) => {
+          this.frameContainerElement.appendChild(frame);
+        });
+        return;
+      }
+
+      // If extraction hasn’t started, set desired time for first frame
+      if (this.frames.length === 0) {
+        this.requestedTime = 0;
       } else {
+        this.requestedTime = this.requestedTime + this.frameTimestep;
+      }
+
+      // Send seek request to video player for the next frame.
+      this.videoElement.currentTime = this.requestedTime;
+    },
+    extractFrame(videoWidth, videoHeight) {
+      // Create DOM canvas object
+      var canvas = document.createElement("canvas");
+      canvas.className = "video-scrubber-frame";
+      canvas.height = videoHeight;
+      canvas.width = videoWidth;
+
+      // Copy current frame to canvas
+      var context = canvas.getContext("2d");
+      context.drawImage(this.videoElement, 0, 0, videoWidth, videoHeight);
+      this.frames.push(canvas);
+
+      //  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);
+      console.log(fps);
+      let videoBlob = await fetch(videoUrl, {
+        headers: { range: "bytes=0-567139" },
+      }).then((r) => r.blob());
+      console.log(videoBlob);
+      let videoObjectUrl = URL.createObjectURL(videoBlob);
+      let video = document.createElement("video");
+
+      let seekResolve;
+      video.addEventListener("seeked", async function () {
+        if (seekResolve) seekResolve();
+      });
+
+      video.src = videoObjectUrl;
+
+      // workaround chromium metadata bug (https://stackoverflow.com/q/38062864/993683)
+      while (
+        (video.duration === Infinity || isNaN(video.duration)) &&
+        video.readyState < 2
+      ) {
+        await new Promise((r) => setTimeout(r, 1000));
+        video.currentTime = 10000000 * Math.random();
+      }
+      let duration = video.duration;
+
+      let canvas = document.createElement("canvas");
+      let context = canvas.getContext("2d");
+      let [w, h] = [video.videoWidth, video.videoHeight];
+      canvas.width = w;
+      canvas.height = h;
+
+      let interval = 1;
+      let currentTime = 0;
+
+      while (currentTime < duration) {
+        video.currentTime = currentTime;
+        await new Promise((r) => (seekResolve = r));
+
+        context.drawImage(video, 0, 0, w, h);
+        let base64ImageData = canvas.toDataURL();
+        console.log(base64ImageData);
+        this.frames.push(base64ImageData);
+
+        currentTime += interval;
+      }
+      console.log("%c frames", "color: #00ff00");
+      console.log(this.frames);
+    },
+    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.$refs.player.clientWidth / 3,
+          this.$refs.player.clientHeight / 3
+        );
+    },
+    scrub(e) {
+      this.$refs.player.currentTime = e;
+    },
+    handleFullscreenChange() {
+      console.log(this.$refs.player);
+      console.log(document.fullscreenElement);
+      if (document?.fullscreenElement === this.$refs.vidcontainer) {
+        // const cancellFullScreen =
+        //   document.exitFullscreen ||
+        //   document.mozCancelFullScreen ||
+        //   document.webkitExitFullscreen ||
+        //   document.msExitFullscreen;
+        // cancellFullScreen.call(document);
+        if (document.exitFullscreen) {
+          document.exitFullscreen();
+        } else if (document.mozCancelFullScreen) {
+          document.mozCancelFullScreen();
+        } else if (document.webkitExitFullscreen) {
+          document.webkitExitFullscreen();
+        }
+        this.isFullscreen = false;
         this.$vuetube.statusBar.show();
         this.$vuetube.navigationBar.show();
+      } else {
+        // const element = document;
+        // const requestFullScreen =
+        //   element.requestFullscreen ||
+        //   element.webkitRequestFullScreen ||
+        //   element.mozRequestFullScreen ||
+        //   element.msRequestFullScreen;
+        // requestFullScreen.call(element);
+        this.$refs.vidcontainer.requestFullscreen({
+          requireOrientation: "landscape",
+        });
+        this.isFullscreen = true;
+        this.$vuetube.statusBar.hide();
+        this.$vuetube.navigationBar.hide();
       }
+      // screen.orientation
+      //   .lock("landscape")
+      //   .then(function () {
+      //     console.log("Locked");
+      //   })
+      //   .catch(function (error) {
+      //     console.log(error);
+      //   });
     },
-
     getPlayer() {
       return this.$refs.player;
     },
diff --git a/NUXT/components/Player/legacy.vue b/NUXT/components/Player/legacy.vue
deleted file mode 100644
index 789578e..0000000
--- a/NUXT/components/Player/legacy.vue
+++ /dev/null
@@ -1,418 +0,0 @@
-<template>
-  <div
-    ref="vidcontainer"
-    v-touch="{
-      down: () => ($refs.player.styles.width = '50% !important'),
-      up: () => ($refs.player.styles['object-fit'] = 'contain !important'),
-    }"
-    class="d-flex flex-column"
-    style="position: relative"
-    :style="{
-      borderRadius: $store.state.tweaks.roundWatch
-        ? `${$store.state.tweaks.roundTweak / 3}rem`
-        : '0',
-    }"
-    @click="controls = !controls"
-  >
-    <video
-      ref="player"
-      autoplay
-      width="100%"
-      :src="vidSrc"
-      style="transition: filter 0.15s ease-in-out; max-height: 100vh"
-      :style="
-        controls
-          ? 'filter: brightness(50%); object-fit: contain'
-          : 'filter: none; object-fit: cover'
-      "
-    />
-    <!-- @webkitfullscreenchange="handleFullscreenChange" -->
-
-    <v-btn
-      text
-      tile
-      style="
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 50%;
-        height: 100%;
-        opacity: 0;
-      "
-      @doubleclick.stop="$refs.player.currentTime -= $refs.player.duration / 10"
-    >
-      <v-icon>mdi-rewind</v-icon>
-    </v-btn>
-
-    <v-btn
-      text
-      tile
-      style="
-        position: absolute;
-        top: 0;
-        left: 50%;
-        width: 50%;
-        height: 100%;
-        opacity: 0;
-      "
-      @doubleclick.stop="$refs.player.currentTime += $refs.player.duration / 10"
-    >
-      <v-icon>mdi-fast-forward</v-icon>
-    </v-btn>
-
-    <div
-      style="transition: opacity 0.15s ease-in-out"
-      :style="controls ? 'opacity: 1;' : 'opacity: 0; pointer-events: none'"
-    >
-      <v-btn fab text style="position: absolute; top: 0; left: 0">
-        <v-icon>mdi-chevron-down</v-icon>
-      </v-btn>
-      <v-btn fab text style="position: absolute; top: 0; right: 7rem">
-        <v-icon>mdi-sync</v-icon>
-      </v-btn>
-      <v-btn fab text style="position: absolute; top: 0; right: 3.5rem">
-        <v-icon>mdi-closed-caption-outline</v-icon>
-      </v-btn>
-      <v-btn fab text style="position: absolute; top: 0; right: 0">
-        <v-icon>mdi-close</v-icon>
-      </v-btn>
-
-      <v-btn
-        v-if="$refs.player"
-        fab
-        text
-        style="
-          height: 5rem;
-          width: 5rem;
-          position: absolute;
-          top: calc(50% - 2.5rem);
-          left: calc(50% - 2.5rem);
-        "
-        color="white"
-        @click.stop="
-          $refs.player.paused
-            ? ($refs.player.play(), (controls = false))
-            : $refs.player.pause()
-        "
-      >
-        <v-icon
-          ref="pausePlayIndicator"
-          size="5rem"
-          v-text="$refs.player.paused ? 'mdi-play' : 'mdi-pause'"
-        />
-      </v-btn>
-
-      <div
-        v-if="$refs.player"
-        style="position: absolute; bottom: 1.25rem; left: 1.25rem"
-      >
-        {{ watched }}
-        <span style="color: #999"> / {{ total }} </span>
-      </div>
-      <v-btn fab text style="position: absolute; bottom: 0.25rem; right: 7rem">
-        1X
-      </v-btn>
-      <v-btn
-        fab
-        text
-        style="position: absolute; bottom: 0.25rem; right: 3.5rem"
-      >
-        HD
-      </v-btn>
-      <v-btn
-        fab
-        text
-        style="position: absolute; bottom: 0.25rem; right: 0"
-        @click.stop="(controls = $refs.player.paused), handleFullscreenChange()"
-      >
-        <v-icon>{{
-          isFullscreen ? "mdi-fullscreen-exit" : "mdi-fullscreen"
-        }}</v-icon>
-      </v-btn>
-    </div>
-    <video
-      ref="playerfake"
-      muted
-      autoplay
-      style="display: none"
-      :src="vidSrc"
-    />
-    <v-progress-linear
-      query
-      active
-      style="width: 100%"
-      background-opacity="0.5"
-      background-color="primary"
-      :buffer-value="buffered"
-      :value="percent"
-      color="primary"
-      height="2"
-    />
-    <!-- Scrubber -->
-    <v-slider
-      v-if="$refs.player"
-      hide-details
-      height="2"
-      dense
-      style="
-        position: absolute;
-        z-index: 69420;
-        width: 100%;
-        bottom: 0;
-        left: 0;
-      "
-      :thumb-size="0"
-      :max="duration"
-      :value="progress"
-      @start="scrubbing = true"
-      @end="scrubbing = false"
-      @change="scrub($event)"
-      @input="seek($event)"
-    >
-      <!-- :thumb-size="$refs.player.clientHeight / 3" -->
-      <template #thumb-label="{ value }">
-        <div style="transform: translateY(-50%)">
-          <canvas
-            ref="preview"
-            class="white"
-            :width="$refs.player.clientWidth / 3"
-            :height="$refs.player.clientHeight / 3"
-            style="border: 2px solid white"
-            :style="{
-              borderRadius: $store.state.tweaks.roundWatch
-                ? `${$store.state.tweaks.roundTweak / 3}rem`
-                : '0',
-            }"
-          ></canvas>
-          <div class="text-center pb-4" style="font-size: 0.8rem">
-            <b>{{ $vuetube.humanTime(value) }}</b>
-          </div>
-        </div>
-      </template>
-    </v-slider>
-  </div>
-</template>
-
-<script>
-export default {
-  props: ["vidSrc"],
-  data() {
-    return {
-      isFullscreen: false,
-      scrubbing: false,
-      controls: false,
-      percent: 0,
-      progress: 0,
-      buffered: 0,
-      duration: 0,
-      watched: 0,
-      total: 0,
-    };
-  },
-  mounted() {
-    let vid = this.$refs.player;
-    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;
-          this.watched = this.$vuetube.humanTime(vid.currentTime);
-          this.total = this.$vuetube.humanTime(vid.duration);
-        };
-        vid.onprogress = () => {
-          console.log("%c progress", "color: #ff00ff");
-          this.buffered = (vid.buffered.end(0) / vid.duration) * 100;
-        };
-      }
-    });
-  },
-  methods: {
-    loadVideoFrames() {
-      // Exit loop if desired number of frames have been extracted
-      if (this.frames.length >= frameCount) {
-        this.visibleFrame = 0;
-
-        // Append all canvases to container div
-        this.frames.forEach((frame) => {
-          this.frameContainerElement.appendChild(frame);
-        });
-        return;
-      }
-
-      // If extraction hasn’t started, set desired time for first frame
-      if (this.frames.length === 0) {
-        this.requestedTime = 0;
-      } else {
-        this.requestedTime = this.requestedTime + this.frameTimestep;
-      }
-
-      // Send seek request to video player for the next frame.
-      this.videoElement.currentTime = this.requestedTime;
-    },
-    extractFrame(videoWidth, videoHeight) {
-      // Create DOM canvas object
-      var canvas = document.createElement("canvas");
-      canvas.className = "video-scrubber-frame";
-      canvas.height = videoHeight;
-      canvas.width = videoWidth;
-
-      // Copy current frame to canvas
-      var context = canvas.getContext("2d");
-      context.drawImage(this.videoElement, 0, 0, videoWidth, videoHeight);
-      this.frames.push(canvas);
-
-      //  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);
-      console.log(fps);
-      let videoBlob = await fetch(videoUrl, {
-        headers: { range: "bytes=0-567139" },
-      }).then((r) => r.blob());
-      console.log(videoBlob);
-      let videoObjectUrl = URL.createObjectURL(videoBlob);
-      let video = document.createElement("video");
-
-      let seekResolve;
-      video.addEventListener("seeked", async function () {
-        if (seekResolve) seekResolve();
-      });
-
-      video.src = videoObjectUrl;
-
-      // workaround chromium metadata bug (https://stackoverflow.com/q/38062864/993683)
-      while (
-        (video.duration === Infinity || isNaN(video.duration)) &&
-        video.readyState < 2
-      ) {
-        await new Promise((r) => setTimeout(r, 1000));
-        video.currentTime = 10000000 * Math.random();
-      }
-      let duration = video.duration;
-
-      let canvas = document.createElement("canvas");
-      let context = canvas.getContext("2d");
-      let [w, h] = [video.videoWidth, video.videoHeight];
-      canvas.width = w;
-      canvas.height = h;
-
-      let interval = 1;
-      let currentTime = 0;
-
-      while (currentTime < duration) {
-        video.currentTime = currentTime;
-        await new Promise((r) => (seekResolve = r));
-
-        context.drawImage(video, 0, 0, w, h);
-        let base64ImageData = canvas.toDataURL();
-        console.log(base64ImageData);
-        this.frames.push(base64ImageData);
-
-        currentTime += interval;
-      }
-      console.log("%c frames", "color: #00ff00");
-      console.log(this.frames);
-    },
-    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.$refs.player.clientWidth / 3,
-          this.$refs.player.clientHeight / 3
-        );
-    },
-    scrub(e) {
-      this.$refs.player.currentTime = e;
-    },
-    handleFullscreenChange() {
-      console.log(this.$refs.player);
-      console.log(document.fullscreenElement);
-      if (document?.fullscreenElement === this.$refs.vidcontainer) {
-        // const cancellFullScreen =
-        //   document.exitFullscreen ||
-        //   document.mozCancelFullScreen ||
-        //   document.webkitExitFullscreen ||
-        //   document.msExitFullscreen;
-        // cancellFullScreen.call(document);
-        if (document.exitFullscreen) {
-          document.exitFullscreen();
-        } else if (document.mozCancelFullScreen) {
-          document.mozCancelFullScreen();
-        } else if (document.webkitExitFullscreen) {
-          document.webkitExitFullscreen();
-        }
-        this.isFullscreen = false;
-        this.$vuetube.statusBar.show();
-        this.$vuetube.navigationBar.show();
-      } else {
-        // const element = document;
-        // const requestFullScreen =
-        //   element.requestFullscreen ||
-        //   element.webkitRequestFullScreen ||
-        //   element.mozRequestFullScreen ||
-        //   element.msRequestFullScreen;
-        // requestFullScreen.call(element);
-        this.$refs.vidcontainer.requestFullscreen({
-          requireOrientation: "landscape",
-        });
-        this.isFullscreen = true;
-        this.$vuetube.statusBar.hide();
-        this.$vuetube.navigationBar.hide();
-      }
-      // screen.orientation
-      //   .lock("landscape")
-      //   .then(function () {
-      //     console.log("Locked");
-      //   })
-      //   .catch(function (error) {
-      //     console.log(error);
-      //   });
-    },
-  },
-};
-</script>
diff --git a/NUXT/pages/watch.vue b/NUXT/pages/watch.vue
index 52cbe14..7a7ed9f 100644
--- a/NUXT/pages/watch.vue
+++ b/NUXT/pages/watch.vue
@@ -2,18 +2,7 @@
   <div class="background" id="watch-body">
     <div id="player-container">
       <!--   VueTube Player V1   -->
-      <vuetubePlayer
-        v-if="useBetaPlayer === 'true' && sources.length > 0"
-        :sources="sources"
-      />
-
-      <!--   Stock Player   -->
-      <legacyPlayer
-        v-if="useBetaPlayer !== 'true'"
-        id="player"
-        ref="player"
-        :vid-src="vidSrc"
-      />
+      <player v-if="sources.length > 0" ref="player" :sources="sources" />
     </div>
 
     <div
@@ -261,29 +250,27 @@
 </template>
 
 <script>
+import player from "~/components/Player/index.vue";
 import { Share } from "@capacitor/share";
-import VidLoadRenderer from "~/components/vidLoadRenderer.vue";
 import { getCpn } from "~/plugins/utils";
-import SlimVideoDescriptionRenderer from "~/components/UtilRenderers/slimVideoDescriptionRenderer.vue";
-import ItemSectionRenderer from "~/components/SectionRenderers/itemSectionRenderer.vue";
-import legacyPlayer from "~/components/Player/legacy.vue";
-import vuetubePlayer from "~/components/Player/index.vue";
 import ShelfRenderer from "~/components/SectionRenderers/shelfRenderer.vue";
+import VidLoadRenderer from "~/components/vidLoadRenderer.vue";
+import ItemSectionRenderer from "~/components/SectionRenderers/itemSectionRenderer.vue";
 import mainCommentRenderer from "~/components/Comments/mainCommentRenderer.vue";
 import SwipeableBottomSheet from "~/components/ExtendedComponents/swipeableBottomSheet";
+import SlimVideoDescriptionRenderer from "~/components/UtilRenderers/slimVideoDescriptionRenderer.vue";
 
 import backType from "~/plugins/classes/backType";
 
 export default {
   components: {
+    player,
     ShelfRenderer,
     VidLoadRenderer,
-    SlimVideoDescriptionRenderer,
-    vuetubePlayer,
-    legacyPlayer,
     ItemSectionRenderer,
-    SwipeableBottomSheet,
     mainCommentRenderer,
+    SwipeableBottomSheet,
+    SlimVideoDescriptionRenderer,
   },
   layout: "empty",
   // transition(to) { // TODO: fix layout switching
@@ -303,7 +290,6 @@ export default {
           // Exit fullscreen if currently in fullscreen
           // if (this.$refs.player) this.$refs.player.webkitExitFullscreen();
           // Reset player and run getVideo function again
-          // this.vidSrc = "";
           // this.startTime = Math.floor(Date.now() / 1000);
           // this.getVideo();
           clearInterval(this.interval);
@@ -328,18 +314,9 @@ export default {
       this.loaded = false;
 
       this.$youtube.getVid(this.$route.query.v).then((result) => {
-        this.video = result;
-        console.log("Video info data", result);
-        console.log(result.availableResolutions);
-
-        //---   VueTube Player v1   ---//
         this.sources = result.availableResolutions;
-
-        //---   Legacy Player   ---//
-        this.vidSrc =
-          result.availableResolutions[
-            result.availableResolutions.length - 1
-          ].url; // Takes the highest available resolution with both video and Audio. Note this will be lower than the actual highest resolution
+        console.log("Video info data", result);
+        this.video = result;
 
         //---   Content Stuff   ---//
         this.likes = result.metadata.likes.toLocaleString();
@@ -462,13 +439,11 @@ export default {
         showMore: false,
         showComments: false,
         // share: false,
-        vidSrc: null,
         sources: [],
         recommends: null,
         loaded: false,
         interval: null,
         video: null,
-        useBetaPlayer: false,
         backHierarchy: [],
       };
     },
@@ -476,7 +451,6 @@ export default {
     mountedInit() {
       this.startTime = Math.floor(Date.now() / 1000);
       this.getVideo();
-      this.useBetaPlayer = localStorage.getItem("debug.BetaPlayer");
 
       //  Reset vertical scrolling
       const scrollableList = document.querySelectorAll(".overflow-y-auto");

From 136ed86afa245a7d5f5ac0b1d33e1314bcff765f Mon Sep 17 00:00:00 2001
From: Nikita Krupin <krupin.nikita0110@gmail.com>
Date: Sat, 28 May 2022 01:16:27 -0400
Subject: [PATCH 07/13] player split

---
 NUXT/components/Player/captions.vue   |   5 +
 NUXT/components/Player/controls.vue   | 116 ----------
 NUXT/components/Player/fullscreen.vue |  17 ++
 NUXT/components/Player/index.vue      | 320 +++-----------------------
 NUXT/components/Player/loop.vue       |   5 +
 NUXT/components/Player/playpause.vue  |  32 +++
 NUXT/components/Player/quality.vue    |   5 +
 NUXT/components/Player/seekbar.vue    | 245 ++++++++++++++++++--
 NUXT/components/Player/speed.vue      |   5 +
 NUXT/components/Player/watchtime.vue  |  31 +++
 NUXT/pages/watch.vue                  |   1 +
 NUXT/plugins/vuetube.js               |  14 +-
 12 files changed, 373 insertions(+), 423 deletions(-)
 create mode 100644 NUXT/components/Player/captions.vue
 delete mode 100644 NUXT/components/Player/controls.vue
 create mode 100644 NUXT/components/Player/fullscreen.vue
 create mode 100644 NUXT/components/Player/loop.vue
 create mode 100644 NUXT/components/Player/playpause.vue
 create mode 100644 NUXT/components/Player/quality.vue
 create mode 100644 NUXT/components/Player/speed.vue
 create mode 100644 NUXT/components/Player/watchtime.vue

diff --git a/NUXT/components/Player/captions.vue b/NUXT/components/Player/captions.vue
new file mode 100644
index 0000000..962611c
--- /dev/null
+++ b/NUXT/components/Player/captions.vue
@@ -0,0 +1,5 @@
+<template>
+  <v-btn fab text style="position: absolute; top: 0; right: 3.5rem">
+    <v-icon>mdi-closed-caption-outline</v-icon>
+  </v-btn>
+</template>
diff --git a/NUXT/components/Player/controls.vue b/NUXT/components/Player/controls.vue
deleted file mode 100644
index 00b2318..0000000
--- a/NUXT/components/Player/controls.vue
+++ /dev/null
@@ -1,116 +0,0 @@
-<template>
-  <div class="controls" @click="toggleControls()">
-    <div ref="controlsWrap" class="controlsWrap">
-      <div class="centerVideoControls">
-        <v-btn
-          text
-          style="height: 5em; width: 5em"
-          color="white"
-          @click="togglePlaying()"
-        >
-          <v-icon
-            ref="pausePlayIndicator"
-            size="5rem"
-            v-text="playing ? 'mdi-pause' : 'mdi-play'"
-          />
-        </v-btn>
-      </div>
-
-      <div class="bottomVideoControls white--text">
-        <div class="pl-4">
-          {{ watched }}
-          <span style="color: #999">
-            / {{ $vuetube.humanTime(video.duration) }}
-          </span>
-        </div>
-        <!-- <v-slider
-          id="slider"
-          v-model="video.currentTime"
-          :max="video.duration"
-          style="margin-bottom: -2rem !important"
-        /> -->
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: ["video"],
-
-  data() {
-    return {
-      playing: true,
-      controls: true,
-
-      watched: 0,
-    };
-  },
-
-  mounted() {
-    console.log("videovideovideo");
-    console.log(this.video);
-    this.video.ontimeupdate = () => {
-      console.log(this.video.currentTime);
-      this.watched = this.$vuetube.humanTime(this.video.currentTime);
-    };
-  },
-
-  methods: {
-    togglePlaying() {
-      if (this.video.paused) {
-        this.video.play();
-        this.playing = true;
-      } else {
-        this.video.pause();
-        this.playing = false;
-      }
-      this.toggleControls(); // Prevent Screen From Closing
-    },
-
-    toggleControls() {
-      const setControls = this.controls ? "none" : "block";
-      this.$refs.controlsWrap.style.display = setControls;
-      this.controls = !this.controls;
-    },
-  },
-};
-</script>
-
-<style scoped>
-#slider * {
-  padding: 0 !important;
-  margin: 0 !important;
-}
-.centerVideoControls {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
-.bottomVideoControls {
-  position: absolute;
-  width: 100%;
-  bottom: 0;
-}
-
-.pausePlay {
-  min-height: 5em;
-  min-width: 5em;
-}
-
-.controls {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-}
-
-.controlsWrap {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.5);
-}
-</style>
diff --git a/NUXT/components/Player/fullscreen.vue b/NUXT/components/Player/fullscreen.vue
new file mode 100644
index 0000000..7ce07bf
--- /dev/null
+++ b/NUXT/components/Player/fullscreen.vue
@@ -0,0 +1,17 @@
+<template>
+  <v-btn
+    fab
+    text
+    style="position: absolute; bottom: 0.25rem; right: 0"
+    @click.stop="$emit('fullscreen')"
+  >
+    <v-icon>{{ fullscreen ? "mdi-fullscreen-exit" : "mdi-fullscreen" }}</v-icon>
+  </v-btn>
+</template>
+
+<script>
+export default {
+  props: ["fullscreen"],
+  emits: ["fullscreen"],
+};
+</script>
diff --git a/NUXT/components/Player/index.vue b/NUXT/components/Player/index.vue
index abc230d..60fe2a3 100644
--- a/NUXT/components/Player/index.vue
+++ b/NUXT/components/Player/index.vue
@@ -39,7 +39,7 @@
         height: 100%;
         opacity: 0;
       "
-      @doubleclick.stop="$refs.player.currentTime -= $refs.player.duration / 10"
+      @dbclick.stop="$refs.player.currentTime -= $refs.player.duration / 10"
     >
       <v-icon>mdi-rewind</v-icon>
     </v-btn>
@@ -55,7 +55,7 @@
         height: 100%;
         opacity: 0;
       "
-      @doubleclick.stop="$refs.player.currentTime += $refs.player.duration / 10"
+      @dbclick.stop="$refs.player.currentTime += $refs.player.duration / 10"
     >
       <v-icon>mdi-fast-forward</v-icon>
     </v-btn>
@@ -67,318 +67,68 @@
       <v-btn fab text style="position: absolute; top: 0; left: 0">
         <v-icon>mdi-chevron-down</v-icon>
       </v-btn>
-      <v-btn fab text style="position: absolute; top: 0; right: 7rem">
-        <v-icon>mdi-sync</v-icon>
-      </v-btn>
-      <v-btn fab text style="position: absolute; top: 0; right: 3.5rem">
-        <v-icon>mdi-closed-caption-outline</v-icon>
-      </v-btn>
+      <loop />
+      <captions />
       <v-btn fab text style="position: absolute; top: 0; right: 0">
         <v-icon>mdi-close</v-icon>
       </v-btn>
 
-      <v-btn
+      <playpause
         v-if="$refs.player"
-        fab
-        text
-        style="
-          height: 5rem;
-          width: 5rem;
-          position: absolute;
-          top: calc(50% - 2.5rem);
-          left: calc(50% - 2.5rem);
-        "
-        color="white"
-        @click.stop="
-          $refs.player.paused
-            ? ($refs.player.play(), (controls = false))
-            : $refs.player.pause()
-        "
-      >
-        <v-icon
-          ref="pausePlayIndicator"
-          size="5rem"
-          v-text="$refs.player.paused ? 'mdi-play' : 'mdi-pause'"
-        />
-      </v-btn>
+        :video="$refs.player"
+        @close="controls = false"
+      />
 
-      <div
-        v-if="$refs.player"
-        style="position: absolute; bottom: 1.25rem; left: 1.25rem"
-      >
-        {{ watched }}
-        <span style="color: #999"> / {{ total }} </span>
-      </div>
-      <!-- <v-btn fab text style="position: absolute; bottom: 0.25rem; right: 7rem">
-        1X
-      </v-btn>
-      <v-btn fab text style="position: absolute; bottom: 0.25rem; right: 3rem">
-        HD
-      </v-btn> -->
-      <v-btn
-        fab
-        text
-        style="position: absolute; bottom: 0.25rem; right: 0"
-        @click.stop="(controls = $refs.player.paused), handleFullscreenChange()"
-      >
-        <v-icon>{{
-          isFullscreen ? "mdi-fullscreen-exit" : "mdi-fullscreen"
-        }}</v-icon>
-      </v-btn>
-    </div>
-    <div>
-      <video
-        ref="playerfake"
-        muted
-        autoplay
-        style="display: none"
-        :src="vidWrs"
+      <watchtime v-if="$refs.player" :video="$refs.player" />
+      <quality />
+      <speed />
+      <fullscreen
+        :fullscreen="isFullscreen"
+        @fullscreen="(controls = $refs.player.paused), handleFullscreenChange()"
       />
-      <v-progress-linear
-        query
-        active
-        style="width: 100%"
-        background-opacity="0.5"
-        background-color="primary"
-        :buffer-value="buffered"
-        :value="percent"
-        color="primary"
-        height="2"
-      />
-      <!-- Scrubber -->
-      <v-slider
-        v-if="$refs.player"
-        hide-details
-        height="2"
-        dense
-        style="
-          position: absolute;
-          z-index: 69420;
-          width: 100%;
-          bottom: 0;
-          left: 0;
-        "
-        :thumb-size="0"
-        :max="duration"
-        :value="progress"
-        @start="scrubbing = true"
-        @end="scrubbing = false"
-        @change="scrub($event)"
-        @input="seek($event)"
-      >
-        <!-- :thumb-size="$refs.player.clientHeight / 3" -->
-        <template #thumb-label="{ value }">
-          <div style="transform: translateY(-50%)">
-            <canvas
-              ref="preview"
-              class="white"
-              :width="$refs.player.clientWidth / 3"
-              :height="$refs.player.clientHeight / 3"
-              style="border: 2px solid white"
-              :style="{
-                borderRadius: $store.state.tweaks.roundWatch
-                  ? `${$store.state.tweaks.roundTweak / 3}rem`
-                  : '0',
-              }"
-            ></canvas>
-            <div class="text-center pb-4" style="font-size: 0.8rem">
-              <b>{{ $vuetube.humanTime(value) }}</b>
-            </div>
-          </div>
-        </template>
-      </v-slider>
     </div>
+    <seekbar v-if="$refs.player" :sources="sources" :video="$refs.player" />
   </div>
 </template>
 
 <script>
+import loop from "~/components/Player/loop.vue";
+import speed from "~/components/Player/speed.vue";
 import seekbar from "~/components/Player/seekbar.vue";
-import controls from "~/components/Player/controls.vue";
-
+import quality from "~/components/Player/quality.vue";
+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";
 export default {
   components: {
+    fullscreen,
+    watchtime,
+    playpause,
+    captions,
+    quality,
     seekbar,
-    controls,
+    speed,
+    loop,
+  },
+  props: {
+    sources: {
+      type: Array,
+      required: true,
+    },
   },
-  props: ["sources"],
   data() {
     return {
       isFullscreen: false,
-      scrubbing: false,
       controls: false,
-      percent: 0,
-      progress: 0,
-      buffered: 0,
-      duration: 0,
-      watched: 0,
-      total: 0,
       vidSrc: "",
-      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.$refs.player;
-    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;
-          this.watched = this.$vuetube.humanTime(vid.currentTime);
-          this.total = this.$vuetube.humanTime(vid.duration);
-        };
-        vid.onprogress = () => {
-          console.log("%c progress", "color: #ff00ff");
-          this.buffered = (vid.buffered.end(0) / vid.duration) * 100;
-        };
-      }
-    });
   },
   methods: {
-    loadVideoFrames() {
-      // Exit loop if desired number of frames have been extracted
-      if (this.frames.length >= frameCount) {
-        this.visibleFrame = 0;
-
-        // Append all canvases to container div
-        this.frames.forEach((frame) => {
-          this.frameContainerElement.appendChild(frame);
-        });
-        return;
-      }
-
-      // If extraction hasn’t started, set desired time for first frame
-      if (this.frames.length === 0) {
-        this.requestedTime = 0;
-      } else {
-        this.requestedTime = this.requestedTime + this.frameTimestep;
-      }
-
-      // Send seek request to video player for the next frame.
-      this.videoElement.currentTime = this.requestedTime;
-    },
-    extractFrame(videoWidth, videoHeight) {
-      // Create DOM canvas object
-      var canvas = document.createElement("canvas");
-      canvas.className = "video-scrubber-frame";
-      canvas.height = videoHeight;
-      canvas.width = videoWidth;
-
-      // Copy current frame to canvas
-      var context = canvas.getContext("2d");
-      context.drawImage(this.videoElement, 0, 0, videoWidth, videoHeight);
-      this.frames.push(canvas);
-
-      //  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);
-      console.log(fps);
-      let videoBlob = await fetch(videoUrl, {
-        headers: { range: "bytes=0-567139" },
-      }).then((r) => r.blob());
-      console.log(videoBlob);
-      let videoObjectUrl = URL.createObjectURL(videoBlob);
-      let video = document.createElement("video");
-
-      let seekResolve;
-      video.addEventListener("seeked", async function () {
-        if (seekResolve) seekResolve();
-      });
-
-      video.src = videoObjectUrl;
-
-      // workaround chromium metadata bug (https://stackoverflow.com/q/38062864/993683)
-      while (
-        (video.duration === Infinity || isNaN(video.duration)) &&
-        video.readyState < 2
-      ) {
-        await new Promise((r) => setTimeout(r, 1000));
-        video.currentTime = 10000000 * Math.random();
-      }
-      let duration = video.duration;
-
-      let canvas = document.createElement("canvas");
-      let context = canvas.getContext("2d");
-      let [w, h] = [video.videoWidth, video.videoHeight];
-      canvas.width = w;
-      canvas.height = h;
-
-      let interval = 1;
-      let currentTime = 0;
-
-      while (currentTime < duration) {
-        video.currentTime = currentTime;
-        await new Promise((r) => (seekResolve = r));
-
-        context.drawImage(video, 0, 0, w, h);
-        let base64ImageData = canvas.toDataURL();
-        console.log(base64ImageData);
-        this.frames.push(base64ImageData);
-
-        currentTime += interval;
-      }
-      console.log("%c frames", "color: #00ff00");
-      console.log(this.frames);
-    },
-    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.$refs.player.clientWidth / 3,
-          this.$refs.player.clientHeight / 3
-        );
-    },
-    scrub(e) {
-      this.$refs.player.currentTime = e;
-    },
     handleFullscreenChange() {
       console.log(this.$refs.player);
       console.log(document.fullscreenElement);
diff --git a/NUXT/components/Player/loop.vue b/NUXT/components/Player/loop.vue
new file mode 100644
index 0000000..563b9c4
--- /dev/null
+++ b/NUXT/components/Player/loop.vue
@@ -0,0 +1,5 @@
+<template>
+  <v-btn fab text style="position: absolute; top: 0; right: 7rem">
+    <v-icon>mdi-sync</v-icon>
+  </v-btn>
+</template>
diff --git a/NUXT/components/Player/playpause.vue b/NUXT/components/Player/playpause.vue
new file mode 100644
index 0000000..d6b804b
--- /dev/null
+++ b/NUXT/components/Player/playpause.vue
@@ -0,0 +1,32 @@
+<template>
+  <v-btn
+    fab
+    text
+    style="
+      width: 5rem;
+      height: 5rem;
+      position: absolute;
+      top: calc(50% - 2.5rem);
+      left: calc(50% - 2.5rem);
+    "
+    color="white"
+    @click.stop="
+      (paused = !video.paused),
+        video.paused ? (video.play(), $emit('close')) : video.pause()
+    "
+  >
+    <v-icon size="5rem">
+      {{ paused ? "mdi-play" : "mdi-pause" }}
+    </v-icon>
+  </v-btn>
+</template>
+
+<script>
+export default {
+  props: ["video"],
+  emits: ["close"],
+  data: () => ({
+    paused: false,
+  }),
+};
+</script>
diff --git a/NUXT/components/Player/quality.vue b/NUXT/components/Player/quality.vue
new file mode 100644
index 0000000..7edf15a
--- /dev/null
+++ b/NUXT/components/Player/quality.vue
@@ -0,0 +1,5 @@
+<template>
+  <v-btn fab text style="position: absolute; bottom: 0.25rem; right: 3.5rem">
+    HD
+  </v-btn>
+</template>
diff --git a/NUXT/components/Player/seekbar.vue b/NUXT/components/Player/seekbar.vue
index 305c207..719f267 100644
--- a/NUXT/components/Player/seekbar.vue
+++ b/NUXT/components/Player/seekbar.vue
@@ -1,34 +1,243 @@
 <template>
-  <v-progress-linear
-    active
-    background-color="primary"
-    background-opacity="0.5"
-    :buffer-value="buffered"
-    color="primary"
-    height="3"
-    query
-    :value="percentage"
-  />
+  <div>
+    <video
+      ref="playerfake"
+      muted
+      autoplay
+      style="display: none"
+      :src="vidWrs"
+    />
+    <v-progress-linear
+      query
+      active
+      style="width: 100%"
+      background-opacity="0.5"
+      background-color="primary"
+      :buffer-value="buffered"
+      :value="percent"
+      color="primary"
+      height="2"
+    />
+    <!-- Scrubber -->
+    <v-slider
+      v-if="$refs.player"
+      hide-details
+      height="2"
+      dense
+      style="
+        position: absolute;
+        z-index: 69420;
+        width: 100%;
+        bottom: 0;
+        left: 0;
+      "
+      :thumb-size="0"
+      :max="duration"
+      :value="progress"
+      @start="scrubbing = true"
+      @end="scrubbing = false"
+      @change="scrub($event)"
+      @input="scrubbing ? seek($event) : null"
+    >
+      <template #thumb-label="{ value }">
+        <div style="transform: translateY(-50%)">
+          <canvas
+            ref="preview"
+            class="white"
+            :width="$refs.player.clientWidth / 3"
+            :height="$refs.player.clientHeight / 3"
+            style="border: 2px solid white"
+            :style="{
+              borderRadius: $store.state.tweaks.roundWatch
+                ? `${$store.state.tweaks.roundTweak / 3}rem`
+                : '0',
+            }"
+          ></canvas>
+          <div class="text-center pb-4" style="font-size: 0.8rem">
+            <b>{{ $vuetube.humanTime(value) }}</b>
+          </div>
+        </div>
+      </template>
+    </v-slider>
+  </div>
 </template>
 
 <script>
 export default {
-  props: ["video"],
+  props: ["sources", "video"],
 
   data() {
     return {
-      percentage: 0,
+      scrubbing: false,
+      percent: 0,
+      progress: 0,
       buffered: 0,
+      duration: 0,
+      vidSrc: "",
+      vidWrs: "",
     };
   },
-
   mounted() {
-    this.video.ontimeupdate = () => {
-      this.percentage = (this.video.currentTime / this.video.duration) * 100;
-    };
-    this.video.addEventListener("progress", () => {
-      this.buffered = (this.video.buffered.end(0) / this.video.duration) * 100;
+    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;
+        };
+      }
     });
   },
+  methods: {
+    loadVideoFrames() {
+      // Exit loop if desired number of frames have been extracted
+      if (this.frames.length >= frameCount) {
+        this.visibleFrame = 0;
+
+        // Append all canvases to container div
+        this.frames.forEach((frame) => {
+          this.frameContainerElement.appendChild(frame);
+        });
+        return;
+      }
+
+      // If extraction hasn’t started, set desired time for first frame
+      if (this.frames.length === 0) {
+        this.requestedTime = 0;
+      } else {
+        this.requestedTime = this.requestedTime + this.frameTimestep;
+      }
+
+      // Send seek request to video player for the next frame.
+      this.videoElement.currentTime = this.requestedTime;
+    },
+    extractFrame(videoWidth, videoHeight) {
+      // Create DOM canvas object
+      var canvas = document.createElement("canvas");
+      canvas.className = "video-scrubber-frame";
+      canvas.height = videoHeight;
+      canvas.width = videoWidth;
+
+      // Copy current frame to canvas
+      var context = canvas.getContext("2d");
+      context.drawImage(this.videoElement, 0, 0, videoWidth, videoHeight);
+      this.frames.push(canvas);
+
+      //  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);
+      console.log(fps);
+      let videoBlob = await fetch(videoUrl, {
+        headers: { range: "bytes=0-567139" },
+      }).then((r) => r.blob());
+      console.log(videoBlob);
+      let videoObjectUrl = URL.createObjectURL(videoBlob);
+      let video = document.createElement("video");
+
+      let seekResolve;
+      video.addEventListener("seeked", async function () {
+        if (seekResolve) seekResolve();
+      });
+
+      video.src = videoObjectUrl;
+
+      // workaround chromium metadata bug (https://stackoverflow.com/q/38062864/993683)
+      while (
+        (video.duration === Infinity || isNaN(video.duration)) &&
+        video.readyState < 2
+      ) {
+        await new Promise((r) => setTimeout(r, 1000));
+        video.currentTime = 10000000 * Math.random();
+      }
+      let duration = video.duration;
+
+      let canvas = document.createElement("canvas");
+      let context = canvas.getContext("2d");
+      let [w, h] = [video.videoWidth, video.videoHeight];
+      canvas.width = w;
+      canvas.height = h;
+
+      let interval = 1;
+      let currentTime = 0;
+
+      while (currentTime < duration) {
+        video.currentTime = currentTime;
+        await new Promise((r) => (seekResolve = r));
+
+        context.drawImage(video, 0, 0, w, h);
+        let base64ImageData = canvas.toDataURL();
+        console.log(base64ImageData);
+        this.frames.push(base64ImageData);
+
+        currentTime += interval;
+      }
+      console.log("%c frames", "color: #00ff00");
+      console.log(this.frames);
+    },
+    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>
diff --git a/NUXT/components/Player/speed.vue b/NUXT/components/Player/speed.vue
new file mode 100644
index 0000000..854ea72
--- /dev/null
+++ b/NUXT/components/Player/speed.vue
@@ -0,0 +1,5 @@
+<template>
+  <v-btn fab text style="position: absolute; bottom: 0.25rem; right: 7rem">
+    1X
+  </v-btn>
+</template>
diff --git a/NUXT/components/Player/watchtime.vue b/NUXT/components/Player/watchtime.vue
new file mode 100644
index 0000000..9f0c7d5
--- /dev/null
+++ b/NUXT/components/Player/watchtime.vue
@@ -0,0 +1,31 @@
+<template>
+  <div
+    style="
+      left: 1.25rem;
+      bottom: 1.25rem;
+      font-size: 0.75rem;
+      position: absolute;
+    "
+  >
+    {{ watched }}
+    <span style="color: #999"> / {{ duration }} </span>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["video"],
+  data() {
+    return {
+      watched: 0,
+      duration: 0,
+    };
+  },
+  mounted() {
+    this.video.addEventListener("timeupdate", () => {
+      this.duration = this.$vuetube.humanTime(this.video.duration);
+      this.watched = this.$vuetube.humanTime(this.video.currentTime);
+    });
+  },
+};
+</script>
diff --git a/NUXT/pages/watch.vue b/NUXT/pages/watch.vue
index 7a7ed9f..df95a7d 100644
--- a/NUXT/pages/watch.vue
+++ b/NUXT/pages/watch.vue
@@ -51,6 +51,7 @@
             :key="index"
             text
             fab
+            no-caps
             class="vertical-button mx-1"
             elevation="0"
             style="width: 4.2rem !important; height: 4.2rem !important"
diff --git a/NUXT/plugins/vuetube.js b/NUXT/plugins/vuetube.js
index 015eb44..fc2d008 100644
--- a/NUXT/plugins/vuetube.js
+++ b/NUXT/plugins/vuetube.js
@@ -143,12 +143,18 @@ const module = {
 
     let returntext = new String();
     for (const i in levels) {
-      const num = levels[i].toString().length == 1 ? "0" + levels[i] : levels[i]; // If Number Is Single Digit, Add 0 In Front
-
+      const num =
+        levels[i].toString().length == 1 ? "0" + levels[i] : levels[i]; // If Number Is Single Digit, Add 0 In Front
       returntext += ":" + num;
     }
-    while (returntext.startsWith(":00")) { returntext = returntext.substring(3); } // Remove Prepending 0s (eg. 00:00:00:01:00)
-    if (returntext.startsWith(":0")) { returntext = returntext.substring(2); } else { returntext = returntext.substring(1); } // Prevent Time Starting With 0 (eg. 01:00)
+    while (returntext.startsWith(":00")) {
+      returntext = returntext.substring(3);
+    } // Remove Prepending 0s (eg. 00:00:00:01:00)
+    if (returntext.startsWith(":0")) {
+      returntext = returntext.substring(2);
+    } else {
+      returntext = returntext.substring(1);
+    } // Prevent Time Starting With 0 (eg. 01:00)
     // console.log("Human Time:", returntext);
     return returntext;
   },

From f1c6ba4d44b71b7a0fe24be16ee82d7188e7238c Mon Sep 17 00:00:00 2001
From: Nikita Krupin <krupin.nikita0110@gmail.com>
Date: Sat, 28 May 2022 01:27:34 -0400
Subject: [PATCH 08/13] seekbar fixed

---
 NUXT/components/Player/seekbar.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/NUXT/components/Player/seekbar.vue b/NUXT/components/Player/seekbar.vue
index 719f267..eb6147a 100644
--- a/NUXT/components/Player/seekbar.vue
+++ b/NUXT/components/Player/seekbar.vue
@@ -20,7 +20,6 @@
     />
     <!-- Scrubber -->
     <v-slider
-      v-if="$refs.player"
       hide-details
       height="2"
       dense
@@ -44,8 +43,8 @@
           <canvas
             ref="preview"
             class="white"
-            :width="$refs.player.clientWidth / 3"
-            :height="$refs.player.clientHeight / 3"
+            :width="video.clientWidth / 3"
+            :height="video.clientHeight / 3"
             style="border: 2px solid white"
             :style="{
               borderRadius: $store.state.tweaks.roundWatch

From 769a6dc632730c27332be80f750b1c7c6aa6a339 Mon Sep 17 00:00:00 2001
From: Nikita Krupin <krupin.nikita0110@gmail.com>
Date: Sat, 28 May 2022 18:04:35 -0400
Subject: [PATCH 09/13] fullscreen orientation fix

---
 NUXT/components/Player/fullscreen.vue         |  7 +-
 NUXT/components/Player/index.vue              | 67 ++++++-------
 NUXT/components/Player/loop.vue               |  2 +-
 NUXT/components/Player/quality.vue            |  7 +-
 NUXT/components/Player/seekbar.vue            | 11 +--
 NUXT/components/Player/speed.vue              |  7 +-
 android/app/src/main/res/xml/config.xml       |  4 +
 .../screenorientation/CDVOrientation.java     | 98 +++++++++++++++++++
 ios/App/App/config.xml                        |  4 +
 ios/App/Podfile                               |  1 +
 package.json                                  |  2 +
 11 files changed, 159 insertions(+), 51 deletions(-)
 create mode 100644 android/capacitor-cordova-android-plugins/src/main/java/cordova/plugins/screenorientation/CDVOrientation.java

diff --git a/NUXT/components/Player/fullscreen.vue b/NUXT/components/Player/fullscreen.vue
index 7ce07bf..b5e7155 100644
--- a/NUXT/components/Player/fullscreen.vue
+++ b/NUXT/components/Player/fullscreen.vue
@@ -11,7 +11,12 @@
 
 <script>
 export default {
-  props: ["fullscreen"],
+  props: {
+    fullscreen: {
+      type: Boolean,
+      required: true,
+    },
+  },
   emits: ["fullscreen"],
 };
 </script>
diff --git a/NUXT/components/Player/index.vue b/NUXT/components/Player/index.vue
index 60fe2a3..e21f4db 100644
--- a/NUXT/components/Player/index.vue
+++ b/NUXT/components/Player/index.vue
@@ -26,7 +26,6 @@
           : 'filter: none; object-fit: cover'
       "
     />
-    <!-- @webkitfullscreenchange="handleFullscreenChange" -->
 
     <v-btn
       text
@@ -87,7 +86,12 @@
         @fullscreen="(controls = $refs.player.paused), handleFullscreenChange()"
       />
     </div>
-    <seekbar v-if="$refs.player" :sources="sources" :video="$refs.player" />
+    <seekbar
+      v-if="$refs.player"
+      :fullscreen="isFullscreen"
+      :video="$refs.player"
+      :sources="sources"
+    />
   </div>
 </template>
 
@@ -130,48 +134,33 @@ export default {
   },
   methods: {
     handleFullscreenChange() {
-      console.log(this.$refs.player);
-      console.log(document.fullscreenElement);
+      // close fullscreen 👇
       if (document?.fullscreenElement === this.$refs.vidcontainer) {
-        // const cancellFullScreen =
-        //   document.exitFullscreen ||
-        //   document.mozCancelFullScreen ||
-        //   document.webkitExitFullscreen ||
-        //   document.msExitFullscreen;
-        // cancellFullScreen.call(document);
-        if (document.exitFullscreen) {
-          document.exitFullscreen();
-        } else if (document.mozCancelFullScreen) {
-          document.mozCancelFullScreen();
-        } else if (document.webkitExitFullscreen) {
-          document.webkitExitFullscreen();
-        }
-        this.isFullscreen = false;
-        this.$vuetube.statusBar.show();
+        const cancellFullScreen =
+          document.exitFullscreen ||
+          document.mozCancelFullScreen ||
+          document.webkitExitFullscreen ||
+          document.msExitFullscreen;
+        cancellFullScreen.call(document);
+        screen.orientation.lock("portrait");
+        screen.orientation.unlock();
         this.$vuetube.navigationBar.show();
+        this.$vuetube.statusBar.show();
+        this.isFullscreen = false;
+        // open fullscreen 👇
       } else {
-        // const element = document;
-        // const requestFullScreen =
-        //   element.requestFullscreen ||
-        //   element.webkitRequestFullScreen ||
-        //   element.mozRequestFullScreen ||
-        //   element.msRequestFullScreen;
-        // requestFullScreen.call(element);
-        this.$refs.vidcontainer.requestFullscreen({
-          requireOrientation: "landscape",
-        });
-        this.isFullscreen = true;
-        this.$vuetube.statusBar.hide();
+        const element = this.$refs.vidcontainer;
+        const requestFullScreen =
+          element.requestFullscreen ||
+          element.webkitRequestFullScreen ||
+          element.mozRequestFullScreen ||
+          element.msRequestFullScreen;
+        requestFullScreen.call(element);
+        screen.orientation.lock("landscape");
         this.$vuetube.navigationBar.hide();
+        this.$vuetube.statusBar.hide();
+        this.isFullscreen = true;
       }
-      // screen.orientation
-      //   .lock("landscape")
-      //   .then(function () {
-      //     console.log("Locked");
-      //   })
-      //   .catch(function (error) {
-      //     console.log(error);
-      //   });
     },
     getPlayer() {
       return this.$refs.player;
diff --git a/NUXT/components/Player/loop.vue b/NUXT/components/Player/loop.vue
index 563b9c4..930c489 100644
--- a/NUXT/components/Player/loop.vue
+++ b/NUXT/components/Player/loop.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-btn fab text style="position: absolute; top: 0; right: 7rem">
+  <v-btn fab text disabled style="position: absolute; top: 0; right: 7rem">
     <v-icon>mdi-sync</v-icon>
   </v-btn>
 </template>
diff --git a/NUXT/components/Player/quality.vue b/NUXT/components/Player/quality.vue
index 7edf15a..c16e4ff 100644
--- a/NUXT/components/Player/quality.vue
+++ b/NUXT/components/Player/quality.vue
@@ -1,5 +1,10 @@
 <template>
-  <v-btn fab text style="position: absolute; bottom: 0.25rem; right: 3.5rem">
+  <v-btn
+    fab
+    text
+    disabled
+    style="position: absolute; bottom: 0.25rem; right: 3.5rem"
+  >
     HD
   </v-btn>
 </template>
diff --git a/NUXT/components/Player/seekbar.vue b/NUXT/components/Player/seekbar.vue
index eb6147a..34518bc 100644
--- a/NUXT/components/Player/seekbar.vue
+++ b/NUXT/components/Player/seekbar.vue
@@ -23,13 +23,8 @@
       hide-details
       height="2"
       dense
-      style="
-        position: absolute;
-        z-index: 69420;
-        width: 100%;
-        bottom: 0;
-        left: 0;
-      "
+      style="position: absolute; z-index: 69420; width: 100%; left: 0"
+      :style="fullscreen ? 'bottom: 5rem;' : 'bottom: 0;'"
       :thumb-size="0"
       :max="duration"
       :value="progress"
@@ -63,7 +58,7 @@
 
 <script>
 export default {
-  props: ["sources", "video"],
+  props: ["sources", "video", "fullscreen"],
 
   data() {
     return {
diff --git a/NUXT/components/Player/speed.vue b/NUXT/components/Player/speed.vue
index 854ea72..01323e8 100644
--- a/NUXT/components/Player/speed.vue
+++ b/NUXT/components/Player/speed.vue
@@ -1,5 +1,10 @@
 <template>
-  <v-btn fab text style="position: absolute; bottom: 0.25rem; right: 7rem">
+  <v-btn
+    fab
+    text
+    disabled
+    style="position: absolute; bottom: 0.25rem; right: 7rem"
+  >
     1X
   </v-btn>
 </template>
diff --git a/android/app/src/main/res/xml/config.xml b/android/app/src/main/res/xml/config.xml
index 1b1b0e0..0886a47 100644
--- a/android/app/src/main/res/xml/config.xml
+++ b/android/app/src/main/res/xml/config.xml
@@ -2,5 +2,9 @@
 <widget version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
   <access origin="*" />
   
+  <feature name="CDVOrientation">
+    <param name="android-package" value="cordova.plugins.screenorientation.CDVOrientation"/>
+  </feature>
+
   
 </widget>
\ No newline at end of file
diff --git a/android/capacitor-cordova-android-plugins/src/main/java/cordova/plugins/screenorientation/CDVOrientation.java b/android/capacitor-cordova-android-plugins/src/main/java/cordova/plugins/screenorientation/CDVOrientation.java
new file mode 100644
index 0000000..5dc845e
--- /dev/null
+++ b/android/capacitor-cordova-android-plugins/src/main/java/cordova/plugins/screenorientation/CDVOrientation.java
@@ -0,0 +1,98 @@
+/*
+ *
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ *
+ */
+
+package cordova.plugins.screenorientation;
+
+import org.apache.cordova.CallbackContext;
+import org.apache.cordova.CordovaPlugin;
+
+import org.json.JSONArray;
+import org.json.JSONException;
+
+import android.app.Activity;
+import android.content.pm.ActivityInfo;
+import android.util.Log;
+
+public class CDVOrientation extends CordovaPlugin {
+    
+    private static final String TAG = "YoikScreenOrientation"; 
+    
+    /**
+     * Screen Orientation Constants
+     */
+    
+    private static final String ANY = "any";
+    private static final String PORTRAIT_PRIMARY = "portrait-primary";
+    private static final String PORTRAIT_SECONDARY = "portrait-secondary";
+    private static final String LANDSCAPE_PRIMARY = "landscape-primary";
+    private static final String LANDSCAPE_SECONDARY = "landscape-secondary";
+    private static final String PORTRAIT = "portrait";
+    private static final String LANDSCAPE = "landscape";
+    
+    @Override
+    public boolean execute(String action, JSONArray args, CallbackContext callbackContext) {
+        
+        Log.d(TAG, "execute action: " + action);
+        
+        // Route the Action
+        if (action.equals("screenOrientation")) {
+            return routeScreenOrientation(args, callbackContext);
+        }
+        
+        // Action not found
+        callbackContext.error("action not recognised");
+        return false;
+    }
+    
+    private boolean routeScreenOrientation(JSONArray args, CallbackContext callbackContext) {
+        
+        String action = args.optString(0);
+        
+        
+        
+        String orientation = args.optString(1);
+        
+        Log.d(TAG, "Requested ScreenOrientation: " + orientation);
+        
+        Activity activity = cordova.getActivity();
+        
+        if (orientation.equals(ANY)) {
+            activity.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_UNSPECIFIED);
+        } else if (orientation.equals(LANDSCAPE_PRIMARY)) {
+            activity.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
+        } else if (orientation.equals(PORTRAIT_PRIMARY)) {
+            activity.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
+        } else if (orientation.equals(LANDSCAPE)) {
+            activity.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_SENSOR_LANDSCAPE);
+        } else if (orientation.equals(PORTRAIT)) {
+            activity.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_SENSOR_PORTRAIT);
+        } else if (orientation.equals(LANDSCAPE_SECONDARY)) {
+            activity.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_REVERSE_LANDSCAPE);
+        } else if (orientation.equals(PORTRAIT_SECONDARY)) {
+            activity.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_REVERSE_PORTRAIT);
+        }
+        
+        callbackContext.success();
+        return true;
+        
+        
+    }
+}
\ No newline at end of file
diff --git a/ios/App/App/config.xml b/ios/App/App/config.xml
index 1b1b0e0..b43c248 100644
--- a/ios/App/App/config.xml
+++ b/ios/App/App/config.xml
@@ -2,5 +2,9 @@
 <widget version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
   <access origin="*" />
   
+  <feature name="CDVOrientation">
+    <param name="ios-package" value="CDVOrientation"/>
+  </feature>
+
   
 </widget>
\ No newline at end of file
diff --git a/ios/App/Podfile b/ios/App/Podfile
index 2f75abf..323ce86 100644
--- a/ios/App/Podfile
+++ b/ios/App/Podfile
@@ -20,6 +20,7 @@ def capacitor_pods
   pod 'CapacitorStatusBar', :path => '../../node_modules/@capacitor/status-bar'
   pod 'CapacitorToast', :path => '../../node_modules/@capacitor/toast'
   pod 'HugotomaziCapacitorNavigationBar', :path => '../../node_modules/@hugotomazi/capacitor-navigation-bar'
+  pod 'CordovaPlugins', :path => '../capacitor-cordova-ios-plugins'
 end
 
 target 'App' do
diff --git a/package.json b/package.json
index 8150544..a6d5143 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,8 @@
     "@capacitor/status-bar": "^1.0.8",
     "@capacitor/toast": "^1.0.8",
     "@hugotomazi/capacitor-navigation-bar": "^1.1.1",
+    "cordova-plugin-screen-orientation": "^3.0.2",
+    "es6-promise-plugin": "^4.2.2",
     "iconv-lite": "^0.6.3"
   }
 }

From 6f3a0aa173f77e5ba30f91a4270fdbb4abce94d8 Mon Sep 17 00:00:00 2001
From: Nikita Krupin <krupin.nikita0110@gmail.com>
Date: Sat, 28 May 2022 18:15:25 -0400
Subject: [PATCH 10/13] fullscreen seekbar fix, unfinished buttons disabled

---
 NUXT/components/Player/captions.vue |  2 +-
 NUXT/components/Player/close.vue    |  6 ++++++
 NUXT/components/Player/index.vue    | 14 +++++++-------
 NUXT/components/Player/minimize.vue |  5 +++++
 NUXT/components/Player/seekbar.vue  |  8 ++++++--
 5 files changed, 25 insertions(+), 10 deletions(-)
 create mode 100644 NUXT/components/Player/close.vue
 create mode 100644 NUXT/components/Player/minimize.vue

diff --git a/NUXT/components/Player/captions.vue b/NUXT/components/Player/captions.vue
index 962611c..a570f5b 100644
--- a/NUXT/components/Player/captions.vue
+++ b/NUXT/components/Player/captions.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-btn fab text style="position: absolute; top: 0; right: 3.5rem">
+  <v-btn disabled fab text style="position: absolute; top: 0; right: 3.5rem">
     <v-icon>mdi-closed-caption-outline</v-icon>
   </v-btn>
 </template>
diff --git a/NUXT/components/Player/close.vue b/NUXT/components/Player/close.vue
new file mode 100644
index 0000000..f63b823
--- /dev/null
+++ b/NUXT/components/Player/close.vue
@@ -0,0 +1,6 @@
+<template>
+  <!-- TODO: change /home to $router.goBack() or $router.go(-1) -->
+  <v-btn fab text style="position: absolute; top: 0; right: 0" to="/home">
+    <v-icon>mdi-close</v-icon>
+  </v-btn>
+</template>
diff --git a/NUXT/components/Player/index.vue b/NUXT/components/Player/index.vue
index e21f4db..cf5901b 100644
--- a/NUXT/components/Player/index.vue
+++ b/NUXT/components/Player/index.vue
@@ -28,6 +28,7 @@
     />
 
     <v-btn
+      v-if="controls"
       text
       tile
       style="
@@ -44,6 +45,7 @@
     </v-btn>
 
     <v-btn
+      v-if="controls"
       text
       tile
       style="
@@ -63,14 +65,10 @@
       style="transition: opacity 0.15s ease-in-out"
       :style="controls ? 'opacity: 1;' : 'opacity: 0; pointer-events: none'"
     >
-      <v-btn fab text style="position: absolute; top: 0; left: 0">
-        <v-icon>mdi-chevron-down</v-icon>
-      </v-btn>
+      <minimize />
       <loop />
       <captions />
-      <v-btn fab text style="position: absolute; top: 0; right: 0">
-        <v-icon>mdi-close</v-icon>
-      </v-btn>
+      <close />
 
       <playpause
         v-if="$refs.player"
@@ -87,7 +85,7 @@
       />
     </div>
     <seekbar
-      v-if="$refs.player"
+      v-if="$refs.player && (!isFullscreen || controls)"
       :fullscreen="isFullscreen"
       :video="$refs.player"
       :sources="sources"
@@ -100,6 +98,7 @@ import loop from "~/components/Player/loop.vue";
 import speed from "~/components/Player/speed.vue";
 import seekbar from "~/components/Player/seekbar.vue";
 import quality from "~/components/Player/quality.vue";
+import minimize from "~/components/Player/minimize.vue";
 import captions from "~/components/Player/captions.vue";
 import playpause from "~/components/Player/playpause.vue";
 import watchtime from "~/components/Player/watchtime.vue";
@@ -110,6 +109,7 @@ export default {
     watchtime,
     playpause,
     captions,
+    minimize,
     quality,
     seekbar,
     speed,
diff --git a/NUXT/components/Player/minimize.vue b/NUXT/components/Player/minimize.vue
new file mode 100644
index 0000000..15334ac
--- /dev/null
+++ b/NUXT/components/Player/minimize.vue
@@ -0,0 +1,5 @@
+<template>
+  <v-btn fab text disabled style="position: absolute; top: 0; left: 0">
+    <v-icon>mdi-chevron-down</v-icon>
+  </v-btn>
+</template>
diff --git a/NUXT/components/Player/seekbar.vue b/NUXT/components/Player/seekbar.vue
index 34518bc..8ee5889 100644
--- a/NUXT/components/Player/seekbar.vue
+++ b/NUXT/components/Player/seekbar.vue
@@ -23,8 +23,12 @@
       hide-details
       height="2"
       dense
-      style="position: absolute; z-index: 69420; width: 100%; left: 0"
-      :style="fullscreen ? 'bottom: 5rem;' : 'bottom: 0;'"
+      style="position: absolute; z-index: 69420"
+      :style="
+        fullscreen
+          ? 'width: calc(100% - 2rem); left: 1rem; bottom: 4rem;'
+          : 'width: 100%; left: 0; bottom: 0;'
+      "
       :thumb-size="0"
       :max="duration"
       :value="progress"

From 5f61ef831d28c62bd6cfd1f63d4ea509401d9ca0 Mon Sep 17 00:00:00 2001
From: Nikita Krupin <krupin.nikita0110@gmail.com>
Date: Sat, 28 May 2022 18:28:41 -0400
Subject: [PATCH 11/13] todos, scale gestures fix

---
 NUXT/components/Player/index.vue   | 24 +++++++++++++++++-------
 NUXT/components/Player/seekbar.vue |  2 ++
 NUXT/pages/watch.vue               |  3 ++-
 3 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/NUXT/components/Player/index.vue b/NUXT/components/Player/index.vue
index cf5901b..f0c17bd 100644
--- a/NUXT/components/Player/index.vue
+++ b/NUXT/components/Player/index.vue
@@ -1,9 +1,10 @@
 <template>
+  <!-- TODO: down: () => minimize, -->
   <div
     ref="vidcontainer"
     v-touch="{
-      down: () => ($refs.player.styles.width = '50% !important'),
-      up: () => ($refs.player.styles['object-fit'] = 'contain !important'),
+      up: () => (contain = false),
+      down: () => (contain = true),
     }"
     class="d-flex flex-column"
     style="position: relative"
@@ -19,13 +20,17 @@
       autoplay
       width="100%"
       :src="vidSrc"
-      style="transition: filter 0.15s ease-in-out; max-height: 100vh"
+      style="
+        transition: 0.15s ease-in-out;
+        transition-properties: all;
+        max-height: 100vh;
+      "
       :style="
-        controls
-          ? 'filter: brightness(50%); object-fit: contain'
-          : 'filter: none; object-fit: cover'
+        (controls ? 'filter: brightness(50%);' : 'filter: none;',
+        contain ? 'object-fit: contain;' : 'object-fit: cover;')
       "
     />
+    <!-- TODO: controls || seeking, take seeking out of <seekbar> component -->
 
     <v-btn
       v-if="controls"
@@ -84,8 +89,10 @@
         @fullscreen="(controls = $refs.player.paused), handleFullscreenChange()"
       />
     </div>
+    <!-- NOTE: breaks in fullscreen -->
     <seekbar
-      v-if="$refs.player && (!isFullscreen || controls)"
+      v-if="$refs.player"
+      v-show="!isFullscreen || controls"
       :fullscreen="isFullscreen"
       :video="$refs.player"
       :sources="sources"
@@ -95,6 +102,7 @@
 
 <script>
 import loop from "~/components/Player/loop.vue";
+import close from "~/components/Player/close.vue";
 import speed from "~/components/Player/speed.vue";
 import seekbar from "~/components/Player/seekbar.vue";
 import quality from "~/components/Player/quality.vue";
@@ -113,6 +121,7 @@ export default {
     quality,
     seekbar,
     speed,
+    close,
     loop,
   },
   props: {
@@ -125,6 +134,7 @@ export default {
     return {
       isFullscreen: false,
       controls: false,
+      contain: true,
       vidSrc: "",
     };
   },
diff --git a/NUXT/components/Player/seekbar.vue b/NUXT/components/Player/seekbar.vue
index 8ee5889..4a80308 100644
--- a/NUXT/components/Player/seekbar.vue
+++ b/NUXT/components/Player/seekbar.vue
@@ -99,6 +99,7 @@ export default {
     });
   },
   methods: {
+    // TODO: better scrubbing preview
     loadVideoFrames() {
       // Exit loop if desired number of frames have been extracted
       if (this.frames.length >= frameCount) {
@@ -218,6 +219,7 @@ export default {
       console.log("%c frames", "color: #00ff00");
       console.log(this.frames);
     },
+    // TODO: scrubbing preview end
     seek(e) {
       // console.log(`scrubbing ${e}`);
       let vid = this.$refs.playerfake;
diff --git a/NUXT/pages/watch.vue b/NUXT/pages/watch.vue
index df95a7d..938b665 100644
--- a/NUXT/pages/watch.vue
+++ b/NUXT/pages/watch.vue
@@ -1,7 +1,8 @@
 <template>
   <div class="background" id="watch-body">
     <div id="player-container">
-      <!--   VueTube Player V1   -->
+      <!-- TODO: move component to default.vue -->
+      <!-- TODO: pass sources through vuex instead of props -->
       <player v-if="sources.length > 0" ref="player" :sources="sources" />
     </div>
 

From d60c2de32ab7da62251522d16878ca378d0366cd Mon Sep 17 00:00:00 2001
From: Nikita Krupin <krupin.nikita0110@gmail.com>
Date: Sat, 28 May 2022 18:33:43 -0400
Subject: [PATCH 12/13] fullscreen page exit fix

---
 NUXT/components/Player/index.vue | 73 +++++++++++++++++---------------
 1 file changed, 40 insertions(+), 33 deletions(-)

diff --git a/NUXT/components/Player/index.vue b/NUXT/components/Player/index.vue
index f0c17bd..3558343 100644
--- a/NUXT/components/Player/index.vue
+++ b/NUXT/components/Player/index.vue
@@ -20,15 +20,9 @@
       autoplay
       width="100%"
       :src="vidSrc"
-      style="
-        transition: 0.15s ease-in-out;
-        transition-properties: all;
-        max-height: 100vh;
-      "
-      :style="
-        (controls ? 'filter: brightness(50%);' : 'filter: none;',
-        contain ? 'object-fit: contain;' : 'object-fit: cover;')
-      "
+      style="transition: filter 0.15s ease-in-out; max-height: 100vh"
+      :class="controls ? 'dim' : ''"
+      :style="contain ? 'object-fit: contain;' : 'object-fit: cover;'"
     />
     <!-- TODO: controls || seeking, take seeking out of <seekbar> component -->
 
@@ -142,39 +136,52 @@ export default {
     console.log("sources", this.sources);
     this.vidSrc = this.sources[this.sources.length - 1].url;
   },
+  beforeDestroy() {
+    this.exitFullscreen();
+  },
   methods: {
     handleFullscreenChange() {
-      // close fullscreen 👇
       if (document?.fullscreenElement === this.$refs.vidcontainer) {
-        const cancellFullScreen =
-          document.exitFullscreen ||
-          document.mozCancelFullScreen ||
-          document.webkitExitFullscreen ||
-          document.msExitFullscreen;
-        cancellFullScreen.call(document);
-        screen.orientation.lock("portrait");
-        screen.orientation.unlock();
-        this.$vuetube.navigationBar.show();
-        this.$vuetube.statusBar.show();
-        this.isFullscreen = false;
-        // open fullscreen 👇
+        this.exitFullscreen();
       } else {
-        const element = this.$refs.vidcontainer;
-        const requestFullScreen =
-          element.requestFullscreen ||
-          element.webkitRequestFullScreen ||
-          element.mozRequestFullScreen ||
-          element.msRequestFullScreen;
-        requestFullScreen.call(element);
-        screen.orientation.lock("landscape");
-        this.$vuetube.navigationBar.hide();
-        this.$vuetube.statusBar.hide();
-        this.isFullscreen = true;
+        this.openFullscreen();
       }
     },
+    exitFullscreen() {
+      const cancellFullScreen =
+        document.exitFullscreen ||
+        document.mozCancelFullScreen ||
+        document.webkitExitFullscreen ||
+        document.msExitFullscreen;
+      cancellFullScreen.call(document);
+      screen.orientation.lock("portrait");
+      screen.orientation.unlock();
+      this.$vuetube.navigationBar.show();
+      this.$vuetube.statusBar.show();
+      this.isFullscreen = false;
+    },
+    openFullscreen() {
+      const element = this.$refs.vidcontainer;
+      const requestFullScreen =
+        element.requestFullscreen ||
+        element.webkitRequestFullScreen ||
+        element.mozRequestFullScreen ||
+        element.msRequestFullScreen;
+      requestFullScreen.call(element);
+      screen.orientation.lock("landscape");
+      this.$vuetube.navigationBar.hide();
+      this.$vuetube.statusBar.hide();
+      this.isFullscreen = true;
+    },
     getPlayer() {
       return this.$refs.player;
     },
   },
 };
 </script>
+
+<style>
+.dim {
+  filter: brightness(50%);
+}
+</style>

From c02d66d8730b8bde0e037469f2e00652d4236705 Mon Sep 17 00:00:00 2001
From: Nikita Krupin <krupin.nikita0110@gmail.com>
Date: Sat, 28 May 2022 18:44:20 -0400
Subject: [PATCH 13/13] player light mode fix

---
 NUXT/components/Player/close.vue      | 8 +++++++-
 NUXT/components/Player/fullscreen.vue | 1 +
 NUXT/components/Player/watchtime.vue  | 1 +
 3 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/NUXT/components/Player/close.vue b/NUXT/components/Player/close.vue
index f63b823..cc671f2 100644
--- a/NUXT/components/Player/close.vue
+++ b/NUXT/components/Player/close.vue
@@ -1,6 +1,12 @@
 <template>
   <!-- TODO: change /home to $router.goBack() or $router.go(-1) -->
-  <v-btn fab text style="position: absolute; top: 0; right: 0" to="/home">
+  <v-btn
+    fab
+    text
+    style="position: absolute; top: 0; right: 0"
+    to="/home"
+    color="white"
+  >
     <v-icon>mdi-close</v-icon>
   </v-btn>
 </template>
diff --git a/NUXT/components/Player/fullscreen.vue b/NUXT/components/Player/fullscreen.vue
index b5e7155..310b4bb 100644
--- a/NUXT/components/Player/fullscreen.vue
+++ b/NUXT/components/Player/fullscreen.vue
@@ -2,6 +2,7 @@
   <v-btn
     fab
     text
+    color="white"
     style="position: absolute; bottom: 0.25rem; right: 0"
     @click.stop="$emit('fullscreen')"
   >
diff --git a/NUXT/components/Player/watchtime.vue b/NUXT/components/Player/watchtime.vue
index 9f0c7d5..ad37f81 100644
--- a/NUXT/components/Player/watchtime.vue
+++ b/NUXT/components/Player/watchtime.vue
@@ -1,6 +1,7 @@
 <template>
   <div
     style="
+      color: #fff;
       left: 1.25rem;
       bottom: 1.25rem;
       font-size: 0.75rem;