In my current nextJS project, I am utilizing TypeScript and incorporating a cdn version of flowplayer asynchronously. This player extends the event.target with new attributes.
However, during the build process, I encountered this error message: Type error: Property 'currentTime' does not exist on type 'EventTarget & HTMLInputElement'.
To resolve this, I need to intersect it with specific attributes: currentTime, duration, opts. My attempted solution is as follows:
type FlowPlayerEvent<T extends EventTarget> = Event & {
target: T;
currentTime: Number;
duration: Number;
opts: Object;
};
This is the event handler in question:
function stateHandler(ev : Event) {
const Event: FlowPlayerEvent = ev.target;
if (ev.type === 'pause') { console.log('paused'); }
if (ev.type === 'playing') { console.log(`Playing at ${Event.currentTime}, duration is: ${Event.duration}, video ID is: ${Event.opts.metadata.id}`); }
if (ev.type === 'timeupdate') { console.log(Event.currentTime); }
if (ev.type === 'ended') { console.log('The end'); }
}
Upon hovering over FlowPlayerEvent, I receive the following message: Generic type 'FlowPlayerEvent' requires 1 type argument(s).ts(2314)
Could someone advise on the correct way to extend it in this instance?
Appreciate any help you can provide!