♻️(lib-video) adapt plugin video.js transcriptPlugin

We adapt the plugin transcriptPlugin to work with video.js
version 8.

src/frontend/packages/lib_video/src/components/common/Player/videojs/transcriptPlugin/components/TranscriptButton.ts

@@ -1,12 +1,17 @@
 import { getIntl } from 'lib-common';
 import { defineMessages } from 'react-intl';
-import videojs from 'video.js';
+import videojs, { Player } from 'video.js';
+import Component from 'video.js/dist/types/component';
+import MenuButton from 'video.js/dist/types/menu/menu-button';
+import MenuItemOptions from 'video.js/dist/types/menu/menu-item';
 
 import { TranscriptButtonOptions } from '../types';
 
 import { TranscriptItem } from './TranscriptItem';
 
-const MenuButton = videojs.getComponent('MenuButton');
+const MenuButtonClass = videojs.getComponent(
+  'MenuButton',
+) as unknown as typeof MenuButton;
 
 const messages = defineMessages({
   transcriptButton: {
@@ -16,8 +21,10 @@ const messages = defineMessages({
   },
 });
 
-export class TranscriptButton extends MenuButton {
-  constructor(player: videojs.Player, options: videojs.MenuButtonOptions) {
+export class TranscriptButton extends MenuButtonClass {
+  declare player: () => Player;
+
+  constructor(player: Player, options: MenuItemOptions) {
     super(player, options);
     this.menuButton_.setAttribute(
       'title',
@@ -35,12 +42,12 @@ export class TranscriptButton extends MenuButton {
       return [];
     }
     return [
-      new TranscriptItem(this.player_, {
+      new TranscriptItem(this.player(), {
         label: 'transcript off',
         transcript: null,
       }),
       ...transcripts.map((item) => {
-        return new TranscriptItem(this.player_, {
+        return new TranscriptItem(this.player(), {
           label: item.language,
           transcript: item,
         });
@@ -49,4 +56,7 @@ export class TranscriptButton extends MenuButton {
   }
 }
 
-videojs.registerComponent('TranscriptButton', TranscriptButton);
+videojs.registerComponent(
+  'TranscriptButton',
+  TranscriptButton as unknown as typeof Component,
+);

src/frontend/packages/lib_video/src/components/common/Player/videojs/transcriptPlugin/components/TranscriptItem.ts

@@ -1,21 +1,25 @@
-import { TimedTextTranscript, useTimedTextTrack } from 'lib-components';
-import videojs from 'video.js';
+import { useTimedTextTrack } from 'lib-components';
+import videojs, { Player } from 'video.js';
+import Component from 'video.js/dist/types/component';
+import MenuItem from 'video.js/dist/types/menu/menu-item';
 
-import { SharedLiveMediaItemOptions } from '../types';
+import { TranscriptItemOptions } from '../types';
 
 import { TranscriptButton } from './TranscriptButton';
 
-const Component = videojs.getComponent('Component');
-const MenuItem = videojs.getComponent('MenuItem');
+const MenuItemClass = videojs.getComponent(
+  'MenuItem',
+) as unknown as typeof MenuItem;
 
-export class TranscriptItem extends MenuItem {
-  transcript: TimedTextTranscript | null;
+export class TranscriptItem extends MenuItemClass {
+  declare player: () => Player;
+  transcript?: TranscriptItemOptions['transcript'];
 
-  constructor(player: videojs.Player, options: SharedLiveMediaItemOptions) {
+  constructor(player: Player, options: Partial<TranscriptItemOptions>) {
     options.selectable = true;
     options.multiSelectable = false;
     super(player, options);
-    this.setAttribute('title', options.label);
+    this.setAttribute('title', options.label || '');
     this.transcript = options.transcript;
     this.selected(
       useTimedTextTrack.getState().selectedTranscript === this.transcript,
@@ -36,8 +40,14 @@ export class TranscriptItem extends MenuItem {
     }
 
     this.selected(true);
-    useTimedTextTrack.getState().setSelectedTranscript(this.transcript);
+
+    if (this.transcript) {
+      useTimedTextTrack.getState().setSelectedTranscript(this.transcript);
+    }
   }
 }
 
-Component.registerComponent('TranscriptItem', TranscriptItem);
+videojs.registerComponent(
+  'TranscriptItem',
+  TranscriptItem as unknown as typeof Component,
+);

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

@@ -3,20 +3,20 @@ import {
   timedTextMode,
   useTimedTextTrack,
 } from 'lib-components';
-import videojs from 'video.js';
+import videojs, { Player } from 'video.js';
 
 import './components/TranscriptButton';
 import './components/TranscriptItem';
 import { useTranscriptTimeSelector } from '@lib-video/hooks/useTranscriptTimeSelector';
 
-import { TranscriptPluginOptions } from './types';
+import { TranscriptPluginOptions, TranscriptPluginType } from './types';
 
-const Plugin = videojs.getPlugin('plugin');
+const PluginClass = videojs.getPlugin('plugin') as TranscriptPluginType;
 
-export class TranscriptPlugin extends Plugin {
+export class TranscriptPlugin extends PluginClass {
   unsubscribeTranscriptTimeSelector: () => void;
 
-  constructor(player: videojs.Player, options: TranscriptPluginOptions) {
+  constructor(player: Player, options: TranscriptPluginOptions) {
     super(player);
     const { video } = options;
     const timedTextTracks = useTimedTextTrack.getState().getTimedTextTracks();

src/frontend/packages/lib_video/src/components/common/Player/videojs/transcriptPlugin/types.ts

@@ -1,8 +1,12 @@
 import { Nullable } from 'lib-common';
 import { TimedTextTranscript, Video } from 'lib-components';
-import videojs from 'video.js';
+import videojs, { Player } from 'video.js';
+import MenuItemOptions from 'video.js/dist/types/menu/menu-item';
+import PluginType from 'video.js/dist/types/plugin';
 
-export interface SharedLiveMediaItemOptions extends videojs.MenuItemOptions {
+const Plugin = videojs.getPlugin('plugin') as typeof PluginType;
+
+export interface TranscriptItemOptions extends MenuItemOptions {
   label: string;
   transcript: Nullable<TimedTextTranscript>;
 }
@@ -14,3 +18,13 @@ export interface TranscriptPluginOptions {
 export interface TranscriptButtonOptions {
   transcripts: TimedTextTranscript[];
 }
+
+export class TranscriptPlugin extends Plugin {
+  declare player: Player;
+
+  constructor(player: Player, _options?: TranscriptPluginOptions) {
+    super(player);
+  }
+}
+
+export type TranscriptPluginType = typeof TranscriptPlugin;