TypeScript: Property 'on' does not exist on type 'Player'

[jdufresne]

Description

The TypeScript definitions are missing the methods added by the EventedMixin on the Player class.

Reduced test case

https://github.com/jdufresne/video-js-test

Steps to reproduce

Files: test.ts

import videojs from "video.js";

const videoEl = document.createElement("video");
const player = videojs(videoEl, {
  sources: [{ src: "https://vjs.zencdn.net/v/oceans.mp4", type: "video/mp4" }],
});
player.on("ended", () => {
  console.log("video ended");
});

Compiling this TypeScript results in the following error:

$ npx tsc
test.ts:7:8 - error TS2339: Property 'on' does not exist on type 'Player'.

7 player.on("ended", () => {
         ~~

Errors

test.ts:7:8 - error TS2339: Property 'on' does not exist on type 'Player'.

What version of Video.js are you using?

8.0.3

Video.js plugins used.

none

What browser(s) including version(s) does this occur with?

n/a

What OS(es) and version(s) does this occur with?

n/a

[video-archivist-bot]

Hey! We've detected some video files in a comment on this issue. If you'd like to permanently archive these videos and tie them to this project, a maintainer of the project can reply to this issue with the following commands:

• for https://vjs.zencdn.net/v/oceans.mp4: say @video-archivist-bot save BEJg7j

[welcome]

👋 Thanks for opening your first issue here! 👋

If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.
To help make it easier for us to investigate your issue, please follow the contributing guidelines.

[boris-petrov]

These are the things that I found missing from the v8 types compared to the v7 ones:

On the Player type: controlBar, readyState, bigPlayButton, remoteTextTracks, audioTracks, on, one, off, trigger

player.ready should set the this of the function in the first argument to be the player instance.

On Tech: on, off

AudioTrackList should extend AudioTrack[].

TextTrackList should extend TextTrack[].

[insilications]

The v8 types/typing is very incomplete too.

[Quimy]

In my case, there was a change in typings from separate package @types/video.js to types in videojs itself and it lacks many of the types:

• there is no Player class exposed, previously it was VideoJsPlayer
• custom components show errors:

const VjsButton = videojs.getComponent('Button');
class FrameControlButton extends VjsButton {
  private frameSkipTime: number;

  constructor(player: VideoJsPlayer, options: { [key: string]: never } = {}) {
    super(player, options);
    this.frameSkipTime = options.frameSkipTime;
  }

  handleClick() {
    this.player().currentTime(this.player().currentTime() + this.frameSkipTime);
  }
}

Type 'Component' is not a constructor function type.
Property 'player' does not exist on type 'FrameControlButton'

[horans]

Similar problem here, use to have following import in v7 with @types/video.js:

import videojs, { type VideoJsPlayer, type VideoJsPlayerOptions } from 'video.js'

Now with v8, I got errors and fail to build:

Module '"video.js"' has no exported member 'VideoJsPlayer'.
Module '"video.js"' has no exported member 'VideoJsPlayerOptions'.

[boris-petrov]

@Quimy, @horans - I use import type Player from 'video.js/dist/types/player'; for that.

[Quimy]

@boris-petrov Thanks, it helped with missing player type.

For the other problem I used workaround:
const VjsButton = videojs.getComponent('Button') as unknown as typeof Button;

I think the signature for getComponent and registerComponent is wrong. It should accept class instance instead of expecting class object, or am I wrong?

[weiz18]

We have similar issue on 8.2.0 as well and we have to use import type VideoJsPlayer from 'video.js/dist/types/player'; .
are they meant to be resolved?

Errors ->
Property 'controlBar' does not exist on type 'Player'
This expression is not constructable.Type 'Component' has no construct signatures.

[jdufresne]

My original issue is resolved with the latest release, so closing. If others are still seeing typing issues, I recommend opening a separate issue with an example.

Thanks for the fix!