@playkit-js/transcript 3.4.1-canary.1-d2c93cc → 3.4.1-canary.5-8a9a5ea

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@playkit-js/transcript",
-  "version": "3.4.1-canary.1-d2c93cc",
+  "version": "3.4.1-canary.5-8a9a5ea",
   "main": "dist/playkit-transcript.js",
   "license": "AGPL-3.0",
   "private": false,

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

@@ -2,7 +2,6 @@
 
 .popover-anchor-container {
   cursor: pointer;
-  margin-left: 8px;
   border-radius: $roundness-1;
   
   &:hover {
@@ -54,8 +53,12 @@
   padding: 9px 24px 9px 16px;
   white-space: nowrap;
   margin: 4px;
+
+  &.popover-menu-item-disabled {
+    color: $tone-4-color;
+  }
   
-  &:hover {
+  &:hover :not(.popover-menu-item-disabled) {
     background-color: $tone-6-color;
     border-radius: $roundness-1;
     cursor: pointer;

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

@@ -1,8 +1,10 @@
 import {A11yWrapper} from '@playkit-js/common/dist/hoc/a11y-wrapper';
 import {h, Component, VNode} from 'preact';
 
+const {Tooltip} = KalturaPlayer.ui.components;
+
 const {withEventManager} = KalturaPlayer.ui.Event;
-const {ENTER, ESC, SPACE} = KalturaPlayer.ui.utils.KeyMap;
+const {TAB} = KalturaPlayer.ui.utils.KeyMap;
 
 import * as styles from './popover-menu.scss';
 
@@ -10,9 +12,11 @@ interface PopoverMenuItemData {
   testId: string;
   label: string;
   onClick: () => void;
+  isDisabled?: boolean;
 }
 
 interface PopoverMenuProps {
+  label: string;
   eventManager?: any;
   children?: VNode;
   items: Array<PopoverMenuItemData>;
@@ -26,6 +30,7 @@ interface PopoverMenuState {
 class PopoverMenu extends Component<PopoverMenuProps, PopoverMenuState> {
   private _controlElementRef: HTMLDivElement | null = null;
   private _popoverElementRef: HTMLDivElement | null = null;
+  private _itemsRefMap: Map<number, HTMLDivElement | null> = new Map();
 
   eventManager: any;
 
@@ -34,7 +39,11 @@ class PopoverMenu extends Component<PopoverMenuProps, PopoverMenuState> {
     this.state = {isOpen: false};
 
     this.props.eventManager?.listen(document, 'click', this.handleMouseEvent);
-    this.props.eventManager?.listen(document, 'keydown', this.handleKeyboardEvent);
+    this.props.eventManager?.listen(document, 'keydown', this.handleKeydownEvent);
+  }
+
+  componentWillUnmount() {
+    this._itemsRefMap = new Map();
   }
 
   private handleMouseEvent = (event: MouseEvent) => {
@@ -43,33 +52,57 @@ class PopoverMenu extends Component<PopoverMenuProps, PopoverMenuState> {
     }
   };
 
-  private handleKeyboardEvent = (event: KeyboardEvent) => {
-    if (this._controlElementRef?.contains(event.target as Node | null) && [ENTER, SPACE].includes(event.keyCode)) {
-      // use handler of control element
-      event.preventDefault();
-      return;
-    }
-    if (this._popoverElementRef?.contains(event.target as Node | null) && event.keyCode !== ESC) {
-      // use handler of popover element
-      return;
+  private handleKeydownEvent = (event: KeyboardEvent) => {
+    const eventTarget = event.target as Node | null;
+    if (
+      this.state.isOpen &&
+      event.keyCode === TAB &&
+      !this._controlElementRef?.contains(eventTarget) &&
+      !this._popoverElementRef?.contains(eventTarget)
+    ) {
+      this.closePopover();
     }
-    this.closePopover();
+  };
+
+  private _handleUpKeyPressed = (currentIndex: number) => () => {
+    this._getItemRef(currentIndex - 1)?.focus();
+  };
+
+  private _handleDownKeyPressed = (currentIndex: number) => () => {
+    this._getItemRef(currentIndex + 1)?.focus();
   };
 
   private closePopover() {
     this.setState({isOpen: false});
   }
 
-  private togglePopover = () => {
-    this.setState({isOpen: !this.state.isOpen});
+  private togglePopover = (focusFirstItem: boolean) => {
+    const isOpen = !this.state.isOpen;
+
+    this.setState({isOpen}, () => {
+      if (isOpen && focusFirstItem) {
+        const firstNonDisabledItem = this.props.items.findIndex((item: PopoverMenuItemData) => !item.isDisabled);
+        if (firstNonDisabledItem !== -1) {
+          this._getItemRef(firstNonDisabledItem)?.focus();
+        }
+      }
+    });
+  };
+
+  private _getItemRef = (index: number) => {
+    return this._itemsRefMap.get(index);
+  };
+
+  private _setItemRef = (index: number, ref: HTMLDivElement | null) => {
+    return this._itemsRefMap.set(index, ref);
   };
 
   render() {
-    const {children, items} = this.props;
+    const {label, children, items} = this.props;
 
-    return (
+    const popoverMenuContent = (
       <div className={styles.popoverContainer}>
-        <A11yWrapper onClick={this.togglePopover}>
+        <A11yWrapper onClick={() => this.togglePopover(true)}>
           <div
             data-testid="popover-anchor-container"
             className={`${styles.popoverAnchorContainer} ${this.state.isOpen ? styles.active : ''}`}
@@ -80,17 +113,42 @@ class PopoverMenu extends Component<PopoverMenuProps, PopoverMenuState> {
           </div>
         </A11yWrapper>
 
-        <div className={styles.popoverComponent} role="menu" aria-expanded={this.state.isOpen}>
+        <div
+          className={styles.popoverComponent}
+          role="menu"
+          aria-expanded={this.state.isOpen}
+          ref={node => {
+            this._popoverElementRef = node;
+          }}>
           {this.state.isOpen
-            ? items.map(({label, onClick, testId}) => {
+            ? items.map(({label, onClick, testId, isDisabled}, index) => {
                 return (
                   <A11yWrapper
                     onClick={() => {
-                      this.closePopover();
-                      onClick();
+                      if (!isDisabled) {
+                        this.closePopover();
+                        onClick();
+                      }
+                    }}
+                    onDownKeyPressed={() => {
+                      if (!isDisabled) {
+                        this._handleDownKeyPressed(index);
+                      }
+                    }}
+                    onUpKeyPressed={() => {
+                      if (!isDisabled) {
+                        this._handleUpKeyPressed(index);
+                      }
                     }}>
                     {
-                      <div tabIndex={0} role="menuitem" className={styles.popoverMenuItem} data-testid={testId}>
+                      <div
+                        tabIndex={isDisabled ? -1 : 0}
+                        role="menuitem"
+                        className={`${styles.popoverMenuItem} ${isDisabled ? styles.popoverMenuItemDisabled : ''}`}
+                        data-testid={testId}
+                        ref={node => {
+                          this._setItemRef(index, node);
+                        }}>
                         {label}
                       </div>
                     }
@@ -101,6 +159,14 @@ class PopoverMenu extends Component<PopoverMenuProps, PopoverMenuState> {
         </div>
       </div>
     );
+
+    return this.state.isOpen ? (
+      popoverMenuContent
+    ) : (
+      <div>
+        <Tooltip label={label}>{popoverMenuContent}</Tooltip>
+      </div>
+    );
   }
 }
 

package/src/components/transcript/transcript.scss

@@ -61,6 +61,8 @@
   padding-left: 16px;
   font-size: 16px;
   padding-right: 16px;
+  gap: 8px;
+  z-index: 2;
 }
 
 .body {

package/src/components/transcript/transcript.tsx

@@ -183,7 +183,7 @@ export class Transcript extends Component<TranscriptProps, TranscriptState> {
   };
 
   private _renderHeader = () => {
-    const {toggledWithEnter, kitchenSinkActive, downloadDisabled, onDownload, printDisabled, onPrint} = this.props;
+    const {toggledWithEnter, kitchenSinkActive, downloadDisabled, onDownload, printDisabled, onPrint, isLoading} = this.props;
     const {search, activeSearchIndex, totalSearchResults} = this.state;
     return (
       <div className={[styles.header, this._getHeaderStyles()].join(' ')} data-testid="transcript_header">
@@ -196,13 +196,14 @@ export class Transcript extends Component<TranscriptProps, TranscriptState> {
           toggledWithEnter={toggledWithEnter}
           kitchenSinkActive={kitchenSinkActive}
         />
-        <TranscriptMenu {...{downloadDisabled, onDownload, printDisabled, onPrint}} />
+        <TranscriptMenu {...{downloadDisabled, onDownload, printDisabled, onPrint, isLoading}} />
         <div data-testid="transcriptCloseButton">
           <Button
             type={ButtonType.borderless}
             size={ButtonSize.medium}
             disabled={false}
             onClick={this.props.onClose}
+            ariaLabel={'Hide Transcript'}
             tooltip={{label: 'Hide Transcript'}}
             icon={'close'}></Button>
         </div>

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

@@ -12,10 +12,10 @@ interface TranscriptMenuProps {
   onPrint: () => void;
   downloadDisabled?: boolean;
   printDisabled?: boolean;
+  isLoading?: boolean;
 }
 
 interface TranscriptMenuState {
-  isOpen: boolean;
   items: Array<PopoverMenuItemData>;
 }
 
@@ -23,13 +23,14 @@ class TranscriptMenu extends Component<TranscriptMenuProps, TranscriptMenuState>
   constructor(props: TranscriptMenuProps) {
     super();
 
-    const {downloadDisabled, onDownload, printDisabled, onPrint, printDownloadAreaLabel, printTranscript, downloadTranscript} = props;
+    const {downloadDisabled, onDownload, printDisabled, onPrint, printDownloadAreaLabel, printTranscript, downloadTranscript, isLoading} = props;
     const items = [];
     if (!downloadDisabled) {
       items.push({
         testId: 'download-menu-item',
         label: 'Download transcript',
-        onClick: onDownload
+        onClick: onDownload,
+        isDisabled: isLoading
       });
     }
 
@@ -37,16 +38,17 @@ class TranscriptMenu extends Component<TranscriptMenuProps, TranscriptMenuState>
       items.push({
         testId: 'print-menu-item',
         label: 'Print transcript',
-        onClick: onPrint
+        onClick: onPrint,
+        isDisabled: isLoading
       });
     }
 
-    this.state = {isOpen: false, items};
+    this.state = {items};
   }
 
   render() {
     return this.state.items.length ? (
-      <PopoverMenu items={this.state.items}>
+      <PopoverMenu label={'More'} items={this.state.items}>
         <Button type={ButtonType.borderless} icon={'more'}></Button>
       </PopoverMenu>
     ) : null;