Add mobile player UI with lyrics integration

src/App.vue

@@ -20,13 +20,19 @@
         <div id="acontent" v-element-size="updateContentElemSize">
             <div id="contentresizer" ref="appcontent"></div>
             <BalancerProvider>
-                <RouterView />
+                <RouterView v-slot="{ Component }">
+                    <Transition name="slide" mode="out-in">
+                        <component :is="Component" />
+                    </Transition>
+                </RouterView>
             </BalancerProvider>
         </div>
         <RightSideBar v-if="settings.use_sidebar && xl" />
+<RightSideBar v-if="settings.use_sidebar && xl" />
         <BottomBar />
         <!-- <BubbleManager /> -->
     </section>
+    <MobilePlayer v-if="isMobile" />
 </template>
 
 <script setup lang="ts">
@@ -54,6 +60,7 @@ import { xl, xxl } from "./composables/useBreakpoints";
 import ContextMenu from "@/components/ContextMenu.vue";
 import Modal from "@/components/modal.vue";
 import Notification from "@/components/Notification.vue";
+import MobilePlayer from "@/components/MobilePlayer.vue";
 
 // @app-grid-components
 import BottomBar from "@/components/BottomBar/BottomBar.vue";
@@ -176,4 +183,23 @@ export default defineComponent({
         display: none;
     }
 }
+
+.slide-enter-active,
+.slide-leave-active {
+    transition: opacity 0.15s ease, transform 0.15s ease;
+}
+
+.slide-enter-from,
+.slide-leave-to {
+    opacity: 0;
+    transform: translateY(10px);
+}
+
+* {
+    -webkit-tap-highlight-color: transparent;
+}
+
+#app-grid {
+    overflow-x: hidden;
+}
 </style>

src/components/BottomBar/Left.vue

@@ -1,32 +1,24 @@
 <template>
-    <div v-auto-animate class="left-group">
+    <div ref="leftGroupRef" v-auto-animate class="left-group">
         <HeartSvg
             v-if="settings.use_np_img && !isMobile"
             :state="queue.currenttrack?.is_favorite"
             @handleFav="$emit('handleFav')"
         />
-        <RouterLink
+        <div
             v-else
             title="Go to Now Playing"
-            :to="{
-                name: Routes.nowPlaying,
-                params: {
-                    tab: 'home',
-                },
-                replace: true,
-            }"
             class="np-image rounded-sm no-scroll"
+            @click="goToNowPlaying"
         >
             <img :src="paths.images.thumb.small + queue.currenttrack?.image" alt="" />
-            <div class="expandicon">
-                <ExpandSvg />
-            </div>
-        </RouterLink>
+        </div>
         <div
             class="track-info"
             :style="{
                 color: getShift(colors.theme1, [0, -170]),
             }"
+            @click="goToNowPlaying"
         >
             <div v-tooltip class="title">
                 <span class="ellip">
@@ -47,16 +39,18 @@
 </template>
 
 <script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useSwipe } from '@vueuse/core'
 import { paths } from '@/config'
 import { Routes } from '@/router'
 import { getShift } from '@/utils/colortools/shift'
 
 import useColorStore from '@/stores/colors'
-import { isLargerMobile, isMobile } from '@/stores/content-width'
+import { isLargerMobile, isMobile, isMobilePlayerOpen } from '@/stores/content-width'
 import useQStore from '@/stores/queue'
 import useSettingsStore from '@/stores/settings'
 
-import ExpandSvg from '@/assets/icons/expand.svg'
 import ArtistName from '@/components/shared/ArtistName.vue'
 import HotKeys from '../LeftSidebar/NP/HotKeys.vue'
 import HeartSvg from '../shared/HeartSvg.vue'
@@ -67,10 +61,34 @@ import ExplicitIcon from '@/assets/icons/explicit.svg'
 const queue = useQStore()
 const settings = useSettingsStore()
 const colors = useColorStore()
+const router = useRouter()
+const leftGroupRef = ref<HTMLElement | null>(null)
+
+const { lengthY } = useSwipe(leftGroupRef, {
+    onSwipeEnd(e, direction) {
+        if (direction === 'UP' && Math.abs(lengthY.value) > 30) {
+            goToNowPlaying()
+        }
+    },
+})
 
 defineEmits<{
     (e: 'handleFav'): void
 }>()
+
+function goToNowPlaying() {
+    if (isMobile.value) {
+        isMobilePlayerOpen.value = true
+        return
+    }
+
+    router.push({
+        name: Routes.nowPlaying,
+        params: {
+            tab: 'home',
+        },
+    })
+}
 </script>
 
 <style lang="scss">
@@ -87,44 +105,12 @@ defineEmits<{
     .np-image {
         position: relative;
         height: 3rem;
+        cursor: pointer;
 
         img {
             height: 100%;
         }
 
-        .expandicon {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background-color: rgba(51, 51, 51, 0.6);
-
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            opacity: 0;
-            transition: opacity 0.2s ease-out, height 0.2s ease-out, transform 0.2s ease-out,
-                background-color 0.2s ease-out;
-
-            svg {
-                transform: rotate(-90deg) scale(0.92);
-            }
-        }
-
-        &:hover {
-            .expandicon {
-                transform: translateY(-$medium);
-                height: 130%;
-            }
-        }
-
-        &:active {
-            .expandicon {
-                background-color: rgba(51, 51, 51, 0.74);
-            }
-        }
-
         @include largePhones {
             flex-shrink: 0;
             margin-right: $medium;
@@ -143,6 +129,8 @@ defineEmits<{
     }
 
     .track-info {
+        cursor: pointer;
+
         .title {
             color: $white;
             display: flex;
@@ -185,3 +173,4 @@ defineEmits<{
     }
 }
 </style>
+

src/components/ContextMenu.vue

@@ -67,7 +67,7 @@ context.$subscribe((mutation, state) => {
   top: 0;
   left: 0;
   width: 13rem;
-  z-index: 1000 !important;
+  z-index: 100001 !important;
   height: min-content;
   padding: $small;
   background: $context;