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>
|
<SidebarFooter>
|
||||||
{showCompactPlayer && (
|
{showCompactPlayer && (
|
||||||
<>
|
<>
|
||||||
|
<Separator className="mb-1 group-data-[collapsible=icon]:hidden" />
|
||||||
<div className="p-2">
|
<div className="p-2">
|
||||||
<CompactPlayer />
|
<CompactPlayer />
|
||||||
</div>
|
</div>
|
||||||
<Separator className="mb-2" />
|
<Separator className="mb-1 group-data-[collapsible=icon]:hidden" />
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
<UserNav user={user} logout={logout} />
|
<UserNav user={user} logout={logout} />
|
||||||
|
|||||||
@@ -30,6 +30,7 @@ export function CompactPlayer({ className }: CompactPlayerProps) {
|
|||||||
position: 0
|
position: 0
|
||||||
})
|
})
|
||||||
const [isLoading, setIsLoading] = useState(false)
|
const [isLoading, setIsLoading] = useState(false)
|
||||||
|
const [previousVolume, setPreviousVolume] = useState(50)
|
||||||
|
|
||||||
// Load initial state
|
// Load initial state
|
||||||
useEffect(() => {
|
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) => {
|
const executeAction = useCallback(async (action: () => Promise<void | MessageResponse>, actionName: string) => {
|
||||||
setIsLoading(true)
|
setIsLoading(true)
|
||||||
try {
|
try {
|
||||||
@@ -87,11 +95,14 @@ export function CompactPlayer({ className }: CompactPlayerProps) {
|
|||||||
|
|
||||||
const handleVolumeToggle = useCallback(() => {
|
const handleVolumeToggle = useCallback(() => {
|
||||||
if (state.volume === 0) {
|
if (state.volume === 0) {
|
||||||
executeAction(() => playerService.setVolume(50), 'unmute')
|
// Unmute
|
||||||
|
executeAction(() => playerService.setVolume(previousVolume), 'unmute')
|
||||||
} else {
|
} else {
|
||||||
|
// Mute
|
||||||
|
setPreviousVolume(state.volume)
|
||||||
executeAction(() => playerService.setVolume(0), 'mute')
|
executeAction(() => playerService.setVolume(0), 'mute')
|
||||||
}
|
}
|
||||||
}, [state.volume, executeAction])
|
}, [previousVolume, state.volume, executeAction])
|
||||||
|
|
||||||
// Don't show if no current sound
|
// Don't show if no current sound
|
||||||
if (!state.current_sound) {
|
if (!state.current_sound) {
|
||||||
|
|||||||
Reference in New Issue
Block a user