From dd40d3c71864dedd5b20759e76c5b3952dd9318c Mon Sep 17 00:00:00 2001
From: cerrpuffs <crgraft503@gmail.com>
Date: Wed, 4 Feb 2026 11:52:25 -0600
Subject: [PATCH] feat: Add mobile player UI with lyrics integration

- Add new MobilePlayer.vue component with draggable gesture support
- Implement lyrics button in NowPlayingInfo with automatic sync
- Add close button to lyrics view that reopens mobile player
- Fix context menu z-index to appear above mobile player overlay
- Standardize padding across all mobile player elements
- Add isMobilePlayerOpen reactive state for player visibility control

Note for Reviewers:

Please test thoroughly as I only tested with a limited library (one album).
I did not touch other components intentionally, but there may be
unexpected side effects. Feel free to leave comments on this PR
or reach out if you find any issues. Thank you for reviewing!
---
 src/App.vue                                  |  28 +-
 src/components/BottomBar/Left.vue            |  85 ++--
 src/components/ContextMenu.vue               |   2 +-
 src/components/MobilePlayer.vue              | 494 +++++++++++++++++++
 src/components/NowPlaying/Header.vue         | 120 ++---
 src/components/NowPlaying/NowPlayingInfo.vue |  29 +-
 src/stores/content-width.ts                  |   3 +
 src/views/LyricsView/Head.vue                |  36 ++
 8 files changed, 653 insertions(+), 144 deletions(-)
 create mode 100644 src/components/MobilePlayer.vue

diff --git a/src/App.vue b/src/App.vue
index 5dc74884..7fe4341f 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/components/BottomBar/Left.vue b/src/components/BottomBar/Left.vue
index dd0d3ece..f8b8d69c 100644
--- a/src/components/BottomBar/Left.vue
+++ b/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>
+
diff --git a/src/components/ContextMenu.vue b/src/components/ContextMenu.vue
index 8d8e5f82..0330a43e 100644
--- a/src/components/ContextMenu.vue
+++ b/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;
diff --git a/src/components/MobilePlayer.vue b/src/components/MobilePlayer.vue
new file mode 100644
index 00000000..6957e65b
--- /dev/null
+++ b/src/components/MobilePlayer.vue
@@ -0,0 +1,494 @@
+<template>
+    <div
+        ref="playerRef"
+        class="mobile-player"
+        :style="playerStyle"
+    >
+        <div class="drag-handle"></div>
+        
+        <DynamicScroller
+            ref="scrollerRef"
+            :items="scrollerItems"
+            :min-item-size="64"
+            class="scroller"
+            :class="{ isSmall, isMedium }"
+            style="height: 100%"
+        >
+            <template #before>
+                <div class="now-playing-header">
+                    <div class="centered">
+                        <div class="header-row">
+                            <button class="close-btn" @click="closePlayer">
+                                <ExpandSvg />
+                            </button>
+                            <PlayingFrom />
+                        </div>
+                        <div class="np-image">
+                            <img v-motion-fade class="rounded" :src="paths.images.thumb.large + queue.currenttrack?.image" />
+                        </div>
+                        <NowPlayingInfo @handle-fav="handleFav" />
+                        <Progress />
+                        
+                        <div class="time-row">
+                            <div class="time">{{ formatSeconds(queue.duration.current) }}</div>
+                            <div class="time">{{ formatSeconds(queue.duration.full) }}</div>
+                        </div>
+
+                        <div class="controls-row">
+                            <button title="Shuffle" @click="queue.shuffleQueue" class="control-btn shuffle">
+                                <ShuffleSvg />
+                            </button>
+                            
+                            <div class="hotkeys-wrapper">
+                                <HotKeys />
+                            </div>
+                            
+                            <button
+                                class="control-btn repeat"
+                                :class="{ 'repeat-disabled': settings.repeat == 'none' }"
+                                :title="settings.repeat == 'all' ? 'Repeat all' : settings.repeat == 'one' ? 'Repeat one' : 'No repeat'"
+                                @click="settings.toggleRepeatMode"
+                            >
+                                <RepeatOneSvg v-if="settings.repeat == 'one'" />
+                                <RepeatAllSvg v-else />
+                            </button>
+                        </div>
+                        <h3 class="nowplaying_title" v-if="queue.next">Up Next</h3>
+                        <SongItem
+                            v-if="queue.next"
+                            :track="queue.next"
+                            :index="queue.nextindex + 1"
+                            :source="dropSources.folder"
+                            @play-this="queue.playNext"
+                        />
+                        <h3 class="nowplaying_title">Queue</h3>
+                    </div>
+                </div>
+            </template>
+            <template #default="{ item, index, active }">
+                <DynamicScrollerItem
+                    :item="item"
+                    :active="active"
+                    :size-dependencies="[item.props]"
+                    :data-index="index"
+                >
+                    <component
+                        :is="item.component"
+                        :key="index"
+                        v-bind="item.props"
+                        @playThis="playFromQueue(item.props.index - 1)"
+                    ></component>
+                </DynamicScrollerItem>
+            </template>
+        </DynamicScroller>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { useWindowSize } from '@vueuse/core'
+import { Routes } from '@/router'
+import { paths } from '@/config'
+import { dropSources, favType } from '@/enums'
+import favoriteHandler from '@/helpers/favoriteHandler'
+import { isMobilePlayerOpen, isSmall, isMedium } from '@/stores/content-width'
+import useLyrics from '@/stores/lyrics'
+import useQueueStore from '@/stores/queue'
+import useSettingsStore from '@/stores/settings'
+import useTracklist from '@/stores/queue/tracklist'
+import { formatSeconds } from '@/utils'
+import { ScrollerItem } from '@/interfaces'
+
+import Progress from '@/components/LeftSidebar/NP/Progress.vue'
+import SongItem from '@/components/shared/SongItem.vue'
+import NowPlayingInfo from '@/components/NowPlaying/NowPlayingInfo.vue'
+import PlayingFrom from '@/components/NowPlaying/PlayingFrom.vue'
+import HotKeys from '@/components/LeftSidebar/NP/HotKeys.vue'
+import ExpandSvg from '@/assets/icons/expand.svg'
+import ShuffleSvg from '@/assets/icons/shuffle.svg'
+import RepeatAllSvg from '@/assets/icons/repeat.svg'
+import RepeatOneSvg from '@/assets/icons/repeat-one.svg'
+
+const route = useRoute()
+const queue = useQueueStore()
+const lyrics = useLyrics()
+const settings = useSettingsStore()
+const store = useTracklist()
+
+watch(() => queue.currenttrackhash, (newHash) => {
+    if (newHash && queue.currenttrack?.trackhash) {
+        lyrics.checkExists(queue.currenttrack.filepath, queue.currenttrack.trackhash)
+    }
+}, { immediate: true })
+
+watch(() => route.name, (newName) => {
+    if (newName === Routes.Lyrics) {
+        isMobilePlayerOpen.value = false
+    }
+})
+const playerRef = ref<HTMLElement | null>(null)
+const scrollerRef = ref<any>(null)
+const { height } = useWindowSize()
+
+// Logic for manual simple drag/swipe
+const offset = ref(0)
+const isDragging = ref(false)
+const startY = ref(0)
+const currentY = ref(0)
+
+const closePlayer = () => {
+    isMobilePlayerOpen.value = false
+}
+
+function handleFav() {
+    favoriteHandler(
+        queue.currenttrack?.is_favorite,
+        favType.track,
+        queue.currenttrack?.trackhash || '',
+        () => null,
+        () => null
+    )
+}
+
+function playFromQueue(index: number) {
+    queue.play(index)
+}
+
+const scrollerItems = computed(() => {
+    const items: ScrollerItem[] = []
+    
+    // We only show the queue tracks here (not Up Next, because that's in the header)
+    // Wait, NowPlaying view logic: Up Next is queue.next.
+    // The list in NowPlaying view usually starts from specific point?
+    // main.vue: store.tracklist.map...
+    // store.tracklist usually contains the current context tracks.
+    // If I map ALL tracks, I get the whole list.
+    // I should filter? No, standard view shows all.
+    
+    // HOWEVER, I already render queue.next manually in the header.
+    // I should probably ensure the list here reflects what the user expects.
+    // If I just show the full list, it's fine.
+    
+    const trackComponents = store.tracklist.map((track, index) => {
+        track.index = index;
+        return {
+            id: index, // Use index or trackhash? index is used in main.vue
+            component: SongItem,
+            props: {
+                track,
+                index: index + 1,
+                isCurrent: index === queue.currentindex,
+                isCurrentPlaying: index === queue.currentindex && queue.playing,
+                isQueueTrack: true,
+                source: store.from.type,
+            },
+        };
+    });
+
+    return items.concat(trackComponents);
+});
+
+// Touch Handling manually for full control
+const onTouchStart = (e: TouchEvent) => {
+    // If scrolling, don't drag sheet
+    // DynamicScroller root element is what scrolls? 
+    // scrollerRef.$el is likely the .vue-recycle-scroller element.
+    if (scrollerRef.value && scrollerRef.value.$el.scrollTop > 5) return
+
+    isDragging.value = true
+    startY.value = e.touches[0].clientY
+    currentY.value = startY.value
+}
+
+const onTouchMove = (e: TouchEvent) => {
+    if (!isDragging.value) return
+    currentY.value = e.touches[0].clientY
+    const delta = currentY.value - startY.value
+    
+    // Only allow dragging down (positive delta)
+    if (delta > 0) {
+        offset.value = delta
+         if(e.cancelable) e.preventDefault();
+    }
+}
+
+const onTouchEnd = () => {
+    isDragging.value = false
+    if (offset.value > height.value * 0.2) {
+        closePlayer()
+    }
+    offset.value = 0
+}
+
+watch(playerRef, (el) => {
+    if (el) {
+        el.addEventListener('touchstart', onTouchStart, { passive: false })
+        el.addEventListener('touchmove', onTouchMove, { passive: false })
+        el.addEventListener('touchend', onTouchEnd)
+    }
+})
+
+const playerStyle = computed(() => {
+    const transform = isMobilePlayerOpen.value 
+        ? `translateY(${offset.value}px)` 
+        : `translateY(100%)`
+    return {
+        transform,
+        transition: isDragging.value ? 'none' : 'transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1)'
+    }
+})
+
+</script>
+
+<style lang="scss" scoped>
+.mobile-player {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100%;
+    height: 100dvh;
+    background-color: var(--color-bg, #000); 
+    background: $black; 
+    z-index: 9999;
+    overflow: hidden;
+    overflow-x: hidden;
+    will-change: transform;
+    box-shadow: 0 -4px 20px rgba(0,0,0,0.5);
+}
+
+.drag-handle {
+    width: 40px;
+    height: 5px;
+    background-color: $gray3;
+    border-radius: 99px;
+    margin: 0.75rem auto;
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 10;
+}
+
+.scroller {
+    width: 100%;
+    height: 100%;
+    padding: 0 1.25rem;
+    box-sizing: border-box;
+}
+
+.now-playing-header {
+    padding-bottom: $smaller;
+    padding-top: 1.5rem;
+    
+    .header-row {
+        display: grid !important;
+        grid-template-columns: 3rem 1fr 3rem !important;
+        align-items: center;
+        margin-bottom: 2rem;
+        width: 100%;
+
+        .close-btn {
+            background: transparent;
+            border: none;
+            padding: 0;
+            width: 3rem;
+            height: 3rem;
+            display: flex;
+            align-items: center;
+            justify-content: start;
+            
+            svg {
+                transform: rotate(90deg);
+                width: 1.5rem;
+                height: 1.5rem;
+            }
+        }
+    }
+
+    :deep(.now-playing-top) {
+        display: contents !important;
+    }
+
+    :deep(.now-playling-from-link) {
+        grid-column: 2;
+        justify-self: center;
+        max-width: 100%;
+        overflow: hidden;
+        margin: 0 !important;
+        
+        .from {
+            display: flex !important;
+            align-items: center !important;
+            justify-content: center !important;
+            text-align: center !important;
+        }
+    }
+
+    :deep(.options) {
+        grid-column: 3;
+        justify-self: end;
+        background: transparent !important;
+        border: none;
+        padding: 0;
+        width: 3rem;
+        height: 3rem;
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        
+        svg {
+            transform: scale(1.25) rotate(90deg) !important;
+        }
+    }
+
+    .centered {
+        margin: 0 auto;
+        width: 100%;
+        max-width: 500px;
+    }
+
+    .np-image {
+        position: relative;
+        margin-bottom: 2rem;
+
+        img {
+            width: 100%;
+            height: auto;
+            aspect-ratio: 1;
+            object-fit: cover;
+            border-radius: $medium;
+            box-shadow: 0 8px 24px rgba(0,0,0,0.4);
+        }
+    }
+    
+    .time-row {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 1rem;
+        font-size: 0.95rem;
+        font-weight: 500;
+        color: $gray1;
+        font-variant-numeric: tabular-nums;
+    }
+
+    .controls-row {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-top: 1rem;
+        margin-bottom: 2rem;
+        width: 100%;
+        box-sizing: border-box;
+
+        .control-btn {
+            background: transparent;
+            border: none;
+            padding: 0;
+            width: 3rem;
+            height: 3rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-shrink: 0;
+            
+            &.repeat-disabled {
+                opacity: 0.5;
+            }
+            
+            svg {
+                width: 1.5rem;
+                height: 1.5rem;
+            }
+        }
+
+        .hotkeys-wrapper {
+            flex: 1;
+            min-width: 0;
+
+            :deep(.hotkeys) {
+                display: grid !important;
+                grid-template-columns: repeat(3, 1fr) !important;
+                gap: 0 !important;
+                margin: 0 !important;
+                padding: 0 !important;
+                width: 100% !important;
+                
+                button {
+                    margin: 0 !important;
+                    padding: 0 !important;
+                    display: flex !important;
+                    justify-content: center !important;
+                    align-items: center !important;
+                    background: transparent !important;
+                    width: 100% !important;
+                    height: 3rem !important;
+
+                    svg {
+                        transform: scale(1.1); 
+                    }
+                }
+
+                button:nth-child(2) svg { 
+                    transform: scale(1.4);
+                }
+                
+                button:first-child svg {
+                     transform: rotate(180deg) scale(1.1);
+                }
+            }
+        }
+    }
+    
+    :deep(#progress) {
+        width: 100%;
+        margin-top: 1.25rem;
+    }
+    
+    .nowplaying_title {
+        margin: 1.25rem 0;
+        font-size: 1.1rem;
+        font-weight: bold;
+
+        &:last-child {
+            padding-top: $large;
+            margin: 1rem 0;
+        }
+    }
+}
+
+:deep(.now-playing-info) {
+    min-width: 0;
+    align-items: center !important;
+    
+    .text {
+        min-width: 0;
+        overflow: hidden;
+    }
+
+    .title {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        font-size: 1.25rem;
+        font-weight: 700;
+        margin-bottom: 2px;
+    }
+}
+
+// Mobile Queue Item Overrides
+:deep(.songlist-item) {
+    max-width: 500px;
+    overflow: hidden;
+    grid-template-columns: 2fr 3.5rem !important;
+    width: 100%;
+    box-sizing: border-box;
+    
+    .title {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+}
+</style>
diff --git a/src/components/NowPlaying/Header.vue b/src/components/NowPlaying/Header.vue
index 829165be..1febdd4f 100644
--- a/src/components/NowPlaying/Header.vue
+++ b/src/components/NowPlaying/Header.vue
@@ -1,7 +1,9 @@
 <template>
     <div class="now-playing-header">
         <div class="centered">
-            <PlayingFrom />
+            <div class="header-row">
+                <PlayingFrom />
+            </div>
             <RouterLink
                 :to="{
                     name: Routes.album,
@@ -15,15 +17,18 @@
                 <img v-motion-fade class="rounded" :src="paths.images.thumb.large + queue.currenttrack?.image" />
             </RouterLink>
             <NowPlayingInfo @handle-fav="handleFav" />
-            <Progress v-if="isMobile" />
+            
             <div class="below-progress">
-                <div v-if="isMobile" class="time">
-                    {{ formatSeconds(queue.duration.current) }}
-                </div>
-                <Buttons v-if="isSmallPhone" :hide-heart="true" @handleFav="() => {}" />
-                <div v-if="isMobile" class="time">
-                    {{ formatSeconds(queue.duration.full) }}
-                </div>
+             <!-- Desktop progress/time usually handled in bottom bar, 
+                  but NowPlaying view might show it. 
+                  Checking original file: header included PlayingFrom, Image, Info, Progress (if Mobile), 
+                  and .below-progress (if Mobile). 
+                  
+                  Since we are fixing DESKTOP view, and desktop has BottomBar always visible,
+                  we probably don't need progress/controls here at all? 
+                  The original file had `Progress v-if="isMobile"`.
+                  So for desktop, it was just Image + Info + Up Next.
+             -->
             </div>
         </div>
         <h3 class="nowplaying_title" v-if="queue.next">Up Next</h3>
@@ -43,12 +48,8 @@ import { paths } from '@/config'
 import { dropSources, favType } from '@/enums'
 import favoriteHandler from '@/helpers/favoriteHandler'
 import { Routes } from '@/router'
-import { isMobile, isSmallPhone } from '@/stores/content-width'
 import useQueueStore from '@/stores/queue'
-import { formatSeconds } from '@/utils'
 
-import Progress from '@/components/LeftSidebar/NP/Progress.vue'
-import Buttons from '../BottomBar/Right.vue'
 import SongItem from '../shared/SongItem.vue'
 import NowPlayingInfo from './NowPlayingInfo.vue'
 import PlayingFrom from './PlayingFrom.vue'
@@ -75,6 +76,13 @@ function handleFav() {
     padding-bottom: $smaller;
     position: relative;
 
+    .header-row {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-bottom: 1rem;
+    }
+
     .nowplaying_title {
         padding-left: 1rem;
         margin: 1.25rem 0;
@@ -87,100 +95,28 @@ function handleFav() {
         @media only screen and (max-width: 724px) {
             padding-left: 0.5rem;
         }
-
-        /* Somehow has to be replaced by above now
-        @include largePhones {
-            padding-left: 0.5rem;
-        }
-        */
-    }
-
-    .below-progress {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-top: 1rem;
-
-        .time {
-            font-size: $medium;
-            font-weight: 500;
-            background-color: $gray3;
-            padding: 1px $smaller;
-            min-width: 2.5rem;
-            text-align: center;
-            border-radius: $smaller;
-            font-variant-numeric: tabular-nums;
-        }
-
-        /* Responsive */
-        @include allPhones {
-            .right-group button.speaker {
-                border-top: 1px solid transparent !important;
-                border-top-left-radius: 0 !important;
-                border-top-right-radius: 0 !important;
-            }
-        }
-
-        @include smallestPhones {
-            position: relative;
-            flex-direction: column;
-            align-items: unset;
-            gap: $small;
-
-            .time:first-child {
-                align-self: baseline;
-                margin-left: 4px;
-            }
-
-            .time:last-child {
-                align-self: end;
-                position: absolute;
-                top: 0;
-                right: 4px;
-            }
-
-            .right-group {
-                width: 100% !important;
-                display: flex;
-                justify-content: space-between;
-            }
-        }
     }
 
     .centered {
         margin: 0 auto;
         width: 26rem;
         max-width: 100%;
+        padding: 0 1rem;
     }
 
     .np-image {
         position: relative;
         margin-bottom: 1rem;
+        display: block;
 
         img {
             width: 100%;
-            height: 100%;
-            max-width: 30rem;
-            // aspect-ratio: 1;
+            height: auto;
+            aspect-ratio: 1;
             object-fit: cover;
-        }
-    }
-
-    #progress {
-        margin-top: 1rem;
-        margin-right: 0;
-
-        &::-moz-range-thumb {
-            height: 0.8rem;
-        }
-
-        &::-webkit-slider-thumb {
-            height: 0.8rem;
-        }
-
-        &::-ms-thumb {
-            height: 0.8rem;
+            border-radius: $medium;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
         }
     }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/NowPlaying/NowPlayingInfo.vue b/src/components/NowPlaying/NowPlayingInfo.vue
index e94b6ae8..eebfc82f 100644
--- a/src/components/NowPlaying/NowPlayingInfo.vue
+++ b/src/components/NowPlaying/NowPlayingInfo.vue
@@ -12,6 +12,7 @@
       </span>
     </div>
     <div class="actions">
+      <LyricsButton />
       <HeartSvg :state="queue.currenttrack?.is_favorite" @handle-fav="$emit('handleFav', queue.currenttrackhash)" />
       <OptionSvg class="optionsvg" :class="{ context_menu_showing }" @click="showMenu" />
     </div>
@@ -23,6 +24,7 @@ import { ref } from "vue";
 
 import ArtistName from "../shared/ArtistName.vue";
 import HeartSvg from "../shared/HeartSvg.vue";
+import LyricsButton from "../shared/LyricsButton.vue";
 
 import OptionSvg from "@/assets/icons/more.svg";
 import { showTrackContextMenu } from "@/helpers/contextMenuHandler";
@@ -59,10 +61,33 @@ function showMenu(e: MouseEvent) {
   .actions {
     display: flex;
     align-items: center;
-    gap: 1rem;
+    gap: 1.25rem;
+
+    button {
+      background: transparent;
+      border: none;
+      padding: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      svg {
+        width: 1.5rem;
+        height: 1.5rem;
+      }
+    }
+
+    .lyrics {
+      opacity: 0.25;
+      color: $white;
+
+      &.showStatus {
+        opacity: 1;
+      }
+    }
 
     .optionsvg {
-      transform: scale(1.5) rotate(90deg);
+      transform: rotate(90deg);
       border-radius: $small;
       transition: background-color 0.2s ease-out;
 
diff --git a/src/stores/content-width.ts b/src/stores/content-width.ts
index c0c36324..7b78ace6 100644
--- a/src/stores/content-width.ts
+++ b/src/stores/content-width.ts
@@ -85,4 +85,7 @@ export {
     updateCardWidth,
     win_width,
     track_limit,
+    isMobilePlayerOpen
 }
+
+const isMobilePlayerOpen = ref(false)
diff --git a/src/views/LyricsView/Head.vue b/src/views/LyricsView/Head.vue
index ebd45681..68bf6620 100644
--- a/src/views/LyricsView/Head.vue
+++ b/src/views/LyricsView/Head.vue
@@ -17,20 +17,32 @@
     </div>
     <div class="right">
       <div v-if="lyrics.lyrics.length && !lyrics.synced" class="lyricstype">unsynced</div>
+      <button class="close-btn" @click="closeLyrics">
+        <ExpandSvg />
+      </button>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { useRouter } from "vue-router";
+import { isMobilePlayerOpen } from "@/stores/content-width";
 import useLyrics from "@/stores/lyrics";
 import useQueue from "@/stores/queue";
 
 import ArtistName from "@/components/shared/ArtistName.vue";
+import ExpandSvg from "@/assets/icons/expand.svg";
 import { paths } from "@/config";
 import { Routes } from "@/router";
 
 const queue = useQueue();
 const lyrics = useLyrics();
+const router = useRouter();
+
+function closeLyrics() {
+  isMobilePlayerOpen.value = true;
+  router.back();
+}
 
 defineProps<{
   bgColor: string;
@@ -68,6 +80,30 @@ defineProps<{
     font-size: 0.8rem;
   }
 
+  .right {
+    display: flex;
+    align-items: center;
+    gap: $small;
+
+    .close-btn {
+      background: transparent;
+      border: none;
+      padding: 0;
+      width: 2.5rem;
+      height: 2.5rem;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      cursor: pointer;
+
+      svg {
+        width: 1.5rem;
+        height: 1.5rem;
+        transform: rotate(90deg);
+      }
+    }
+  }
+
   .lyricstype {
     border-radius: $smaller;
     font-size: 12px;