React-player: Package weighs 65kb in build - Reducing bundle size of the package in a Create-React-App Typescript project.

[carpben]

We use the component in an important page, where SEO and load speed are important. We would like to reduce bundle size. I am aware of #311. But when I cahnge imports to

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

types are not supported at all.
I guess there are two solutions:

1. Updating the types file, and typing objects in the "lib" path.
2. Alternatively, getting an API for the Player object.
   Any suggestions?

[carpben]

As far as I can remember I couldn't find an API for using the Youtube player by itself.

[cookpete]

The props/types for the individual players are pretty much exactly the same as ReactPlayer. Is there a TypeScript-y way to re-use a typings file for another component? It would be good to avoid duplicating the typings file for each standalone player.

[carpben]

What do you mean by

Typescript-y

?

It seems that Player has the same API as ReactPlayer, but accepts one additional prop - activePlayer. Is that correct?
I recommend creating a generic base Player class.

export default class BasePlayer<P> extends React.Component<BasePlayerProps & P, any> {
  static canPlay(url: string): boolean;
  static canEnablePIP(url: string): boolean;
  static addCustomPlayer(player: ReactPlayer): void;
  static removeCustomPlayers(): void;
  seekTo(amount: number, type?: 'seconds' | 'fraction'): void;
  getCurrentTime(): number;
  getDuration(): number;
  getInternalPlayer(key?: string): Object;
}

Then type the players with the additional Props the require

class ReactPlayer extends BasePlayer<{}>{}

interface UniquePlayerProps {
   activePlayer: ActivePlayer
}
class Player extends BasePlayer<UniquePlayerProps>{}

[cookpete]

I'll happily look at PRs that fix this.

[cookpete]

This should be partly addressed by the 2.0.0 alpha, which uses lazy player loading:

npm install [email protected]

[wbobeirne]

If anyone runs into this as I did and doesn't want to hop on the alpha, you can easily skirt around this by creating a d.ts file for the player you want. It's just a few lines:

declare module "react-player/lib/players/FilePlayer" {
  import ReactPlayer from "react-player";
  export class FilePlayer extends ReactPlayer {}
}

replace FilePlayer with your player of choice.

[prochorz]

Hi all!
I crate new extends from FilePlayer. And I use it as a custom player.

export default class CustomFilePlayer extends FilePlayer {
  static canPlay = () => true;

  componentDidMount() {
    const videoEl = findDOMNode(this) as HTMLVideoElement;
    enableInlineVideo(videoEl, {
      iPad: true,
    });

    super.componentDidMount();
  }
}

and I add this

declare module "react-player/lib/players/FilePlayer" {
  import ReactPlayer from "react-player";
  export class FilePlayer extends ReactPlayer {}
}

But I see error

how can I fix it?

[carpben]

@prochorz Your question isn't related to the issue at all. It doesn't belong here.
I suggest you ask it in some forum, perhaps Stack Over Flow.