video controls toggle

NUXT/components/Player/legacy.vue

@@ -8,38 +8,36 @@
         ? `${$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" -->
-    <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"
-    />
 
     <v-btn
       text
       tile
-      style="position: absolute; top: 0; left: 0; width: 50%; height: 100%"
+      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>
@@ -47,11 +45,23 @@
     <v-btn
       text
       tile
-      style="position: absolute; top: 0; left: 50%; width: 50%; height: 100%"
+      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>
@@ -77,7 +87,11 @@
           left: calc(50% - 2.5rem);
         "
         color="white"
-      @click="$refs.player.paused ? $refs.player.play() : $refs.player.pause()"
+        @click.stop="
+          $refs.player.paused
+            ? ($refs.player.play(), (controls = false))
+            : $refs.player.pause()
+        "
       >
         <v-icon
           ref="pausePlayIndicator"
@@ -96,20 +110,42 @@
       <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">
+      <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()"
+        @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"
@@ -162,6 +198,7 @@ export default {
     return {
       isFullscreen: false,
       scrubbing: false,
+      controls: false,
       percent: 0,
       progress: 0,
       buffered: 0,

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>