@playkit-js/transcript 3.7.11 → 3.7.12-canary.0-e2073db

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@playkit-js/transcript",
-  "version": "3.7.11",
+  "version": "3.7.12-canary.0-e2073db",
   "main": "dist/playkit-transcript.js",
   "license": "AGPL-3.0",
   "private": false,

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

@@ -153,6 +153,14 @@ class PopoverMenu extends Component<PopoverMenuProps, PopoverMenuState> {
       const padding = 14;
       popOverHeight = popOverMenuHeight - neededHeight <= 0 ? popOverMenuHeight - padding : neededHeight - padding;
     }
+    let popoverStyle = {};
+    if (shouldUseCalculatedHeight) {
+      if (kitchenSinkDetached) {
+        popoverStyle = { height: `${popOverHeight}px` };
+      } else {
+        popoverStyle = { height: `${popOverHeight}px`, overflowY: 'auto' };
+      }
+    }
 
     const popoverMenuContent = (
       <div className={styles.popoverContainer}>
@@ -179,7 +187,7 @@ class PopoverMenu extends Component<PopoverMenuProps, PopoverMenuState> {
         <div
           className={styles.popoverComponent}
           onKeyUp={this._handleKeyupEvent}
-          style={shouldUseCalculatedHeight ? {height: `${popOverHeight}px`, overflowY: 'auto'} : {}}
+          style={popoverStyle}
           role="menu"
           aria-expanded={this.state.isOpen}
           id="popoverContent"

package/src/components/popover-overlay/index.ts

@@ -0,0 +1,2 @@
+import {PopoverOverlay} from './popover-overlay';
+export {PopoverOverlay};

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

@@ -0,0 +1,94 @@
+@import './variables.scss';
+
+.popoverOverlayContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  padding: 2rem 2rem;
+  flex-wrap: wrap;
+  overflow-x: hidden; 
+
+  .overlayTitle {
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 20px;
+    margin-bottom: 42px;
+    margin-top: 0;
+    font-family: 'Lato', sans-serif;
+  }
+
+  .languageSelector {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    width: 100%;
+    max-width: 340px;
+    padding: 0.5rem 0;
+
+    svg {
+      width: 24px;
+      height: 24px;
+    }
+
+    label {
+      font-size: 14px;
+      font-weight: 400;
+      color: $tone-1-color;
+    }
+
+    select {
+      margin-left: auto;
+      width: auto;
+      text-align: right;
+      font-size: 14px;
+      font-weight: 400;
+      font-family: 'Lato', sans-serif;
+      line-height: 18px;
+      cursor: pointer;
+      outline: none;
+
+      option {
+        color: #000;
+      }
+    }
+  }
+
+  .actionButtons {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    max-width: 340px;
+    text-align: left;
+
+    button {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      background: none;
+      border: none;
+      font-size: 14px;
+      font-weight: 400;
+      font-family: 'Lato', sans-serif;
+      line-height: 18px;
+      color: $tone-1-color;
+      padding: 0.5rem 0;
+      cursor: pointer;
+      text-align: left;
+      width: 100%;
+
+      span {
+        flex-grow: 1;
+        text-align: left;
+      }
+    }
+  }
+  &.compact {
+    padding: 4px;
+    .overlayTitle{
+      margin-bottom: 16px;
+    }
+  }
+}

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

@@ -0,0 +1,192 @@
+import { h, Component, createRef } from 'preact';
+import { createPortal } from 'preact/compat';
+import { ui } from '@playkit-js/kaltura-player-js';
+import {Icon, IconSize} from '@playkit-js/common/dist/icon';
+import { PopoverMenuItemData } from '../popover-menu/popover-menu-item';
+import * as styles from '../popover-overlay/popover-overlay.scss';
+// @ts-ignore
+const {withKeyboardA11y} = KalturaPlayer.ui.utils
+const { Overlay } = KalturaPlayer.ui.components;
+const { getOverlayPortalElement } = ui;
+const { withText, Text } = ui.preacti18n;
+const {PLAYER_BREAK_POINTS} = ui.Components;
+const focusableElements = 'select, button, [href], input:not([type="hidden"]), textarea, [tabindex]:not([tabindex="-1"])';
+
+const translates = {
+  moreOptionsLabel: <Text id="transcript.more_options">More transcript options</Text>,
+  languageSelectorLabel: <Text id="transcript.transcript">Transcript</Text>
+};
+
+interface PopoverOverlayProps {
+  player: any;
+  isOpen: boolean;
+  onClose: () => void;
+  items: Array<PopoverMenuItemData>;
+  textTracks: Array<any>;
+  changeLanguage: (track: any) => void;
+  playerSize?: number;
+  moreOptionsLabel?: preact.VNode;
+  handleKeyDown?: (e: KeyboardEvent) => void;
+  addAccessibleChild?: (element: HTMLElement, pushToBeginning?: boolean) => void;
+  setIsModal?: (isModal: boolean) => void;
+}
+
+
+const COMPACT_SIZES = [
+  PLAYER_BREAK_POINTS.TINY,
+  PLAYER_BREAK_POINTS.EXTRA_SMALL,
+  PLAYER_BREAK_POINTS.SMALL
+];
+
+const iconsMap: Record<string, string> = {
+  'transcript-detach-attach-button': 'detach',
+  'download-menu-item': 'download',
+  'print-menu-item': 'print'
+};
+
+interface TranscriptLanguageSelectorProps {
+  textTracks: Array<any>;
+  changeLanguage: (track: any) => void;
+}
+
+const TranscriptLanguageSelector = ({ textTracks, changeLanguage }: TranscriptLanguageSelectorProps) => {
+  // Filter out metadata tracks
+  const selectableTracks = (textTracks || []).filter(track => track.kind !== 'metadata');
+  
+  if (selectableTracks.length <= 1) return null;
+
+  return (
+    <div className={styles.languageSelector}>
+      <Icon name="transcript" size={IconSize.medium} />
+      <label htmlFor="transcript-language">{translates.languageSelectorLabel}</label>
+      <select
+        id="transcript-language"
+        value={selectableTracks.findIndex(track => track.active)}
+        onChange={(e) => {
+          const selectedIdx = Number((e.target as HTMLSelectElement).value);
+          changeLanguage(selectableTracks[selectedIdx]);
+        }}
+        onFocus={(e) => e.currentTarget.classList.add(styles.open)}
+        onBlur={(e) => e.currentTarget.classList.remove(styles.open)}
+      >
+        {selectableTracks.map((track, idx) => (
+          <option key={idx} value={idx}>
+            {track.label}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+};
+
+interface OverlayActionItemProps {
+  item: PopoverMenuItemData;
+}
+
+const OverlayActionItem = ({ item }: OverlayActionItemProps) => {
+  const iconName = iconsMap[item.testId];
+  if (!iconName || item.items) return null;
+
+  return (
+    <button
+      data-testid={item.testId}
+      disabled={item.isDisabled}
+      onClick={() => item.onClick?.()}
+    >
+      <Icon name={iconName} size={IconSize.medium} />
+      <span>{item.label}</span>
+    </button>
+  );
+};
+
+
+@withKeyboardA11y
+@withText(translates)
+export class PopoverOverlay extends Component<PopoverOverlayProps> {
+  private _containerRef = createRef<HTMLDivElement>();
+  private _focusablesRegistered = false;
+
+  private _focusFirstItem() {
+    const container = this._containerRef.current;
+    if (!container) return;
+    const focusable = container.querySelector<HTMLElement>(focusableElements);
+    focusable?.focus();
+  }
+
+  componentDidMount() {
+    this.props.setIsModal?.(true);
+  }
+
+  componentDidUpdate(prevProps: PopoverOverlayProps) {
+    if (!prevProps.isOpen && this.props.isOpen) this._focusFirstItem();
+    // Register focusable elements when overlay opens
+    if (!prevProps.isOpen && this.props.isOpen) {
+      this._focusablesRegistered = false;
+      this._registerAccessibleChildren();
+    }
+    // If content changed while open, re-register once
+    if (this.props.isOpen && !this._focusablesRegistered && (prevProps.items !== this.props.items || prevProps.textTracks !== this.props.textTracks)) {
+      this._registerAccessibleChildren();
+    }
+    if (prevProps.isOpen && !this.props.isOpen) {
+      this._focusablesRegistered = false;
+    }
+  }
+
+  componentWillUnmount() {
+    this.props.setIsModal?.(false);
+  }
+
+  private _getFocusableElements(): HTMLElement[] {
+    const container = this._containerRef.current;
+    if (!container) return [];
+
+    return Array.from(
+      container.querySelectorAll<HTMLElement>(focusableElements)).filter(el => !el.hasAttribute('disabled') && el.offsetParent !== null);
+  }
+
+  private _registerAccessibleChildren() {
+    const { addAccessibleChild } = this.props;
+    if (!addAccessibleChild || this._focusablesRegistered) return;
+
+    this._getFocusableElements()
+      .reverse()
+      .forEach(el => addAccessibleChild(el, true));
+
+    this._focusablesRegistered = true;
+  }
+
+  render() {
+    const {
+      player,
+      isOpen,
+      onClose,
+      items,
+      textTracks,
+      changeLanguage,
+      playerSize
+    } = this.props;
+
+    if (!isOpen || !player) return null;
+    const overlayRoot = getOverlayPortalElement(player);
+    if (!overlayRoot) return null;
+
+    const isCompact = playerSize !== undefined ? COMPACT_SIZES.includes(playerSize) : false;
+
+    return createPortal(
+      <Overlay open onClose={onClose} ariaLabel={this.props.moreOptionsLabel} handleKeyDown={this.props.handleKeyDown} addAccessibleChild={this.props.addAccessibleChild}>
+        <div data-testid="popover-overlay" ref={this._containerRef}   className={`${styles.popoverOverlayContainer} ${isCompact ? styles.compact : ''}`}>
+          <h3 className={styles.overlayTitle}>{this.props.moreOptionsLabel}</h3>
+          <TranscriptLanguageSelector textTracks={textTracks} changeLanguage={changeLanguage} />
+
+          <div className={styles.actionButtons}>
+            {items.map(item => (
+              <OverlayActionItem key={item.testId} item={item} /> 
+            ))}
+          </div>
+        </div>
+      </Overlay>,
+      overlayRoot
+    );
+  }
+}

package/src/components/transcript/transcript.tsx

@@ -14,6 +14,7 @@ import {Button, ButtonType, ButtonSize} from '@playkit-js/common/dist/components
 import {ScreenReaderProvider} from '@playkit-js/common/dist/hoc/sr-wrapper';
 import {OnClickEvent, OnClick} from '@playkit-js/common/dist/hoc/a11y-wrapper';
 import {TranscriptEvents} from '../../events/events';
+const {withPlayer} = KalturaPlayer.ui.components;
 
 const {ENTER, SPACE, TAB, ESC} = ui.utils.KeyMap;
 const {withText, Text} = ui.preacti18n;
@@ -78,6 +79,9 @@ export interface TranscriptProps {
   textTracks: Array<core.TextTrack>;
   changeLanguage: (textTrack: core.TextTrack) => void;
   sidePanelPosition: string;
+  player: any;
+  onOverlayOpen?: () => void;
+  onOverlayClose?: () => void;
 }
 
 interface TranscriptState {
@@ -110,6 +114,7 @@ const mapStateToProps = (state: any, ownProps: Pick<TranscriptProps, 'expandMode
 // @ts-ignore
 @connect(mapStateToProps)
 @withText(translates)
+@withPlayer
 export class Transcript extends Component<TranscriptProps, TranscriptState> {
   private _transcriptListRef: HTMLElement | null = null;
   private _captionListRef: any = null;
@@ -335,7 +340,9 @@ export class Transcript extends Component<TranscriptProps, TranscriptState> {
       onAttach,
       onDetach,
       textTracks,
-      changeLanguage
+      changeLanguage,
+      isMobile,
+      smallScreen
     } = this.props;
     const {search, activeSearchIndex, totalSearchResults} = this.state;
     const widgetHeight = this._widgetRootRef?.getBoundingClientRect().height;
@@ -382,7 +389,14 @@ export class Transcript extends Component<TranscriptProps, TranscriptState> {
             detachMenuItem,
             kitchenSinkDetached,
             textTracks,
-            changeLanguage
+            changeLanguage,
+            sidePanelPosition,
+            isMobile,
+            smallScreen,
+            player: this.props.player,
+            onOverlayOpen: this.props.onOverlayOpen,
+            onOverlayClose: this.props.onOverlayClose,
+            playerWidth : this.props.playerWidth
           }}
         />
         {!detachMenuItem && this._renderDetachButton()}

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

@@ -1,11 +1,15 @@
-import {Component, h} from 'preact';
-import {core} from '@playkit-js/kaltura-player-js';
+import {Component, h, Fragment, createRef} from 'preact';
+import {core, ui} from '@playkit-js/kaltura-player-js';
 import {PopoverMenu} from '../popover-menu';
 import {PopoverMenuItemData} from '../popover-menu';
+import { PopoverOverlay } from '../popover-overlay';
 import {capitalizeFirstLetter} from '../../utils';
 
 import {Button, ButtonType} from '@playkit-js/common/dist/components/button';
 const {withText, Text} = KalturaPlayer.ui.preacti18n;
+const {SidePanelPositions, getOverlayPortalElement} = ui;
+const {focusElement} = ui.Utils;
+const {PLAYER_BREAK_POINTS} = ui.Components;
 
 interface TranscriptMenuProps {
   shouldUseCalculatedHeight: boolean;
@@ -27,9 +31,16 @@ interface TranscriptMenuProps {
     onClick: () => void;
     isDisabled: boolean;
   } | null;
+  sidePanelPosition: string;
+  isMobile?: boolean;
+  player: any;
+  onOverlayOpen?: () => void;
+  onOverlayClose?: () => void;
+  playerWidth?: number;
 }
 
 interface TranscriptMenuState {
+  isOverlayOpen: boolean;
   items: Array<PopoverMenuItemData>;
 }
 
@@ -41,6 +52,21 @@ const translates = {
 
 @withText(translates)
 class TranscriptMenu extends Component<TranscriptMenuProps, TranscriptMenuState> {
+  private _triggerButtonRef = createRef<HTMLButtonElement>();
+
+  state: TranscriptMenuState = {
+    isOverlayOpen: false,
+    items: []
+  };
+
+  private _focusTriggerButton = () => {
+    const ref = this._triggerButtonRef.current as any;
+    const innerBtn = ref?.base || ref?.buttonRef?.current;
+    if (innerBtn && typeof innerBtn.focus === 'function') {
+      focusElement(innerBtn);
+    }
+  };
+
   render() {
     const {
       shouldUseCalculatedHeight,
@@ -55,9 +81,13 @@ class TranscriptMenu extends Component<TranscriptMenuProps, TranscriptMenuState>
       detachMenuItem,
       kitchenSinkDetached,
       textTracks,
-      changeLanguage
+      changeLanguage,
+      sidePanelPosition,
+      isMobile,
+      playerWidth
     } = this.props;
     const items = [];
+    const { isOverlayOpen } = this.state;
 
     if (textTracks?.length > 1) {
       const activeTextTrack = textTracks.find(track => track.active);
@@ -96,6 +126,40 @@ class TranscriptMenu extends Component<TranscriptMenuProps, TranscriptMenuState>
         isDisabled: isLoading
       });
     }
+    const isSmallPlayer = playerWidth! <= PLAYER_BREAK_POINTS.SMALL;
+    const shouldUseOverlay = !kitchenSinkDetached && (sidePanelPosition === SidePanelPositions.BOTTOM || isMobile || isSmallPlayer);
+
+    if (shouldUseOverlay) {
+      return (
+        <Fragment>
+          <Button
+            ref={this._triggerButtonRef}
+            type={ButtonType.borderless}
+            icon="more"
+            ariaLabel={this.props.moreOptionsLabel}
+            onClick={() => {
+              this.props.onOverlayOpen?.();
+              this.setState({ isOverlayOpen: true });
+            }}
+          />
+
+          <PopoverOverlay
+            player={this.props.player}
+            isOpen={isOverlayOpen}
+            items={items}
+            textTracks={this.props.textTracks}
+            changeLanguage={this.props.changeLanguage}
+            playerSize={this.props.playerWidth}
+            onClose={() => {
+              this.setState({ isOverlayOpen: false }, () => {
+                this.props.onOverlayClose?.();
+                this._focusTriggerButton();
+              });
+            }}
+          />
+        </Fragment>
+      );
+    }
 
     return items.length ? (
       <PopoverMenu

package/src/transcript-plugin.tsx

@@ -350,6 +350,9 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
             textTracks={this._getTextTracks()}
             changeLanguage={this._changeLanguage}
             sidePanelPosition={position}
+            player={this.player}
+            onOverlayOpen={() => this.sidePanelsManager?.deactivateItem(this._transcriptPanel)}
+            onOverlayClose={() => this.sidePanelsManager?.activateItem(this._transcriptPanel)}
           />
         ) as any;
       },