refactor: unify glassmorphism CSS order, optimize bottom player layout, and implement group playback state synchronization and keyboard controls.

Author: thakurdotdev

client/src/Context/GroupMusicContext.jsx

@@ -53,6 +53,28 @@ export function GroupMusicProvider({ children }) {
     return () => window.removeEventListener("beforeunload", handleBeforeUnload)
   }, [])
 
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      const activeGroup = useGroupSessionStore.getState().currentGroup
+      if (!activeGroup) return
+
+      if (
+        e.key === " " &&
+        document.activeElement &&
+        !["INPUT", "TEXTAREA"].includes(document.activeElement.tagName)
+      ) {
+        e.preventDefault()
+        playback.handlePlayPause(socket, activeGroup.id)
+      }
+      if (e.key === "ArrowRight") {
+        session.skipSong(socket, user)
+      }
+    }
+
+    window.addEventListener("keydown", handleKeyDown)
+    return () => window.removeEventListener("keydown", handleKeyDown)
+  }, [socket, user, playback, session])
+
   useEffect(() => {
     if (!socket) return
 

client/src/Pages/Music/BottomPlayer/DraggableButton.jsx

@@ -77,7 +77,7 @@ const DraggableButton = memo(({ position, onMaximize, currentSong, isDragging })
     top: transform ? position.y + transform.y : position.y,
     left: transform ? position.x + transform.x : position.x,
     touchAction: "none",
-    zIndex: 9999,
+    zIndex: 10,
   }
 
   const artists = useMemo(() => {

client/src/Pages/Music/BottomPlayer/PlayerControls.jsx

@@ -4,16 +4,20 @@ import { memo, useEffect } from "react"
 import { Button } from "@/components/ui/button"
 import { cn } from "@/lib/utils"
 import { usePlayerStore } from "@/stores/playerStore"
+import { useGroupSessionStore } from "@/stores/groupMusic/sessionStore"
 import { MusicControls, VolumeControl } from "../Common"
 import SleepTimerModal from "../SleepTimer"
 
 const PlayerControls = memo(({ onMinimize, onOpenModal, isMobile }) => {
   const handlePlayPause = usePlayerStore((s) => s.handlePlayPause)
   const handleNextSong = usePlayerStore((s) => s.handleNextSong)
   const handlePrevSong = usePlayerStore((s) => s.handlePrevSong)
+  const isGroupActive = useGroupSessionStore((s) => !!s.currentGroup)
 
   useEffect(() => {
     const handleKeyDown = (e) => {
+      if (isGroupActive) return
+
       if (
         e.key === " " &&
         document.activeElement &&
@@ -28,7 +32,7 @@ const PlayerControls = memo(({ onMinimize, onOpenModal, isMobile }) => {
 
     window.addEventListener("keydown", handleKeyDown)
     return () => window.removeEventListener("keydown", handleKeyDown)
-  }, [handlePlayPause, handleNextSong, handlePrevSong])
+  }, [isGroupActive, handlePlayPause, handleNextSong, handlePrevSong])
 
   return (
     <div className="flex items-center gap-1 sm:gap-2">

client/src/Pages/Music/BottomPlayer/index.jsx

@@ -5,6 +5,7 @@ import { useIsMobile } from "@/hooks/use-mobile"
 import { cn } from "@/lib/utils"
 import { usePlayerStore } from "@/stores/playerStore"
 import { useAppModeStore } from "@/stores/appModeStore"
+import { useGroupPlaybackStore } from "@/stores/groupMusic/playbackStore"
 import AddToPlaylist from "../AddToPlaylist"
 import { ProgressBarMusic } from "../Common"
 import MinimizedPlayer from "./MinimizedPlayer"
@@ -17,6 +18,15 @@ const BottomPlayer = () => {
   const playlist = usePlayerStore((s) => s.playlist)
   const addToQueue = usePlayerStore((s) => s.addToQueue)
   const autoFetchRecommendations = usePlayerStore((s) => s.autoFetchRecommendations)
+  const isSoloPlaying = usePlayerStore((s) => s.isPlaying)
+  const handlePlayPause = usePlayerStore((s) => s.handlePlayPause)
+  const isGroupPlaying = useGroupPlaybackStore((s) => s.isPlaying)
+
+  useEffect(() => {
+    if (isGroupPlaying && isSoloPlaying) {
+      handlePlayPause()
+    }
+  }, [isGroupPlaying, isSoloPlaying, handlePlayPause])
 
   const isMobile = useIsMobile()
   const appMode = useAppModeStore((s) => s.mode)
@@ -60,40 +70,47 @@ const BottomPlayer = () => {
 
   return (
     <>
-      <Card
+      <div
         className={cn(
-          "fixed left-0 w-full border-0 liquid-glass z-50 transition-all duration-300 ease-out overflow-hidden",
-          hasMobileNav ? "bottom-14" : "bottom-0",
+          "fixed left-0 w-full transition-all duration-300 ease-out",
+          hasMobileNav ? "bottom-0 z-40" : "bottom-0 z-50",
           isMinimized
             ? "translate-y-full opacity-0 pointer-events-none"
             : "translate-y-0 opacity-100",
         )}
-        style={{ borderRadius: 0 }}
       >
-        {/* Ambient Background Layer */}
-        <div className="absolute inset-0 -z-10 overflow-hidden pointer-events-none opacity-40">
-          <img
-            src={songImage}
-            alt=""
-            className="w-full h-full object-cover blur-2xl scale-150 transition-all duration-1000"
-          />
+        <div className="absolute -top-1 left-0 right-0 z-50">
+          <ProgressBarMusic />
         </div>
 
-        <CardContent className="p-0 relative">
-          <div className="absolute top-0 left-0 right-0">
-            <ProgressBarMusic />
-          </div>
-
-          <div className="flex items-center justify-between px-4 py-3 pt-4">
-            <SongInfo currentSong={currentSong} onOpenSheet={() => setIsSheetOpen(true)} />
-            <PlayerControls
-              onMinimize={() => setIsMinimized(true)}
-              onOpenModal={() => setIsModalOpen(true)}
-              isMobile={isMobile}
+        <Card
+          className="w-full border-0 liquid-glass overflow-hidden"
+          style={{
+            borderRadius: 0,
+            background: hasMobileNav ? "rgba(10, 12, 18, 0.9)" : undefined,
+          }}
+        >
+          {/* Ambient Background Layer */}
+          <div className="absolute inset-0 -z-10 overflow-hidden pointer-events-none opacity-40">
+            <img
+              src={songImage}
+              alt=""
+              className="w-full h-full object-cover blur-2xl scale-150 transition-all duration-1000"
             />
           </div>
-        </CardContent>
-      </Card>
+
+          <CardContent className={cn("p-0 relative pt-1.5", hasMobileNav && "pb-14")}>
+            <div className="flex items-center justify-between px-4 py-3">
+              <SongInfo currentSong={currentSong} onOpenSheet={() => setIsSheetOpen(true)} />
+              <PlayerControls
+                onMinimize={() => setIsMinimized(true)}
+                onOpenModal={() => setIsModalOpen(true)}
+                isMobile={isMobile}
+              />
+            </div>
+          </CardContent>
+        </Card>
+      </div>
 
       <MinimizedPlayer
         isMinimized={isMinimized}

client/src/Pages/Music/Common.jsx

@@ -13,7 +13,7 @@ import {
   Volume2,
   VolumeX,
 } from "lucide-react"
-import { memo, useCallback, useState } from "react"
+import { memo, useCallback, useState, useRef } from "react"
 import ShareDrawer from "@/components/Posts/ShareDrawer"
 import { Button } from "@/components/ui/button"
 import { Slider } from "@/components/ui/slider"
@@ -63,9 +63,8 @@ export const PlaylistActions = ({ onPlayAll, onShuffle, disabled, showShare = tr
 
 export const LoadingState = ({ message, height }) => (
   <div
-    className={`flex ${
-      height ? height : "h-full"
-    } items-center justify-center bg-background/50 backdrop-blur-xs`}
+    className={`flex ${height ? height : "h-full"
+      } items-center justify-center bg-background/50 backdrop-blur-xs`}
   >
     <div className="flex flex-col items-center gap-4">
       <Loader2 className="w-10 h-10 animate-spin text-emerald-500" />
@@ -266,23 +265,71 @@ export const ProgressBarMusic = memo(({ isTimeVisible = false }) => {
   const currentTime = usePlayerStore((s) => s.currentTime)
   const duration = usePlayerStore((s) => s.duration)
   const handleTimeSeek = usePlayerStore((s) => s.handleTimeSeek)
+  const [hoverTime, setHoverTime] = useState(null)
+  const [hoverX, setHoverX] = useState(0)
+  const [isDragging, setIsDragging] = useState(false)
+  const containerRef = useRef(null)
+
+  const handleMouseMove = (e) => {
+    const rect = e.currentTarget.getBoundingClientRect()
+    const x = e.clientX - rect.left
+    const pct = Math.max(0, Math.min(1, x / rect.width))
+    setHoverTime(pct * duration)
+    setHoverX(x)
+  }
+
+  const handleMouseLeave = () => {
+    setHoverTime(null)
+  }
+
+  const showTooltip = (hoverTime !== null || isDragging) && duration > 0
+  const displayTime = isDragging ? currentTime : hoverTime
+
+  let activeX = hoverX
+  if (isDragging && containerRef.current) {
+    const rect = containerRef.current.getBoundingClientRect()
+    const pct = currentTime / (duration || 1)
+    activeX = pct * rect.width
+  }
 
   return (
-    <div className="space-y-1.5 group/progress">
+    <div
+      ref={containerRef}
+      className="relative group/progress cursor-pointer overflow-visible"
+      onMouseMove={handleMouseMove}
+      onMouseLeave={handleMouseLeave}
+    >
+      {showTooltip && (
+        <div
+          className="absolute z-[100] bg-[#0a0c12]/95 border border-white/10 text-white text-[10px] font-semibold px-2 py-0.5 rounded shadow-xl pointer-events-none -translate-x-1/2"
+          style={{
+            left: `${activeX}px`,
+            bottom: "18px",
+          }}
+        >
+          {formatTime(displayTime)}
+        </div>
+      )}
+
       <Slider
         value={[currentTime]}
         min={0}
         max={duration || 1}
         step={0.1}
         onValueChange={([value]) => handleTimeSeek(value)}
+        onPointerDown={() => setIsDragging(true)}
+        onPointerUp={() => setIsDragging(false)}
+        onPointerCancel={() => setIsDragging(false)}
         className={cn(
-          "h-1.5 cursor-pointer transition-all duration-200",
-          "[&_[data-slider-track]]:h-[5px] [&_[data-slider-track]]:bg-white/15 [&_[data-slider-track]]:rounded-full",
-          "[&_[data-slider-range]]:bg-white [&_[data-slider-range]]:rounded-full",
-          "**:[[role=slider]]:h-4 **:[[role=slider]]:w-4 **:[[role=slider]]:bg-white **:[[role=slider]]:border-0",
-          "**:[[role=slider]]:shadow-[0_0_8px_rgba(255,255,255,0.3)]",
+          "relative h-5 py-2 -my-2 cursor-pointer transition-colors duration-200",
+          "[&>span:first-child]:h-[4px] [&>span:first-child]:bg-white/15 [&>span:first-child]:rounded-full [&>span:first-child]:transition-[height,background-color] [&>span:first-child]:duration-200",
+          "group-hover/progress:[&>span:first-child]:h-[6px] group-hover/progress:[&>span:first-child]:bg-white/20",
+          "[&>span:first-child>span]:bg-white [&>span:first-child>span]:rounded-full [&>span:first-child>span]:transition-colors [&>span:first-child>span]:duration-200",
+          "group-hover/progress:[&>span:first-child>span]:bg-primary",
+          "**:[[role=slider]]:h-3.5 **:[[role=slider]]:w-3.5 **:[[role=slider]]:bg-white **:[[role=slider]]:border-0",
+          "**:[[role=slider]]:shadow-[0_0_10px_rgba(255,255,255,0.4)]",
           "**:[[role=slider]]:opacity-0 **:[[role=slider]]:scale-50",
-          "**:[[role=slider]]:transition-all **:[[role=slider]]:duration-200",
+          "**:[[role=slider]]:transition-[opacity,transform] **:[[role=slider]]:duration-200",
           "group-hover/progress:**:[[role=slider]]:opacity-100 group-hover/progress:**:[[role=slider]]:scale-100",
         )}
       />
@@ -301,32 +348,32 @@ export const ensureHttpsForDownloadUrls = (song) => {
 
   const updatedDownloadUrls = Array.isArray(song.download_url)
     ? song.download_url.map((item) => {
-        if (!item || typeof item !== "object") return item
-        return {
-          ...item,
-          link:
-            item.link && typeof item.link === "string"
-              ? item.link.startsWith("http://")
-                ? item.link.replace("http://", "https://")
-                : item.link
-              : item.link,
-        }
-      })
+      if (!item || typeof item !== "object") return item
+      return {
+        ...item,
+        link:
+          item.link && typeof item.link === "string"
+            ? item.link.startsWith("http://")
+              ? item.link.replace("http://", "https://")
+              : item.link
+            : item.link,
+      }
+    })
     : song.download_url
 
   const updatedArtworkUrls = Array.isArray(song.image)
     ? song.image.map((item) => {
-        if (!item || typeof item !== "object") return item
-        return {
-          ...item,
-          link:
-            item.link && typeof item.link === "string"
-              ? item.link.startsWith("http://")
-                ? item.link.replace("http://", "https://")
-                : item.link
-              : item.link,
-        }
-      })
+      if (!item || typeof item !== "object") return item
+      return {
+        ...item,
+        link:
+          item.link && typeof item.link === "string"
+            ? item.link.startsWith("http://")
+              ? item.link.replace("http://", "https://")
+              : item.link
+            : item.link,
+      }
+    })
     : song.image
 
   return {