player controls position improvements

NUXT/components/Player/fullscreen.vue

@@ -4,10 +4,13 @@
     text
     small
     color="white"
-    style="position: absolute; bottom: 0.25rem; right: 0.25rem"
+    style="position: absolute; right: 0.25rem"
+    :style="fullscreen ? 'bottom: 3.5rem' : 'bottom: 0.25rem'"
     @click.stop="$emit('fullscreen')"
   >
-    <v-icon>{{ fullscreen ? "mdi-fullscreen-exit" : "mdi-fullscreen" }}</v-icon>
+    <v-icon size="1.25rem">{{
+      fullscreen ? "mdi-fullscreen-exit" : "mdi-fullscreen"
+    }}</v-icon>
   </v-btn>
 </template>
 

NUXT/components/Player/index.vue

@@ -74,7 +74,11 @@
 
     <div
       style="transition: opacity 0.15s ease-in-out"
-      :style="controls ? 'opacity: 1;' : 'opacity: 0; pointer-events: none'"
+      :style="
+        controls && !seeking
+          ? 'opacity: 1;'
+          : 'opacity: 0; pointer-events: none'
+      "
     >
       <minimize />
       <loop />
@@ -143,7 +147,89 @@
         <v-icon size="1rem">mdi-fast-forward-5</v-icon>
       </v-btn>
 
-      <watchtime v-if="$refs.player" :video="$refs.player" />
+      <watchtime
+        v-if="$refs.player"
+        :video="$refs.player"
+        :fullscreen="isFullscreen"
+      />
+      <v-btn
+        v-if="isFullscreen"
+        fab
+        text
+        small
+        outlined
+        style="position: absolute; bottom: 0.25rem; left: 1rem"
+        color="white"
+        disabled
+        @click.stop=""
+      >
+        <v-icon>mdi-thumb-up-outline</v-icon>
+      </v-btn>
+      <v-btn
+        v-if="isFullscreen"
+        fab
+        text
+        small
+        outlined
+        style="position: absolute; bottom: 0.25rem; left: 4rem"
+        color="white"
+        disabled
+        @click.stop=""
+      >
+        <v-icon>mdi-thumb-down-outline</v-icon>
+      </v-btn>
+      <v-btn
+        v-if="isFullscreen"
+        fab
+        text
+        small
+        outlined
+        style="position: absolute; bottom: 0.25rem; left: 7rem"
+        color="white"
+        disabled
+        @click.stop=""
+      >
+        <v-icon>mdi-share-outline</v-icon>
+      </v-btn>
+      <v-btn
+        v-if="isFullscreen"
+        fab
+        text
+        small
+        outlined
+        style="position: absolute; bottom: 0.25rem; left: 10rem"
+        color="white"
+        disabled
+        @click.stop=""
+      >
+        <v-icon>mdi-plus-box-multiple-outline</v-icon>
+      </v-btn>
+      <v-btn
+        v-if="isFullscreen"
+        fab
+        text
+        small
+        outlined
+        style="position: absolute; bottom: 0.25rem; left: 13rem"
+        color="white"
+        disabled
+        @click.stop=""
+      >
+        <v-icon>mdi-comment-text-outline</v-icon>
+      </v-btn>
+
+      <v-btn
+        v-if="isFullscreen"
+        fab
+        text
+        small
+        style="position: absolute; bottom: 0.25rem; right: 0.25rem"
+        color="white"
+        disabled
+        @click.stop=""
+      >
+        <v-icon>mdi-cards-outline</v-icon>
+      </v-btn>
       <!-- // 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" />
@@ -151,6 +237,18 @@
         :fullscreen="isFullscreen"
         @fullscreen="(controls = $refs.player.paused), handleFullscreenChange()"
       />
+      <v-btn
+        v-if="isFullscreen"
+        fab
+        text
+        small
+        style="position: absolute; bottom: 0.25rem; right: 0.25rem"
+        color="white"
+        disabled
+        @click.stop=""
+      >
+        <v-icon>mdi-cards-outline</v-icon>
+      </v-btn>
     </div>
     <progressbar
       v-if="$refs.player"

NUXT/components/Player/watchtime.vue

@@ -1,12 +1,7 @@
 <template>
   <div
-    style="
+    style="color: #fff; left: 1rem; font-size: 0.75rem; position: absolute"
-      color: #fff;
+    :style="fullscreen ? 'bottom: 4.25rem' : 'bottom: 1rem'"
-      left: 1rem;
-      bottom: 1rem;
-      font-size: 0.75rem;
-      position: absolute;
-    "
   >
     {{ watched }}
     <span style="color: #aaa"> / {{ duration }} </span>
@@ -15,7 +10,16 @@
 
 <script>
 export default {
-  props: ["video"],
+  props: {
+    video: {
+      type: Object,
+      required: true,
+    },
+    fullscreen: {
+      type: Boolean,
+      required: true,
+    },
+  },
   data() {
     return {
       watched: 0,