bunch of player stuff

NUXT/components/Player/index.vue

@@ -39,10 +39,18 @@
       <div style="color: #aaa; font-size: 0.75rem">{{ video.channelName }}</div>
     </div>
 
-    <!-- <v-btn
+    <!-- // TODO: merge the bottom 2 into 1 reusable component -->
+    <v-btn
       text
       tile
-      style="position: absolute; top: 0; left: 0; width: 50%; height: 100%"
+      style="
+        opacity: 0;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 50%;
+        height: 100%;
+      "
       @dblclick.stop="$refs.player.currentTime -= $refs.player.duration / 10"
     >
       <v-icon>mdi-rewind</v-icon>
@@ -51,11 +59,18 @@
     <v-btn
       text
       tile
-      style="position: absolute; top: 0; left: 50%; width: 50%; height: 100%"
+      style="
+        opacity: 0;
+        position: absolute;
+        top: 0;
+        left: 50%;
+        width: 50%;
+        height: 100%;
+      "
       @dblclick.stop="$refs.player.currentTime += $refs.player.duration / 10"
     >
       <v-icon>mdi-fast-forward</v-icon>
-    </v-btn> -->
+    </v-btn>
 
     <div
       style="transition: opacity 0.15s ease-in-out"
@@ -66,13 +81,70 @@
       <captions />
       <close />
 
+      <v-btn
+        fab
+        text
+        small
+        style="
+          position: absolute;
+          top: calc(50% - 1.25rem);
+          left: calc(50% - 9.5rem);
+        "
+        color="white"
+        @click.stop="$refs.player.currentTime -= 5"
+      >
+        <v-icon size="1rem">mdi-rewind-5</v-icon>
+      </v-btn>
+      <v-btn
+        fab
+        text
+        style="
+          position: absolute;
+          top: calc(50% - 1.75rem);
+          left: calc(50% - 6rem);
+        "
+        color="white"
+        disabled
+        @click.stop=""
+      >
+        <v-icon size="2rem">mdi-skip-previous</v-icon>
+      </v-btn>
       <playpause
         v-if="$refs.player"
         :video="$refs.player"
         @close="controls = false"
       />
+      <v-btn
+        fab
+        text
+        style="
+          position: absolute;
+          top: calc(50% - 1.75rem);
+          left: calc(50% + 3rem);
+        "
+        color="white"
+        disabled
+        @click.stop=""
+      >
+        <v-icon size="2rem">mdi-skip-next</v-icon>
+      </v-btn>
+      <v-btn
+        fab
+        text
+        small
+        style="
+          position: absolute;
+          top: calc(50% - 1.25rem);
+          left: calc(50% + 7rem);
+        "
+        color="white"
+        @click.stop="$refs.player.currentTime += 5"
+      >
+        <v-icon size="1rem">mdi-fast-forward-5</v-icon>
+      </v-btn>
 
       <watchtime v-if="$refs.player" :video="$refs.player" />
+      <!-- // TODO: merge the bottom 2 into 1 reusable component -->
       <quality v-if="$refs.player" :video="$refs.player" :sources="sources" />
       <speed v-if="$refs.player" :video="$refs.player" />
       <fullscreen

NUXT/components/Player/playpause.vue

@@ -2,20 +2,15 @@
   <v-btn
     fab
     text
-    style="
-      width: 5rem;
-      height: 5rem;
-      position: absolute;
-      top: calc(50% - 2.5rem);
-      left: calc(50% - 2.5rem);
-    "
+    large
+    style="position: absolute; top: calc(50% - 2rem); left: calc(50% - 2rem)"
     color="white"
     @click.stop="
       (paused = !video.paused),
         video.paused ? (video.play(), $emit('close')) : video.pause()
     "
   >
-    <v-icon size="5rem">
+    <v-icon size="3.5rem">
       {{ paused ? "mdi-play" : "mdi-pause" }}
     </v-icon>
   </v-btn>

NUXT/components/Player/quality.vue

@@ -17,7 +17,12 @@
           {{ sources.find((src) => src.url == video.src).qualityLabel }}
         </v-btn>
       </template>
-      <v-card class="background">
+      <v-card
+        v-touch="{
+          down: () => (sheet = false),
+        }"
+        class="background"
+      >
         <v-subheader>Quality for current video</v-subheader>
         <v-card-text style="max-height: 50vh" class="pa-0">
           <v-list-item

NUXT/components/Player/speed.vue

@@ -17,7 +17,12 @@
           {{ video.playbackRate }}X
         </v-btn>
       </template>
-      <v-card class="background">
+      <v-card
+        v-touch="{
+          down: () => (sheet = false),
+        }"
+        class="background"
+      >
         <v-subheader>Playback Speed</v-subheader>
         <v-card-text style="height: 50vh" class="pa-0">
           <v-list-item

NUXT/pages/watch.vue

@@ -51,22 +51,25 @@
           <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-6">
+        <div class="d-flex pl-4">
           <v-btn
             v-for="(item, index) in interactions"
             :key="index"
             text
             fab
-            no-caps
             class="vertical-button mx-1"
             elevation="0"
-            style="width: 4.2rem !important; height: 4.2rem !important"
+            style="
+              width: 4.2rem !important;
+              height: 4.2rem !important;
+              text-decoration: none !important;
+            "
             :disabled="item.disabled"
             @click="callMethodByName(item.actionName)"
           >
             <v-icon v-text="item.icon" />
             <div
-              class="mt-2"
+              class="mt-1"
               style="font-size: 0.66rem"
               v-text="item.value || item.name"
             />