@playkit-js/transcript 3.0.1-canary.44-4c445bb → 3.0.1-canary.46-b1e939d

package/package.json

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

package/src/components/caption/caption.tsx

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

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} role="list">
+      <div className={styles.transcriptWrapper} onKeyUp={this._handleKeyUp}>
         {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[captionData.id]) {
+                if (captionProps.highlighted) {
                   this._currentCaptionRef = node;
                 }
               }}

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

@@ -3,20 +3,14 @@ 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 = withText(translates)((props: CloseButtonProps) => (
+export const CloseButton = (props: CloseButtonProps) => (
   <A11yWrapper onClick={props.onClick}>
-    <button className={styles.closeBtn} tabIndex={1} aria-label={props.closeLabel}>
+    <button className={styles.closeBtn} tabIndex={1}>
       <Icon
         id="transcript-plugin-close-button"
         height={icons.BigSize}
@@ -26,4 +20,4 @@ export const CloseButton = withText(translates)((props: CloseButtonProps) => (
       />
     </button>
   </A11yWrapper>
-));
+);

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

@@ -26,3 +26,19 @@
     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,11 +1,10 @@
-import {h, Component, VNode} from 'preact';
-import {A11yWrapper} from '@playkit-js/common';
-import {Popover, PopoverMenuItem} from '../popover';
+import {h, Component, ComponentChild, VNode} from 'preact';
+import {Popover, PopoverHorizontalPositions, PopoverVerticalPositions} from '../../utils';
+import {PopoverMenu, PopoverMenuItem} from '../popover-menu';
 import * as styles from './download-print-menu.scss';
 import {DownloadIcon, PrintIcon} from './download-print-icons';
 
-const {Tooltip} = KalturaPlayer.ui.components;
-const {withText, Text} = KalturaPlayer.ui.preacti18n;
+const {ENTER, Esc} = KalturaPlayer.ui.utils.KeyMap;
 
 export function downloadContent(content: string, name: string): void {
   const blob = new Blob([content], {type: 'text/plain;charset=utf-8;'});
@@ -30,6 +29,7 @@ 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 {
-  printDownloadAreaLabel?: string;
-  printTranscript?: string;
-  downloadTranscript?: string;
+  dropdownAriaLabel: string;
+  printButtonAriaLabel: string;
+  downloadButtonAriaLabel: string;
   onDownload: () => void;
   onPrint: () => void;
   downloadDisabled: boolean;
@@ -52,77 +52,113 @@ interface DownloadPrintMenuProps {
 }
 
 interface ButtonProperties {
-  ['aria-label']?: string;
+  ['aria-label']: string;
+  buttonStyles: string;
+  onClick?: () => void;
   tabIndex?: number;
+  iconStyles: string;
   icon: VNode;
 }
 
-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>
-});
+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>
+  );
 
-export class DownloadPrintMenuComponent extends Component<DownloadPrintMenuProps> {
-  private _getPopoverMenuOptions = (): Array<PopoverMenuItem> => {
+  private _getPopoverMenuOptions = () => {
     return [
       {
-        label: this.props.downloadTranscript,
-        onMenuChosen: this.props.onDownload
+        label: this.props.downloadButtonAriaLabel,
+        onMenuChosen: this._onDownloadClicked
       },
       {
-        label: this.props.printTranscript,
-        onMenuChosen: this.props.onPrint
+        label: this.props.printButtonAriaLabel,
+        onMenuChosen: this._onPrintClicked
       }
     ];
   };
 
-  private _renderIcon = ({tabIndex = 0, icon, ...props}: ButtonProperties): VNode => {
+  private _renderIcon = ({buttonStyles, tabIndex = 0, iconStyles, icon, ...props}: ButtonProperties): ComponentChild => {
     return (
-      <button className={styles.downloadPrintButton} tabIndex={tabIndex} {...props}>
-        <div className={styles.icon}>{icon}</div>
+      <button className={buttonStyles} tabIndex={tabIndex} {...props}>
+        <div className={iconStyles}>{icon}</div>
       </button>
     );
   };
 
+  private _popoverContent = () => {
+    return <PopoverMenu itemRenderer={this._popoverMenuItemRenderer} options={this._getPopoverMenuOptions()} />;
+  };
+
   render(props: DownloadPrintMenuProps) {
-    const {downloadDisabled, printDisabled, printDownloadAreaLabel, printTranscript, downloadTranscript} = props;
+    const {downloadDisabled, printDisabled} = props;
     if (!downloadDisabled && !printDisabled) {
       return (
-        <Popover label={printDownloadAreaLabel!} options={this._getPopoverMenuOptions()}>
+        <Popover
+          className="download-print-popover"
+          verticalPosition={PopoverVerticalPositions.Bottom}
+          horizontalPosition={PopoverHorizontalPositions.Left}
+          content={this._popoverContent()}>
           {this._renderIcon({
-            ['aria-label']: printDownloadAreaLabel,
+            ['aria-label']: props.dropdownAriaLabel,
+            buttonStyles: styles.downloadPrintButton,
+            iconStyles: styles.icon,
             icon: <DownloadIcon />
           })}
         </Popover>
       );
     }
     if (!downloadDisabled && printDisabled) {
-      return (
-        <Tooltip label={downloadTranscript} type="bottom">
-          <A11yWrapper onClick={this.props.onDownload}>
-            {this._renderIcon({
-              ['aria-label']: downloadTranscript,
-              icon: <DownloadIcon />
-            })}
-          </A11yWrapper>
-        </Tooltip>
-      );
+      return this._renderIcon({
+        ['aria-label']: props.downloadButtonAriaLabel,
+        buttonStyles: styles.downloadPrintButton,
+        iconStyles: styles.icon,
+        onClick: this._onDownloadClicked,
+        icon: <DownloadIcon />
+      });
     }
     if (downloadDisabled && !printDisabled) {
-      return (
-        <Tooltip label={printTranscript} type="bottom">
-          <A11yWrapper onClick={this.props.onPrint}>
-            {this._renderIcon({
-              ['aria-label']: printTranscript,
-              icon: <PrintIcon />
-            })}
-          </A11yWrapper>
-        </Tooltip>
-      );
+      return this._renderIcon({
+        ['aria-label']: props.printButtonAriaLabel,
+        buttonStyles: styles.downloadPrintButton,
+        iconStyles: styles.icon,
+        onClick: this._onPrintClicked,
+        icon: <PrintIcon />
+      });
     }
     return null;
   }
 }
-
-export const DownloadPrintMenu = withText(translates)(DownloadPrintMenuComponent);

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

@@ -2,15 +2,7 @@ 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;
@@ -18,7 +10,7 @@ interface PluginButtonProps {
   label?: string;
 }
 
-export const PluginButton = withText(translates)(({isActive, onClick, label}: PluginButtonProps) => {
+export const PluginButton = ({isActive, onClick, label}: PluginButtonProps) => {
   return (
     <Tooltip label={label} type="bottom">
       <A11yWrapper onClick={onClick}>
@@ -34,4 +26,4 @@ export const PluginButton = withText(translates)(({isActive, onClick, label}: Pl
       </A11yWrapper>
     </Tooltip>
   );
-});
+};

package/src/components/popover-menu/index.ts

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

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

@@ -0,0 +1,6 @@
+@import '../../variables.scss';
+
+.popover-menu {
+  padding-top: 6px;
+  padding-bottom: 6px;
+}

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

@@ -0,0 +1,52 @@
+import {h, Component, ComponentChild} from 'preact';
+import * as styles from './popover-menu.scss';
+
+export interface PopoverMenuItem {
+  label: string;
+  onMenuChosen: Function;
+  customRenderer?: (el: PopoverMenuItem) => ComponentChild;
+}
+
+interface PopoverMenuProps {
+  options: Array<PopoverMenuItem>;
+  itemRenderer?: (el: PopoverMenuItem) => ComponentChild;
+}
+
+/**
+ * Popover menu renders list of options.
+ *  options example:
+ *   [
+ *    {label: 'option_1', onMenuChosen: () => console.log('selected first')},
+ *    {label: 'option_2', onMenuChosen: () => console.log('selected second')}
+ *   ]
+ * In case when 'itemRenderer' properdy hasn't provided - PopoverMenu renders
+ * div with class "popover-menu-item" that contain label for the current option.
+ * Default render of options can be changed by providing 'itemRenderer' - it should be
+ * function that takes current option and returns valid 'preact' node.
+ * If some option need to be rendered with a different method - specific render
+ * method can be provided with 'customRenderer' property for the current option.
+ *  option example with specific render method:
+ *   { label: 'specific render', onMenuChosen: () => {}, customRenderer: el => (<span>{el.label}</span>)}
+ */
+
+export class PopoverMenu extends Component<PopoverMenuProps> {
+  render(props: any) {
+    return (
+      <div className={styles.popoverMenu}>
+        {props.options.map((el: PopoverMenuItem) => {
+          if (el.customRenderer) {
+            return el.customRenderer(el);
+          }
+          if (props.itemRenderer) {
+            return props.itemRenderer(el);
+          }
+          return (
+            <div className="popover-menu-item" onClick={() => el.onMenuChosen(el)}>
+              {el.label}
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+}