Add typescript support

[johannbuscail]

Hi @dschoon your library is really cool! Could you add typescript support because it is really hard to learn every porp. Thanks in adavance

[johannbuscail]

Never mind I did it my self but it would be cool if you implemented in the project. Here is the prop interface:

export interface AudioProps {
    style?: React.CSSProperties;
    className?: string;
    playing?: boolean;
    pos?: number;
    audioFile?: (props: object, propName: string, componentName: string) => void;
    mediaElt?: string | HTMLElement;
    audioPeaks?: number[];
    volume?: number;
    zoom?: number;
    onPosChange?: () => void;
    options?: {
        audioRate?: number;
        audioContext?: object;
        audioScriptProcessor?: object;
        autoCenter?: boolean;
        backend?: "WebAudio" | "MediaElement";
        barGap?: number;
        barHeight?: number;
        barWidth?: (
            props: object,
            propName: string,
            componentName: string
        ) => void;
        closeAudioContext?: boolean;
        cursorColor?: string;
        cursorWidth?: number;
        fillParent?: boolean;
        forceDecode?: boolean;
        height?: number;
        hideScrollbar?: boolean;
        interact?: boolean;
        loopSelection?: boolean;
        maxCanvasWidth?: number;
        mediaControls?: boolean;
        mediaType?: "audio" | "video";
        minPxPerSec?: number;
        normalize?: boolean;
        partialRender?: boolean;
        pixelRatio?: number;
        progressColor?: string;
        removeMediaElementOnDestroy?: boolean;
        renderer?: object;
        responsive?: boolean;
        scrollParent?: boolean;
        skipLength?: number;
        splitChannels?: boolean;
        waveColor?: string | CanvasGradient;
        xhr?: object;
    };
    spectrogramOptions?: object;
    timelineOptions?: object;
}

[dschoon]

Thanks for the example!

[dschoon]

This has been released in v4.0.1

[johannbuscail]

Thanks for adding typescript support. Just wanted to let you know that since I opened this issue I made a few changes to the interface:

// types.d.ts
import React from "react";
import { WaveSurferParams } from "wavesurfer.js";

export interface AudioPropsOnReady {
    wavesurfer: WaveSurfer;
    originalArgs: number[];
}

export interface AudioProps {
    style?: React.CSSProperties;
    className?: string;
    playing?: boolean;
    pos?: number;
    audioFile?: string;
    mediaElt?: string | HTMLElement;
    audioPeaks?: number[];
    volume?: number;
    zoom?: number;
    onReady?: (ev: AudioPropsOnReady) => void;
    onPosChange?: (current_time: number, wavesurfer: WaveSurfer) => void;
    onFinish?: (ev: AudioPropsOnReady) => void;
    options?: WaveSurferParams;
    spectrogramOptions?: object;
    timelineOptions?: object;
}

Wavesurfer & WaveSurferParams both come from wavesurfer.js. Thanks again !