senke/veza
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style(player): elevate player components to SaaS Premium

Browse source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
senke 2026-02-07 16:01:56 +01:00
parent 823a0fe1ee
commit 740f5b6308
11 changed files with 30 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
apps/web/src/components/player/MiniPlayer.tsx
View file

@ -63,7 +63,7 @@ export const MiniPlayer: React.FC<MiniPlayerProps> = ({
</p>
</div>
<button
className="text-muted-foreground hover:text-kodo-magenta transition-colors ml-2"
className="text-muted-foreground hover:text-primary transition-colors ml-2"
onClick={() => addToast('Added to Liked Songs')}
>
<Heart className="w-5 h-5" />
@ -103,14 +103,14 @@ export const MiniPlayer: React.FC<MiniPlayerProps> = ({
{/* 3. Right Actions */}
<div className="flex items-center justify-end gap-4 w-[30%] min-w-[200px]">
<button
className="text-muted-foreground hover:text-kodo-magenta transition-colors hidden xl:block"
className="text-muted-foreground hover:text-primary transition-colors hidden xl:block"
title="Lyrics"
onClick={onExpand}
>
<Mic2 className="w-4 h-4" />
</button>
<button
className="text-muted-foreground hover:text-kodo-lime transition-colors"
className="text-muted-foreground hover:text-success transition-colors"
title="Devices"
onClick={() => addToast('Device Menu')}
>

6
apps/web/src/components/player/PlaybackSpeedModal.tsx
View file

@ -19,7 +19,7 @@ export const PlaybackSpeedModal: React.FC<PlaybackSpeedModalProps> = ({
return (
<div className="absolute bottom-20 right-0 md:right-auto md:left-1/2 md:-translate-x-1/2 w-80 bg-card border border-border rounded-xl shadow-2xl z-50 animate-fadeIn overflow-hidden">
<div className="p-4 border-b border-kodo-steel bg-kodo-ink flex justify-between items-center">
<div className="p-4 border-b border-border bg-muted flex justify-between items-center">
<h3 className="font-bold text-white flex items-center gap-2 text-sm">
<Gauge className="w-4 h-4 text-warning" /> Playback Speed
</h3>
@ -45,7 +45,7 @@ export const PlaybackSpeedModal: React.FC<PlaybackSpeedModalProps> = ({
step="0.05"
value={playbackRate}
onChange={(e) => setPlaybackRate(parseFloat(e.target.value))}
className="w-full h-1.5 bg-muted rounded-lg appearance-none cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:bg-kodo-gold [&::-webkit-slider-thumb]:rounded-full"
className="w-full h-1.5 bg-muted rounded-lg appearance-none cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:bg-warning [&::-webkit-slider-thumb]:rounded-full"
/>
</div>
@ -74,7 +74,7 @@ export const PlaybackSpeedModal: React.FC<PlaybackSpeedModalProps> = ({
</div>
<div
onClick={togglePitchCorrection}
className={`w-10 h-5 rounded-full relative cursor-pointer transition-colors ${pitchCorrection ? 'bg-kodo-gold' : 'bg-muted'}`}
className={`w-10 h-5 rounded-full relative cursor-pointer transition-colors ${pitchCorrection ? 'bg-warning' : 'bg-muted'}`}
>
<div
className={`absolute top-1 w-3 h-3 bg-white rounded-full transition-all ${pitchCorrection ? 'left-6' : 'left-1'}`}

14
apps/web/src/components/player/PlayerControls.tsx
View file

@ -48,14 +48,14 @@ export const PlayerControls: React.FC<PlayerControlsProps> = ({
{/* 1. Playback Modifiers */}
<div className="flex items-center gap-4 relative">
<button
className={`transition-colors hover:text-foreground ${shuffle ? 'text-primary' : 'text-kodo-content-dim'}`}
className={`transition-colors hover:text-foreground ${shuffle ? 'text-primary' : 'text-muted-foreground'}`}
onClick={toggleShuffle}
title="Shuffle"
>
<Shuffle className={layout === 'full' ? 'w-5 h-5' : 'w-4 h-4'} />
</button>
<button
className={`transition-colors hover:text-foreground relative ${repeatMode !== 'off' ? 'text-primary' : 'text-kodo-content-dim'}`}
className={`transition-colors hover:text-foreground relative ${repeatMode !== 'off' ? 'text-primary' : 'text-muted-foreground'}`}
onClick={toggleRepeat}
title="Repeat"
>
@ -71,7 +71,7 @@ export const PlayerControls: React.FC<PlayerControlsProps> = ({
{/* 2. Main Transport */}
<div className="flex items-center gap-6">
<button
className="text-kodo-content-dim hover:text-foreground transition-colors"
className="text-muted-foreground hover:text-foreground transition-colors"
onClick={prevTrack}
>
<SkipBack
@ -105,7 +105,7 @@ export const PlayerControls: React.FC<PlayerControlsProps> = ({
)}
</button>
<button
className="text-kodo-content-dim hover:text-foreground transition-colors"
className="text-muted-foreground hover:text-foreground transition-colors"
onClick={nextTrack}
>
<SkipForward
@ -123,7 +123,7 @@ export const PlayerControls: React.FC<PlayerControlsProps> = ({
{layout === 'full' && (
<>
<button
className={`text-kodo-content-dim hover:text-warning transition-colors ${showSpeed ? 'text-warning' : ''}`}
className={`text-muted-foreground hover:text-warning transition-colors ${showSpeed ? 'text-warning' : ''}`}
onClick={() => {
setShowSpeed(!showSpeed);
setShowVisualizer(false);
@ -133,7 +133,7 @@ export const PlayerControls: React.FC<PlayerControlsProps> = ({
<Gauge className="w-5 h-5" />
</button>
<button
className={`text-kodo-content-dim hover:text-foreground transition-colors ${showVisualizer ? 'text-primary' : ''}`}
className={`text-muted-foreground hover:text-foreground transition-colors ${showVisualizer ? 'text-primary' : ''}`}
onClick={() => {
setShowVisualizer(!showVisualizer);
setShowSpeed(false);
@ -149,7 +149,7 @@ export const PlayerControls: React.FC<PlayerControlsProps> = ({
<div className="flex items-center gap-2 group w-24">
<button
onClick={toggleMute}
className="text-kodo-content-dim hover:text-foreground"
className="text-muted-foreground hover:text-foreground"
>
{isMuted || volume === 0 ? (
<VolumeX className="w-4 h-4" />

4
apps/web/src/components/player/VisualizerSettingsModal.tsx
View file

@ -39,7 +39,7 @@ export const VisualizerSettingsModal: React.FC<
<button
key={mode}
onClick={() => updateSetting('mode', mode)}
className={`px-2 py-1.5 rounded text-xs font-bold capitalize transition-all border ${visualizerSettings.mode === mode ? 'bg-kodo-cyan/10 border-kodo-cyan text-kodo-cyan' : 'bg-muted border-transparent text-muted-foreground hover:text-foreground'}`}
className={`px-2 py-1.5 rounded text-xs font-bold capitalize transition-all border ${visualizerSettings.mode === mode ? 'bg-primary/10 border-primary text-primary' : 'bg-muted border-transparent text-muted-foreground hover:text-foreground'}`}
>
{mode}
</button>
@ -61,7 +61,7 @@ export const VisualizerSettingsModal: React.FC<
onChange={(e) =>
updateSetting('sensitivity', Number(e.target.value))
}
className="w-full h-1 bg-muted rounded-lg appearance-none cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-3 [&::-webkit-slider-thumb]:bg-kodo-cyan [&::-webkit-slider-thumb]:rounded-full"
className="w-full h-1 bg-muted rounded-lg appearance-none cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-3 [&::-webkit-slider-thumb]:bg-primary [&::-webkit-slider-thumb]:rounded-full"
/>
</div>

2
apps/web/src/features/player/components/NextPreviousButtons.tsx
View file

@ -43,7 +43,7 @@ export function NextPreviousButtons({
default:
'bg-primary text-primary-foreground hover:bg-primary focus:ring-primary',
ghost:
'bg-transparent text-kodo-text-main hover:bg-kodo-void focus:ring-gray-500 dark:text-kodo-text-main dark:hover:bg-kodo-graphite',
'bg-transparent text-foreground hover:bg-muted focus:ring-primary',
outline:
'border border-border bg-card text-foreground hover:bg-muted focus:ring-muted',
};

2
apps/web/src/features/player/components/PlayPauseButton.tsx
View file

@ -41,7 +41,7 @@ export function PlayPauseButton({
default:
'bg-primary text-primary-foreground hover:bg-primary focus:ring-primary',
ghost:
'bg-transparent text-kodo-text-main hover:bg-kodo-void focus:ring-gray-500 dark:text-kodo-text-main dark:hover:bg-kodo-graphite',
'bg-transparent text-foreground hover:bg-muted focus:ring-primary',
outline:
'border border-border bg-card text-foreground hover:bg-muted focus:ring-muted',
};

2
apps/web/src/features/player/components/PlaybackSpeedControl.tsx
View file

@ -87,7 +87,7 @@ export function PlaybackSpeedControl({
disabled={disabled}
className={cn(
'flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg',
'bg-white dark:bg-kodo-graphite border border-kodo-steel dark:border-kodo-steel',
'bg-card border border-border',
'text-foreground',
'hover:bg-muted',
'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',

8
apps/web/src/features/player/components/ProgressBar.tsx
View file

@ -157,8 +157,8 @@ export function ProgressBar({
{/* Progress track */}
<div
className={cn(
'absolute left-0 top-0 h-full bg-kodo-cyan dark:bg-kodo-cyan rounded-full transition-all',
isDragging && 'bg-kodo-cyan dark:bg-kodo-cyan',
'absolute left-0 top-0 h-full bg-primary rounded-full transition-all',
isDragging && 'bg-primary',
)}
style={{ width: `${displayProgress}%` }}
/>
@ -166,7 +166,7 @@ export function ProgressBar({
{/* Hover indicator */}
{hoverTime !== null && !disabled && (
<div
className="absolute top-0 h-full w-0.5 bg-kodo-cyan dark:bg-kodo-cyan opacity-50"
className="absolute top-0 h-full w-0.5 bg-primary opacity-50"
style={{ left: `${displayProgress}%` }}
/>
)}
@ -174,7 +174,7 @@ export function ProgressBar({
{/* Thumb */}
<div
className={cn(
'absolute top-1/2 -translate-y-1/2 w-4 h-4 bg-kodo-cyan dark:bg-kodo-cyan rounded-full',
'absolute top-1/2 -translate-y-1/2 w-4 h-4 bg-primary rounded-full',
'opacity-0 group-hover:opacity-100 transition-opacity',
isDragging && 'opacity-100',
disabled && 'opacity-0',

6
apps/web/src/features/player/components/QualitySelector.tsx
View file

@ -84,7 +84,7 @@ export function QualitySelector({
className={cn(
'flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg',
'bg-card border border-border',
'text-kodo-text-main dark:text-kodo-text-main',
'text-foreground',
'hover:bg-muted',
'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
'disabled:opacity-50 disabled:cursor-not-allowed',
@ -122,7 +122,7 @@ export function QualitySelector({
'focus:outline-none focus:bg-muted',
'transition-colors',
currentQuality === quality.value &&
'bg-kodo-cyan/10 dark:bg-kodo-cyan/20',
'bg-primary/10',
)}
role="option"
aria-selected={currentQuality === quality.value}
@ -132,7 +132,7 @@ export function QualitySelector({
{quality.label}
</span>
{quality.description && (
<span className="text-xs text-kodo-content-dim dark:text-kodo-content-dim">
<span className="text-xs text-muted-foreground">
{quality.description}
</span>
)}

4
apps/web/src/features/player/components/TrackInfo.tsx
View file

@ -53,14 +53,14 @@ export function TrackInfo({
alt={`Cover de ${track.title}`}
className={cn(
coverSizes[coverSize],
'rounded-lg object-cover bg-kodo-slate dark:bg-kodo-steel',
'rounded-lg object-cover bg-muted',
)}
/>
) : (
<div
className={cn(
coverSizes[coverSize],
'rounded-lg bg-kodo-slate dark:bg-kodo-steel flex items-center justify-center',
'rounded-lg bg-muted flex items-center justify-center',
)}
>
<Music

6
apps/web/src/features/player/components/VolumeControl.tsx
View file

@ -142,8 +142,8 @@ export function VolumeControl({
{/* Volume track */}
<div
className={cn(
'absolute left-0 top-0 h-full bg-kodo-cyan dark:bg-kodo-cyan rounded-full transition-all',
isDragging && 'bg-kodo-cyan dark:bg-kodo-cyan',
'absolute left-0 top-0 h-full bg-primary rounded-full transition-all',
isDragging && 'bg-primary',
)}
style={{ width: `${displayVolume}%` }}
/>
@ -151,7 +151,7 @@ export function VolumeControl({
{/* Thumb */}
<div
className={cn(
'absolute top-1/2 -translate-y-1/2 w-4 h-4 bg-kodo-cyan dark:bg-kodo-cyan rounded-full',
'absolute top-1/2 -translate-y-1/2 w-4 h-4 bg-primary rounded-full',
'opacity-0 group-hover:opacity-100 transition-opacity',
isDragging && 'opacity-100',
disabled && 'opacity-0',