@playkit-js/transcript 3.1.0-canary.2-d22690c → 3.1.0-canary.4-372ac3f

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@playkit-js/transcript",
-  "version": "3.1.0-canary.2-d22690c",
+  "version": "3.1.0-canary.4-372ac3f",
   "main": "dist/playkit-transcript.js",
   "license": "AGPL-3.0",
   "private": false,

package/src/components/caption/caption.tsx

@@ -116,8 +116,8 @@ export class Caption extends Component<ExtendedCaptionProps> {
       <A11yWrapper onClick={this._handleKeyDown}>
         <div
           className={styles.caption}
-          tabIndex={1}
-          area-label={caption.text}
+          tabIndex={0}
+          aria-label={caption.text}
           ref={node => {
             this._hotspotRef = node;
           }}

package/src/components/close-button/index.tsx

@@ -16,7 +16,7 @@ interface CloseButtonProps {
 
 export const CloseButton = withText(translates)((props: CloseButtonProps) => (
   <A11yWrapper onClick={props.onClick}>
-    <button className={styles.closeBtn} tabIndex={1} aria-label={props.closeLabel}>
+    <button className={styles.closeBtn} tabIndex={0} aria-label={props.closeLabel}>
       <Icon
         id="transcript-plugin-close-button"
         height={icons.BigSize}

package/src/components/search/search.tsx

@@ -167,14 +167,14 @@ class SearchComponent extends Component<SearchProps, SearchState> {
           onFocus={this._onFocus}
           onBlur={this._onBlur}
           onMouseDown={this._handleMouseDown}
-          tabIndex={1}
+          tabIndex={0}
           ref={node => {
             this._inputRef = node;
           }}
         />
         {searchQuery && (
           <A11yWrapper onClick={this._onClear}>
-            <button className={styles.clearIcon} tabIndex={1} aria-label={this.props.clearSearchLabel}>
+            <button className={styles.clearIcon} tabIndex={0} aria-label={this.props.clearSearchLabel}>
               <svg
                 width="32px"
                 height="32px"
@@ -201,7 +201,7 @@ class SearchComponent extends Component<SearchProps, SearchState> {
           {searchQuery && (
             <A11yWrapper onClick={this._goToPrevSearchResult}>
               <button
-                tabIndex={1}
+                tabIndex={0}
                 className={`${styles.prevNextButton} ${totalSearchResults === 0 ? styles.disabled : ''}`}
                 aria-label={this.props.prevMatchLabel}>
                 <svg
@@ -225,7 +225,7 @@ class SearchComponent extends Component<SearchProps, SearchState> {
           {searchQuery && (
             <A11yWrapper onClick={this._goToNextSearchResult}>
               <button
-                tabIndex={1}
+                tabIndex={0}
                 className={`${styles.prevNextButton} ${totalSearchResults === 0 ? styles.disabled : ''}`}
                 aria-label={this.props.nextMatchLabel}>
                 <svg

package/src/components/transcript/transcript.tsx

@@ -13,7 +13,10 @@ const {ENTER, SPACE, TAB, ESC} = KalturaPlayer.ui.utils.KeyMap;
 const {withText, Text} = KalturaPlayer.ui.preacti18n;
 
 const translates = {
-  autoScrollLabel: <Text id="transcript.auto_scroll">Enable auto scroll</Text>
+  autoScrollLabel: <Text id="transcript.auto_scroll">Enable auto scroll</Text>,
+  errorTitle: <Text id="transcript.whoops">Whoops!</Text>,
+  errorDescripton: <Text id="transcript.load_failed">Failed to load transcript</Text>,
+  skipTranscript: <Text id="transcript.skip_transcript">Skip transcript</Text>
 };
 
 export interface TranscriptProps {
@@ -34,6 +37,9 @@ export interface TranscriptProps {
   highlightedMap: HighlightedMap;
   onItemClicked: (n: number) => void;
   autoScrollLabel?: string;
+  errorTitle?: string;
+  errorDescripton?: string;
+  skipTranscript?: string;
 }
 
 interface TranscriptState {
@@ -111,7 +117,7 @@ export class TranscriptComponent extends Component<TranscriptProps, TranscriptSt
         <div
           role="button"
           className={`${styles.autoscrollButton} ${isAutoScrollEnabled ? '' : styles.autoscrollButtonVisible}`}
-          tabIndex={isAutoScrollEnabled ? -1 : 1}
+          tabIndex={isAutoScrollEnabled ? -1 : 0}
           aria-label={this.props.autoScrollLabel}
           ref={node => {
             this._autoscrollButtonRef = node;
@@ -238,8 +244,8 @@ export class TranscriptComponent extends Component<TranscriptProps, TranscriptSt
         className={styles.skipTranscriptButton}
         onKeyDown={this._handleKeyDown}
         onClick={this._handleClick}
-        tabIndex={1}>
-        Skip transcript
+        tabIndex={0}>
+        {this.props.skipTranscript}
       </div>
     );
   };
@@ -247,9 +253,6 @@ export class TranscriptComponent extends Component<TranscriptProps, TranscriptSt
   private _renderTranscript = () => {
     const {captions, hasError, onRetryLoad, showTime, videoDuration, highlightedMap} = this.props;
     const {isAutoScrollEnabled, searchMap, activeSearchIndex, searchLength} = this.state;
-    if (!captions || !captions.length) {
-      return null;
-    }
 
     if (hasError) {
       return (
@@ -257,17 +260,16 @@ export class TranscriptComponent extends Component<TranscriptProps, TranscriptSt
           <div className={styles.errorIcon}>
             <ErrorIcon />
           </div>
-          <p className={styles.errorMainText}>Whoops!</p>
-          <p className={styles.errorDescriptionText}>
-            Failed to get transcript, please try again
-            <button className={styles.retryButton} onClick={onRetryLoad}>
-              Retry
-            </button>
-          </p>
+          <p className={styles.errorMainText}>{this.props.errorTitle}</p>
+          <p className={styles.errorDescriptionText}>{this.props.errorDescripton}</p>
         </div>
       );
     }
 
+    if (!captions || !captions.length) {
+      return null;
+    }
+
     const captionProps = {
       showTime,
       searchLength,
@@ -369,8 +371,8 @@ export class TranscriptComponent extends Component<TranscriptProps, TranscriptSt
   };
 
   render(props: TranscriptProps) {
-    const {isLoading, kitchenSinkActive} = props;
-
+    const {isLoading, kitchenSinkActive, hasError} = props;
+    const renderTranscriptButtons = !(isLoading || hasError);
     return (
       <div
         className={`${styles.root} ${kitchenSinkActive ? '' : styles.hidden}`}
@@ -383,7 +385,7 @@ export class TranscriptComponent extends Component<TranscriptProps, TranscriptSt
 
           <CloseButton onClick={this.props.onClose} />
 
-          {!isLoading && this._renderSkipTranscriptButton()}
+          {renderTranscriptButtons && this._renderSkipTranscriptButton()}
           <div
             className={styles.body}
             onScroll={this._onScroll}
@@ -392,7 +394,7 @@ export class TranscriptComponent extends Component<TranscriptProps, TranscriptSt
             }}>
             {isLoading ? this._renderLoading() : this._renderTranscript()}
           </div>
-          {this._renderScrollToButton()}
+          {renderTranscriptButtons && this._renderScrollToButton()}
         </div>
       </div>
     );

package/src/transcript-plugin.tsx

@@ -13,6 +13,8 @@ const {SidePanelModes, SidePanelPositions, ReservedPresetNames, ReservedPresetAr
 const {withText, Text} = KalturaPlayer.ui.preacti18n;
 const {get} = ObjectUtils;
 
+const LOADING_TIMEOUT = 10000;
+
 interface TimedMetadataEvent {
   payload: {
     cues: Array<CuePoint>;
@@ -35,6 +37,7 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
   private _activeCuePointsMap: HighlightedMap = {};
   private _captionMap: Map<string, Array<CuePointData>> = new Map();
   private _isLoading = false;
+  private _loadingTimeoutId?: ReturnType<typeof setTimeout>;
   private _hasError = false;
   private _triggeredByKeyboard = false;
 
@@ -78,27 +81,39 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
   }
 
   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.eventManager.listenOnce(this.player, this.player.Event.TRACKS_CHANGED, () => {
+      if (this._getTextTracks().length) {
+        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);
         this._addDownloadIcon();
         this._addPrintIcon();
         this._addTranscriptItem();
+        this._initLoading();
       }
     });
-    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 _initLoading = () => {
+    clearTimeout(this._loadingTimeoutId);
+    this._isLoading = false;
+    this._hasError = false;
+    if (!this._captionMap.has(this._activeCaptionMapId)) {
+      // turn on loading animation till captions added to TextTrack
+      this._isLoading = true;
+      this._loadingTimeoutId = setTimeout(() => {
+        // display error slate
+        this._isLoading = false;
+        this._hasError = true;
+        this._updateTranscriptPanel();
+      }, LOADING_TIMEOUT);
+    }
+    this._updateTranscriptPanel();
+  };
+
   private _handleLanguageChange = () => {
     this._activeCaptionMapId = this._getCaptionMapId();
-    this._isLoading = !this._captionMap.has(this._activeCaptionMapId);
-    this._updateTranscriptPanel();
+    this._initLoading();
   };
 
   private _updateTranscriptPanel() {
@@ -140,11 +155,16 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
     this._activeCaptionMapId = this._getCaptionMapId();
     this._captionMap.set(this._activeCaptionMapId, newData);
     this._isLoading = false;
+    clearTimeout(this._loadingTimeoutId);
     this._updateTranscriptPanel();
   };
 
+  private _getTextTracks = () => {
+    return this.player.getTracks(this.player.Track.TEXT) || [];
+  };
+
   private _getCaptionMapId = (): string => {
-    const allTextTracks = this.player.getTracks(this.player.Track.TEXT) || [];
+    const allTextTracks = this._getTextTracks();
     const activeTextTrack = allTextTracks.find(track => track.active);
     if (activeTextTrack?.language === 'off') {
       // use 1st captions from text-track list
@@ -219,9 +239,11 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
   }
 
   private _addTranscriptItem(): void {
-    const {expandMode, position, expandOnFirstPlay} = this.config;
-    const {showTime, scrollOffset, searchDebounceTimeout, searchNextPrevDebounceTimeout} = this.config;
+    if (this._transcriptPanel > 0) {
+      return;
+    }
 
+    const {expandMode, position, expandOnFirstPlay, showTime, scrollOffset, searchDebounceTimeout, searchNextPrevDebounceTimeout} = this.config;
     this._transcriptPanel = this.sidePanelsManager!.add({
       label: 'Transcript',
       panelComponent: () => {
@@ -320,6 +342,7 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
     this._captionMap = new Map();
     this._activeCaptionMapId = '';
     this._isLoading = false;
+    clearTimeout(this._loadingTimeoutId);
     this._hasError = false;
     this._triggeredByKeyboard = false;
   }