Typescript support

[spenweb]

Are there plans to have this package have Typescript support?

[mmcc]

That's a tough one. The bad news is that the Video.js types are pretty broken, so we'd need to fix those first before anything else. The good news is that that gets us a vast majority of the way to support here!

So yes, there are plans, but there's currently no timeline.

[spenweb]

@mmcc I am assuming that video.js is Mux's preferred open source video player since there is this package created by Mux. Is this correct? I am starting a TypeScript project using Mux and would like to avoid untyped projects, but if this is Mux's preferred open source video player package, then I am willing to be more tolerant of adding my own manual types for now.

[james-mux]

Hey @spenweb - thanks for the question!

Videojs-mux-kit is our preferred option, but a current shortcoming is the lack of TS support unfortunately. We're pretty agnostic when it comes to the player technology, anything which can play HLS is also fine by us.

Having said that, we find that hls.js generally works really well, which is why we made this project as we have the convenience of video.js combined with the playback power of hls.js. You could take a look at plyr.io which uses hls.js, and also has types available, as an alternative option?

[AdrianMrn]

@spenweb I managed to get some rudimentary TypeScript support by extending the videojs types to my needs. I don't yet extensively use this library or videojs, so I'll probably run into bits where I'll need some extra types.

// mux-videojs-kit.d.ts
declare module '@mux/videojs-kit' {
    interface VideoJsPlayerOptions extends videojs.VideoJsPlayerOptions {
        timelineHoverPreviews?: boolean;
        userActions?: videojs.VideoJsPlayerOptions['userActions'] & {
            fullscreenKey?: () => any;
            playPauseKey?: () => boolean;
        };
    }

    function videojs(
        id: string | Element,
        options?: VideoJsPlayerOptions,
        ready?: (this: videojs.VideoJsPlayer) => void
    ): videojs.VideoJsPlayer & { el_: HTMLVideoElement };

    export default videojs;
}