id3Plugin

src/frontend/packages/lib_video/src/components/common/Player/createVideojsPlayer.ts

@@ -113,6 +113,8 @@ export const createVideojsPlayer = (
 
   onReady?.(player);
 
+  console.log('player', { player });
+
   // plugins initialization
   if (isMSESupported()) {
     if (isP2pQueryEnabled && isP2PEnabled) {
@@ -127,9 +129,9 @@ export const createVideojsPlayer = (
       });
     }
     player.transcriptPlugin({ video });
-    // player.httpSourceSelector();
+    //player.httpSourceSelector();
   }
-  // player.id3Plugin();
+  player.id3Plugin();
   // player.xapiPlugin({ video, locale, dispatchPlayerTimeUpdate });
 
   return player;

src/frontend/packages/lib_video/src/components/common/Player/videojs/id3Plugin/index.ts

@@ -1,31 +1,37 @@
 import { Id3VideoType, useVideo } from 'lib-components';
-import videojs from 'video.js';
-const Plugin = videojs.getPlugin('plugin');
+import videojs, { Player } from 'video.js';
+
+import { id3PluginType } from './type';
 
 type Id3MessageType = {
   video: Id3VideoType;
 };
 
-export class id3Plugin extends Plugin {
+const PluginClass = videojs.getPlugin('plugin') as id3PluginType;
+
+export class id3Plugin extends PluginClass {
   lastReceivedVideo: Id3VideoType | undefined;
   videoState;
+  declare player: Player;
 
-  constructor(player: videojs.Player, options: unknown) {
+  constructor(player: Player, options: unknown) {
     super(player, options);
 
     this.videoState = useVideo.getState();
     this.videoState.setIsWatchingVideo(true);
 
-    player.on('loadedmetadata', this.handleLoadedMetadata.bind(this));
+    this.player.on('loadedmetadata', this.handleLoadedMetadata.bind(this));
 
-    player.on('play', this.handleStart.bind(this));
+    this.player.on('play', this.handleStart.bind(this));
 
-    player.on('ended', this.handleEnded.bind(this));
+    this.player.on('ended', this.handleEnded.bind(this));
 
-    player.on('dispose', this.handleDispose.bind(this));
+    this.player.on('dispose', this.handleDispose.bind(this));
   }
 
   handleLoadedMetadata() {
+    console.log('handleLoadedMetadata', this.player);
+
     const tracks = this.player.textTracks();
     for (let index = 0; index < tracks.length; index++) {
       const track = tracks[index];

src/frontend/packages/lib_video/src/components/common/Player/videojs/id3Plugin/type.ts

@@ -0,0 +1,13 @@
+import videojs, { Player } from 'video.js';
+import PluginType from 'video.js/dist/types/plugin';
+
+const Plugin = videojs.getPlugin('plugin') as typeof PluginType;
+export class id3PluginClass extends Plugin {
+  declare player: Player;
+
+  constructor(player: Player, _options?: unknown) {
+    super(player);
+  }
+}
+
+export type id3PluginType = typeof id3PluginClass;

src/frontend/packages/lib_video/src/types/libs/video.js/extend.d.ts

@@ -10,10 +10,9 @@ import {
   DownloadVideoPluginOptions,
   SharedLiveMediaOptions,
   TranscriptButtonOptions,
-  //QualitySelectorOptions,
+  XapiPluginOptions,
 } from '../../../components/common/Player/videojs/';
 // import { TranscriptPluginOptions } from '../../../components/common/Player/videojs/transcriptPlugin/types';
-// import { XapiPluginOptions } from '../../../components/common/Player/videojs/xapiPlugin/types';
 
 declare module 'video.js' {
   export function MiddlewareUse(
@@ -147,6 +146,10 @@ declare module 'video.js' {
     downloadVideoPlugin: (options: DownloadVideoPluginOptions) => void;
     sharedMediaPlugin: (options: SharedLiveMediaOptions) => void;
     transcriptPlugin: (option: TranscriptPluginOptions) => void;
+    httpSourceSelector: () => void;
+    id3Plugin: () => void;
+    textTracks: () => TextTrackList;
+    //xapiPlugin: (options: XapiPluginOptions) => void;
   }
 
   // function createPlayer(