From 1c45dcdf8fdb92127861549f843c9171442ccf2f Mon Sep 17 00:00:00 2001
From: Kostya Luchankin <phationmationion@gmail.com>
Date: Tue, 12 Sep 2017 17:10:53 +0500
Subject: [PATCH] update of DOM listeners in FilePlayer when audio/video tags
 was switched

---
 src/players/FilePlayer.js | 59 ++++++++++++++++++++++++---------------
 1 file changed, 37 insertions(+), 22 deletions(-)

diff --git a/src/players/FilePlayer.js b/src/players/FilePlayer.js
index 3946aa29..34a66339 100644
--- a/src/players/FilePlayer.js
+++ b/src/players/FilePlayer.js
@@ -34,31 +34,20 @@ export default class FilePlayer extends Base {
     )
   }
   componentDidMount () {
-    const { playsinline, onPause, onEnded, onError } = this.props
-    this.player.addEventListener('canplay', this.onReady)
-    this.player.addEventListener('play', this.onPlay)
-    this.player.addEventListener('pause', () => {
-      if (this.mounted) {
-        onPause()
-      }
-    })
-    this.player.addEventListener('seeked', this.onSeek)
-    this.player.addEventListener('ended', onEnded)
-    this.player.addEventListener('error', onError)
-    if (playsinline) {
-      this.player.setAttribute('playsinline', '')
-      this.player.setAttribute('webkit-playsinline', '')
-    }
+    this.addDOMListeners()
     super.componentDidMount()
   }
+  componentDidUpdate (prevProps) {
+    const { url, config } = this.props
+    const wasAudio = AUDIO_EXTENSIONS.test(prevProps.url) || prevProps.config.file.forceAudio
+    const isAudio = AUDIO_EXTENSIONS.test(url) || config.file.forceAudio
+    if (wasAudio !== isAudio) {
+      this.removeDOMListeners()
+      this.addDOMListeners()
+    }
+  }
   componentWillUnmount () {
-    const { onPause, onEnded, onError } = this.props
-    this.player.removeEventListener('canplay', this.onReady)
-    this.player.removeEventListener('play', this.onPlay)
-    this.player.removeEventListener('pause', onPause)
-    this.player.removeEventListener('seeked', this.onSeek)
-    this.player.removeEventListener('ended', onEnded)
-    this.player.removeEventListener('error', onError)
+    this.removeDOMListeners()
     super.componentWillUnmount()
   }
   onSeek = e => {
@@ -133,6 +122,32 @@ export default class FilePlayer extends Base {
   ref = player => {
     this.player = player
   }
+  addDOMListeners () {
+    const { playsinline, onPause, onEnded, onError } = this.props
+    this.player.addEventListener('canplay', this.onReady)
+    this.player.addEventListener('play', this.onPlay)
+    this.player.addEventListener('pause', () => {
+      if (this.mounted) {
+        onPause()
+      }
+    })
+    this.player.addEventListener('seeked', this.onSeek)
+    this.player.addEventListener('ended', onEnded)
+    this.player.addEventListener('error', onError)
+    if (playsinline) {
+      this.player.setAttribute('playsinline', '')
+      this.player.setAttribute('webkit-playsinline', '')
+    }
+  }
+  removeDOMListeners () {
+    const { onPause, onEnded, onError } = this.props
+    this.player.removeEventListener('canplay', this.onReady)
+    this.player.removeEventListener('play', this.onPlay)
+    this.player.removeEventListener('pause', onPause)
+    this.player.removeEventListener('seeked', this.onSeek)
+    this.player.removeEventListener('ended', onEnded)
+    this.player.removeEventListener('error', onError)
+  }
   render () {
     const { url, loop, controls, config, width, height } = this.props
     const useAudio = AUDIO_EXTENSIONS.test(url) || config.file.forceAudio