Selective player imports for decreasing bundle size

[BuffaloBuffalo]

I'm using react-player within a larger react app using webpack for bundling. Is there any way to organize the imports in a way to selectively bundle only certain players, so that webpack can properly tree-shake out the unused players? Currently I'm only utilizing the file loading and youtube players, however all the players are bundled into prod build due to the players import in ReactPlayer:

import players from './players'

Essentially what I'm looking for is either a specialized import (similar to what some of the react-router libs recommend):

import useScroll from 'react-router-scroll/lib/useScroll';
// instead of
import { useScroll } from 'react-router-scroll';

that may look like

import YouTubeReactPlayer from 'react-player/lib/?';

Or an API where the parent component explicitly states the Player types that the given URL could be

import FilePlayer from 'react-player/players/FilePlayer';
import YoutubePlayer from 'react-player/players/YoutubePlayer';

<ReactPlayer players={[YoutubePlayer, FilePlayer]} {...props} />

I realize this is a niche request since I'm to the point of micro-optimizing third party libraries, but figured I'd ask before digging further into it.

[cookpete]

You could import the Player wrapper directly and pass in an activePlayer:

import Player from 'react-player/lib/Player'
import YouTube from 'react-player/lib/players/YouTube'

return <Player activePlayer={YouTube} />

Although you would lose out on the functions that ReactPlayer.js provides, like onProgress and preload config.

A "proper" solution would need an update to the codebase, but I like the idea.

[BuffaloBuffalo]

I haven't fully vetted this yet (still some failing tests), but I have a proof of concept in this branch.

[cookpete]

I don't dislike your solution, but I wonder if we can achieve the same thing in a less intrusive way.

We could move the onProgress logic into Player.js instead of ReactPlayer.js. Then we could do

import Player from 'react-player/lib/Player'
import YouTube from 'react-player/lib/players/YouTube'

return <Player activePlayer={YouTube} />

// Or provide a shortcut like
import YouTubePlayer from 'react-player/youtube'

The only thing I think we would miss from ReactPlayer.js is the preloading logic, but if you are only using one player I can't really see it ever being needed. If users want preloading then they can just use the normal ReactPlayer component and make peace with the extra bytes.

[cookpete]

@BuffaloBuffalo I've pushed my attempt at solving this to the single-players branch. Check it out and let me know your thoughts. Basically it allows you to:

import YouTubePlayer from 'react-player/lib/players/YouTube'

<YouTubePlayer 
  url={url}
  playing
  controls
  // Any other ReactPlayer props will work here, apart from preload config
/>

[cookpete]

@BuffaloBuffalo any thoughts before I merge it?

[BuffaloBuffalo]

I apologize for not getting back to you sooner -- Yes this exactly fits the bill!

[cookpete]

Added in 1.2.0. See readme section for details and example.

[cookpete]

This will happen automatically in 2.0.0 (lazy loading of relevant players), try out the alpha release:

npm install react-player@2.0.0-alpha.0