allow each vendor to handle looping

souporserious · Feb 21, 2017 · 1fe7d17 · 1fe7d17
1 parent 3d4805c
commit 1fe7d17
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 25 deletions.
diff --git a/example/index.jsx b/example/index.jsx
@@ -122,7 +122,7 @@ class MediaApp extends Component {
     volume:         1,
     fullscreen:     false,
     loop:           false,
-    playbackRate:   0.5,
+    playbackRate:   1,
     useAudioObject: false,
   }
 
@@ -136,8 +136,8 @@ class MediaApp extends Component {
       <div>
         <Player
           src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
-          // src="http://a1083.phobos.apple.com/us/r1000/014/Music/v4/4e/44/b7/4e44b7dc-aaa2-c63b-fb38-88e1635b5b29/mzaf_1844128138535731917.plus.aac.p.m4a"
-          // src="http://www.youtube.com/embed/h3YVKTxTOgU"
+          src="http://a1083.phobos.apple.com/us/r1000/014/Music/v4/4e/44/b7/4e44b7dc-aaa2-c63b-fb38-88e1635b5b29/mzaf_1844128138535731917.plus.aac.p.m4a"
+          src="http://www.youtube.com/embed/h3YVKTxTOgU"
           // src="https://player.vimeo.com/video/156147818"
           currentTime={currentTime}
           playing={playing}
@@ -160,7 +160,6 @@ class MediaApp extends Component {
         />
 
         <div>
-          <h3>Controls</h3>
           <button onClick={this.playPause}>
             { playing ? 'Pause' : 'Play' }
           </button>

diff --git a/src/Player.jsx b/src/Player.jsx
@@ -57,14 +57,6 @@ class Player extends Component {
       screenfull.raw.fullscreenchange,
       this._handleFullscreenChange
     )
-
-    if (this.props.currentTime !== 0) {
-      this.seekTo(this.props.currentTime)
-    }
-
-    if (this._player.setPlaybackRate) {
-      this._player.setPlaybackRate(this.props.playbackRate)
-    }
   }
 
   componentWillReceiveProps(nextProps) {
@@ -96,6 +88,10 @@ class Player extends Component {
       this._player.setPlaybackRate(nextProps.playbackRate)
     }
 
+    if (this.props.loop !== nextProps.loop) {
+      this._player.setLoop(nextProps.loop)
+    }
+
     if (this.props.fullscreen !== nextProps.fullscreen) {
       if (nextProps.fullscreen) {
         screenfull.request(this._player.getNode())
@@ -132,6 +128,15 @@ class Player extends Component {
     if (this.props.autoPlay) {
       this._player.play()
     }
+
+    if (this.props.currentTime !== 0) {
+      this.seekTo(this.props.currentTime)
+    }
+
+    if (this._player.setPlaybackRate) {
+      this._player.setPlaybackRate(this.props.playbackRate)
+    }
+
     this.props.onReady(e)
   }
 
@@ -145,14 +150,6 @@ class Player extends Component {
     this.props.onVolumeChange(volume)
   }
 
-  _handleEnded = (e) => {
-    if (this.props.loop) {
-      this._player.seekTo(0)
-      this._player.play()
-    }
-    this.props.onEnded(e)
-  }
-
   render() {
     const { src } = this.props
     const { vendor, component } = getVendor(src, this.props.vendor)
@@ -167,7 +164,6 @@ class Player extends Component {
       onReady:        this._handleReady,
       onTimeUpdate:   this._handleTimeUpdate,
       onVolumeChange: this._handleVolumeChange,
-      onEnded:        this._handleEnded,
     })
   }
 }

diff --git a/src/vendors/HTML5.jsx b/src/vendors/HTML5.jsx
@@ -35,6 +35,10 @@ class HTML5 extends Component {
     this._player.playbackRate = rate
   }
 
+  setLoop(loop) {
+    this._player.loop = loop
+  }
+
   getNode() {
     return findDOMNode(this._player)
   }
@@ -85,7 +89,6 @@ class HTML5 extends Component {
     const props = specialAssign({
       ref:              c => this._player = c,
       src:              this.props.src,
-      loop:             this.props.loop,
       onCanPlay:        this._handleCanPlay,
       onPlay:           this._handlePlay,
       onPause:          this._handlePause,

diff --git a/src/vendors/Vimeo.jsx b/src/vendors/Vimeo.jsx
@@ -57,6 +57,10 @@ class Vimeo extends Component {
     this._player.setVolume(volume)
   }
 
+  setLoop(loop) {
+    this._player.setLoop(loop)
+  }
+
   getNode() {
     return this._player.element
   }

diff --git a/src/vendors/Youtube.jsx b/src/vendors/Youtube.jsx
@@ -83,7 +83,7 @@ class Youtube extends Component {
         this.props.onReady()
       },
       onStateChange: ({ data }) => {
-        const { PLAYING, PAUSED, ENDED, BUFFERING, CUED } = window.YT.PlayerState
+        const { PLAYING, PAUSED, ENDED, BUFFERING, CUED } = YT.PlayerState
         const isPlaying = (data === PLAYING)
 
         if (isPlaying) {
@@ -99,11 +99,15 @@ class Youtube extends Component {
         }
 
         if (data === PAUSED) {
-          this.props.onPause(false)
+          this.props.onPause()
         }
 
         if (data === ENDED) {
-          this.props.onEnded(false)
+          this.props.onEnded()
+
+          if (this._loop) {
+            this.play()
+          }
         }
 
         // start fetching progress when playing or buffering
@@ -155,6 +159,10 @@ class Youtube extends Component {
     this._player.setPlaybackRate(rate)
   }
 
+  setLoop(loop) {
+    this._loop = loop
+  }
+
   _handleProgress = () => {
     if (!this._isMounted) return
 

diff --git a/src/vendors/vendor-prop-types.js b/src/vendors/vendor-prop-types.js
@@ -3,6 +3,7 @@ import { PropTypes } from 'react'
 export default {
   vendor:             PropTypes.string,
   src:                PropTypes.string,
+  loop:               PropTypes.bool,
   onReady:            PropTypes.func,
   onPlay:             PropTypes.func,
   onPause:            PropTypes.func,