refactor: simplify show play/pause button logic

lijinke666 · Jan 13, 2021 · 72606c6 · 72606c6
1 parent 63c6b6f
commit 72606c6
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 21 deletions.
diff --git a/src/components/PlayerMobile.js b/src/components/PlayerMobile.js
@@ -30,7 +30,7 @@ const PlayerMobile = ({
   locale,
   toggleMode,
   renderAudioTitle,
-  actionButtonIcon,
+  shouldShowPlayIcon,
 }) => (
   <div className={cls(prefix, { 'default-bg': !glassBg, 'glass-bg': glassBg })}>
     <PlayModeTip
@@ -88,10 +88,14 @@ const PlayerMobile = ({
       ) : (
         <span
           className="group play-btn"
-          title={playing ? locale.clickToPauseText : locale.clickToPlayText}
+          title={
+            shouldShowPlayIcon
+              ? locale.clickToPlayText
+              : locale.clickToPauseText
+          }
           onClick={onPlay}
         >
-          {actionButtonIcon}
+          {shouldShowPlayIcon ? icon.play : icon.pause}
         </span>
       )}
       <span

diff --git a/src/index.js b/src/index.js
@@ -452,19 +452,8 @@ export default class ReactJkMusicPlayer extends PureComponent {
       return null
     }
 
-    let actionButtonIcon
-
-    if (playing) {
-      if (this.state.currentVolumeFade === VOLUME_FADE.OUT) {
-        actionButtonIcon = this.iconMap.play
-      } else {
-        actionButtonIcon = this.iconMap.pause
-      }
-    } else if (this.state.currentVolumeFade === VOLUME_FADE.IN) {
-      actionButtonIcon = this.iconMap.pause
-    } else {
-      actionButtonIcon = this.iconMap.play
-    }
+    const shouldShowPlayIcon =
+      !playing || this.state.currentVolumeFade === VOLUME_FADE.OUT
 
     return createPortal(
       <div
@@ -512,7 +501,7 @@ export default class ReactJkMusicPlayer extends PureComponent {
             locale={locale}
             toggleMode={toggleMode}
             renderAudioTitle={this.renderAudioTitle}
-            actionButtonIcon={actionButtonIcon}
+            shouldShowPlayIcon={shouldShowPlayIcon}
           />
         )}
 
@@ -584,12 +573,14 @@ export default class ReactJkMusicPlayer extends PureComponent {
                         className="group play-btn"
                         onClick={this.onTogglePlay}
                         title={
-                          playing
-                            ? locale.clickToPauseText
-                            : locale.clickToPlayText
+                          shouldShowPlayIcon
+                            ? locale.clickToPlayText
+                            : locale.clickToPauseText
                         }
                       >
-                        {actionButtonIcon}
+                        {shouldShowPlayIcon
+                          ? this.iconMap.play
+                          : this.iconMap.pause}
                       </span>
                     )}
                     <span