justinmc / react-audio-player

A simple React wrapper on the HTML5 audio tag
MIT License
587 stars 103 forks source link

Typescript typings #60

Open JohnHeitmann opened 5 years ago

JohnHeitmann commented 5 years ago

I worked up typescript typings for this component, but I'm having some temporary trouble getting them into DefinitelyTyped. Posting them here in the interim for others to steal until I get that worked out. Note the onVolumeChanged spelling, which is probably a cosmetic bug in react-audio-player.

declare module 'react-audio-player' {
    import { Component, HTMLProps, Ref, SyntheticEvent } from 'react';

    type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;

    export interface ReactAudioPlayerProps extends Omit<HTMLProps<HTMLAudioElement>, "ref"> {
        autoPlay?: boolean;
        children?: Element[];
        className?: string;
        controls?: boolean;
        crossOrigin?: string;
        controlsList?: string;
        id?: string;
        loop?: boolean;
        muted?: boolean;
        volume?: number;
        preload?: '' | 'none' | 'metadata' | 'auto';
        src?: string;
        style?: {};

        ref?: Ref<ReactAudioPlayer>;

        listenInterval?: number;
        onListen?: (currentTime: number) => void;
        // HTMLProps has onVolumeChange (not past tense). This covers the
        // alternate spelling used by this component.
        onVolumeChanged?: (e: SyntheticEvent<HTMLAudioElement, Event>) => void;
    }

    export default class ReactAudioPlayer extends Component<ReactAudioPlayerProps, any> {
        readonly audioEl: HTMLAudioElement;
    }
}

If you don't care about typescript you can close this out right away. It should be findable with a quick search regardless.