Merge pull request #6 from lijinke666/feature-multiple-music

Feature multiple music

README.md

@@ -38,26 +38,32 @@ import FaHeadphones from "react-icons/lib/fa/headphones"
 const options = {
     //color of the music player theme    [ type `string: 'light' or 'drak'  ` default 'drak' ]
     theme:"drak",
-
-    //audio mode        mini | full          [type `String`  default `mini`]  
-    mode: "mini",
-
-    //audio controller is can be drag of the "mini" mode
-    drag: true,
 
     //audio controller initial position    [ type `Object` default '{top:0,left:0}' ]
     defaultPosition:{
         top:120,
         left:120
     },
 
-    //audio controller open text  [ type `String` default 'open']
+    //audio controller open text  [ type `String | ReactNode` default 'open']
     openText: "OPEN",
 
-    //audio controller close text  [ type `String` default 'close']
+    //audio controller close text  [ type `String | ReactNode` default 'close']
     closeText: "CLOSE",
 
-    //audio name     [type `String | ReactNode`  default `name`]
+    //audio theme switch checkedText  [ type `String | ReactNode` default '-']
+    checkedText:"开",
+
+    //audio theme switch unCheckedText [ type `String | ReactNode` default '-']
+    unCheckedText:"关",
+
+    //audio mode        mini | full          [type `String`  default `mini`]  
+    mode: "mini",
+
+    //audio controller is can be drag of the "mini" mode
+    drag: true,
+
+    //audio name     [type `String | ReactNode `  default `name`]
     name: "Canon (piano version)",
 
     //audio controller title [type `String | ReactNode`  default <FaHeadphones/>]
@@ -81,6 +87,9 @@ const options = {
     //loop button display of the audio player panel   [type `Boolean` default `true`]
     showLoop: true,
 
+    //theme toogle switch  display of the audio player panel   [type `Boolean` default `true`]
+    showThemeSwitch:true,
+
     //Music is downloaded handle
     audioDowload(audioName, audioSrc) {
         console.log('audio dowload', audioName, audioSrc);
@@ -108,7 +117,7 @@ const options = {
 
     //audio play progress handle
     audioProgress(currentTime, duration) {
-        console.log(currentTime,duration);
+        console.log('audio progress',currentTime,duration);
     },
 
     //audio load faild error handle
@@ -118,12 +127,13 @@ const options = {
 }
 
 const Demo = () => (
-        <ReactJkMusicPlayer {...options} />
+    <ReactJkMusicPlayer {...options} />
 )
 ReactDOM.render(
     <Demo />,
     document.getElementById('root')
 )
 
 
+
 ```

example/example.js

@@ -22,6 +22,12 @@ const options = {
     //audio controller close text  [ type `String | ReactNode` default 'close']
     closeText: "CLOSE",
 
+    //audio theme switch checkedText  [ type `String | ReactNode` default '-']
+    checkedText:"开",
+
+    //audio theme switch unCheckedText [ type `String | ReactNode` default '-']
+    unCheckedText:"关",
+
     //audio mode        mini | full          [type `String`  default `mini`]  
     mode: "mini",
 
@@ -52,6 +58,9 @@ const options = {
     //loop button display of the audio player panel   [type `Boolean` default `true`]
     showLoop: true,
 
+    //theme toogle switch  display of the audio player panel   [type `Boolean` default `true`]
+    showThemeSwitch:true,
+
     //Music is downloaded handle
     audioDowload(audioName, audioSrc) {
         Message.success({ content: audioName })
@@ -81,7 +90,7 @@ const options = {
 
     //audio play progress handle
     audioProgress(currentTime, duration) {
-        console.log(currentTime,duration);
+        // console.log('audio progress',currentTime,duration);
     },
 
     //audio load faild error handle
@@ -93,7 +102,7 @@ const options = {
 
 const Demo = () => (
     <div>
-        <h2 className="title">Click or Drag to try</h2>
+        <h2 className="example-title">Click or Drag to try</h2>
         <ReactJkMusicPlayer {...options} />
     </div>
 )

example/example.less

@@ -9,7 +9,7 @@ body{
     background: #C8C8A9;
     overflow:hidden;
 }
-h2.title{
+h2.example-title{
     padding: 40px;
     font-weight: 500
 }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-jinke-music-player",
-  "version": "2.2.2",
-  "description":"A beautiful and responsive react music player component",
+  "version": "2.4.0",
+  "description": "A beautiful and responsive react music player component",
   "main": "src/index.js",
   "scripts": {
     "start": "npm run demo",
@@ -30,6 +30,7 @@
     "classnames": "^2.2.5",
     "is-mobile": "^0.2.2",
     "rc-slider": "^8.3.1",
+    "rc-switch": "^1.5.2",
     "react": "15.x",
     "react-dom": "15.x",
     "react-icons": "^2.2.5"

src/audioListsPanel.js

@@ -0,0 +1,52 @@
+import React from "react"
+import CloseBtn from "react-icons/lib/md/close"
+import NotContent from "react-icons/lib/md/library-music"
+import PlayIcon from "react-icons/lib/md/play-arrow"
+import PauseIcon from "react-icons/lib/md/pause"
+import classNames from "classnames"
+
+const AudioListsPanel = ({ 
+    audioLists, 
+    visible, 
+    notContentText, 
+    onCancel
+ }) => (
+    <div
+      className={classNames("audio-lists-panel", { "show": visible })} key="audio-list-panel"
+    >
+      <div className="audio-lists-panel-header">
+        <h2 className="title">
+          <span>播放列表/</span>
+          <span className="num" key="num">{audioLists.length}</span>
+          <span className="close-btn" onClick={onCancel}><CloseBtn /></span>
+        </h2>
+      </div>
+      <div 
+        className={classNames("audio-lists-panel-content",{"no-content":audioLists.length < 1}) } 
+        key="audio-lists-panel-content"
+      >
+        {
+          audioLists.length >= 1
+            ? <ul>
+                {
+                    audioLists.map((audio,i)=>{
+                        return (
+                            <li className="audio-item" key={i}>
+                                <span className="group player-status" key="player-status"><PlayIcon/></span>
+                                <span className="group player-name">消愁</span>
+                                <span className="group player-time">02:89</span>     
+                            </li>
+                        )
+                    })
+                }
+            </ul>
+            : <div>
+              <span><NotContent /></span>
+              <span className="no-data" key="no-data">{notContentText}</span>
+            </div>
+        }
+      </div>
+    </div>
+  )
+
+  export default AudioListsPanel