Feature: Auto-Hide Multiview Toolbar

src/components/multiview/MultiviewToolbar.vue

@@ -1,5 +1,10 @@
 <template>
-  <v-toolbar class="mv-toolbar flex-grow-0" style="right: 0;" height="64">
+  <v-toolbar
+    class="mv-toolbar flex-grow-0"
+    style="right: 0;"
+    height="64"
+    @mouseleave="hideToolbar"
+  >
     <v-app-bar-nav-icon @click="toggleMainNav" />
     <!-- Toolbar Live Video Selector -->
     <div
@@ -51,6 +56,21 @@
           <v-icon>{{ b.icon }}</v-icon>
         </v-btn>
       </template>
+      <v-tooltip bottom>
+        <template #activator="{ on, attrs }">
+          <v-btn
+            v-if="!$store.state.isMobile"
+            icon
+            v-bind="attrs"
+            @click="toggleAutoHideToolbar"
+            v-on="on"
+          >
+            <v-icon>{{ mdiArrowCollapseUp }}</v-icon>
+          </v-btn>
+        </template>
+        <span>{{ $t("views.multiview.autoHideToolbar") }}</span>
+      </v-tooltip>
+
       <!-- Share button and dialog -->
       <v-menu
         v-model="shareDialog"
@@ -120,7 +140,7 @@
 
 <script>
 import copyToClipboard from "@/mixins/copyToClipboard";
-import { mdiLinkVariant, mdiClipboardPlusOutline } from "@mdi/js";
+import { mdiLinkVariant, mdiClipboardPlusOutline, mdiArrowCollapseUp } from "@mdi/js";
 import { encodeLayout } from "@/utils/mv-utils";
 import { mapState } from "vuex";
 
@@ -138,7 +158,9 @@ export default {
         return {
             mdiClipboardPlusOutline,
             mdiLinkVariant,
+            mdiArrowCollapseUp,
             shareDialog: false,
+            localAutoHide: false,
         };
     },
     computed: {
@@ -165,6 +187,15 @@ export default {
         collapseButtons() {
             return this.buttons.filter((btn) => btn.collapse);
         },
+        autoHideToolbar: {
+            get() {
+                return this.localAutoHide;
+            },
+            set(value) {
+                this.localAutoHide = value;
+                this.$emit("update:autoHideToolbar", value);
+            },
+        },
     },
     methods: {
         startCopyToClipboard(txt) {
@@ -181,6 +212,16 @@ export default {
         toggleMainNav() {
             return this.$store.commit("setNavDrawer", !this.$store.state.navDrawer);
         },
+        hideToolbar() {
+            if (this.localAutoHide) {
+                setTimeout(() => {
+                    this.collapseToolbar = true;
+                }, 150);
+            }
+        },
+        toggleAutoHideToolbar() {
+            this.autoHideToolbar = !this.autoHideToolbar;
+        },
     },
 };
 </script>

src/locales/en/ui.yml

@@ -454,6 +454,7 @@ views:
         Videos are synced based on the stream start time, and can desync due to
         mid stream technical issues or deleted portions. Use offsets to manually
         align videos
+    autoHideToolbar: Auto Hide Toolbar
   mugen:
     welcome: >-
       Welcome to MugenClips! Everyone on this page is seeing the same randomly

src/views/MultiView.vue

@@ -4,45 +4,59 @@
     :class="{ 'mobile-helpers': $store.state.isMobile }"
     class="d-flex flex-column multiview"
   >
+    <!-- Hidden div for autohiding the Toolbar -->
+    <div
+      v-if="collapseToolbar && autoHideToolbar"
+      class="flex-grow-0 toolbar-placeholder"
+      style="position: absolute; opacity: 0; right: 0; z-index: 1; width: 100%; height: 64px;"
+      @mouseenter="collapseToolbar = false"
+    />
     <!-- Floating tool bar -->
-    <MultiviewToolbar v-show="!collapseToolbar" v-model="collapseToolbar" :buttons="buttons">
-      <template #left>
-        <VideoSelector v-if="!$vuetify.breakpoint.xs" horizontal @videoClicked="handleToolbarClick" />
-        <!-- Single Button video selector for xs displays -->
-        <v-btn
-          icon
-          large
-          class="d-flex"
-          @click="handleToolbarShowSelector"
-        >
-          <v-icon style="border-radius: 0 position: relative; margin-right: 3px; cursor: pointer" large>
-            {{ mdiCardPlus }}
-          </v-icon>
-        </v-btn>
-      </template>
-      <template #buttons>
-        <v-menu offset-y>
-          <template #activator="{ on, attrs }">
-            <v-btn
-              color="primary"
-              dark
-              v-bind="attrs"
-              icon
-              v-on="on"
-            >
-              <v-icon>{{ icons.mdiGridLarge }}</v-icon>
-            </v-btn>
-          </template>
-          <portal to="preset-dialog" :disabled="!showPresetSelector">
-            <preset-selector
-              :slim="!showPresetSelector"
-              @selected="handlePresetClicked"
-              @showAll="showPresetSelector = true"
-            />
-          </portal>
-        </v-menu>
-      </template>
-    </MultiviewToolbar>
+    <transition name="slide">
+      <MultiviewToolbar
+        v-show="!collapseToolbar"
+        v-model="collapseToolbar"
+        :buttons="buttons"
+        @update:autoHideToolbar="autoHideToolbar = $event"
+      >
+        <template #left>
+          <VideoSelector v-if="!$vuetify.breakpoint.xs" horizontal @videoClicked="handleToolbarClick" />
+          <!-- Single Button video selector for xs displays -->
+          <v-btn
+            icon
+            large
+            class="d-flex"
+            @click="handleToolbarShowSelector"
+          >
+            <v-icon style="border-radius: 0 position: relative; margin-right: 3px; cursor: pointer" large>
+              {{ mdiCardPlus }}
+            </v-icon>
+          </v-btn>
+        </template>
+        <template #buttons>
+          <v-menu offset-y>
+            <template #activator="{ on, attrs }">
+              <v-btn
+                color="primary"
+                dark
+                v-bind="attrs"
+                icon
+                v-on="on"
+              >
+                <v-icon>{{ icons.mdiGridLarge }}</v-icon>
+              </v-btn>
+            </template>
+            <portal to="preset-dialog" :disabled="!showPresetSelector">
+              <preset-selector
+                :slim="!showPresetSelector"
+                @selected="handlePresetClicked"
+                @showAll="showPresetSelector = true"
+              />
+            </portal>
+          </v-menu>
+        </template>
+      </MultiviewToolbar>
+    </transition>
     <!-- Multiview Cell Area Background -->
     <multiview-background
       :show-tips="layout.length === 0"
@@ -447,13 +461,15 @@ export default {
                     type: "twitch",
                 };
             }
+            // eslint-disable-next-line consistent-return
             return video;
-        }
+        },
     },
 };
 </script>
 
 <style lang="scss">
+
 .multiview {
     width: 100%;
     height: 100%;
@@ -490,4 +506,19 @@ export default {
         margin-bottom: 10px;
     }
 }
+
+.slide-enter-active, .slide-leave-active {
+      transition: all 0.3s ease-out;
+}
+
+.slide-enter-from,
+.slide-leave-to {
+  transform: translateY(-64px);
+  opacity: 0;
+}
+
+.slide-enter {
+    transform: translateY(-64px);
+    opacity: 1;
+}
 </style>