feat: add renderAudioTitle api

README.md

@@ -202,6 +202,7 @@ ReactDOM.render(
 | onCoverClick | `function(mode,audioLists,audioInfo)` | `-` | audio cover clicked handle |
 | 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 |
 
 ## :bulb: Custom operation ui
 
@@ -540,7 +541,7 @@ export interface ReactJkMusicPlayerIcon {
  * [A,B] => [C]
  * (C) is playing
  */
- 
+
  function App() {
      const [audioLists, setAudioLists] = useState([{ musicSrc: 'A' }, { musicSrc: 'B' }])
 

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

@@ -20,9 +20,9 @@ exports[`Player custom icon test should render custom icon 1`] = `
       >
         <span
           class="audio-title"
-          title="audioName "
+          title="audioName"
         >
-          audioName 
+          audioName
         </span>
         <section
           class="audio-main"
@@ -338,7 +338,7 @@ exports[`Player custom icon test should render custom icon 1`] = `
   <audio
     class="music-player-audio"
     src="xx"
-    title="audioName "
+    title="audioName"
   />
 </div>
 `;
@@ -677,7 +677,7 @@ exports[`Player custom icon test should render custom icon in mobile mode 1`] =
   <audio
     class="music-player-audio"
     src="xx"
-    title="audioName "
+    title="audioName"
   />
 </div>
 `;

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

@@ -4,6 +4,6 @@ exports[`AudioInstance test should get audio instance 1`] = `
 <audio
   class="music-player-audio"
   src="a"
-  title=" "
+  title=""
 />
 `;

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

@@ -258,7 +258,7 @@ exports[`Locale test should render default locale with en_US 1`] = `
           <audio
             class="music-player-audio"
             src=""
-            title=" "
+            title=""
           />
         </div>
       </body>
@@ -681,7 +681,7 @@ exports[`Locale test should render default locale with en_US 1`] = `
       <audio
         className="music-player-audio"
         src=""
-        title=" "
+        title=""
       />
     </div>
   </Portal>
@@ -946,7 +946,7 @@ exports[`Locale test should render locale with zh_CN 1`] = `
           <audio
             class="music-player-audio"
             src=""
-            title=" "
+            title=""
           />
         </div>
         <div
@@ -1112,7 +1112,7 @@ exports[`Locale test should render locale with zh_CN 1`] = `
           <audio
             class="music-player-audio"
             src=""
-            title=" "
+            title=""
           />
         </div>
       </body>
@@ -1535,7 +1535,7 @@ exports[`Locale test should render locale with zh_CN 1`] = `
       <audio
         className="music-player-audio"
         src=""
-        title=" "
+        title=""
       />
     </div>
   </Portal>

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

@@ -145,7 +145,7 @@ exports[`<ReactJkMusicPlayer/> should render a <ReactJkMusicPlayer/> components
   <audio
     class="music-player-audio"
     src=""
-    title=" "
+    title=""
   />
 </div>
 `;

__tests__/tests/player.test.js

@@ -1503,4 +1503,53 @@ describe('<ReactJkMusicPlayer/>', () => {
       wrapper.find('.react-jinke-music-player-mobile-header-right'),
     ).toHaveLength(0)
   })
+
+  it('should render default audio title', () => {
+    const wrapper = mount(
+      <ReactJkMusicPlayer mode="full" audioLists={[{ name: 'test' }]} />,
+    )
+    expect(wrapper.find('.audio-title').text()).toEqual('test')
+    expect(wrapper.find('.audio-title').prop('title')).toEqual('test')
+    wrapper.setState({ isMobile: true })
+    expect(
+      wrapper.find('.react-jinke-music-player-mobile-header-title').text(),
+    ).toEqual('test')
+    expect(
+      wrapper
+        .find('.react-jinke-music-player-mobile-header-title')
+        .prop('title'),
+    ).toEqual('test')
+  })
+
+  it('should support custom render audio title', () => {
+    const renderAudioTitle = (audioInfo) => (
+      <div className="custom-audio-title">{audioInfo.name}</div>
+    )
+    const wrapper = mount(
+      <ReactJkMusicPlayer
+        mode="full"
+        audioLists={[{ name: 'test' }]}
+        renderAudioTitle={renderAudioTitle}
+      />,
+    )
+    expect(wrapper.find('.audio-title .custom-audio-title')).toHaveLength(1)
+    expect(wrapper.find('.audio-title .custom-audio-title').text()).toEqual(
+      'test',
+    )
+
+    wrapper.setState({ isMobile: true })
+
+    expect(
+      wrapper.find(
+        '.react-jinke-music-player-mobile-header-title .custom-audio-title',
+      ),
+    ).toHaveLength(1)
+    expect(
+      wrapper
+        .find(
+          '.react-jinke-music-player-mobile-header-title .custom-audio-title',
+        )
+        .text(),
+    ).toEqual('test')
+  })
 })

example/example.js

@@ -385,6 +385,11 @@ const options = {
     console.log('onCoverClick: ', mode, audioLists, audioInfo)
   },
 
+  // custom audio title
+  // renderAudioTitle(audioInfo) {
+  //   return <a href="#">{audioInfo.name}</a>
+  // },
+
   // onPlayIndexChange (playIndex) {
   //   console.log('onPlayIndexChange: ', playIndex);
   // }
@@ -594,6 +599,20 @@ class Demo extends React.PureComponent {
     this.updateParams({ playMode: e.target.value })
   }
 
+  renderCustomAudioTitle = () => {
+    this.updateParams({
+      renderAudioTitle: (audioInfo, isMobile) => {
+        console.log('audioInfo: ', audioInfo, isMobile)
+        return (
+          <>
+            <a href="#">{audioInfo.name}</a>
+            <span className="tag">Hot</span>
+          </>
+        )
+      },
+    })
+  }
+
   renderCustomUI = () => {
     return (
       <>
@@ -760,6 +779,9 @@ class Demo extends React.PureComponent {
           <button type="button" onClick={this.unmountPlayer}>
             unmount player
           </button>
+          <button type="button" onClick={this.renderCustomAudioTitle}>
+            render custom audio title
+          </button>
           <br />
           <br />
           <label htmlFor="glassBg">

example/example.less

@@ -13,6 +13,21 @@ body {
   padding: 20px;
 }
 
+a {
+  color: @primary-color;
+  text-decoration: none;
+}
+
+.tag {
+  display: inline-block;
+  padding: 2px 10px;
+  font-size: 12px;
+  color: #fff;
+  background-color: @primary-color;
+  border-radius: 10px;
+  margin-left: 5px;
+}
+
 #root {
   padding-bottom: @music-player-panel-height + 20px;
 }

index.d.ts

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

src/components/PlayerMobile.js

@@ -29,6 +29,7 @@ const PlayerMobile = ({
   icon,
   locale,
   toggleMode,
+  renderAudioTitle,
 }) => (
   <div className={cls(prefix, { 'default-bg': !glassBg, 'glass-bg': glassBg })}>
     <PlayModeTip
@@ -40,7 +41,7 @@ const PlayerMobile = ({
     <div className={`${prefix}-header group`}>
       <div className={`${prefix}-header-left`} />
       <div className={`${prefix}-header-title`} title={name}>
-        {name}
+        {renderAudioTitle()}
       </div>
       {toggleMode && (
         <div className={`${prefix}-header-right`} onClick={onClose}>
@@ -123,6 +124,7 @@ const PlayerMobile = ({
 
 PlayerMobile.defaultProps = {
   icon: {},
+  renderAudioTitle: () => {},
 }
 
 export default memo(PlayerMobile)

src/config/propTypes.js

@@ -113,4 +113,5 @@ export default {
   audioTitle: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
   responsive: PropTypes.bool,
   quietUpdate: PropTypes.bool,
+  renderAudioTitle: PropTypes.func,
 }

src/index.js

@@ -486,6 +486,7 @@ export default class ReactJkMusicPlayer extends PureComponent {
             onCoverClick={this.onCoverClick}
             locale={locale}
             toggleMode={toggleMode}
+            renderAudioTitle={this.renderAudioTitle}
           />
         )}
 
@@ -521,7 +522,7 @@ export default class ReactJkMusicPlayer extends PureComponent {
               )}
               <div className="progress-bar-content">
                 <span className="audio-title" title={audioTitle}>
-                  {audioTitle}
+                  {this.renderAudioTitle()}
                 </span>
                 <section className="audio-main">
                   <span className="current-time" title={formattedCurrentTime}>
@@ -693,13 +694,20 @@ export default class ReactJkMusicPlayer extends PureComponent {
   }
 
   getAudioTitle = () => {
-    // 暂时兼容
     const { audioTitle } = this.locale || {}
     const { name, singer } = this.state
     if (typeof audioTitle === 'function' && this.audio) {
       return audioTitle(this.getBaseAudioInfo())
     }
-    return audioTitle || `${name} ${singer ? `- ${singer}` : ''}`
+    return audioTitle || `${name}${singer ? ` - ${singer}` : ''}`
+  }
+
+  renderAudioTitle = () => {
+    const { isMobile, name } = this.state
+    if (this.props.renderAudioTitle) {
+      return this.props.renderAudioTitle(this.getBaseAudioInfo(), isMobile)
+    }
+    return isMobile ? name : this.getAudioTitle()
   }
 
   toggleAudioLyric = () => {