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

package/src/components/transcript/transcript.tsx

@@ -5,10 +5,19 @@ import * as styles from './transcript.scss';
 import {Spinner} from '../spinner';
 import {Search} from '../search';
 import {CaptionList} from '../caption-list';
-import {HighlightedMap, CuePointData, PluginPositions} from '../../types';
+import {HighlightedMap, CuePointData} from '../../types';
 import {CloseButton} from '../close-button';
 import {ErrorIcon} from './error-icon';
-const {ENTER, Space, Tab, Esc} = KalturaPlayer.ui.utils.KeyMap;
+
+const {ENTER, SPACE, TAB, ESC} = KalturaPlayer.ui.utils.KeyMap;
+const {withText, Text} = KalturaPlayer.ui.preacti18n;
+
+const translates = {
+  autoScrollLabel: <Text id="transcript.auto_scroll">Enable auto scroll</Text>,
+  errorTitle: <Text id="transcript.whoops">Whoops!</Text>,
+  errorDescripton: <Text id="transcript.load_failed">Failed to load transcript</Text>,
+  skipTranscript: <Text id="transcript.skip_transcript">Skip transcript</Text>
+};
 
 export interface TranscriptProps {
   onSeek(time: number): void;
@@ -26,8 +35,11 @@ export interface TranscriptProps {
   kitchenSinkActive: boolean;
   toggledWithEnter: boolean;
   highlightedMap: HighlightedMap;
-  pluginMode: PluginPositions;
   onItemClicked: (n: number) => void;
+  autoScrollLabel?: string;
+  errorTitle?: string;
+  errorDescripton?: string;
+  skipTranscript?: string;
 }
 
 interface TranscriptState {
@@ -50,7 +62,7 @@ const initialSearch = {
 
 const SEARCHBAR_HEIGHT = 38; // height of search bar with margins
 
-export class Transcript extends Component<TranscriptProps, TranscriptState> {
+export class TranscriptComponent extends Component<TranscriptProps, TranscriptState> {
   private _transcriptListRef: HTMLElement | null = null;
   private _captionListRef: any = null;
   private _skipTranscriptButtonRef: HTMLDivElement | null = null;
@@ -105,7 +117,8 @@ export class Transcript extends Component<TranscriptProps, TranscriptState> {
         <div
           role="button"
           className={`${styles.autoscrollButton} ${isAutoScrollEnabled ? '' : styles.autoscrollButtonVisible}`}
-          tabIndex={isAutoScrollEnabled ? -1 : 1}
+          tabIndex={isAutoScrollEnabled ? -1 : 0}
+          aria-label={this.props.autoScrollLabel}
           ref={node => {
             this._autoscrollButtonRef = node;
           }}>
@@ -201,8 +214,13 @@ export class Transcript extends Component<TranscriptProps, TranscriptState> {
     );
   };
 
+  private _handleClick = (event: MouseEvent | KeyboardEvent) => {
+    event.preventDefault();
+    this._autoscrollButtonRef?.focus();
+  };
+
   private _handleKeyDown = (event: KeyboardEvent) => {
-    if (event.keyCode === Tab && !event.shiftKey) {
+    if (event.keyCode === TAB && !event.shiftKey) {
       this.setState({
         isAutoScrollEnabled: false
       });
@@ -211,9 +229,8 @@ export class Transcript extends Component<TranscriptProps, TranscriptState> {
         event.preventDefault();
         captionRef.focus();
       }
-    } else if (event.keyCode === ENTER || event.keyCode === Space) {
-      event.preventDefault();
-      this._autoscrollButtonRef?.focus();
+    } else if (event.keyCode === ENTER || event.keyCode === SPACE) {
+      this._handleClick(event);
     }
   };
 
@@ -226,8 +243,9 @@ export class Transcript extends Component<TranscriptProps, TranscriptState> {
         }}
         className={styles.skipTranscriptButton}
         onKeyDown={this._handleKeyDown}
-        tabIndex={1}>
-        Skip transcript
+        onClick={this._handleClick}
+        tabIndex={0}>
+        {this.props.skipTranscript}
       </div>
     );
   };
@@ -235,9 +253,6 @@ export class Transcript extends Component<TranscriptProps, TranscriptState> {
   private _renderTranscript = () => {
     const {captions, hasError, onRetryLoad, showTime, videoDuration, highlightedMap} = this.props;
     const {isAutoScrollEnabled, searchMap, activeSearchIndex, searchLength} = this.state;
-    if (!captions || !captions.length) {
-      return null;
-    }
 
     if (hasError) {
       return (
@@ -245,17 +260,16 @@ export class Transcript extends Component<TranscriptProps, TranscriptState> {
           <div className={styles.errorIcon}>
             <ErrorIcon />
           </div>
-          <p className={styles.errorMainText}>Whoops!</p>
-          <p className={styles.errorDescriptionText}>
-            Failed to get transcript, please try again
-            <button className={styles.retryButton} onClick={onRetryLoad}>
-              Retry
-            </button>
-          </p>
+          <p className={styles.errorMainText}>{this.props.errorTitle}</p>
+          <p className={styles.errorDescriptionText}>{this.props.errorDescripton}</p>
         </div>
       );
     }
 
+    if (!captions || !captions.length) {
+      return null;
+    }
+
     const captionProps = {
       showTime,
       searchLength,
@@ -351,14 +365,14 @@ export class Transcript extends Component<TranscriptProps, TranscriptState> {
   };
 
   private _handleEsc = (event: KeyboardEvent) => {
-    if (event.keyCode === Esc) {
+    if (event.keyCode === ESC) {
       this.props.onClose();
     }
   };
 
   render(props: TranscriptProps) {
-    const {isLoading, kitchenSinkActive} = props;
-
+    const {isLoading, kitchenSinkActive, hasError} = props;
+    const renderTranscriptButtons = !(isLoading || hasError);
     return (
       <div
         className={`${styles.root} ${kitchenSinkActive ? '' : styles.hidden}`}
@@ -371,7 +385,7 @@ export class Transcript extends Component<TranscriptProps, TranscriptState> {
 
           <CloseButton onClick={this.props.onClose} />
 
-          {!isLoading && this._renderSkipTranscriptButton()}
+          {renderTranscriptButtons && this._renderSkipTranscriptButton()}
           <div
             className={styles.body}
             onScroll={this._onScroll}
@@ -380,9 +394,11 @@ export class Transcript extends Component<TranscriptProps, TranscriptState> {
             }}>
             {isLoading ? this._renderLoading() : this._renderTranscript()}
           </div>
-          {this._renderScrollToButton()}
+          {renderTranscriptButtons && this._renderScrollToButton()}
         </div>
       </div>
     );
   }
 }
+
+export const Transcript = withText(translates)(TranscriptComponent);

package/src/transcript-plugin.tsx

@@ -1,23 +1,19 @@
 import {h} from 'preact';
 import {OnClickEvent} from '@playkit-js/common';
 import {ui} from 'kaltura-player-js';
-import {ObjectUtils} from './utils';
+import {UpperBarManager, SidePanelsManager} from '@playkit-js/ui-managers';
+import {ObjectUtils, downloadContent, printContent} from './utils';
+import {icons} from './components/icons';
 import {PluginButton} from './components/plugin-button/plugin-button';
 import {Transcript} from './components/transcript';
 import {getConfigValue, isBoolean, makePlainText, prepareCuePoint} from './utils';
-import {TranscriptConfig, PluginPositions, PluginStates, HighlightedMap, CuePointData, ItemTypes, CuePoint} from './types';
-import {DownloadPrintMenu, downloadContent, printContent} from './components/download-print-menu';
+import {TranscriptConfig, PluginStates, HighlightedMap, CuePointData, ItemTypes, CuePoint} from './types';
 
 const {SidePanelModes, SidePanelPositions, ReservedPresetNames, ReservedPresetAreas} = ui;
-const {get} = ObjectUtils;
-const {Tooltip} = KalturaPlayer.ui.components;
 const {withText, Text} = KalturaPlayer.ui.preacti18n;
+const {get} = ObjectUtils;
 
-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>
-});
+const LOADING_TIMEOUT = 10000;
 
 interface TimedMetadataEvent {
   payload: {
@@ -41,12 +37,14 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
   private _activeCuePointsMap: HighlightedMap = {};
   private _captionMap: Map<string, Array<CuePointData>> = new Map();
   private _isLoading = false;
+  private _loadingTimeoutId?: ReturnType<typeof setTimeout>;
   private _hasError = false;
   private _triggeredByKeyboard = false;
 
-  private _removePopoverIcon: null | Function = null;
-
-  private _transcriptPanel = null;
+  private _transcriptPanel = -1;
+  private _transcriptIcon = -1;
+  private _printIcon = -1;
+  private _downloadIcon = -1;
   private _pluginState: PluginStates | null = null;
 
   constructor(name: string, player: KalturaPlayerTypes.Player, config: TranscriptConfig) {
@@ -54,7 +52,11 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
   }
 
   get sidePanelsManager() {
-    return this.player.getService('sidePanelsManager') as any;
+    return this.player.getService('sidePanelsManager') as SidePanelsManager | undefined;
+  }
+
+  get upperBarManager() {
+    return this.player.getService('upperBarManager') as UpperBarManager | undefined;
   }
 
   get cuePointManager() {
@@ -66,8 +68,8 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
   }
 
   loadMedia(): void {
-    if (!this.cuePointManager || !this.sidePanelsManager) {
-      this.logger.warn("kalturaCuepoints or sidePanelsManager haven't registered");
+    if (!this.cuePointManager || !this.sidePanelsManager || !this.upperBarManager) {
+      this.logger.warn("kalturaCuepoints, sidePanelsManager or upperBarManager haven't registered");
       return;
     }
     if (this.player.isLive()) {
@@ -79,31 +81,44 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
   }
 
   private _initListeners(): void {
-    this.eventManager.listen(this.player, this.player.Event.FIRST_PLAYING, () => {
-      if ((this.player.getTracks(this.player.Track.TEXT) || []).length) {
-        // check if captions already added in TextTrack
-        if (!this._captionMap.size) {
-          // turn on loading animation till captions added to TextTrack
-          this._isLoading = true;
-        }
-        this._addPopoverIcon();
+    this.eventManager.listenOnce(this.player, this.player.Event.TRACKS_CHANGED, () => {
+      if (this._getTextTracks().length) {
+        this.eventManager.listen(this.player, this.player.Event.TIMED_METADATA_CHANGE, this._onTimedMetadataChange);
+        this.eventManager.listen(this.player, this.player.Event.TIMED_METADATA_ADDED, this._onTimedMetadataAdded);
+        this.eventManager.listen(this.player, this.player.Event.TEXT_TRACK_CHANGED, this._handleLanguageChange);
+        this._addDownloadIcon();
+        this._addPrintIcon();
         this._addTranscriptItem();
+        this._initLoading();
       }
     });
-    this.eventManager.listen(this.player, this.player.Event.TIMED_METADATA_CHANGE, this._onTimedMetadataChange);
-    this.eventManager.listen(this.player, this.player.Event.TIMED_METADATA_ADDED, this._onTimedMetadataAdded);
-    this.eventManager.listen(this.player, this.player.Event.TEXT_TRACK_CHANGED, this._handleLanguageChange);
   }
 
+  private _initLoading = () => {
+    clearTimeout(this._loadingTimeoutId);
+    this._isLoading = false;
+    this._hasError = false;
+    if (!this._captionMap.has(this._activeCaptionMapId)) {
+      // turn on loading animation till captions added to TextTrack
+      this._isLoading = true;
+      this._loadingTimeoutId = setTimeout(() => {
+        // display error slate
+        this._isLoading = false;
+        this._hasError = true;
+        this._updateTranscriptPanel();
+      }, LOADING_TIMEOUT);
+    }
+    this._updateTranscriptPanel();
+  };
+
   private _handleLanguageChange = () => {
     this._activeCaptionMapId = this._getCaptionMapId();
-    this._isLoading = !this._captionMap.has(this._activeCaptionMapId);
-    this._updateTranscriptPanel();
+    this._initLoading();
   };
 
   private _updateTranscriptPanel() {
     if (this._transcriptPanel) {
-      this.sidePanelsManager.update(this._transcriptPanel);
+      this.sidePanelsManager?.update(this._transcriptPanel);
     }
   }
 
@@ -120,14 +135,15 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
   };
 
   private _onTimedMetadataChange = ({payload}: TimedMetadataEvent) => {
-    const transcriptCuePoints: Array<CuePoint> = payload.cues.filter((cue: CuePoint) => {
-      return cue.metadata.cuePointType === ItemTypes.Caption;
+    const transcriptCuePoints: Array<CuePoint> = payload.cues
+      .filter((cue: CuePoint) => {
+        return cue.metadata.cuePointType === ItemTypes.Caption;
       })
       .filter((cue, index, array) => {
         // filter out captions that has endTime eq to next caption startTime
         const nextCue = array[index + 1];
         return !nextCue || cue.endTime !== nextCue.startTime;
-    });
+      });
     this._activeCuePointsMap = {};
     transcriptCuePoints.forEach(cue => {
       this._activeCuePointsMap[cue.id] = true;
@@ -139,11 +155,16 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
     this._activeCaptionMapId = this._getCaptionMapId();
     this._captionMap.set(this._activeCaptionMapId, newData);
     this._isLoading = false;
+    clearTimeout(this._loadingTimeoutId);
     this._updateTranscriptPanel();
   };
 
+  private _getTextTracks = () => {
+    return this.player.getTracks(this.player.Track.TEXT) || [];
+  };
+
   private _getCaptionMapId = (): string => {
-    const allTextTracks = this.player.getTracks(this.player.Track.TEXT) || [];
+    const allTextTracks = this._getTextTracks();
     const activeTextTrack = allTextTracks.find(track => track.active);
     if (activeTextTrack?.language === 'off') {
       // use 1st captions from text-track list
@@ -152,42 +173,78 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
     return `${activeTextTrack?.language}-${activeTextTrack?.label}`;
   };
 
-  private _handleCloseClick = () => {
-    this.sidePanelsManager.deactivateItem(this._transcriptPanel);
-    this._pluginState = PluginStates.CLOSED;
+  private _activatePlugin = () => {
+    this.ready.then(() => {
+      this.sidePanelsManager?.activateItem(this._transcriptPanel);
+      this._pluginState === PluginStates.OPENED;
+      this.upperBarManager?.update(this._transcriptIcon);
+    });
   };
 
-  private _addPopoverIcon(): void {
-    const {downloadDisabled, printDisabled} = this.config;
-    if (this._removePopoverIcon) {
+  private _deactivatePlugin = () => {
+    this.ready.then(() => {
+      this.sidePanelsManager?.deactivateItem(this._transcriptPanel);
+      this._pluginState = PluginStates.CLOSED;
+      this.upperBarManager?.update(this._transcriptIcon);
+    });
+  };
+
+  private _isPluginActive = () => {
+    return this.sidePanelsManager!.isItemActive(this._transcriptPanel);
+  };
+
+  private _handleClickOnPluginIcon = (e: OnClickEvent, byKeyboard?: boolean) => {
+    if (this._isPluginActive()) {
+      this._triggeredByKeyboard = false;
+      this._deactivatePlugin();
+    } else {
+      this._triggeredByKeyboard = Boolean(byKeyboard);
+      this._activatePlugin();
+    }
+  };
+
+  private _addDownloadIcon(): void {
+    const {downloadDisabled} = this.config;
+    if (this._downloadIcon > 0 || downloadDisabled) {
       return;
     }
-    this._removePopoverIcon = this.player.ui.addComponent({
-      label: 'Download or print transcript',
-      area: ReservedPresetAreas.TopBarRightControls,
-      presets: [ReservedPresetNames.Playback, ReservedPresetNames.Live],
-      get: withText(translates)(({printDownloadAreaLabel, printTranscript, downloadTranscript}: Record<string, string>) => (
-        <DownloadPrintMenu
-          onDownload={this._handleDownload}
-          onPrint={this._handlePrint}
-          downloadDisabled={getConfigValue(downloadDisabled, isBoolean, false)}
-          printDisabled={getConfigValue(printDisabled, isBoolean, false)}
-          dropdownAriaLabel={printDownloadAreaLabel}
-          printButtonAriaLabel={printTranscript}
-          downloadButtonAriaLabel={downloadTranscript}
-        />
+    const translate = {
+      label: <Text id="transcript.download_transcript">Download current transcript</Text>
+    };
+    this._downloadIcon = this.upperBarManager!.add({
+      label: translate.label as any,
+      svgIcon: {path: icons.DOWNLOAD_ICON, viewBox: `0 0 ${icons.BigSize} ${icons.BigSize}`},
+      onClick: this._handleDownload,
+      component: withText(translate)((props: {label: string}) => (
+        <PluginButton isActive={false} onClick={this._handleDownload} id={'download-transcript'} icon={icons.DOWNLOAD_ICON} label={props.label} />
       ))
-    });
+    }) as number;
+  }
+  private _addPrintIcon(): void {
+    const {printDisabled} = this.config;
+    if (this._printIcon > 0 || printDisabled) {
+      return;
+    }
+    const translate = {
+      label: <Text id="transcript.print_transcript">Print current transcript</Text>
+    };
+    this._printIcon = this.upperBarManager!.add({
+      label: translate.label as any,
+      svgIcon: {path: icons.PRINT_ICON, viewBox: `0 0 ${icons.BigSize} ${icons.BigSize}`},
+      onClick: this._handlePrint,
+      component: withText(translate)((props: {label: string}) => (
+        <PluginButton isActive={false} onClick={this._handlePrint} id={'print-transcript'} icon={icons.PRINT_ICON} label={props.label} />
+      ))
+    }) as number;
   }
 
   private _addTranscriptItem(): void {
-    const buttonLabel = 'Transcript';
-    const {expandMode, position, expandOnFirstPlay} = this.config;
-    const pluginMode: PluginPositions = [SidePanelPositions.RIGHT, SidePanelPositions.LEFT].includes(position)
-      ? PluginPositions.VERTICAL
-      : PluginPositions.HORIZONTAL;
-    const {showTime, scrollOffset, searchDebounceTimeout, searchNextPrevDebounceTimeout} = this.config;
-    this._transcriptPanel = this.sidePanelsManager.addItem({
+    if (this._transcriptPanel > 0) {
+      return;
+    }
+
+    const {expandMode, position, expandOnFirstPlay, showTime, scrollOffset, searchDebounceTimeout, searchNextPrevDebounceTimeout} = this.config;
+    this._transcriptPanel = this.sidePanelsManager!.add({
       label: 'Transcript',
       panelComponent: () => {
         return (
@@ -198,7 +255,6 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
             searchNextPrevDebounceTimeout={getConfigValue(searchNextPrevDebounceTimeout, Number.isInteger, 100)}
             highlightedMap={this._activeCuePointsMap}
             onSeek={this._seekTo}
-            pluginMode={pluginMode}
             onItemClicked={this._seekTo}
             captions={this._data}
             isLoading={this._isLoading}
@@ -206,43 +262,36 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
             onRetryLoad={this._updateTranscriptPanel}
             currentTime={this.player.currentTime}
             videoDuration={this.player.duration}
-            kitchenSinkActive={!!this.sidePanelsManager.isItemActive(this._transcriptPanel)}
+            kitchenSinkActive={this._isPluginActive()}
             toggledWithEnter={this._triggeredByKeyboard}
-            onClose={this._handleCloseClick}
+            onClose={this._deactivatePlugin}
           />
         );
       },
-      iconComponent: ({isActive}: {isActive: boolean}) => {
-        return (
-          <Tooltip label={buttonLabel} type="bottom">
-            <PluginButton
-              isActive={isActive}
-              label={buttonLabel}
-              onClick={(e: OnClickEvent, byKeyboard?: boolean) => {
-                if (this.sidePanelsManager.isItemActive(this._transcriptPanel)) {
-                  this._triggeredByKeyboard = false;
-                  this._handleCloseClick();
-                } else {
-                  this._triggeredByKeyboard = Boolean(byKeyboard);
-                  this.sidePanelsManager.activateItem(this._transcriptPanel);
-                }
-              }}
-            />
-          </Tooltip>
-        );
-      },
       presets: [ReservedPresetNames.Playback, ReservedPresetNames.Live, ReservedPresetNames.Ads],
       position: position,
       expandMode: expandMode === SidePanelModes.ALONGSIDE ? SidePanelModes.ALONGSIDE : SidePanelModes.OVER,
-      onActivate: () => {
-        this._pluginState = PluginStates.OPENED;
-      }
-    });
+      onDeactivate: this._deactivatePlugin
+    }) as number;
+    const translates = {
+      showTranscript: <Text id="transcript.show_plugin">Show Transcript</Text>,
+      hideTranscript: <Text id="transcript.hide_plugin">Hide Transcript</Text>
+    };
+    this._transcriptIcon = this.upperBarManager!.add({
+      label: 'Transcript',
+      svgIcon: {path: icons.PLUGIN_ICON, viewBox: `0 0 ${icons.BigSize} ${icons.BigSize}`},
+      onClick: this._handleClickOnPluginIcon as () => void,
+      component: withText(translates)((props: {showTranscript: string; hideTranscript: string}) => {
+        const isActive = this._isPluginActive();
+        const label = isActive ? props.hideTranscript : props.showTranscript;
+        return (
+          <PluginButton isActive={isActive} onClick={this._handleClickOnPluginIcon} id="transcript-icon" label={label} icon={icons.PLUGIN_ICON} />
+        );
+      })
+    }) as number;
 
     if ((expandOnFirstPlay && !this._pluginState) || this._pluginState === PluginStates.OPENED) {
-      this.player.ready().then(() => {
-        this.sidePanelsManager.activateItem(this._transcriptPanel);
-      });
+      this._activatePlugin();
     }
   }
 
@@ -276,17 +325,24 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
 
   reset(): void {
     this.eventManager.removeAll();
-    if (this._removePopoverIcon) {
-      this._removePopoverIcon();
-      this._removePopoverIcon = null;
+    if (Math.max(this._transcriptPanel, this._transcriptIcon) > 0) {
+      this.sidePanelsManager?.remove(this._transcriptPanel);
+      this.upperBarManager!.remove(this._transcriptIcon);
+      this._transcriptPanel = -1;
+      this._transcriptIcon = -1;
     }
-    if (this._transcriptPanel) {
-      this.sidePanelsManager.removeItem(this._transcriptPanel);
-      this._transcriptPanel = null;
+    if (this._printIcon > 0) {
+      this.upperBarManager!.remove(this._printIcon);
+      this._printIcon = -1;
+    }
+    if (this._downloadIcon > 0) {
+      this.upperBarManager!.remove(this._downloadIcon);
+      this._downloadIcon = -1;
     }
     this._captionMap = new Map();
     this._activeCaptionMapId = '';
     this._isLoading = false;
+    clearTimeout(this._loadingTimeoutId);
     this._hasError = false;
     this._triggeredByKeyboard = false;
   }

package/src/types/types-ui.ts

@@ -1,10 +1,3 @@
-export type OnClick = (e: KeyboardEvent | MouseEvent, byKeyboard?: boolean) => void;
-
-export enum PluginPositions {
-  HORIZONTAL = 'horizontal',
-  VERTICAL = 'vertical'
-}
-
 export enum PluginStates {
   OPENED = 'opened',
   CLOSED = 'closed'

package/src/utils/index.ts

@@ -1,4 +1,3 @@
 export * from './utils';
 export * from './object-utils';
 export * from './debounce';
-export * from './popover/popover';

package/src/utils/utils.ts

@@ -84,3 +84,37 @@ export const prepareCuePoint = (cuePoint: CuePoint): CuePointData => {
 
   return itemData;
 };
+
+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();
+  }
+}

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

@@ -1,23 +0,0 @@
-import {h} from 'preact';
-
-export const PrintIcon = () => (
-  <svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
-    <g id="Icons/32/print" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-      <path
-        d="M21,3 C22.0543618,3 22.9181651,3.81587779 22.9945143,4.85073766 L23,5 L23,9 L26,9 C27.1045695,9 28,9.8954305 28,11 L28,21 C28,22.1045695 27.1045695,23 26,23 L23,23 L23,28 C23,29.1045695 22.1045695,30 21,30 L11,30 C9.8954305,30 9,29.1045695 9,28 L9,23 L6,23 C4.8954305,23 4,22.1045695 4,21 L4,11 C4,9.8954305 4.8954305,9 6,9 L9,9 L9,5 C9,3.9456382 9.81587779,3.08183488 10.8507377,3.00548574 L11,3 L21,3 Z M21,19 L11,19 L11,28 L21,28 L21,19 Z M26,11 L6,11 L6,21 L9,21 L9,19 C8.44771525,19 8,18.5522847 8,18 C8,17.4477153 8.44771525,17 9,17 L23,17 C23.5522847,17 24,17.4477153 24,18 C24,18.5522847 23.5522847,19 23,19 L23,21 L26,21 L26,11 Z M21,5 L11,5 L11,9 L21,9 L21,5 Z"
-        id="Combined-Shape"
-        fill="#fff"></path>
-    </g>
-  </svg>
-);
-
-export const DownloadIcon = () => (
-  <svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
-    <g id="Icons/32/Download" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-      <path
-        d="M26,25 C26.5522847,25 27,25.4477153 27,26 C27,26.5522847 26.5522847,27 26,27 L26,27 L7,27 C6.44771525,27 6,26.5522847 6,26 C6,25.4477153 6.44771525,25 7,25 L7,25 Z M15.897,20.797 L15.817,20.73 L15.8163834,20.7298413 L8.34305882,13.7298413 C7.93997861,13.3522902 7.91928313,12.7194636 8.29683417,12.3163834 C8.67438521,11.9133032 9.30721188,11.8926077 9.71029209,12.2701587 L15.4996721,17.693 L15.5,6 C15.5,5.48716416 15.8860402,5.06449284 16.3833789,5.00672773 L16.5,5 C17.0522847,5 17.5,5.44771525 17.5,6 L17.4996721,17.694 L23.2951711,12.2699211 C23.6673663,11.9215418 24.2352038,11.9125649 24.6172049,12.230382 L24.7086128,12.3166371 C25.0860237,12.7198486 25.0651082,13.352668 24.6618968,13.7300789 L17.1833629,20.7300789 L17.1610165,20.7503813 L17.1610165,20.7503813 C17.1421868,20.7669999 17.1224361,20.7831339 17.102079,20.7985075 C17.0891381,20.8082894 17.0764369,20.8174134 17.0635772,20.826204 C17.0434306,20.8399634 17.0223437,20.8532674 17.0007451,20.8657864 C16.9872099,20.8736423 16.9734873,20.8811624 16.959633,20.8883367 L16.8877511,20.9220455 L16.8877511,20.9220455 C16.8756318,20.927087 16.8632234,20.9320132 16.8507409,20.9366814 C16.83028,20.9444208 16.8097352,20.9513578 16.7889039,20.9576336 C16.7705976,20.9630349 16.752126,20.968019 16.7335525,20.9724647 C16.6585039,20.9905214 16.5803589,21 16.5,21 C16.4170842,21 16.3365254,20.9899086 16.2594848,20.9708871 C16.2500284,20.9684434 16.2399293,20.9657886 16.2298654,20.9629733 C16.2028024,20.9554899 16.1769173,20.947049 16.1515197,20.9376057 C16.1370523,20.9321598 16.1223107,20.9262914 16.1076867,20.9200585 C16.0832011,20.9096448 16.0596143,20.8984375 16.036557,20.886357 C16.025923,20.8807972 16.0148138,20.8747205 16.0037984,20.8684173 C15.9792921,20.8543502 15.955966,20.8396537 15.9333153,20.8240474 L15.898,20.798 L15.897,20.797 Z M15.867,20.774 L15.888,20.79 L15.8735171,20.7794831 L15.8735171,20.7794831 L15.867,20.774 Z M15.817,20.73 L15.9035191,20.8027045 C15.8784859,20.7840722 15.8543541,20.7642966 15.831201,20.7434548 L15.817,20.73 Z"
-        id="Combined-Shape"
-        fill="#ffffff"></path>
-    </g>
-  </svg>
-);

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

@@ -1,44 +0,0 @@
-@import '../../variables.scss';
-
-.download-print-button {
-  display: inline-block;
-  width: 36px;
-  height: 36px;
-  color: $white-color;
-  border: none;
-  cursor: pointer;
-  padding: 0;
-  background: none;
-  border-radius: 4px;
-  outline-offset: 0 -1px;
-  &:hover,
-  &:active {
-    border-radius: 4px;
-    background-color: rgba(0, 0, 0, 0.8);
-  }
-  &:focus {
-    outline: 1px solid $focus-color;
-  }
-  .icon {
-    width: 100%;
-    height: 100%;
-    background-position: center;
-    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;
-  }
-}