quaik8/sbd2-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add mute and unmute functionality to player service; update CompactPlayer and Player components to utilize new methods

Browse Source
This commit is contained in:
JSC
2025-08-10 15:11:34 +02:00
parent f4e951db3c
commit b47486aaf9
3 changed files with 30 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/player/Player.tsx
View File

@@ -46,6 +46,7 @@ export function Player({ className, onPlayerModeChange }: PlayerProps) {
status: 'stopped',
mode: 'continuous',
volume: 80,
previous_volume: 50,
position: 0
})
const [displayMode, setDisplayMode] = useState<PlayerDisplayMode>(() => {
@@ -67,8 +68,6 @@ export function Player({ className, onPlayerModeChange }: PlayerProps) {
}, [displayMode, onPlayerModeChange])
const [showPlaylist, setShowPlaylist] = useState(false)
const [isLoading, setIsLoading] = useState(false)
const [isMuted, setIsMuted] = useState(false)
const [previousVolume, setPreviousVolume] = useState(50)
// Load initial state
useEffect(() => {
@@ -152,23 +151,17 @@ export function Player({ className, onPlayerModeChange }: PlayerProps) {
const handleVolumeChange = useCallback((volume: number[]) => {
const newVolume = volume[0]
executeAction(() => playerService.setVolume(newVolume), 'change volume')
if (newVolume > 0 && isMuted) {
setIsMuted(false)
}
}, [executeAction, isMuted])
}, [executeAction])
const handleMute = useCallback(() => {
if (isMuted) {
if (state.volume === 0) {
// Unmute
executeAction(() => playerService.setVolume(previousVolume), 'unmute')
setIsMuted(false)
executeAction(playerService.unmute, 'unmute')
} else {
// Mute
setPreviousVolume(state.volume)
executeAction(() => playerService.setVolume(0), 'mute')
setIsMuted(true)
executeAction(playerService.mute, 'mute')
}
}, [isMuted, previousVolume, state.volume, executeAction])
}, [state.volume, executeAction])
const handleModeChange = useCallback(() => {
const modes: PlayerMode[] = ['continuous', 'loop', 'loop_one', 'random', 'single']
@@ -460,7 +453,7 @@ export function Player({ className, onPlayerModeChange }: PlayerProps) {
onClick={handleMute}
className="h-8 w-8 p-0"
>
{isMuted || state.volume === 0 ? (
{state.volume === 0 ? (
<VolumeX className="h-4 w-4" />
) : (
<Volume2 className="h-4 w-4" />
@@ -468,7 +461,7 @@ export function Player({ className, onPlayerModeChange }: PlayerProps) {
</Button>
<div className="w-16">
<Slider
value={[isMuted ? 0 : state.volume]}
value={[state.volume]}
max={100}
step={1}
onValueChange={handleVolumeChange}
@@ -660,7 +653,7 @@ export function Player({ className, onPlayerModeChange }: PlayerProps) {
variant="ghost"
onClick={handleMute}
>
{isMuted || state.volume === 0 ? (
{state.volume === 0 ? (
<VolumeX className="h-4 w-4" />
) : (
<Volume2 className="h-4 w-4" />
@@ -668,7 +661,7 @@ export function Player({ className, onPlayerModeChange }: PlayerProps) {
</Button>
<div className="w-24">
<Slider
value={[isMuted ? 0 : state.volume]}
value={[state.volume]}
max={100}
step={1}
onValueChange={handleVolumeChange}
@@ -676,7 +669,7 @@ export function Player({ className, onPlayerModeChange }: PlayerProps) {
/>
</div>
<span className="text-sm text-muted-foreground w-8">
{Math.round(isMuted ? 0 : state.volume)}%
{Math.round(state.volume)}%
</span>
</div>
</div>