From da8dc71692d8bec1567b2393a43b6bf611615d93 Mon Sep 17 00:00:00 2001 From: Timothy Kempf Date: Sun, 13 Dec 2015 09:02:05 -0800 Subject: [PATCH 1/6] add 'delay' function to test app --- src/App.js | 37 +++++++++++++++++++++++++------------ 1 file changed, 25 insertions(+), 12 deletions(-) diff --git a/src/App.js b/src/App.js index 53492411..4656575a 100644 --- a/src/App.js +++ b/src/App.js @@ -2,16 +2,22 @@ import React, { Component } from 'react' import ReactPlayer from './ReactPlayer' +const DELAY = 5000; + export default class App extends Component { state = { url: null, playing: false, volume: 0.8, played: 0, - loaded: 0 + loaded: 0, + delayLoad: false } load = url => { - this.setState({ url, playing: true }) + const delay = this.state.delayLoad ? DELAY : 0; + setTimeout(() => { + this.setState({ url, playing: true }) + }, delay) } playPause = () => { this.setState({ playing: !this.state.playing }) @@ -51,7 +57,7 @@ export default class App extends Component { render () { return (
-

rmp

+

React Player Test App

- - - - - - - - -
seek:
+ + + + + + + + + +
From ef20fdf9091951042fee2642a4ab4fae113428ca Mon Sep 17 00:00:00 2001 From: Timothy Kempf Date: Sun, 13 Dec 2015 15:07:58 -0800 Subject: [PATCH 2/6] switch players without mounting/unmounting --- src/ReactPlayer.js | 28 ++++++++++++++++++++++------ src/players/Base.js | 22 +++++++++++++++------- src/players/FilePlayer.js | 10 ++++++---- src/players/Vimeo.js | 6 ++++-- src/players/YouTube.js | 2 ++ 5 files changed, 49 insertions(+), 19 deletions(-) diff --git a/src/ReactPlayer.js b/src/ReactPlayer.js index 64879f9c..4e85e4e2 100644 --- a/src/ReactPlayer.js +++ b/src/ReactPlayer.js @@ -4,16 +4,18 @@ import 'array.prototype.find' import propTypes from './propTypes' import players from './players' +const NO_OP = function () {} + export default class ReactPlayer extends Component { static propTypes = propTypes static defaultProps = { volume: 0.8, width: 640, height: 360, - onPlay: function () {}, // TODO: Empty func var in react? - onPause: function () {}, - onBuffer: function () {}, - onEnded: function () {} + onPlay: NO_OP, + onPause: NO_OP, + onBuffer: NO_OP, + onEnded: NO_OP } static canPlay (url) { return players.some(player => player.canPlay(url)) @@ -37,15 +39,29 @@ export default class ReactPlayer extends Component { player.seekTo(fraction) } } + renderPlayers () { + return players.map(Player => { + const canPlay = Player.canPlay(this.props.url); + const style = { + display: canPlay ? 'block' : 'none' + } + return ( +
+ +
+ ) + }) + } render () { const Player = this.state.Player const style = { width: this.props.width, - height: this.props.height + height: this.props.height, + background: 'black' } return (
- { Player && } + {this.renderPlayers()}
) } diff --git a/src/players/Base.js b/src/players/Base.js index 7e584955..49d16b5f 100644 --- a/src/players/Base.js +++ b/src/players/Base.js @@ -10,8 +10,8 @@ export default class Base extends Component { onProgress: function () {} } componentDidMount () { - this.play(this.props.url) - this.update() + //this.play(this.props.url) + //this.update() } componentWillUnmount () { this.stop() @@ -19,12 +19,20 @@ export default class Base extends Component { } componentWillReceiveProps (nextProps) { // Invoke player methods based on incoming props - if (this.props.url !== nextProps.url) { - this.play(nextProps.url) - this.props.onProgress({ played: 0, loaded: 0 }) - } else if (!this.props.playing && nextProps.playing) { + const canPlay = this.constructor.canPlay(nextProps.url); + this.setState({ + canPlay + }); + if ((this.props.url !== nextProps.url)) { + if (canPlay) { + this.play(nextProps.url) + this.props.onProgress({ played: 0, loaded: 0 }) + } else { + this.stop() + } + } else if ((!this.props.playing && nextProps.playing) && canPlay) { this.play() - } else if (this.props.playing && !nextProps.playing) { + } else if ((this.props.playing && !nextProps.playing) && canPlay) { this.pause() } else if (this.props.volume !== nextProps.volume) { this.setVolume(nextProps.volume) diff --git a/src/players/FilePlayer.js b/src/players/FilePlayer.js index 8396655c..4a4967b1 100644 --- a/src/players/FilePlayer.js +++ b/src/players/FilePlayer.js @@ -11,6 +11,7 @@ export default class FilePlayer extends Base { static canPlay (url) { return VIDEO_EXTENSIONS.test(url) || AUDIO_EXTENSIONS.test(url) } + state = {} componentDidMount () { this.player = this.refs.player this.player.oncanplay = this.onReady @@ -47,13 +48,14 @@ export default class FilePlayer extends Base { return this.player.buffered.end(0) / this.player.duration } render () { - const Media = AUDIO_EXTENSIONS.test(this.props.url) ? 'audio' : 'video' + const { url, width, height } = this.props + const Media = AUDIO_EXTENSIONS.test(url) ? 'audio' : 'video' return ( ) } diff --git a/src/players/Vimeo.js b/src/players/Vimeo.js index 219ef08f..80d278da 100644 --- a/src/players/Vimeo.js +++ b/src/players/Vimeo.js @@ -24,6 +24,7 @@ export default class Vimeo extends Base { static canPlay (url) { return MATCH_URL.test(url) } + state = {} componentDidMount () { window.addEventListener('message', this.onMessage, false) this.iframe = this.refs.iframe @@ -81,12 +82,13 @@ export default class Vimeo extends Base { return this.iframe.contentWindow && this.iframe.contentWindow.postMessage(data, this.origin) } render () { - const id = this.props.url.match(MATCH_URL)[3] + const { url, vimeoConfig } = this.props + const id = ((url || '').match(MATCH_URL) || [])[3] const style = { width: '100%', height: '100%' } - const iframeParams = { ...DEFAULT_IFRAME_PARAMS, ...this.props.vimeoConfig.iframeParams } + const iframeParams = { ...DEFAULT_IFRAME_PARAMS, ...vimeoConfig.iframeParams } return (