@playkit-js/transcript 3.7.3 → 3.7.4-canary.0-b1de1de

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@playkit-js/transcript",
-  "version": "3.7.3",
+  "version": "3.7.4-canary.0-b1de1de",
   "main": "dist/playkit-transcript.js",
   "license": "AGPL-3.0",
   "private": false,
@@ -13,7 +13,7 @@
     "url": "git+https://github.com/kaltura/playkit-js-transcript.git"
   },
   "devDependencies": {
-    "@playkit-js/kaltura-player-js": "3.17.9",
+    "@playkit-js/kaltura-player-js": "3.17.56",
     "@playkit-js/playkit-js-ui": "0.79.13",
     "@playkit-js/ui-managers": "1.6.2-canary.0-9634d47",
     "@types/sanitize-html": "^2.9.3",
@@ -21,7 +21,7 @@
     "copyfiles": "^2.4.1",
     "cross-env": "^7.0.3",
     "css-loader": "^6.7.1",
-    "cypress": "13.13.1",
+    "cypress": "14.1.0",
     "playwright-webkit": "^1.33.0",
     "prettier": "^2.6.2",
     "rimraf": "^5.0.5",

package/src/components/caption/caption.tsx

@@ -37,6 +37,8 @@ interface ExtendedCaptionProps extends CaptionProps {
   activeSearchIndex: number;
   longerThanHour: boolean;
   isAutoScrollEnabled: boolean;
+  onUpKeyPressed?: (e: KeyboardEvent) => void;
+  onDownKeyPressed?: (e: KeyboardEvent) => void;
 }
 
 const translates = {
@@ -174,7 +176,11 @@ export class Caption extends Component<ExtendedCaptionProps> {
     };
 
     return (
-      <A11yWrapper onClick={this._handleClick}>
+      <A11yWrapper
+        onClick={this._handleClick}
+        onUpKeyPressed={(e: KeyboardEvent) => this.props.onUpKeyPressed?.(e)}
+        onDownKeyPressed={(e: KeyboardEvent) => this.props.onDownKeyPressed?.(e)}
+      >
         <div
           className={styles.caption}
           ref={node => {

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

@@ -33,6 +33,40 @@ export class CaptionList extends Component<Props> {
   private _currentCaptionRef: any = null;
   private _firstCaptionRef: any = null;
   private _lastCaptionRef: any = null;
+  private _captionRefs: Map<number, HTMLElement | null> = new Map();
+
+  private _setCaptionRef = (index: number, ref: HTMLElement | null) => {
+    this._captionRefs.set(index, ref);
+  };
+
+  private _getCaptionRef = (index: number) => {
+    return this._captionRefs.get(index);
+  };
+
+  private _focusPrevCaption = (currentIndex: number) => {
+    const { data } = this.props;
+    if (!data.length) return;
+
+    let prevIndex = currentIndex - 1;
+    if (prevIndex < 0) {
+      prevIndex = data.length - 1;
+    }
+
+    this._getCaptionRef(prevIndex)?.focus();
+  };
+
+  private _focusNextCaption = (currentIndex: number) => {
+    const { data } = this.props;
+    if (!data.length) return;
+
+    let nextIndex = currentIndex + 1;
+    if (nextIndex >= data.length) {
+      nextIndex = 0;
+    }
+
+    this._getCaptionRef(nextIndex)?.focus();
+  };
+
   shouldComponentUpdate(nextProps: Readonly<Props>) {
     const {highlightedMap, data, searchMap, activeSearchIndex, isAutoScrollEnabled, captionProps} = this.props;
     if (
@@ -122,6 +156,7 @@ export class CaptionList extends Component<Props> {
                   <Caption
                     setTextToRead={setTextToRead}
                     ref={node => {
+                      this._setCaptionRef(index, node?.base ?? null);
                       if (index === 0) {
                         this._firstCaptionRef = node;
                       } else if (index === data.length - 1) {
@@ -131,6 +166,8 @@ export class CaptionList extends Component<Props> {
                         this._currentCaptionRef = node;
                       }
                     }}
+                    onUpKeyPressed={() => this._focusPrevCaption(index)}
+                    onDownKeyPressed={() => this._focusNextCaption(index)}
                     {...captionProps}
                   />
                 );

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

@@ -1,6 +1,6 @@
 import {A11yWrapper, OnClickEvent} from '@playkit-js/common/dist/hoc/a11y-wrapper';
 import {h} from 'preact';
-import {useState} from 'preact/hooks';
+import {useState, useRef} from 'preact/hooks';
 import {Icon} from '@playkit-js/common/dist/icon';
 
 import * as styles from './popover-menu.scss';
@@ -21,12 +21,16 @@ interface PopoverMenuItemProps {
   onKeyUp: (index: number) => void;
   onKeyDown: (index: number) => void;
   onClick?: () => void;
+  onLeftKeyPressed?: () => void;
+  onRightKeyPressed?: () => 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 parentRef = useRef<HTMLDivElement | null>(null);
+  const childRefs = useRef<Map<number, HTMLDivElement | null>>(new Map());
 
   const getAddonAfter = () => {
     if (items) {
@@ -50,6 +54,41 @@ export const PopoverMenuItem = (props: PopoverMenuItemProps) => {
     onClick?.();
   };
 
+  const focusChild = (i: number) => {
+    const node = childRefs.current.get(i);
+    node?.focus();
+  };
+
+  const handleChildUp = (currentIndex: number) => {
+    if (!items?.length) return;
+
+    let prevIndex = currentIndex - 1;
+    if (prevIndex < 0) {
+      prevIndex = items.length - 1;
+    }
+
+    while (items[prevIndex].isDisabled) {
+      prevIndex = prevIndex - 1 < 0 ? items.length - 1 : prevIndex - 1;
+    }
+
+    focusChild(prevIndex);
+  };
+
+  const handleChildDown = (currentIndex: number) => {
+    if (!items?.length) return;
+
+    let nextIndex = currentIndex + 1;
+    if (nextIndex >= items.length) {
+      nextIndex = 0;
+    }
+
+    while (items[nextIndex].isDisabled) {
+      nextIndex = nextIndex + 1 >= items.length ? 0 : nextIndex + 1;
+    }
+
+    focusChild(nextIndex);
+  };
+
   const renderChildItems = () => {
     if (!items) {
       return null;
@@ -62,13 +101,22 @@ export const PopoverMenuItem = (props: PopoverMenuItemProps) => {
                 key={index}
                 item={item}
                 index={index}
-                onKeyDown={() => {}}
-                onKeyUp={() => {}}
+                onKeyDown={() => handleChildDown(index)}
+                onKeyUp={() => handleChildUp(index)}
+                setRef={(i, node) => childRefs.current.set(i, node)}
                 onClick={() => {
                   item.onClick?.();
                   onClick?.();
                   setIsChildOpen(false);
                 }}
+                onLeftKeyPressed={() => {
+                  setIsChildOpen(false);
+                  parentRef.current?.focus();
+                }}
+                onRightKeyPressed={() => {
+                  setIsChildOpen(false);
+                  parentRef.current?.focus();
+  }}
               />
             ))
           : null}
@@ -89,7 +137,25 @@ export const PopoverMenuItem = (props: PopoverMenuItemProps) => {
         if (!isDisabled) {
           onKeyUp(index);
         }
-      }}>
+      }}
+      onRightKeyPressed={() => {
+        if (items && !isDisabled) {
+          if (!isChildOpen) {
+            setIsChildOpen(true);
+          }
+          childRefs.current.get(0)?.focus();
+        } else {
+            props.onRightKeyPressed?.();
+        }
+      }}
+      onLeftKeyPressed={() => {
+        if (isChildOpen) {
+          childRefs.current.get(0)?.focus();
+        } else {
+          props.onRightKeyPressed?.();
+        }
+      }}
+    >
       <div
         tabIndex={isDisabled ? -1 : 0}
         role="menuitem"
@@ -97,8 +163,10 @@ export const PopoverMenuItem = (props: PopoverMenuItemProps) => {
         className={`${styles.popoverMenuItem} ${isDisabled ? styles.popoverMenuItemDisabled : ''}`}
         data-testid={testId}
         ref={node => {
+          parentRef.current = node;
           setRef?.(index, node);
-        }}>
+        }}
+      >
         {label}
         {getAddonAfter()}
         {renderChildItems()}

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

@@ -70,11 +70,27 @@ class PopoverMenu extends Component<PopoverMenuProps, PopoverMenuState> {
   };
 
   private _handleUpKeyPressed = (currentIndex: number) => () => {
-    this._getItemRef(currentIndex - 1)?.focus();
+    const { items } = this.props;
+    if (!items.length) return;
+
+    let prevIndex = currentIndex - 1;
+    if (prevIndex < 0) {
+      prevIndex = items.length - 1;
+    }
+
+    this._getItemRef(prevIndex)?.focus();
   };
 
   private _handleDownKeyPressed = (currentIndex: number) => () => {
-    this._getItemRef(currentIndex + 1)?.focus();
+    const { items } = this.props;
+    if (!items.length) return;
+
+    let nextIndex = currentIndex + 1;
+    if (nextIndex >= items.length) {
+      nextIndex = 0;
+    }
+
+    this._getItemRef(nextIndex)?.focus();
   };
 
   private _closePopover() {
@@ -86,15 +102,10 @@ class PopoverMenu extends Component<PopoverMenuProps, PopoverMenuState> {
 
     this.setState({isOpen}, () => {
       if (isOpen) {
-        this._controlElementRef?.focus();
-        this.props.eventManager?.listen(this._controlElementRef, 'keydown', (event: KeyboardEvent) => {
-          if (event.keyCode === TAB) {
-            const firstNonDisabledItem = this.props.items.findIndex((item: PopoverMenuItemData) => !item.isDisabled);
-            if (firstNonDisabledItem !== -1) {
-              this._getItemRef(firstNonDisabledItem - 1)?.focus();
-            }
-          }
-        });
+        const firstNonDisabledItem = this.props.items.findIndex((item: PopoverMenuItemData) => !item.isDisabled);
+        if (firstNonDisabledItem !== -1) {
+          this._getItemRef(firstNonDisabledItem)?.focus();
+        }
       }
     });
   };
@@ -154,8 +165,12 @@ class PopoverMenu extends Component<PopoverMenuProps, PopoverMenuState> {
                   key={index}
                   item={item}
                   index={index}
-                  onKeyDown={this._handleDownKeyPressed}
-                  onKeyUp={this._handleUpKeyPressed}
+                  onKeyDown={(currentIndex: number) => {
+                    this._handleDownKeyPressed(currentIndex)();
+                  }}
+                  onKeyUp={(currentIndex: number) => {
+                    this._handleUpKeyPressed(currentIndex)();
+                  }}
                   setRef={this._setItemRef}
                   onClick={() => {
                     this._closePopover();

package/src/transcript-plugin.tsx

@@ -354,7 +354,6 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
         ) as any;
       },
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-expect-error - Property 'MiniAudioUI' does not exist
       presets: [ReservedPresetNames.Playback, ReservedPresetNames.Live, ReservedPresetNames.Ads, ReservedPresetNames.MiniAudioUI],
       position: position,
       expandMode: expandMode === SidePanelModes.ALONGSIDE ? SidePanelModes.ALONGSIDE : SidePanelModes.OVER
@@ -365,7 +364,6 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
       transcript: <Text id="transcript.transcript">Transcript</Text>
     };
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-expect-error - Property 'MiniAudioUI' does not exist
     if (this._state.shell['activePresetName'] !== ReservedPresetNames.MiniAudioUI) {
       this._transcriptIcon = this.upperBarManager!.add({
         displayName: 'Transcript',