Merge pull request #8 from lijinke666/feature-3.1

Feature 3.1
lijinke666 · Sep 28, 2017 · 053b57d · 053b57d
2 parents 8edceee + 0d47769
commit 053b57d
Show file tree

Hide file tree

Showing 19 changed files with 319 additions and 203 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,18 +1,19 @@
 {
-  "presets": [         
+  "presets": [       
     [
       "es2015",
       {
         "modules": false
       }
     ],
-    "react"
+    "react",
+    "stage-1"
   ],
   "env":{
     "test":{
       "presets":[
         "es2015",
-        "stage-0",
+        "stage-1",
         "react"
       ],
       "plugins":[
@@ -22,7 +23,9 @@
     }
   },
   "plugins": [
+    "transform-es2015-modules-commonjs",
     "transform-object-rest-spread",
-    "transform-class-properties"     
+    "transform-class-properties",
+    "react-hot-loader/babel"
   ]
 }
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,6 @@
 /node_modules/
+lib
+assets
 npm-debug.log
 .DS_Store
 .history
diff --git a/.npmignore b/.npmignore
@@ -2,6 +2,8 @@ node_modules
 npm-debug.log
 .DS_Store
 dist
-example/dist
+example
+src
 .history
-assets
+assetsImg
+index.html
diff --git a/CN.md b/CN.md
@@ -17,42 +17,48 @@ npm install react-jinke-music-player --save
 
 > 白天主题 <br/>
 
-![lightTheme](https://github.com/lijinke666/react-jinke-music-player/blob/master/assets/light-theme.png)
+![lightTheme](https://github.com/lijinke666/react-jinke-music-player/blob/master/assetsImg/light-theme.png)
 
 
 > 夜晚主题  <br/>
 
-![darkTheme](https://github.com/lijinke666/react-jinke-music-player/blob/master/assets/dark-theme.png)
+![darkTheme](https://github.com/lijinke666/react-jinke-music-player/blob/master/assetsImg/dark-theme.png)
 
 
-![mobile](https://github.com/lijinke666/react-jinke-music-player/blob/master/assets/mobile.jpg)
+![mobile](https://github.com/lijinke666/react-jinke-music-player/blob/master/assetsImg/mobile.jpg)
 
 ## 例子
 > 在线例子 :  [https://lijinke666.github.io/react-jinke-music-player/](https://lijinke666.github.io/react-jinke-music-player/)
 
 
-## 开发
-```
-git clone https://github.com/lijinke666/react-jinke-music-player.git
-npm install
-npm start
-```
-
-## 参数 & 使用
+## 使用
 
 ```jsx
 import React from "react"
 import ReactDOM from "react-dom"
 import ReactJkMusicPlayer from "react-jinke-music-player"
+import "react-jinke-music-player/assets/index.css"
+
+ReactDOM.render(
+    <ReactJkMusicPlayer {...options} />,
+    document.getElementById('root')
+)
+
+
+```
+## 参数 
+
+```js
 import FaHeadphones from "react-icons/lib/fa/headphones"
 
 const options = {
     /**
-        音乐列表
-        name 歌曲名字 必填
-        singer 歌手名字 非必填
-        cover 封面图 必填
-        musicSrc 歌曲路径 必填
+     * 音乐列表
+     * @param {Array} audioLists 
+     * @param {String | ReactNode } audioLists.name  音乐的名字  [ 必填 ]
+     * @param {String | ReactNode } audioLists.singer  歌手名  [ 非必填 ]
+     * @param {String } audioLists.cover  封面图  [ 必填 ]
+     * @param {String } audioLists.musicSrc  音乐链接  [ required ]
     */
     audioLists:[{
         name:"Canon (piano version)",
@@ -97,6 +103,12 @@ const options = {
     //播放器的模式 迷你(mini) 或者 完整 (full) [type `String`  default `mini`]  
     mode: "mini",
 
+    /**
+     * [ type `Boolean` default 'false' ]
+     * 在默认情况下 'audioPlay' 函数 会在你 每次暂停后再次播放  触发 , 如果 你只想 让 'audioPlay' 在 音乐初始化播放的时候触发一次,你可以设置 为 `true`
+     */
+    once: false,
+
     //是否可以 从迷你模式 切换到 完整模式 , 或者 完整模式 切换到 迷你模式 [type `String` default 'true']
     toggleMode:true,
 
@@ -124,6 +136,9 @@ const options = {
     //是否显示播放模式 按钮  [type `Boolean` default `treu`]
     showPlayMode: true,
 
+    //如果默认的功能按钮不满足你 你可以自定义扩展      [type 'Array' default '[]' ]
+    extendsContent:[],
+
     //音频下载 触发 返回 音频信息
     audioDowload(audioInfo) {
         console.log('audio dowload', audioInfo);
@@ -171,15 +186,29 @@ ReactDOM.render(
 
 ```
 
+## 开发
+```
+git clone https://github.com/lijinke666/react-jinke-music-player.git
+npm install
+npm start
+```
+
 ## AudioInfo 返回参数
 ```js
 {
-    cover:"http://img2.kuwo.cn/star/starheads/120/26/82/544626559.jpg"   //封面图
-    currentTime:10.211519                                                //当前播放时长
-    duration:164.211519                                                  //歌曲总时长
-    musicSrc:"http://so1.111ttt.com:8282/2016/1/12m/10/205101300290.m4a?  tflag=1502850639pin=13888f2d75f5f6229a8a3e818f09d195&ip=118.116.109.58#.mp3" //歌曲链接
-    name:"Canon (piano version)"                                                //歌曲名
-    volume:100                                                                  //当前音量
+    cover:"http://img2.kuwo.cn/star/starheads/120/26/82/544626559.jpg"      //封面图
+    currentTime:10.211519                   //当前播放时长
+    duration:164.211519                     //音乐总时长
+    musicSrc:"http://so1.111ttt.com:8282/2016/1/12m/10/205101300290.m4a?    tflag=1502850639pin=13888f2d75f5f6229a8a3e818f09d195&ip=118.116.109.58#.mp3"   //音乐地址
+    name:"Canon (piano version)"     //音乐名
+    volume:100,      //当前音量
+    muted:false,     //是否静音
+    networkState:1,  //当前网络状态
+    readyState:4,    //当前就绪状态
+    paused:false,    //是否暂停
+    ended:false,     //是否结束
+    startDate:null,  //当前时间偏移的 Date 对象
+    played:{length:1}     //已播放部分的 TimeRanges 对象
 }
 ```
 
@@ -191,12 +220,6 @@ ReactDOM.render(
     theme: PropTypes.oneOf(['dark', 'light']),
     mode: PropTypes.oneOf(['mini', 'full']),
     drag: PropTypes.bool,
-    name: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.object
-    ]),
-    cover: PropTypes.string.isRequired,
-    musicSrc: PropTypes.string.isRequired,
     playModeText: PropTypes.object,
     closeText: PropTypes.oneOfType([
       PropTypes.string,
@@ -214,7 +237,10 @@ ReactDOM.render(
       PropTypes.string,
       PropTypes.object
     ]),
-    defaultPosition: PropTypes.object,
+    defaultPosition: PropTypes.shape({
+      top: PropTypes.number,
+      left: PropTypes.number
+    }),
     audioPlay: PropTypes.func,
     audioPause: PropTypes.func,
     audioEnded: PropTypes.func,
@@ -231,6 +257,8 @@ ReactDOM.render(
     showThemeSwitch: PropTypes.bool,
     showMiniModeCover: PropTypes.bool,
     toggleMode: PropTypes.bool,
+    once: PropTypes.bool,
+    extendsContent: PropTypes.array,
     checkedText: PropTypes.oneOfType([
       PropTypes.string,
       PropTypes.object

diff --git a/README.md b/README.md
@@ -16,57 +16,52 @@ npm install react-jinke-music-player --save
 
 > Light Theme <br/>
 
-![lightTheme](https://github.com/lijinke666/react-jinke-music-player/blob/master/assets/light-theme.png)
+![lightTheme](https://github.com/lijinke666/react-jinke-music-player/blob/master/assetsImg/light-theme.png)
 
 > Dark Theme  <br/>
 
-![darkTheme](https://github.com/lijinke666/react-jinke-music-player/blob/master/assets/dark-theme.png)
+![darkTheme](https://github.com/lijinke666/react-jinke-music-player/blob/master/assetsImg/dark-theme.png)
 
 
-![mobile](https://github.com/lijinke666/react-jinke-music-player/blob/master/assets/mobile.jpg)
+![mobile](https://github.com/lijinke666/react-jinke-music-player/blob/master/assetsImg/mobile.jpg)
 
 
 ## Example
 > ONLINE example :  [https://lijinke666.github.io/react-jinke-music-player/](https://lijinke666.github.io/react-jinke-music-player/)
 
-
-## Development
-```
-git clone https://github.com/lijinke666/react-jinke-music-player.git
-npm install
-npm start
-```
-
-## Options & Usage
+## Usage
 
 ```jsx
 import React from "react"
 import ReactDOM from "react-dom"
 import ReactJkMusicPlayer from "react-jinke-music-player"
+import "react-jinke-music-player/assets/index.css"
+
+ReactDOM.render(
+    <ReactJkMusicPlayer {...options} />,
+    document.getElementById('root')
+)
+```
+
+## Options
+
+```js
 import FaHeadphones from "react-icons/lib/fa/headphones"
 
 const options = {
-    //audio lists model
+    /**
+     * audio lists model
+     * @param {Array} audioLists 
+     * @param {String | ReactNode } audioLists.name  audio name  [ required ]
+     * @param {String | ReactNode } audioLists.singer  singer name of the playing song  [ not required ]
+     * @param {String } audioLists.cover  audio cover  [ required ]
+     * @param {String } audioLists.musicSrc  audio music source  [ required ]
+    */
     audioLists:[{
         name:"Canon (piano version)",
-        singer:"未知",
+        singer:"尼古拉斯赵四",
         cover:"http://img2.kuwo.cn/star/starheads/120/26/82/544626559.jpg",
         musicSrc:"http://so1.111ttt.com:8282/2016/1/12m/10/205101300290.m4a?tflag=1502850639&pin=13888f2d75f5f6229a8a3e818f09d195&ip=118.116.109.58#.mp3"
-    },{
-        name:"胆小鬼",
-        singer:"梁咏琪",
-        cover:"http://p3.music.126.net/OLroXJamq8uM44u1Jawpyw==/51677046522535.jpg?param=177y177",
-        musicSrc:"http://so1.111ttt.com:8282/2016/1/12m/10/205101640205.m4a?tflag=1506065899&pin=ff429b7ee5e0d36bb527c286ef8b09d6&ip=218.88.22.24#.mp3"
-    },{
-        name:"Beautiful",
-        singer:"Chrisina Aguilera",
-        cover:"http://p3.music.126.net/biJeqQZ5niniD7Va2w-LHA==/109951163028526512.jpg?param=200y200",
-        musicSrc:"http://other.web.ra01.sycdn.kuwo.cn/de37dfd72c9fb9bf7de1a0f9a7fc2c4c/59c4bbc4/resource/n2/320/94/4/1498621112.mp3"
-    },{
-        name:"悟空",
-        singer:"戴荃",
-        cover:"http://p4.music.126.net/gn4pPKc_Wk3EyByfi86lUQ==/3333719255417035.jpg?param=177y177",
-        musicSrc:"http://mp3.henduoge.com/s/2017-09-22/1506047726.mp3"
     }],
 
     //color of the music player theme    [ type `string: 'light' or 'drak'  ` default 'drak' ]
@@ -98,11 +93,18 @@ const options = {
     //audio theme switch unCheckedText [ type `String | ReactNode` default '-']
     unCheckedText:"关",
 
+    //default play mode of the audio player options 'order' 'orderLoop' 'singleLoop' 'shufflePlay' [ type `String` default 'order' ]
     defaultPlayMode:"order",
 
     //audio mode        mini | full          [type `String`  default `mini`]  
     mode: "mini",
 
+    /**
+     * [ type `Boolean` default 'false' ]
+     * The default audioPlay handle function will be played again after each pause, If you only want to trigger it once, you can set 'true'
+     */
+    once: false,
+
     //Whether you can switch between two modes, full => mini  or mini => full   [type 'Bollean' default 'true']
     toggleMode:true,
 
@@ -130,6 +132,9 @@ const options = {
     //theme toogle switch  display of the audio player panel   [type `Boolean` default `true`]
     showThemeSwitch:true,
 
+    //Extensible custom content       [type 'Array' default '[]' ]
+    extendsContent:[],
+
     //Music is downloaded handle
     audioDowload(audioInfo) {
         console.log('audio dowload', audioInfo);
@@ -176,16 +181,14 @@ const options = {
     }
 }
 
-const Demo = () => (
-    <ReactJkMusicPlayer {...options} />
-)
-ReactDOM.render(
-    <Demo />,
-    document.getElementById('root')
-)
-
+```
 
 
+## Development
+```
+git clone https://github.com/lijinke666/react-jinke-music-player.git
+npm install
+npm start
 ```
 
 ## AudioInfo
@@ -197,7 +200,14 @@ ReactDOM.render(
     duration:164.211519
     musicSrc:"http://so1.111ttt.com:8282/2016/1/12m/10/205101300290.m4a?tflag=1502850639pin=13888f2d75f5f6229a8a3e818f09d195&ip=118.116.109.58#.mp3"
     name:"Canon (piano version)"
-    volume:100
+    volume:100,
+    muted:false,
+    networkState:1,
+    readyState:4,
+    paused:false,
+    ended:false,
+    startDate:null,
+    played:{length:1}
 }
 ```
 
@@ -209,12 +219,6 @@ ReactDOM.render(
     theme: PropTypes.oneOf(['dark', 'light']),
     mode: PropTypes.oneOf(['mini', 'full']),
     drag: PropTypes.bool,
-    name: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.object
-    ]),
-    cover: PropTypes.string.isRequired,
-    musicSrc: PropTypes.string.isRequired,
     playModeText: PropTypes.object,
     closeText: PropTypes.oneOfType([
       PropTypes.string,
@@ -232,7 +236,10 @@ ReactDOM.render(
       PropTypes.string,
       PropTypes.object
     ]),
-    defaultPosition: PropTypes.object,
+    defaultPosition: PropTypes.shape({
+      top: PropTypes.number,
+      left: PropTypes.number
+    }),
     audioPlay: PropTypes.func,
     audioPause: PropTypes.func,
     audioEnded: PropTypes.func,
@@ -249,6 +256,8 @@ ReactDOM.render(
     showThemeSwitch: PropTypes.bool,
     showMiniModeCover: PropTypes.bool,
     toggleMode: PropTypes.bool,
+    once: PropTypes.bool,
+    extendsContent: PropTypes.array,
     checkedText: PropTypes.oneOfType([
       PropTypes.string,
       PropTypes.object

diff --git a/assets/dark-theme.png → assetsImg/dark-theme.png b/assets/dark-theme.png → assetsImg/dark-theme.png
diff --git a/assets/example.gif → assetsImg/example.gif b/assets/example.gif → assetsImg/example.gif
diff --git a/assets/light-theme.png → assetsImg/light-theme.png b/assets/light-theme.png → assetsImg/light-theme.png
diff --git a/assets/mobile.jpg → assetsImg/mobile.jpg b/assets/mobile.jpg → assetsImg/mobile.jpg
diff --git a/example/dist/build.js b/example/dist/build.js