fix: cannot trigger touch action in Firefox and Safari in mobile mode #…

…145
lijinke666 · Aug 26, 2020 · d9aac9e · d9aac9e
1 parent 950fb41
commit d9aac9e
Show file tree

Hide file tree

Showing 12 changed files with 54 additions and 73 deletions.
diff --git a/__tests__/tests/__snapshots__/icon.test.js.snap b/__tests__/tests/__snapshots__/icon.test.js.snap
@@ -378,6 +378,7 @@ exports[`Player custom icon test should render custom icon in mobile mode 1`] =
       />
       <div
         class="react-jinke-music-player-mobile-header-title"
+        title="audioName"
       >
         audioName
       </div>
@@ -394,6 +395,7 @@ exports[`Player custom icon test should render custom icon in mobile mode 1`] =
     >
       <span
         class="react-jinke-music-player-mobile-singer-name"
+        title=""
       />
     </div>
     <div

diff --git a/__tests__/tests/__snapshots__/locale.test.js.snap b/__tests__/tests/__snapshots__/locale.test.js.snap
@@ -382,7 +382,7 @@ exports[`Locale test should render default locale with en_US 1`] = `
           </div>
         </DraggableCore>
       </Draggable>
-      <AudioListsPanel
+      <Memo(AudioListsPanel)
         audioLists={Array []}
         audioListsDragEnd={[Function]}
         cover=""
@@ -579,8 +579,8 @@ exports[`Locale test should render default locale with en_US 1`] = `
             </span>
           </div>
         </div>
-      </AudioListsPanel>
-      <PlayModel
+      </Memo(AudioListsPanel)>
+      <Memo(PlayModel)
         value="Play in order"
         visible={false}
       >
@@ -589,7 +589,7 @@ exports[`Locale test should render default locale with en_US 1`] = `
         >
           Play in order
         </div>
-      </PlayModel>
+      </Memo(PlayModel)>
       <audio
         className="music-player-audio"
         src=""
@@ -1142,7 +1142,7 @@ exports[`Locale test should render locale with zh_CN 1`] = `
           </div>
         </DraggableCore>
       </Draggable>
-      <AudioListsPanel
+      <Memo(AudioListsPanel)
         audioLists={Array []}
         audioListsDragEnd={[Function]}
         cover=""
@@ -1339,8 +1339,8 @@ exports[`Locale test should render locale with zh_CN 1`] = `
             </span>
           </div>
         </div>
-      </AudioListsPanel>
-      <PlayModel
+      </Memo(AudioListsPanel)>
+      <Memo(PlayModel)
         value="顺序播放"
         visible={false}
       >
@@ -1349,7 +1349,7 @@ exports[`Locale test should render locale with zh_CN 1`] = `
         >
           顺序播放
         </div>
-      </PlayModel>
+      </Memo(PlayModel)>
       <audio
         className="music-player-audio"
         src=""

diff --git a/__tests__/tests/player.test.js b/__tests__/tests/player.test.js
@@ -58,7 +58,7 @@ describe('<ReactJkMusicPlayer/>', () => {
     assert(wrapper.find('.audio-lists-panel').length === 1)
   })
   it('should find a <PlayerMobile/> components', () => {
-    const wrapper = shallow(<PlayerMobile />)
+    const wrapper = shallow(<PlayerMobile locale={{}} />)
     assert(wrapper.find('.react-jinke-music-player-mobile').length === 1)
     assert(wrapper.find(PlayModeTip).length === 1)
   })

diff --git a/example/example.js b/example/example.js
@@ -7,8 +7,8 @@ import { name, repository, version } from '../package.json'
 import ReactJkMusicPlayer from '../src'
 import Locale from '../src/config/locale'
 import PLAY_MODE from '../src/config/playMode'
-import '../src/styles/index.less'
 import { createRandomNum } from '../src/utils'
+import '../src/styles/index.less'
 import './example.less'
 
 const audioList1 = [

diff --git a/example/example.less b/example/example.less
@@ -47,6 +47,12 @@ select {
   }
 }
 
+.react-jinke-music-player-mobile {
+  button {
+    margin: 0;
+  }
+}
+
 label {
   cursor: pointer;
   font-size: 16px;

diff --git a/src/components/AudioListsPanel.js b/src/components/AudioListsPanel.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { memo } from 'react'
 import cls from 'classnames'
 import ReactDragListView from 'react-drag-listview/lib/ReactDragListView'
 import { NotContentIcon, ArrowDownIcon } from './Icon'
@@ -129,4 +129,4 @@ const AudioListsPanel = ({
   </div>
 )
 
-export default AudioListsPanel
+export default memo(AudioListsPanel)
diff --git a/src/components/CircleProcessBar.js b/src/components/CircleProcessBar.js
@@ -1,5 +1,5 @@
 // 迷你模式进度条
-import React from 'react'
+import React, { memo } from 'react'
 
 const CircleProcessBar = ({ progress = 0, r = 40 } = {}) => {
   const currentProgress = progress.toFixed(2)
@@ -29,4 +29,4 @@ const CircleProcessBar = ({ progress = 0, r = 40 } = {}) => {
   )
 }
 
-export default CircleProcessBar
+export default memo(CircleProcessBar)
diff --git a/src/components/PlayModeTip.js b/src/components/PlayModeTip.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { memo } from 'react'
 import cls from 'classnames'
 
 const PlayModeTip = ({ prefix, visible, title, text }) => (
@@ -8,4 +8,4 @@ const PlayModeTip = ({ prefix, visible, title, text }) => (
   </div>
 )
 
-export default PlayModeTip
+export default memo(PlayModeTip)
diff --git a/src/components/PlayModel.js b/src/components/PlayModel.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { memo } from 'react'
 import cls from 'classnames'
 
 const PlayModel = ({ visible, value }) => (
@@ -11,4 +11,4 @@ const PlayModel = ({ visible, value }) => (
   </div>
 )
 
-export default PlayModel
+export default memo(PlayModel)
diff --git a/src/components/PlayerMobile.js b/src/components/PlayerMobile.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { isValidElement, memo } from 'react'
 import cls from 'classnames'
 import PlayModeTip from './PlayModeTip'
 
@@ -25,10 +25,10 @@ const PlayerMobile = ({
   extendsContent,
   onPlay,
   glassBg,
-  LyricIcon,
   onCoverClick,
   autoHiddenCover,
   icon,
+  locale,
 }) => (
   <div className={cls(prefix, { 'default-bg': !glassBg, 'glass-bg': glassBg })}>
     <PlayModeTip
@@ -39,13 +39,17 @@ const PlayerMobile = ({
     />
     <div className={`${prefix}-header group`}>
       <div className={`${prefix}-header-left`} />
-      <div className={`${prefix}-header-title`}>{name}</div>
+      <div className={`${prefix}-header-title`} title={name}>
+        {name}
+      </div>
       <div className={`${prefix}-header-right`} onClick={onClose}>
         {icon.close}
       </div>
     </div>
     <div className={`${prefix}-singer text-center group`}>
-      <span className={`${prefix}-singer-name`}>{singer}</span>
+      <span className={`${prefix}-singer-name`} title={singer}>
+        {singer}
+      </span>
     </div>
     <div className={`${prefix}-switch text-center group`}>{themeSwitch}</div>
     {/* lgtm [js/trivial-conditional] */}
@@ -75,21 +79,21 @@ const PlayerMobile = ({
         <>
           <span
             className="group prev-audio"
-            title="Previous track"
+            title={locale.previousTrackText}
             onClick={audioPrevPlay}
           >
             {icon.prev}
           </span>
           <span
             className="group play-btn"
-            title={playing ? 'Click to pause' : 'Click to play'}
+            title={playing ? locale.clickToPauseText : locale.clickToPlayText}
             onClick={onPlay}
           >
             {playing ? icon.pause : icon.play}
           </span>
           <span
             className="group next-audio"
-            title="Next track"
+            title={locale.nextTrackText}
             onClick={audioNextPlay}
           >
             {icon.next}
@@ -99,8 +103,8 @@ const PlayerMobile = ({
     </div>
     <div className={`${prefix}-operation group`}>
       <ul className="items">
-        {[playMode, icon.download, icon.reload, LyricIcon]
-          .filter(Boolean)
+        {[playMode, icon.download, icon.reload, icon.lyric]
+          .filter(isValidElement)
           .map((item) => (
             <li className="item" key={item.props.className}>
               {item}
@@ -119,4 +123,4 @@ PlayerMobile.defaultProps = {
   icon: {},
 }
 
-export default PlayerMobile
+export default memo(PlayerMobile)
diff --git a/src/index.js b/src/index.js
@@ -324,7 +324,7 @@ export default class ReactJkMusicPlayer extends PureComponent {
     const DownloadComponent = showDownload && (
       <span
         className="group audio-download"
-        {...{ [isMobile ? 'onTouchStart' : 'onClick']: this.onAudioDownload }}
+        onClick={this.onAudioDownload}
         title={locale.downloadText}
       >
         {this.iconMap.download}
@@ -349,9 +349,7 @@ export default class ReactJkMusicPlayer extends PureComponent {
     const ReloadComponent = showReload && (
       <span
         className="group reload-btn"
-        {...(isMobile
-          ? { onTouchStart: this.onAudioReload }
-          : { onClick: this.onAudioReload })}
+        onClick={this.onAudioReload}
         title={locale.reloadText}
       >
         {this.iconMap.reload}
@@ -364,9 +362,7 @@ export default class ReactJkMusicPlayer extends PureComponent {
         className={cls('group lyric-btn', {
           'lyric-btn-active': audioLyricVisible,
         })}
-        {...(isMobile
-          ? { onTouchStart: this.toggleAudioLyric }
-          : { onClick: this.toggleAudioLyric })}
+        onClick={this.toggleAudioLyric}
         title={locale.toggleLyricText}
       >
         {this.iconMap.lyric}
@@ -377,9 +373,7 @@ export default class ReactJkMusicPlayer extends PureComponent {
     const PlayModeComponent = showPlayMode && (
       <span
         className={cls('group loop-btn')}
-        {...(isMobile
-          ? { onTouchStart: this.togglePlayMode }
-          : { onClick: this.togglePlayMode })}
+        onClick={this.togglePlayMode}
         title={locale.playModeText[currentPlayMode]}
       >
         {this.renderPlayModeIcon(currentPlayMode)}
@@ -393,9 +387,7 @@ export default class ReactJkMusicPlayer extends PureComponent {
         title={locale.destroyText}
         className="group destroy-btn"
         ref={this.destroyBtn}
-        {...(!drag || toggle
-          ? { [isMobile ? 'onTouchStart' : 'onClick']: this.onDestroyPlayer }
-          : null)}
+        onClick={!drag || toggle ? this.onDestroyPlayer : undefined}
       >
         {this.iconMap.destroy}
       </span>
@@ -481,15 +473,16 @@ export default class ReactJkMusicPlayer extends PureComponent {
               ...this.iconMap,
               reload: ReloadComponent,
               download: DownloadComponent,
+              lyric: LyricComponent,
             }}
             playModeTipVisible={playModeTipVisible}
             openAudioListsPanel={this.openAudioListsPanel}
             onClose={this.onHidePanel}
             extendsContent={extendsContent}
             glassBg={glassBg}
-            LyricIcon={LyricComponent}
             autoHiddenCover={autoHiddenCover}
             onCoverClick={this.onCoverClick}
+            locale={locale}
           />
         )}
 
@@ -554,17 +547,13 @@ export default class ReactJkMusicPlayer extends PureComponent {
                     <span
                       className="group prev-audio"
                       title={locale.previousTrackText}
-                      {...(isMobile
-                        ? { onTouchStart: this.audioPrevPlay }
-                        : { onClick: this.audioPrevPlay })}
+                      onClick={this.audioPrevPlay}
                     >
                       {this.iconMap.prev}
                     </span>
                     <span
                       className="group play-btn"
-                      {...(isMobile
-                        ? { onTouchStart: this.onTogglePlay }
-                        : { onClick: this.onTogglePlay })}
+                      onClick={this.onTogglePlay}
                       title={
                         playing
                           ? locale.clickToPauseText
@@ -580,9 +569,7 @@ export default class ReactJkMusicPlayer extends PureComponent {
                     <span
                       className="group next-audio"
                       title={locale.nextTrackText}
-                      {...(isMobile
-                        ? { onTouchStart: this.audioNextPlay }
-                        : { onClick: this.audioNextPlay })}
+                      onClick={this.audioNextPlay}
                     >
                       {this.iconMap.next}
                     </span>
@@ -597,21 +584,11 @@ export default class ReactJkMusicPlayer extends PureComponent {
                 {/* 音量控制 */}
                 <span className="group play-sounds" title={locale.volumeText}>
                   {soundValue === 0 ? (
-                    <span
-                      className="sounds-icon"
-                      {...(isMobile
-                        ? { onTouchStart: this.onResetVolume }
-                        : { onClick: this.onResetVolume })}
-                    >
+                    <span className="sounds-icon" onClick={this.onResetVolume}>
                       {this.iconMap.mute}
                     </span>
                   ) : (
-                    <span
-                      className="sounds-icon"
-                      {...(isMobile
-                        ? { onTouchStart: this.onMute }
-                        : { onClick: this.onMute })}
-                    >
+                    <span className="sounds-icon" onClick={this.onMute}>
                       {this.iconMap.volume}
                     </span>
                   )}
@@ -631,9 +608,7 @@ export default class ReactJkMusicPlayer extends PureComponent {
                 <span
                   className="group audio-lists-btn"
                   title={locale.playListsText}
-                  {...(isMobile
-                    ? { onTouchStart: this.openAudioListsPanel }
-                    : { onClick: this.openAudioListsPanel })}
+                  onClick={this.openAudioListsPanel}
                 >
                   <span className="audio-lists-icon">
                     {this.iconMap.playLists}
@@ -645,9 +620,7 @@ export default class ReactJkMusicPlayer extends PureComponent {
                   <span
                     className="group hide-panel"
                     title={locale.toggleMiniModeText}
-                    {...(isMobile
-                      ? { onTouchStart: this.onHidePanel }
-                      : { onClick: this.onHidePanel })}
+                    onClick={this.onHidePanel}
                   >
                     {this.iconMap.toggle}
                   </span>

diff --git a/src/styles/index.less b/src/styles/index.less
@@ -54,10 +54,6 @@
     @media @mobile {
       font-size: @player-lyric-font-size-mobile;
       z-index: @player-lyric-z-index-mobile;
-
-      &:hover {
-        box-shadow: 2px 2px 20px @border-color;
-      }
     }
   }