fix: update volume default value and improve Playlist component's maxHeight calculation
This commit is contained in:
@@ -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 */}
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user