@playkit-js/transcript 3.5.25 → 3.5.26-canary.0-7fa5f63

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@playkit-js/transcript",
-  "version": "3.5.25",
+  "version": "3.5.26-canary.0-7fa5f63",
   "main": "dist/playkit-transcript.js",
   "license": "AGPL-3.0",
   "private": false,
@@ -21,7 +21,7 @@
     "copyfiles": "^2.4.1",
     "cross-env": "^7.0.3",
     "css-loader": "^6.7.1",
-    "cypress": "^12.12.0",
+    "cypress": "13.13.1",
     "playwright-webkit": "^1.33.0",
     "prettier": "^2.6.2",
     "rimraf": "^5.0.5",

package/src/components/caption/caption.tsx

@@ -4,7 +4,11 @@ import {secondsToTime} from '../../utils';
 import {CuePointData} from '../../types';
 import * as styles from './caption.scss';
 
+import {TranscriptEvents} from '../../events/events';
+
 const {withText, Text} = KalturaPlayer.ui.preacti18n;
+const {withEventManager} = KalturaPlayer.ui.Event;
+const {withPlayer} = KalturaPlayer.ui.components;
 
 export interface CaptionProps {
   showTime: boolean;
@@ -12,7 +16,11 @@ export interface CaptionProps {
   scrollTo(el: HTMLElement): void;
   scrollToSearchMatch(el: HTMLElement): void;
   videoDuration: number;
+  eventManager?: any;
+  player?: any;
   captionLabel?: string;
+  moveToSearch?: string;
+  setTextToRead: (textToRead: string, delay?: number) => void;
 }
 
 interface ExtendedCaptionProps extends CaptionProps {
@@ -28,21 +36,45 @@ interface ExtendedCaptionProps extends CaptionProps {
 }
 
 const translates = {
-  captionLabel: <Text id="transcript.caption_label">Jump to this point in video</Text>
+  captionLabel: <Text id="transcript.caption_label">Jump to this point in video</Text>,
+  moveToSearch: <Text id="transcript.move_to_search">Click to jump to search result</Text>
 };
 
 @withText(translates)
+@withEventManager
+@withPlayer
 export class Caption extends Component<ExtendedCaptionProps> {
-  private _hotspotRef: HTMLElement | null = null;
+  private _captionRef: HTMLElement | null = null;
+
+  get indexArray() {
+    if (!this.props.indexMap) {
+      return [];
+    }
+    return Object.keys(this.props.indexMap).sort((a, b) => Number(a) - Number(b));
+  }
 
-  componentDidUpdate() {
-    if (this._hotspotRef && this.props.shouldScroll) {
-      this.props.scrollTo(this._hotspotRef);
-    } else if (this._hotspotRef && this.props.shouldScrollToSearchMatch) {
-      this.props.scrollToSearchMatch(this._hotspotRef);
+  componentDidUpdate(previousProps: Readonly<ExtendedCaptionProps>) {
+    if (this._captionRef && this.props.shouldScroll) {
+      this.props.scrollTo(this._captionRef);
+    } else if (this._captionRef && this.props.shouldScrollToSearchMatch) {
+      this.props.scrollToSearchMatch(this._captionRef);
+    }
+    if (this.props.indexMap && previousProps.activeSearchIndex !== this.props.activeSearchIndex) {
+      if (this._hasSearchMatch()) {
+        this.props.setTextToRead(this.props.caption.text);
+      }
     }
   }
 
+  componentDidMount(): void {
+    const {eventManager, player} = this.props;
+    eventManager?.listen(player, TranscriptEvents.TRANSCRIPT_TO_SEARCH_MATCH, () => {
+      if (this._hasSearchMatch()) {
+        this._captionRef?.focus();
+      }
+    });
+  }
+
   shouldComponentUpdate(nextProps: ExtendedCaptionProps) {
     const {indexMap, highlighted, isAutoScrollEnabled, activeSearchIndex, longerThanHour} = this.props;
     if (longerThanHour !== nextProps.longerThanHour) {
@@ -74,12 +106,16 @@ export class Caption extends Component<ExtendedCaptionProps> {
     }
   };
 
+  private _hasSearchMatch = () => {
+    if (!this.props.indexMap) {
+      return false;
+    }
+    return Boolean(this.indexArray.find((el: string) => Number(el) === this.props.activeSearchIndex));
+  };
+
   private _renderText = (text: string) => {
     const {activeSearchIndex, searchLength, indexMap} = this.props;
-    let indexArray: string[] = [];
-    if (indexMap) {
-      indexArray = Object.keys(indexMap).sort((a, b) => Number(a) - Number(b));
-    }
+    const indexArray = this.indexArray;
     if (text?.length === 0) {
       return null;
     }
@@ -107,15 +143,15 @@ export class Caption extends Component<ExtendedCaptionProps> {
   };
 
   render() {
-    const {caption, highlighted, showTime, longerThanHour} = this.props;
+    const {caption, highlighted, showTime, longerThanHour, indexMap, captionLabel, moveToSearch} = this.props;
     const {startTime, id} = caption;
-    const isHighlighted = Object.keys(highlighted).some(c => c === id) ;
+    const isHighlighted = Object.keys(highlighted).some(c => c === id);
     const time = showTime ? secondsToTime(startTime, longerThanHour) : '';
 
     const captionA11yProps: Record<string, any> = {
       ariaCurrent: isHighlighted,
       tabIndex: 0,
-      ariaLabel: `${time}${showTime ? ' ' : ''}${caption.text} ${this.props.captionLabel}`,
+      ariaLabel: `${time}${showTime ? ' ' : ''}${caption.text} ${indexMap ? moveToSearch : captionLabel}`,
       role: 'button'
     };
 
@@ -124,7 +160,7 @@ export class Caption extends Component<ExtendedCaptionProps> {
         <div
           className={styles.caption}
           ref={node => {
-            this._hotspotRef = node;
+            this._captionRef = node;
           }}
           {...captionA11yProps}>
           {showTime && (

package/src/components/caption-list/captionList.tsx

@@ -1,4 +1,5 @@
 import {h, Component} from 'preact';
+import {ScreenReaderContext} from '@playkit-js/common/dist/hoc/sr-wrapper';
 import {HOUR} from '../../utils';
 import {Caption} from '../caption';
 import * as styles from './captionList.scss';
@@ -111,27 +112,34 @@ export class CaptionList extends Component<Props> {
         {data.map((captionData, index) => {
           const captionProps = this._getCaptionProps(captionData);
           return (
-            <Caption
-              ref={node => {
-                if (index === 0) {
-                  this._firstCaptionRef = node;
-                } else if (index === data.length - 1) {
-                  this._lastCaptionRef = node;
-                }
-                if (captionProps.searchCaption){
-                  Object.keys(captionProps.searchCaption).forEach(key => {
-                    if (parseInt(key) === this.props.activeSearchIndex) {
-                      this._currentCaptionRef = node
-                      isSearchCaption = true;
-                    }
-                  });
-                }
-                if (!isSearchCaption && captionProps.highlighted[captionData.id]) {
-                  this._currentCaptionRef = node;
-                }
+            <ScreenReaderContext.Consumer>
+              {(setTextToRead: (textToRead: string, delay?: number | undefined) => void) => {
+                return (
+                  <Caption
+                    setTextToRead={setTextToRead}
+                    ref={node => {
+                      if (index === 0) {
+                        this._firstCaptionRef = node;
+                      } else if (index === data.length - 1) {
+                        this._lastCaptionRef = node;
+                      }
+                      if (captionProps.searchCaption) {
+                        Object.keys(captionProps.searchCaption).forEach(key => {
+                          if (parseInt(key) === this.props.activeSearchIndex) {
+                            this._currentCaptionRef = node;
+                            isSearchCaption = true;
+                          }
+                        });
+                      }
+                      if (!isSearchCaption && captionProps.highlighted[captionData.id]) {
+                        this._currentCaptionRef = node;
+                      }
+                    }}
+                    {...captionProps}
+                  />
+                );
               }}
-              {...captionProps}
-            />
+            </ScreenReaderContext.Consumer>
           );
         })}
       </div>

package/src/components/transcript/transcript.scss

@@ -1,5 +1,7 @@
 @import '../../variables.scss';
 
+$button-height: 32px;
+
 .hidden {
   visibility: hidden;
 }
@@ -25,7 +27,7 @@
     align-items: center;
     justify-content: center;
     width: 120px;
-    height: 32px;
+    height: $button-height;
     border-radius: $roundness-3;
     box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.3);
     border: solid 1px $primary-color;
@@ -60,16 +62,28 @@
 }
 
 .header {
+  $header-margin-bottom: 8px;
+
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  margin-bottom: 8px;
+  margin-bottom: $header-margin-bottom;
   padding-left: 16px;
   font-size: 16px;
   padding-right: 16px;
   gap: 8px;
   z-index: 2;
+  .to-search-button {
+    position: absolute;
+    right: 16px;
+    bottom: calc((#{$button-height + $header-margin-bottom}) * -1); // button height + margin
+    opacity: 0;
+    &:focus {
+      opacity: 1;
+    }
+  }
 }
 
 .body {

package/src/components/transcript/transcript.tsx

@@ -11,6 +11,7 @@ import {AutoscrollButton} from '../autoscroll-button';
 import {TranscriptMenu} from '../transcript-menu';
 import {SmallScreenSlate} from '../small-screen-slate';
 import {Button, ButtonType, ButtonSize} from '@playkit-js/common/dist/components/button';
+import {ScreenReaderProvider} from '@playkit-js/common/dist/hoc/sr-wrapper';
 import {OnClickEvent, OnClick} from '@playkit-js/common/dist/hoc/a11y-wrapper';
 import {TranscriptEvents} from '../../events/events';
 
@@ -28,7 +29,8 @@ const translates = {
   errorTitle: <Text id="transcript.whoops">Whoops!</Text>,
   errorDescripton: <Text id="transcript.load_failed">Failed to load transcript</Text>,
   attachTranscript: <Text id="transcript.attach_transcript">Bring Transcript back</Text>,
-  detachTranscript: <Text id="transcript.detach_transcript">Popout transcript</Text>
+  detachTranscript: <Text id="transcript.detach_transcript">Popout transcript</Text>,
+  toSearchResult: <Text id="transcript.to_search_result">Go to result</Text>
 };
 
 export interface TranscriptProps {
@@ -53,6 +55,7 @@ export interface TranscriptProps {
   errorDescripton?: string;
   attachTranscript?: string;
   detachTranscript?: string;
+  toSearchResult?: string;
   downloadDisabled: boolean;
   onDownload: () => void;
   printDisabled: boolean;
@@ -66,6 +69,7 @@ export interface TranscriptProps {
   kitchenSinkDetached: boolean;
   isMobile?: boolean;
   playerWidth?: number;
+  onJumpToSearchMatch: () => void;
 }
 
 interface TranscriptState {
@@ -268,6 +272,24 @@ export class Transcript extends Component<TranscriptProps, TranscriptState> {
     return styles.smallWidth;
   };
 
+  private _renderJumpToSearchButton = () => {
+    const {toSearchResult, onJumpToSearchMatch} = this.props;
+    const {search, activeSearchIndex, totalSearchResults} = this.state;
+    if (!search || totalSearchResults === 0 || activeSearchIndex === 0) {
+      return null;
+    }
+    return (
+      <Button
+        type={ButtonType.secondary}
+        className={styles.toSearchButton}
+        onClick={onJumpToSearchMatch}
+        ariaLabel={toSearchResult}
+        testId="transcript_jumpToSearchMatch">
+        {toSearchResult}
+      </Button>
+    );
+  };
+
   private _renderHeader = () => {
     const {
       toggledWithEnter,
@@ -294,7 +316,6 @@ export class Transcript extends Component<TranscriptProps, TranscriptState> {
         disabled: isLoading
       };
     }
-
     return (
       <div className={[styles.header, this._getHeaderStyles()].join(' ')} data-testid="transcript_header">
         <Search
@@ -306,6 +327,7 @@ export class Transcript extends Component<TranscriptProps, TranscriptState> {
           toggledWithEnter={toggledWithEnter}
           kitchenSinkActive={kitchenSinkActive}
         />
+        {this._renderJumpToSearchButton()}
         <TranscriptMenu {...{downloadDisabled, onDownload, printDisabled, onPrint, isLoading, detachMenuItem, kitchenSinkDetached}} />
         {!detachMenuItem && this._renderDetachButton()}
         {!kitchenSinkDetached && (
@@ -477,32 +499,34 @@ export class Transcript extends Component<TranscriptProps, TranscriptState> {
     const {isLoading, kitchenSinkActive, kitchenSinkDetached, hasError, smallScreen, toggledWithEnter} = props;
     const renderTranscriptButtons = !(isLoading || hasError);
     return (
-      <div
-        className={`${styles.root} ${kitchenSinkActive || kitchenSinkDetached ? '' : styles.hidden}`}
-        ref={node => {
-          this._widgetRootRef = node;
-        }}
-        data-testid="transcript_root">
-        {smallScreen && !kitchenSinkDetached ? (
-          <SmallScreenSlate onClose={this.props.onClose} toggledWithEnter={toggledWithEnter} />
-        ) : (
-          <div className={styles.globalContainer}>
-            {this._renderHeader()}
-
-            {renderTranscriptButtons && this._renderSkipTranscriptButton()}
-            <div
-              className={styles.body}
-              onScroll={this._onScroll}
-              ref={node => {
-                this._transcriptListRef = node;
-              }}
-              data-testid="transcript_list">
-              {isLoading ? this._renderLoading() : this._renderTranscript()}
+      <ScreenReaderProvider>
+        <div
+          className={`${styles.root} ${kitchenSinkActive || kitchenSinkDetached ? '' : styles.hidden}`}
+          ref={node => {
+            this._widgetRootRef = node;
+          }}
+          data-testid="transcript_root">
+          {smallScreen && !kitchenSinkDetached ? (
+            <SmallScreenSlate onClose={this.props.onClose} toggledWithEnter={toggledWithEnter} />
+          ) : (
+            <div className={styles.globalContainer}>
+              {this._renderHeader()}
+
+              {renderTranscriptButtons && this._renderSkipTranscriptButton()}
+              <div
+                className={styles.body}
+                onScroll={this._onScroll}
+                ref={node => {
+                  this._transcriptListRef = node;
+                }}
+                data-testid="transcript_list">
+                {isLoading ? this._renderLoading() : this._renderTranscript()}
+              </div>
+              {renderTranscriptButtons && this._renderScrollToButton()}
             </div>
-            {renderTranscriptButtons && this._renderScrollToButton()}
-          </div>
-        )}
-      </div>
+          )}
+        </div>
+      </ScreenReaderProvider>
     );
   }
 }

package/src/events/events.ts

@@ -8,7 +8,9 @@ export const TranscriptEvents = {
   TRANSCRIPT_POPOUT_OPEN: 'transcript_popout_open',
   TRANSCRIPT_POPOUT_CLOSE: 'transcript_popout_close',
   TRANSCRIPT_POPOUT_DRAG: 'transcript_popout_drag',
-  TRANSCRIPT_POPOUT_RESIZE: 'transcript_popout_resize'
+  TRANSCRIPT_POPOUT_RESIZE: 'transcript_popout_resize',
+
+  TRANSCRIPT_TO_SEARCH_MATCH: 'transcript_to_search_match' // internal event
 };
 
 export enum CloseDetachTypes {

package/src/transcript-plugin.tsx

@@ -281,6 +281,10 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
     return this.sidePanelsManager!.isItemDetached(this._transcriptPanel);
   };
 
+  private _toSearchMatch = () => {
+    this.dispatchEvent(TranscriptEvents.TRANSCRIPT_TO_SEARCH_MATCH);
+  };
+
   private _addTranscriptItem(): void {
     if (Math.max(this._transcriptPanel, this._transcriptIcon, this._audioPlayerIconId) > 0) {
       // transcript panel or icon already exist
@@ -330,6 +334,7 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
             onAttach={() => {
               this._handleAttach(CloseDetachTypes.arrow);
             }}
+            onJumpToSearchMatch={this._toSearchMatch}
           />
         ) as any;
       },

package/translations/en.i18n.json

@@ -22,7 +22,10 @@
       "attach_transcript": "Bring Transcript back",
       "detach_transcript": "Popout transcript",
       "transcript": "Transcript",
-      "caption_label": "Jump to this point in video"
+      "caption_label": "Jump to this point in video",
+      "move_to_search": "Click to jump to search result",
+      "to_search_result": "Go to result",
+      "to_search_result_label": "Click to jump to this point in the video"
     }
   }
 }