diff --git a/src/frontend/packages/lib_video/src/components/common/Player/videojs/transcriptPlugin/components/TranscriptButton.ts b/src/frontend/packages/lib_video/src/components/common/Player/videojs/transcriptPlugin/components/TranscriptButton.ts index 307751fa48..0936d51996 100644 --- a/src/frontend/packages/lib_video/src/components/common/Player/videojs/transcriptPlugin/components/TranscriptButton.ts +++ b/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, +); diff --git a/src/frontend/packages/lib_video/src/components/common/Player/videojs/transcriptPlugin/components/TranscriptItem.ts b/src/frontend/packages/lib_video/src/components/common/Player/videojs/transcriptPlugin/components/TranscriptItem.ts index 3612514734..167724bb7a 100644 --- a/src/frontend/packages/lib_video/src/components/common/Player/videojs/transcriptPlugin/components/TranscriptItem.ts +++ b/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) { 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, +); diff --git a/src/frontend/packages/lib_video/src/components/common/Player/videojs/transcriptPlugin/index.ts b/src/frontend/packages/lib_video/src/components/common/Player/videojs/transcriptPlugin/index.ts index 180a990971..cc9495c20b 100644 --- a/src/frontend/packages/lib_video/src/components/common/Player/videojs/transcriptPlugin/index.ts +++ b/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(); diff --git a/src/frontend/packages/lib_video/src/components/common/Player/videojs/transcriptPlugin/types.ts b/src/frontend/packages/lib_video/src/components/common/Player/videojs/transcriptPlugin/types.ts index 96f60d010e..a45af1c615 100644 --- a/src/frontend/packages/lib_video/src/components/common/Player/videojs/transcriptPlugin/types.ts +++ b/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; } @@ -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;