Move SDK loading logic into getSDK util

cookpete · Sep 3, 2017 · 318c9e9 · 318c9e9
1 parent ad7b335
commit 318c9e9
Show file tree

Hide file tree

Showing 8 changed files with 41 additions and 113 deletions.
diff --git a/src/players/DailyMotion.js b/src/players/DailyMotion.js
@@ -1,8 +1,7 @@
 import React from 'react'
-import loadScript from 'load-script'
 
 import Base from './Base'
-import { parseStartTime } from '../utils'
+import { getSDK, parseStartTime } from '../utils'
 
 const SDK_URL = 'https://api.dmcdn.net/all.js'
 const SDK_GLOBAL = 'DM'
@@ -28,23 +27,6 @@ export default class DailyMotion extends Base {
     }
     super.componentDidMount()
   }
-  getSDK () {
-    if (window[SDK_GLOBAL] && window[SDK_GLOBAL].player) {
-      return Promise.resolve(window[SDK_GLOBAL])
-    }
-    return new Promise((resolve, reject) => {
-      const previousOnReady = window[SDK_GLOBAL_READY]
-      window[SDK_GLOBAL_READY] = function () {
-        if (previousOnReady) previousOnReady()
-        resolve(window[SDK_GLOBAL])
-      }
-      loadScript(SDK_URL, err => {
-        if (err) {
-          reject(err)
-        }
-      })
-    })
-  }
   parseId (url) {
     const m = url.match(MATCH_URL)
     return m[4] || m[2]
@@ -64,7 +46,7 @@ export default class DailyMotion extends Base {
       return
     }
     this.loadingSDK = true
-    this.getSDK().then(DM => {
+    getSDK(SDK_URL, SDK_GLOBAL, SDK_GLOBAL_READY, DM => DM.player).then(DM => {
       const Player = DM.player
       this.player = new Player(this.container, {
         width: '100%',

diff --git a/src/players/Facebook.js b/src/players/Facebook.js
@@ -1,8 +1,7 @@
 import React from 'react'
-import loadScript from 'load-script'
 
 import Base from './Base'
-import { randomString } from '../utils'
+import { getSDK, randomString } from '../utils'
 
 const SDK_URL = '//connect.facebook.net/en_US/sdk.js'
 const SDK_GLOBAL = 'FB'
@@ -16,27 +15,12 @@ export default class YouTube extends Base {
     return MATCH_URL.test(url)
   }
   playerID = PLAYER_ID_PREFIX + randomString()
-  getSDK () {
-    if (window[SDK_GLOBAL]) {
-      return Promise.resolve(window[SDK_GLOBAL])
-    }
-    return new Promise((resolve, reject) => {
-      const previousOnReady = window[SDK_GLOBAL_READY]
-      window[SDK_GLOBAL_READY] = function () {
-        if (previousOnReady) previousOnReady()
-        resolve(window[SDK_GLOBAL])
-      }
-      loadScript(SDK_URL, err => {
-        if (err) reject(err)
-      })
-    })
-  }
   load (url) {
     if (this.isReady) {
-      this.getSDK().then(FB => FB.XFBML.parse())
+      getSDK(SDK_URL, SDK_GLOBAL, SDK_GLOBAL_READY).then(FB => FB.XFBML.parse())
       return
     }
-    this.getSDK().then(FB => {
+    getSDK(SDK_URL, SDK_GLOBAL, SDK_GLOBAL_READY).then(FB => {
       FB.init({
         appId: this.props.facebookConfig.appId,
         xfbml: true,

diff --git a/src/players/FilePlayer.js b/src/players/FilePlayer.js
@@ -1,7 +1,7 @@
 import React from 'react'
 
 import Base from './Base'
-import loadScript from 'load-script'
+import { getSDK } from '../utils'
 
 const AUDIO_EXTENSIONS = /\.(m4a|mp4a|mpga|mp2|mp2a|mp3|m2a|m3a|wav|weba|aac|oga|spx)($|\?)/i
 const HLS_EXTENSIONS = /\.(m3u8)($|\?)/i
@@ -55,14 +55,14 @@ export default class FilePlayer extends Base {
   }
   load (url) {
     if (this.shouldUseHLS(url)) {
-      loadSDK(HLS_SDK_URL, HLS_GLOBAL).then(Hls => {
+      getSDK(HLS_SDK_URL, HLS_GLOBAL).then(Hls => {
         this.hls = new Hls()
         this.hls.loadSource(url)
         this.hls.attachMedia(this.player)
       })
     }
     if (this.shouldUseDASH(url)) {
-      loadSDK(DASH_SDK_URL, DASH_GLOBAL).then(dashjs => {
+      getSDK(DASH_SDK_URL, DASH_GLOBAL).then(dashjs => {
         const player = dashjs.MediaPlayer().create()
         player.initialize(this.player, url, true)
       })
@@ -146,15 +146,3 @@ export default class FilePlayer extends Base {
     )
   }
 }
-
-function loadSDK (url, globalVar) {
-  if (window[globalVar]) {
-    return Promise.resolve(window[globalVar])
-  }
-  return new Promise((resolve, reject) => {
-    loadScript(url, err => {
-      if (err) reject(err)
-      resolve(window[globalVar])
-    })
-  })
-}
diff --git a/src/players/Twitch.js b/src/players/Twitch.js
@@ -1,8 +1,7 @@
 import React from 'react'
-import loadScript from 'load-script'
 
 import Base from './Base'
-import { randomString } from '../utils'
+import { getSDK, randomString } from '../utils'
 
 const SDK_URL = '//player.twitch.tv/js/embed/v1.js'
 const SDK_GLOBAL = 'Twitch'
@@ -16,17 +15,6 @@ export default class YouTube extends Base {
     return MATCH_VIDEO_URL.test(url) || MATCH_CHANNEL_URL.test(url)
   }
   playerID = PLAYER_ID_PREFIX + randomString()
-  getSDK () {
-    if (window[SDK_GLOBAL]) {
-      return Promise.resolve(window[SDK_GLOBAL])
-    }
-    return new Promise((resolve, reject) => {
-      loadScript(SDK_URL, err => {
-        if (err) reject(err)
-        resolve(window[SDK_GLOBAL])
-      })
-    })
-  }
   load (url) {
     const { playsinline, onError } = this.props
     const isChannel = MATCH_CHANNEL_URL.test(url)
@@ -44,7 +32,7 @@ export default class YouTube extends Base {
       return
     }
     this.loadingSDK = true
-    this.getSDK().then(Twitch => {
+    getSDK(SDK_URL, SDK_GLOBAL).then(Twitch => {
       this.player = new Twitch.Player(this.playerID, {
         video: isChannel ? '' : id,
         channel: isChannel ? id : '',

diff --git a/src/players/Vimeo.js b/src/players/Vimeo.js
@@ -1,7 +1,7 @@
 import React from 'react'
-import loadScript from 'load-script'
 
 import Base from './Base'
+import { getSDK } from '../utils'
 
 const SDK_URL = 'https://player.vimeo.com/api/player.js'
 const SDK_GLOBAL = 'Vimeo'
@@ -29,17 +29,6 @@ export default class Vimeo extends Base {
     }
     super.componentDidMount()
   }
-  getSDK () {
-    if (window[SDK_GLOBAL]) {
-      return Promise.resolve(window[SDK_GLOBAL])
-    }
-    return new Promise((resolve, reject) => {
-      loadScript(SDK_URL, err => {
-        if (err) reject(err)
-        else resolve(window[SDK_GLOBAL])
-      })
-    })
-  }
   load (url) {
     const id = url.match(MATCH_URL)[3]
     this.duration = null
@@ -52,7 +41,7 @@ export default class Vimeo extends Base {
       return
     }
     this.loadingSDK = true
-    this.getSDK().then(Vimeo => {
+    getSDK(SDK_URL, SDK_GLOBAL).then(Vimeo => {
       this.player = new Vimeo.Player(this.container, {
         ...DEFAULT_OPTIONS,
         ...this.props.vimeoConfig.playerOptions,

diff --git a/src/players/Wistia.js b/src/players/Wistia.js
@@ -1,7 +1,7 @@
 import React from 'react'
-import loadScript from 'load-script'
 
 import Base from './Base'
+import { getSDK } from '../utils'
 
 const SDK_URL = '//fast.wistia.com/assets/external/E-v1.js'
 const SDK_GLOBAL = 'Wistia'
@@ -12,24 +12,12 @@ export default class Wistia extends Base {
   static canPlay (url) {
     return MATCH_URL.test(url)
   }
-  getSDK () {
-    return new Promise((resolve, reject) => {
-      if (window[SDK_GLOBAL]) {
-        resolve()
-      } else {
-        loadScript(SDK_URL, (err, script) => {
-          if (err) reject(err)
-          resolve(script)
-        })
-      }
-    })
-  }
   getID (url) {
     return url && url.match(MATCH_URL)[4]
   }
   load (url) {
     const { onStart, onPause, onSeek, onEnded, wistiaConfig } = this.props
-    this.getSDK().then(() => {
+    getSDK(SDK_URL, SDK_GLOBAL).then(() => {
       window._wq = window._wq || []
       window._wq.push({
         id: this.getID(url),

diff --git a/src/players/YouTube.js b/src/players/YouTube.js
@@ -1,8 +1,7 @@
 import React from 'react'
-import loadScript from 'load-script'
 
 import Base from './Base'
-import { parseStartTime } from '../utils'
+import { getSDK, parseStartTime } from '../utils'
 
 const SDK_URL = 'https://www.youtube.com/iframe_api'
 const SDK_GLOBAL = 'YT'
@@ -30,21 +29,6 @@ export default class YouTube extends Base {
     }
     super.componentDidMount()
   }
-  getSDK () {
-    if (window[SDK_GLOBAL] && window[SDK_GLOBAL].loaded) {
-      return Promise.resolve(window[SDK_GLOBAL])
-    }
-    return new Promise((resolve, reject) => {
-      const previousOnReady = window[SDK_GLOBAL_READY]
-      window[SDK_GLOBAL_READY] = function () {
-        if (previousOnReady) previousOnReady()
-        resolve(window[SDK_GLOBAL])
-      }
-      loadScript(SDK_URL, err => {
-        if (err) reject(err)
-      })
-    })
-  }
   load (url) {
     const { playsinline, controls, youtubeConfig, onError } = this.props
     const id = url && url.match(MATCH_URL)[1]
@@ -60,7 +44,7 @@ export default class YouTube extends Base {
       return
     }
     this.loadingSDK = true
-    this.getSDK().then(YT => {
+    getSDK(SDK_URL, SDK_GLOBAL, SDK_GLOBAL_READY, YT => YT.loaded).then(YT => {
       this.player = new YT.Player(this.container, {
         width: '100%',
         height: '100%',

diff --git a/src/utils.js b/src/utils.js
@@ -1,3 +1,5 @@
+import loadScript from 'load-script'
+
 const MATCH_START_QUERY = /[?&#](?:start|t)=([0-9hms]+)/
 const MATCH_START_STAMP = /(\d+)(h|m|s)/g
 const MATCH_NUMERIC = /^\d+$/
@@ -35,3 +37,26 @@ function parseStartStamp (stamp) {
 export function randomString () {
   return Math.random().toString(36).substr(2, 5)
 }
+
+// Util function to load an external SDK
+// or return the SDK if it is already loaded
+export function getSDK (url, sdkGlobal, sdkReady = null, isLoaded = () => true) {
+  if (window[sdkGlobal] && isLoaded(window[sdkGlobal])) {
+    return Promise.resolve(window[sdkGlobal])
+  }
+  return new Promise((resolve, reject) => {
+    if (sdkReady) {
+      const previousOnReady = window[sdkReady]
+      window[sdkReady] = function () {
+        if (previousOnReady) previousOnReady()
+        resolve(window[sdkGlobal])
+      }
+    }
+    loadScript(url, err => {
+      if (err) reject(err)
+      if (!sdkReady) {
+        resolve(window[sdkGlobal])
+      }
+    })
+  })
+}