@playkit-js/transcript 3.0.1 → 3.0.2-canary.1-f9e6d51

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@playkit-js/transcript",
-  "version": "3.0.1",
+  "version": "3.0.2-canary.1-f9e6d51",
   "main": "dist/playkit-transcript.js",
   "license": "AGPL-3.0",
   "private": false,
@@ -75,7 +75,7 @@
     "html5 player"
   ],
   "dependencies": {
-    "@playkit-js/common": "^1.0.2",
+    "@playkit-js/common": "^1.0.7",
     "stream-browserify": "^3.0.0"
   },
   "kaltura": {

package/src/components/caption/caption.tsx

@@ -1,10 +1,8 @@
-import * as styles from './caption.scss';
+import {Component, h} from 'preact';
+import {A11yWrapper, OnClickEvent} from '@playkit-js/common';
 import {secontsToTime} from '../../utils';
 import {CuePointData} from '../../types';
-
-const {ENTER, Space} = KalturaPlayer.ui.utils.KeyMap;
-
-import {Component, h} from 'preact';
+import * as styles from './caption.scss';
 
 export interface CaptionProps {
   showTime: boolean;
@@ -57,12 +55,10 @@ export class Caption extends Component<ExtendedCaptionProps> {
     return false;
   }
 
-  private _handleKeyPress = (event: KeyboardEvent) => {
-    const keyCode = event.which || event.keyCode;
-    if (keyCode === ENTER || keyCode === Space) {
+  private _handleKeyDown = (event: OnClickEvent, byKeyboard?: boolean) => {
+    if (byKeyboard) {
       event.preventDefault();
       this._gotoCurrentTime();
-      return;
     }
   };
 
@@ -117,23 +113,23 @@ export class Caption extends Component<ExtendedCaptionProps> {
     const isHighlighted = Object.keys(highlighted)[0] === id;
 
     return (
-      <div
-        className={styles.caption}
-        tabIndex={1}
-        ref={node => {
-          this._hotspotRef = node;
-        }}
-        onKeyDown={this._handleKeyPress}
-      >
-        {showTime && <div className={styles.captionTime}>{secontsToTime(startTime, longerThanHour)}</div>}
+      <A11yWrapper onClick={this._handleKeyDown}>
         <div
-          onClick={this._handleClick}
-          className={`${styles.captionContent} ${isHighlighted ? styles.highlighted : ''} ${showTime ? '' : styles.withoutTime}`}
-          role="button"
-        >
-          {this._renderText(caption.text)}
+          className={styles.caption}
+          tabIndex={1}
+          area-label={caption.text}
+          ref={node => {
+            this._hotspotRef = node;
+          }}
+          role="listitem">
+          {showTime && <div className={styles.captionTime}>{secontsToTime(startTime, longerThanHour)}</div>}
+          <div
+            onClick={this._handleClick}
+            className={`${styles.captionContent} ${isHighlighted ? styles.highlighted : ''} ${showTime ? '' : styles.withoutTime}`}>
+            {this._renderText(caption.text)}
+          </div>
         </div>
-      </div>
+      </A11yWrapper>
     );
   }
 }

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

@@ -4,7 +4,7 @@ import {Caption} from '../caption';
 import * as styles from './captionList.scss';
 import {HighlightedMap, CuePointData} from '../../types';
 
-const {End, Home} = KalturaPlayer.ui.utils.KeyMap;
+const {END, HOME} = KalturaPlayer.ui.utils.KeyMap;
 
 export interface CaptionProps {
   showTime: boolean;
@@ -95,9 +95,9 @@ export class CaptionList extends Component<Props> {
   };
 
   private _handleKeyUp = (event: KeyboardEvent) => {
-    if (event.keyCode === End) {
+    if (event.keyCode === END) {
       this._lastCaptionRef?._hotspotRef?.focus();
-    } else if (event.keyCode === Home) {
+    } else if (event.keyCode === HOME) {
       this._firstCaptionRef?._hotspotRef?.focus();
     }
   };
@@ -105,7 +105,7 @@ export class CaptionList extends Component<Props> {
   render() {
     const {data} = this.props;
     return (
-      <div className={styles.transcriptWrapper} onKeyUp={this._handleKeyUp}>
+      <div className={styles.transcriptWrapper} onKeyUp={this._handleKeyUp} role="list">
         {data.map((captionData, index) => {
           const captionProps = this._getCaptionProps(captionData);
           return (
@@ -116,7 +116,7 @@ export class CaptionList extends Component<Props> {
                 } else if (index === data.length - 1) {
                   this._lastCaptionRef = node;
                 }
-                if (captionProps.highlighted) {
+                if (captionProps.highlighted[captionData.id]) {
                   this._currentCaptionRef = node;
                 }
               }}

package/src/components/close-button/index.tsx

@@ -3,14 +3,20 @@ import * as styles from './close-button.scss';
 import {A11yWrapper} from '@playkit-js/common';
 import {icons} from '../icons';
 const {Icon} = KalturaPlayer.ui.components;
+const {withText, Text} = KalturaPlayer.ui.preacti18n;
+
+const translates = {
+  closeLabel: <Text id="transcript.hide_plugin">Hide Transcript</Text>
+};
 
 interface CloseButtonProps {
   onClick: () => void;
+  closeLabel?: string;
 }
 
-export const CloseButton = (props: CloseButtonProps) => (
+export const CloseButton = withText(translates)((props: CloseButtonProps) => (
   <A11yWrapper onClick={props.onClick}>
-    <button className={styles.closeBtn} tabIndex={1}>
+    <button className={styles.closeBtn} tabIndex={1} aria-label={props.closeLabel}>
       <Icon
         id="transcript-plugin-close-button"
         height={icons.BigSize}
@@ -20,4 +26,4 @@ export const CloseButton = (props: CloseButtonProps) => (
       />
     </button>
   </A11yWrapper>
-);
+));

package/src/components/download-print-menu/download-print-menu.scss

@@ -26,19 +26,3 @@
     background-size: cover;
   }
 }
-.popover-menu-item {
-  display: flex;
-  align-items: center;
-  padding: 9px 24px 9px 16px;
-  white-space: nowrap;
-  min-height: 30px;
-  line-height: 18px;
-  font-size: 15px;
-  &:hover {
-    cursor: pointer;
-    background-color: $semigray-color;
-  }
-  &:focus {
-    outline: 1px solid $focus-color;
-  }
-}

package/src/components/download-print-menu/download-print-menu.tsx

@@ -1,10 +1,11 @@
-import {h, Component, ComponentChild, VNode} from 'preact';
-import {Popover, PopoverHorizontalPositions, PopoverVerticalPositions} from '../../utils';
-import {PopoverMenu, PopoverMenuItem} from '../popover-menu';
+import {h, Component, VNode} from 'preact';
+import {A11yWrapper} from '@playkit-js/common';
+import {Popover, PopoverMenuItem} from '../popover';
 import * as styles from './download-print-menu.scss';
 import {DownloadIcon, PrintIcon} from './download-print-icons';
 
-const {ENTER, Esc} = KalturaPlayer.ui.utils.KeyMap;
+const {Tooltip} = KalturaPlayer.ui.components;
+const {withText, Text} = KalturaPlayer.ui.preacti18n;
 
 export function downloadContent(content: string, name: string): void {
   const blob = new Blob([content], {type: 'text/plain;charset=utf-8;'});
@@ -29,7 +30,6 @@ export function downloadContent(content: string, name: string): void {
   anchor.click();
   anchor.remove();
 }
-
 export function printContent(content: string): void {
   const printWindow = window.open('', '', 'width=400,height=600');
   if (printWindow) {
@@ -42,9 +42,9 @@ export function printContent(content: string): void {
 }
 
 interface DownloadPrintMenuProps {
-  dropdownAriaLabel: string;
-  printButtonAriaLabel: string;
-  downloadButtonAriaLabel: string;
+  printDownloadAreaLabel?: string;
+  printTranscript?: string;
+  downloadTranscript?: string;
   onDownload: () => void;
   onPrint: () => void;
   downloadDisabled: boolean;
@@ -52,113 +52,77 @@ interface DownloadPrintMenuProps {
 }
 
 interface ButtonProperties {
-  ['aria-label']: string;
-  buttonStyles: string;
-  onClick?: () => void;
+  ['aria-label']?: string;
   tabIndex?: number;
-  iconStyles: string;
   icon: VNode;
 }
 
-interface DownloadPrintMenuState {
-  popoverOpen: boolean;
-}
-
-export class DownloadPrintMenu extends Component<DownloadPrintMenuProps, DownloadPrintMenuState> {
-  state: DownloadPrintMenuState = {
-    popoverOpen: false
-  };
-
-  private _onDownloadClicked = () => {
-    this.props.onDownload();
-  };
-
-  private _onPrintClicked = () => {
-    this.props.onPrint();
-  };
-  private _onKeyDown = (e: KeyboardEvent, callBack: Function) => {
-    if (e.keyCode !== ENTER && e.keyCode !== Esc) {
-      // don't stopPropagation on ESC and Enter pressed as it prevent the popup closing
-      e.stopPropagation();
-    }
-    switch (e.keyCode) {
-      case 13: // Enter pressed
-        callBack();
-        break;
-    }
-  };
-  private _popoverMenuItemRenderer = (el: PopoverMenuItem) => (
-    <div
-      tabIndex={1}
-      role="button"
-      onClick={() => el.onMenuChosen()}
-      onKeyDown={(e: KeyboardEvent) => this._onKeyDown(e, el.onMenuChosen)}
-      className={styles.popoverMenuItem}>
-      {el.label}
-    </div>
-  );
+const translates = () => ({
+  printDownloadAreaLabel: <Text id="transcript.print_download_area_label">Download or print current transcript</Text>,
+  printTranscript: <Text id="transcript.print_transcript">Print current transcript</Text>,
+  downloadTranscript: <Text id="transcript.download_transcript">Download current transcript</Text>
+});
 
-  private _getPopoverMenuOptions = () => {
+export class DownloadPrintMenuComponent extends Component<DownloadPrintMenuProps> {
+  private _getPopoverMenuOptions = (): Array<PopoverMenuItem> => {
     return [
       {
-        label: this.props.downloadButtonAriaLabel,
-        onMenuChosen: this._onDownloadClicked
+        label: this.props.downloadTranscript,
+        onMenuChosen: this.props.onDownload
       },
       {
-        label: this.props.printButtonAriaLabel,
-        onMenuChosen: this._onPrintClicked
+        label: this.props.printTranscript,
+        onMenuChosen: this.props.onPrint
       }
     ];
   };
 
-  private _renderIcon = ({buttonStyles, tabIndex = 0, iconStyles, icon, ...props}: ButtonProperties): ComponentChild => {
+  private _renderIcon = ({tabIndex = 0, icon, ...props}: ButtonProperties): VNode => {
     return (
-      <button className={buttonStyles} tabIndex={tabIndex} {...props}>
-        <div className={iconStyles}>{icon}</div>
+      <button className={styles.downloadPrintButton} tabIndex={tabIndex} {...props}>
+        <div className={styles.icon}>{icon}</div>
       </button>
     );
   };
 
-  private _popoverContent = () => {
-    return <PopoverMenu itemRenderer={this._popoverMenuItemRenderer} options={this._getPopoverMenuOptions()} />;
-  };
-
   render(props: DownloadPrintMenuProps) {
-    const {downloadDisabled, printDisabled} = props;
+    const {downloadDisabled, printDisabled, printDownloadAreaLabel, printTranscript, downloadTranscript} = props;
     if (!downloadDisabled && !printDisabled) {
       return (
-        <Popover
-          className="download-print-popover"
-          verticalPosition={PopoverVerticalPositions.Bottom}
-          horizontalPosition={PopoverHorizontalPositions.Left}
-          content={this._popoverContent()}>
+        <Popover label={printDownloadAreaLabel!} options={this._getPopoverMenuOptions()}>
           {this._renderIcon({
-            ['aria-label']: props.dropdownAriaLabel,
-            buttonStyles: styles.downloadPrintButton,
-            iconStyles: styles.icon,
+            ['aria-label']: printDownloadAreaLabel,
             icon: <DownloadIcon />
           })}
         </Popover>
       );
     }
     if (!downloadDisabled && printDisabled) {
-      return this._renderIcon({
-        ['aria-label']: props.downloadButtonAriaLabel,
-        buttonStyles: styles.downloadPrintButton,
-        iconStyles: styles.icon,
-        onClick: this._onDownloadClicked,
-        icon: <DownloadIcon />
-      });
+      return (
+        <Tooltip label={downloadTranscript} type="bottom">
+          <A11yWrapper onClick={this.props.onDownload}>
+            {this._renderIcon({
+              ['aria-label']: downloadTranscript,
+              icon: <DownloadIcon />
+            })}
+          </A11yWrapper>
+        </Tooltip>
+      );
     }
     if (downloadDisabled && !printDisabled) {
-      return this._renderIcon({
-        ['aria-label']: props.printButtonAriaLabel,
-        buttonStyles: styles.downloadPrintButton,
-        iconStyles: styles.icon,
-        onClick: this._onPrintClicked,
-        icon: <PrintIcon />
-      });
+      return (
+        <Tooltip label={printTranscript} type="bottom">
+          <A11yWrapper onClick={this.props.onPrint}>
+            {this._renderIcon({
+              ['aria-label']: printTranscript,
+              icon: <PrintIcon />
+            })}
+          </A11yWrapper>
+        </Tooltip>
+      );
     }
     return null;
   }
 }
+
+export const DownloadPrintMenu = withText(translates)(DownloadPrintMenuComponent);

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

@@ -2,7 +2,15 @@ import {h} from 'preact';
 import * as styles from './plugin-button.scss';
 import {icons} from '../icons';
 import {A11yWrapper, OnClick} from '@playkit-js/common';
+
 const {Tooltip, Icon} = KalturaPlayer.ui.components;
+const {withText, Text} = KalturaPlayer.ui.preacti18n;
+
+const translates = ({isActive}: PluginButtonProps) => {
+  return {
+    label: isActive ? <Text id="transcript.hide_plugin">Hide Transcript</Text> : <Text id="transcript.show_plugin">Show Transcript</Text>
+  };
+};
 
 interface PluginButtonProps {
   isActive: boolean;
@@ -10,7 +18,7 @@ interface PluginButtonProps {
   label?: string;
 }
 
-export const PluginButton = ({isActive, onClick, label}: PluginButtonProps) => {
+export const PluginButton = withText(translates)(({isActive, onClick, label}: PluginButtonProps) => {
   return (
     <Tooltip label={label} type="bottom">
       <A11yWrapper onClick={onClick}>
@@ -26,4 +34,4 @@ export const PluginButton = ({isActive, onClick, label}: PluginButtonProps) => {
       </A11yWrapper>
     </Tooltip>
   );
-};
+});

package/src/components/popover/index.ts

@@ -0,0 +1 @@
+export * from "./popover";

package/src/components/popover/popover.scss

@@ -0,0 +1,43 @@
+@import '../../variables.scss';
+
+.popover-container {
+  position: relative;
+  .popover-component {
+    background-color: #222222;
+    border-radius: 4px;
+    position: absolute;
+    right: 0px;
+    font-size: 15px;
+    display: block;
+    &.hidden {
+      display: none;
+    }
+    &.bottom {
+      top: 100%;
+      margin-top: 6px;
+    }
+    &.left {
+      right: 0px;
+    }
+  }
+}
+.popover-menu {
+  padding-top: 6px;
+  padding-bottom: 6px;
+}
+.popover-menu-item {
+  display: flex;
+  align-items: center;
+  padding: 9px 24px 9px 16px;
+  white-space: nowrap;
+  min-height: 30px;
+  line-height: 18px;
+  font-size: 15px;
+  &:hover {
+    cursor: pointer;
+    background-color: $semigray-color;
+  }
+  &:focus {
+    outline: 1px solid $focus-color;
+  }
+}

package/src/components/popover/popover.tsx

@@ -0,0 +1,142 @@
+import {h, Component, VNode} from 'preact';
+import {A11yWrapper, OnClickEvent} from '@playkit-js/common';
+import * as styles from './popover.scss';
+
+const {Tooltip} = KalturaPlayer.ui.components;
+const {ENTER, ESC, SPACE, TAB} = KalturaPlayer.ui.utils.KeyMap;
+
+export interface PopoverMenuItem {
+  label?: string;
+  onMenuChosen: () => void;
+}
+
+interface PopoverProps {
+  label: string;
+  options: Array<PopoverMenuItem>;
+  children: VNode;
+}
+
+interface PopoverState {
+  open: boolean;
+}
+
+export class Popover extends Component<PopoverProps, PopoverState> {
+  private _controlElementRef: HTMLDivElement | null = null;
+  private _popoverElementRef: HTMLDivElement | null = null;
+  private _firstOptionElementRef: HTMLDivElement | null = null;
+
+  state = {
+    open: false
+  };
+
+  componentWillUnmount() {
+    this._removeListeners();
+  }
+
+  private _handleMouseEvent = (event: MouseEvent) => {
+    if (!this._controlElementRef?.contains(event.target as Node | null)) {
+      this._closePopover();
+    }
+  };
+
+  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;
+    }
+    this._closePopover();
+  };
+
+  private _openPopover = (byKeyboard?: boolean) => {
+    this.setState({open: true});
+    setTimeout(() => {
+      // add listeners after component got re-render
+      this._addListeners();
+      if (byKeyboard && this._firstOptionElementRef) {
+        this._firstOptionElementRef.focus();
+      }
+    });
+  };
+
+  private _closePopover = () => {
+    this._removeListeners();
+    this.setState({open: false});
+  };
+
+  private _togglePopover = (e: MouseEvent | KeyboardEvent, byKeyboard?: boolean) => {
+    if (this.state.open) {
+      this._closePopover();
+    } else {
+      this._openPopover(byKeyboard);
+    }
+  };
+  private _addListeners = () => {
+    document.addEventListener('click', this._handleMouseEvent);
+    document.addEventListener('keydown', this._handleKeyboardEvent);
+  };
+  private _removeListeners = () => {
+    document.removeEventListener('click', this._handleMouseEvent);
+    document.removeEventListener('keydown', this._handleKeyboardEvent);
+  };
+
+  private _handleClickOnOptoin = (cb: () => void) => (event: OnClickEvent, byKeyboard?: boolean) => {
+    this._closePopover();
+    cb();
+    if (byKeyboard) {
+      setTimeout(() => {});
+    }
+  };
+  render(props: PopoverProps) {
+    const {open} = this.state;
+    const content = <A11yWrapper onClick={this._togglePopover}>{props.children}</A11yWrapper>;
+    return (
+      <div className={styles.popoverContainer}>
+        <div
+          className="popover-anchor-container"
+          ref={node => {
+            this._controlElementRef = node;
+          }}>
+          {open ? (
+            content
+          ) : (
+            <Tooltip label={props.label} type="bottom">
+              {content}
+            </Tooltip>
+          )}
+        </div>
+        <div
+          aria-expanded={open}
+          ref={node => {
+            this._popoverElementRef = node;
+          }}
+          className={['popover', styles.popoverComponent, styles.bottom, styles.left, open ? '' : styles.hidden].join(' ')}>
+          <div className={styles.popoverMenu} role="menu">
+            {props.options.map((el, index) => {
+              return (
+                <A11yWrapper onClick={this._handleClickOnOptoin(el.onMenuChosen)}>
+                  <div
+                    tabIndex={0}
+                    role="menuitem"
+                    aria-label={el.label}
+                    className={styles.popoverMenuItem}
+                    ref={node => {
+                      if (index === 0) {
+                        this._firstOptionElementRef = node;
+                      }
+                    }}>
+                    {el.label}
+                  </div>
+                </A11yWrapper>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    );
+  }
+}