From 53cfdcb946c8272fda53dd10cba4d9c55a89bdf6 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Thu, 10 Mar 2022 15:09:47 -0800
Subject: [PATCH] Add stop button to player controls (#225)

---
 src/components/player/PlayerBar.tsx | 27 +++++++++++++++++++++++++++
 src/components/player/styled.tsx    |  4 ++++
 src/hooks/usePlayerControls.ts      |  1 +
 3 files changed, 32 insertions(+)

diff --git a/src/components/player/PlayerBar.tsx b/src/components/player/PlayerBar.tsx
index fe3d60e..337b964 100644
--- a/src/components/player/PlayerBar.tsx
+++ b/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
diff --git a/src/components/player/styled.tsx b/src/components/player/styled.tsx
index 27077d4..fc664da 100644
--- a/src/components/player/styled.tsx
+++ b/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 }>`
diff --git a/src/hooks/usePlayerControls.ts b/src/hooks/usePlayerControls.ts
index c8b3f3f..a67a17d 100644
--- a/src/hooks/usePlayerControls.ts
+++ b/src/hooks/usePlayerControls.ts
@@ -430,6 +430,7 @@ const usePlayerControls = (
     handleRepeat,
     handleShuffle,
     handleDisplayQueue,
+    handleStop,
   };
 };