From e3a5199e131affd096e9e7dd38ecee578aa30d74 Mon Sep 17 00:00:00 2001
From: Pontus Grandin <smeaurix@gmail.com>
Date: Fri, 30 Aug 2024 15:25:04 +0200
Subject: [PATCH 1/4] add autohide toolbar icon and en locale

---
 src/components/multiview/MultiviewToolbar.vue | 22 ++++++++++++++++++-
 src/locales/en/ui.yml                         |  1 +
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/components/multiview/MultiviewToolbar.vue b/src/components/multiview/MultiviewToolbar.vue
index 3fb9609ce..50cc69574 100644
--- a/src/components/multiview/MultiviewToolbar.vue
+++ b/src/components/multiview/MultiviewToolbar.vue
@@ -51,6 +51,21 @@
           <v-icon>{{ b.icon }}</v-icon>
         </v-btn>
       </template>
+      <v-tooltip bottom>
+        <template #activator="{ on, attrs }">
+          <v-btn
+            icon
+            :class="{ 'mx-1': $vuetify.breakpoint.mdAndDown }"
+            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 +135,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,6 +153,7 @@ export default {
         return {
             mdiClipboardPlusOutline,
             mdiLinkVariant,
+            mdiArrowCollapseUp,
             shareDialog: false,
         };
     },
@@ -181,6 +197,10 @@ export default {
         toggleMainNav() {
             return this.$store.commit("setNavDrawer", !this.$store.state.navDrawer);
         },
+        toggleAutoHideToolbar() {
+            console.log("Test");
+            // TODO implement
+        },
     },
 };
 </script>
diff --git a/src/locales/en/ui.yml b/src/locales/en/ui.yml
index acde0cb32..c0d6ba017 100644
--- a/src/locales/en/ui.yml
+++ b/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

From 3e65b5c8df0feedb7839238512622693979f64e0 Mon Sep 17 00:00:00 2001
From: Pontus Grandin <smeaurix@gmail.com>
Date: Mon, 2 Sep 2024 14:49:37 +0200
Subject: [PATCH 2/4] hidden mouseenter toolbar and autoHideToolbar field

---
 src/components/multiview/MultiviewToolbar.vue | 33 ++++++++++++++++---
 src/views/MultiView.vue                       | 17 ++++++++--
 2 files changed, 44 insertions(+), 6 deletions(-)

diff --git a/src/components/multiview/MultiviewToolbar.vue b/src/components/multiview/MultiviewToolbar.vue
index 50cc69574..939eedfe4 100644
--- a/src/components/multiview/MultiviewToolbar.vue
+++ b/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
@@ -55,7 +60,7 @@
         <template #activator="{ on, attrs }">
           <v-btn
             icon
-            :class="{ 'mx-1': $vuetify.breakpoint.mdAndDown }"
+            class="responsive-pconly"
             v-bind="attrs"
             @click="toggleAutoHideToolbar"
             v-on="on"
@@ -155,6 +160,7 @@ export default {
             mdiLinkVariant,
             mdiArrowCollapseUp,
             shareDialog: false,
+            localAutoHide: false,
         };
     },
     computed: {
@@ -181,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) {
@@ -197,9 +212,13 @@ export default {
         toggleMainNav() {
             return this.$store.commit("setNavDrawer", !this.$store.state.navDrawer);
         },
+        hideToolbar() {
+            if (this.localAutoHide) {
+                this.collapseToolbar = true;
+            }
+        },
         toggleAutoHideToolbar() {
-            console.log("Test");
-            // TODO implement
+            this.autoHideToolbar = !this.autoHideToolbar;
         },
     },
 };
@@ -215,4 +234,10 @@ export default {
 .mv-toolbar {
     z-index: 1;
 }
+
+.responsive-pconly {
+  @media (max-width: 1200px) {
+    display: none;
+  }
+}
 </style>
diff --git a/src/views/MultiView.vue b/src/views/MultiView.vue
index 56736e556..e983286bd 100644
--- a/src/views/MultiView.vue
+++ b/src/views/MultiView.vue
@@ -4,8 +4,20 @@
     :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">
+    <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 -->
@@ -447,8 +459,9 @@ export default {
                     type: "twitch",
                 };
             }
+            // eslint-disable-next-line consistent-return
             return video;
-        }
+        },
     },
 };
 </script>

From a6ed25a36008cfc3b5f165172939ee483d27e1f5 Mon Sep 17 00:00:00 2001
From: Pontus Grandin <smeaurix@gmail.com>
Date: Wed, 4 Sep 2024 16:20:27 +0200
Subject: [PATCH 3/4] add isMobile check

---
 src/components/multiview/MultiviewToolbar.vue | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/components/multiview/MultiviewToolbar.vue b/src/components/multiview/MultiviewToolbar.vue
index 939eedfe4..a993eb0da 100644
--- a/src/components/multiview/MultiviewToolbar.vue
+++ b/src/components/multiview/MultiviewToolbar.vue
@@ -59,8 +59,8 @@
       <v-tooltip bottom>
         <template #activator="{ on, attrs }">
           <v-btn
+            v-if="!$store.state.isMobile"
             icon
-            class="responsive-pconly"
             v-bind="attrs"
             @click="toggleAutoHideToolbar"
             v-on="on"
@@ -234,10 +234,4 @@ export default {
 .mv-toolbar {
     z-index: 1;
 }
-
-.responsive-pconly {
-  @media (max-width: 1200px) {
-    display: none;
-  }
-}
 </style>

From 742e2be322a3245227b01bd77d8e57a5959c9e63 Mon Sep 17 00:00:00 2001
From: Pontus Grandin <smeaurix@gmail.com>
Date: Wed, 4 Sep 2024 16:54:23 +0200
Subject: [PATCH 4/4] toolbar animation on enter and leave

---
 src/components/multiview/MultiviewToolbar.vue |   4 +-
 src/views/MultiView.vue                       | 104 ++++++++++--------
 2 files changed, 64 insertions(+), 44 deletions(-)

diff --git a/src/components/multiview/MultiviewToolbar.vue b/src/components/multiview/MultiviewToolbar.vue
index a993eb0da..3fa3c4b83 100644
--- a/src/components/multiview/MultiviewToolbar.vue
+++ b/src/components/multiview/MultiviewToolbar.vue
@@ -214,7 +214,9 @@ export default {
         },
         hideToolbar() {
             if (this.localAutoHide) {
-                this.collapseToolbar = true;
+                setTimeout(() => {
+                    this.collapseToolbar = true;
+                }, 150);
             }
         },
         toggleAutoHideToolbar() {
diff --git a/src/views/MultiView.vue b/src/views/MultiView.vue
index e983286bd..2de7f5bd5 100644
--- a/src/views/MultiView.vue
+++ b/src/views/MultiView.vue
@@ -12,49 +12,51 @@
       @mouseenter="collapseToolbar = false"
     />
     <!-- Floating tool bar -->
-    <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 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"
@@ -467,6 +469,7 @@ export default {
 </script>
 
 <style lang="scss">
+
 .multiview {
     width: 100%;
     height: 100%;
@@ -503,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>