@playkit-js/transcript 3.4.1-canary.1-d2c93cc → 3.4.1-canary.8-b84ee42

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@playkit-js/transcript",
-  "version": "3.4.1-canary.1-d2c93cc",
+  "version": "3.4.1-canary.8-b84ee42",
   "main": "dist/playkit-transcript.js",
   "license": "AGPL-3.0",
   "private": false,

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

@@ -2,7 +2,6 @@
 
 .popover-anchor-container {
   cursor: pointer;
-  margin-left: 8px;
   border-radius: $roundness-1;
   
   &:hover {
@@ -54,8 +53,12 @@
   padding: 9px 24px 9px 16px;
   white-space: nowrap;
   margin: 4px;
+
+  &.popover-menu-item-disabled {
+    color: $tone-4-color;
+  }
   
-  &:hover {
+  &:hover :not(.popover-menu-item-disabled) {
     background-color: $tone-6-color;
     border-radius: $roundness-1;
     cursor: pointer;

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

@@ -1,8 +1,10 @@
 import {A11yWrapper} from '@playkit-js/common/dist/hoc/a11y-wrapper';
 import {h, Component, VNode} from 'preact';
 
+const {Tooltip} = KalturaPlayer.ui.components;
+
 const {withEventManager} = KalturaPlayer.ui.Event;
-const {ENTER, ESC, SPACE} = KalturaPlayer.ui.utils.KeyMap;
+const {TAB} = KalturaPlayer.ui.utils.KeyMap;
 
 import * as styles from './popover-menu.scss';
 
@@ -10,9 +12,11 @@ interface PopoverMenuItemData {
   testId: string;
   label: string;
   onClick: () => void;
+  isDisabled?: boolean;
 }
 
 interface PopoverMenuProps {
+  label: string;
   eventManager?: any;
   children?: VNode;
   items: Array<PopoverMenuItemData>;
@@ -26,6 +30,7 @@ interface PopoverMenuState {
 class PopoverMenu extends Component<PopoverMenuProps, PopoverMenuState> {
   private _controlElementRef: HTMLDivElement | null = null;
   private _popoverElementRef: HTMLDivElement | null = null;
+  private _itemsRefMap: Map<number, HTMLDivElement | null> = new Map();
 
   eventManager: any;
 
@@ -34,7 +39,11 @@ class PopoverMenu extends Component<PopoverMenuProps, PopoverMenuState> {
     this.state = {isOpen: false};
 
     this.props.eventManager?.listen(document, 'click', this.handleMouseEvent);
-    this.props.eventManager?.listen(document, 'keydown', this.handleKeyboardEvent);
+    this.props.eventManager?.listen(document, 'keydown', this.handleKeydownEvent);
+  }
+
+  componentWillUnmount() {
+    this._itemsRefMap = new Map();
   }
 
   private handleMouseEvent = (event: MouseEvent) => {
@@ -43,33 +52,57 @@ class PopoverMenu extends Component<PopoverMenuProps, PopoverMenuState> {
     }
   };
 
-  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;
+  private handleKeydownEvent = (event: KeyboardEvent) => {
+    const eventTarget = event.target as Node | null;
+    if (
+      this.state.isOpen &&
+      event.keyCode === TAB &&
+      !this._controlElementRef?.contains(eventTarget) &&
+      !this._popoverElementRef?.contains(eventTarget)
+    ) {
+      this.closePopover();
     }
-    this.closePopover();
+  };
+
+  private _handleUpKeyPressed = (currentIndex: number) => () => {
+    this._getItemRef(currentIndex - 1)?.focus();
+  };
+
+  private _handleDownKeyPressed = (currentIndex: number) => () => {
+    this._getItemRef(currentIndex + 1)?.focus();
   };
 
   private closePopover() {
     this.setState({isOpen: false});
   }
 
-  private togglePopover = () => {
-    this.setState({isOpen: !this.state.isOpen});
+  private togglePopover = (focusFirstItem: boolean) => {
+    const isOpen = !this.state.isOpen;
+
+    this.setState({isOpen}, () => {
+      if (isOpen && focusFirstItem) {
+        const firstNonDisabledItem = this.props.items.findIndex((item: PopoverMenuItemData) => !item.isDisabled);
+        if (firstNonDisabledItem !== -1) {
+          this._getItemRef(firstNonDisabledItem)?.focus();
+        }
+      }
+    });
+  };
+
+  private _getItemRef = (index: number) => {
+    return this._itemsRefMap.get(index);
+  };
+
+  private _setItemRef = (index: number, ref: HTMLDivElement | null) => {
+    return this._itemsRefMap.set(index, ref);
   };
 
   render() {
-    const {children, items} = this.props;
+    const {label, children, items} = this.props;
 
-    return (
+    const popoverMenuContent = (
       <div className={styles.popoverContainer}>
-        <A11yWrapper onClick={this.togglePopover}>
+        <A11yWrapper onClick={() => this.togglePopover(true)}>
           <div
             data-testid="popover-anchor-container"
             className={`${styles.popoverAnchorContainer} ${this.state.isOpen ? styles.active : ''}`}
@@ -80,17 +113,42 @@ class PopoverMenu extends Component<PopoverMenuProps, PopoverMenuState> {
           </div>
         </A11yWrapper>
 
-        <div className={styles.popoverComponent} role="menu" aria-expanded={this.state.isOpen}>
+        <div
+          className={styles.popoverComponent}
+          role="menu"
+          aria-expanded={this.state.isOpen}
+          ref={node => {
+            this._popoverElementRef = node;
+          }}>
           {this.state.isOpen
-            ? items.map(({label, onClick, testId}) => {
+            ? items.map(({label, onClick, testId, isDisabled}, index) => {
                 return (
                   <A11yWrapper
                     onClick={() => {
-                      this.closePopover();
-                      onClick();
+                      if (!isDisabled) {
+                        this.closePopover();
+                        onClick();
+                      }
+                    }}
+                    onDownKeyPressed={() => {
+                      if (!isDisabled) {
+                        this._handleDownKeyPressed(index);
+                      }
+                    }}
+                    onUpKeyPressed={() => {
+                      if (!isDisabled) {
+                        this._handleUpKeyPressed(index);
+                      }
                     }}>
                     {
-                      <div tabIndex={0} role="menuitem" className={styles.popoverMenuItem} data-testid={testId}>
+                      <div
+                        tabIndex={isDisabled ? -1 : 0}
+                        role="menuitem"
+                        className={`${styles.popoverMenuItem} ${isDisabled ? styles.popoverMenuItemDisabled : ''}`}
+                        data-testid={testId}
+                        ref={node => {
+                          this._setItemRef(index, node);
+                        }}>
                         {label}
                       </div>
                     }
@@ -101,6 +159,14 @@ class PopoverMenu extends Component<PopoverMenuProps, PopoverMenuState> {
         </div>
       </div>
     );
+
+    return this.state.isOpen ? (
+      popoverMenuContent
+    ) : (
+      <div>
+        <Tooltip label={label}>{popoverMenuContent}</Tooltip>
+      </div>
+    );
   }
 }
 

package/src/components/transcript/transcript.scss

@@ -61,6 +61,8 @@
   padding-left: 16px;
   font-size: 16px;
   padding-right: 16px;
+  gap: 8px;
+  z-index: 2;
 }
 
 .body {

package/src/components/transcript/transcript.tsx

@@ -183,7 +183,7 @@ export class Transcript extends Component<TranscriptProps, TranscriptState> {
   };
 
   private _renderHeader = () => {
-    const {toggledWithEnter, kitchenSinkActive, downloadDisabled, onDownload, printDisabled, onPrint} = this.props;
+    const {toggledWithEnter, kitchenSinkActive, downloadDisabled, onDownload, printDisabled, onPrint, isLoading} = this.props;
     const {search, activeSearchIndex, totalSearchResults} = this.state;
     return (
       <div className={[styles.header, this._getHeaderStyles()].join(' ')} data-testid="transcript_header">
@@ -196,13 +196,14 @@ export class Transcript extends Component<TranscriptProps, TranscriptState> {
           toggledWithEnter={toggledWithEnter}
           kitchenSinkActive={kitchenSinkActive}
         />
-        <TranscriptMenu {...{downloadDisabled, onDownload, printDisabled, onPrint}} />
+        <TranscriptMenu {...{downloadDisabled, onDownload, printDisabled, onPrint, isLoading}} />
         <div data-testid="transcriptCloseButton">
           <Button
             type={ButtonType.borderless}
             size={ButtonSize.medium}
             disabled={false}
             onClick={this.props.onClose}
+            ariaLabel={'Hide Transcript'}
             tooltip={{label: 'Hide Transcript'}}
             icon={'close'}></Button>
         </div>

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

@@ -12,10 +12,10 @@ interface TranscriptMenuProps {
   onPrint: () => void;
   downloadDisabled?: boolean;
   printDisabled?: boolean;
+  isLoading?: boolean;
 }
 
 interface TranscriptMenuState {
-  isOpen: boolean;
   items: Array<PopoverMenuItemData>;
 }
 
@@ -23,13 +23,14 @@ class TranscriptMenu extends Component<TranscriptMenuProps, TranscriptMenuState>
   constructor(props: TranscriptMenuProps) {
     super();
 
-    const {downloadDisabled, onDownload, printDisabled, onPrint, printDownloadAreaLabel, printTranscript, downloadTranscript} = props;
+    const {downloadDisabled, onDownload, printDisabled, onPrint, printDownloadAreaLabel, printTranscript, downloadTranscript, isLoading} = props;
     const items = [];
     if (!downloadDisabled) {
       items.push({
         testId: 'download-menu-item',
         label: 'Download transcript',
-        onClick: onDownload
+        onClick: onDownload,
+        isDisabled: isLoading
       });
     }
 
@@ -37,16 +38,17 @@ class TranscriptMenu extends Component<TranscriptMenuProps, TranscriptMenuState>
       items.push({
         testId: 'print-menu-item',
         label: 'Print transcript',
-        onClick: onPrint
+        onClick: onPrint,
+        isDisabled: isLoading
       });
     }
 
-    this.state = {isOpen: false, items};
+    this.state = {items};
   }
 
   render() {
     return this.state.items.length ? (
-      <PopoverMenu items={this.state.items}>
+      <PopoverMenu label={'More'} items={this.state.items}>
         <Button type={ButtonType.borderless} icon={'more'}></Button>
       </PopoverMenu>
     ) : null;

package/translations/ar.i18n.json

@@ -0,0 +1,7 @@
+{
+  "ar": {
+    "transcript": {
+     
+    }
+  }
+}

package/translations/de.i18n.json

@@ -0,0 +1,20 @@
+{
+  "de": {
+    "transcript": {
+      "hide_plugin": "Transkript ausblenden",
+      "show_plugin": "Transkript anzeigen",
+      "print_download_area_label": "Aktuelle Abschrift herunterladen oder drucken",
+      "print_transcript": "Aktuelles Transkript drucken",
+      "download_transcript": "Aktuelles Transkript herunterladen",
+      "search": "Suche im Transkript",
+      "clear_search": "Suche leeren",
+      "next_search_match": "Weiter",
+      "prev_search_match": "Vorherige",
+      "search_results": "Ergebnis {{current}} von {{total}}",
+      "auto_scroll": "AutoScroll fortsetzen",
+      "whoops": "Hoppla!",
+      "load_failed": "Transkript konnte nicht geladen werden",
+      "skip_transcript": "Transkript überspringen"
+    }
+  }
+}

package/translations/fi.i18n.json

@@ -0,0 +1,20 @@
+{
+  "fi": {
+    "transcript": {
+      "hide_plugin": "Piilota tekstitallenne",
+      "show_plugin": "Näytä tekstitallenne",
+      "print_download_area_label": "Lataa tai tulosta nykyinen tekstitallenne",
+      "print_transcript": "Tulosta nykyinen tekstitallenne",
+      "download_transcript": "Lataa nykyinen tekstitallenne",
+      "search": "Hae tekstitallenteesta",
+      "clear_search": "Tyhjennä haku",
+      "next_search_match": "Seuraava",
+      "prev_search_match": "Edellinen",
+      "search_results": "Tulos {{current}}/{{total}}",
+      "auto_scroll": "Jatka automaattista vieritystä",
+      "whoops": "Ups!",
+      "load_failed": "Tekstitallenteen lataaminen epäonnistui",
+      "skip_transcript": "Ohita tekstitallenne"
+    }
+  }
+}

package/translations/fr.i18n.json

@@ -0,0 +1,20 @@
+{
+  "fr": {
+    "transcript": {
+      "hide_plugin": "Cacher le relevé",
+      "show_plugin": "Afficher le relevé",
+      "print_download_area_label": "Télécharger ou imprimer le relevé actuel",
+      "print_transcript": "Imprimer le relevé actuel",
+      "download_transcript": "Télécharger le relevé actuel",
+      "search": "Rechercher dans le relevé",
+      "clear_search": "Effacer la recherche",
+      "next_search_match": "Suivant",
+      "prev_search_match": "Précédent",
+      "search_results": "Résultat {{current}} de {{total}}",
+      "auto_scroll": "Reprendre AutoScroll",
+      "whoops": "Oups !",
+      "load_failed": "Échec de chargement du relevé",
+      "skip_transcript": "Sauter le relevé"
+    }
+  }
+}

package/translations/fr_ca.i18n.json

@@ -0,0 +1,20 @@
+{
+  "fr_ca": {
+    "transcript": {
+      "hide_plugin": "Masquer la transcription",
+      "show_plugin": "Afficher la transcription",
+      "print_download_area_label": "Téléverser ou imprimer la transcription actuelle",
+      "print_transcript": "Imprimer la transcription actuelle",
+      "download_transcript": "Téléverser la transcription actuelle",
+      "search": "Recherche dans la transcription",
+      "clear_search": "Effacer la recherche",
+      "next_search_match": "Suivant",
+      "prev_search_match": "Précédent",
+      "search_results": "Résultat {{current}} de {{total}}",
+      "auto_scroll": "Reprendre AutoScroll",
+      "whoops": "Oups!",
+      "load_failed": "Échec du chargement de la transcription",
+      "skip_transcript": "Passer la transcription"
+    }
+  }
+}

package/translations/he.i18n.json

@@ -0,0 +1,7 @@
+{
+  "he": {
+    "transcript": {
+    
+    }
+  }
+}

package/translations/hi_in.i18n.json

@@ -0,0 +1,7 @@
+{
+  "hi_in": {
+    "transcript": {
+      
+    }
+  }
+}

package/translations/it.i18n.json

@@ -0,0 +1,20 @@
+{
+  "it": {
+    "transcript": {
+      "hide_plugin": "Nascondi trascrizione",
+      "show_plugin": "Mostra trascrizione",
+      "print_download_area_label": "Scarica o stampa trascrizione corrente",
+      "print_transcript": "Stampa trascrizione corrente",
+      "download_transcript": "Scarica trascrizione corrente",
+      "search": "Cerca in Trascrizione",
+      "clear_search": "Cancella ricerca",
+      "next_search_match": "Successivo",
+      "prev_search_match": "Precedente",
+      "search_results": "Risultato {{current}} di {{total}}",
+      "auto_scroll": "Riprendi Scorrimento automatico",
+      "whoops": "Operazione non riuscita!",
+      "load_failed": "Impossibile caricare la trascrizione",
+      "skip_transcript": "Salta trascrizione"
+    }
+  }
+}

package/translations/ja.i18n.json

@@ -0,0 +1,20 @@
+{
+  "ja": {
+    "transcript": {
+      "hide_plugin": "複写を非表示にする",
+      "show_plugin": "複写を表示する",
+      "print_download_area_label": "現在の複写をダウンロードまたは印刷する",
+      "print_transcript": "現在の複写を印刷する",
+      "download_transcript": "現在の複写をダウンロードする",
+      "search": "複写で検索",
+      "clear_search": "検索をクリア",
+      "next_search_match": "次",
+      "prev_search_match": "前へ",
+      "search_results": "{{total}} の結果  {{current}} ",
+      "auto_scroll": "AutoScrollを再開",
+      "whoops": "おっと！",
+      "load_failed": "複写のロードに失敗した",
+      "skip_transcript": "複写をスキップ"
+    }
+  }
+}

package/translations/ko.i18n.json

@@ -0,0 +1,20 @@
+{
+  "ko": {
+    "transcript": {
+      "hide_plugin": "기록 숨기기",
+      "show_plugin": "기록 보기",
+      "print_download_area_label": "현재 기록 다운로드 또는 인쇄",
+      "print_transcript": "현재 기록 인쇄",
+      "download_transcript": "현재 기록 다운로드",
+      "search": "기록 검색",
+      "clear_search": "검색 지우기",
+      "next_search_match": "다음",
+      "prev_search_match": "이전",
+      "search_results": "{{total}}의 {{current}} 결과",
+      "auto_scroll": "자동 스크롤 다시 시작",
+      "whoops": "죄송합니다.",
+      "load_failed": "기록을 로드하는 데 실패했습니다",
+      "skip_transcript": "기록 스킵하기"
+    }
+  }
+}

package/translations/nl.i18n.json

@@ -0,0 +1,20 @@
+{
+  "nl": {
+    "transcript": {
+      "hide_plugin": "Transcriptie verbergen",
+      "show_plugin": "Transcriptie tonen",
+      "print_download_area_label": "Huidige transcriptie afdrukken of downloaden",
+      "print_transcript": "Huidige transcriptie afdrukken",
+      "download_transcript": "Huidige transcriptie downloaden",
+      "search": "In transcriptie zoeken",
+      "clear_search": "Zoekopdracht wissen",
+      "next_search_match": "Volgende",
+      "prev_search_match": "Vorige",
+      "search_results": "Resultaat {{current}} van {{total}}",
+      "auto_scroll": "AutoScroll hervatten",
+      "whoops": "Oeps!",
+      "load_failed": "Laden transcriptie mislukt",
+      "skip_transcript": "Transcriptie overslaan"
+    }
+  }
+}

package/translations/pt_br.i18n.json

@@ -0,0 +1,20 @@
+{
+  "pt_br": {
+    "transcript": {
+      "hide_plugin": "Ocultar transcrição",
+      "show_plugin": "Mostrar transcrição",
+      "print_download_area_label": "Baixar ou imprimir transcrição atual",
+      "print_transcript": "Imprimir transcrição atual",
+      "download_transcript": "Baixar transcrição atual",
+      "search": "Buscar na transcrição",
+      "clear_search": "Limpar pesquisa",
+      "next_search_match": "Próximo",
+      "prev_search_match": "Anterior",
+      "search_results": "Resultado {{current}} de {{total}}",
+      "auto_scroll": "Retomar rolagem automática",
+      "whoops": "Ops!",
+      "load_failed": "Falha ao carregar a transcrição",
+      "skip_transcript": "Ignorar transcrição"
+    }
+  }
+}

package/translations/ru.i18n.json

@@ -0,0 +1,20 @@
+{
+  "ru": {
+    "transcript": {
+      "hide_plugin": "Скрыть текстовую расшифровку",
+      "show_plugin": "Показать текстовую расшифровку",
+      "print_download_area_label": "Скачать или распечатать текущую текстовую расшифровку",
+      "print_transcript": "Распечатать текущую текстовую расшифровку",
+      "download_transcript": "Скачать текущую текстовую расшифровку",
+      "search": "Искать в текстовой расшифровке",
+      "clear_search": "Очистить результаты поиска",
+      "next_search_match": "Далее",
+      "prev_search_match": "Предыдущий",
+      "search_results": "Результат {{текущий}} из {{общий}}",
+      "auto_scroll": "Возобновить автоматическую прокрутку",
+      "whoops": "Ой!",
+      "load_failed": "Не удалось загрузить текстовую расшифровку",
+      "skip_transcript": "Пропустить текстовую расшифровку"
+    }
+  }
+}

package/translations/zh_cn.i18n.json

@@ -0,0 +1,20 @@
+{
+  "zh_cn": {
+    "transcript": {
+      "hide_plugin": "隐藏转录文字",
+      "show_plugin": "显示转录文字",
+      "print_download_area_label": "加载或打印当前转录文字",
+      "print_transcript": "打印当前转录文字",
+      "download_transcript": "加载当前转录文字",
+      "search": "在转录文字中搜索",
+      "clear_search": "清除搜索",
+      "next_search_match": "下一个",
+      "prev_search_match": "上一个",
+      "search_results": "第{{current}} 结果，共 {{total}}个结果",
+      "auto_scroll": "恢复自动滚动",
+      "whoops": "哎呀！",
+      "load_failed": "成绩单加载失败",
+      "skip_transcript": "跳过成绩单"
+    }
+  }
+}

package/translations/zh_tw.i18n.json

@@ -0,0 +1,20 @@
+{
+  "zh_tw": {
+    "transcript": {
+      "hide_plugin": "隱藏文字記錄",
+      "show_plugin": "顯示文字記錄",
+      "print_download_area_label": "下載或列印目前文字記錄",
+      "print_transcript": "列印目前文字記錄",
+      "download_transcript": "下載目前文字記錄",
+      "search": "在文字記錄中搜尋",
+      "clear_search": "清除搜尋",
+      "next_search_match": "下一個",
+      "prev_search_match": "前一個",
+      "search_results": "{{total}} 的結果 {{current}}",
+      "auto_scroll": "恢復自動捲動",
+      "whoops": "糟糕！",
+      "load_failed": "無法載入文字紀錄",
+      "skip_transcript": "略過文字記錄"
+    }
+  }
+}