@playkit-js/transcript 3.2.1 → 3.2.2-canary.1-792a782

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@playkit-js/transcript",
-  "version": "3.2.1",
+  "version": "3.2.2-canary.1-792a782",
   "main": "dist/playkit-transcript.js",
   "license": "AGPL-3.0",
   "private": false,
@@ -67,7 +67,7 @@
     "html5 player"
   ],
   "dependencies": {
-    "@playkit-js/common": "^1.0.18",
+    "@playkit-js/common": "^1.1.0",
     "@playkit-js/playkit-js-ui": "^0.73.0",
     "@playkit-js/ui-managers": "^1.3.2",
     "cypress": "^12.3.0",

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

@@ -21,7 +21,6 @@ export const AutoscrollButton = withText(translates)(
     return (
       <A11yWrapper onClick={onClick}>
         <div
-          role="button"
           className={`${styles.autoscrollButton} ${isAutoScrollEnabled ? '' : styles.autoscrollButtonVisible}`}
           tabIndex={isAutoScrollEnabled ? -1 : 1}
           aria-label={autoScrollLabel}

package/src/components/caption/caption.tsx

@@ -131,7 +131,6 @@ export class Caption extends Component<ExtendedCaptionProps, CaptionState> {
     const isHighlighted = Object.keys(highlighted)[0] === id;
 
     const captionA11yProps: Record<string, any> = {
-      role: isHighlighted ? 'text' : 'listitem',
       ariaCurrent: isHighlighted,
       onFocus: this._handleFocus,
       onBlur: this._handleBlur,
@@ -140,7 +139,7 @@ export class Caption extends Component<ExtendedCaptionProps, CaptionState> {
     };
 
     return (
-      <A11yWrapper onClick={this._handleKeyDown}>
+      <A11yWrapper onClick={this._handleKeyDown} role={isHighlighted ? 'text' : 'listitem'}>
         <div
           className={styles.caption}
           ref={node => {

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

@@ -9,17 +9,23 @@ const {Tooltip, Icon} = KalturaPlayer.ui.components;
 interface PluginButtonProps {
   isActive: boolean;
   onClick: OnClick;
+  setRef?: (ref: HTMLButtonElement | null) => void;
   id: string;
   icon: string;
   label?: string;
   dataTestId?: string;
 }
 
-export const PluginButton = ({isActive, onClick, label, id, icon, dataTestId}: PluginButtonProps) => {
+export const PluginButton = ({isActive, onClick, label, id, icon, dataTestId, setRef}: PluginButtonProps) => {
   return (
     <Tooltip label={label} type="bottom">
       <A11yWrapper onClick={onClick}>
         <button
+          ref={node => {
+            if (setRef) {
+              setRef(node);
+            }
+          }}
           aria-label={label}
           className={[ui.style.upperBarIcon, styles.pluginButton, isActive ? styles.active : ''].join(' ')}
           data-testid={dataTestId}>

package/src/components/transcript/transcript.tsx

@@ -1,5 +1,5 @@
 import {h, Component} from 'preact';
-import {OnClickEvent} from '@playkit-js/common';
+import {OnClickEvent, OnClick} from '@playkit-js/common';
 import {debounce} from '../../utils';
 import * as styles from './transcript.scss';
 import {Spinner} from '../spinner';
@@ -21,7 +21,7 @@ const translates = {
 
 export interface TranscriptProps {
   onSeek(time: number): void;
-  onClose: () => void;
+  onClose: OnClick;
   onRetryLoad: () => void;
   isLoading: boolean;
   hasError: boolean;
@@ -342,7 +342,7 @@ export class Transcript extends Component<TranscriptProps, TranscriptState> {
 
   private _handleEsc = (event: KeyboardEvent) => {
     if (event.keyCode === ESC) {
-      this.props.onClose();
+      this.props.onClose(event, true);
     }
   };
 

package/src/transcript-plugin.tsx

@@ -46,6 +46,7 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
   private _printIcon = -1;
   private _downloadIcon = -1;
   private _pluginState: PluginStates | null = null;
+  private _pluginButtonRef: HTMLButtonElement | null = null;
 
   constructor(name: string, player: KalturaPlayerTypes.Player, config: TranscriptConfig) {
     super(name, player, config);
@@ -216,8 +217,14 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
       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}
-                      dataTestId="transcript_downloadButton" />
+        <PluginButton
+          isActive={false}
+          onClick={this._handleDownload}
+          id={'download-transcript'}
+          icon={icons.DOWNLOAD_ICON}
+          label={props.label}
+          dataTestId="transcript_downloadButton"
+        />
       ))
     }) as number;
   }
@@ -235,8 +242,14 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
       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}
-                      dataTestId="transcript_printButton" />
+        <PluginButton
+          isActive={false}
+          onClick={this._handlePrint}
+          id={'print-transcript'}
+          icon={icons.PRINT_ICON}
+          label={props.label}
+          dataTestId="transcript_printButton"
+        />
       ))
     }) as number;
   }
@@ -268,7 +281,7 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
             videoDuration={this.player.duration}
             kitchenSinkActive={this._isPluginActive()}
             toggledWithEnter={this._triggeredByKeyboard}
-            onClose={this._deactivatePlugin}
+            onClose={this._handleClose}
           />
         );
       },
@@ -289,8 +302,15 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
         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}
-                        dataTestId="transcript_pluginButton" />
+          <PluginButton
+            isActive={isActive}
+            onClick={this._handleClickOnPluginIcon}
+            id="transcript-icon"
+            label={label}
+            icon={icons.PLUGIN_ICON}
+            dataTestId="transcript_pluginButton"
+            setRef={this._setPluginButtonRef}
+          />
         );
       })
     }) as number;
@@ -300,6 +320,10 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
     }
   }
 
+  private _setPluginButtonRef = (ref: HTMLButtonElement | null) => {
+    this._pluginButtonRef = ref;
+  };
+
   private _seekTo = (time: number) => {
     this.player.currentTime = time;
   };
@@ -324,6 +348,13 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
     }
   };
 
+  private _handleClose = (e: OnClickEvent, byKeyboard: boolean) => {
+    if (byKeyboard) {
+      this._pluginButtonRef?.focus();
+    }
+    this._deactivatePlugin();
+  };
+
   static isValid(): boolean {
     return true;
   }
@@ -335,6 +366,7 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
       this.upperBarManager!.remove(this._transcriptIcon);
       this._transcriptPanel = -1;
       this._transcriptIcon = -1;
+      this._pluginButtonRef = null;
     }
     if (this._printIcon > 0) {
       this.upperBarManager!.remove(this._printIcon);