Skip to content

Commit fbe9db3

Browse files
startechgurustartechguru
committed
Migrate to componentDidUpdate
Fixes cookpete/react-player#651 Fixes cookpete/react-player#696 Closes cookpete/react-player#692 Closes cookpete/react-player#693
1 parent ec5f230 commit fbe9db3

6 files changed

Lines changed: 64 additions & 63 deletions

File tree

‎src/Player.js‎

Lines changed: 21 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -35,50 +35,51 @@ export default class Player extends Component {
3535
this.mounted = false
3636
}
3737

38-
componentWillReceiveProps (nextProps) {
39-
// Invoke player methods based on incoming props
38+
componentDidUpdate (prevProps) {
39+
// Invoke player methods based on changed props
4040
const { url, playing, volume, muted, playbackRate, pip, loop, activePlayer } = this.props
41-
if (!isEqual(url, nextProps.url)) {
41+
if (!isEqual(prevProps.url, url)) {
4242
if (this.isLoading && !activePlayer.forceLoad) {
43-
console.warn(`ReactPlayer: the attempt to load ${nextProps.url} is being deferred until the player has loaded`)
44-
this.loadOnReady = nextProps.url
43+
console.warn(`ReactPlayer: the attempt to load ${url} is being deferred until the player has loaded`)
44+
this.loadOnReady = url
4545
return
4646
}
4747
this.isLoading = true
4848
this.startOnPlay = true
4949
this.onDurationCalled = false
50-
this.player.load(nextProps.url, this.isReady)
50+
this.player.load(url, this.isReady)
5151
}
52-
if (!playing && nextProps.playing && !this.isPlaying) {
52+
if (!prevProps.playing && playing && !this.isPlaying) {
5353
this.player.play()
5454
}
55-
if (playing && !nextProps.playing && this.isPlaying) {
55+
if (prevProps.playing && !playing && this.isPlaying) {
5656
this.player.pause()
5757
}
58-
if (!pip && nextProps.pip && this.player.enablePIP) {
58+
if (!prevProps.pip && pip && this.player.enablePIP) {
5959
this.player.enablePIP()
60-
} else if (pip && !nextProps.pip && this.player.disablePIP) {
60+
}
61+
if (prevProps.pip && !pip && this.player.disablePIP) {
6162
this.player.disablePIP()
6263
}
63-
if (volume !== nextProps.volume && nextProps.volume !== null) {
64-
this.player.setVolume(nextProps.volume)
64+
if (prevProps.volume !== volume && volume !== null) {
65+
this.player.setVolume(volume)
6566
}
66-
if (muted !== nextProps.muted) {
67-
if (nextProps.muted) {
67+
if (prevProps.muted !== muted) {
68+
if (muted) {
6869
this.player.mute()
6970
} else {
7071
this.player.unmute()
71-
if (nextProps.volume !== null) {
72+
if (volume !== null) {
7273
// Set volume next tick to fix a bug with DailyMotion
73-
setTimeout(() => this.player.setVolume(nextProps.volume))
74+
setTimeout(() => this.player.setVolume(volume))
7475
}
7576
}
7677
}
77-
if (playbackRate !== nextProps.playbackRate && this.player.setPlaybackRate) {
78-
this.player.setPlaybackRate(nextProps.playbackRate)
78+
if (prevProps.playbackRate !== playbackRate && this.player.setPlaybackRate) {
79+
this.player.setPlaybackRate(playbackRate)
7980
}
80-
if (loop !== nextProps.loop && this.player.setLoop) {
81-
this.player.setLoop(nextProps.loop)
81+
if (prevProps.loop !== loop && this.player.setLoop) {
82+
this.player.setLoop(loop)
8283
}
8384
}
8485

‎src/Preview.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,10 @@ export default class Preview extends Component {
1313
this.fetchImage(this.props)
1414
}
1515

16-
componentWillReceiveProps (nextProps) {
16+
componentDidUpdate (prevProps) {
1717
const { url, light } = this.props
18-
if (url !== nextProps.url || light !== nextProps.light) {
19-
this.fetchImage(nextProps)
18+
if (prevProps.url !== url || prevProps.light !== light) {
19+
this.fetchImage(this.props)
2020
}
2121
}
2222

‎src/ReactPlayer.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -58,13 +58,13 @@ export default class ReactPlayer extends Component {
5858
return !isEqual(this.props, nextProps) || !isEqual(this.state, nextState)
5959
}
6060

61-
componentWillUpdate (nextProps) {
61+
componentDidUpdate (prevProps) {
6262
const { light } = this.props
63-
this.config = getConfig(nextProps, defaultProps)
64-
if (!light && nextProps.light) {
63+
this.config = getConfig(this.props, defaultProps)
64+
if (!prevProps.light && light) {
6565
this.setState({ showPreview: true })
6666
}
67-
if (light && !nextProps.light) {
67+
if (prevProps.light && !light) {
6868
this.setState({ showPreview: false })
6969
}
7070
}

‎src/players/FilePlayer.js‎

Lines changed: 33 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -47,59 +47,54 @@ export class FilePlayer extends Component {
4747
static canEnablePIP = canEnablePIP
4848

4949
componentDidMount () {
50-
this.addListeners()
50+
this.addListeners(this.player)
5151
if (IOS) {
5252
this.player.load()
5353
}
5454
}
5555

56-
componentWillReceiveProps (nextProps) {
57-
if (this.shouldUseAudio(this.props) !== this.shouldUseAudio(nextProps)) {
58-
this.removeListeners()
59-
}
60-
}
61-
6256
componentDidUpdate (prevProps) {
6357
if (this.shouldUseAudio(this.props) !== this.shouldUseAudio(prevProps)) {
64-
this.addListeners()
58+
this.removeListeners(this.prevPlayer)
59+
this.addListeners(this.player)
6560
}
6661
}
6762

6863
componentWillUnmount () {
69-
this.removeListeners()
64+
this.removeListeners(this.player)
7065
}
7166

72-
addListeners () {
67+
addListeners (player) {
7368
const { onReady, onPlay, onBuffer, onBufferEnd, onPause, onEnded, onError, playsinline, onEnablePIP } = this.props
74-
this.player.addEventListener('canplay', onReady)
75-
this.player.addEventListener('play', onPlay)
76-
this.player.addEventListener('waiting', onBuffer)
77-
this.player.addEventListener('playing', onBufferEnd)
78-
this.player.addEventListener('pause', onPause)
79-
this.player.addEventListener('seeked', this.onSeek)
80-
this.player.addEventListener('ended', onEnded)
81-
this.player.addEventListener('error', onError)
82-
this.player.addEventListener('enterpictureinpicture', onEnablePIP)
83-
this.player.addEventListener('leavepictureinpicture', this.onDisablePIP)
69+
player.addEventListener('canplay', onReady)
70+
player.addEventListener('play', onPlay)
71+
player.addEventListener('waiting', onBuffer)
72+
player.addEventListener('playing', onBufferEnd)
73+
player.addEventListener('pause', onPause)
74+
player.addEventListener('seeked', this.onSeek)
75+
player.addEventListener('ended', onEnded)
76+
player.addEventListener('error', onError)
77+
player.addEventListener('enterpictureinpicture', onEnablePIP)
78+
player.addEventListener('leavepictureinpicture', this.onDisablePIP)
8479
if (playsinline) {
85-
this.player.setAttribute('playsinline', '')
86-
this.player.setAttribute('webkit-playsinline', '')
87-
this.player.setAttribute('x5-playsinline', '')
80+
player.setAttribute('playsinline', '')
81+
player.setAttribute('webkit-playsinline', '')
82+
player.setAttribute('x5-playsinline', '')
8883
}
8984
}
9085

91-
removeListeners () {
86+
removeListeners (player) {
9287
const { onReady, onPlay, onBuffer, onBufferEnd, onPause, onEnded, onError, onEnablePIP } = this.props
93-
this.player.removeEventListener('canplay', onReady)
94-
this.player.removeEventListener('play', onPlay)
95-
this.player.removeEventListener('waiting', onBuffer)
96-
this.player.removeEventListener('playing', onBufferEnd)
97-
this.player.removeEventListener('pause', onPause)
98-
this.player.removeEventListener('seeked', this.onSeek)
99-
this.player.removeEventListener('ended', onEnded)
100-
this.player.removeEventListener('error', onError)
101-
this.player.removeEventListener('enterpictureinpicture', onEnablePIP)
102-
this.player.removeEventListener('leavepictureinpicture', this.onDisablePIP)
88+
player.removeEventListener('canplay', onReady)
89+
player.removeEventListener('play', onPlay)
90+
player.removeEventListener('waiting', onBuffer)
91+
player.removeEventListener('playing', onBufferEnd)
92+
player.removeEventListener('pause', onPause)
93+
player.removeEventListener('seeked', this.onSeek)
94+
player.removeEventListener('ended', onEnded)
95+
player.removeEventListener('error', onError)
96+
player.removeEventListener('enterpictureinpicture', onEnablePIP)
97+
player.removeEventListener('leavepictureinpicture', this.onDisablePIP)
10398
}
10499

105100
onDisablePIP = e => {
@@ -274,6 +269,10 @@ export class FilePlayer extends Component {
274269
}
275270

276271
ref = player => {
272+
if (this.player) {
273+
// Store previous player to be used by removeListeners()
274+
this.prevPlayer = this.player
275+
}
277276
this.player = player
278277
}
279278

‎src/singlePlayer.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@ export default function createSinglePlayer (activePlayer) {
1818
return !isEqual(this.props, nextProps)
1919
}
2020

21-
componentWillUpdate (nextProps) {
22-
this.config = getConfig(nextProps, defaultProps)
21+
componentDidUpdate () {
22+
this.config = getConfig(this.props, defaultProps)
2323
}
2424

2525
getDuration = () => {

‎test/players/FilePlayer.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ test('listeners', t => {
6262
)
6363
t.true(addListeners.calledOnce)
6464
t.true(removeListeners.notCalled)
65+
wrapper.instance().prevPlayer = { removeEventListener: () => null }
6566
wrapper.setProps({ url: 'file.mp3' })
6667
t.true(addListeners.calledTwice)
6768
wrapper.unmount()

0 commit comments

Comments
 (0)