diff --git a/example/index.jsx b/example/index.jsx
index 005f7ed..954c398 100644
--- 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 {
-
Controls
diff --git a/src/Player.jsx b/src/Player.jsx
index 9487468..d2c8ac9 100644
--- 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
index 017bf13..32e98fb 100644
--- 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
index 13ccf88..2ae9644 100644
--- 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
index 6a3d75f..3a7ff48 100644
--- 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
index 54bee97..73adc2a 100644
--- 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,