@playkit-js/transcript 3.5.31 → 3.5.32-canary.0-6a8848a

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@playkit-js/transcript",
-  "version": "3.5.31",
+  "version": "3.5.32-canary.0-6a8848a",
   "main": "dist/playkit-transcript.js",
   "license": "AGPL-3.0",
   "private": false,
@@ -14,8 +14,8 @@
   },
   "devDependencies": {
     "@playkit-js/kaltura-player-js": "3.17.9",
-    "@playkit-js/playkit-js-ui": "0.78.0",
-    "@playkit-js/ui-managers": "1.5.4-canary.0-9261ea6",
+    "@playkit-js/playkit-js-ui": "0.79.13",
+    "@playkit-js/ui-managers": "1.6.2-canary.0-9634d47",
     "@types/sanitize-html": "^2.9.3",
     "conventional-github-releaser": "3.1.3",
     "copyfiles": "^2.4.1",
@@ -77,7 +77,7 @@
     "html5 player"
   ],
   "dependencies": {
-    "@playkit-js/common": "1.5.17",
+    "@playkit-js/common": "1.5.21",
     "sanitize-html": "^2.11.0",
     "stream-browserify": "^3.0.0"
   },

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

@@ -0,0 +1,108 @@
+import {A11yWrapper, OnClickEvent} from '@playkit-js/common/dist/hoc/a11y-wrapper';
+import {h} from 'preact';
+import {useState} from 'preact/hooks';
+import {Icon} from '@playkit-js/common/dist/icon';
+
+import * as styles from './popover-menu.scss';
+
+export interface PopoverMenuItemData {
+  testId: string;
+  label: string;
+  onClick?: () => void;
+  isDisabled?: boolean;
+  isSelected?: boolean;
+  items?: Array<PopoverMenuItemData>;
+}
+
+interface PopoverMenuItemProps {
+  item: PopoverMenuItemData;
+  index: number;
+  setRef?: (index: number, ref: HTMLDivElement | null) => void;
+  onKeyUp: (index: number) => void;
+  onKeyDown: (index: number) => void;
+  onClick?: () => void;
+}
+
+export const PopoverMenuItem = (props: PopoverMenuItemProps) => {
+  const {item, index, setRef, onKeyUp, onKeyDown, onClick} = props;
+  const {isDisabled, isSelected, items, testId, label} = item;
+  const [isChildOpen, setIsChildOpen] = useState(false);
+
+  const getAddonAfter = () => {
+    if (items) {
+      return <Icon name="chevronRight" />;
+    }
+    if (isSelected) {
+      return <Icon name="check" />;
+    }
+    return null;
+  };
+
+  const handleOnClick = (event: OnClickEvent) => {
+    if (isDisabled) {
+      return;
+    }
+    if (items) {
+      event.stopPropagation();
+      setIsChildOpen(!isChildOpen);
+      return;
+    }
+    onClick?.();
+  };
+
+  const renderChildItems = () => {
+    if (!items) {
+      return null;
+    }
+    return (
+      <div className={[styles.popoverComponent, styles.childItem].join(' ')} role="menu" aria-expanded={isChildOpen} id="popoverContent">
+        {isChildOpen
+          ? items.map((item, index) => (
+              <PopoverMenuItem
+                key={index}
+                item={item}
+                index={index}
+                onKeyDown={() => {}}
+                onKeyUp={() => {}}
+                onClick={() => {
+                  item.onClick?.();
+                  onClick?.();
+                  setIsChildOpen(false);
+                }}
+              />
+            ))
+          : null}
+      </div>
+    );
+  };
+
+  return (
+    <A11yWrapper
+      role="menuitem"
+      onClick={handleOnClick}
+      onDownKeyPressed={() => {
+        if (!isDisabled) {
+          onKeyDown(index);
+        }
+      }}
+      onUpKeyPressed={() => {
+        if (!isDisabled) {
+          onKeyUp(index);
+        }
+      }}>
+      <div
+        tabIndex={isDisabled ? -1 : 0}
+        role="menuitem"
+        aria-selected={isSelected}
+        className={`${styles.popoverMenuItem} ${isDisabled ? styles.popoverMenuItemDisabled : ''}`}
+        data-testid={testId}
+        ref={node => {
+          setRef?.(index, node);
+        }}>
+        {label}
+        {getAddonAfter()}
+        {renderChildItems()}
+      </div>
+    </A11yWrapper>
+  );
+};

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

@@ -1,17 +1,19 @@
 @import './variables.scss';
 
+$child-item-width: 170px;
+
 .popover-anchor-container {
   cursor: pointer;
   border-radius: $roundness-1;
-  
+
   &:hover {
     background-color: $tone-4-color;
   }
-  
+
   &.active {
     background-color: $tone-6-color;
   }
-  
+
   .popover-anchor {
     pointer-events: none;
   }
@@ -19,7 +21,7 @@
 
 .popover-container {
   position: relative;
-  
+
   .popover-component {
     background-color: $tone-7-color;
     border-radius: $roundness-1;
@@ -29,11 +31,19 @@
     position: absolute;
     right: 0px;
     z-index: 1;
+    &.child-item {
+      margin-top: 0;
+      top: 0;
+      width: $child-item-width;
+      left: calc(-7px - #{$child-item-width});
+    }
   }
 }
 .popover-menu-item {
+  position: relative;
   align-items: center;
   display: flex;
+  justify-content: space-between;
   font-size: 15px;
   line-height: 18px;
   min-height: 30px;
@@ -44,13 +54,13 @@
   &.popover-menu-item-disabled {
     color: $tone-4-color;
   }
-  
+
   &:hover:not(.popover-menu-item-disabled) {
     background-color: $tone-6-color;
     border-radius: $roundness-1;
     cursor: pointer;
   }
-  
+
   &:focus {
     outline: 1px solid #222;
   }
@@ -60,4 +70,3 @@
   padding-top: 6px;
   padding-bottom: 6px;
 }
-

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

@@ -1,21 +1,15 @@
 import {A11yWrapper} from '@playkit-js/common/dist/hoc/a11y-wrapper';
 import {h, Component, VNode} from 'preact';
+import {PopoverMenuItem, PopoverMenuItemData} from './popover-menu-item';
+import {ui} from '@playkit-js/kaltura-player-js';
+const {Tooltip} = ui.components;
+const {withText, Text} = ui.preacti18n;
 
-const {Tooltip} = KalturaPlayer.ui.components;
-const {withText, Text} = KalturaPlayer.ui.preacti18n;
-
-const {withEventManager} = KalturaPlayer.ui.Event;
-const {TAB} = KalturaPlayer.ui.utils.KeyMap;
+const {withEventManager} = ui.Event;
+const {TAB} = ui.utils.KeyMap;
 
 import * as styles from './popover-menu.scss';
 
-interface PopoverMenuItemData {
-  testId: string;
-  label: string;
-  onClick: () => void;
-  isDisabled?: boolean;
-}
-
 interface PopoverMenuProps {
   moreOptionsLabel?: string;
   eventManager?: any;
@@ -42,23 +36,25 @@ class PopoverMenu extends Component<PopoverMenuProps, PopoverMenuState> {
 
   constructor(props: PopoverMenuProps) {
     super(props);
-    this.state = {isOpen: false};
+    this.state = {
+      isOpen: false
+    };
 
-    this.props.eventManager?.listen(document, 'click', this.handleMouseEvent);
-    this.props.eventManager?.listen(document, 'keydown', this.handleKeydownEvent);
+    this.props.eventManager?.listen(document, 'click', this._handleMouseEvent);
+    this.props.eventManager?.listen(document, 'keydown', this._handleKeydownEvent);
   }
 
   componentWillUnmount() {
     this._itemsRefMap = new Map();
   }
 
-  private handleMouseEvent = (event: MouseEvent) => {
+  private _handleMouseEvent = (event: MouseEvent) => {
     if (!this._controlElementRef?.contains(event.target as Node | null)) {
-      this.closePopover();
+      this._closePopover();
     }
   };
 
-  private handleKeydownEvent = (event: KeyboardEvent) => {
+  private _handleKeydownEvent = (event: KeyboardEvent) => {
     const eventTarget = event.target as Node | null;
     if (
       this.state.isOpen &&
@@ -67,7 +63,7 @@ class PopoverMenu extends Component<PopoverMenuProps, PopoverMenuState> {
       !this._popoverElementRef?.contains(eventTarget) &&
       eventTarget !== this._controlElementRef
     ) {
-      this.closePopover();
+      this._closePopover();
     }
   };
 
@@ -79,11 +75,11 @@ class PopoverMenu extends Component<PopoverMenuProps, PopoverMenuState> {
     this._getItemRef(currentIndex + 1)?.focus();
   };
 
-  private closePopover() {
+  private _closePopover() {
     this.setState({isOpen: false});
   }
 
-  private togglePopover = () => {
+  private _togglePopover = () => {
     const isOpen = !this.state.isOpen;
 
     this.setState({isOpen}, () => {
@@ -117,7 +113,7 @@ class PopoverMenu extends Component<PopoverMenuProps, PopoverMenuState> {
         <A11yWrapper
           onClick={e => {
             e.stopPropagation();
-            this.togglePopover();
+            this._togglePopover();
           }}>
           <div
             tabIndex={0}
@@ -143,41 +139,22 @@ class PopoverMenu extends Component<PopoverMenuProps, PopoverMenuState> {
             this._popoverElementRef = node;
           }}>
           {this.state.isOpen
-            ? items.map(({label, onClick, testId, isDisabled}, index) => {
-                return (
-                  <A11yWrapper
-                    role="menuitem"
-                    onClick={() => {
-                      if (!isDisabled) {
-                        this.closePopover();
-                        onClick();
-                      }
-                    }}
-                    onDownKeyPressed={() => {
-                      if (!isDisabled) {
-                        this._handleDownKeyPressed(index);
-                      }
-                    }}
-                    onUpKeyPressed={() => {
-                      if (!isDisabled) {
-                        this._handleUpKeyPressed(index);
-                      }
-                    }}>
-                    {
-                      <div
-                        tabIndex={isDisabled ? -1 : 0}
-                        role="menuitem"
-                        className={`${styles.popoverMenuItem} ${isDisabled ? styles.popoverMenuItemDisabled : ''}`}
-                        data-testid={testId}
-                        ref={node => {
-                          this._setItemRef(index, node);
-                        }}>
-                        {label}
-                      </div>
+            ? items.map((item, index) => (
+                <PopoverMenuItem
+                  key={index}
+                  item={item}
+                  index={index}
+                  onKeyDown={this._handleDownKeyPressed}
+                  onKeyUp={this._handleUpKeyPressed}
+                  setRef={this._setItemRef}
+                  onClick={() => {
+                    this._closePopover();
+                    if (!item.items) {
+                      item.onClick?.();
                     }
-                  </A11yWrapper>
-                );
-              })
+                  }}
+                />
+              ))
             : null}
         </div>
       </div>

package/src/components/search/search.tsx

@@ -41,7 +41,7 @@ export interface SearchProps {
   prevMatchLabel?: string;
   searchResultsLabel?: string;
   eventManager?: any
-  focusPluginButton: () => void;
+  focusPluginButton: (event: KeyboardEvent) => void;
   player?: any;
 }
 
@@ -52,15 +52,19 @@ class SearchComponent extends Component<SearchProps> {
 
   constructor(props: SearchProps) {
     super(props);
-    this.props.eventManager?.listen(this.props.player, this.props.player.Event.FIRST_PLAY, () => {
+    if (this.props.player._firstPlay){
+      this.props.eventManager?.listen(this.props.player, this.props.player.Event.FIRST_PLAY, () => {
+        this.props.eventManager?.listen(document, 'keydown', this.handleKeydownEvent);
+      })
+    } else {
       this.props.eventManager?.listen(document, 'keydown', this.handleKeydownEvent);
-    })
+    }
   }
 
   private handleKeydownEvent = (event: KeyboardEvent) => {
     if (event.keyCode === TAB && event.shiftKey && document.activeElement === this._inputField?.base?.childNodes[0]){
-      event.preventDefault();
-      this.props.focusPluginButton();
+      //@ts-ignore
+      this.props.focusPluginButton(event);
     }
   };
 

package/src/components/transcript/transcript.tsx

@@ -1,5 +1,5 @@
 import {h, Component} from 'preact';
-import {ui} from '@playkit-js/kaltura-player-js';
+import {ui, core} from '@playkit-js/kaltura-player-js';
 import {debounce} from '../../utils';
 import * as styles from './transcript.scss';
 import {Spinner} from '../spinner';
@@ -70,7 +70,9 @@ export interface TranscriptProps {
   isMobile?: boolean;
   playerWidth?: number;
   onJumpToSearchMatch: () => void;
-  focusPluginButton: () => void;
+  focusPluginButton: (event: KeyboardEvent) => void;
+  textTracks: Array<core.TextTrack>;
+  changeLanguage: (textTrack: core.TextTrack) => void;
 }
 
 interface TranscriptState {
@@ -303,7 +305,9 @@ export class Transcript extends Component<TranscriptProps, TranscriptState> {
       attachTranscript,
       detachTranscript,
       onAttach,
-      onDetach
+      onDetach,
+      textTracks,
+      changeLanguage
     } = this.props;
     const {search, activeSearchIndex, totalSearchResults} = this.state;
 
@@ -329,7 +333,9 @@ export class Transcript extends Component<TranscriptProps, TranscriptState> {
           focusPluginButton={this.props.focusPluginButton}
         />
         {this._renderJumpToSearchButton()}
-        <TranscriptMenu {...{downloadDisabled, onDownload, printDisabled, onPrint, isLoading, detachMenuItem, kitchenSinkDetached}} />
+        <TranscriptMenu
+          {...{downloadDisabled, onDownload, printDisabled, onPrint, isLoading, detachMenuItem, kitchenSinkDetached, textTracks, changeLanguage}}
+        />
         {!detachMenuItem && this._renderDetachButton()}
         {!kitchenSinkDetached && (
           <div data-testid="transcriptCloseButton">

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

@@ -1,6 +1,8 @@
 import {Component, h} from 'preact';
+import {core} from '@playkit-js/kaltura-player-js';
 import {PopoverMenu} from '../popover-menu';
 import {PopoverMenuItemData} from '../popover-menu';
+import {capitalizeFirstLetter} from '../../utils';
 
 import {Button, ButtonType} from '@playkit-js/common/dist/components/button';
 const {withText, Text} = KalturaPlayer.ui.preacti18n;
@@ -15,6 +17,8 @@ interface TranscriptMenuProps {
   printDisabled?: boolean;
   isLoading?: boolean;
   kitchenSinkDetached: boolean;
+  textTracks: Array<core.TextTrack>;
+  changeLanguage: (textTrack: core.TextTrack) => void;
   detachMenuItem?: {
     testId: string;
     label: string;
@@ -45,10 +49,28 @@ class TranscriptMenu extends Component<TranscriptMenuProps, TranscriptMenuState>
       downloadTranscript,
       isLoading,
       detachMenuItem,
-      kitchenSinkDetached
+      kitchenSinkDetached,
+      textTracks,
+      changeLanguage
     } = this.props;
     const items = [];
 
+    if (textTracks?.length > 1) {
+      const activeTextTrack = textTracks.find(track => track.active);
+      items.push({
+        testId: 'language-change-menu-item-active',
+        label: capitalizeFirstLetter(activeTextTrack?.label!),
+        isDisabled: isLoading,
+        items: textTracks.map(track => ({
+          testId: `language-change-menu-item-${track.label}`,
+          label: capitalizeFirstLetter(track.label!),
+          isDisabled: isLoading,
+          isSelected: activeTextTrack?.label === track.label,
+          onClick: () => changeLanguage(track)
+        }))
+      });
+    }
+
     if (detachMenuItem) {
       items.push(detachMenuItem);
     }

package/src/transcript-plugin.tsx

@@ -1,7 +1,7 @@
 import * as sanitizeHtml from 'sanitize-html';
 import {h} from 'preact';
 import {OnClickEvent} from '@playkit-js/common/dist/hoc/a11y-wrapper';
-import {ui} from '@playkit-js/kaltura-player-js';
+import {ui, core} from '@playkit-js/kaltura-player-js';
 import {UpperBarManager, SidePanelsManager} from '@playkit-js/ui-managers';
 import {ObjectUtils, downloadContent, printContent, decodeString} from './utils';
 import {icons} from './components/icons';
@@ -14,7 +14,7 @@ import {AttachPlaceholder} from './components/attach-placeholder';
 
 export const pluginName: string = 'playkit-js-transcript';
 
-const {SidePanelModes, SidePanelPositions, ReservedPresetNames, ReservedPresetAreas} = ui;
+const {SidePanelModes, SidePanelPositions, ReservedPresetNames} = ui;
 const {withText, Text} = KalturaPlayer.ui.preacti18n;
 const {get} = ObjectUtils;
 
@@ -78,6 +78,10 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
     return this._captionMap.get(this._activeCaptionMapId) || [];
   }
 
+  private get _state() {
+    return ui.redux.useStore().getState();
+  }
+
   loadMedia(): void {
     if (!this.cuePointManager || !this.sidePanelsManager || !this.upperBarManager) {
       this.logger.warn("kalturaCuepoints, sidePanelsManager or upperBarManager haven't registered");
@@ -285,6 +289,12 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
     this.dispatchEvent(TranscriptEvents.TRANSCRIPT_TO_SEARCH_MATCH);
   };
 
+  private _changeLanguage = (textTrack: core.TextTrack) => {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error - Property 'selectTrack' does not exist on type 'Player'
+    this.player.selectTrack(textTrack);
+  };
+
   private _addTranscriptItem(): void {
     if (Math.max(this._transcriptPanel, this._transcriptIcon, this._audioPlayerIconId) > 0) {
       // transcript panel or icon already exist
@@ -336,11 +346,15 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
             }}
             onJumpToSearchMatch={this._toSearchMatch}
             //@ts-ignore
-            focusPluginButton={() => this.upperBarManager!.focusPluginButton(this._transcriptIcon)}
+            focusPluginButton={(event: KeyboardEvent) => this.upperBarManager!.focusPluginButton(this._transcriptIcon, event)}
+            textTracks={this._getTextTracks()}
+            changeLanguage={this._changeLanguage}
           />
         ) as any;
       },
-      presets: [ReservedPresetNames.Playback, ReservedPresetNames.Live, ReservedPresetNames.Ads, 'MiniAudioUI'],
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-expect-error - Property 'MiniAudioUI' does not exist
+      presets: [ReservedPresetNames.Playback, ReservedPresetNames.Live, ReservedPresetNames.Ads, ReservedPresetNames.MiniAudioUI],
       position: position,
       expandMode: expandMode === SidePanelModes.ALONGSIDE ? SidePanelModes.ALONGSIDE : SidePanelModes.OVER
     }) as number;
@@ -348,11 +362,10 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
       showTranscript: <Text id="transcript.show_plugin">Show Transcript</Text>,
       hideTranscript: <Text id="transcript.hide_plugin">Hide Transcript</Text>
     };
-    // @ts-ignore
-    if (ui.redux.useStore().getState().shell['activePresetName'] !== ReservedPresetNames.MiniAudioUI) {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error - Property 'MiniAudioUI' does not exist
+    if (this._state.shell['activePresetName'] !== ReservedPresetNames.MiniAudioUI) {
       this._transcriptIcon = this.upperBarManager!.add({
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
         displayName: 'Transcript',
         ariaLabel: 'Transcript',
         order: 30,

package/src/utils/utils.ts

@@ -116,3 +116,7 @@ export function printContent(content: string): void {
     printWindow.close();
   }
 }
+
+export function capitalizeFirstLetter(string: string): string {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}