Browse Source

Add click to mute/unmute volume button

master
jeffvli 3 years ago
committed by Jeff
parent
commit
4db986fdb7
  1. 4
      src/components/player/Player.tsx
  2. 12
      src/components/player/PlayerBar.tsx

4
src/components/player/Player.tsx

@ -238,7 +238,7 @@ const listenHandler = (
} }
}; };
const Player = ({ currentEntryList, children }: any, ref: any) => { const Player = ({ currentEntryList, muted, children }: any, ref: any) => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const player1Ref = useRef<any>(); const player1Ref = useRef<any>();
const player2Ref = useRef<any>(); const player2Ref = useRef<any>();
@ -634,6 +634,7 @@ const Player = ({ currentEntryList, children }: any, ref: any) => {
player1Ref.current.audioEl.current.src = getSrc1(); player1Ref.current.audioEl.current.src = getSrc1();
} }
}} }}
muted={muted}
crossOrigin="anonymous" crossOrigin="anonymous"
/> />
<ReactAudioPlayer <ReactAudioPlayer
@ -657,6 +658,7 @@ const Player = ({ currentEntryList, children }: any, ref: any) => {
player2Ref.current.audioEl.current.src = getSrc2(); player2Ref.current.audioEl.current.src = getSrc2();
} }
}} }}
muted={muted}
crossOrigin="anonymous" crossOrigin="anonymous"
/> />
{children} {children}

12
src/components/player/PlayerBar.tsx

@ -48,6 +48,7 @@ const PlayerBar = () => {
const [manualSeek, setManualSeek] = useState(0); const [manualSeek, setManualSeek] = useState(0);
const [currentEntryList, setCurrentEntryList] = useState('entry'); const [currentEntryList, setCurrentEntryList] = useState('entry');
const [localVolume, setLocalVolume] = useState(Number(settings.getSync('volume'))); const [localVolume, setLocalVolume] = useState(Number(settings.getSync('volume')));
const [muted, setMuted] = useState(false);
const playersRef = useRef<any>(); const playersRef = useRef<any>();
const history = useHistory(); const history = useHistory();
@ -278,7 +279,7 @@ const PlayerBar = () => {
}; };
return ( return (
<Player ref={playersRef} currentEntryList={currentEntryList}> <Player ref={playersRef} currentEntryList={currentEntryList} muted={muted}>
{playQueue.showDebugWindow && <DebugWindow currentEntryList={currentEntryList} />} {playQueue.showDebugWindow && <DebugWindow currentEntryList={currentEntryList} />}
<PlayerContainer> <PlayerContainer>
<FlexboxGrid align="middle" style={{ height: '100%' }}> <FlexboxGrid align="middle" style={{ height: '100%' }}>
@ -686,14 +687,11 @@ const PlayerBar = () => {
{/* Volume Slider */} {/* Volume Slider */}
<VolumeIcon <VolumeIcon
icon={ icon={
playQueue.volume > 0.7 muted ? 'volume-off' : playQueue.volume > 0.7 ? 'volume-up' : 'volume-down'
? 'volume-up'
: playQueue.volume === 0
? 'volume-off'
: 'volume-down'
} }
onClick={() => setMuted(!muted)}
size="lg" size="lg"
style={{ marginRight: '15px', padding: '0' }} style={{ cursor: 'pointer', marginRight: '15px', padding: '0' }}
/> />
<CustomSlider <CustomSlider
tabIndex={0} tabIndex={0}

Loading…
Cancel
Save