react-jinke-music-player - npm Package Compare versions

Comparing version 4.7.2 to 4.8.0

CN.md

@@ -165,2 +165,7 @@ <p align="center">
 | autoPlayInitLoadPlayList | `boolean`                                                                           | `false`                                                                                     | 歌曲列表更新后, 是否自动播放                                                                                                                   |
+| spaceBar                 | `boolean`                                                                           | `false`                                                                                     | 是否可以通过空格键控制音乐的播放与暂停                                                                                                         |
+| showDestroy              | `boolean`                                                                           | `false`                                                                                     | 是否显示销毁按钮                                                                                                                               |
+| onBeforeDestroy          | `function(currentPlayIndex,audioLists,audioInfo)`                                   | `-`                                                                                         | 销毁之前处理函数                                                                                                                               |
+| onDestroyed              | `function(currentPlayIndex,audioLists,audioInfo)`                                   | `-`                                                                                         | 销毁之后的回调                                                                                                                                 |
+| customDownloader         | `function(downloadInfo: TransformedDownloadAudioInfo)`                              | `-`                                                                                         | 自定义下载器                                                                                                                                   |
 
@@ -203,2 +208,68 @@ ## 自定义操作按钮
 
+## 毛玻璃效果
+
+```jsx
+<ReactJkMusicPlayer glassBg/>
+```
+
+![glass-1](https://github.com/lijinke666/react-music-player/blob/master/assetsImg/glass-1.png)
+
+![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
+  const onBeforeDestroy = (currentPlayId, audioLists, audioInfo) => {
+    return new Promise((resolve, reject) => {
+      // 返回一个 Promise, 这里可以做一些自定义的校验
+      if (window.confirm('是否关闭?')) {
+        // 调用 resolve, 播放器正常关闭/销毁
+        resolve()
+      } else {
+        // 调用 reject, 本次操作无效.
+        reject()
+      }
+    })
+  }
+
+  const onDestroyed = (currentPlayId, audioLists, audioInfo) => {
+    console.log('onDestroyed:', currentPlayId, audioLists, audioInfo)
+  }
+
+  ReactDOM.render(
+    <ReactJkMusicPlayer
+      showDestroy
+      onBeforeDestroy={onBeforeDestroy}
+      onDestroyed={onDestroyed}
+    />
+  )
+```
+
 ## 开发
@@ -205,0 +276,0 @@

index.d.ts

@@ -97,2 +97,3 @@ import * as React from 'react'
   showMiniModeCover?: boolean
+  showDestroy?: boolean
   toggleMode?: boolean
@@ -129,2 +130,14 @@ once?: boolean
   autoPlayInitLoadPlayList?: boolean
+  spaceBar?: boolean
+  onBeforeDestroy?: (
+    currentPlayId: string,
+    audioLists: Array<ReactJkMusicPlayerAudioList>,
+    audioInfo: ReactJkMusicPlayerAudioInfo
+  ) => Promise<void>
+  onDestroyed?: (
+    currentPlayId: string,
+    audioLists: Array<ReactJkMusicPlayerAudioList>,
+    audioInfo: ReactJkMusicPlayerAudioInfo
+  ) => Promise<void>
+  customDownloader?: (downloadAudioInfo: TransformedDownloadAudioInfo) => void
 }
@@ -131,0 +144,0 @@

lib/utils.js

@@ -32,3 +32,3 @@ "use strict";
 
-  if (h > 0) return [zero(h), zero(i), zero(s)].join(":");else return [zero(i), zero(s)].join(":");
+  if (h > 0) return [zero(h), zero(i), zero(s)].join(':');else return [zero(i), zero(s)].join(':');
 }
@@ -35,0 +35,0 @@

package.json

 {
   "name": "react-jinke-music-player",
-  "version": "4.7.2",
+  "version": "4.8.0",
   "description": "Maybe the best beautiful HTML5 responsive player component for react",
@@ -21,3 +21,3 @@ "main": "lib/index.js",
     "ci:coverage": "npm run coverage && codecov",
-    "prepublish": "yarn build"
+    "prepublishOnly": "yarn build"
   },
@@ -24,0 +24,0 @@ "lint-staged": {

README.md

@@ -169,2 +169,7 @@ <p align="center">
 | autoPlayInitLoadPlayList   | `boolean` |  `false`          |  Play your new play list right after your new play list is loaded turn false.  |
+| spaceBar   | `boolean` |  `false`          |  Play and pause audio through space bar （Desktop effective）.  |
+| 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  |
 
@@ -207,2 +212,68 @@ ## Custom operation ui
 
+## Glass bg
+
+```jsx
+<ReactJkMusicPlayer glassBg/>
+```
+
+![glass-1](https://github.com/lijinke666/react-music-player/blob/master/assetsImg/glass-1.png)
+
+![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
+  const onBeforeDestroy = (currentPlayId, audioLists, audioInfo) => {
+    return new Promise((resolve, reject) => {
+      // your custom validate
+      if (window.confirm('Are you confirm destroy the player?')) {
+        // if resolve, player destroyed
+        resolve()
+      } else {
+        // if reject, skip.
+        reject()
+      }
+    })
+  }
+
+  const onDestroyed = (currentPlayId, audioLists, audioInfo) => {
+    console.log('onDestroyed:', currentPlayId, audioLists, audioInfo)
+  }
+
+  ReactDOM.render(
+    <ReactJkMusicPlayer
+      showDestroy
+      onBeforeDestroy={onBeforeDestroy}
+      onDestroyed={onDestroyed}
+    />
+  )
+```
+
 ## Development
@@ -209,0 +280,0 @@

No alert changes

Improved metrics

Total package byte prevSize

205183

increased by5%

Lines of code

4034

increased by3.01%

Number of lines in readme file

421

increased by20.29%

No dependency changes