@playkit-js/moderation 3.2.16 → 3.2.17-canary.0-df449ae

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@playkit-js/moderation",
-  "version": "3.2.16",
+  "version": "3.2.17-canary.0-df449ae",
   "main": "dist/playkit-moderation.js",
   "private": false,
   "bugs": {

package/src/components/moderation/moderation.scss

@@ -39,6 +39,13 @@
       text-align: left;
       line-height: 32px;
     }
+    .selectTitle {
+      font-size: 14px;
+      line-height: 16px;
+      font-weight: 700;
+      text-align: left;
+      margin-top: 24px;
+    }
     .subtitle {
       margin-top: 16px;
       opacity: 0.7;
@@ -49,7 +56,7 @@
       display: flex;
       align-items: center;
       width: 100%;
-      margin-top: 24px;
+      margin-top: 4px;
       margin-bottom: 16px;
       cursor: pointer;
       padding: 0;

package/src/components/moderation/moderation.tsx

@@ -30,6 +30,7 @@ interface ModerationProps {
   closeLabel?: string;
   reportPlaceholder?: string;
   defaultContentType?: string;
+  reportSelectTitle?: string;
   reportTitle?: string;
 }
 
@@ -68,8 +69,9 @@ const translates = ({moderateOptions}: ModerationProps) => {
     sendReportLabel: <Text id="moderation.report_button">Report</Text>,
     closeLabel: <Text id="moderation.close">Close</Text>,
     reportPlaceholder: <Text id="moderation.report_placeholder">Describe what you saw...</Text>,
-    defaultContentType: <Text id="moderation.default_content_type">Choose a reason for reporting this content</Text>,
-    reportTitle: <Text id="moderation.report_title">What’s wrong with this content?</Text>
+    defaultContentType: <Text id="moderation.default_content_type">Select</Text>,
+    reportSelectTitle: <Text id="moderation.report_select_title">Choose a reason for reporting this content (required)</Text>,
+    reportTitle: <Text id="moderation.report_title">What’s wrong with this content?</Text>,
   };
 };
 
@@ -162,6 +164,7 @@ export class Moderation extends Component<MergedProps, ModerationState> {
             <div className={styles.mainWrapper}>
               <div className={styles.title}>{this.props.reportTitle}</div>
               {subtitle ? <div className={[styles.subtitle].join(' ')}>{subtitle}</div> : null}
+              <div className={styles.selectTitle}>{this.props.reportSelectTitle}</div>
               <Popover options={this._getPopoverMenuOptions()} setExpandedState={this._togglePopoverMenu} open={this.state.open}>
                 <button
                   className={styles.selectWrapper}

package/src/components/popover/popover.tsx

@@ -3,6 +3,7 @@ import {A11yWrapper, OnClickEvent} from '@playkit-js/common/dist/hoc/a11y-wrappe
 import * as styles from './popover.scss';
 
 const {ESC, TAB} = KalturaPlayer.ui.utils.KeyMap;
+const {withEventManager} = KalturaPlayer.ui.Event;
 
 export interface PopoverMenuItem {
   label?: string;
@@ -14,9 +15,10 @@ interface PopoverProps {
   children: VNode;
   setExpandedState: (open: boolean, callback?: () => void) => void;
   open: boolean;
+  eventManager?: any;
 }
 
-
+@withEventManager
 export class Popover extends Component<PopoverProps> {
   private _controlElementRef: HTMLDivElement | null = null;
   private _popoverElementRef: HTMLDivElement | null = null;
@@ -35,7 +37,9 @@ export class Popover extends Component<PopoverProps> {
   };
 
   private _handleKeyboardEvent = (event: KeyboardEvent) => {
-    if (event.keyCode === ESC || !this._popoverElementRef?.contains(event.target as Node | null)) {
+    if (event.keyCode === ESC || (!this._popoverElementRef?.contains(event.target as Node | null)
+        && !this._controlElementRef?.contains(event.target as Node | null))) {
+
       this._closePopover();
     }
   };
@@ -60,7 +64,11 @@ export class Popover extends Component<PopoverProps> {
     this.props.setExpandedState(true, () => {
       this._addListeners();
       if (byKeyboard) {
-        this._getOptionRef(0)?.focus();
+        this.props.eventManager?.listen(this._controlElementRef, 'keydown', (event: KeyboardEvent) => {
+          if (event.keyCode === TAB){
+            this._getOptionRef(-1)?.focus();
+          }
+        })
       }
     });
   };
@@ -98,7 +106,9 @@ export class Popover extends Component<PopoverProps> {
         <div
           className="popover-anchor-container"
           ref={node => {
-            this._controlElementRef = node;
+            if (node){
+              this._controlElementRef = node;
+            }
           }}>
           <A11yWrapper onClick={this._togglePopover}>{props.children}</A11yWrapper>;
         </div>

package/translations/de.i18n.json

@@ -4,7 +4,7 @@
       "report_button": "Bericht",
       "close": "Schließen",
       "report_placeholder": "Beschreiben Sie, was Sie gesehen haben...",
-      "default_content_type": "Wählen Sie einen Grund, weswegen Sie diesen Inhalt melden",
+      "report_select_title": "Wählen Sie einen Grund, weswegen Sie diesen Inhalt melden",
       "report_title": "Was stimmt mit diesem Inhalt nicht?"
     }
   }

package/translations/en.i18n.json

@@ -11,7 +11,8 @@
       "Spam / Commercials": "Spam / Commercials",
       "close": "Close",
       "report_placeholder": "Describe what you saw...",
-      "default_content_type": "Choose a reason for reporting this content (required)",
+      "default_content_type": "Select",
+      "report_select_title": "Choose a reason for reporting this content (required)",
       "report_title": "What’s wrong with this content?"
     }
   }

package/translations/es.i18n.json

@@ -4,7 +4,7 @@
       "report_button": "Informe",
       "close": "Cerrar",
       "report_placeholder": "Describa lo que ha visto…",
-      "default_content_type": "Elija una razón para denunciar este contenido",
+      "report_select_title": "Elija una razón para denunciar este contenido",
       "report_title": "¿Qué le ocurre a este contenido?"
     }
   }

package/translations/fi.i18n.json

@@ -4,7 +4,7 @@
       "report_button": "Raportoi",
       "close": "Sulje",
       "report_placeholder": "Kuvaile näkemäsi...",
-      "default_content_type": "Valitse syy tämän sisällön raportointiin",
+      "report_select_title": "Valitse syy tämän sisällön raportointiin",
       "report_title": "Mitä vikaa tässä sisällössä on?"
     }
   }

package/translations/fr.i18n.json

@@ -4,7 +4,7 @@
       "report_button": "Rapport",
       "close": "Fermer",
       "report_placeholder": "Décrivez ce que vous avez vu...",
-      "default_content_type": "Sélectionner une raison de signaler ce contenu",
+      "report_select_title": "Sélectionner une raison de signaler ce contenu",
       "report_title": "Quel est le problème avec ce contenu ?"
     }
   }

package/translations/fr_ca.i18n.json

@@ -4,7 +4,7 @@
       "report_button": "Rapport",
       "close": "Fermer",
       "report_placeholder": "Décrivez ce que vous avez vu...",
-      "default_content_type": "Choisissez un motif de signalement de ce contenu",
+      "report_select_title": "Choisissez un motif de signalement de ce contenu",
       "report_title": "Quel est le problème avec ce contenu?"
     }
   }

package/translations/it.i18n.json

@@ -4,7 +4,7 @@
       "report_button": "Rapporto",
       "close": "Chiudi",
       "report_placeholder": "Descrivi ciò che hai visto...",
-      "default_content_type": "Seleziona un motivo per segnalare questo contenuto",
+      "report_select_title": "Seleziona un motivo per segnalare questo contenuto",
       "report_title": "Cosa c’è di sbagliato in questo contenuto?"
     }
   }

package/translations/ja.i18n.json

@@ -4,7 +4,7 @@
       "report_button": "レポート",
       "close": "閉じる",
       "report_placeholder": "あなたが見たものを記述する",
-      "default_content_type": "このコンテンツを報告する理由を選択する",
+      "report_select_title": "このコンテンツを報告する理由を選択する",
       "report_title": "このコンテンツの何が悪いのですか？"
     }
   }

package/translations/ko.i18n.json

@@ -4,7 +4,7 @@
       "report_button": "보고서",
       "close": "닫기",
       "report_placeholder": "관찰한 것을 설명하십시오.",
-      "default_content_type": "해당 콘텐츠를 신고하는 이유를 선택하십시오.",
+      "report_select_title": "해당 콘텐츠를 신고하는 이유를 선택하십시오.",
       "report_title": "콘텐츠에 어떠한 문제가 있습니까?"
     }
   }

package/translations/nl.i18n.json

@@ -4,7 +4,7 @@
       "report_button": "Rapporteren",
       "close": "Sluiten",
       "report_placeholder": "Beschrijf wat je hebt gezien...",
-      "default_content_type": "Kies een reden om deze inhoud te rapporteren",
+      "report_select_title": "Kies een reden om deze inhoud te rapporteren",
       "report_title": "Wat is er mis met de inhoud?"
     }
   }

package/translations/pt_br.i18n.json

@@ -4,7 +4,7 @@
       "report_button": "Relatório",
       "close": "Fechar",
       "report_placeholder": "Descreva o que você viu...",
-      "default_content_type": "Escolha o motivo da denúncia deste conteúdo",
+      "report_select_title": "Escolha o motivo da denúncia deste conteúdo",
       "report_title": "O que há de errado com este conteúdo?"
     }
   }

package/translations/ru.i18n.json

@@ -4,7 +4,7 @@
       "report_button": "Сообщить",
       "close": "Закрыть",
       "report_placeholder": "Опишите, что вы видели...",
-      "default_content_type": "Выберите причину сообщения об этом контенте",
+      "report_select_title": "Выберите причину сообщения об этом контенте",
       "report_title": "Что не так с этим контентом?"
     }
   }

package/translations/zh_cn.i18n.json

@@ -4,7 +4,7 @@
       "report_button": "报告",
       "close": "关闭",
       "report_placeholder": "描述您所看到的……",
-      "default_content_type": "选择报告此内容的原因",
+      "report_select_title": "选择报告此内容的原因",
       "report_title": "此内容有什么问题"
     }
   }

package/translations/zh_tw.i18n.json

@@ -4,7 +4,7 @@
       "report_button": "報告",
       "close": "關閉",
       "report_placeholder": "描述您所看到的...",
-      "default_content_type": "選擇報告此內容的原因",
+      "report_select_title": "選擇報告此內容的原因",
       "report_title": "此內容有什麼問題？"
     }
   }