@playkit-js/transcript 2.1.4 → 2.1.5-canary.16-1ac3e09

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

@@ -1,144 +1,166 @@
-import { h, Component, ComponentChild } from "preact";
-import {
-    Popover,
-    PopoverHorizontalPositions,
-    PopoverVerticalPositions,
-    KeyboardKeys
-} from "@playkit-js-contrib/ui";
-import { PopoverMenu, PopoverMenuItem } from "../popover-menu";
-import * as styles from "./download-print-menu.scss";
+import {h, Component, ComponentChild} from 'preact';
+import {Popover, PopoverHorizontalPositions, PopoverVerticalPositions} from '../../utils';
+import {PopoverMenu, PopoverMenuItem} from '../popover-menu';
+import * as styles from './download-print-menu.scss';
+
+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;
+  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;
+  ['aria-label']: string;
+  buttonStyles: string;
+  onClick?: () => void;
+  tabIndex?: number;
+  iconStyles: string;
 }
 
 interface DownloadPrintMenuState {
-    popoverOpen: boolean;
+  popoverOpen: boolean;
 }
 
 export class DownloadPrintMenu extends Component<DownloadPrintMenuProps, DownloadPrintMenuState> {
-    static defaultProps = {
-        dropdownAriaLabel: "Download or print current transcript",
-        printButtonAriaLabel: "Print current transcript",
-        downloadButtonAriaLabel: "Download current transcript"
-    };
-    state: DownloadPrintMenuState = {
-        popoverOpen: false
-    };
+  static defaultProps = {
+    dropdownAriaLabel: 'Download or print current transcript',
+    printButtonAriaLabel: 'Print current transcript',
+    downloadButtonAriaLabel: 'Download current transcript'
+  };
+  state: DownloadPrintMenuState = {
+    popoverOpen: false
+  };
 
-    private _onDownloadClicked = () => {
-        this.props.onDownload();
-    };
+  private _onDownloadClicked = () => {
+    this.props.onDownload();
+  };
 
-    private _onPrintClicked = () => {
-        this.props.onPrint();
-    };
-    private _onKeyDown = (e: KeyboardEvent, callBack: Function) => {
-        if (e.keyCode !== KeyboardKeys.Enter && e.keyCode !== KeyboardKeys.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 _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 _getPopoverMenuOptions = () => {
+    return [
+      {
+        label: this.props.downloadButtonAriaLabel,
+        onMenuChosen: this._onDownloadClicked
+      },
+      {
+        label: this.props.printButtonAriaLabel,
+        onMenuChosen: this._onPrintClicked
+      }
+    ];
+  };
 
-    private _renderIcon = ({
-        buttonStyles,
-        tabIndex = 1,
-        iconStyles,
-        ...props
-    }: ButtonProperties): ComponentChild => {
-        return (
-            <button className={buttonStyles} tabIndex={tabIndex} {...props}>
-                <div className={iconStyles} />
-            </button>
-        );
-    };
+  private _renderIcon = ({buttonStyles, tabIndex = 0, iconStyles, ...props}: ButtonProperties): ComponentChild => {
+    return (
+      <button className={buttonStyles} tabIndex={tabIndex} {...props}>
+        <div className={iconStyles} />
+      </button>
+    );
+  };
 
-    private _popoverContent = () => {
-        return (
-            <PopoverMenu
-                itemRenderer={this._popoverMenuItemRenderer}
-                options={this._getPopoverMenuOptions()}
-            />
-        );
-    };
+  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, styles.downloadIcon].join(" ")
-                    })}
-                </Popover>
-            );
-        }
-        if (!downloadDisabled && printDisabled) {
-            return this._renderIcon({
-                ["aria-label"]: props.downloadButtonAriaLabel,
-                buttonStyles: styles.downloadPrintButton,
-                iconStyles: [styles.icon, styles.downloadIcon].join(" "),
-                onClick: this._onDownloadClicked
-            });
-        }
-        if (downloadDisabled && !printDisabled) {
-            return this._renderIcon({
-                ["aria-label"]: props.printButtonAriaLabel,
-                buttonStyles: styles.downloadPrintButton,
-                iconStyles: [styles.icon, styles.printIcon].join(" "),
-                onClick: this._onPrintClicked
-            });
-        }
-        return null;
+  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, styles.downloadIcon].join(' ')
+          })}
+        </Popover>
+      );
+    }
+    if (!downloadDisabled && printDisabled) {
+      return this._renderIcon({
+        ['aria-label']: props.downloadButtonAriaLabel,
+        buttonStyles: styles.downloadPrintButton,
+        iconStyles: [styles.icon, styles.downloadIcon].join(' '),
+        onClick: this._onDownloadClicked
+      });
+    }
+    if (downloadDisabled && !printDisabled) {
+      return this._renderIcon({
+        ['aria-label']: props.printButtonAriaLabel,
+        buttonStyles: styles.downloadPrintButton,
+        iconStyles: [styles.icon, styles.printIcon].join(' '),
+        onClick: this._onPrintClicked
+      });
     }
+    return null;
+  }
 }

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

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

package/src/components/icons/index.ts

@@ -0,0 +1,11 @@
+export namespace icons {
+  export const PLUGIN_ICON =
+    'M23.1111111,19 C23.6020309,19 24,19.4477153 24,20 C24,20.5522847 23.6020309,21 23.1111111,21 L8.88888889,21 C8.39796911,21 8,20.5522847 8,20 C8,19.4477153 8.39796911,19 8.88888889,19 L23.1111111,19 Z M24.8695652,3 C26.5984566,3 28,4.24720677 28,5.78571429 L28,26.2142857 C28,27.7527932 26.5984566,29 24.8695652,29 L7.13043478,29 C5.40154339,29 4,27.7527932 4,26.2142857 L4,5.78571429 C4,4.24720677 5.40154339,3 7.13043478,3 L24.8695652,3 Z M26,17 L6,17 L6,26.0833333 C6,26.5895944 6.47127921,27 7.05263158,27 L24.9473684,27 C25.5287208,27 26,26.5895944 26,26.0833333 L26,17 Z M8.88888889,23 L23.1111111,23 C23.6020309,23 24,23.4477153 24,24 C24,24.5128358 23.6568532,24.9355072 23.2147743,24.9932723 L23.1111111,25 L8.88888889,25 C8.39796911,25 8,24.5522847 8,24 C8,23.4871642 8.34314684,23.0644928 8.78522567,23.0067277 L8.88888889,23 L23.1111111,23 L8.88888889,23 Z M24.9473684,5 L7.05263158,5 C6.47127921,5 6,5.41040565 6,5.91666667 L6,15 L26,15 L26,5.91666667 C26,5.41040565 25.5287208,5 24.9473684,5 Z';
+  export const CLOSE_ICON =
+    'M17.9113162,16 L24.6072325,9.30408374 C25.1313645,8.77995172 25.1287183,7.92687249 24.6009229,7.3990771 C24.0694478,6.86760201 23.220227,6.86845682 22.6959163,7.39276754 L16,14.0886838 L9.30408374,7.39276754 C8.77995172,6.86863552 7.92687249,6.8712817 7.3990771,7.3990771 C6.86760201,7.93055219 6.86845682,8.77977302 7.39276754,9.30408374 L14.0886838,16 L7.39276754,22.6959163 C6.86863552,23.2200483 6.8712817,24.0731275 7.3990771,24.6009229 C7.93055219,25.132398 8.77977302,25.1315432 9.30408374,24.6072325 L16,17.9113162 L22.6959163,24.6072325 C23.2200483,25.1313645 24.0731275,25.1287183 24.6009229,24.6009229 C25.132398,24.0694478 25.1315432,23.220227 24.6072325,22.6959163 L17.9113162,16 Z';
+  export const SCROLL_ICON =
+    'M11.7071 6.70711C11.3466 7.06759 10.7794 7.09532 10.3871 6.7903L10.2929 6.70711L6 2.415L1.70711 6.70711C1.34662 7.06759 0.779391 7.09532 0.3871 6.79029L0.292893 6.70711C-0.0675907 6.34662 -0.0953206 5.77939 0.209705 5.3871L0.292894 5.29289L5.29289 0.292893C5.65338 -0.0675913 6.22061 -0.0953212 6.6129 0.209704L6.70711 0.292893L11.7071 5.29289C12.0976 5.68342 12.0976 6.31658 11.7071 6.70711Z';
+  export const BigSize = 32;
+  export const MediumSize = 24;
+  export const SmallSize = 16;
+}

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

@@ -0,0 +1,26 @@
+@import '../../variables.scss';
+
+.navigationPluginButton,
+.navigationPluginIcon {
+  min-height: 36px;
+  min-width: 36px;
+}
+
+.pluginButton {
+  display: flex;
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  &.active {
+    background-color: $darken-gray;
+  }
+}
+
+// TODO: remove once core team fix alignment of plugin icons
+:global(.playkit-player .playkit-top-bar .playkit-right-controls) {
+  display: flex;
+}

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

@@ -0,0 +1,29 @@
+import {h} from 'preact';
+import * as styles from './plugin-button.scss';
+import {icons} from '../icons';
+import {A11yWrapper, OnClick} from '../a11y-wrapper';
+const {Tooltip, Icon} = KalturaPlayer.ui.components;
+
+interface PluginButtonProps {
+  isActive: boolean;
+  onClick: OnClick;
+  label?: string;
+}
+
+export const PluginButton = ({isActive, onClick, label}: PluginButtonProps) => {
+  return (
+    <Tooltip label={label} type="bottom">
+      <A11yWrapper onClick={onClick}>
+        <button aria-label={label} className={[styles.pluginButton, isActive ? styles.active : ''].join(' ')}>
+          <Icon
+            id="transcript-plugin-button"
+            height={icons.BigSize}
+            width={icons.BigSize}
+            viewBox={`0 0 ${icons.BigSize} ${icons.BigSize}`}
+            path={icons.PLUGIN_ICON}
+          />
+        </button>
+      </A11yWrapper>
+    </Tooltip>
+  );
+};

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

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

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

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

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

@@ -1,15 +1,15 @@
-import { h, Component, ComponentChild } from "preact";
-import * as styles from "./popover-menu.scss";
+import {h, Component, ComponentChild} from 'preact';
+import * as styles from './popover-menu.scss';
 
 export interface PopoverMenuItem {
-    label: string;
-    onMenuChosen: Function;
-    customRenderer?: (el: PopoverMenuItem) => ComponentChild;
+  label: string;
+  onMenuChosen: Function;
+  customRenderer?: (el: PopoverMenuItem) => ComponentChild;
 }
 
 interface PopoverMenuProps {
-    options: Array<PopoverMenuItem>;
-    itemRenderer?: (el: PopoverMenuItem) => ComponentChild;
+  options: Array<PopoverMenuItem>;
+  itemRenderer?: (el: PopoverMenuItem) => ComponentChild;
 }
 
 /**
@@ -30,23 +30,23 @@ interface PopoverMenuProps {
  */
 
 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>
-                    );
-                })}
+  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/components/search/index.ts

@@ -1 +1 @@
-export * from "./search";
+export * from './search';

package/src/components/search/search.scss

@@ -2,7 +2,7 @@
 
 .search-wrapper {
   ::-moz-placeholder {
-    opacity: 1
+    opacity: 1;
   }
 
   display: flex;