@playkit-js/transcript 3.0.1 → 3.1.0-canary.0-0df319e

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

@@ -1,164 +0,0 @@
-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 {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;'});
-  const anchor = document.createElement('a');
-  const {navigator} = window as any;
-
-  if (navigator.msSaveBlob) {
-    // IE
-    navigator.msSaveOrOpenBlob(blob, name);
-    return;
-  }
-  if (navigator.userAgent.search('Firefox') !== -1) {
-    // Firefox
-    anchor.style.display = 'none';
-    anchor.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(content));
-  } else {
-    // Chrome
-    anchor.setAttribute('href', URL.createObjectURL(blob));
-  }
-  anchor.setAttribute('target', '_blank');
-  anchor.setAttribute('download', name);
-  anchor.click();
-  anchor.remove();
-}
-
-export function printContent(content: string): void {
-  const printWindow = window.open('', '', 'width=400,height=600');
-  if (printWindow) {
-    printWindow.document.write(content);
-    printWindow.document.close();
-    printWindow.focus();
-    printWindow.print();
-    printWindow.close();
-  }
-}
-
-interface DownloadPrintMenuProps {
-  dropdownAriaLabel: string;
-  printButtonAriaLabel: string;
-  downloadButtonAriaLabel: string;
-  onDownload: () => void;
-  onPrint: () => void;
-  downloadDisabled: boolean;
-  printDisabled: boolean;
-}
-
-interface ButtonProperties {
-  ['aria-label']: string;
-  buttonStyles: string;
-  onClick?: () => void;
-  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>
-  );
-
-  private _getPopoverMenuOptions = () => {
-    return [
-      {
-        label: this.props.downloadButtonAriaLabel,
-        onMenuChosen: this._onDownloadClicked
-      },
-      {
-        label: this.props.printButtonAriaLabel,
-        onMenuChosen: this._onPrintClicked
-      }
-    ];
-  };
-
-  private _renderIcon = ({buttonStyles, tabIndex = 0, iconStyles, icon, ...props}: ButtonProperties): ComponentChild => {
-    return (
-      <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} = props;
-    if (!downloadDisabled && !printDisabled) {
-      return (
-        <Popover
-          className="download-print-popover"
-          verticalPosition={PopoverVerticalPositions.Bottom}
-          horizontalPosition={PopoverHorizontalPositions.Left}
-          content={this._popoverContent()}>
-          {this._renderIcon({
-            ['aria-label']: props.dropdownAriaLabel,
-            buttonStyles: styles.downloadPrintButton,
-            iconStyles: styles.icon,
-            icon: <DownloadIcon />
-          })}
-        </Popover>
-      );
-    }
-    if (!downloadDisabled && printDisabled) {
-      return this._renderIcon({
-        ['aria-label']: props.downloadButtonAriaLabel,
-        buttonStyles: styles.downloadPrintButton,
-        iconStyles: styles.icon,
-        onClick: this._onDownloadClicked,
-        icon: <DownloadIcon />
-      });
-    }
-    if (downloadDisabled && !printDisabled) {
-      return this._renderIcon({
-        ['aria-label']: props.printButtonAriaLabel,
-        buttonStyles: styles.downloadPrintButton,
-        iconStyles: styles.icon,
-        onClick: this._onPrintClicked,
-        icon: <PrintIcon />
-      });
-    }
-    return null;
-  }
-}

package/src/components/download-print-menu/index.ts

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

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

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

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

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

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

@@ -1,52 +0,0 @@
-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>
-    );
-  }
-}

package/src/utils/popover/popover.scss

@@ -1,30 +0,0 @@
-.popover-container {
-  position: relative;
-  .popover-component {
-    background-color: #222222;
-    border-radius: 4px;
-    position: absolute;
-    right: 0px;
-    font-size: 15px;
-    display: block;
-    &.visible {
-      visibility: visible;
-      opacity: 1;
-      z-index: 10;
-    }
-    &.top {
-      bottom: 100%;
-      margin-bottom: 6px;
-    }
-    &.bottom {
-      top: 100%;
-      margin-top: 6px;
-    }
-    &.right {
-      left: 0px;
-    }
-    &.left {
-      right: 0px;
-    }
-  }
-}

package/src/utils/popover/popover.tsx

@@ -1,178 +0,0 @@
-import {h, Component, ComponentChild} from 'preact';
-import * as styles from './popover.scss';
-
-const {ENTER, Esc} = KalturaPlayer.ui.utils.KeyMap;
-
-export enum PopoverVerticalPositions {
-  Top = 'top',
-  Bottom = 'bottom'
-}
-export enum PopoverHorizontalPositions {
-  Left = 'left',
-  Right = 'right'
-}
-export enum PopoverTriggerMode {
-  Click = 'click',
-  Hover = 'hover'
-}
-
-const CLOSE_ON_HOVER_DELAY = 500;
-
-const defaultProps = {
-  verticalPosition: PopoverVerticalPositions.Top,
-  horizontalPosition: PopoverHorizontalPositions.Left,
-  triggerMode: PopoverTriggerMode.Click,
-  className: 'popover',
-  closeOnEsc: true,
-  closeOnClick: true
-};
-
-interface PopoverProps {
-  onClose?: () => void;
-  onOpen?: () => void;
-  closeOnClick: boolean;
-  closeOnEsc: boolean;
-  verticalPosition: PopoverVerticalPositions;
-  horizontalPosition: PopoverHorizontalPositions;
-  className: string;
-  triggerMode: PopoverTriggerMode;
-  content: ComponentChild;
-  children: ComponentChild;
-}
-
-interface PopoverState {
-  open: boolean;
-}
-
-export class Popover extends Component<PopoverProps, PopoverState> {
-  private _closeTimeout: any = null;
-  private _controlElement: HTMLDivElement | null = null;
-  static defaultProps = {
-    ...defaultProps
-  };
-  state = {
-    open: false
-  };
-
-  componentWillUnmount() {
-    this._removeListeners();
-  }
-
-  private _clearTimeout = () => {
-    clearTimeout(this._closeTimeout);
-    this._closeTimeout = null;
-  };
-
-  private _handleMouseEvent = (event: MouseEvent) => {
-    if (!this._controlElement?.contains(event.target as Node | null) && this.props.closeOnClick) {
-      this._closePopover();
-    }
-  };
-
-  private _handleKeyboardEvent = (event: KeyboardEvent) => {
-    if (this._controlElement?.contains(event.target as Node | null) && event.keyCode === ENTER) {
-      // handle Enter key pressed on Target icon to prevent triggering of _closePopover twice
-      return;
-    }
-    if ((this.props.closeOnEsc && event.keyCode === Esc) || event.keyCode === ENTER) {
-      // handle if ESC or Enter button presesd
-      this._closePopover();
-    }
-  };
-
-  private _openPopover = () => {
-    const {onOpen} = this.props;
-    this._clearTimeout();
-    this.setState({open: true}, () => {
-      this._addListeners();
-      if (onOpen) {
-        onOpen();
-      }
-    });
-  };
-
-  private _closePopover = () => {
-    const {onClose} = this.props;
-    this._clearTimeout();
-    this.setState({open: false}, () => {
-      this._removeListeners();
-      if (onClose) {
-        onClose();
-      }
-    });
-  };
-
-  private _togglePopover = (e: MouseEvent | KeyboardEvent) => {
-    if (this.state.open) {
-      this._closePopover();
-    } else {
-      this._openPopover();
-    }
-  };
-  private _handleMouseEnter = () => {
-    if (!this.state.open) {
-      this._openPopover();
-    }
-  };
-  private _handleMouseLeave = () => {
-    this._closeTimeout = setTimeout(this._closePopover, CLOSE_ON_HOVER_DELAY);
-  };
-  private _handleHoverOnPopover = () => {
-    if (this.state.open && this._closeTimeout) {
-      this._clearTimeout();
-    } else {
-      this._closePopover();
-    }
-  };
-  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 _getHoverEvents = () => {
-    if (this.props.triggerMode === PopoverTriggerMode.Hover) {
-      return {
-        targetEvents: {
-          onMouseEnter: this._handleMouseEnter,
-          onMouseLeave: this._handleMouseLeave
-        },
-        popoverEvents: {
-          onMouseEnter: this._handleHoverOnPopover,
-          onMouseLeave: this._handleHoverOnPopover
-        }
-      };
-    }
-    return {targetEvents: {onClick: this._togglePopover}, popoverEvents: {}};
-  };
-  render(props: PopoverProps) {
-    if (!props.content || !props.children) {
-      return null;
-    }
-    const {targetEvents, popoverEvents} = this._getHoverEvents();
-    return (
-      <div className={styles.popoverContainer}>
-        <div
-          className="popover-anchor-container"
-          ref={node => {
-            this._controlElement = node;
-          }}
-          {...targetEvents}
-        >
-          {props.children}
-        </div>
-        {this.state.open && (
-          <div
-            aria-expanded="true"
-            className={[props.className, styles.popoverComponent, styles[props.verticalPosition], styles[props.horizontalPosition]].join(' ')}
-            {...popoverEvents}
-          >
-            {props.content}
-          </div>
-        )}
-      </div>
-    );
-  }
-}