Typescript definitions for all exports

[vai0]

Current Behavior

Typescript definitions for the individual players (react-player/wistia, react-player/youtube, etc...) are missing.

e.g.,

import WistiaPlayer from "react-player/wistia";
...

// JSX element type 'ReactPlayerWistia' does not have any construct or call signatures.ts(2604)
<WistiaPlayer ... /> 

As a result, I need to either

1. explicitly add my own type declarations, and paint WistiaPlayer with the broad typedefs of ReactPlayer...

// react-player/index.d.ts
declare module "react-player/wistia" {
  import ReactPlayer from "react-player";
  export default ReactPlayer;
}

which isn't exactly great because now props such as onBuffered, onBufferEnded, onEnablePIP, etc... that WistiaPlayer really doesn't support noop and creates a confusing developer experience,

OR

2. again explicitly add my own type declarations, but completely type out the WistiaPlayer export + props that actually work and don't noop.

// react-player/index.d.ts
declare module "react-player/wistia" {
    import * as React from "react";
    import ReactPlayer from "react-player";

    type WistiaConfig = {
        wistia: {
            // https://wistia.com/support/developers/embed-options#options
            options?: {
                ...
            };
            playerId?: string;
        };
    };

    export type ReactPlayerWistiaProps = {
        url?: string | string[];
        playing?: boolean;
        loop?: boolean;
        controls?: boolean;
        volume?: number;
        muted?: boolean;
        playbackRate?: number;
        width?: string | number;
        height?: string | number;
        style?: React.CSSProperties;
        progressInterval?: number;
        light?: boolean | string;
        wrapper?: keyof JSX.IntrinsicElements;
        config?: WistiaConfig;
        className?: string;
        onReady?(player: ReactPlayer): void;
        onStart?(): void;
        onPlay?(): void;
        onPause?(): void;
        onEnded?(): void;
        onError?(
            error: any,
            data?: any,
            hlsInstance?: any,
            hlsGlobal?: any
        ): void;
        onDuration?(duration: number): void;
        onSeek?(seconds: number): void;
        onProgress?(state: { played: number; playedSeconds: number }): void;
    };
    export default class ReactPlayerWistiaPlayer extends React.Component<
        WistiaPlayerProps,
        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;
        showPreview(): void;
    }
}

Expected Behavior

Expect that if I use any of the other exports (react-player/wistia, react-player/youtube, etc...) they're automatically typed and I don't need to create my own typings for them.

[cookpete]

I don’t use Typescript, but I welcome any PRs that add definitions to the codebase in a clean way.

[cookpete]

I'm going to close this off as there seems to be no value in keeping it open. Like I said before, any PRs adding better TS support will be welcome.

[JuanM04]

Hello there, I'm working on a PR that fixes this. I have one question:
When I import the react-player/wistia, should the config attribute equal to { wistia: { ... } } or { ... }?

[cookpete]

Hey @JuanM04. Awesome work on the PR. I'm just looking through it now.

When I import the react-player/wistia, should the config attribute equal to { wistia: { ... } } or { ... }?

As of v2.0.0, both are supported due to this crazy merging:

react-player/src/ReactPlayer.js

Lines 120 to 128 in d47aa03

	getConfig = memoize((url, key) => {
	const { config } = this.props
	return merge.all([
	defaultProps.config,
	defaultProps.config[key] || {},
	config,
	config[key] || {}
	])
	})

[isometriq]

types for custom players would be awesome too

[isometriq]

interface ReactPlayerCustomPlayer {
    //static canPlay?():boolean,
    //static canEnablePIP?():boolean,
    //static loopOnEnded?:boolean,
    //static forceLoad?:boolean,
    load(url:string, isReady:boolean|undefined),
    play():void,
    pause():void,
    stop():void,
    seekTo(amount:number):void,
    mute():void,
    unmute():void,
    setVolume(fraction:number):void,
    setPlaybackRate?(rate:number):void,
    setLoop?(loop:boolean):void,
    getDuration():number|null,
    getCurrentTime():number|null,
    getSecondsLoaded():number|null,
    enablePIP?():void,
    disablePIP?():void,
}