diff --git a/src/frontend/packages/lib_video/src/components/common/Player/videojs/sharedMediaPlugin/components/SharedMediaButton.ts b/src/frontend/packages/lib_video/src/components/common/Player/videojs/sharedMediaPlugin/components/SharedMediaButton.ts index 19ccc13ef5..5e7f7bcaf0 100644 --- a/src/frontend/packages/lib_video/src/components/common/Player/videojs/sharedMediaPlugin/components/SharedMediaButton.ts +++ b/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,7 +46,7 @@ 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, }); @@ -47,4 +54,7 @@ export class SharedMediaButton extends MenuButton { } } -videojs.registerComponent('SharedMediaButton', SharedMediaButton); +videojs.registerComponent( + 'SharedMediaButton', + SharedMediaButton as unknown as typeof Component, +); diff --git a/src/frontend/packages/lib_video/src/components/common/Player/videojs/sharedMediaPlugin/components/SharedMediaItem.ts b/src/frontend/packages/lib_video/src/components/common/Player/videojs/sharedMediaPlugin/components/SharedMediaItem.ts index f48d2efd5b..48fff3e0bc 100644 --- a/src/frontend/packages/lib_video/src/components/common/Player/videojs/sharedMediaPlugin/components/SharedMediaItem.ts +++ b/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) { 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, +); diff --git a/src/frontend/packages/lib_video/src/components/common/Player/videojs/sharedMediaPlugin/index.ts b/src/frontend/packages/lib_video/src/components/common/Player/videojs/sharedMediaPlugin/index.ts index 3690432300..674c0af372 100644 --- a/src/frontend/packages/lib_video/src/components/common/Player/videojs/sharedMediaPlugin/index.ts +++ b/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; diff --git a/src/frontend/packages/lib_video/src/components/common/Player/videojs/sharedMediaPlugin/types.ts b/src/frontend/packages/lib_video/src/components/common/Player/videojs/sharedMediaPlugin/types.ts index ec60dcb1fe..4bff9ad79a 100644 --- a/src/frontend/packages/lib_video/src/components/common/Player/videojs/sharedMediaPlugin/types.ts +++ b/src/frontend/packages/lib_video/src/components/common/Player/videojs/sharedMediaPlugin/types.ts @@ -1,7 +1,9 @@ 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; } @@ -9,3 +11,14 @@ export interface SharedLiveMediaItemOptions extends videojs.MenuItemOptions { 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;