@playkit-js/transcript 3.5.36 → 3.5.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@playkit-js/transcript",
-  "version": "3.5.36",
+  "version": "3.5.37",
   "main": "dist/playkit-transcript.js",
   "license": "AGPL-3.0",
   "private": false,
@@ -42,7 +42,7 @@
     "clean": "rimraf ./dist",
     "prebuild": "npm run clean",
     "build": "webpack --mode production",
-    "dev": "webpack-dev-server --mode development",
+    "dev": "webpack serve --open --mode development",
     "watch": "webpack --progress --color --watch --mode development",
     "cy:open": "cypress open",
     "cy:run": "yarn run cy:run:chrome && yarn run cy:run:firefox && yarn run cy:run:edge && yarn run cy:run:safari",

package/src/components/caption/caption.tsx

@@ -30,7 +30,7 @@ export interface CaptionProps {
 interface ExtendedCaptionProps extends CaptionProps {
   caption: CuePointData;
   onClick: () => void;
-  highlighted: boolean;
+  isHighlighted: boolean;
   shouldScroll: boolean;
   shouldScrollToSearchMatch: boolean;
   indexMap: Record<string, number> | undefined;
@@ -83,14 +83,14 @@ export class Caption extends Component<ExtendedCaptionProps> {
   }
 
   shouldComponentUpdate(nextProps: ExtendedCaptionProps) {
-    const {indexMap, highlighted, isAutoScrollEnabled, activeSearchIndex, longerThanHour} = this.props;
+    const {indexMap, isHighlighted, isAutoScrollEnabled, activeSearchIndex, longerThanHour} = this.props;
     if (longerThanHour !== nextProps.longerThanHour) {
       return true;
     }
-    if (highlighted !== nextProps.highlighted) {
+    if (isHighlighted !== nextProps.isHighlighted) {
       return true;
     }
-    if (highlighted && isAutoScrollEnabled !== nextProps.isAutoScrollEnabled) {
+    if (isHighlighted && isAutoScrollEnabled !== nextProps.isAutoScrollEnabled) {
       return true;
     }
     if (indexMap !== nextProps.indexMap) {
@@ -150,9 +150,8 @@ export class Caption extends Component<ExtendedCaptionProps> {
   };
 
   render() {
-    const {caption, highlighted, showTime, longerThanHour, indexMap, captionLabel, moveToSearch, navigationInstruction, timeLabel, player} = this.props;
-    const {startTime, id} = caption;
-    const isHighlighted = Object.keys(highlighted).some(c => c === id);
+    const {caption, isHighlighted, showTime, longerThanHour, indexMap, captionLabel, moveToSearch, navigationInstruction, timeLabel, player} = this.props;
+    const {startTime} = caption;
     const time = showTime ? secondsToTime(startTime, longerThanHour) : '';
 
     const captionA11yProps: Record<string, any> = {

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

@@ -20,7 +20,6 @@ export interface Props {
   onSeek: (n: CuePointData) => void;
   autoScroll?: boolean;
   onScroll: (n: number) => void;
-  widgetWidth: number;
   highlightedMap: HighlightedMap;
   showItemsIcons: boolean;
   listDataContainCaptions?: boolean;
@@ -85,12 +84,12 @@ export class CaptionList extends Component<Props> {
       key: id,
       onClick: this._handleClick(captionData),
       caption: captionData,
-      highlighted: highlightedMap,
+      isHighlighted: Boolean(highlightedMap[id]),
       longerThanHour: captionProps.videoDuration >= HOUR,
       shouldScroll: this._getShouldScroll(id),
       shouldScrollToSearchMatch: this._getShouldScrollToSearchMatch(id),
       isAutoScrollEnabled,
-      searchCaption: this.props.searchMap[captionData.id],
+      searchCaption: this.props.searchMap[id],
       ...this._getSearchProps(id)
     };
     return newCaptionProps;
@@ -105,14 +104,19 @@ export class CaptionList extends Component<Props> {
   };
 
   render() {
-    const {data} = this.props;
-    let isSearchCaption = false;
+    const {data, highlightedMap} = this.props;
+    let isSearchCaptionInList = false;
     return (
       <div className={styles.transcriptWrapper} onKeyUp={this._handleKeyUp}>
         {data.map((captionData, index) => {
           const captionProps = this._getCaptionProps(captionData);
+          let isSearchCaption = false;
+          if (captionProps.searchCaption && Object.keys(captionProps.searchCaption).some(key => parseInt(key) === this.props.activeSearchIndex)) {
+            isSearchCaptionInList = true;
+            isSearchCaption = true;
+          }
           return (
-            <ScreenReaderContext.Consumer>
+            <ScreenReaderContext.Consumer key={captionData.id}>
               {(setTextToRead: (textToRead: string, delay?: number | undefined) => void) => {
                 return (
                   <Caption
@@ -123,15 +127,7 @@ export class CaptionList extends Component<Props> {
                       } 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]) {
+                      if (isSearchCaption || (!isSearchCaptionInList && captionProps.isHighlighted)) {
                         this._currentCaptionRef = node;
                       }
                     }}

package/src/components/transcript/transcript.tsx

@@ -1,6 +1,6 @@
 import {h, Component} from 'preact';
 import {ui, core} from '@playkit-js/kaltura-player-js';
-import {debounce} from '../../utils';
+import {debounce} from '@playkit-js/common/dist/utils-common';
 import * as styles from './transcript.scss';
 import {Spinner} from '../spinner';
 import {Search} from '../search';
@@ -23,6 +23,7 @@ const {PLAYER_BREAK_POINTS} = ui.Components;
 const {connect} = ui.redux;
 
 const SEARCH_EVENT_DISPATCH_TIMEOUT = 2000;
+const WIDGET_RESIZE_DEBOUNCE_TIMEOUT = 250;
 
 const translates = {
   skipTranscript: <Text id="transcript.skip_transcript">Skip transcript</Text>,
@@ -131,12 +132,12 @@ export class Transcript extends Component<TranscriptProps, TranscriptState> {
     if (window.ResizeObserver) {
       // observe transcript root element size changes
       this._resizeObserver = new ResizeObserver(() => {
-        this._setWidgetSize();
+        this._debounced.setWidgetSize();
       });
       this._resizeObserver.observe(this._widgetRootRef!);
     } else {
       // use player size to define transcript root element size
-      this._setWidgetSize();
+      this._debounced.setWidgetSize();
     }
   }
 
@@ -155,7 +156,7 @@ export class Transcript extends Component<TranscriptProps, TranscriptState> {
 
     if (!this._resizeObserver && previousProps.playerWidth !== playerWidth) {
       // re-calculate wiget size if player size changed
-      this._setWidgetSize();
+      this._debounced.setWidgetSize();
     }
   }
 
@@ -438,7 +439,6 @@ export class Transcript extends Component<TranscriptProps, TranscriptState> {
         activeSearchIndex={activeSearchIndex}
         captionProps={captionProps}
         onScroll={this._onScroll}
-        widgetWidth={this.state.widgetWidth}
         showItemsIcons={true}
         searchActive={false}
       />
@@ -505,7 +505,8 @@ export class Transcript extends Component<TranscriptProps, TranscriptState> {
   private _debounced = {
     findSearchMatches: debounce(this._findSearchMatches, this.props.searchDebounceTimeout),
     onActiveSearchIndexChange: debounce(this._setActiveSearchIndex, this.props.searchNextPrevDebounceTimeout),
-    searchEventDispatcher: debounce(this._dispatchSearchEvent, SEARCH_EVENT_DISPATCH_TIMEOUT)
+    searchEventDispatcher: debounce(this._dispatchSearchEvent, SEARCH_EVENT_DISPATCH_TIMEOUT),
+    setWidgetSize: debounce(this._setWidgetSize, WIDGET_RESIZE_DEBOUNCE_TIMEOUT)
   };
 
   render(props: TranscriptProps) {

package/src/utils/index.ts

@@ -1,3 +1,2 @@
 export * from './utils';
 export * from './object-utils';
-export * from './debounce';

package/src/utils/debounce.ts

@@ -1,36 +0,0 @@
-type Procedure = (...args: any[]) => void;
-
-type Options = {
-  isImmediate: boolean;
-};
-
-export function debounce<F extends Procedure>(
-  func: F,
-  waitMilliseconds = 50,
-  options: Options = {
-    isImmediate: false
-  }
-): F {
-  let timeoutId: any;
-
-  return function (this: any, ...args: any[]) {
-    const doLater = () => {
-      timeoutId = undefined;
-      if (!options.isImmediate) {
-        func.apply(this, args);
-      }
-    };
-
-    const shouldCallNow = options.isImmediate && timeoutId === undefined;
-
-    if (timeoutId !== undefined) {
-      clearTimeout(timeoutId);
-    }
-
-    timeoutId = setTimeout(doLater, waitMilliseconds);
-
-    if (shouldCallNow) {
-      func.apply(this, args);
-    }
-  } as any;
-}