feat: support custom downloader

CN.md

@@ -166,6 +166,7 @@ ReactDOM.render(
 | showDestroy              | `boolean`                                                                           | `false`                                                                                     | 是否显示销毁按钮                                                                                                                               |
 | onBeforeDestroy          | `function(currentPlayIndex,audioLists,audioInfo)`                                   | `-`                                                                                         | 销毁之前处理函数                                                                                                                               |
 | onDestroyed              | `function(currentPlayIndex,audioLists,audioInfo)`                                   | `-`                                                                                         | 销毁之后的回调                                                                                                                                 |
+| customDownloader         | `function(downloadInfo: TransformedDownloadAudioInfo)`                              | `-`                                                                                         | 自定义下载器                                                                                                                                   |
 
 ## 自定义操作按钮
 
@@ -213,6 +214,33 @@ class App extends React.Component{
 
 ![glass-2](https://github.com/lijinke666/react-music-player/blob/master/assetsImg/glass-2.png)
 
+## 自定义下载器
+
+> eg. <https://www.npmjs.com/package/file-saver>
+
+```jsx
+const customDownloader = (downloadInfo) => {
+  const link = document.createElement('a')
+  link.href = downloadInfo.src // a.mp3
+  link.download = downloadInfo.filename || 'test'
+  document.body.appendChild(link)
+  link.click()
+}
+<ReactJkMusicPlayer audioLists={[{src: "a.mp3"}]} customDownloader={customDownloader}/>
+
+// 配合 onBeforeAudioDownload 使用
+const onBeforeAudioDownload = () => {
+  return Promise.resolve({
+    src: '1.mp3',
+  })
+}
+
+const customDownloader = (downloadInfo) => {
+  console.log(downloadInfo.src) // 1.mp3
+}
+<ReactJkMusicPlayer customDownloader={customDownloader}/>
+```
+
 ## 关闭/销毁 播放器
 
 ```jsx

README.md

@@ -170,6 +170,7 @@ ReactDOM.render(
 | showDestroy   | `boolean` |  `false`          |  Destroy player button display  |
 | onBeforeDestroy   | `function(currentPlayIndex,audioLists,audioInfo)` |  `-`          |  custom destroy handler before  |
 | onDestroyed   | `function(currentPlayIndex,audioLists,audioInfo)` |  `-`          |  player destroyed handle  |
+| customDownloader   | `function(downloadInfo: TransformedDownloadAudioInfo)` |  `-`          |  custom dwonload handle  |
 
 ## Custom operation ui
 
@@ -217,6 +218,33 @@ class App extends React.Component{
 
 ![glass-2](https://github.com/lijinke666/react-music-player/blob/master/assetsImg/glass-2.png)
 
+## Custom downloader
+
+> eg. <https://www.npmjs.com/package/file-saver>
+
+```jsx
+const customDownloader = (downloadInfo) => {
+  const link = document.createElement('a')
+  link.href = downloadInfo.src // a.mp3
+  link.download = downloadInfo.filename || 'test'
+  document.body.appendChild(link)
+  link.click()
+}
+<ReactJkMusicPlayer audioLists={[{src: "a.mp3"}]} customDownloader={customDownloader}/>
+
+// use onBeforeAudioDownload
+const onBeforeAudioDownload = () => {
+  return Promise.resolve({
+    src: '1.mp3',
+  })
+}
+
+const customDownloader = (downloadInfo) => {
+  console.log(downloadInfo.src) // 1.mp3
+}
+<ReactJkMusicPlayer customDownloader={customDownloader}/>
+```
+
 ## Destory player
 
 ```jsx

__tests__/tests/player.test.js

@@ -493,6 +493,31 @@ describe('<ReactJkMusicPlayer/>', () => {
     expect(onBeforeAudioDownload).toHaveBeenCalled()
     expect(onAudioDownload).toHaveBeenCalled()
   })
+
+  it('should call customer downloader', () => {
+    const onBeforeAudioDownload = jest.fn(() => {
+      return Promise.resolve({
+        src: '123.mp3',
+        filename: 'test',
+      })
+    })
+    let testSrc = ''
+    const customDownloader = jest.fn((info) => {
+      testSrc = info.src
+    })
+    const wrapper = mount(
+      <ReactJkMusicPlayer
+        audioLists={[{ musicSrc: 'x', cover: '' }]}
+        mode="full"
+        onBeforeAudioDownload={onBeforeAudioDownload}
+        customDownloader={customDownloader}
+      />
+    )
+    wrapper.find('.audio-download').simulate('click')
+    setTimeout(() => {
+      expect(testSrc).toEqual('123.mp3')
+    }, 0)
+  })
   it('should trigger onAudioPlay hook when audio track list change', () => {
     const onAudioPlay = jest.fn()
     const wrapper = mount(

example/example.js

@@ -433,9 +433,29 @@ const options = {
    */
   // onBeforeAudioDownload() {
   //   return Promise.resolve({
-  //     src: '1.mp3'
+  //     src: '1.mp3',
   //   })
-  // }
+  // },
+
+  /**
+   * customer download handler
+   * eg. a link , or https://www.npmjs.com/package/file-saver
+   * @param {*} downloadInfo
+   * @example
+   *
+       customDownloader(downloadInfo) {
+        const link = document.createElement('a')
+        link.href = downloadInfo.src
+        link.download = downloadInfo.filename || 'test'
+        document.body.appendChild(link)
+        link.click()
+      },
+   */
+  customDownloader(downloadInfo) {
+    console.log(downloadInfo.src)
+    console.log(downloadInfo.filename)
+    console.log(downloadInfo.mimeType)
+  },
 }
 
 class Demo extends React.PureComponent {

index.d.ts

@@ -137,6 +137,7 @@ export interface ReactJkMusicPlayerProps {
     audioLists: Array<ReactJkMusicPlayerAudioList>,
     audioInfo: ReactJkMusicPlayerAudioInfo
   ) => Promise<void>
+  customDownloader?: (downloadAudioInfo: TransformedDownloadAudioInfo) => void
 }
 
 export interface TransformedDownloadAudioInfo {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-jinke-music-player",
-  "version": "4.7.2",
+  "version": "4.8.0",
   "description": "Maybe the best beautiful HTML5 responsive player component for react",
   "main": "lib/index.js",
   "typing": "index.d.ts",
@@ -18,7 +18,7 @@
     "test": "jest __tests__/tests",
     "coverage": "yarn test --coverage",
     "ci:coverage": "npm run coverage && codecov",
-    "prepublish": "yarn build"
+    "prepublishOnly": "yarn build"
   },
   "lint-staged": {
     "src/**/*.js": [

src/index.js

@@ -1,5 +1,5 @@
 /**
- * @version 4.7.2
+ * @version 4.8.0
  * @name react-jinke-music-player
  * @description Maybe the best beautiful HTML5 responsive player component for react :)
  * @author Jinke.Li <[email protected]>
@@ -306,6 +306,7 @@ export default class ReactJkMusicPlayer extends PureComponent {
     showDestroy: PropTypes.bool,
     onBeforeDestroy: PropTypes.func,
     onDestroyed: PropTypes.func,
+    customDownloader: PropTypes.func,
   }
   constructor(props) {
     super(props)
@@ -1076,7 +1077,9 @@ export default class ReactJkMusicPlayer extends PureComponent {
     this.props.onThemeChange && this.props.onThemeChange(theme)
   }
   onAudioDownload = () => {
+    const { musicSrc } = this.state
     if (this.state.musicSrc) {
+      const { customDownloader } = this.props
       const baseAudioInfo = this.getBaseAudioInfo()
       const onBeforeAudioDownload = this.props.onBeforeAudioDownload(
         baseAudioInfo
@@ -1086,10 +1089,16 @@ export default class ReactJkMusicPlayer extends PureComponent {
         onBeforeAudioDownload.then((info) => {
           const { src, filename, mimeType } = info
           transformedDownloadAudioInfo = info
-          download(src, filename, mimeType)
+          if (customDownloader) {
+            customDownloader(info)
+          } else {
+            download(src, filename, mimeType)
+          }
         })
       } else {
-        download(this.state.musicSrc)
+        customDownloader
+          ? customDownloader({ src: musicSrc })
+          : download(musicSrc)
       }
       this.props.onAudioDownload &&
         this.props.onAudioDownload(baseAudioInfo, transformedDownloadAudioInfo)