feat: enhance mobile experience with responsive audio player and navigation improvements
This commit is contained in:
GitHub
@@ -1 +1 @@
|
||||
NEXT_PUBLIC_COMMIT_SHA=35febc5
|
||||
NEXT_PUBLIC_COMMIT_SHA=d8a8534
|
||||
|
||||
@@ -10,10 +10,12 @@ import { Progress } from '@/components/ui/progress';
|
||||
import { useToast } from '@/hooks/use-toast';
|
||||
import { useLastFmScrobbler } from '@/hooks/use-lastfm-scrobbler';
|
||||
import { useStandaloneLastFm } from '@/hooks/use-standalone-lastfm';
|
||||
import { useIsMobile } from '@/hooks/use-mobile';
|
||||
|
||||
export const AudioPlayer: React.FC = () => {
|
||||
const { currentTrack, playPreviousTrack, addToQueue, playNextTrack, clearQueue, queue, toggleShuffle, shuffle, toggleCurrentTrackStar } = useAudioPlayer();
|
||||
const router = useRouter();
|
||||
const isMobile = useIsMobile();
|
||||
const audioRef = useRef<HTMLAudioElement>(null);
|
||||
const preloadAudioRef = useRef<HTMLAudioElement>(null);
|
||||
const [progress, setProgress] = useState(0);
|
||||
@@ -354,109 +356,119 @@ export const AudioPlayer: React.FC = () => {
|
||||
return null;
|
||||
}
|
||||
|
||||
// Mini player (collapsed state)
|
||||
if (isMinimized) {
|
||||
// Mobile compact mini player :3
|
||||
if (isMobile) {
|
||||
return (
|
||||
<div className="fixed bottom-4 left-4 z-50">
|
||||
<div
|
||||
className="bg-background/95 backdrop-blur-xs border rounded-lg shadow-lg cursor-pointer hover:scale-[1.02] transition-transform w-80"
|
||||
onClick={() => setIsMinimized(false)}
|
||||
>
|
||||
<div className="flex items-center p-3">
|
||||
<Image
|
||||
src={currentTrack.coverArt || '/default-user.jpg'}
|
||||
alt={currentTrack.name}
|
||||
width={40}
|
||||
height={40}
|
||||
className="w-10 h-10 rounded-md shrink-0"
|
||||
/>
|
||||
<div className="flex-1 min-w-0 mx-3">
|
||||
<div className="overflow-hidden">
|
||||
<p className="font-semibold text-sm whitespace-nowrap animate-infinite-scroll">
|
||||
{currentTrack.name}
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground truncate">{currentTrack.artist}</p>
|
||||
</div>
|
||||
{/* Heart icon for favoriting */}
|
||||
<button
|
||||
className="p-1.5 hover:bg-gray-700/50 rounded-full transition-colors mr-2"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
toggleCurrentTrackStar();
|
||||
}}
|
||||
title={currentTrack.starred ? 'Remove from favorites' : 'Add to favorites'}
|
||||
>
|
||||
<Heart
|
||||
className={`w-4 h-4 ${currentTrack.starred ? 'text-primary fill-primary' : 'text-gray-400'}`}
|
||||
<>
|
||||
<div className="fixed bottom-0 left-0 right-0 z-50 bg-background/95 backdrop-blur-sm border-t shadow-lg mobile-audio-player mobile-safe-bottom">
|
||||
<div className="px-4 py-3">
|
||||
{/* Progress bar at top for mobile */}
|
||||
<div className="mb-3">
|
||||
<Progress
|
||||
value={progress}
|
||||
className="h-1 cursor-pointer progress-mobile"
|
||||
onClick={handleProgressClick}
|
||||
/>
|
||||
</button>
|
||||
<div className="flex items-center justify-center space-x-2">
|
||||
<button className="p-1.5 hover:bg-gray-700/50 rounded-full transition-colors" onClick={playPreviousTrack}>
|
||||
<FaBackward className="w-3 h-3" />
|
||||
</button>
|
||||
<button className="p-2 hover:bg-gray-700/50 rounded-full transition-colors" onClick={togglePlayPause}>
|
||||
{isPlaying ? <FaPause className="w-4 h-4" /> : <FaPlay className="w-4 h-4" />}
|
||||
</button>
|
||||
<button className="p-1.5 hover:bg-gray-700/50 rounded-full transition-colors" onClick={playNextTrack}>
|
||||
<FaForward className="w-3 h-3" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
{/* Track info */}
|
||||
<div
|
||||
className="flex items-center flex-1 min-w-0 cursor-pointer"
|
||||
onClick={() => setIsFullScreen(true)}
|
||||
>
|
||||
<Image
|
||||
src={currentTrack.coverArt || '/default-user.jpg'}
|
||||
alt={currentTrack.name}
|
||||
width={48}
|
||||
height={48}
|
||||
className="w-12 h-12 rounded-lg mr-3 shrink-0 shadow-sm"
|
||||
/>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="font-semibold text-sm truncate">{currentTrack.name}</p>
|
||||
<p className="text-xs text-muted-foreground truncate">{currentTrack.artist}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile controls */}
|
||||
<div className="flex items-center space-x-2">
|
||||
<button
|
||||
className="p-3 hover:bg-muted/50 rounded-full transition-all duration-200 active:scale-95"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
toggleCurrentTrackStar();
|
||||
}}
|
||||
title={currentTrack.starred ? 'Remove from favorites' : 'Add to favorites'}
|
||||
>
|
||||
<Heart
|
||||
className={`w-4 h-4 ${currentTrack.starred ? 'text-primary fill-primary' : ''}`}
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
className="p-3 hover:bg-muted/50 rounded-full transition-all duration-200 active:scale-95"
|
||||
onClick={playPreviousTrack}
|
||||
>
|
||||
<FaBackward className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
className="p-4 hover:bg-muted/50 rounded-full transition-all duration-200 active:scale-95 bg-primary/10"
|
||||
onClick={togglePlayPause}
|
||||
>
|
||||
{isPlaying ? <FaPause className="w-5 h-5" /> : <FaPlay className="w-5 h-5" />}
|
||||
</button>
|
||||
<button
|
||||
className="p-3 hover:bg-muted/50 rounded-full transition-all duration-200 active:scale-95"
|
||||
onClick={playNextTrack}
|
||||
>
|
||||
<FaForward className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Full Screen Player for mobile */}
|
||||
<FullScreenPlayer
|
||||
isOpen={isFullScreen}
|
||||
onClose={() => setIsFullScreen(false)}
|
||||
onOpenQueue={handleOpenQueue}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Single audio element - shared across all UI states */}
|
||||
<audio ref={audioRef} hidden />
|
||||
<audio ref={preloadAudioRef} hidden preload="metadata" />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
// Compact floating player (default state)
|
||||
return (
|
||||
<div className="fixed bottom-4 left-4 right-4 z-50">
|
||||
<div className="bg-background/95 backdrop-blur-xs border rounded-lg shadow-lg p-3 cursor-pointer hover:scale-[1.01] transition-transform">
|
||||
<div className="flex items-center">
|
||||
{/* Track info */}
|
||||
<div className="flex items-center flex-1 min-w-0">
|
||||
<Image
|
||||
src={
|
||||
currentTrack.coverArt &&
|
||||
(currentTrack.coverArt.startsWith('http') || currentTrack.coverArt.startsWith('/'))
|
||||
? currentTrack.coverArt
|
||||
: '/default-user.jpg'
|
||||
}
|
||||
alt={currentTrack.name}
|
||||
width={48}
|
||||
height={48}
|
||||
className="w-12 h-12 rounded-md mr-4 shrink-0"
|
||||
/>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="font-semibold truncate text-base">{currentTrack.name}</p>
|
||||
<p className="text-sm text-muted-foreground truncate">{currentTrack.artist}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Center section with controls and progress */}
|
||||
<div className="flex flex-col items-center flex-1 justify-center">
|
||||
{/* Control buttons */}
|
||||
<div className="flex items-center justify-center space-x-3">
|
||||
// Desktop mini player (collapsed state)
|
||||
if (isMinimized) {
|
||||
return (
|
||||
<>
|
||||
<div className="fixed bottom-4 left-4 z-50">
|
||||
<div
|
||||
className="bg-background/95 backdrop-blur-xs border rounded-lg shadow-lg cursor-pointer hover:scale-[1.02] transition-transform w-80"
|
||||
onClick={() => setIsMinimized(false)}
|
||||
>
|
||||
<div className="flex items-center p-3">
|
||||
<Image
|
||||
src={currentTrack.coverArt || '/default-user.jpg'}
|
||||
alt={currentTrack.name}
|
||||
width={40}
|
||||
height={40}
|
||||
className="w-10 h-10 rounded-md shrink-0"
|
||||
/>
|
||||
<div className="flex-1 min-w-0 mx-3">
|
||||
<div className="overflow-hidden">
|
||||
<p className="font-semibold text-sm whitespace-nowrap animate-infinite-scroll">
|
||||
{currentTrack.name}
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground truncate">{currentTrack.artist}</p>
|
||||
</div>
|
||||
{/* Heart icon for favoriting */}
|
||||
<button
|
||||
onClick={toggleShuffle}
|
||||
className={`p-2 hover:bg-gray-700/50 rounded-full transition-colors ${shuffle ? 'text-primary bg-primary/20' : ''}`}
|
||||
title={shuffle ? 'Shuffle On - Queue is shuffled' : 'Shuffle Off - Click to shuffle queue'}
|
||||
>
|
||||
<FaShuffle className="w-4 h-4" />
|
||||
</button>
|
||||
<button className="p-2 hover:bg-gray-700/50 rounded-full transition-colors" onClick={playPreviousTrack}>
|
||||
<FaBackward className="w-4 h-4" />
|
||||
</button>
|
||||
<button className="p-3 hover:bg-gray-700/50 rounded-full transition-colors" onClick={togglePlayPause}>
|
||||
{isPlaying ? <FaPause className="w-5 h-5" /> : <FaPlay className="w-5 h-5" />}
|
||||
</button>
|
||||
<button className="p-2 hover:bg-gray-700/50 rounded-full transition-colors" onClick={playNextTrack}>
|
||||
<FaForward className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
className="p-2 hover:bg-gray-700/50 rounded-full transition-colors flex items-center justify-center"
|
||||
className="p-1.5 hover:bg-gray-700/50 rounded-full transition-colors mr-2"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
toggleCurrentTrackStar();
|
||||
@@ -464,51 +476,134 @@ export const AudioPlayer: React.FC = () => {
|
||||
title={currentTrack.starred ? 'Remove from favorites' : 'Add to favorites'}
|
||||
>
|
||||
<Heart
|
||||
className={`w-5 h-5 ${currentTrack.starred ? 'text-primary fill-primary' : ''}`}
|
||||
className={`w-4 h-4 ${currentTrack.starred ? 'text-primary fill-primary' : 'text-gray-400'}`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Progress bar */}
|
||||
{/* <div className="flex items-center space-x-2 w-80">
|
||||
<span className="text-xs text-muted-foreground w-8 text-right">
|
||||
{formatTime(audioCurrent?.currentTime ?? 0)}
|
||||
</span>
|
||||
<Progress value={progress} className="flex-1 cursor-pointer h-1" onClick={handleProgressClick}/>
|
||||
<span className="text-xs text-muted-foreground w-8">
|
||||
{formatTime(audioCurrent?.duration ?? 0)}
|
||||
</span>
|
||||
</div> */}
|
||||
<div className="flex items-center justify-center space-x-2">
|
||||
<button className="p-1.5 hover:bg-gray-700/50 rounded-full transition-colors" onClick={playPreviousTrack}>
|
||||
<FaBackward className="w-3 h-3" />
|
||||
</button>
|
||||
<button className="p-2 hover:bg-gray-700/50 rounded-full transition-colors" onClick={togglePlayPause}>
|
||||
{isPlaying ? <FaPause className="w-4 h-4" /> : <FaPlay className="w-4 h-4" />}
|
||||
</button>
|
||||
<button className="p-1.5 hover:bg-gray-700/50 rounded-full transition-colors" onClick={playNextTrack}>
|
||||
<FaForward className="w-3 h-3" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Right side buttons */}
|
||||
<div className="flex items-center justify-end space-x-2 flex-1">
|
||||
<button
|
||||
className="p-2 hover:bg-gray-700/50 rounded-full transition-colors"
|
||||
onClick={() => setIsFullScreen(true)}
|
||||
title="Full Screen"
|
||||
>
|
||||
<FaExpand className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
className="p-2 hover:bg-gray-700/50 rounded-full transition-colors"
|
||||
onClick={() => setIsMinimized(true)}
|
||||
title="Minimize"
|
||||
>
|
||||
<FaCompress className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Single audio element - shared across all UI states */}
|
||||
<audio ref={audioRef} hidden />
|
||||
<audio ref={preloadAudioRef} hidden preload="metadata" />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
// Desktop compact floating player (default state)
|
||||
return (
|
||||
<>
|
||||
<div className="fixed bottom-4 left-4 right-4 z-50">
|
||||
<div className="bg-background/95 backdrop-blur-xs border rounded-lg shadow-lg p-3 cursor-pointer hover:scale-[1.01] transition-transform">
|
||||
<div className="flex items-center">
|
||||
{/* Track info */}
|
||||
<div className="flex items-center flex-1 min-w-0">
|
||||
<Image
|
||||
src={
|
||||
currentTrack.coverArt &&
|
||||
(currentTrack.coverArt.startsWith('http') || currentTrack.coverArt.startsWith('/'))
|
||||
? currentTrack.coverArt
|
||||
: '/default-user.jpg'
|
||||
}
|
||||
alt={currentTrack.name}
|
||||
width={48}
|
||||
height={48}
|
||||
className="w-12 h-12 rounded-md mr-4 shrink-0"
|
||||
/>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="font-semibold truncate text-base">{currentTrack.name}</p>
|
||||
<p className="text-sm text-muted-foreground truncate">{currentTrack.artist}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Center section with controls and progress */}
|
||||
<div className="flex flex-col items-center flex-1 justify-center">
|
||||
{/* Control buttons */}
|
||||
<div className="flex items-center justify-center space-x-3">
|
||||
<button
|
||||
onClick={toggleShuffle}
|
||||
className={`p-2 hover:bg-gray-700/50 rounded-full transition-colors ${shuffle ? 'text-primary bg-primary/20' : ''}`}
|
||||
title={shuffle ? 'Shuffle On - Queue is shuffled' : 'Shuffle Off - Click to shuffle queue'}
|
||||
>
|
||||
<FaShuffle className="w-4 h-4" />
|
||||
</button>
|
||||
<button className="p-2 hover:bg-gray-700/50 rounded-full transition-colors" onClick={playPreviousTrack}>
|
||||
<FaBackward className="w-4 h-4" />
|
||||
</button>
|
||||
<button className="p-3 hover:bg-gray-700/50 rounded-full transition-colors" onClick={togglePlayPause}>
|
||||
{isPlaying ? <FaPause className="w-5 h-5" /> : <FaPlay className="w-5 h-5" />}
|
||||
</button>
|
||||
<button className="p-2 hover:bg-gray-700/50 rounded-full transition-colors" onClick={playNextTrack}>
|
||||
<FaForward className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
className="p-2 hover:bg-gray-700/50 rounded-full transition-colors flex items-center justify-center"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
toggleCurrentTrackStar();
|
||||
}}
|
||||
title={currentTrack.starred ? 'Remove from favorites' : 'Add to favorites'}
|
||||
>
|
||||
<Heart
|
||||
className={`w-5 h-5 ${currentTrack.starred ? 'text-primary fill-primary' : ''}`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Progress bar */}
|
||||
{/* <div className="flex items-center space-x-2 w-80">
|
||||
<span className="text-xs text-muted-foreground w-8 text-right">
|
||||
{formatTime(audioCurrent?.currentTime ?? 0)}
|
||||
</span>
|
||||
<Progress value={progress} className="flex-1 cursor-pointer h-1" onClick={handleProgressClick}/>
|
||||
<span className="text-xs text-muted-foreground w-8">
|
||||
{formatTime(audioCurrent?.duration ?? 0)}
|
||||
</span>
|
||||
</div> */}
|
||||
</div>
|
||||
|
||||
{/* Right side buttons */}
|
||||
<div className="flex items-center justify-end space-x-2 flex-1">
|
||||
<button
|
||||
className="p-2 hover:bg-gray-700/50 rounded-full transition-colors"
|
||||
onClick={() => setIsFullScreen(true)}
|
||||
title="Full Screen"
|
||||
>
|
||||
<FaExpand className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
className="p-2 hover:bg-gray-700/50 rounded-full transition-colors"
|
||||
onClick={() => setIsMinimized(true)}
|
||||
title="Minimize"
|
||||
>
|
||||
<FaCompress className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Full Screen Player */}
|
||||
<FullScreenPlayer
|
||||
isOpen={isFullScreen}
|
||||
onClose={() => setIsFullScreen(false)}
|
||||
onOpenQueue={handleOpenQueue}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Single audio element - shared across all UI states */}
|
||||
<audio ref={audioRef} hidden />
|
||||
<audio ref={preloadAudioRef} hidden preload="metadata" />
|
||||
|
||||
{/* Full Screen Player */}
|
||||
<FullScreenPlayer
|
||||
isOpen={isFullScreen}
|
||||
onClose={() => setIsFullScreen(false)}
|
||||
onOpenQueue={handleOpenQueue}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -96,48 +96,72 @@ const Ihateserverside: React.FC<IhateserversideProps> = ({ children }) => {
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div className="hidden md:flex md:flex-col md:h-screen md:w-screen md:overflow-hidden">
|
||||
{/* Top Menu */}
|
||||
<div
|
||||
className="sticky z-10 bg-background border-b w-full"
|
||||
style={{
|
||||
left: 'env(titlebar-area-x, 0)',
|
||||
top: 'env(titlebar-area-y, 0)',
|
||||
}}
|
||||
>
|
||||
<Menu
|
||||
toggleSidebar={toggleSidebarVisibility}
|
||||
isSidebarVisible={isSidebarVisible}
|
||||
toggleStatusBar={() => setIsStatusBarVisible(!isStatusBarVisible)}
|
||||
isStatusBarVisible={isStatusBarVisible}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Main Content Area */}
|
||||
<div className="flex-1 flex overflow-hidden w-full">
|
||||
{isSidebarVisible && (
|
||||
<div className="w-16 shrink-0 border-r transition-all duration-200">
|
||||
<Sidebar
|
||||
playlists={playlists}
|
||||
className="h-full overflow-y-auto"
|
||||
visible={isSidebarVisible}
|
||||
favoriteAlbums={favoriteAlbums}
|
||||
onRemoveFavoriteAlbum={removeFavoriteAlbum}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex-1 overflow-y-auto min-w-0">
|
||||
<div>{children}</div>
|
||||
</div>
|
||||
return (
|
||||
<>
|
||||
{/* Mobile Layout */}
|
||||
<div className="flex md:hidden flex-col h-screen w-screen overflow-hidden">
|
||||
{/* Top Menu */}
|
||||
<div className="shrink-0 bg-background border-b w-full">
|
||||
<Menu
|
||||
toggleSidebar={toggleSidebarVisibility}
|
||||
isSidebarVisible={isSidebarVisible}
|
||||
toggleStatusBar={() => setIsStatusBarVisible(!isStatusBarVisible)}
|
||||
isStatusBarVisible={isStatusBarVisible}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Floating Audio Player */}
|
||||
{isStatusBarVisible && (
|
||||
<AudioPlayer />
|
||||
)}
|
||||
<Toaster />
|
||||
</div>
|
||||
{/* Main Content Area with bottom padding for audio player */}
|
||||
<div className="flex-1 overflow-y-auto pb-24">
|
||||
<div>{children}</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile Audio Player - always visible on mobile */}
|
||||
<Toaster />
|
||||
</div>
|
||||
|
||||
{/* Desktop Layout */}
|
||||
<div className="hidden md:flex md:flex-col md:h-screen md:w-screen md:overflow-hidden">
|
||||
{/* Top Menu */}
|
||||
<div
|
||||
className="sticky z-10 bg-background border-b w-full"
|
||||
style={{
|
||||
left: 'env(titlebar-area-x, 0)',
|
||||
top: 'env(titlebar-area-y, 0)',
|
||||
}}
|
||||
>
|
||||
<Menu
|
||||
toggleSidebar={toggleSidebarVisibility}
|
||||
isSidebarVisible={isSidebarVisible}
|
||||
toggleStatusBar={() => setIsStatusBarVisible(!isStatusBarVisible)}
|
||||
isStatusBarVisible={isStatusBarVisible}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Main Content Area */}
|
||||
<div className="flex-1 flex overflow-hidden w-full">
|
||||
{isSidebarVisible && (
|
||||
<div className="w-16 shrink-0 border-r transition-all duration-200">
|
||||
<Sidebar
|
||||
playlists={playlists}
|
||||
className="h-full overflow-y-auto"
|
||||
visible={isSidebarVisible}
|
||||
favoriteAlbums={favoriteAlbums}
|
||||
onRemoveFavoriteAlbum={removeFavoriteAlbum}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex-1 overflow-y-auto min-w-0">
|
||||
<div>{children}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Toaster />
|
||||
</div>
|
||||
|
||||
{/* Single Shared Audio Player - shows on all layouts */}
|
||||
<AudioPlayer />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { useCallback } from "react";
|
||||
import { useRouter } from 'next/navigation';
|
||||
import Image from "next/image";
|
||||
import { Github, Mail } from "lucide-react"
|
||||
import { Github, Mail, Menu as MenuIcon, X } from "lucide-react"
|
||||
import {
|
||||
Menubar,
|
||||
MenubarCheckboxItem,
|
||||
@@ -28,9 +28,35 @@ import {
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog"
|
||||
} from "@/components/ui/dialog"
|
||||
import {
|
||||
Drawer,
|
||||
DrawerClose,
|
||||
DrawerContent,
|
||||
DrawerDescription,
|
||||
DrawerFooter,
|
||||
DrawerHeader,
|
||||
DrawerTitle,
|
||||
DrawerTrigger,
|
||||
} from "@/components/ui/drawer"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { useIsMobile } from "@/hooks/use-mobile"
|
||||
import Link from "next/link"
|
||||
import {
|
||||
Search,
|
||||
Home,
|
||||
List,
|
||||
Radio,
|
||||
Users,
|
||||
Disc,
|
||||
Music,
|
||||
Heart,
|
||||
Grid3X3,
|
||||
Clock,
|
||||
Settings,
|
||||
Circle
|
||||
} from "lucide-react";
|
||||
|
||||
interface MenuProps {
|
||||
toggleSidebar: () => void;
|
||||
@@ -43,9 +69,27 @@ export function Menu({ toggleSidebar, isSidebarVisible, toggleStatusBar, isStatu
|
||||
const [isFullScreen, setIsFullScreen] = useState(false)
|
||||
const router = useRouter();
|
||||
const [open, setOpen] = useState(false);
|
||||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
||||
const { isConnected } = useNavidrome();
|
||||
const [isClient, setIsClient] = useState(false);
|
||||
const [navidromeUrl, setNavidromeUrl] = useState<string | null>(null);
|
||||
const isMobile = useIsMobile();
|
||||
|
||||
// Navigation items for mobile menu
|
||||
const navigationItems = [
|
||||
{ href: '/', label: 'Home', icon: Home },
|
||||
{ href: '/search', label: 'Search', icon: Search },
|
||||
{ href: '/library/albums', label: 'Albums', icon: Disc },
|
||||
{ href: '/library/artists', label: 'Artists', icon: Users },
|
||||
{ href: '/library/songs', label: 'Songs', icon: Circle },
|
||||
{ href: '/library/playlists', label: 'Playlists', icon: Music },
|
||||
{ href: '/favorites', label: 'Favorites', icon: Heart },
|
||||
{ href: '/queue', label: 'Queue', icon: List },
|
||||
{ href: '/radio', label: 'Radio', icon: Radio },
|
||||
{ href: '/browse', label: 'Browse', icon: Grid3X3 },
|
||||
{ href: '/history', label: 'History', icon: Clock },
|
||||
{ href: '/settings', label: 'Settings', icon: Settings },
|
||||
];
|
||||
|
||||
// For this demo, we'll show connection status instead of user auth
|
||||
const connectionStatus = isConnected ? "Connected to Navidrome" : "Not connected";
|
||||
@@ -112,28 +156,91 @@ export function Menu({ toggleSidebar, isSidebarVisible, toggleStatusBar, isStatu
|
||||
return (
|
||||
<>
|
||||
<div className="flex items-center justify-between w-full">
|
||||
<Menubar
|
||||
className="rounded-none border-b border-none px-2 lg:px-2 flex-1 min-w-0"
|
||||
style={{
|
||||
minWidth: 0,
|
||||
WebkitAppRegion: "drag"
|
||||
} as React.CSSProperties}
|
||||
>
|
||||
<div style={{ WebkitAppRegion: "no-drag" } as React.CSSProperties} className="flex items-center gap-2">
|
||||
<MenubarMenu>
|
||||
<MenubarTrigger className="font-bold">mice</MenubarTrigger>
|
||||
<MenubarContent>
|
||||
<MenubarItem onClick={() => setOpen(true)}>About Music</MenubarItem>
|
||||
<MenubarSeparator />
|
||||
<MenubarItem onClick={() => router.push('/settings')}>
|
||||
Preferences <MenubarShortcut>⌘,</MenubarShortcut>
|
||||
</MenubarItem>
|
||||
<MenubarSeparator />
|
||||
<MenubarItem onClick={() => isClient && window.close()}>
|
||||
Quit Music <MenubarShortcut>⌘Q</MenubarShortcut>
|
||||
</MenubarItem>
|
||||
</MenubarContent>
|
||||
</MenubarMenu>
|
||||
{/* Mobile Navigation */}
|
||||
{isMobile ? (
|
||||
<div className="flex items-center justify-between w-full p-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Drawer open={mobileMenuOpen} onOpenChange={setMobileMenuOpen}>
|
||||
<DrawerTrigger asChild>
|
||||
<Button variant="ghost" size="sm" className="p-2">
|
||||
<MenuIcon className="h-5 w-5" />
|
||||
</Button>
|
||||
</DrawerTrigger>
|
||||
<DrawerContent>
|
||||
<DrawerHeader>
|
||||
<DrawerTitle className="flex items-center gap-2">
|
||||
<Image src="/icon-192.png" alt="mice" width={24} height={24} className="rounded" />
|
||||
mice
|
||||
</DrawerTitle>
|
||||
<DrawerDescription>
|
||||
Navigate through your music library
|
||||
</DrawerDescription>
|
||||
</DrawerHeader>
|
||||
<div className="px-4 pb-6">
|
||||
<div className="grid gap-2">
|
||||
{navigationItems.map((item) => (
|
||||
<Link key={item.href} href={item.href}>
|
||||
<DrawerClose asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="w-full justify-start gap-3 h-12"
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
>
|
||||
<item.icon className="h-5 w-5" />
|
||||
{item.label}
|
||||
</Button>
|
||||
</DrawerClose>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</DrawerContent>
|
||||
</Drawer>
|
||||
<h1 className="font-bold text-lg">mice</h1>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => router.push('/search')}
|
||||
className="p-2"
|
||||
>
|
||||
<Search className="h-5 w-5" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setOpen(true)}
|
||||
className="p-2"
|
||||
>
|
||||
<Settings className="h-5 w-5" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
/* Desktop Navigation */
|
||||
<Menubar
|
||||
className="rounded-none border-b border-none px-2 lg:px-2 flex-1 min-w-0"
|
||||
style={{
|
||||
minWidth: 0,
|
||||
WebkitAppRegion: "drag"
|
||||
} as React.CSSProperties}
|
||||
>
|
||||
<div style={{ WebkitAppRegion: "no-drag" } as React.CSSProperties} className="flex items-center gap-2">
|
||||
<MenubarMenu>
|
||||
<MenubarTrigger className="font-bold">mice</MenubarTrigger>
|
||||
<MenubarContent>
|
||||
<MenubarItem onClick={() => setOpen(true)}>About Music</MenubarItem>
|
||||
<MenubarSeparator />
|
||||
<MenubarItem onClick={() => router.push('/settings')}>
|
||||
Preferences <MenubarShortcut>⌘,</MenubarShortcut>
|
||||
</MenubarItem>
|
||||
<MenubarSeparator />
|
||||
<MenubarItem onClick={() => isClient && window.close()}>
|
||||
Quit Music <MenubarShortcut>⌘Q</MenubarShortcut>
|
||||
</MenubarItem>
|
||||
</MenubarContent>
|
||||
</MenubarMenu>
|
||||
<MenubarMenu>
|
||||
<MenubarTrigger className="relative">File</MenubarTrigger>
|
||||
<MenubarContent>
|
||||
@@ -279,6 +386,7 @@ export function Menu({ toggleSidebar, isSidebarVisible, toggleStatusBar, isStatu
|
||||
</MenubarMenu>
|
||||
</div>
|
||||
</Menubar>
|
||||
)}
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
106
app/globals.css
106
app/globals.css
@@ -816,33 +816,95 @@
|
||||
---break---
|
||||
*/
|
||||
|
||||
/*
|
||||
/* Mobile-specific optimizations */
|
||||
@media (max-width: 767px) {
|
||||
/* Improve touch targets for mobile */
|
||||
button {
|
||||
min-height: 44px;
|
||||
min-width: 44px;
|
||||
}
|
||||
|
||||
will delete after the new theme replaces the old one
|
||||
since the new theme already has the sidebar colors defined
|
||||
/* Better touch feedback */
|
||||
button:active {
|
||||
transform: scale(0.95);
|
||||
transition: transform 0.1s ease;
|
||||
}
|
||||
|
||||
:root {
|
||||
--sidebar: hsl(0 0% 98%);
|
||||
--sidebar-foreground: hsl(240 5.3% 26.1%);
|
||||
--sidebar-primary: hsl(240 5.9% 10%);
|
||||
--sidebar-primary-foreground: hsl(0 0% 98%);
|
||||
--sidebar-accent: hsl(240 4.8% 95.9%);
|
||||
--sidebar-accent-foreground: hsl(240 5.9% 10%);
|
||||
--sidebar-border: hsl(220 13% 91%);
|
||||
--sidebar-ring: hsl(217.2 91.2% 59.8%);
|
||||
/* Ensure proper viewport behavior */
|
||||
html {
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
/* Smooth scrolling for mobile */
|
||||
.overflow-y-auto {
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
/* Mobile audio player specific */
|
||||
.mobile-audio-player {
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
}
|
||||
|
||||
/* Prevent horizontal scroll */
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
/* Better focus states for accessibility */
|
||||
button:focus-visible {
|
||||
outline: 2px solid hsl(var(--primary));
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--sidebar: hsl(240 5.9% 10%);
|
||||
--sidebar-foreground: hsl(240 4.8% 95.9%);
|
||||
--sidebar-primary: hsl(224.3 76.3% 48%);
|
||||
--sidebar-primary-foreground: hsl(0 0% 100%);
|
||||
--sidebar-accent: hsl(240 3.7% 15.9%);
|
||||
--sidebar-accent-foreground: hsl(240 4.8% 95.9%);
|
||||
--sidebar-border: hsl(240 3.7% 15.9%);
|
||||
--sidebar-ring: hsl(217.2 91.2% 59.8%);
|
||||
} */
|
||||
/* Improved animations */
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-fade-in-up {
|
||||
animation: fadeInUp 0.3s ease-out;
|
||||
}
|
||||
|
||||
/* Safe area insets for mobile devices */
|
||||
@supports (padding: max(0px)) {
|
||||
.mobile-safe-bottom {
|
||||
padding-bottom: max(1rem, env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.mobile-safe-top {
|
||||
padding-top: max(0.5rem, env(safe-area-inset-top));
|
||||
}
|
||||
}
|
||||
|
||||
/* Progress bar improvements for mobile */
|
||||
@media (max-width: 767px) {
|
||||
.progress-mobile {
|
||||
height: 3px;
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
.progress-mobile::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
border-radius: 50%;
|
||||
background: hsl(var(--primary));
|
||||
cursor: pointer;
|
||||
margin-top: -6px;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
---break---
|
||||
|
||||
Reference in New Issue
Block a user