@playkit-js/transcript 2.1.5-canary.18-708d21c → 2.1.5-canary.21-e28422e

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@playkit-js/transcript",
-  "version": "2.1.5-canary.18-708d21c",
+  "version": "2.1.5-canary.21-e28422e",
   "main": "dist/playkit-transcript.js",
   "license": "AGPL-3.0",
   "private": false,

package/src/components/download-print-menu/download-print-menu.tsx

@@ -65,11 +65,6 @@ interface DownloadPrintMenuState {
 }
 
 export class DownloadPrintMenu extends Component<DownloadPrintMenuProps, DownloadPrintMenuState> {
-  static defaultProps = {
-    dropdownAriaLabel: 'Download or print current transcript',
-    printButtonAriaLabel: 'Print current transcript',
-    downloadButtonAriaLabel: 'Download current transcript'
-  };
   state: DownloadPrintMenuState = {
     popoverOpen: false
   };

package/src/components/spinner/spinner.scss

@@ -1,4 +1,4 @@
-.spinner-ball {
+.transcript-spinner-ball {
   position: relative;
   display: flex;
   align-items: center;

package/src/components/spinner/spinner.tsx

@@ -4,7 +4,7 @@ import * as styles from './spinner.scss';
 export class Spinner extends Component {
   render() {
     return (
-      <div className={styles.spinnerBall}>
+      <div className={styles.transcriptSpinnerBall}>
         <svg
           width="184px"
           height="184px"

package/src/components/transcript/transcript.tsx

@@ -1,5 +1,5 @@
 import {h, Component} from 'preact';
-import {A11yWrapper} from '@playkit-js/common';
+import {A11yWrapper, OnClickEvent} from '@playkit-js/common';
 import {debounce} from '../../utils';
 import * as styles from './transcript.scss';
 import {Spinner} from '../spinner';
@@ -84,7 +84,7 @@ export class Transcript extends Component<TranscriptProps, TranscriptState> {
     this._setWidgetSize();
   }
 
-  private _enableAutoScroll = (event: any, byKeyboard?: boolean) => {
+  private _enableAutoScroll = (event: OnClickEvent, byKeyboard?: boolean) => {
     event.preventDefault();
     if (this.state.isAutoScrollEnabled) {
       return;
@@ -93,7 +93,7 @@ export class Transcript extends Component<TranscriptProps, TranscriptState> {
     this.setState({
       isAutoScrollEnabled: true
     });
-    if (event.type !== 'click') {
+    if (byKeyboard) {
       this._skipTranscriptButtonRef?.focus();
     }
   };

package/src/transcript-plugin.tsx

@@ -1,6 +1,7 @@
 import {h} from 'preact';
-import {ObjectUtils} from './utils';
+import {OnClickEvent} from '@playkit-js/common';
 import {ui} from 'kaltura-player-js';
+import {ObjectUtils} from './utils';
 import {PluginButton} from './components/plugin-button/plugin-button';
 import {Transcript} from './components/transcript';
 import {getConfigValue, isBoolean, makePlainText, prepareCuePoint} from './utils';
@@ -10,6 +11,13 @@ import {DownloadPrintMenu, downloadContent, printContent} from './components/dow
 const {SidePanelModes, SidePanelPositions, ReservedPresetNames, ReservedPresetAreas} = ui;
 const {get} = ObjectUtils;
 const {Tooltip} = KalturaPlayer.ui.components;
+const {withText, Text} = KalturaPlayer.ui.preacti18n;
+
+const translates = () => ({
+  printDownloadAreaLabel: <Text id="transcript.print_download_area_label">Download or print current transcript</Text>,
+  printTranscript: <Text id="transcript.print_transcript">Print current transcript</Text>,
+  downloadTranscript: <Text id="transcript.download_transcript">Download current transcript</Text>
+});
 
 interface TimedMetadataEvent {
   payload: {
@@ -62,27 +70,34 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
       this.logger.warn("kalturaCuepoints or sidePanelsManager haven't registered");
       return;
     }
-    this.onPluginSetup();
+    this._initListeners();
     this.cuePointManager.registerTypes([this.cuePointManager.CuepointType.CAPTION]);
   }
 
-  onPluginSetup(): void {
+  private _initListeners(): void {
+    this.eventManager.listen(this.player, this.player.Event.FIRST_PLAYING, () => {
+      if ((this.player.getTracks(this.player.Track.TEXT) || []).length) {
+        // check if captions already added in TextTrack
+        if (!this._captionMap.size) {
+          // turn on loading animation till captions added to TextTrack
+          this._isLoading = true;
+        }
+        this._addPopoverIcon();
+        this._addTranscriptItem();
+      }
+    });
     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);
   }
 
-  onRegisterUI(): void {}
-
   private _handleLanguageChange = () => {
     this._activeCaptionMapId = this._getCaptionMapId();
-    if (this._captionMap.has(this._activeCaptionMapId)) {
-      this._updateTranscriptPanel();
-    }
+    this._isLoading = !this._captionMap.has(this._activeCaptionMapId);
+    this._updateTranscriptPanel();
   };
 
   private _updateTranscriptPanel() {
-    this._isLoading = false;
     if (this._transcriptPanel) {
       this.sidePanelsManager.update(this._transcriptPanel);
     }
@@ -114,7 +129,8 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
   private _addCaptionData = (newData: CuePointData[]) => {
     this._activeCaptionMapId = this._getCaptionMapId();
     this._captionMap.set(this._activeCaptionMapId, newData);
-    this._createOrUpdatePlugin();
+    this._isLoading = false;
+    this._updateTranscriptPanel();
   };
 
   private _getCaptionMapId = (): string => {
@@ -127,13 +143,9 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
     return '';
   };
 
-  private onClose = () => {
-    if (this.sidePanelsManager.isItemActive(this._transcriptPanel)) {
-      this._pluginState = PluginStates.CLOSED;
-      this.sidePanelsManager.deactivateItem(this._transcriptPanel);
-    } else {
-      this.sidePanelsManager.activateItem(this._transcriptPanel);
-    }
+  private _handleCloseClick = () => {
+    this.sidePanelsManager.deactivateItem(this._transcriptPanel);
+    this._pluginState = PluginStates.CLOSED;
   };
 
   private _addPopoverIcon(): void {
@@ -142,33 +154,23 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
       return;
     }
     this._removePopoverIcon = this.player.ui.addComponent({
-      label: 'Download transcript',
+      label: 'Download or print transcript',
       area: ReservedPresetAreas.TopBarRightControls,
       presets: [ReservedPresetNames.Playback, ReservedPresetNames.Live],
-      get: () => (
+      get: withText(translates)(({printDownloadAreaLabel, printTranscript, downloadTranscript}: Record<string, string>) => (
         <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`}
+          dropdownAriaLabel={printDownloadAreaLabel}
+          printButtonAriaLabel={printTranscript}
+          downloadButtonAriaLabel={downloadTranscript}
         />
-      )
+      ))
     });
   }
 
-  private _createOrUpdatePlugin = () => {
-    if (this._transcriptPanel) {
-      this._updateTranscriptPanel();
-    } else {
-      this._initLoading();
-      this._addPopoverIcon();
-      this._addTranscriptItem();
-    }
-  };
-
   private _addTranscriptItem(): void {
     const buttonLabel = 'Transcript';
     const {expandMode, position, expandOnFirstPlay} = this.config;
@@ -192,19 +194,31 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
             captions={this._data}
             isLoading={this._isLoading}
             hasError={this._hasError}
-            onRetryLoad={this._createOrUpdatePlugin}
+            onRetryLoad={this._updateTranscriptPanel}
             currentTime={this.player.currentTime}
             videoDuration={this.player.duration}
             kitchenSinkActive={!!this.sidePanelsManager.isItemActive(this._transcriptPanel)}
             toggledWithEnter={this._triggeredByKeyboard}
-            onClose={this.onClose}
+            onClose={this._handleCloseClick}
           />
         );
       },
       iconComponent: ({isActive}: {isActive: boolean}) => {
         return (
           <Tooltip label={buttonLabel} type="bottom">
-            <PluginButton isActive={isActive} onClick={this.onClose} label={buttonLabel} />
+            <PluginButton
+              isActive={isActive}
+              label={buttonLabel}
+              onClick={(e: OnClickEvent, byKeyboard?: boolean) => {
+                if (this.sidePanelsManager.isItemActive(this._transcriptPanel)) {
+                  this._triggeredByKeyboard = false;
+                  this._handleCloseClick();
+                } else {
+                  this._triggeredByKeyboard = Boolean(byKeyboard);
+                  this.sidePanelsManager.activateItem(this._transcriptPanel);
+                }
+              }}
+            />
           </Tooltip>
         );
       },
@@ -223,14 +237,6 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
     }
   }
 
-  private _initLoading() {
-    if (!this._isLoading || this._hasError) {
-      this._isLoading = true;
-      this._hasError = false;
-      this._updateTranscriptPanel();
-    }
-  }
-
   private _seekTo = (time: number) => {
     this.player.currentTime = time;
   };
@@ -260,15 +266,20 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
   }
 
   reset(): void {
+    this.eventManager.removeAll();
     if (this._removePopoverIcon) {
       this._removePopoverIcon();
       this._removePopoverIcon = null;
     }
-
+    if (this._transcriptPanel) {
+      this.sidePanelsManager.removeItem(this._transcriptPanel);
+      this._transcriptPanel = null;
+    }
     this._captionMap = new Map();
     this._activeCaptionMapId = '';
     this._isLoading = false;
     this._hasError = false;
+    this._triggeredByKeyboard = false;
   }
 
   destroy(): void {