Feature request: lazy players

Motivation: On my page I don’t know what player will be used in each particular case and many of the players will never be used, so I would like to lazily load only one player in each particular case.

Something like this:

import React, { Suspense, lazy } from 'react'
import { whichPlayerCanPlay } from 'react-player'

const players = {
  youtube: () => import('react-player/lib/players/YouTube'),
  vimeo: () => import('react-player/lib/players/Vimeo'),
  file: () => import('react-player/lib/players/FilePlayer')
}

const MyPlayer = (props) => {
  const { url } = props

  const playerName = whichPlayerCanPlay(url, { players: ['youtube', 'vimeo', 'file'] })

  if (!playerName) {
    return null
  }

  const LazyPlayer = lazy(players[playerName]);

  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyPlayer {...props} />
    </Suspense>
  )
}

The problem here is that the canPlay logic is inside of each individual player file and to know whether a player is capable of playing the url I need to download it. Could the canPlay logic be extracted from each individual player to a separate file?

[cookpete]

This should be fixed in v2.0.1

[cookpete]

Hey @trurl-master, yeah this has been on my radar for a long time. It would reduce the bundle size massively and essentially render the single player imports redundant. I can look at implementing this, but don’t have an exact timeline.