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

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

src/frontend/packages/lib_video/src/components/common/Player/videojs/sharedMediaPlugin/components/SharedMediaButton.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 { SharedLiveMediaOptions } from '../types';
 
 import { SharedMediaItem } from './SharedMediaItem';
 
-const MenuButton = videojs.getComponent('MenuButton');
+const MenuButtonClass = videojs.getComponent(
+  'MenuButton',
+) as unknown as typeof MenuButton;
 
 const messages = defineMessages({
   sharedMediaButton: {
@@ -16,8 +21,10 @@ const messages = defineMessages({
   },
 });
 
-export class SharedMediaButton extends MenuButton {
-  constructor(player: videojs.Player, options?: videojs.MenuItemOptions) {
+export class SharedMediaButton extends MenuButtonClass {
+  declare player: () => Player;
+
+  constructor(player: Player, options?: MenuItemOptions) {
     super(player, options);
     this.menuButton_.setAttribute(
       'title',
@@ -39,12 +46,15 @@ export class SharedMediaButton extends MenuButton {
   createItems() {
     const { sharedLiveMedias } = this.options_ as SharedLiveMediaOptions;
     return sharedLiveMedias.map((item) => {
-      return new SharedMediaItem(this.player_, {
+      return new SharedMediaItem(this.player(), {
         label: item.title || '',
         src: item.urls ? item.urls.media : undefined,
       });
     });
   }
 }
 
-videojs.registerComponent('SharedMediaButton', SharedMediaButton);
+videojs.registerComponent(
+  'SharedMediaButton',
+  SharedMediaButton as unknown as typeof Component,
+);

src/frontend/packages/lib_video/src/components/common/Player/videojs/sharedMediaPlugin/components/SharedMediaItem.ts

@@ -1,19 +1,22 @@
-import videojs from 'video.js';
+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';
 
-const Component = videojs.getComponent('Component');
-const MenuItem = videojs.getComponent('MenuItem');
+const MenuItemClass = videojs.getComponent(
+  'MenuItem',
+) as unknown as typeof MenuItem;
 
-export class SharedMediaItem extends MenuItem {
+export class SharedMediaItem extends MenuItemClass {
   source: string | undefined;
 
-  constructor(player: videojs.Player, options: SharedLiveMediaItemOptions) {
+  constructor(player: Player, options: Partial<SharedLiveMediaItemOptions>) {
     options.selectable = false;
     options.multiSelectable = false;
 
     super(player, options);
-    this.setAttribute('title', options.label);
+    this.setAttribute('title', options.label || '');
     this.source = options.src;
   }
 
@@ -30,4 +33,7 @@ export class SharedMediaItem extends MenuItem {
   }
 }
 
-Component.registerComponent('SharedMediaItem', SharedMediaItem);
+videojs.registerComponent(
+  'SharedMediaItem',
+  SharedMediaItem as unknown as typeof Component,
+);

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

@@ -1,13 +1,13 @@
-import videojs from 'video.js';
+import videojs, { Player } from 'video.js';
 
 import './components/SharedMediaButton';
 import './components/SharedMediaItem';
-import { SharedLiveMediaOptions } from './types';
+import { SharedLiveMediaOptions, SharedLiveMediaType } from './types';
 
-const Plugin = videojs.getPlugin('plugin');
+const PluginClass = videojs.getPlugin('plugin') as SharedLiveMediaType;
 
-export class SharedMediaPlugin extends Plugin {
-  constructor(player: videojs.Player, options: SharedLiveMediaOptions) {
+export class SharedMediaPlugin extends PluginClass {
+  constructor(player: Player, options: SharedLiveMediaOptions) {
     super(player, options);
 
     const controlBar = this.player.controlBar;

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

@@ -1,11 +1,24 @@
 import { SharedLiveMedia } from '@lib-components/types/tracks';
-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 {
+export interface SharedLiveMediaItemOptions extends MenuItemOptions {
   label: string;
   src: string | undefined;
 }
 
 export interface SharedLiveMediaOptions {
   sharedLiveMedias: SharedLiveMedia[];
 }
+
+const Plugin = videojs.getPlugin('plugin') as typeof PluginType;
+export class SharedLiveMediaClass extends Plugin {
+  declare player: Player;
+
+  constructor(player: Player, _options?: SharedLiveMediaOptions) {
+    super(player);
+  }
+}
+
+export type SharedLiveMediaType = typeof SharedLiveMediaClass;