@playkit-js/transcript 3.6.0-canary.0-a940bfb → 3.6.0-canary.0-baa8e71

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@playkit-js/transcript",
-  "version": "3.6.0-canary.0-a940bfb",
+  "version": "3.6.0-canary.0-baa8e71",
   "main": "dist/playkit-transcript.js",
   "license": "AGPL-3.0",
   "private": false,
@@ -14,14 +14,14 @@
   },
   "devDependencies": {
     "@playkit-js/kaltura-player-js": "3.17.9",
-    "@playkit-js/playkit-js-ui": "0.78.0",
-    "@playkit-js/ui-managers": "1.5.4-canary.0-9261ea6",
+    "@playkit-js/playkit-js-ui": "0.79.13",
+    "@playkit-js/ui-managers": "1.6.2-canary.0-9634d47",
     "@types/sanitize-html": "^2.9.3",
     "conventional-github-releaser": "3.1.3",
     "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",
@@ -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",
@@ -77,15 +77,16 @@
     "html5 player"
   ],
   "dependencies": {
-    "@playkit-js/common": "1.5.13",
+    "@playkit-js/common": "1.5.23",
+    "@playkit-js/webpack-common": "^1.0.1-canary.0-dfd24a9",
     "sanitize-html": "^2.11.0",
     "stream-browserify": "^3.0.0"
   },
   "kaltura": {
     "name": "playkit-js-transcript",
     "dependencies": {
-      "playkit-kaltura-cuepoints": "3.0.13",
-      "playkit-ui-managers": "1.5.3"
+      "playkit-kaltura-cuepoints": "3.0.16",
+      "playkit-ui-managers": "1.7.0"
     }
   }
 }

package/src/components/attach-placeholder/attach-placeholder.tsx

@@ -22,10 +22,10 @@ export const AttachPlaceholder = ({onAttach, onClose}: AttachPlaceholderProps) =
       </div>
       <div className={styles.attachContent}>
         <div className={styles.attachText}>
-          <Text id="transcript.attachTranscriptText">Transcript popped out</Text>
+          <Text id="transcript.attach_transcript_text">Transcript popped out</Text>
         </div>
         <Button type={ButtonType.primary} size={ButtonSize.medium} className={styles.attachButton} onClick={onAttach} testId="transcriptAttachButton">
-          <Text id="transcript.attachTranscriptButton">Bring it back</Text>
+          <Text id="transcript.attach_transcript_button">Bring it back</Text>
         </Button>
       </div>
     </div>

package/src/components/caption/caption.scss

@@ -58,7 +58,7 @@
       }
     }
     .highlight-search {
-      color: $secondary-text-contrast-color;
+      color: $tone-8-color;
       background-color: $secondary-color;
       border-radius: 2px;
       &::selection {

package/src/components/caption/caption.tsx

@@ -4,18 +4,33 @@ import {secondsToTime} from '../../utils';
 import {CuePointData} from '../../types';
 import * as styles from './caption.scss';
 
+import {TranscriptEvents} from '../../events/events';
+
+//@ts-ignore
+const {getDurationAsText} = KalturaPlayer.ui.utils;
+const {withText, Text} = KalturaPlayer.ui.preacti18n;
+const {withEventManager} = KalturaPlayer.ui.Event;
+const {withPlayer} = KalturaPlayer.ui.components;
+
 export interface CaptionProps {
   showTime: boolean;
   searchLength: number;
   scrollTo(el: HTMLElement): void;
   scrollToSearchMatch(el: HTMLElement): void;
   videoDuration: number;
+  eventManager?: any;
+  player?: any;
+  captionLabel?: string;
+  moveToSearch?: string;
+  navigationInstruction?: string;
+  timeLabel?: string;
+  setTextToRead: (textToRead: string, delay?: number) => void;
 }
 
 interface ExtendedCaptionProps extends CaptionProps {
   caption: CuePointData;
   onClick: () => void;
-  highlighted: boolean;
+  isHighlighted: boolean;
   shouldScroll: boolean;
   shouldScrollToSearchMatch: boolean;
   indexMap: Record<string, number> | undefined;
@@ -24,26 +39,67 @@ interface ExtendedCaptionProps extends CaptionProps {
   isAutoScrollEnabled: boolean;
 }
 
+const translates = {
+  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>,
+  navigationInstruction: (
+    <Text id="transcript.navigation_instruction">
+      Press Home to navigate to the beginning of the transcript. Press End to jump to the end of the transcript.
+    </Text>
+  ),
+  timeLabel: <Text id="transcript.time_label">Timestamp</Text>
+};
+
+@withText(translates)
+@withEventManager
+@withPlayer
 export class Caption extends Component<ExtendedCaptionProps> {
-  private _hotspotRef: HTMLElement | null = null;
+  private _captionRef: HTMLElement | null = null;
 
-  componentDidUpdate() {
-    if (this._hotspotRef && this.props.shouldScroll) {
-      this.props.scrollTo(this._hotspotRef);
-    } else if (this._hotspotRef && this.props.shouldScrollToSearchMatch) {
-      this.props.scrollToSearchMatch(this._hotspotRef);
+  get indexArray() {
+    if (!this.props.indexMap) {
+      return [];
+    }
+    return Object.keys(this.props.indexMap).sort((a, b) => Number(a) - Number(b));
+  }
+
+  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();
+      }
+    });
+
+    eventManager?.listen(player, TranscriptEvents.TRANSCRIPT_SCROLLING, () => {
+      if (this._captionRef && this._hasSearchMatch()) {
+        this.props.scrollTo(this._captionRef);
+      }
+    });
+  }
+
   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) {
@@ -66,12 +122,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;
     }
@@ -99,15 +159,17 @@ export class Caption extends Component<ExtendedCaptionProps> {
   };
 
   render() {
-    const {caption, highlighted, showTime, longerThanHour} = 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> = {
       ariaCurrent: isHighlighted,
       tabIndex: 0,
-      ariaLabel: `${time}${showTime ? ' ' : ''}${caption.text}`,
+      ariaLabel: `${showTime ? `${timeLabel} ${getDurationAsText(Math.floor(startTime), player?.config.ui.locale, true)} ` : ''}${caption.text} ${
+        indexMap ? moveToSearch : captionLabel
+      }. ${navigationInstruction}`,
       role: 'button'
     };
 
@@ -116,7 +178,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';
@@ -19,7 +20,6 @@ export interface Props {
   onSeek: (n: CuePointData) => void;
   autoScroll?: boolean;
   onScroll: (n: number) => void;
-  widgetWidth: number;
   highlightedMap: HighlightedMap;
   showItemsIcons: boolean;
   listDataContainCaptions?: boolean;
@@ -84,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;
@@ -97,41 +97,45 @@ export class CaptionList extends Component<Props> {
 
   private _handleKeyUp = (event: KeyboardEvent) => {
     if (event.keyCode === END) {
-      this._lastCaptionRef?._hotspotRef?.focus();
+      this._lastCaptionRef?.base.focus();
     } else if (event.keyCode === HOME) {
-      this._firstCaptionRef?._hotspotRef?.focus();
+      this._firstCaptionRef?.base.focus();
     }
   };
 
   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 (
-            <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 key={captionData.id}>
+              {(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 (isSearchCaption || (!isSearchCaptionInList && captionProps.isHighlighted)) {
+                        this._currentCaptionRef = node;
+                      }
+                    }}
+                    {...captionProps}
+                  />
+                );
               }}
-              {...captionProps}
-            />
+            </ScreenReaderContext.Consumer>
           );
         })}
       </div>

package/src/components/plugin-button/plugin-button.tsx

@@ -24,6 +24,7 @@ export const PluginButton = ({isActive, label, id, icon, dataTestId, setRef}: Pl
               setRef(node);
             }
           }}
+          tabIndex={0}
           type="button"
           aria-label={label}
           className={[ui.style.upperBarIcon, styles.pluginButton, isActive ? styles.active : ''].join(' ')}

package/src/components/popover-menu/popover-menu-item.tsx

@@ -0,0 +1,108 @@
+import {A11yWrapper, OnClickEvent} from '@playkit-js/common/dist/hoc/a11y-wrapper';
+import {h} from 'preact';
+import {useState} from 'preact/hooks';
+import {Icon} from '@playkit-js/common/dist/icon';
+
+import * as styles from './popover-menu.scss';
+
+export interface PopoverMenuItemData {
+  testId: string;
+  label: string;
+  onClick?: () => void;
+  isDisabled?: boolean;
+  isSelected?: boolean;
+  items?: Array<PopoverMenuItemData>;
+}
+
+interface PopoverMenuItemProps {
+  item: PopoverMenuItemData;
+  index: number;
+  setRef?: (index: number, ref: HTMLDivElement | null) => void;
+  onKeyUp: (index: number) => void;
+  onKeyDown: (index: number) => void;
+  onClick?: () => void;
+}
+
+export const PopoverMenuItem = (props: PopoverMenuItemProps) => {
+  const {item, index, setRef, onKeyUp, onKeyDown, onClick} = props;
+  const {isDisabled, isSelected, items, testId, label} = item;
+  const [isChildOpen, setIsChildOpen] = useState(false);
+
+  const getAddonAfter = () => {
+    if (items) {
+      return <Icon name="chevronRight" />;
+    }
+    if (isSelected) {
+      return <Icon name="check" />;
+    }
+    return null;
+  };
+
+  const handleOnClick = (event: OnClickEvent) => {
+    if (isDisabled) {
+      return;
+    }
+    if (items) {
+      event.stopPropagation();
+      setIsChildOpen(!isChildOpen);
+      return;
+    }
+    onClick?.();
+  };
+
+  const renderChildItems = () => {
+    if (!items) {
+      return null;
+    }
+    return (
+      <div className={[styles.popoverComponent, styles.childItem].join(' ')} role="menu" aria-expanded={isChildOpen} id="popoverContent">
+        {isChildOpen
+          ? items.map((item, index) => (
+              <PopoverMenuItem
+                key={index}
+                item={item}
+                index={index}
+                onKeyDown={() => {}}
+                onKeyUp={() => {}}
+                onClick={() => {
+                  item.onClick?.();
+                  onClick?.();
+                  setIsChildOpen(false);
+                }}
+              />
+            ))
+          : null}
+      </div>
+    );
+  };
+
+  return (
+    <A11yWrapper
+      role="menuitem"
+      onClick={handleOnClick}
+      onDownKeyPressed={() => {
+        if (!isDisabled) {
+          onKeyDown(index);
+        }
+      }}
+      onUpKeyPressed={() => {
+        if (!isDisabled) {
+          onKeyUp(index);
+        }
+      }}>
+      <div
+        tabIndex={isDisabled ? -1 : 0}
+        role="menuitem"
+        aria-selected={isSelected}
+        className={`${styles.popoverMenuItem} ${isDisabled ? styles.popoverMenuItemDisabled : ''}`}
+        data-testid={testId}
+        ref={node => {
+          setRef?.(index, node);
+        }}>
+        {label}
+        {getAddonAfter()}
+        {renderChildItems()}
+      </div>
+    </A11yWrapper>
+  );
+};

package/src/components/popover-menu/popover-menu.scss

@@ -1,17 +1,19 @@
 @import './variables.scss';
 
+$child-item-width: 170px;
+
 .popover-anchor-container {
   cursor: pointer;
   border-radius: $roundness-1;
-  
+
   &:hover {
     background-color: $tone-4-color;
   }
-  
+
   &.active {
     background-color: $tone-6-color;
   }
-  
+
   .popover-anchor {
     pointer-events: none;
   }
@@ -19,7 +21,7 @@
 
 .popover-container {
   position: relative;
-  
+
   .popover-component {
     background-color: $tone-7-color;
     border-radius: $roundness-1;
@@ -29,11 +31,21 @@
     position: absolute;
     right: 0px;
     z-index: 1;
+    &.child-item {
+      margin-top: 0;
+      top: 0;
+      width: $child-item-width;
+      left: calc(-7px - #{$child-item-width});
+      max-height: calc(100% * 5.8); // height - almost 6 menu items like in player caption menu
+      overflow-y: auto;
+    }
   }
 }
 .popover-menu-item {
+  position: relative;
   align-items: center;
   display: flex;
+  justify-content: space-between;
   font-size: 15px;
   line-height: 18px;
   min-height: 30px;
@@ -44,13 +56,13 @@
   &.popover-menu-item-disabled {
     color: $tone-4-color;
   }
-  
+
   &:hover:not(.popover-menu-item-disabled) {
     background-color: $tone-6-color;
     border-radius: $roundness-1;
     cursor: pointer;
   }
-  
+
   &:focus {
     outline: 1px solid #222;
   }
@@ -60,4 +72,3 @@
   padding-top: 6px;
   padding-bottom: 6px;
 }
-