Prevent errors when unmounting before SDK loads

Author: cookpete

src/players/DailyMotion.js

@@ -28,6 +28,7 @@ export default class DailyMotion extends Component {
       return
     }
     getSDK(SDK_URL, SDK_GLOBAL, SDK_GLOBAL_READY, DM => DM.player).then(DM => {
+      if (!this.container) return
       const Player = DM.player
       this.player = new Player(this.container, {
         width: '100%',

src/players/SoundCloud.js

@@ -17,6 +17,7 @@ export default class SoundCloud extends Component {
   fractionLoaded = null
   load (url, isReady) {
     getSDK(SDK_URL, SDK_GLOBAL).then(SC => {
+      if (!this.iframe) return
       const { PLAY, PLAY_PROGRESS, PAUSE, FINISH, ERROR } = SC.Widget.Events
       if (!isReady) {
         this.player = SC.Widget(this.iframe)

src/players/Streamable.js

@@ -16,6 +16,7 @@ export default class Streamable extends Component {
   secondsLoaded = null
   load (url) {
     getSDK(SDK_URL, SDK_GLOBAL).then(playerjs => {
+      if (!this.iframe) return
       this.player = new playerjs.Player(this.iframe)
       this.player.on('ready', this.props.onReady)
       this.player.on('play', this.props.onPlay)

src/players/Vidme.js

@@ -41,6 +41,7 @@ export default class Vidme extends FilePlayer {
     const { onError } = this.props
     this.stop()
     this.getData(url).then(data => {
+      if (!this.player) return
       this.player.src = this.getURL(data)
     }, onError)
   }

src/players/Vimeo.js

@@ -22,6 +22,7 @@ export default class Vimeo extends Component {
       return
     }
     getSDK(SDK_URL, SDK_GLOBAL).then(Vimeo => {
+      if (!this.container) return
       this.player = new Vimeo.Player(this.container, {
         ...this.props.config.vimeo.playerOptions,
         url,

src/players/YouTube.js

@@ -24,6 +24,7 @@ export default class YouTube extends Component {
       return
     }
     getSDK(SDK_URL, SDK_GLOBAL, SDK_GLOBAL_READY, YT => YT.loaded).then(YT => {
+      if (!this.container) return
       this.player = new YT.Player(this.container, {
         width: '100%',
         height: '100%',