feat: enhance CompactPlayer with volume state management and mute/unmute functionality
This commit is contained in:
@@ -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} />
|
||||
|
||||
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user