39b2b642d2
Plan UI premium 6–8 semaines (design system, shell, Storybook, a11y): - Design system: DESIGN_TOKENS.md, APP_SHELL.md, FULL_LAYOUT_PAGE.md. Single source for layout/shell (index.css), shadows (design-system.css), durations/easing. - Tokens: shadow-cover-depth, shadow-gold-glow, shadow-fab-glow; layout max-height (max-h-layout-drawer, max-h-layout-panel, max-h-layout-list). All duration-200/300/500 replaced by --duration-fast/normal/slow. Arbitrary shadows replaced by token classes. - Shell & player: Sidebar, Header, GlobalPlayer, MiniPlayer, PlayerQueue, PlayerControls, AudioPlayer use tokens; focus-visible on Sidebar, PlayerQueue, DropdownMenuTrigger/Item, TabsTrigger. Typography: text-[10px]/[9px] → text-xs where applicable. - ESLint: no-restricted-syntax (warn) for w-/h-/rounded-/shadow-/text-/spacing arbitrary. - Scripts: report-arbitrary-values.mjs, capture/compare/generate visual; visual-complete.spec.ts. - Stories full layout: Dashboard, Playlists, Library, Settings, Profile in DashboardLayout.stories. - .cursorrules + README: DESIGN_TOKENS, APP_SHELL, visual commands, no arbitrary without justification. - apps/web/.gitignore: e2e test artifacts (test-results-visual, playwright-report-visual). Co-authored-by: Cursor <cursoragent@cursor.com>
88 lines
3.3 KiB
TypeScript
88 lines
3.3 KiB
TypeScript
import { Play, Pause, SkipBack, SkipForward, Shuffle, Repeat } from 'lucide-react';
|
|
import { cn } from '@/lib/utils';
|
|
import { Button } from '@/components/ui/button';
|
|
|
|
export interface PlayerControlsProps {
|
|
isPlaying: boolean;
|
|
onPlayPause: () => void;
|
|
onNext: () => void;
|
|
onPrevious: () => void;
|
|
onShuffle: () => void;
|
|
onRepeat: () => void;
|
|
shuffle: boolean;
|
|
repeat: 'off' | 'track' | 'playlist';
|
|
isExpanded?: boolean;
|
|
}
|
|
|
|
export function PlayerControls({
|
|
isPlaying,
|
|
onPlayPause,
|
|
onNext,
|
|
onPrevious,
|
|
onShuffle,
|
|
onRepeat,
|
|
shuffle,
|
|
repeat,
|
|
isExpanded = false
|
|
}: PlayerControlsProps) {
|
|
return (
|
|
<div className={cn("flex items-center gap-4 md:gap-6", isExpanded && "gap-8")}>
|
|
<button
|
|
onClick={onShuffle}
|
|
className={cn(
|
|
"p-2 rounded-full transition-all duration-[var(--duration-normal)]",
|
|
shuffle
|
|
? "text-primary bg-primary/10 shadow-queue-item-current"
|
|
: "text-muted-foreground hover:text-white hover:bg-white/5"
|
|
)}
|
|
title="Shuffle"
|
|
>
|
|
<Shuffle className={cn("w-4 h-4", isExpanded && "w-5 h-5")} />
|
|
</button>
|
|
|
|
<button
|
|
onClick={onPrevious}
|
|
className="text-white hover:text-primary transition-colors p-2 active:scale-95 hover:bg-white/5 rounded-full"
|
|
>
|
|
<SkipBack className={cn("w-5 h-5 fill-current", isExpanded && "w-6 h-6")} />
|
|
</button>
|
|
|
|
<button
|
|
onClick={onPlayPause}
|
|
className={cn(
|
|
"rounded-full bg-primary text-black flex items-center justify-center hover:scale-105 active:scale-95 transition-all shadow-button-primary-glow hover:shadow-button-primary-glow-hover",
|
|
isExpanded ? "w-16 h-16" : "w-12 h-12"
|
|
)}
|
|
>
|
|
{isPlaying ? (
|
|
<Pause className={cn("fill-current", isExpanded ? "w-8 h-8" : "w-6 h-6")} />
|
|
) : (
|
|
<Play className={cn("fill-current ml-1", isExpanded ? "w-8 h-8" : "w-6 h-6")} />
|
|
)}
|
|
</button>
|
|
|
|
<button
|
|
onClick={onNext}
|
|
className="text-white hover:text-primary transition-colors p-2 active:scale-95 hover:bg-white/5 rounded-full"
|
|
>
|
|
<SkipForward className={cn("w-5 h-5 fill-current", isExpanded && "w-6 h-6")} />
|
|
</button>
|
|
|
|
<button
|
|
onClick={onRepeat}
|
|
className={cn(
|
|
"p-2 rounded-full transition-all duration-[var(--duration-normal)] relative",
|
|
repeat !== 'off'
|
|
? "text-primary bg-primary/10 shadow-queue-item-current"
|
|
: "text-muted-foreground hover:text-white hover:bg-white/5"
|
|
)}
|
|
title="Repeat"
|
|
>
|
|
<Repeat className={cn("w-4 h-4", isExpanded && "w-5 h-5")} />
|
|
{repeat === 'track' && (
|
|
<span className="absolute -top-1 -right-1 text-[8px] font-bold bg-primary text-black px-1 rounded-full">1</span>
|
|
)}
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|