Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Typescript definitions for all exports

See original GitHub issue

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

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,

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.