feat: add mobileMediaQuery api #166

README.md

@@ -203,6 +203,7 @@ ReactDOM.render(
 | onPlayIndexChange | `function(playIndex)` | `-` | audio play index change handle |
 | quietUpdate | `boolean` | `false` | [Detail](#bulb-quiet-update) |
 | renderAudioTitle | `(audioInfo, isMobile) => ReactNode` | `-` | use `locale.audioTitle` to set `audio` tag title, the api can render custom jsx element for display |
+| mobileMediaQuery | `string` | `(max-width: 768px) and (orientation : portrait)` | Custom mobile media query string, eg use the mobile version UI on iPad. <https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries> |
 
 ## :bulb: Custom operation ui
 
@@ -600,6 +601,15 @@ const PlayerWithNoSSR = dynamic(() => import('../components/Player'), {
 })
 ```
 
+## :bulb: Customize mobile media query
+
+> eg. Use mobile UI on a iPad device
+
+```jsx
+// Default '(max-width: 768px) and (orientation : portrait)'
+<ReactJkMusicPlayer mobileMediaQuery="(max-width: 1024px)" />
+```
+
 ## :pencil: Development
 
 ```bash

__tests__/tests/__snapshots__/icon.test.js.snap

@@ -375,9 +375,6 @@ exports[`Player custom icon test should render custom icon in mobile mode 1`] =
     <div
       class="react-jinke-music-player-mobile-header group"
     >
-      <div
-        class="react-jinke-music-player-mobile-header-left"
-      />
       <div
         class="react-jinke-music-player-mobile-header-title"
         title="audioName"
@@ -560,7 +557,7 @@ exports[`Player custom icon test should render custom icon in mobile mode 1`] =
     </div>
   </div>
   <div
-    class="audio-lists-panel"
+    class="audio-lists-panel audio-lists-panel-mobile"
   >
     <div
       class="audio-lists-panel-header"

__tests__/tests/__snapshots__/locale.test.js.snap

@@ -66,6 +66,7 @@ exports[`Locale test should render default locale with en_US 1`] = `
   }
   loadAudioErrorPlayNext={true}
   locale="en_US"
+  mobileMediaQuery="(max-width: 768px) and (orientation : portrait)"
   mode="mini"
   onBeforeAudioDownload={[Function]}
   once={false}
@@ -754,6 +755,7 @@ exports[`Locale test should render locale with zh_CN 1`] = `
   }
   loadAudioErrorPlayNext={true}
   locale="zh_CN"
+  mobileMediaQuery="(max-width: 768px) and (orientation : portrait)"
   mode="mini"
   onBeforeAudioDownload={[Function]}
   once={false}

example/example.js

@@ -249,12 +249,11 @@ const options = {
   responsive: true,
 
   /**
-   * @description Customer audio title [type `String | Function` default `${name} - ${singer}`]
-   * @example
-   * audioTitle: (audioInfo) => 'title'
+   * Custom mobile media query string, eg use the mobile version UI on iPad.
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
+   * [type `String` default '(max-width: 768px) and (orientation : portrait)']
    */
-
-  // audioTitle: 'xxxx',
+  mobileMediaQuery: '(max-width: 1024px)',
 
   // Music is downloaded handle
   onAudioDownload(audioInfo) {

index.d.ts

@@ -219,7 +219,8 @@ export interface ReactJkMusicPlayerProps {
     audioInfo: ReactJkMusicPlayerAudioInfo,
   ) => void,
   onPlayIndexChange?: (playIndex: number) => void
-  renderAudioTitle?: (audioInfo: ReactJkMusicPlayerAudioInfo, isMobile: boolean) => React.ReactNode | string
+  renderAudioTitle?: (audioInfo: ReactJkMusicPlayerAudioInfo, isMobile: boolean) => React.ReactNode | string,
+  mobileMediaQuery?: string
 }
 
 export default class ReactJkMusicPlayer extends React.PureComponent<

src/components/AudioListsPanel.js

@@ -21,6 +21,7 @@ const AudioListsPanel = ({
 }) => (
   <div
     className={cls('audio-lists-panel', panelToggleAnimate, {
+      'audio-lists-panel-mobile': isMobile,
       'glass-bg': glassBg,
     })}
   >

src/components/PlayerMobile.js

@@ -39,7 +39,6 @@ const PlayerMobile = ({
       text={currentPlayModeName}
     />
     <div className={`${prefix}-header group`}>
-      <div className={`${prefix}-header-left`} />
       <div className={`${prefix}-header-title`} title={name}>
         {renderAudioTitle()}
       </div>

src/config/propTypes.js

@@ -114,4 +114,5 @@ export default {
   responsive: PropTypes.bool,
   quietUpdate: PropTypes.bool,
   renderAudioTitle: PropTypes.func,
+  mobileMediaQuery: PropTypes.string,
 }

src/index.js

@@ -167,6 +167,7 @@ export default class ReactJkMusicPlayer extends PureComponent {
     responsive: true,
     icon: DEFAULT_ICON,
     quietUpdate: false, // 更新后的播放列表如果有当前正在播放的歌曲不打断当前播放状态
+    mobileMediaQuery: MEDIA_QUERY.MOBILE,
   }
 
   static propTypes = PROP_TYPES
@@ -1719,7 +1720,7 @@ export default class ReactJkMusicPlayer extends PureComponent {
 
   addMobileListener = () => {
     this.mobileMedia = this.addMatchMediaListener(
-      MEDIA_QUERY.MOBILE,
+      this.props.mobileMediaQuery,
       this.mobileMediaHandler,
     )
   }

src/styles/audioListsPanel.less

@@ -30,7 +30,8 @@
     animation: scaleFrom @common-animate-time forwards;
     display: none\9;
   }
-  @media @mobile {
+
+  &-mobile {
     width: 100% !important;
     top: 0;
     left: 0;
@@ -48,6 +49,20 @@
       animation: fromOut @common-animate-time forwards;
       display: none\9;
     }
+
+    .audio-item {
+        background-color: @lists-panel-item-bg-mobile !important;
+        &.playing {
+          background-color: @lists-panel-item-bg-playing-mobile !important;
+        }
+    }
+
+    .audio-lists-panel-content {
+      width: 100% !important;
+      height: calc(~'100vh - @{panel-header-height}') !important;
+      transform-origin: bottom center;
+      -webkit-overflow-scrolling: touch;
+    }
   }
   &-header {
     border-bottom: 1px solid lighten(@panel-bg, 1%);
@@ -107,11 +122,7 @@
     overflow-x: hidden;
     overflow-y: auto;
     height: @lists-panel-height - @panel-header-height - 1px;
-    @media @mobile {
-      width: 100% !important;
-      height: calc(~'100vh - @{panel-header-height}') !important;
-      transform-origin: bottom center;
-    }
+
     &.no-content {
       .center();
       > span {
@@ -147,13 +158,6 @@
       &.remove {
         animation: remove @common-animate-time forwards;
       }
-
-      @media @mobile {
-        background-color: @lists-panel-item-bg-mobile !important;
-        &.playing {
-          background-color: @lists-panel-item-bg-playing-mobile !important;
-        }
-      }
       .player-icons {
         display: inline-flex;
         width: 30px;

src/styles/playerMobile.less

@@ -70,28 +70,26 @@
     top: 0;
     left: 0;
     display: flex;
+    justify-content: center;
     align-items: center;
     animation: fromDown @common-animate-time forwards;
+    position: relative;
     &-title {
-      flex-basis: 80%;
       text-align: center;
       font-size: 20px;
       transition: color @common-animate-time;
+      padding: 0 30px;
       .ellipsis-1();
     }
     .item {
       display: inline-flex;
       width: 50px;
     }
-    &-left,
     &-right {
-      display: inline-flex;
-      width: 50px;
-    }
-    &-right {
-      justify-content: flex-end;
       color: @base-color;
       cursor: pointer;
+      position: absolute;
+      right: 0;
       svg {
         font-size: 25px;
       }