Move canPlay logic into patterns.js

src/patterns.js

@@ -1,3 +1,5 @@
+import { isMediaStream } from './utils'
+
 export const MATCH_URL_YOUTUBE = /(?:youtu\.be\/|youtube(?:-nocookie)?\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})|youtube\.com\/playlist\?list=|youtube\.com\/user\//
 export const MATCH_URL_SOUNDCLOUD = /(?:soundcloud\.com|snd\.sc)\/[^.]+$/
 export const MATCH_URL_VIMEO = /vimeo\.com\/.+/
@@ -13,3 +15,45 @@ export const AUDIO_EXTENSIONS = /\.(m4a|mp4a|mpga|mp2|mp2a|mp3|m2a|m3a|wav|weba|
 export const VIDEO_EXTENSIONS = /\.(mp4|og[gv]|webm|mov|m4v)($|\?)/i
 export const HLS_EXTENSIONS = /\.(m3u8)($|\?)/i
 export const DASH_EXTENSIONS = /\.(mpd)($|\?)/i
+
+const canPlayFile = url => {
+  if (url instanceof Array) {
+    for (const item of url) {
+      if (typeof item === 'string' && canPlayFile(item)) {
+        return true
+      }
+      if (canPlayFile(item.src)) {
+        return true
+      }
+    }
+    return false
+  }
+  if (isMediaStream(url)) {
+    return true
+  }
+  return (
+    AUDIO_EXTENSIONS.test(url) ||
+    VIDEO_EXTENSIONS.test(url) ||
+    HLS_EXTENSIONS.test(url) ||
+    DASH_EXTENSIONS.test(url)
+  )
+}
+
+export const canPlay = {
+  youtube: url => {
+    if (url instanceof Array) {
+      return url.every(item => MATCH_URL_YOUTUBE.test(item))
+    }
+    return MATCH_URL_YOUTUBE.test(url)
+  },
+  soundcloud: url => MATCH_URL_SOUNDCLOUD.test(url) && !AUDIO_EXTENSIONS.test(url),
+  vimeo: url => MATCH_URL_VIMEO.test(url) && !VIDEO_EXTENSIONS.test(url) && !HLS_EXTENSIONS.test(url),
+  facebook: url => MATCH_URL_FACEBOOK.test(url),
+  streamable: url => MATCH_URL_STREAMABLE.test(url),
+  wistia: url => MATCH_URL_WISTIA.test(url),
+  twitch: url => MATCH_URL_TWITCH_VIDEO.test(url) || MATCH_URL_TWITCH_CHANNEL.test(url),
+  dailymotion: url => MATCH_URL_DAILYMOTION.test(url),
+  mixcloud: url => MATCH_URL_MIXCLOUD.test(url),
+  vidyard: url => MATCH_URL_VIDYARD.test(url),
+  file: canPlayFile
+}

src/players/DailyMotion.js

@@ -1,14 +1,15 @@
 import React, { Component } from 'react'
 
 import { callPlayer, getSDK, parseStartTime } from '../utils'
-import { MATCH_URL_DAILYMOTION } from '../patterns'
+import { canPlay, MATCH_URL_DAILYMOTION } from '../patterns'
 
 const SDK_URL = 'https://api.dmcdn.net/all.js'
 const SDK_GLOBAL = 'DM'
 const SDK_GLOBAL_READY = 'dmAsyncInit'
 
 export default class DailyMotion extends Component {
   static displayName = 'DailyMotion'
+  static canPlay = canPlay.dailymotion
   static loopOnEnded = true
   callPlayer = callPlayer
 

src/players/Facebook.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react'
 
 import { callPlayer, getSDK, randomString } from '../utils'
+import { canPlay } from '../patterns'
 
 const SDK_URL = 'https://connect.facebook.net/en_US/sdk.js'
 const SDK_GLOBAL = 'FB'
@@ -9,6 +10,7 @@ const PLAYER_ID_PREFIX = 'facebook-player-'
 
 export default class Facebook extends Component {
   static displayName = 'Facebook'
+  static canPlay = canPlay.facebook
   static loopOnEnded = true
   callPlayer = callPlayer
   playerID = this.props.config.playerId || `${PLAYER_ID_PREFIX}${randomString()}`

src/players/FilePlayer.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 
 import { getSDK, isMediaStream, supportsWebKitPresentationMode } from '../utils'
-import { AUDIO_EXTENSIONS, HLS_EXTENSIONS, DASH_EXTENSIONS } from '../patterns'
+import { canPlay, AUDIO_EXTENSIONS, HLS_EXTENSIONS, DASH_EXTENSIONS } from '../patterns'
 
 const IOS = typeof navigator !== 'undefined' && /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream
 const HLS_SDK_URL = 'https://cdn.jsdelivr.net/npm/hls.js@VERSION/dist/hls.min.js'
@@ -12,6 +12,7 @@ const MATCH_DROPBOX_URL = /www\.dropbox\.com\/.+/
 
 export default class FilePlayer extends Component {
   static displayName = 'FilePlayer'
+  static canPlay = canPlay.file
 
   componentDidMount () {
     this.props.onMount && this.props.onMount(this)

src/players/Mixcloud.js

@@ -1,13 +1,14 @@
 import React, { Component } from 'react'
 
 import { callPlayer, getSDK, queryString } from '../utils'
-import { MATCH_URL_MIXCLOUD } from '../patterns'
+import { canPlay, MATCH_URL_MIXCLOUD } from '../patterns'
 
 const SDK_URL = 'https://widget.mixcloud.com/media/js/widgetApi.js'
 const SDK_GLOBAL = 'Mixcloud'
 
 export default class Mixcloud extends Component {
   static displayName = 'Mixcloud'
+  static canPlay = canPlay.mixcloud
   static loopOnEnded = true
   callPlayer = callPlayer
   duration = null

src/players/SoundCloud.js

@@ -1,12 +1,14 @@
 import React, { Component } from 'react'
 
 import { callPlayer, getSDK } from '../utils'
+import { canPlay } from '../patterns'
 
 const SDK_URL = 'https://w.soundcloud.com/player/api.js'
 const SDK_GLOBAL = 'SC'
 
 export default class SoundCloud extends Component {
   static displayName = 'SoundCloud'
+  static canPlay = canPlay.soundcloud
   static loopOnEnded = true
   callPlayer = callPlayer
   duration = null

src/players/Streamable.js

@@ -1,13 +1,14 @@
 import React, { Component } from 'react'
 
 import { callPlayer, getSDK } from '../utils'
-import { MATCH_URL_STREAMABLE } from '../patterns'
+import { canPlay, MATCH_URL_STREAMABLE } from '../patterns'
 
 const SDK_URL = 'https://cdn.embed.ly/player-0.1.0.min.js'
 const SDK_GLOBAL = 'playerjs'
 
 export default class Streamable extends Component {
   static displayName = 'Streamable'
+  static canPlay = canPlay.streamable
   callPlayer = callPlayer
   duration = null
   currentTime = null

src/players/Twitch.js

@@ -1,14 +1,15 @@
 import React, { Component } from 'react'
 
 import { callPlayer, getSDK, randomString } from '../utils'
-import { MATCH_URL_TWITCH_CHANNEL, MATCH_URL_TWITCH_VIDEO } from '../patterns'
+import { canPlay, MATCH_URL_TWITCH_CHANNEL, MATCH_URL_TWITCH_VIDEO } from '../patterns'
 
 const SDK_URL = 'https://player.twitch.tv/js/embed/v1.js'
 const SDK_GLOBAL = 'Twitch'
 const PLAYER_ID_PREFIX = 'twitch-player-'
 
 export default class Twitch extends Component {
   static displayName = 'Twitch'
+  static canPlay = canPlay.twitch
   static loopOnEnded = true
   callPlayer = callPlayer
   playerID = this.props.config.playerId || `${PLAYER_ID_PREFIX}${randomString()}`

src/players/Vidyard.js

@@ -1,14 +1,15 @@
 import React, { Component } from 'react'
 
 import { callPlayer, getSDK } from '../utils'
-import { MATCH_URL_VIDYARD } from '../patterns'
+import { canPlay, MATCH_URL_VIDYARD } from '../patterns'
 
 const SDK_URL = 'https://play.vidyard.com/embed/v4.js'
 const SDK_GLOBAL = 'VidyardV4'
 const SDK_GLOBAL_READY = 'onVidyardAPI'
 
 export default class Vidyard extends Component {
   static displayName = 'Vidyard'
+  static canPlay = canPlay.vidyard
   callPlayer = callPlayer
 
   componentDidMount () {

src/players/Vimeo.js

@@ -1,12 +1,14 @@
 import React, { Component } from 'react'
 
 import { callPlayer, getSDK } from '../utils'
+import { canPlay } from '../patterns'
 
 const SDK_URL = 'https://player.vimeo.com/api/player.js'
 const SDK_GLOBAL = 'Vimeo'
 
 export default class Vimeo extends Component {
   static displayName = 'Vimeo'
+  static canPlay = canPlay.vimeo
   static forceLoad = true // Prevent checking isLoading when URL changes
   callPlayer = callPlayer
   duration = null

src/players/Wistia.js

@@ -1,13 +1,14 @@
 import React, { Component } from 'react'
 
 import { callPlayer, getSDK } from '../utils'
-import { MATCH_URL_WISTIA } from '../patterns'
+import { canPlay, MATCH_URL_WISTIA } from '../patterns'
 
 const SDK_URL = 'https://fast.wistia.com/assets/external/E-v1.js'
 const SDK_GLOBAL = 'Wistia'
 
 export default class Wistia extends Component {
   static displayName = 'Wistia'
+  static canPlay = canPlay.wistia
   static loopOnEnded = true
   callPlayer = callPlayer
 

src/players/YouTube.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 
 import { callPlayer, getSDK, parseStartTime, parseEndTime } from '../utils'
-import { MATCH_URL_YOUTUBE } from '../patterns'
+import { canPlay, MATCH_URL_YOUTUBE } from '../patterns'
 
 const SDK_URL = 'https://www.youtube.com/iframe_api'
 const SDK_GLOBAL = 'YT'
@@ -13,6 +13,7 @@ const NOCOOKIE_HOST = 'https://www.youtube-nocookie.com'
 
 export default class YouTube extends Component {
   static displayName = 'YouTube'
+  static canPlay = canPlay.youtube
   callPlayer = callPlayer
 
   componentDidMount () {

src/players/index.js

@@ -1,108 +1,63 @@
 import { lazy } from 'react'
-import { isMediaStream, supportsWebKitPresentationMode } from '../utils'
-
-import {
-  MATCH_URL_YOUTUBE,
-  MATCH_URL_SOUNDCLOUD,
-  MATCH_URL_VIMEO,
-  MATCH_URL_FACEBOOK,
-  MATCH_URL_STREAMABLE,
-  MATCH_URL_WISTIA,
-  MATCH_URL_TWITCH_VIDEO,
-  MATCH_URL_TWITCH_CHANNEL,
-  MATCH_URL_DAILYMOTION,
-  MATCH_URL_MIXCLOUD,
-  MATCH_URL_VIDYARD,
-  AUDIO_EXTENSIONS,
-  VIDEO_EXTENSIONS,
-  HLS_EXTENSIONS,
-  DASH_EXTENSIONS
-} from '../patterns'
-
-const canPlayFile = url => {
-  if (url instanceof Array) {
-    for (const item of url) {
-      if (typeof item === 'string' && canPlayFile(item)) {
-        return true
-      }
-      if (canPlayFile(item.src)) {
-        return true
-      }
-    }
-    return false
-  }
-  if (isMediaStream(url)) {
-    return true
-  }
-  return (
-    AUDIO_EXTENSIONS.test(url) ||
-    VIDEO_EXTENSIONS.test(url) ||
-    HLS_EXTENSIONS.test(url) ||
-    DASH_EXTENSIONS.test(url)
-  )
-}
+import { supportsWebKitPresentationMode } from '../utils'
+import { canPlay, AUDIO_EXTENSIONS } from '../patterns'
 
 export default [
   {
     key: 'youtube',
-    canPlay: url => {
-      if (url instanceof Array) {
-        return url.every(item => MATCH_URL_YOUTUBE.test(item))
-      }
-      return MATCH_URL_YOUTUBE.test(url)
-    },
+    canPlay: canPlay.youtube,
     lazyPlayer: lazy(() => import(/* webpackChunkName: 'reactPlayerYouTube' */'./YouTube'))
   },
   {
     key: 'soundcloud',
-    canPlay: url => MATCH_URL_SOUNDCLOUD.test(url) && !AUDIO_EXTENSIONS.test(url),
+    canPlay: canPlay.soundcloud,
     lazyPlayer: lazy(() => import(/* webpackChunkName: 'reactPlayerSoundCloud' */'./SoundCloud'))
   },
   {
     key: 'vimeo',
-    canPlay: url => MATCH_URL_VIMEO.test(url) && !VIDEO_EXTENSIONS.test(url) && !HLS_EXTENSIONS.test(url),
+    canPlay: canPlay.vimeo,
     lazyPlayer: lazy(() => import(/* webpackChunkName: 'reactPlayerVimeo' */'./Vimeo'))
   },
   {
     key: 'facebook',
-    canPlay: url => MATCH_URL_FACEBOOK.test(url),
+    canPlay: canPlay.facebook,
     lazyPlayer: lazy(() => import(/* webpackChunkName: 'reactPlayerFacebook' */'./Facebook'))
   },
   {
     key: 'streamable',
-    canPlay: url => MATCH_URL_STREAMABLE.test(url),
+    canPlay: canPlay.streamable,
     lazyPlayer: lazy(() => import(/* webpackChunkName: 'reactPlayerStreamable' */'./Streamable'))
   },
   {
     key: 'wistia',
-    canPlay: url => MATCH_URL_WISTIA.test(url),
+    canPlay: canPlay.wistia,
     lazyPlayer: lazy(() => import(/* webpackChunkName: 'reactPlayerWistia' */'./Wistia'))
   },
   {
     key: 'twitch',
-    canPlay: url => MATCH_URL_TWITCH_VIDEO.test(url) || MATCH_URL_TWITCH_CHANNEL.test(url),
+    canPlay: canPlay.twitch,
     lazyPlayer: lazy(() => import(/* webpackChunkName: 'reactPlayerTwitch' */'./Twitch'))
   },
   {
     key: 'dailymotion',
-    canPlay: url => MATCH_URL_DAILYMOTION.test(url),
+    canPlay: canPlay.dailymotion,
     lazyPlayer: lazy(() => import(/* webpackChunkName: 'reactPlayerDailyMotion' */'./DailyMotion'))
   },
   {
     key: 'mixcloud',
-    canPlay: url => MATCH_URL_MIXCLOUD.test(url),
+    canPlay: canPlay.mixcloud,
     lazyPlayer: lazy(() => import(/* webpackChunkName: 'reactPlayerMixcloud' */'./Mixcloud'))
   },
   {
     key: 'vidyard',
-    canPlay: url => MATCH_URL_VIDYARD.test(url),
+    canPlay: canPlay.vidyard,
     lazyPlayer: lazy(() => import(/* webpackChunkName: 'reactPlayerVidyard' */'./Vidyard'))
   },
   {
     key: 'file',
-    canPlay: canPlayFile,
+    canPlay: canPlay.file,
     canEnablePIP: url => {
-      return canPlayFile(url) && (document.pictureInPictureEnabled || supportsWebKitPresentationMode()) && !AUDIO_EXTENSIONS.test(url)
+      return canPlay.file(url) && (document.pictureInPictureEnabled || supportsWebKitPresentationMode()) && !AUDIO_EXTENSIONS.test(url)
     },
     lazyPlayer: lazy(() => import(/* webpackChunkName: 'reactPlayerFilePlayer' */'./FilePlayer'))
   }