From 8ae84c75535e4c09886d94e166563726fe31bccb Mon Sep 17 00:00:00 2001 From: Jay T Date: Wed, 14 Aug 2019 01:18:01 -0700 Subject: [PATCH 1/4] Refactor lifecycle method componentWillMount to componentDidMount --- src/ReactPlayer.js | 10 +++++----- src/singlePlayer.js | 4 ++-- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/ReactPlayer.js b/src/ReactPlayer.js index cddf8cd2..8603ceb9 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 From 8d505b212ccf56fc3bca1a9ac57cfe906b48d389 Mon Sep 17 00:00:00 2001 From: Jay T Date: Wed, 14 Aug 2019 02:56:19 -0700 Subject: [PATCH 2/4] Refactor lifecycle method componentWillReceiveProps into componentDidUpdate --- src/Player.js | 40 ++++++++++++++++++++-------------------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/src/Player.js b/src/Player.js index f1ddc41a..c8f60670 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 () { From 57d8ea2d4772a5f066ae593cb92631f38237b09e Mon Sep 17 00:00:00 2001 From: Jay T Date: Wed, 14 Aug 2019 03:24:58 -0700 Subject: [PATCH 3/4] Add space between function name and paren for standardjs lint --- src/ReactPlayer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ReactPlayer.js b/src/ReactPlayer.js index 8603ceb9..593f7291 100644 --- a/src/ReactPlayer.js +++ b/src/ReactPlayer.js @@ -51,7 +51,7 @@ export default class ReactPlayer extends Component { shouldComponentUpdate (nextProps, nextState) { return !isEqual(this.props, nextProps) || !isEqual(this.state, nextState) } - componentDidUpdate(prevProps) { + componentDidUpdate (prevProps) { const { light } = prevProps this.config = getConfig(this.props, defaultProps) if (!light && this.props.light) { From 07ed8cbcf45b55dab9942007d536f5d82f37564b Mon Sep 17 00:00:00 2001 From: Jay T Date: Wed, 14 Aug 2019 03:25:27 -0700 Subject: [PATCH 4/4] Add space between function name and paren for standardjs lint --- src/Player.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Player.js b/src/Player.js index c8f60670..2df2b7ed 100644 --- a/src/Player.js +++ b/src/Player.js @@ -33,7 +33,7 @@ export default class Player extends Component { } this.mounted = false } - componentDidUpdate(prevProps) { + componentDidUpdate (prevProps) { // Invoke player methods based on incoming props const { url, playing, volume, muted, playbackRate, pip, loop, activePlayer } = prevProps if (!isEqual(url, this.props.url)) {