fix: update volume default value and improve Playlist component's maxHeight calculation

This commit is contained in:
JSC
2025-08-09 21:45:07 +02:00
parent cc6fe234f1
commit 94ec3bfcbb
2 changed files with 8 additions and 10 deletions

View File

@@ -44,7 +44,7 @@ export function Player({ className }: PlayerProps) {
const [state, setState] = useState<PlayerState>({ const [state, setState] = useState<PlayerState>({
status: 'stopped', status: 'stopped',
mode: 'continuous', mode: 'continuous',
volume: 50, volume: 80,
position: 0 position: 0
}) })
const [displayMode, setDisplayMode] = useState<PlayerDisplayMode>('normal') const [displayMode, setDisplayMode] = useState<PlayerDisplayMode>('normal')
@@ -293,6 +293,9 @@ export function Player({ className }: PlayerProps) {
{/* Track Info */} {/* Track Info */}
<div className="mb-4 text-center"> <div className="mb-4 text-center">
<div className="flex items-center justify-center gap-2"> <div className="flex items-center justify-center gap-2">
<h3 className="font-medium text-sm truncate">
{state.current_sound?.name || 'No track selected'}
</h3>
{state.current_sound && (state.current_sound.extract_url || state.current_sound.id) && ( {state.current_sound && (state.current_sound.extract_url || state.current_sound.id) && (
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
@@ -325,15 +328,12 @@ export function Player({ className }: PlayerProps) {
</DropdownMenuContent> </DropdownMenuContent>
</DropdownMenu> </DropdownMenu>
)} )}
<h3 className="font-medium text-sm truncate">
{state.current_sound?.name || 'No track selected'}
</h3>
</div> </div>
{state.playlist && ( {/* {state.playlist && (
<p className="text-xs text-muted-foreground truncate"> <p className="text-xs text-muted-foreground truncate">
{state.playlist.name} {state.playlist.name}
</p> </p>
)} )} */}
</div> </div>
{/* Progress Bar */} {/* Progress Bar */}

View File

@@ -19,8 +19,6 @@ export function Playlist({
onTrackSelect, onTrackSelect,
variant = 'normal' variant = 'normal'
}: PlaylistProps) { }: PlaylistProps) {
const maxHeight = variant === 'maximized' ? 'h-[calc(100vh-230px)]' : 'h-60'
return ( return (
<div className="w-full"> <div className="w-full">
{/* Header */} {/* Header */}
@@ -34,7 +32,7 @@ export function Playlist({
</div> </div>
{/* Track List */} {/* Track List */}
<ScrollArea className={maxHeight}> <ScrollArea className={variant === 'maximized' ? 'h-[calc(100vh-230px)]' : 'h-60'}>
<div className="w-full"> <div className="w-full">
{playlist.sounds.map((sound, index) => ( {playlist.sounds.map((sound, index) => (
<div <div
@@ -85,7 +83,7 @@ export function Playlist({
{/* Duration - 2 columns */} {/* Duration - 2 columns */}
<div className="col-span-2 text-right"> <div className="col-span-2 text-right">
<span className="text-muted-foreground text-[10px] whitespace-nowrap"> <span className="text-muted-foreground text-xs whitespace-nowrap">
{formatDuration(sound.duration)} {formatDuration(sound.duration)}
</span> </span>
</div> </div>