5.3.0: Use Mobx instead of Redux & Fix some bugs & Some APIs changed

README.md

@@ -20,8 +20,8 @@ Have a look at [here](https://moefront.github.io/muse/dist).
 
  - react
  - react-dom
- - redux
- - react-redux
+ - mobx
+ - mobx-react
  - stylus
 
 ## Installation
@@ -49,7 +49,8 @@ Click ```Clone or download``` then choose ```Download ZIP```, or redirect to rel
 
 ## Features
 
- - Build with React.js and Redux
+ - Build with React.js and Mobx
+ - Both Mobx version(main) & Redux version(before 5.2.7)
  - Full lyric support
  - Lyric offset fixing
  - Right-click menu is finally supported

package.json

@@ -1,6 +1,6 @@
 {
   "name": "muse-player",
-  "version": "5.2.7",
+  "version": "5.3.0",
   "description": "Just a simple and dilligent HTML5 Audio Player written in React.",
   "main": "dist/assets/muse-player.js",
   "scripts": {
@@ -77,12 +77,12 @@
     "core-js": "^2.0.0",
     "coveralls": "^2.13.1",
     "karma-chrome-launcher": "^2.2.0",
+    "mobx": "^3.2.2",
+    "mobx-react": "^4.2.2",
     "normalize.css": "^7.0.0",
     "react": "^15.0.0",
     "react-dom": "^15.0.0",
     "react-lite": "^0.15.38",
-    "react-redux": "^5.0.4",
-    "redux": "^3.6.0",
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.1",
     "webpack-bundle-analyzer": "^2.8.2"

src/components/Progress.js

@@ -1,24 +1,20 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
+import { observer } from 'mobx-react';
+
 // Utils
 import { getRect } from '../utils';
-// Actions
-import { PlayerActions } from '../actions';
 
-class Progress extends Component
-{
+@observer
+class Progress extends Component {
   static propTypes = {
-    currentTime: PropTypes.oneOfType([
-      PropTypes.number,
-      PropTypes.object
-    ]).isRequired,
-    duration: PropTypes.oneOfType([
-      PropTypes.number,
-      PropTypes.object
-    ]).isRequired,
-    dispatch: PropTypes.func.isRequired
-  }
+    currentTime: PropTypes.oneOfType([PropTypes.number, PropTypes.object])
+      .isRequired,
+    duration: PropTypes.oneOfType([PropTypes.number, PropTypes.object])
+      .isRequired,
+    store: PropTypes.object.isRequired
+  };
 
   id = undefined;
 
@@ -36,16 +32,13 @@ class Progress extends Component
   }
 
   /* event listeners */
-  onProgressBarClick = (event) => {
-    const { duration, dispatch } = this.props;
+  onProgressBarClick = event => {
+    const { duration } = this.props;
     const rect = getRect(this.progress),
-          target = event.clientX,
-          width = this.progress.offsetWidth;
-    dispatch(PlayerActions.slideProgress(
-      ((target - rect.left) / width) * duration,
-      this.id
-    ));
-  }
+      target = event.clientX,
+      width = this.progress.offsetWidth;
+    this.props.store.slideProgress(Number((target - rect.left) / width * duration));
+  };
 
   /**
    * 进度条拖拽相关事件
@@ -57,68 +50,58 @@ class Progress extends Component
   onHandlerMouseDown = () => {
     document.body.addEventListener('mousemove', this.onHandlerDrag);
     document.body.addEventListener('mouseup', this.onHandlerMouseUp);
-  }
-  onHandlerDrag = (event) => {
-    const { duration, dispatch } = this.props;
+  };
+  onHandlerDrag = event => {
+    const { duration } = this.props;
     const rect = getRect(this.progress),
-          target = event.clientX,
-          width = this.progress.offsetWidth;
-    dispatch(PlayerActions.slideProgress(
-      ((target - rect.left) / width) * duration,
-      this.id
-    ));
-  }
+      target = event.clientX,
+      width = this.progress.offsetWidth;
+    this.props.store.slideProgress(Number((target - rect.left) / width * duration));
+  };
   onHandlerMouseUp = () => {
     document.body.removeEventListener('mousemove', this.onHandlerDrag);
     document.body.removeEventListener('mouseup', this.onHandlerMouseUp);
-  }
+  };
 
   onHandlerTouchStart = () => {
     document.body.addEventListener('touchmove', this.onHandlerTouchMove);
     document.body.addEventListener('touchend', this.onHandlerTouchEnd);
-  }
+  };
   onHandlerTouchMove = () => {
-    const { duration, dispatch } = this.props;
+    const { duration } = this.props;
     const rect = getRect(this.progress),
-          target = event.touches[0].clientX,
-          width = this.progress.offsetWidth;
-    dispatch(PlayerActions.slideProgress(
-      ((target - rect.left) / width) * duration,
-      this.id
-    ));
-  }
+      target = event.touches[0].clientX,
+      width = this.progress.offsetWidth;
+    this.props.store.slideProgress(Number((target - rect.left) / width * duration));
+  };
   onHandlerTouchEnd = () => {
     document.body.removeEventListener('touchmove', this.onHandlerTouchMove);
     document.body.removeEventListener('touchend', this.onHandlerMouseUp);
-  }
+  };
 
   render() {
     const { currentTime, duration } = this.props;
 
     return (
-      <div
-        className={ 'muse-progress' }
-        ref={ ref => this.progress = ref }
-      >
-        <div className={ 'muse-progress__container' }>
+      <div className={'muse-progress'} ref={ref => (this.progress = ref)}>
+        <div className={'muse-progress__container'}>
           <div
-            className={ 'muse-progress__played' }
+            className={'muse-progress__played'}
             style={{
-              width: (duration == 0 ? '0%' : (100 * currentTime / duration) + '%')
+              width: duration == 0 ? '0%' : 100 * currentTime / duration + '%'
             }}
           >
             <span
-              className={ 'muse-progress__handle' }
-              ref={ ref => this.handler = ref }
-
-              onMouseDown={ this.onHandlerMouseDown }
-              onTouchStart={ this.onHandlerTouchStart }
-            ></span>
+              className={'muse-progress__handle'}
+              ref={ref => (this.handler = ref)}
+              onMouseDown={this.onHandlerMouseDown}
+              onTouchStart={this.onHandlerTouchStart}
+            />
           </div>
         </div>
       </div>
     );
   }
 }
 
-export default Progress;
+export default Progress;

src/config/base.js

@@ -2,5 +2,5 @@
 
 // Settings configured here will be merged into the final config object.
 export default {
-	MUSE_VERSION: '5.2.7'
+	MUSE_VERSION: '5.3.0'
 }

src/containers/ControlContainer.js

@@ -1,17 +1,20 @@
 import React, { Component } from 'react';
-import { connect } from 'react-redux';
+import { PropTypes } from 'prop-types';
+
+import {  autorun } from 'mobx';
+import { observer } from 'mobx-react';
 // icons
 import { PlayButton, PauseButton } from '../sources/icons';
-// actions
-import { PlayerActions } from '../actions/';
-
-@connect(
-  state => ({
-    player: state.player
-  })
-)
+
+@observer
 export default class ControlContainer extends Component
 {
+  static propTypes = {
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+      .isRequired,
+    store: PropTypes.object.isRequired
+  };
+
   id = undefined;
 
   constructor(props) {
@@ -21,35 +24,32 @@ export default class ControlContainer extends Component
 
   /* store subscribers */
   subscriber = () => {
-    const { store } = this.props;
-    const state = store.getState().player[this.id],
-          { dispatch } = this.props,
-          { audio } = this;
-
+    const { store } = this.props,
+      { audio } = this,
+      { currentTime, volume } = store;
     // toggle play
-    if (!audio.paused != state.isPlaying) {
-      if (state.isPlaying) {
-        setTimeout(() => audio.play(), 0);
+    if (!audio.paused != store.isPlaying) {
+      if (store.isPlaying) {
+        audio.play();
       } else {
-        setTimeout(() => audio.pause(), 0);
+        audio.pause();
       }
       return;
     }
-
     // slide progress
-    if (state.currentTime != undefined) {
-      audio.currentTime = state.currentTime;
-      dispatch(PlayerActions.slideProgress(undefined, this.id)); // reset state
+    if (currentTime != undefined) {
+      audio.currentTime = currentTime;
+      store.slideProgress(undefined); // reset state
     }
 
     // change volume
-    audio.volume = state.volume;
+    audio.volume = volume;
   }
   unsubscriber = undefined
 
   /* component life cycles */
-  componentWillMount() {
-    this.unsubscriber = this.props.store.subscribe(this.subscriber);
+  componentDidMount() {
+    this.unsubscriber = autorun(this.subscriber);
   }
 
   componentWillUnmount() {
@@ -58,17 +58,16 @@ export default class ControlContainer extends Component
 
   /* event listeners */
   onControllerClick = () => {
-    const { playerLayout, isDrawerOpen } = this.props.player[this.id],
-          { dispatch } = this.props;
+    const { playerLayout } = this.props.store,
+          { store } = this.props;
     if (playerLayout == 'muse-layout-landscape') {
-      dispatch(PlayerActions.toggleDrawer(!isDrawerOpen, this.id));
+      store.toggleDrawer();
     }
   }
 
   onPlayBtnClick = () => {
-    const { dispatch } = this.props,
-          { isPlaying } = this.props.player[this.id];
-    dispatch(PlayerActions.togglePlay(!isPlaying, this.id));
+    const { store } = this.props;
+    store.togglePlay();
   }
 
   onAudioTimeUpdate = () => {
@@ -83,18 +82,16 @@ export default class ControlContainer extends Component
   }
 
   onAudioEnded = (proxy, e, specialCheck = false) => {
-    const { isLoop, currentMusicIndex, playList } = this.props.player[this.id],
-          { dispatch } = this.props;
+    const { store } = this.props,
+      { isLoop, currentMusicIndex, playList } = store;
 
     // check loop
     if ((specialCheck || !isLoop) && playList.length-1 > currentMusicIndex) {
-      dispatch(PlayerActions.togglePlay(false, this.id));
-      dispatch(PlayerActions.setCurrentMusic(currentMusicIndex + 1, this.id));
-      setTimeout(() => dispatch(PlayerActions.togglePlay(true, this.id)), 10);
+      store.setCurrentMusic(currentMusicIndex + 1);
     } else if (!specialCheck && isLoop) {
-      dispatch(PlayerActions.slideProgress(0, this.id));
+      store.slideProgress(0);
     } else {
-      dispatch(PlayerActions.playerStop(this.id));
+      store.playerStop();
     }
   }
 
@@ -103,7 +100,7 @@ export default class ControlContainer extends Component
   }
 
   render() {
-    const { isPlaying, playList, currentMusicIndex } = this.props.player[this.id];
+    const { isPlaying, playList, currentMusicIndex } = this.props.store;
     const current = playList[currentMusicIndex];
 
     return (