diff --git a/src/Player.js b/src/Player.js index f1ddc41a..2df2b7ed 100644 --- a/src/Player.js +++ b/src/Player.js @@ -33,50 +33,50 @@ export default class Player extends Component { } this.mounted = false } - componentWillReceiveProps (nextProps) { + componentDidUpdate (prevProps) { // Invoke player methods based on incoming props - const { url, playing, volume, muted, playbackRate, pip, loop, activePlayer } = this.props - if (!isEqual(url, nextProps.url)) { + const { url, playing, volume, muted, playbackRate, pip, loop, activePlayer } = prevProps + if (!isEqual(url, this.props.url)) { if (this.isLoading && !activePlayer.forceLoad) { - console.warn(`ReactPlayer: the attempt to load ${nextProps.url} is being deferred until the player has loaded`) - this.loadOnReady = nextProps.url + console.warn(`ReactPlayer: the attempt to load ${this.props.url} is being deferred until the player has loaded`) + this.loadOnReady = this.props.url return } this.isLoading = true this.startOnPlay = true this.onDurationCalled = false - this.player.load(nextProps.url, this.isReady) + this.player.load(this.props.url, this.isReady) } - if (!playing && nextProps.playing && !this.isPlaying) { + if (!playing && this.props.playing && !this.isPlaying) { this.player.play() } - if (playing && !nextProps.playing && this.isPlaying) { + if (playing && !this.props.playing && this.isPlaying) { this.player.pause() } - if (!pip && nextProps.pip && this.player.enablePIP) { + if (!pip && this.props.pip && this.player.enablePIP) { this.player.enablePIP() - } else if (pip && !nextProps.pip && this.player.disablePIP) { + } else if (pip && !this.props.pip && this.player.disablePIP) { this.player.disablePIP() } - if (volume !== nextProps.volume && nextProps.volume !== null) { - this.player.setVolume(nextProps.volume) + if (volume !== this.props.volume && this.props.volume !== null) { + this.player.setVolume(this.props.volume) } - if (muted !== nextProps.muted) { - if (nextProps.muted) { + if (muted !== this.props.muted) { + if (this.props.muted) { this.player.mute() } else { this.player.unmute() - if (nextProps.volume !== null) { + if (this.props.volume !== null) { // Set volume next tick to fix a bug with DailyMotion - setTimeout(() => this.player.setVolume(nextProps.volume)) + setTimeout(() => this.player.setVolume(this.props.volume)) } } } - if (playbackRate !== nextProps.playbackRate && this.player.setPlaybackRate) { - this.player.setPlaybackRate(nextProps.playbackRate) + if (playbackRate !== this.props.playbackRate && this.player.setPlaybackRate) { + this.player.setPlaybackRate(this.props.playbackRate) } - if (loop !== nextProps.loop && this.player.setLoop) { - this.player.setLoop(nextProps.loop) + if (loop !== this.props.loop && this.player.setLoop) { + this.player.setLoop(this.props.loop) } } getDuration () { diff --git a/src/ReactPlayer.js b/src/ReactPlayer.js index cddf8cd2..593f7291 100644 --- a/src/ReactPlayer.js +++ b/src/ReactPlayer.js @@ -51,13 +51,13 @@ export default class ReactPlayer extends Component { shouldComponentUpdate (nextProps, nextState) { return !isEqual(this.props, nextProps) || !isEqual(this.state, nextState) } - componentWillUpdate (nextProps) { - const { light } = this.props - this.config = getConfig(nextProps, defaultProps) - if (!light && nextProps.light) { + componentDidUpdate (prevProps) { + const { light } = prevProps + this.config = getConfig(this.props, defaultProps) + if (!light && this.props.light) { this.setState({ showPreview: true }) } - if (light && !nextProps.light) { + if (light && !this.props.light) { this.setState({ showPreview: false }) } } diff --git a/src/singlePlayer.js b/src/singlePlayer.js index 7148bdfe..078e15cf 100644 --- a/src/singlePlayer.js +++ b/src/singlePlayer.js @@ -17,8 +17,8 @@ export default function createSinglePlayer (activePlayer) { shouldComponentUpdate (nextProps) { return !isEqual(this.props, nextProps) } - componentWillUpdate (nextProps) { - this.config = getConfig(nextProps, defaultProps) + componentDidUpdate () { + this.config = getConfig(this.props, defaultProps) } getDuration = () => { if (!this.player) return null