[5.4.3] Optimization: giving a fake currentTime while sliding playing progress

Author: kirainmoe

dist/assets/muse-player-preact.js

@@ -1,6 +1,6 @@
 {
   "name": "muse-player",
-  "version": "5.4.2",
+  "version": "5.4.3",
   "description": "Just a simple and dilligent HTML5 Audio Player written in React.",
   "main": "dist/assets/muse-player.js",
   "scripts": {

dist/assets/muse-player-react-lite.js

@@ -17,6 +17,7 @@ class Progress extends Component {
   };
 
   id = undefined;
+  finalProgress = undefined;
 
   constructor(props) {
     super(props);
@@ -56,9 +57,13 @@ class Progress extends Component {
     const rect = getRect(this.progress),
       target = event.clientX,
       width = this.progress.offsetWidth;
-    this.props.store.slideProgress(Number((target - rect.left) / width * duration));
+
+    this.finalProgress = Math.max(Number((target - rect.left) / width * duration), 0);
+    this.props.store.slideTimeOnly(this.finalProgress);
   };
   onHandlerMouseUp = () => {
+    this.props.store.slideProgress(this.finalProgress);
+
     document.body.removeEventListener('mousemove', this.onHandlerDrag);
     document.body.removeEventListener('mouseup', this.onHandlerMouseUp);
   };
@@ -72,9 +77,12 @@ class Progress extends Component {
     const rect = getRect(this.progress),
       target = event.touches[0].clientX,
       width = this.progress.offsetWidth;
-    this.props.store.slideProgress(Number((target - rect.left) / width * duration));
+      
+    this.finalProgress = Math.max(Number((target - rect.left) / width * duration), 0);
+    this.props.store.slideTimeOnly(this.finalProgress);
   };
   onHandlerTouchEnd = () => {
+    this.props.store.slideProgress(this.finalProgress);
     document.body.removeEventListener('touchmove', this.onHandlerTouchMove);
     document.body.removeEventListener('touchend', this.onHandlerMouseUp);
   };

dist/assets/muse-player.js

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

dist/example.js

@@ -22,9 +22,9 @@ export default class ControlContainer extends Component {
 
   /* store subscribers */
   subscriber = () => {
-    const { store } = this.props,
+    const { store, parent } = this.props,
       { audio } = this,
-      { currentTime, volume, playRate } = store;
+      { currentTime, timeSlider, volume, playRate } = store;
     // toggle play
     if (!audio.paused != store.isPlaying) {
       if (store.isPlaying) {
@@ -35,9 +35,21 @@ export default class ControlContainer extends Component {
       return;
     }
     // slide progress
+    if (timeSlider != undefined) {
+      // remove listener
+      this.audio.removeEventListener('timeupdate', this.onAudioTimeUpdate);
+      // update parent state with a virtual ptime
+      parent.setState({
+        ...parent.state,
+        currentTime: timeSlider
+      });
+      store.slideTimeOnly(undefined);
+    }
     if (currentTime != undefined) {
       audio.currentTime = currentTime;
       store.slideProgress(undefined); // reset state
+      // rebind listener
+      this.audio.addEventListener('timeupdate', this.onAudioTimeUpdate);
     }
     // change volume
     audio.volume = volume;

package.json

@@ -15,6 +15,7 @@ export default class PlayerModel {
 	@observable playRate = 1;
 	@observable duration = undefined;
 	@observable currentTime = 0;
+	@observable timeSlider = undefined;
 	@observable currentPanel = 'lyric';
 
 	@observable currentMusicIndex = 0;
@@ -109,6 +110,11 @@ export default class PlayerModel {
 		return (this.currentTime = progress);
 	}
 
+	@action
+	slideTimeOnly(progress) {
+		return (this.timeSlider = progress);
+	}
+
 	@action
 	setCurrentMusic(index) {
 		this.currentMusicIndex = index;