Remove preload support

- It’s quite a hacky solution - Autoplay policy changes render it buggy/redundant - Unnecessary bytes/computation for the vast majority of users Breaking changes: - Removes support for preloading players
cookpete · Apr 12, 2020 · 1baa227 · 1baa227
1 parent f9411eb
commit 1baa227
Show file tree

Hide file tree

Showing 8 changed files with 23 additions and 111 deletions.
diff --git a/README.md b/README.md
@@ -132,20 +132,16 @@ Settings for each player live under different keys:
 
 Key | Options
 --- | -------
-`youtube` | `playerVars`: Override the [default player vars](https://developers.google.com/youtube/player_parameters?playerVersion=HTML5)<br />`embedOptions`: Override the [default embed options](https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player)<br />`preload`: Used for [preloading](#preloading)
+`youtube` | `playerVars`: Override the [default player vars](https://developers.google.com/youtube/player_parameters?playerVersion=HTML5)<br />`embedOptions`: Override the [default embed options](https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player)
 `facebook` | `appId`: Your own [Facebook app ID](https://developers.facebook.com/docs/apps/register#app-id)<br />`version`: Facebook SDK version<br />`playerId`: Override player ID for consistent server-side rendering (use with [`react-uid`](https://github.com/thearnica/react-uid))
-`soundcloud` | `options`: Override the [default player options](https://developers.soundcloud.com/docs/api/html5-widget#params)<br />`preload`: Used for [preloading](#preloading)
-`vimeo` | `playerOptions`: Override the [default params](https://developer.vimeo.com/player/sdk/embed)<br />`preload`: Used for [preloading](#preloading)
+`soundcloud` | `options`: Override the [default player options](https://developers.soundcloud.com/docs/api/html5-widget#params)
+`vimeo` | `playerOptions`: Override the [default params](https://developer.vimeo.com/player/sdk/embed)
 `wistia` | `options`: Override the [default player options](https://wistia.com/doc/embed-options#options_list)
 `mixcloud` | `options`: Override the [default player options](https://www.mixcloud.com/developers/widget/#methods)
-`dailymotion` | `params`: Override the [default player vars](https://developer.dailymotion.com/player#player-parameters)<br />`preload`: Used for [preloading](#preloading)
+`dailymotion` | `params`: Override the [default player vars](https://developer.dailymotion.com/player#player-parameters)
 `twitch` | `options`: Override the [default player options](https://dev.twitch.tv/docs/embed)<br />`playerId`: Override player ID for consistent server-side rendering (use with [`react-uid`](https://github.com/thearnica/react-uid))
 `file` | `attributes`: Apply [element attributes](https://developer.mozilla.org/en/docs/Web/HTML/Element/video#Attributes)<br />`forceVideo`: Always render a `<video>` element<br />`forceAudio`: Always render an `<audio>` element<br />`forceHLS`: Use [hls.js](https://github.com/video-dev/hls.js) for HLS streams<br />`forceDASH`: Always use [dash.js](https://github.com/Dash-Industry-Forum/dash.js) for DASH streams<br />`hlsOptions`: Override the [default `hls.js` options](https://github.com/video-dev/hls.js/blob/master/docs/API.md#fine-tuning)<br />`hlsVersion`: Override the [`hls.js`](https://github.com/video-dev/hls.js) version loaded from [`cdnjs`](https://cdnjs.com/libraries/hls.js), default: `0.13.1`<br />`dashVersion`: Override the [`dash.js`](https://github.com/Dash-Industry-Forum/dash.js) version loaded from [`cdnjs`](https://cdnjs.com/libraries/dashjs), default: `2.9.2`
 
-##### Preloading
-
-When `preload` is set to `true` for players that support it, a short, silent video is played in the background when `ReactPlayer` first mounts. This fixes a [bug](https://github.com/CookPete/react-player/issues/7) where videos would not play when loaded in a background browser tab.
-
 ### Methods
 
 #### Static Methods

diff --git a/index.d.ts b/index.d.ts
@@ -15,13 +15,11 @@ export interface TrackProps {
 
 export interface SoundCloudConfig {
   options?: Object;
-  preload?: boolean;
 }
 
 export interface YouTubeConfig {
   playerVars?: Object;
   embedOptions?: Object;
-  preload?: boolean;
 }
 
 export interface FacebookConfig {
@@ -32,12 +30,10 @@ export interface FacebookConfig {
 
 export interface DailyMotionConfig {
   params?: Object;
-  preload?: boolean;
 }
 
 export interface VimeoConfig {
   playerOptions?: Object;
-  preload?: boolean;
 }
 
 export interface WistiaConfig {

diff --git a/src/ReactPlayer.js b/src/ReactPlayer.js
@@ -4,7 +4,6 @@ import { propTypes, defaultProps, DEPRECATED_CONFIG_PROPS } from './props'
 import { getConfig, omit, isEqual } from './utils'
 import players from './players'
 import Player from './Player'
-import renderPreloadPlayers from './preload'
 
 const FilePlayer = lazy(() => import('./players/FilePlayer'))
 const Preview = lazy(() => import('./Preview'))
@@ -139,27 +138,17 @@ export default class ReactPlayer extends Component {
     )
   }
 
-  sortPlayers (a, b) {
-    // Retain player order to prevent weird iframe behaviour when switching players
-    if (a && b) {
-      return a.key < b.key ? -1 : 1
-    }
-    return 0
-  }
-
   render () {
-    const { url, controls, style, width, height, light, playIcon, wrapper: Wrapper } = this.props
+    const { url, style, width, height, light, playIcon, wrapper: Wrapper } = this.props
     const showPreview = this.state.showPreview && url
     const otherProps = omit(this.props, SUPPORTED_PROPS, DEPRECATED_CONFIG_PROPS)
     const activePlayer = this.getActivePlayer(url)
-    const renderedActivePlayer = this.renderActivePlayer(url, activePlayer)
-    const preloadPlayers = renderPreloadPlayers(url, controls, this.config)
-    const players = [renderedActivePlayer, ...preloadPlayers].sort(this.sortPlayers)
+    const player = this.renderActivePlayer(url, activePlayer)
     const preview = <Preview url={url} light={light} playIcon={playIcon} onClick={this.handleClickPreview} />
     return (
       <Wrapper ref={this.wrapperRef} style={{ ...style, width, height }} {...otherProps}>
         <Suspense fallback={null}>
-          {showPreview ? preview : players}
+          {showPreview && url ? preview : player}
         </Suspense>
       </Wrapper>
     )

diff --git a/src/players/index.js b/src/players/index.js
@@ -46,15 +46,11 @@ const canPlayFile = url => {
 export default [
   {
     canPlay: url => MATCH_URL_YOUTUBE.test(url),
-    Player: lazy(() => import('./YouTube')),
-    configKey: 'youtube',
-    preloadUrl: 'https://www.youtube.com/watch?v=GlCmAC4MHek'
+    Player: lazy(() => import('./YouTube'))
   },
   {
     canPlay: url => MATCH_URL_SOUNDCLOUD.test(url),
-    Player: lazy(() => import('./SoundCloud')),
-    configKey: 'soundcloud',
-    preloadUrl: 'https://soundcloud.com/seucheu/john-cage-433-8-bit-version'
+    Player: lazy(() => import('./SoundCloud'))
   },
   {
     canPlay: url => {
@@ -63,9 +59,7 @@ export default [
       }
       return MATCH_URL_VIMEO.test(url)
     },
-    Player: lazy(() => import('./Vimeo')),
-    configKey: 'vimeo',
-    preloadUrl: 'https://vimeo.com/300970506'
+    Player: lazy(() => import('./Vimeo'))
   },
   {
     canPlay: url => MATCH_URL_FACEBOOK.test(url),
@@ -85,9 +79,7 @@ export default [
   },
   {
     canPlay: url => MATCH_URL_DAILYMOTION.test(url),
-    Player: lazy(() => import('./DailyMotion')),
-    configKey: 'dailymotion',
-    preloadUrl: 'http://www.dailymotion.com/video/xqdpyk'
+    Player: lazy(() => import('./DailyMotion'))
   },
   {
     canPlay: url => MATCH_URL_MIXCLOUD.test(url),

diff --git a/src/preload.js b/src/preload.js
diff --git a/src/props.js b/src/props.js
@@ -25,26 +25,22 @@ export const propTypes = {
   ]),
   config: shape({
     soundcloud: shape({
-      options: object,
-      preload: bool
+      options: object
     }),
     youtube: shape({
       playerVars: object,
-      embedOptions: object,
-      preload: bool
+      embedOptions: object
     }),
     facebook: shape({
       appId: string,
       version: string,
       playerId: string
     }),
     dailymotion: shape({
-      params: object,
-      preload: bool
+      params: object
     }),
     vimeo: shape({
-      playerOptions: object,
-      preload: bool
+      playerOptions: object
     }),
     file: shape({
       attributes: object,
@@ -121,8 +117,7 @@ export const defaultProps = {
         iv_load_policy: 3,
         modestbranding: 1
       },
-      embedOptions: {},
-      preload: false
+      embedOptions: {}
     },
     facebook: {
       appId: '1309697205772819',
@@ -133,17 +128,15 @@ export const defaultProps = {
       params: {
         api: 1,
         'endscreen-enable': false
-      },
-      preload: false
+      }
     },
     vimeo: {
       playerOptions: {
         autopause: false,
         byline: false,
         portrait: false,
         title: false
-      },
-      preload: false
+      }
     },
     file: {
       attributes: {},

diff --git a/test/ReactPlayer/render.js b/test/ReactPlayer/render.js
@@ -5,10 +5,6 @@ import Adapter from 'enzyme-adapter-react-16'
 import ReactPlayer from '../../src/ReactPlayer'
 import Player from '../../src/Player'
 import FilePlayer from '../../src/players/FilePlayer'
-import DailyMotion from '../../src/players/DailyMotion'
-import SoundCloud from '../../src/players/SoundCloud'
-import Vimeo from '../../src/players/Vimeo'
-import YouTube from '../../src/players/YouTube'
 
 global.window = { MediaStream: Object }
 
@@ -29,23 +25,3 @@ test.skip('fallback player', t => {
     <Player activePlayer={FilePlayer} onReady={wrapper.instance().handleReady} />
   ))
 })
-
-test.skip('preload players', t => {
-  const config = {
-    youtube: { preload: true },
-    soundcloud: { preload: true },
-    vimeo: { preload: true },
-    dailymotion: { preload: true }
-  }
-  const wrapper = shallow(<ReactPlayer config={config} />)
-  const props = {
-    playing: true,
-    muted: true,
-    display: 'none'
-  }
-  t.true(wrapper.children().length === 4)
-  t.true(wrapper.childAt(0).matchesElement(<Player key='DailyMotion' activePlayer={DailyMotion} {...props} />))
-  t.true(wrapper.childAt(1).matchesElement(<Player key='SoundCloud' activePlayer={SoundCloud} {...props} />))
-  t.true(wrapper.childAt(2).matchesElement(<Player key='Vimeo' activePlayer={Vimeo} {...props} />))
-  t.true(wrapper.childAt(3).matchesElement(<Player key='YouTube' activePlayer={YouTube} {...props} />))
-})
diff --git a/test/utils/getConfig.js b/test/utils/getConfig.js
@@ -9,8 +9,7 @@ test('merges configs', t => {
         playerVars: {
           autoplay: 0,
           playsinline: 1
-        },
-        preload: false
+        }
       }
     }
   }
@@ -20,8 +19,7 @@ test('merges configs', t => {
         playerVars: {
           playsinline: 0,
           showinfo: 1
-        },
-        preload: true
+        }
       }
     }
   }
@@ -32,8 +30,7 @@ test('merges configs', t => {
         autoplay: 0,
         playsinline: 0,
         showinfo: 1
-      },
-      preload: true
+      }
     }
   })
 })
@@ -46,8 +43,7 @@ test('converts old style config', t => {
       playerVars: {
         playsinline: 0,
         showinfo: 1
-      },
-      preload: true
+      }
     }
   }
   const config = getConfig(props, { config: {} }, true)
@@ -56,8 +52,7 @@ test('converts old style config', t => {
       playerVars: {
         playsinline: 0,
         showinfo: 1
-      },
-      preload: true
+      }
     }
   })
   t.true(stub.calledOnce)