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,