Migrate to componentDidUpdate

Fixes cookpete/react-player#651 Fixes cookpete/react-player#696 Closes cookpete/react-player#692 Closes cookpete/react-player#693
webmiraclepro · Aug 16, 2019 · 771619c · 771619c
1 parent a360b95
commit 771619c
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 63 deletions.
diff --git a/src/Player.js b/src/Player.js
@@ -35,50 +35,51 @@ export default class Player extends Component {
     this.mounted = false
   }
 
-  componentWillReceiveProps (nextProps) {
-    // Invoke player methods based on incoming props
+  componentDidUpdate (prevProps) {
+    // Invoke player methods based on changed props
     const { url, playing, volume, muted, playbackRate, pip, loop, activePlayer } = this.props
-    if (!isEqual(url, nextProps.url)) {
+    if (!isEqual(prevProps.url, 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 ${url} is being deferred until the player has loaded`)
+        this.loadOnReady = url
         return
       }
       this.isLoading = true
       this.startOnPlay = true
       this.onDurationCalled = false
-      this.player.load(nextProps.url, this.isReady)
+      this.player.load(url, this.isReady)
     }
-    if (!playing && nextProps.playing && !this.isPlaying) {
+    if (!prevProps.playing && playing && !this.isPlaying) {
       this.player.play()
     }
-    if (playing && !nextProps.playing && this.isPlaying) {
+    if (prevProps.playing && !playing && this.isPlaying) {
       this.player.pause()
     }
-    if (!pip && nextProps.pip && this.player.enablePIP) {
+    if (!prevProps.pip && pip && this.player.enablePIP) {
       this.player.enablePIP()
-    } else if (pip && !nextProps.pip && this.player.disablePIP) {
+    }
+    if (prevProps.pip && !pip && this.player.disablePIP) {
       this.player.disablePIP()
     }
-    if (volume !== nextProps.volume && nextProps.volume !== null) {
-      this.player.setVolume(nextProps.volume)
+    if (prevProps.volume !== volume && volume !== null) {
+      this.player.setVolume(volume)
     }
-    if (muted !== nextProps.muted) {
-      if (nextProps.muted) {
+    if (prevProps.muted !== muted) {
+      if (muted) {
         this.player.mute()
       } else {
         this.player.unmute()
-        if (nextProps.volume !== null) {
+        if (volume !== null) {
           // Set volume next tick to fix a bug with DailyMotion
-          setTimeout(() => this.player.setVolume(nextProps.volume))
+          setTimeout(() => this.player.setVolume(volume))
         }
       }
     }
-    if (playbackRate !== nextProps.playbackRate && this.player.setPlaybackRate) {
-      this.player.setPlaybackRate(nextProps.playbackRate)
+    if (prevProps.playbackRate !== playbackRate && this.player.setPlaybackRate) {
+      this.player.setPlaybackRate(playbackRate)
     }
-    if (loop !== nextProps.loop && this.player.setLoop) {
-      this.player.setLoop(nextProps.loop)
+    if (prevProps.loop !== loop && this.player.setLoop) {
+      this.player.setLoop(loop)
     }
   }
 

diff --git a/src/Preview.js b/src/Preview.js
@@ -13,10 +13,10 @@ export default class Preview extends Component {
     this.fetchImage(this.props)
   }
 
-  componentWillReceiveProps (nextProps) {
+  componentDidUpdate (prevProps) {
     const { url, light } = this.props
-    if (url !== nextProps.url || light !== nextProps.light) {
-      this.fetchImage(nextProps)
+    if (prevProps.url !== url || prevProps.light !== light) {
+      this.fetchImage(this.props)
     }
   }
 

diff --git a/src/ReactPlayer.js b/src/ReactPlayer.js
@@ -58,13 +58,13 @@ export default class ReactPlayer extends Component {
     return !isEqual(this.props, nextProps) || !isEqual(this.state, nextState)
   }
 
-  componentWillUpdate (nextProps) {
+  componentDidUpdate (prevProps) {
     const { light } = this.props
-    this.config = getConfig(nextProps, defaultProps)
-    if (!light && nextProps.light) {
+    this.config = getConfig(this.props, defaultProps)
+    if (!prevProps.light && light) {
       this.setState({ showPreview: true })
     }
-    if (light && !nextProps.light) {
+    if (prevProps.light && !light) {
       this.setState({ showPreview: false })
     }
   }

diff --git a/src/players/FilePlayer.js b/src/players/FilePlayer.js
@@ -47,59 +47,54 @@ export class FilePlayer extends Component {
   static canEnablePIP = canEnablePIP
 
   componentDidMount () {
-    this.addListeners()
+    this.addListeners(this.player)
     if (IOS) {
       this.player.load()
     }
   }
 
-  componentWillReceiveProps (nextProps) {
-    if (this.shouldUseAudio(this.props) !== this.shouldUseAudio(nextProps)) {
-      this.removeListeners()
-    }
-  }
-
   componentDidUpdate (prevProps) {
     if (this.shouldUseAudio(this.props) !== this.shouldUseAudio(prevProps)) {
-      this.addListeners()
+      this.removeListeners(this.prevPlayer)
+      this.addListeners(this.player)
     }
   }
 
   componentWillUnmount () {
-    this.removeListeners()
+    this.removeListeners(this.player)
   }
 
-  addListeners () {
+  addListeners (player) {
     const { onReady, onPlay, onBuffer, onBufferEnd, onPause, onEnded, onError, playsinline, onEnablePIP } = this.props
-    this.player.addEventListener('canplay', onReady)
-    this.player.addEventListener('play', onPlay)
-    this.player.addEventListener('waiting', onBuffer)
-    this.player.addEventListener('playing', onBufferEnd)
-    this.player.addEventListener('pause', onPause)
-    this.player.addEventListener('seeked', this.onSeek)
-    this.player.addEventListener('ended', onEnded)
-    this.player.addEventListener('error', onError)
-    this.player.addEventListener('enterpictureinpicture', onEnablePIP)
-    this.player.addEventListener('leavepictureinpicture', this.onDisablePIP)
+    player.addEventListener('canplay', onReady)
+    player.addEventListener('play', onPlay)
+    player.addEventListener('waiting', onBuffer)
+    player.addEventListener('playing', onBufferEnd)
+    player.addEventListener('pause', onPause)
+    player.addEventListener('seeked', this.onSeek)
+    player.addEventListener('ended', onEnded)
+    player.addEventListener('error', onError)
+    player.addEventListener('enterpictureinpicture', onEnablePIP)
+    player.addEventListener('leavepictureinpicture', this.onDisablePIP)
     if (playsinline) {
-      this.player.setAttribute('playsinline', '')
-      this.player.setAttribute('webkit-playsinline', '')
-      this.player.setAttribute('x5-playsinline', '')
+      player.setAttribute('playsinline', '')
+      player.setAttribute('webkit-playsinline', '')
+      player.setAttribute('x5-playsinline', '')
     }
   }
 
-  removeListeners () {
+  removeListeners (player) {
     const { onReady, onPlay, onBuffer, onBufferEnd, onPause, onEnded, onError, onEnablePIP } = this.props
-    this.player.removeEventListener('canplay', onReady)
-    this.player.removeEventListener('play', onPlay)
-    this.player.removeEventListener('waiting', onBuffer)
-    this.player.removeEventListener('playing', onBufferEnd)
-    this.player.removeEventListener('pause', onPause)
-    this.player.removeEventListener('seeked', this.onSeek)
-    this.player.removeEventListener('ended', onEnded)
-    this.player.removeEventListener('error', onError)
-    this.player.removeEventListener('enterpictureinpicture', onEnablePIP)
-    this.player.removeEventListener('leavepictureinpicture', this.onDisablePIP)
+    player.removeEventListener('canplay', onReady)
+    player.removeEventListener('play', onPlay)
+    player.removeEventListener('waiting', onBuffer)
+    player.removeEventListener('playing', onBufferEnd)
+    player.removeEventListener('pause', onPause)
+    player.removeEventListener('seeked', this.onSeek)
+    player.removeEventListener('ended', onEnded)
+    player.removeEventListener('error', onError)
+    player.removeEventListener('enterpictureinpicture', onEnablePIP)
+    player.removeEventListener('leavepictureinpicture', this.onDisablePIP)
   }
 
   onDisablePIP = e => {
@@ -274,6 +269,10 @@ export class FilePlayer extends Component {
   }
 
   ref = player => {
+    if (this.player) {
+      // Store previous player to be used by removeListeners()
+      this.prevPlayer = this.player
+    }
     this.player = player
   }
 

diff --git a/src/singlePlayer.js b/src/singlePlayer.js
@@ -18,8 +18,8 @@ export default function createSinglePlayer (activePlayer) {
       return !isEqual(this.props, nextProps)
     }
 
-    componentWillUpdate (nextProps) {
-      this.config = getConfig(nextProps, defaultProps)
+    componentDidUpdate () {
+      this.config = getConfig(this.props, defaultProps)
     }
 
     getDuration = () => {

diff --git a/test/players/FilePlayer.js b/test/players/FilePlayer.js
@@ -62,6 +62,7 @@ test('listeners', t => {
   )
   t.true(addListeners.calledOnce)
   t.true(removeListeners.notCalled)
+  wrapper.instance().prevPlayer = { removeEventListener: () => null }
   wrapper.setProps({ url: 'file.mp3' })
   t.true(addListeners.calledTwice)
   wrapper.unmount()