fix: cannot custom progress bar background color

lijinke666 · May 28, 2020 · 9205b92 · 9205b92
1 parent 0839a45
commit 9205b92
Show file tree

Hide file tree

Showing 9 changed files with 264 additions and 173 deletions.
diff --git a/__tests__/tests/__snapshots__/locale.test.js.snap b/__tests__/tests/__snapshots__/locale.test.js.snap
@@ -196,6 +196,11 @@ exports[`Locale test should render default locale with en_US 1`] = `
               </span>
             </div>
           </div>
+          <div
+            class="play-mode-title"
+          >
+            Play in order
+          </div>
           <audio
             class="music-player-audio"
             src=""
@@ -528,6 +533,16 @@ exports[`Locale test should render default locale with en_US 1`] = `
           </div>
         </div>
       </AudioListsPanel>
+      <PlayModel
+        value="Play in order"
+        visible={false}
+      >
+        <div
+          className="play-mode-title"
+        >
+          Play in order
+        </div>
+      </PlayModel>
       <audio
         className="music-player-audio"
         src=""
@@ -734,6 +749,11 @@ exports[`Locale test should render locale with zh_CN 1`] = `
               </span>
             </div>
           </div>
+          <div
+            class="play-mode-title"
+          >
+            Play in order
+          </div>
           <audio
             class="music-player-audio"
             src=""
@@ -887,6 +907,11 @@ exports[`Locale test should render locale with zh_CN 1`] = `
               </span>
             </div>
           </div>
+          <div
+            class="play-mode-title"
+          >
+            顺序播放
+          </div>
           <audio
             class="music-player-audio"
             src=""
@@ -1219,6 +1244,16 @@ exports[`Locale test should render locale with zh_CN 1`] = `
           </div>
         </div>
       </AudioListsPanel>
+      <PlayModel
+        value="顺序播放"
+        visible={false}
+      >
+        <div
+          className="play-mode-title"
+        >
+          顺序播放
+        </div>
+      </PlayModel>
       <audio
         className="music-player-audio"
         src=""

diff --git a/__tests__/tests/__snapshots__/player.test.js.snap b/__tests__/tests/__snapshots__/player.test.js.snap
@@ -177,6 +177,11 @@ exports[`<ReactJkMusicPlayer/> should render a <ReactJkMusicPlayer/> components
               </span>
             </div>
           </div>
+          <div
+            class="play-mode-title"
+          >
+            Play in order
+          </div>
           <audio
             class="music-player-audio"
             src=""
@@ -479,6 +484,16 @@ exports[`<ReactJkMusicPlayer/> should render a <ReactJkMusicPlayer/> components
           </div>
         </div>
       </AudioListsPanel>
+      <PlayModel
+        value="Play in order"
+        visible={false}
+      >
+        <div
+          className="play-mode-title"
+        >
+          Play in order
+        </div>
+      </PlayModel>
       <audio
         className="music-player-audio"
         src=""

diff --git a/example/webpack.config.js b/example/webpack.config.js
@@ -18,7 +18,14 @@ module.exports = () => {
   const isDev = process.env.NODE_ENV === 'development'
   const options = {
     mode: process.env.NODE_ENV,
-    entry: ['react-hot-loader/patch', path.join(__dirname, '../example')],
+    entry: isDev
+      ? [
+          'react-hot-loader/patch',
+          `webpack-dev-server/client?http://${HOST}:${PORT}`,
+          'webpack/hot/only-dev-server',
+          path.join(__dirname, '../example'),
+        ]
+      : path.join(__dirname, '../example'),
     output: {
       path: path.join(__dirname, '../example/dist'),
       filename: '[name].[hash:8].js',
@@ -48,6 +55,10 @@ module.exports = () => {
               loader: 'less-loader',
               options: {
                 sourceMap: isDev,
+                // modifyVars: {
+                //   'primary-color': 'red',
+                // },
+                // javascriptEnabled: true,
               },
             },
           ],
@@ -75,7 +86,7 @@ module.exports = () => {
         },
       ],
     },
-    devtool: isDev ? 'source-map' : false,
+    devtool: isDev ? 'nosources-source-map' : false,
     //自动补全后缀
     resolve: {
       enforceExtension: false,
@@ -92,7 +103,7 @@ module.exports = () => {
       inline: true,
       port: PORT,
       historyApiFallback: true,
-      hotOnly: true,
+      hot: true,
       stats: {
         color: true,
         errors: true,

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-jinke-music-player",
-  "version": "4.13.1",
+  "version": "4.14.0",
   "description": "Maybe the best beautiful HTML5 responsive player component for react",
   "main": "lib/index.js",
   "module": "es/index.js",

diff --git a/src/config/slider.js b/src/config/slider.js
@@ -1,6 +1,4 @@
 export const sliderBaseOptions = {
   min: 0,
   step: 0.01,
-  trackStyle: { backgroundColor: "#31c27c" },
-  handleStyle: { backgroundColor: "#31c27c", border: "2px solid #fff" },
 };
diff --git a/src/index.js b/src/index.js
@@ -1,5 +1,5 @@
 /**
- * @version 4.13.1
+ * @version 4.14.0
  * @name react-jinke-music-player
  * @description Maybe the best beautiful HTML5 responsive player component for react :)
  * @author Jinke.Li <[email protected]>
@@ -1481,7 +1481,8 @@ export default class ReactJkMusicPlayer extends PureComponent {
       0,
       Math.min(audioLists.length, this.props.defaultPlayIndex)
     );
-    const playId = this.state.playId || audioLists[playIndex].id;
+    const playId =
+      this.state.playId || (audioLists[playIndex] && audioLists[playIndex].id);
     return playId;
   };
 

diff --git a/src/styles/index.less b/src/styles/index.less
@@ -130,6 +130,8 @@
       overflow: hidden;
       .center();
 
+      .overwrite-progress-bar();
+
       .img-content {
         width: 50px;
         height: 50px;