Browse Source

Add stop button to player controls (#225)

master
jeffvli 3 years ago
parent
commit
53cfdcb946
  1. 27
      src/components/player/PlayerBar.tsx
  2. 4
      src/components/player/styled.tsx
  3. 1
      src/hooks/usePlayerControls.ts

27
src/components/player/PlayerBar.tsx

@ -222,6 +222,7 @@ const PlayerBar = () => {
handleRepeat,
handleShuffle,
handleDisplayQueue,
handleStop,
} = usePlayerControls(
config,
player,
@ -463,6 +464,24 @@ const PlayerBar = () => {
</FlexboxGrid.Item>
<FlexboxGrid.Item colspan={12} style={{ textAlign: 'center', verticalAlign: 'middle' }}>
<PlayerColumn center height="45px">
{/* Stop Button */}
<CustomTooltip text={t('Stop')} delay={1000}>
<PlayerControlIcon
aria-label={t('Seek forward')}
role="button"
tabIndex={0}
icon="stop"
size="lg"
fixedWidth
disabled={playQueue.entry.length === 0 || player.status !== 'PLAYING'}
onClick={handleStop}
onKeyDown={(e: any) => {
if (e.key === ' ' || e.key === 'Enter') {
handleStop();
}
}}
/>
</CustomTooltip>
{/* Seek Backward Button */}
<CustomTooltip text={t('Seek backward')} delay={1000}>
<PlayerControlIcon
@ -472,6 +491,7 @@ const PlayerBar = () => {
icon="backward"
size="lg"
fixedWidth
disabled={playQueue.entry.length === 0}
onClick={handleSeekBackward}
onKeyDown={(e: any) => {
if (e.key === ' ' || e.key === 'Enter') {
@ -489,6 +509,7 @@ const PlayerBar = () => {
icon="step-backward"
size="lg"
fixedWidth
disabled={playQueue.entry.length === 0}
onClick={handlePrevTrack}
onKeyDown={(e: any) => {
if (e.key === ' ' || e.key === 'Enter') {
@ -506,6 +527,7 @@ const PlayerBar = () => {
tabIndex={0}
icon={player.status === 'PLAYING' ? 'pause-circle' : 'play-circle'}
size="3x"
disabled={playQueue.entry.length === 0}
onClick={handlePlayPause}
onKeyDown={(e: any) => {
if (e.key === ' ' || e.key === 'Enter') {
@ -523,6 +545,7 @@ const PlayerBar = () => {
icon="step-forward"
size="lg"
fixedWidth
disabled={playQueue.entry.length === 0}
onClick={handleNextTrack}
onKeyDown={(e: any) => {
if (e.key === ' ' || e.key === 'Enter') {
@ -540,6 +563,7 @@ const PlayerBar = () => {
icon="forward"
size="lg"
fixedWidth
disabled={playQueue.entry.length === 0}
onClick={handleSeekForward}
onKeyDown={(e: any) => {
if (e.key === ' ' || e.key === 'Enter') {
@ -548,6 +572,9 @@ const PlayerBar = () => {
}}
/>
</CustomTooltip>
<PlayerControlIcon size="lg" fixedWidth>
{' '}
</PlayerControlIcon>
</PlayerColumn>
<PlayerColumn center height="35px">
<FlexboxGrid

4
src/components/player/styled.tsx

@ -45,6 +45,10 @@ export const PlayerControlIcon = styled(Icon)`
outline: none;
filter: brightness(0.7);
}
opacity: ${(props) => props.disabled && '0.5'};
cursor: ${(props) => props.disabled && 'default'};
pointer-events: ${(props) => props.disabled && 'none'};
`;
export const CoverArtContainer = styled.div<{ expand: boolean }>`

1
src/hooks/usePlayerControls.ts

@ -430,6 +430,7 @@ const usePlayerControls = (
handleRepeat,
handleShuffle,
handleDisplayQueue,
handleStop,
};
};

Loading…
Cancel
Save