RecordToggle can't be found

[ISilviu]

Description

I'm using React and I'm creating a custom recordToggle by extending the base RecordToggle class, as follows:

const RecordToggle = videojs.getComponent(
  'RecordToggle',
) as unknown as typeof videojs.Button

class CustomRecordToggle extends RecordToggle {
  // overriding methods
 ...
}

It was working fine until I've updated video.js from 7.13.3 to 7.21.1, I'm getting the following error: TypeError: Class extends value undefined is not a constructor or null. This is because the videojs.getComponent('RecordToggle') returns undefined since the package update.

Are you aware of any change that could have led to this? I've debugged the modules and the recording components seem to be correctly registered to the videojs instance, but when the client code is reached, the recording components (i.e. RecordToggle) suddenly disappeared. I have not found any unregisterComponent method .. I'm assuming there could be 2 different instances of videojs, could you help me?

Steps to reproduce

I don't have a minimal reproducible example, but I can add that the following is the import sequence used:

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

import 'video.js/dist/video-js.css'
import 'videojs-record/dist/css/videojs.record.css'
import 'videojs-record/dist/videojs.record.js'

import 'videojs-record/dist/plugins/videojs.record.ts-ebml.js'

const RecordToggle = videojs.getComponent(
  'RecordToggle',
) as unknown as typeof videojs.Button

...

Expected

The videojs.getComponent('RecordToggle') should work as before, therefore the app wouldn't crash.

Actual

The app crashes.

Error output

TypeError: Class extends value undefined is not a constructor or null

Additional Information

versions

videojs

7.21.1, the version of videojs-record is 4.5.0.

browsers

Chrome 125.0.6422.77, it also shows up in incognito.

OSes

MacOS 14.4

[thijstriemstra]

can you try the same without react?

[ISilviu]

Just tried the following on the video-only example:

// apply some workarounds for opera browser
applyVideoWorkaround();

const recordToggle = videojs.getComponent('RecordToggle');
console.log('RecordToggle:', recordToggle);

In this case it is working .. would you suggest me try with the same versions as in the example? VIDEOJS: Using video.js 8.10.0 with videojs-record 4.8.0 and recordrtc 5.6.2

[ISilviu]

Update: I have tried with those versions, the problem is still persisting.

[ISilviu]

I have got around the initial error with the following conditional:

const RecordToggle = videojs.getComponent(
  'RecordToggle',
) as unknown as typeof videojs.Button

const ComponentToExtend = RecordToggle ? RecordToggle : videojs.getComponent('Button')

class CustomRecordToggleComponent extends ComponentToExtend {
 ...
}

And now I'm getting: Error: plugin "record" does not exist; it looks like the plugin is not correctly registered. This is probably the reason why RecordToggle is undefined.

[thijstriemstra]

can you reproduce it with https://collab-project.github.io/videojs-record/#/frameworks/react?

[ISilviu]

I'm trying now, hopefully I will reproduce it.

[ISilviu]

I haven't been able to reproduce it with the official example. We're thinking of updating it directly to 8+.