@playkit-js/transcript 2.1.4 → 2.1.5-canary.16-1ac3e09

package/src/transcript-plugin.tsx

@@ -1,458 +1,277 @@
-import { h } from "preact";
-import {
-  ContribPluginManager,
-  OnMediaLoad,
-  OnMediaUnload,
-  OnPluginSetup,
-  ContribServices,
-  ContribPluginData,
-  ContribPluginConfigs
-} from "@playkit-js-contrib/plugin";
-import {
-  getContribLogger,
-  ObjectUtils
-} from "@playkit-js-contrib/common";
-import * as styles from './transcript-plugin.scss';
-import {
-  KalturaClient,
-  KalturaClientException,
-  KalturaAPIException
-} from "kaltura-typescript-client";
-
-import {
-  KitchenSinkContentRendererProps,
-  KitchenSinkItem,
-  KitchenSinkPositions,
-  KitchenSinkExpandModes,
-  downloadContent,
-  printContent,
-  UpperBarItem
-} from "@playkit-js-contrib/ui";
-import { KalturaCaptionAssetFilter } from "kaltura-typescript-client/api/types/KalturaCaptionAssetFilter";
-import { CaptionAssetListAction } from "kaltura-typescript-client/api/types/CaptionAssetListAction";
-import { KalturaCaptionAsset } from "kaltura-typescript-client/api/types/KalturaCaptionAsset";
-
-import { Transcript } from "./components/transcript";
-import {
-  getCaptionsByFormat,
-  CaptionItem,
-  getConfigValue,
-  isBoolean,
-  makePlainText,
-  CaptionAssetServeAction,
-} from "./utils";
-import { DownloadPrintMenu } from "./components/download-print-menu";
-
-const pluginName = `playkit-js-transcript`;
-
-const logger = getContribLogger({
-  class: "TranscriptPlugin",
-  module: "transcript-plugin"
-});
-
-const { get } = ObjectUtils;
-
-interface TranscriptPluginConfig {
-  expandOnFirstPlay: boolean;
-  showTime: boolean;
-  position: KitchenSinkPositions;
-  scrollOffset: number; // distance between top border of transcript container and active caption on auto-scroll
-  searchDebounceTimeout: number; // debounce on search
-  searchNextPrevDebounceTimeout: number; // debounce on jump between prev/next search result
-  downloadDisabled: boolean; // disable download menu
-  printDisabled: boolean; // disable print menu
-  expandMode: KitchenSinkExpandModes; // over or pushing the player
+import {h} from 'preact';
+import {ObjectUtils} from './utils';
+import {ui} from 'kaltura-player-js';
+import {PluginButton} from './components/plugin-button/plugin-button';
+import {Transcript} from './components/transcript';
+import {getConfigValue, isBoolean, makePlainText, prepareCuePoint} from './utils';
+import {TranscriptConfig, PluginPositions, PluginStates, HighlightedMap, CuePointData, ItemTypes, CuePoint} from './types';
+import {DownloadPrintMenu, downloadContent, printContent} from './components/download-print-menu';
+
+const {SidePanelModes, SidePanelPositions, ReservedPresetNames, ReservedPresetAreas} = ui;
+const {get} = ObjectUtils;
+const {Tooltip} = KalturaPlayer.ui.components;
+
+interface TimedMetadataEvent {
+  payload: {
+    cues: Array<CuePoint>;
+  };
 }
 
-export class TranscriptPlugin implements OnMediaLoad, OnPluginSetup, OnMediaUnload {
-  private _kitchenSinkItem: KitchenSinkItem | null = null;
-  private _upperBarItem: UpperBarItem | null = null;
+export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
+  static defaultConfig: TranscriptConfig = {
+    expandMode: SidePanelModes.ALONGSIDE,
+    expandOnFirstPlay: true,
+    showTime: true,
+    position: SidePanelPositions.RIGHT,
+    scrollOffset: 0,
+    searchDebounceTimeout: 250,
+    searchNextPrevDebounceTimeout: 100,
+    downloadDisabled: false,
+    printDisabled: false
+  };
+  private _activeCaptionMapId: string = '';
+  private _activeCuePointsMap: HighlightedMap = {};
+  private _captionMap: Map<string, Array<CuePointData>> = new Map();
   private _isLoading = false;
   private _hasError = false;
-  private _entryId = "";
-  private _captionsList: KalturaCaptionAsset[] = []; // list of captions
-  private _captions: CaptionItem[] = []; // parsed captions
-  private _kalturaClient = new KalturaClient();
-  private _transcriptLanguage = "default";
-  private _triggeredByKeyboard  = false;
-
-  constructor(
-      private _contribServices: ContribServices,
-      private _configs: ContribPluginConfigs<TranscriptPluginConfig>,
-      private _player: KalturaPlayerTypes.Player
-  ) {}
+  private _triggeredByKeyboard = false;
 
-  onPluginSetup(): void {
-    const { playerConfig } = this._configs;
+  private _removePopoverIcon: null | Function = null;
 
-    this._kalturaClient.setOptions({
-      clientTag: "playkit-js-transcript",
-      endpointUrl: playerConfig.provider.env.serviceUrl
-    });
+  private _transcriptPanel = null;
+  private _pluginState: PluginStates | null = null;
 
-    this._kalturaClient.setDefaultRequestOptions({
-        ks: playerConfig.provider.ks ? playerConfig.provider.ks : playerConfig.session.ks
-    });
-  
-    this._player.addEventListener(this._player.Event.TIME_UPDATE, this._onTimeUpdate);
-    this._player.addEventListener(this._player.Event.TEXT_TRACK_CHANGED, this._loadCaptions);
-    this._player.addEventListener(this._player.Event.RESIZE, this._updateKitchenSink);
+  constructor(name: string, player: KalturaPlayerTypes.Player, config: TranscriptConfig) {
+    super(name, player, config);
   }
 
-  onRegisterUI(): void {}
-
-  onMediaLoad(): void {
-    const { playerConfig } = this._configs;
-    this._entryId = playerConfig.sources.id;
-    this._getCaptionsList();
+  get sidePanelsManager() {
+    return this.player.getService('sidePanelsManager') as any;
   }
 
-  onMediaUnload(): void {
-    this._reset();
+  get cuePointManager() {
+    return this.player.getService('kalturaCuepoints') as any;
   }
 
-  private _reset(): void {
-    if (this._kitchenSinkItem) {
-      this._contribServices.kitchenSinkManager.remove(this._kitchenSinkItem);
-      this._kitchenSinkItem = null;
-    }
-    if (this._upperBarItem) {
-      this._contribServices.upperBarManager.remove(this._upperBarItem);
-      this._upperBarItem = null;
-    }
-    this._captionsList = [];
-    this._captions = [];
-    this._isLoading = false;
-    this._hasError = false;
-    this._entryId = "";
-    this._transcriptLanguage = "default";
+  private get _data() {
+    return this._captionMap.get(this._activeCaptionMapId) || [];
   }
 
-  private _initKitchensinkAndUpperBarItems(): void {
-    if (!this._upperBarItem && !this._kitchenSinkItem) {
-      this._addPopoverIcon();
-      this._addKitchenSinkItem();
+  loadMedia(): void {
+    if (!this.cuePointManager || !this.sidePanelsManager) {
+      this.logger.warn("kalturaCuepoints or sidePanelsManager haven't registered");
+      return;
     }
+    this.onPluginSetup();
+    this.cuePointManager.registerTypes([this.cuePointManager.CuepointType.CAPTION]);
   }
 
-  private _addPopoverIcon(): void {
-    const { downloadDisabled, printDisabled } = this._configs.pluginConfig;
-    this._upperBarItem = this._contribServices.upperBarManager.add({
-      label: "Download transcript",
-      onClick: () => {},
-      renderItem: () => (
-          <DownloadPrintMenu
-              onDownload={this._handleDownload}
-              onPrint={this._handlePrint}
-              downloadDisabled={getConfigValue(downloadDisabled, isBoolean, false)}
-              printDisabled={getConfigValue(printDisabled, isBoolean, false)}
-              dropdownAriaLabel={`Download or print ${
-                  this._captionsList.length > 1 ? "current " : ""
-                  }transcript`}
-              printButtonAriaLabel={`Print ${
-                  this._captionsList.length > 1 ? "current " : ""
-                  }transcript`}
-              downloadButtonAriaLabel={`Download ${
-                  this._captionsList.length > 1 ? "current " : ""
-                  }transcript`}
-          />
-      )
-    });
-  }
-
-  private _handleIconClick = (event: MouseEvent) => {
-    this._triggeredByKeyboard = event.x === 0 && event.y === 0;
+  onPluginSetup(): void {
+    this.eventManager.listen(this.player, this.player.Event.TIMED_METADATA_CHANGE, this._onTimedMetadataChange);
+    this.eventManager.listen(this.player, this.player.Event.TIMED_METADATA_ADDED, this._onTimedMetadataAdded);
+    this.eventManager.listen(this.player, this.player.Event.TEXT_TRACK_CHANGED, this._handleLanguageChange);
   }
 
-  private _addKitchenSinkItem(): void {
-    const { expandMode, position, expandOnFirstPlay } = this._configs.pluginConfig;
-    this._kitchenSinkItem = this._contribServices.kitchenSinkManager.add({
-      label: "Transcript",
-      expandMode: expandMode === KitchenSinkExpandModes.OverTheVideo ?
-        KitchenSinkExpandModes.OverTheVideo :
-        KitchenSinkExpandModes.AlongSideTheVideo,
-      renderIcon: () => (
-        <button
-          className={styles.pluginButton}
-          tabIndex={1}
-          onClick={this._handleIconClick}
-        >
-        <div className={styles.transcriptIcon} />
-        </button>
-      ),
-      position: getConfigValue(
-          position,
-          position =>
-              typeof position === "string" &&
-              (position === KitchenSinkPositions.Bottom ||
-                  position === KitchenSinkPositions.Right),
-          KitchenSinkPositions.Bottom
-      ),
-      renderContent: this._renderKitchenSinkContent
-    });
+  onRegisterUI(): void {}
 
-    if (expandOnFirstPlay) {
-      this._kitchenSinkItem.activate();
+  private _handleLanguageChange = () => {
+    this._activeCaptionMapId = this._getCaptionMapId();
+    if (this._captionMap.has(this._activeCaptionMapId)) {
+      this._updateTranscriptPanel();
     }
-  }
-
-  private _onTimeUpdate = (): void => {
-    this._updateKitchenSink();
   };
 
-  private _updateKitchenSink() {
-    if (this._kitchenSinkItem) {
-      this._kitchenSinkItem.update();
-    }
-  }
-
-  private _initLoading() {
-    if (!this._isLoading || this._hasError) {
-      this._isLoading = true;
-      this._hasError = false;
-      this._updateKitchenSink();
+  private _updateTranscriptPanel() {
+    this._isLoading = false;
+    if (this._transcriptPanel) {
+      this.sidePanelsManager.update(this._transcriptPanel);
     }
   }
 
-  private _onError = (error?: Error, message?: string, method?: string) => {
-    let msg: string = message || "Error message not defined";
-    if (error instanceof KalturaClientException) {
-      msg = `${msg} (network error etc)`;
-    } else if (error instanceof KalturaAPIException) {
-      msg = `${msg} (api exception)`;
-    }
-    logger.error(msg, {
-      method: method || "Method not defined",
-      data: {
-        error
+  private _onTimedMetadataAdded = ({payload}: TimedMetadataEvent) => {
+    const captionData: CuePointData[] = [];
+    payload.cues.forEach((cue: CuePoint) => {
+      if (cue.metadata.cuePointType === ItemTypes.Caption) {
+        captionData.push(prepareCuePoint(cue));
       }
     });
-    this._isLoading = false;
-    this._hasError = true;
-    this._updateKitchenSink();
-  };
-
-  private _loadCaptions = (event?: {}): void => {
-    if (!this._entryId) {
-      return;
+    if (captionData.length) {
+      this._addCaptionData(captionData);
     }
-    this._getCaptionsByLang(event);
   };
 
-  private _getCaptionsList = (): void => {
-    const filter: KalturaCaptionAssetFilter = new KalturaCaptionAssetFilter({ entryIdEqual: this._entryId});
-    const request = new CaptionAssetListAction({ filter });
-    this._initLoading();
-    this._kalturaClient.request(request).then(
-        data => {
-          if (data && Array.isArray(data.objects) && data.objects.length > 0) {
-            // cover both displayOnPlayer=true, as well as non-existence of the attribute
-            this._captionsList = data.objects.filter(caption => caption.displayOnPlayer !== false)
-            this._loadCaptions();
-          } else {
-            this._onError(undefined, "Data is empty", "_getCaptionsList");
-          }
-        },
-        err => {
-          this._onError(err, "Failed to fetch captions list", "_getCaptionsList");
-        }
-    );
+  private _onTimedMetadataChange = ({payload}: TimedMetadataEvent) => {
+    const transcriptCuePoints: Array<CuePoint> = payload.cues.filter((cue: CuePoint) => {
+      return cue.metadata.cuePointType === ItemTypes.Caption;
+    });
+    this._activeCuePointsMap = {};
+    transcriptCuePoints.forEach(cue => {
+      this._activeCuePointsMap[cue.id] = true;
+    });
+    this._updateTranscriptPanel();
   };
 
-  private _filterCaptionAssetsByProperty = (
-    list: KalturaCaptionAsset[],
-    match: string | null,
-    property: string
-  ): KalturaCaptionAsset[] => {
-    return list.filter((kalturaCaptionAsset: KalturaCaptionAsset) => {
-      return get(kalturaCaptionAsset, property, null) === match;
-    });
-  }
+  private _addCaptionData = (newData: CuePointData[]) => {
+    this._activeCaptionMapId = this._getCaptionMapId();
+    this._captionMap.set(this._activeCaptionMapId, newData);
+    this._createOrUpdatePlugin();
+  };
 
-  private _findCaptionAsset = (
-      event: string | Record<string, any>
-  ): KalturaCaptionAsset => {
-    if (typeof event === 'string') {
-      const filteredByLang = this._filterCaptionAssetsByProperty(this._captionsList, event, 'languageCode');
-      // take first captions from caption-list when caption language is not defined
-      return filteredByLang[0] ? filteredByLang[0] : this._captionsList[0];
-    }
-    const filteredByLang = this._filterCaptionAssetsByProperty(
-      this._captionsList,
-      get(event, 'payload.selectedTextTrack._language', null),
-      'languageCode'
-    );
-    if (filteredByLang.length === 1) {
-      return filteredByLang[0];
-    }
-    const filteredByLabel = this._filterCaptionAssetsByProperty(
-      filteredByLang,
-      get(event, 'payload.selectedTextTrack._label', null),
-      'label'
-    );
-    if (filteredByLang.length === 1) {
-      return filteredByLabel[0];
+  private _getCaptionMapId = (): string => {
+    const allTextTracks = this.player.getTracks(this.player.Track.TEXT) || [];
+    const activeTextTrack = allTextTracks.find(track => track.active);
+    if (activeTextTrack) {
+      const captionMapId = `${activeTextTrack.language}-${activeTextTrack.label}`;
+      return captionMapId;
     }
+    return '';
+  };
 
-    const index: number = get(event, 'payload.selectedTextTrack._id', -1);
-    const filteredByIndex = this._captionsList[index];
-    // take first captions from caption-list when caption language is not defined
-    return filteredByIndex ? filteredByIndex : this._captionsList[0];
+  private onClose = () => {
+    if (this.sidePanelsManager.isItemActive(this._transcriptPanel)) {
+      this._pluginState = PluginStates.CLOSED;
+      this.sidePanelsManager.deactivateItem(this._transcriptPanel);
+    } else {
+      this.sidePanelsManager.activateItem(this._transcriptPanel);
+    }
   };
 
-  private _getCaptionsByLang = (
-    event: string | Record<string, any> = get(this._configs, 'playerConfig.playback.textLanguage', "")
-  ): void => {
-    if (
-      (typeof event === "string" ?
-        event :
-        get(event, 'payload.selectedTextTrack._language', null)
-      ) === "off" && this._captions.length
-    ) {
-      // prevent loading of captions when user select "off" captions option
+  private _addPopoverIcon(): void {
+    const {downloadDisabled, printDisabled} = this.config;
+    if (this._removePopoverIcon) {
       return;
     }
-    if (this._captionsList && this._captionsList.length > 0) {
-      const captionAsset: KalturaCaptionAsset = this._findCaptionAsset(event);
-      if (captionAsset) {
-        this._transcriptLanguage = captionAsset.language;
-        this._initLoading();
-        this._initKitchensinkAndUpperBarItems();
-        this._loadCaptionsAsset(captionAsset);
-      } else {
-        this._onError(
-            undefined,
-            "Current video doesn't have captions in selected language",
-            "_getCaptionsByLang"
-        );
-      }
+    this._removePopoverIcon = this.player.ui.addComponent({
+      label: 'Download transcript',
+      area: ReservedPresetAreas.TopBarRightControls,
+      presets: [ReservedPresetNames.Playback, ReservedPresetNames.Live],
+      get: () => (
+        <DownloadPrintMenu
+          onDownload={this._handleDownload}
+          onPrint={this._handlePrint}
+          downloadDisabled={getConfigValue(downloadDisabled, isBoolean, false)}
+          printDisabled={getConfigValue(printDisabled, isBoolean, false)}
+          dropdownAriaLabel={`Download or print transcript`}
+          printButtonAriaLabel={`Print transcript`}
+          downloadButtonAriaLabel={`Download transcript`}
+        />
+      )
+    });
+  }
+
+  private _createOrUpdatePlugin = () => {
+    if (this._transcriptPanel) {
+      this._updateTranscriptPanel();
     } else {
-      this._onError(undefined, "Current video doesn't have captions", "_getCaptionsByLang");
+      this._initLoading();
+      this._addPopoverIcon();
+      this._addTranscriptItem();
     }
   };
 
-  private _loadCaptionsAsset = (captionAsset: KalturaCaptionAsset) => {
-
-    // CaptionAssetServeAction should be imported from "kaltura-typescript-client/api/types/CaptionAssetServeAction"
-    // replace CaptionAssetServeAction while client fixed (https://kaltura.atlassian.net/browse/FEV-470)
-    const request = new CaptionAssetServeAction({ captionAssetId: captionAsset.id });
-
-    this._kalturaClient.request(request).then(
-      data => {
-        this._getCaptionData(data, captionAsset);
+  private _addTranscriptItem(): void {
+    const buttonLabel = 'Transcript';
+    const {expandMode, position, expandOnFirstPlay} = this.config;
+    const pluginMode: PluginPositions = [SidePanelPositions.RIGHT, SidePanelPositions.LEFT].includes(position)
+      ? PluginPositions.VERTICAL
+      : PluginPositions.HORIZONTAL;
+    const {showTime, scrollOffset, searchDebounceTimeout, searchNextPrevDebounceTimeout} = this.config;
+    this._transcriptPanel = this.sidePanelsManager.addItem({
+      label: 'Transcript',
+      panelComponent: () => {
+        return (
+          <Transcript
+            showTime={getConfigValue(showTime, isBoolean, true)}
+            scrollOffset={getConfigValue(scrollOffset, Number.isInteger, 0)}
+            searchDebounceTimeout={getConfigValue(searchDebounceTimeout, Number.isInteger, 250)}
+            searchNextPrevDebounceTimeout={getConfigValue(searchNextPrevDebounceTimeout, Number.isInteger, 100)}
+            highlightedMap={this._activeCuePointsMap}
+            onSeek={this._seekTo}
+            pluginMode={pluginMode}
+            onItemClicked={this._seekTo}
+            captions={this._data}
+            isLoading={this._isLoading}
+            hasError={this._hasError}
+            onRetryLoad={this._createOrUpdatePlugin}
+            currentTime={this.player.currentTime}
+            videoDuration={this.player.duration}
+            kitchenSinkActive={!!this.sidePanelsManager.isItemActive(this._transcriptPanel)}
+            toggledWithEnter={this._triggeredByKeyboard}
+            onClose={this.onClose}
+          />
+        );
       },
-      err => {
-        // remove getting captions from error while client fixed (https://kaltura.atlassian.net/browse/FEV-470)
-        this._getCaptionData(err, captionAsset);
-        // this._onError(err, "Failed to fetch caption asset", "_loadCaptionsAsset");
+      iconComponent: ({isActive}: {isActive: boolean}) => {
+        return (
+          <Tooltip label={buttonLabel} type="bottom">
+            <PluginButton isActive={isActive} onClick={this.onClose} label={buttonLabel} />
+          </Tooltip>
+        );
+      },
+      presets: [ReservedPresetNames.Playback, ReservedPresetNames.Live, ReservedPresetNames.Ads],
+      position: position,
+      expandMode: expandMode,
+      onActivate: () => {
+        this._pluginState = PluginStates.OPENED;
       }
-    )
-  };
+    });
 
-  private _getCaptionData = (data: any, captionAsset: KalturaCaptionAsset) => {
-    const rawCaptions = get(data, 'error.message', data);
-    if (rawCaptions) {
-      this._captions = this._parseCaptions(rawCaptions, captionAsset);
-      this._isLoading = false;
-      this._updateKitchenSink();
-    } else {
-      this._onError(undefined, "Captions data is empty", "_loadCaptionsAsset");
+    if ((expandOnFirstPlay && !this._pluginState) || this._pluginState === PluginStates.OPENED) {
+      this.ready.then(() => {
+        this.sidePanelsManager.activateItem(this._transcriptPanel);
+      });
     }
   }
 
-  private _parseCaptions = (data: string, captionAsset: KalturaCaptionAsset): CaptionItem[] => {
-    try {
-      const captionFormat = this._getCaptionFormat(captionAsset);
-      if (data.toString().indexOf("Error: ") === 0) {
-         // remove this condition once client fixed 
-        data = data.toString().replace("Error: ", "");
-      }
-      return getCaptionsByFormat(data, captionFormat);
-    } catch(err) {
-      this._onError(err, "Failed to parse the caption file", "_parseCaptions");
+  private _initLoading() {
+    if (!this._isLoading || this._hasError) {
+      this._isLoading = true;
+      this._hasError = false;
+      this._updateTranscriptPanel();
     }
-    return [];
-  };
-
-  private _getCaptionFormat = (captionAsset: KalturaCaptionAsset): string => {
-    const selectedLanguage: Record<string, any> =
-        this._captionsList &&
-        captionAsset &&
-        (this._captionsList.find((item: KalturaCaptionAsset) => item.id === captionAsset.id) || {});
-    return get(selectedLanguage, 'format', '');
-  };
+  }
 
   private _seekTo = (time: number) => {
-    this._player.currentTime = time;
+    this.player.currentTime = time;
   };
 
   private _handleDownload = () => {
-    const { playerConfig } = this._configs;
-    if (this._captions) {
-      const entryMetadata = get(playerConfig, 'sources.metadata', {});
-      downloadContent(
-          makePlainText(this._captions),
-          `${this._transcriptLanguage}${
-              entryMetadata.name ? `-${entryMetadata.name}` : ""
-              }.txt`
-      );
+    const {config} = this.player;
+    const captions = this._captionMap.get(this._activeCaptionMapId) || [];
+
+    if (captions) {
+      const entryMetadata = get(config, 'sources.metadata', {});
+      const language = this._getCaptionMapId();
+
+      downloadContent(makePlainText(captions), `${language}${entryMetadata.name ? `-${entryMetadata.name}` : ''}.txt`);
     }
   };
 
   private _handlePrint = () => {
-    if (this._captions) {
-      printContent(makePlainText(this._captions));
+    const captions = this._captionMap.get(this._activeCaptionMapId) || [];
+
+    if (captions) {
+      printContent(makePlainText(captions));
     }
   };
 
-  private _renderKitchenSinkContent = (props: KitchenSinkContentRendererProps) => {
-    const {
-      showTime,
-      scrollOffset,
-      searchDebounceTimeout,
-      searchNextPrevDebounceTimeout
-    } = this._configs.pluginConfig;
-    return (
-        <Transcript
-            {...props}
-            showTime={getConfigValue(showTime, isBoolean, true)}
-            scrollOffset={getConfigValue(scrollOffset, Number.isInteger, 0)}
-            searchDebounceTimeout={getConfigValue(searchDebounceTimeout, Number.isInteger, 250)}
-            searchNextPrevDebounceTimeout={getConfigValue(
-                searchNextPrevDebounceTimeout,
-                Number.isInteger,
-                100
-            )}
-            onSeek={this._seekTo}
-            captions={this._captions}
-            isLoading={this._isLoading}
-            hasError={this._hasError}
-            onRetryLoad={this._loadCaptions}
-            currentTime={this._player.currentTime}
-            videoDuration={this._player.duration}
-            kitchenSinkActive={!!this._kitchenSinkItem?.isActive()}
-            toggledWithEnter={this._triggeredByKeyboard}
-        />
-    );
-  };
-}
+  static isValid(): boolean {
+    return true;
+  }
 
-ContribPluginManager.registerPlugin(
-  pluginName,
-  (data: ContribPluginData<TranscriptPluginConfig>) => {
-    return new TranscriptPlugin(data.contribServices, data.configs, data.player);
-  },
-  {
-    defaultConfig: {
-      expandMode: KitchenSinkExpandModes.AlongSideTheVideo,
-      expandOnFirstPlay: true,
-      showTime: true,
-      position: KitchenSinkPositions.Bottom,
-      scrollOffset: 0,
-      searchDebounceTimeout: 250,
-      searchNextPrevDebounceTimeout: 100,
-      downloadDisabled: false,
-      printDisabled: false
+  reset(): void {
+    if (this._removePopoverIcon) {
+      this._removePopoverIcon();
+      this._removePopoverIcon = null;
     }
+
+    this._captionMap = new Map();
+    this._activeCaptionMapId = '';
+    this._isLoading = false;
+    this._hasError = false;
   }
-);
+
+  destroy(): void {
+    this.reset();
+  }
+}

package/src/types/index.ts

@@ -0,0 +1,3 @@
+export * from './types-ui';
+export * from './transcript-config';
+export * from './transcript-item-data';