feat: enhance CompactPlayer with volume state management and mute/unmute functionality

This commit is contained in:
JSC
2025-08-10 14:57:13 +02:00
parent 3084efe139
commit f4e951db3c
2 changed files with 15 additions and 3 deletions

View File

@@ -57,10 +57,11 @@ export function AppSidebar({ showCompactPlayer = false }: AppSidebarProps) {
<SidebarFooter>
{showCompactPlayer && (
<>
<Separator className="mb-1 group-data-[collapsible=icon]:hidden" />
<div className="p-2">
<CompactPlayer />
</div>
<Separator className="mb-2" />
<Separator className="mb-1 group-data-[collapsible=icon]:hidden" />
</>
)}
<UserNav user={user} logout={logout} />

View File

@@ -30,6 +30,7 @@ export function CompactPlayer({ className }: CompactPlayerProps) {
position: 0
})
const [isLoading, setIsLoading] = useState(false)
const [previousVolume, setPreviousVolume] = useState(50)
// Load initial state
useEffect(() => {
@@ -57,6 +58,13 @@ export function CompactPlayer({ className }: CompactPlayerProps) {
}
}, [])
// Initialize previous volume when state loads
useEffect(() => {
if (state.volume > 0 && previousVolume <= 0) {
setPreviousVolume(state.volume)
}
}, [state.volume, previousVolume])
const executeAction = useCallback(async (action: () => Promise<void | MessageResponse>, actionName: string) => {
setIsLoading(true)
try {
@@ -87,11 +95,14 @@ export function CompactPlayer({ className }: CompactPlayerProps) {
const handleVolumeToggle = useCallback(() => {
if (state.volume === 0) {
executeAction(() => playerService.setVolume(50), 'unmute')
// Unmute
executeAction(() => playerService.setVolume(previousVolume), 'unmute')
} else {
// Mute
setPreviousVolume(state.volume)
executeAction(() => playerService.setVolume(0), 'mute')
}
}, [state.volume, executeAction])
}, [previousVolume, state.volume, executeAction])
// Don't show if no current sound
if (!state.current_sound) {