Browse Source

add tabindex and keydown

master
jeffvli 3 years ago
parent
commit
c27878297d
  1. 188
      src/components/player/PlayerBar.tsx

188
src/components/player/PlayerBar.tsx

@ -1,4 +1,5 @@
import React, { useEffect, useState, useRef } from 'react';
import settings from 'electron-settings';
import { FlexboxGrid, Icon, Grid, Row, Col } from 'rsuite';
import { useHistory } from 'react-router-dom';
import { LazyLoadImage } from 'react-lazy-load-image-component';
@ -30,6 +31,12 @@ const PlayerBar = () => {
const [seek, setSeek] = useState(0);
const [isDragging, setIsDragging] = useState(false);
const [manualSeek, setManualSeek] = useState(0);
const [seekForwardInterval] = useState<number>(
Number(settings.getSync('seekForwardInterval')) || 5
);
const [seekBackwardInterval] = useState<number>(
Number(settings.getSync('seekBackwardInterval')) || 5
);
const playersRef = useRef<any>();
const history = useHistory();
@ -71,6 +78,98 @@ const PlayerBar = () => {
dispatch(setPlayerVolume({ player: playQueue.currentPlayer, volume: vol }));
};
const handleVolumeKey = (e: any) => {
if (e.keyCode === 38) {
const vol = Number(
(playQueue.volume + 0.05 > 1 ? 1 : playQueue.volume + 0.05).toFixed(2)
);
dispatch(setVolume(vol));
dispatch(
setPlayerVolume({
player: playQueue.currentPlayer,
volume: vol,
})
);
} else if (e.keyCode === 40) {
const vol = Number(
(playQueue.volume - 0.05 < 0 ? 0 : playQueue.volume - 0.05).toFixed(2)
);
dispatch(setVolume(vol));
dispatch(
setPlayerVolume({
player: playQueue.currentPlayer,
volume: vol,
})
);
}
};
const handleClickForward = () => {
setIsDragging(true);
if (playQueue.isFading) {
if (playQueue.currentPlayer === 1) {
playersRef.current.player2.audioEl.current.pause();
playersRef.current.player2.audioEl.current.currentTime = 0;
dispatch(setPlayerVolume({ player: 1, volume: playQueue.volume }));
dispatch(setPlayerVolume({ player: 2, volume: 0 }));
} else {
playersRef.current.player1.audioEl.current.pause();
playersRef.current.player1.audioEl.current.currentTime = 0;
dispatch(setPlayerVolume({ player: 1, volume: 0 }));
dispatch(setPlayerVolume({ player: 2, volume: playQueue.volume }));
}
}
if (playQueue.currentPlayer === 1) {
const calculatedTime =
playersRef.current.player1.audioEl.current.currentTime +
seekForwardInterval;
const songDuration = playersRef.current.player1.audioEl.current.duration;
setManualSeek(
calculatedTime > songDuration ? songDuration - 1 : calculatedTime
);
} else {
const calculatedTime =
playersRef.current.player2.audioEl.current.currentTime +
seekForwardInterval;
const songDuration = playersRef.current.player2.audioEl.current.duration;
setManualSeek(
calculatedTime > songDuration ? songDuration - 1 : calculatedTime
);
}
};
const handleClickBackward = () => {
setIsDragging(true);
if (playQueue.isFading) {
if (playQueue.currentPlayer === 1) {
playersRef.current.player2.audioEl.current.pause();
playersRef.current.player2.audioEl.current.currentTime = 0;
dispatch(setPlayerVolume({ player: 1, volume: playQueue.volume }));
dispatch(setPlayerVolume({ player: 2, volume: 0 }));
} else {
playersRef.current.player1.audioEl.current.pause();
playersRef.current.player1.audioEl.current.currentTime = 0;
dispatch(setPlayerVolume({ player: 1, volume: 0 }));
dispatch(setPlayerVolume({ player: 2, volume: playQueue.volume }));
}
}
if (playQueue.currentPlayer === 1) {
const calculatedTime =
playersRef.current.player1.audioEl.current.currentTime -
seekBackwardInterval;
setManualSeek(calculatedTime < 0 ? 0 : calculatedTime);
} else {
const calculatedTime =
playersRef.current.player2.audioEl.current.currentTime -
seekBackwardInterval;
setManualSeek(calculatedTime < 0 ? 0 : calculatedTime);
}
};
const handleSeekSlider = (e: number) => {
setIsDragging(true);
@ -118,19 +217,22 @@ const PlayerBar = () => {
alignItems: 'center',
}}
>
<Col
xs={2}
onClick={() => history.push(`/nowplaying`)}
style={{ height: '100%', width: '80px' }}
>
<Col xs={2} style={{ height: '100%', width: '80px' }}>
{playQueue.entry.length >= 1 && (
<LazyLoadImage
tabIndex={0}
src={playQueue.entry[playQueue.currentIndex].image}
alt="trackImg"
effect="opacity"
width="65"
height="65"
style={{ borderRadius: '10px', cursor: 'pointer' }}
onClick={() => history.push(`/nowplaying`)}
onKeyDown={(e: any) => {
if (e.keyCode === 32) {
history.push(`/nowplaying`);
}
}}
/>
)}
</Col>
@ -144,7 +246,7 @@ const PlayerBar = () => {
}}
>
{playQueue.entry.length >= 1 && (
<LinkButton>
<LinkButton tabIndex={0}>
{playQueue.entry[playQueue.currentIndex]?.title ||
'Unknown title'}
</LinkButton>
@ -153,7 +255,7 @@ const PlayerBar = () => {
<Row style={{ height: '35px', width: '100%' }}>
{playQueue.entry.length >= 1 && (
<LinkButton subtitle="true">
<LinkButton tabIndex={0} subtitle="true">
{playQueue.entry[playQueue.currentIndex]?.artist ||
'Unknown artist'}
</LinkButton>
@ -169,14 +271,35 @@ const PlayerBar = () => {
style={{ textAlign: 'center', verticalAlign: 'middle' }}
>
<PlayerColumn center height="45px">
<PlayerControlIcon icon="backward" size="lg" fixedWidth />
{/* Seek Backward Button */}
<PlayerControlIcon
tabIndex={0}
icon="backward"
size="lg"
fixedWidth
onClick={handleClickBackward}
onKeyDown={(e: any) => {
if (e.keyCode === 32) {
handleClickBackward();
}
}}
/>
{/* Previous Song Button */}
<PlayerControlIcon
tabIndex={0}
icon="step-backward"
size="lg"
fixedWidth
onClick={handleClickPrevious}
onKeyDown={(e: any) => {
if (e.keyCode === 32) {
handleClickPrevious();
}
}}
/>
{/* Play/Pause Button */}
<PlayerControlIcon
tabIndex={0}
icon={
playQueue.status === 'PLAYING'
? 'pause-circle'
@ -188,14 +311,38 @@ const PlayerBar = () => {
}
size="3x"
onClick={handleClickPlayPause}
onKeyDown={(e: any) => {
if (e.keyCode === 32) {
handleClickPlayPause();
}
}}
/>
{/* Next Song Button */}
<PlayerControlIcon
tabIndex={0}
icon="step-forward"
size="lg"
fixedWidth
onClick={handleClickNext}
onKeyDown={(e: any) => {
if (e.keyCode === 32) {
handleClickNext();
}
}}
/>
{/* Seek Forward Button */}
<PlayerControlIcon
tabIndex={0}
icon="forward"
size="lg"
fixedWidth
onClick={handleClickForward}
onKeyDown={(e: any) => {
if (e.keyCode === 32) {
handleClickForward();
}
}}
/>
<PlayerControlIcon icon="forward" size="lg" fixedWidth />
</PlayerColumn>
<PlayerColumn center height="35px">
<FlexboxGrid
@ -214,6 +361,7 @@ const PlayerBar = () => {
{format((isDragging ? manualSeek : seek) * 1000)}
</FlexboxGrid.Item>
<FlexboxGrid.Item colspan={16}>
{/* Seek Slider */}
<CustomSlider
progress
defaultValue={0}
@ -252,8 +400,10 @@ const PlayerBar = () => {
>
{playQueue.entry.length >= 1 && (
<>
{/* Star Button */}
<CustomTooltip text="Star" delay={1000}>
<PlayerControlIcon
tabIndex={0}
icon={
playQueue.entry[playQueue.currentIndex].starred
? 'star'
@ -268,22 +418,37 @@ const PlayerBar = () => {
}}
/>
</CustomTooltip>
{/* Shuffle Button */}
<CustomTooltip text="Shuffle" delay={1000}>
<PlayerControlIcon
tabIndex={0}
icon="random"
size="lg"
onClick={handleShuffle}
onKeyDown={(e: any) => {
if (e.keyCode === 32) {
handleShuffle();
}
}}
style={{
color: playQueue.shuffle ? '#1179ac' : undefined,
}}
/>
</CustomTooltip>
{/* Repeat Button */}
<CustomTooltip text="Repeat" delay={1000}>
<PlayerControlIcon
tabIndex={0}
icon="repeat"
size="lg"
onClick={handleRepeat}
inverse={playQueue.repeat === 'all'}
onKeyDown={(e: any) => {
if (e.keyCode === 32) {
handleRepeat();
}
}}
style={{
color:
playQueue.repeat === 'all'
@ -303,6 +468,7 @@ const PlayerBar = () => {
justifyContent: 'flex-end',
}}
>
{/* Volume Slider */}
<Icon
icon={
playQueue.volume > 0.7
@ -315,11 +481,13 @@ const PlayerBar = () => {
style={{ marginRight: '15px', padding: '0' }}
/>
<CustomSlider
tabIndex={0}
progress
value={Math.floor(playQueue.volume * 100)}
tooltip={false}
style={{ width: '100px', marginRight: '10px' }}
onChange={handleVolumeSlider}
onKeyDown={handleVolumeKey}
/>
</Row>
</Grid>

Loading…
Cancel
Save