fix: cannot show audio info if audio list is empty by appendAudio #146

lijinke666 · Aug 28, 2020 · 2c225da · 2c225da
1 parent c608cea
commit 2c225da
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 31 deletions.
diff --git a/.babelrc.js b/.babelrc.js
@@ -1,6 +1,19 @@
 const env = process.env.BABEL_ENV || process.env.NODE_ENV
 const outputModule = process.env.OUTPUT_MODULE
 
+const plugins = [
+  '@babel/plugin-proposal-object-rest-spread',
+  '@babel/plugin-proposal-class-properties',
+]
+
+if (env === 'test') {
+  plugins.push('@babel/plugin-transform-modules-commonjs', '@babel/plugin-transform-runtime')
+}
+
+if (env === 'development') {
+  plugins.push('react-hot-loader/babel')
+}
+
 module.exports = {
   presets: [
     [
@@ -11,10 +24,5 @@ module.exports = {
     ],
     '@babel/preset-react',
   ],
-  plugins: [
-    '@babel/plugin-proposal-object-rest-spread',
-    '@babel/plugin-proposal-class-properties',
-    env === 'test' && '@babel/plugin-transform-modules-commonjs',
-    env === 'development' && 'react-hot-loader/babel',
-  ].filter(Boolean),
+  plugins: plugins.filter(Boolean),
 }
diff --git a/README.md b/README.md
@@ -246,7 +246,7 @@ class App extends React.Component {
         </button>
         <button
           onClick={() =>
-            this.audio.appendAudio(1, [{ musicSrc: 'x', name: 'xx' }])
+            this.audio.appendAudio(1, [{ musicSrc: 'x', name: 'xx', singer: 'xx }])
           }
         >
           append audio

diff --git a/example/example.js b/example/example.js
@@ -7,8 +7,8 @@ import { name, repository, version } from '../package.json'
 import ReactJkMusicPlayer from '../src'
 import Locale from '../src/config/locale'
 import PLAY_MODE from '../src/config/playMode'
-import { createRandomNum } from '../src/utils'
 import '../src/styles/index.less'
+import { createRandomNum } from '../src/utils'
 import './example.less'
 
 const audioList1 = [
@@ -122,7 +122,7 @@ const options = {
   // playMode: 'order',
 
   // audio mode        mini | full          [type `String`  default `mini`]
-  mode: 'mini',
+  mode: 'full',
 
   /**
    * [ type `Boolean` default 'false' ]
@@ -270,9 +270,7 @@ const options = {
   // },
 
   onAudioListsChange(currentPlayId, audioLists, audioInfo) {
-    console.log('[currentPlayId] audio lists change:', currentPlayId)
-    console.log('[audioLists] audio lists change:', audioLists)
-    console.log('[audioInfo] audio lists change:', audioInfo)
+    console.log('audio lists change:', currentPlayId, audioLists, audioInfo)
   },
 
   onAudioPlayTrackChange(currentPlayId, audioLists, audioInfo) {
@@ -579,7 +577,14 @@ class Demo extends React.PureComponent {
         <button
           type="button"
           onClick={() => {
-            this.audio.appendAudio(1, audioList2)
+            this.audio.appendAudio(0, [
+              {
+                name: 'name',
+                singer: 'signer',
+                musicSrc:
+                  'http://podcasts.protocol-radio.com/podcast/protocol-radio-331.m4a',
+              },
+            ])
           }}
         >
           append audio

diff --git a/package.json b/package.json
@@ -105,7 +105,7 @@
     "@babel/plugin-syntax-dynamic-import": "7.8.3",
     "@babel/plugin-syntax-object-rest-spread": "7.8.3",
     "@babel/plugin-transform-object-assign": "7.10.4",
-    "@babel/plugin-transform-runtime": "7.11.0",
+    "@babel/plugin-transform-runtime": "^7.11.0",
     "@babel/preset-env": "7.11.0",
     "@babel/preset-react": "^7.10.4",
     "@babel/runtime": "7.11.2",
@@ -153,7 +153,7 @@
     "less": "^3.12.2",
     "less-loader": "^7.0.0",
     "lint-staged": "^10.2.13",
-    "mini-css-extract-plugin": "^0.10.0",
+    "mini-css-extract-plugin": "^0.11.0",
     "open-browser-webpack-plugin": "0.0.5",
     "optimize-css-assets-webpack-plugin": "^5.0.3",
     "postcss": "^7.0.32",

diff --git a/src/index.js b/src/index.js
@@ -5,13 +5,13 @@
  * @license MIT
  */
 
-import React, { PureComponent, createRef, cloneElement } from 'react'
-import { createPortal } from 'react-dom'
 import cls from 'classnames'
 import download from 'downloadjs'
 import getIsMobile from 'is-mobile'
 import Slider from 'rc-slider/lib/Slider'
 import Switch from 'rc-switch'
+import React, { cloneElement, createRef, PureComponent } from 'react'
+import { createPortal } from 'react-dom'
 import Draggable from 'react-draggable'
 import AudioListsPanel from './components/AudioListsPanel'
 import CircleProcessBar from './components/CircleProcessBar'
@@ -22,6 +22,7 @@ import {
   DeleteIcon,
   DownloadIcon,
   FaMinusSquareOIcon,
+  LoadIcon,
   LoopIcon,
   LyricIcon,
   MdVolumeDownIcon,
@@ -33,9 +34,7 @@ import {
   ReloadIcon,
   RepeatIcon,
   ShufflePlayIcon,
-  LoadIcon,
 } from './components/Icon'
-
 import AudioPlayerMobile from './components/PlayerMobile'
 import PlayModel from './components/PlayModel'
 import { AUDIO_LIST_REMOVE_ANIMATE_TIME } from './config/animate'
@@ -1858,13 +1857,7 @@ export default class ReactJkMusicPlayer extends PureComponent {
       }
     })
     newAudioLists.splice(fromIndex, 0, ...addedAudioLists)
-    this.setState({ audioLists: newAudioLists })
-    this.props.onAudioListsChange &&
-      this.props.onAudioListsChange(
-        this.state.playId,
-        newAudioLists,
-        this.getBaseAudioInfo(),
-      )
+    this.changeAudioLists({ ...this.props, audioLists: newAudioLists })
   }
 
   getEnhanceAudio = () => {

diff --git a/yarn.lock b/yarn.lock
@@ -1031,7 +1031,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/[email protected]":
+"@babel/plugin-transform-runtime@^7.11.0":
   version "7.11.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.11.0.tgz#e27f78eb36f19448636e05c33c90fd9ad9b8bccf"
   integrity sha512-LFEsP+t3wkYBlis8w6/kmnd6Kb1dxTd+wGJ8MlxTGzQo//ehtqlVL4S9DNUa53+dtPSQobN2CXx4d81FqC58cw==
@@ -9419,10 +9419,10 @@ min-indent@^1.0.0:
   resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
   integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
 
-mini-css-extract-plugin@^0.10.0:
-  version "0.10.0"
-  resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.10.0.tgz#a0e6bfcad22a9c73f6c882a3c7557a98e2d3d27d"
-  integrity sha512-QgKgJBjaJhxVPwrLNqqwNS0AGkuQQ31Hp4xGXEK/P7wehEg6qmNtReHKai3zRXqY60wGVWLYcOMJK2b98aGc3A==
+mini-css-extract-plugin@^0.11.0:
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.11.0.tgz#3918953075109d4ca204bf1e8a393a78d3cc821f"
+  integrity sha512-dVWGuWJlQw2lZxsxBI3hOsoxg1k3DruLR0foHQLSkQMfk+qLJbv9dUk8fjmjWQKN9ef2n54ehA2FjClAsQhrWQ==
   dependencies:
     loader-utils "^1.1.0"
     normalize-url "1.9.1"