shorts vertical fullscreen controls layout, fixes #417

NUXT/components/Player/fscontrols.vue

@@ -0,0 +1,64 @@
+<template>
+  <div
+    v-if="isFullscreen"
+    class="debug"
+    :style="
+      verticalFullscreen
+        ? 'position: absolute; height: calc(100vh - 14rem); bottom: 7rem; right: 0;'
+        : ''
+    "
+    :class="verticalFullscreen ? 'd-flex flex-column justify-end' : ''"
+  >
+    <v-btn
+      v-for="(item, index) in interactions"
+      :key="index"
+      fab
+      text
+      small
+      color="white"
+      :class="verticalFullscreen ? 'ma-2' : 'mr-2'"
+      :disabled="item.disabled"
+    >
+      <v-icon v-text="item.icon" />
+    </v-btn>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    isFullscreen: {
+      type: Boolean,
+      required: true,
+    },
+    verticalFullscreen: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  data: () => ({
+    interactions: [
+      {
+        icon: "mdi-thumb-up-outline",
+        disabled: true,
+      },
+      {
+        icon: "mdi-thumb-down-outline",
+        disabled: true,
+      },
+      {
+        icon: "mdi-share-outline",
+        disabled: true,
+      },
+      {
+        icon: "mdi-comment-text-outline",
+        disabled: true,
+      },
+      {
+        icon: "mdi-plus-box-multiple-outline",
+        disabled: true,
+      },
+    ],
+  }),
+};
+</script>

NUXT/components/Player/index.vue

@@ -217,26 +217,13 @@
       <!-- bottom controls row -->
       <div
         style="position: absolute; width: 100%; bottom: 0.5rem"
-        class="d-flex justify-between align-center px-2"
+        class="debug d-flex justify-between align-center px-2"
         @click.self="controlsHandler()"
       >
-        <div v-if="isFullscreen">
+        <fscontrols
-          <v-btn fab text small color="white" class="mr-2" disabled>
+          :is-fullscreen="isFullscreen"
-            <v-icon>mdi-thumb-up-outline</v-icon>
+          :vertical-fullscreen="verticalFullscreen"
-          </v-btn>
+        />
-          <v-btn fab text small color="white" class="mr-2" disabled>
-            <v-icon>mdi-thumb-down-outline</v-icon>
-          </v-btn>
-          <v-btn fab text small color="white" class="mr-2" disabled>
-            <v-icon>mdi-share-outline</v-icon>
-          </v-btn>
-          <v-btn fab text small color="white" class="mr-2" disabled>
-            <v-icon>mdi-plus-box-multiple-outline</v-icon>
-          </v-btn>
-          <v-btn fab text small color="white" class="mr-2" disabled>
-            <v-icon>mdi-comment-text-outline</v-icon>
-          </v-btn>
-        </div>
         <v-spacer />
         <!-- // TODO: merge the bottom 2 into 1 reusable component -->
         <quality
@@ -313,6 +300,7 @@ 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";
+import fscontrols from "~/components/Player/fscontrols.vue";
 import fullscreen from "~/components/Player/fullscreen.vue";
 import progressbar from "~/components/Player/progressbar.vue";
 import sponsorblock from "~/components/Player/sponsorblock.vue";
@@ -321,6 +309,7 @@ export default {
     sponsorblock,
     progressbar,
     fullscreen,
+    fscontrols,
     watchtime,
     playpause,
     captions,

NUXT/pages/watch.vue

@@ -27,13 +27,10 @@
         >
           <div class="d-flex flex-column">
             <v-card-title
-              class="pa-0 text-wrap"
-              style="
-                font-size: 0.95rem;
-                line-height: 1.15rem;
-              "
-              v-text="video.title"
               v-emoji
+              class="pa-0 text-wrap"
+              style="font-size: 0.95rem; line-height: 1.15rem"
+              v-text="video.title"
             />
             <v-card-text
               style="font-size: 0.75rem"
@@ -52,8 +49,8 @@
               </div>
             </v-card-text>
           </div>
-          <v-icon class="ml-4" v-if="showMore">mdi-chevron-up</v-icon>
+          <v-icon v-if="showMore" class="ml-4">mdi-chevron-up</v-icon>
-          <v-icon class="ml-4" v-else>mdi-chevron-down</v-icon>
+          <v-icon v-else class="ml-4">mdi-chevron-down</v-icon>
         </div>
         <div
           class="d-flex px-4"