Merge pull request #257 from SkinyMonkey/feature-loop_on_fly

Loop when player is running
cookpete · Oct 24, 2017 · abd2096 · abd2096
1 parent 633aa39
commit abd2096
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 4 deletions.
diff --git a/src/ReactPlayer.js b/src/ReactPlayer.js
@@ -50,6 +50,7 @@ export default class ReactPlayer extends Component {
     return (
       this.props.url !== nextProps.url ||
       this.props.playing !== nextProps.playing ||
+      this.props.loop !== nextProps.loop ||
       this.props.volume !== nextProps.volume ||
       this.props.muted !== nextProps.muted ||
       this.props.playbackRate !== nextProps.playbackRate ||

diff --git a/src/demo/App.js b/src/demo/App.js
@@ -26,7 +26,8 @@ export default class App extends Component {
     played: 0,
     loaded: 0,
     duration: 0,
-    playbackRate: 1.0
+    playbackRate: 1.0,
+    loop: false
   }
   load = url => {
     this.setState({
@@ -41,6 +42,9 @@ export default class App extends Component {
   stop = () => {
     this.setState({ url: null, playing: false })
   }
+  toggleLoop = () => {
+    this.setState({ loop: !this.state.loop })
+  }
   setVolume = e => {
     this.setState({ volume: parseFloat(e.target.value) })
   }
@@ -97,7 +101,7 @@ export default class App extends Component {
   }
   render () {
     const {
-      url, playing, volume, muted,
+      url, playing, volume, muted, loop,
       played, loaded, duration,
       playbackRate,
       soundcloudConfig,
@@ -119,6 +123,7 @@ export default class App extends Component {
               height='100%'
               url={url}
               playing={playing}
+              loop={loop}
               playbackRate={playbackRate}
               volume={volume}
               muted={muted}
@@ -132,7 +137,7 @@ export default class App extends Component {
               onPause={this.onPause}
               onBuffer={() => console.log('onBuffer')}
               onSeek={e => console.log('onSeek', e)}
-              onEnded={() => this.setState({ playing: false })}
+              onEnded={() => this.setState({ playing: loop })}
               onError={e => console.log('onError', e)}
               onProgress={this.onProgress}
               onDuration={duration => this.setState({ duration })}
@@ -172,6 +177,13 @@ export default class App extends Component {
                 </label>
               </td>
             </tr>
+            <tr>
+              <td>
+                <label>
+                  <input type='checkbox' checked={loop} onChange={this.toggleLoop} /> Loop
+                </label>
+              </td>
+            </tr>
             <tr>
               <th>Played</th>
               <td><progress max={1} value={played} /></td>

diff --git a/src/players/Base.js b/src/players/Base.js
@@ -50,7 +50,8 @@ export default class Base extends Component {
     }
   }
   shouldComponentUpdate (nextProps) {
-    return this.props.url !== nextProps.url
+    return this.props.url !== nextProps.url ||
+           this.props.loop !== nextProps.loop
   }
   callPlayer (method, ...args) {
     // Util method for calling a method on this.player