@playkit-js/transcript 3.4.4 → 3.5.0-canary.0-3275484

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@playkit-js/transcript",
-  "version": "3.4.4",
+  "version": "3.5.0-canary.0-3275484",
   "main": "dist/playkit-transcript.js",
   "license": "AGPL-3.0",
   "private": false,
@@ -74,7 +74,7 @@
     "html5 player"
   ],
   "dependencies": {
-    "@playkit-js/common": "^1.2.10",
+    "@playkit-js/common": "^1.2.13",
     "@playkit-js/playkit-js-ui": "^0.77.3",
     "@playkit-js/ui-managers": "^1.3.11",
     "stream-browserify": "^3.0.0"

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

@@ -11,11 +11,6 @@
 
 .autoscroll-button {
   opacity: 0;
-  border-radius: $roundness-1;
-  border: none;
-  box-shadow: 0px 1px 0.75px rgba(0, 0, 0, 0.42), 0px 1px 0.5px rgba(0, 0, 0, 0.25), 0px 2px 3px rgba(0, 0, 0, 0.2);
-  background-color: $primary-darker-color;
-  cursor: pointer;
   z-index: 1;
   &.autoscroll-button-visible {
     opacity: 1;

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

@@ -1,10 +1,9 @@
 import {h} from 'preact';
 import * as styles from './autoscroll-button.scss';
-import {A11yWrapper, OnClick} from '@playkit-js/common/dist/hoc/a11y-wrapper';
-import {AutoScrollIcon} from "./AutoScrollIcon";
+import {OnClick} from '@playkit-js/common/dist/hoc/a11y-wrapper';
+import {Button, ButtonType} from '@playkit-js/common/dist/components/button';
 
 const {withText, Text} = KalturaPlayer.ui.preacti18n;
-const {Tooltip} = KalturaPlayer.ui.components;
 
 interface AutoscrollButtonProps {
   onClick: OnClick;
@@ -21,15 +20,14 @@ export const AutoscrollButton = withText(translates)(
   ({onClick, isAutoScrollEnabled, setAutoscrollButtonRef, autoScrollLabel}: AutoscrollButtonProps) => {
     return (
       <div className={styles.autoscrollRoot} tabIndex={isAutoScrollEnabled ? -1 : 1} aria-label={autoScrollLabel}>
-        <Tooltip label={autoScrollLabel} type="left">
-          <A11yWrapper onClick={onClick}>
-            <button
-              className={`${styles.autoscrollButton} ${isAutoScrollEnabled ? '' : styles.autoscrollButtonVisible}`}
-              ref={setAutoscrollButtonRef}>
-              <AutoScrollIcon/>
-            </button>
-          </A11yWrapper>
-        </Tooltip>
+        <Button
+          onClick={onClick}
+          setRef={setAutoscrollButtonRef}
+          className={`${styles.autoscrollButton} ${isAutoScrollEnabled ? '' : styles.autoscrollButtonVisible}`}
+          type={ButtonType.primary}
+          icon="autoScroll"
+          tooltip={{label: autoScrollLabel!, type: 'left'}}
+        />
       </div>
     );
   }

package/src/components/caption/caption.scss

@@ -7,6 +7,7 @@
   margin-bottom: 9px;
   margin-left: 8px;
   color: $tone-1-color;
+  cursor: pointer;
   .caption-time {
     flex-shrink: 1;
     min-width: 48px;
@@ -48,7 +49,6 @@
       user-select: text;
       -ms-user-select: text;
       border-radius: 2px;
-      cursor: pointer;
       &::selection {
         background-color: $primary-brighter-color;
         padding: 0 2px;

package/src/components/caption/caption.tsx

@@ -1,6 +1,6 @@
 import {Component, h} from 'preact';
 import {A11yWrapper, OnClickEvent} from '@playkit-js/common/dist/hoc/a11y-wrapper';
-import {secontsToTime} from '../../utils';
+import {secondsToTime} from '../../utils';
 import {CuePointData} from '../../types';
 import * as styles from './caption.scss';
 
@@ -24,15 +24,9 @@ interface ExtendedCaptionProps extends CaptionProps {
   isAutoScrollEnabled: boolean;
 }
 
-interface CaptionState {
-  focused: boolean;
-}
-
-export class Caption extends Component<ExtendedCaptionProps, CaptionState> {
+export class Caption extends Component<ExtendedCaptionProps> {
   private _hotspotRef: HTMLElement | null = null;
 
-  state = {focused: false};
-
   componentDidUpdate() {
     if (this._hotspotRef && this.props.shouldScroll) {
       this.props.scrollTo(this._hotspotRef);
@@ -41,12 +35,12 @@ export class Caption extends Component<ExtendedCaptionProps, CaptionState> {
     }
   }
 
-  shouldComponentUpdate(nextProps: ExtendedCaptionProps, nextState: CaptionState) {
-    const {indexMap, highlighted, isAutoScrollEnabled, activeSearchIndex, longerThanHour, caption} = this.props;
+  shouldComponentUpdate(nextProps: ExtendedCaptionProps) {
+    const {indexMap, highlighted, isAutoScrollEnabled, activeSearchIndex, longerThanHour} = this.props;
     if (longerThanHour !== nextProps.longerThanHour) {
       return true;
     }
-    if (highlighted !== nextProps.highlighted || this.state.focused !== nextState.focused) {
+    if (highlighted !== nextProps.highlighted) {
       return true;
     }
     if (highlighted && isAutoScrollEnabled !== nextProps.isAutoScrollEnabled) {
@@ -61,16 +55,7 @@ export class Caption extends Component<ExtendedCaptionProps, CaptionState> {
     return false;
   }
 
-  private _handleKeyDown = (event: OnClickEvent, byKeyboard?: boolean) => {
-    if (byKeyboard) {
-      event.preventDefault();
-      this._gotoCurrentTime();
-    }
-  };
-
-  private _handleClick = (event: MouseEvent) => {
-    event.stopPropagation();
-    this._hotspotRef?.focus();
+  private _handleClick = () => {
     this._gotoCurrentTime();
   };
 
@@ -113,42 +98,34 @@ export class Caption extends Component<ExtendedCaptionProps, CaptionState> {
     );
   };
 
-  private _handleFocus = () => {
-    this.setState({
-      focused: true
-    });
-  };
-
-  private _handleBlur = () => {
-    this.setState({
-      focused: false
-    });
-  };
-
   render() {
     const {caption, highlighted, showTime, longerThanHour} = this.props;
     const {startTime, id} = caption;
     const isHighlighted = Object.keys(highlighted)[0] === id;
+    const time = showTime ? secondsToTime(startTime, longerThanHour) : '';
 
     const captionA11yProps: Record<string, any> = {
       ariaCurrent: isHighlighted,
-      onFocus: this._handleFocus,
-      onBlur: this._handleBlur,
       tabIndex: 0,
-      ariaHidden: !(isHighlighted || this.state.focused)
+      ariaLabel: `${time}${showTime ? ' ' : ''}${caption.text}`,
+      role: 'button'
     };
 
     return (
-      <A11yWrapper onClick={this._handleKeyDown} role={isHighlighted ? 'text' : 'listitem'}>
+      <A11yWrapper onClick={this._handleClick}>
         <div
           className={styles.caption}
           ref={node => {
             this._hotspotRef = node;
           }}
           {...captionA11yProps}>
-          {showTime && <div className={styles.captionTime}>{secontsToTime(startTime, longerThanHour)}</div>}
+          {showTime && (
+            <div className={styles.captionTime} aria-hidden="true">
+              {time}
+            </div>
+          )}
           <div
-            onClick={this._handleClick}
+            aria-hidden="true"
             className={`${styles.captionContent} ${isHighlighted ? styles.highlighted : ''} ${showTime ? '' : styles.withoutTime}`}>
             {this._renderText(caption.text)}
           </div>

package/src/components/small-screen-slate/index.ts

@@ -0,0 +1 @@
+export * from "./small-screen-slate";

package/src/components/small-screen-slate/small-screen-slate.scss

@@ -0,0 +1,28 @@
+.smallScreenWrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  margin-top: -8px;
+  margin-right: -2px;
+  display: flex;
+  align-items: center;
+  .closeButton {
+    position: absolute;
+    right: 6px;
+    top: 0px;
+  }
+  .contentWrapper {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    .textContent {
+      margin-top: 8px;
+      font-size: 18px;
+      font-style: normal;
+      font-weight: 700;
+      line-height: 20px;
+    }
+  }
+}

package/src/components/small-screen-slate/small-screen-slate.tsx

@@ -0,0 +1,70 @@
+import {h, Component} from 'preact';
+import {OnClick} from '@playkit-js/common/dist/hoc/a11y-wrapper';
+import {Button, ButtonType, ButtonSize} from '@playkit-js/common/dist/components/button';
+import {Icon, IconSize} from '@playkit-js/common/dist/icon';
+import {ui} from '@playkit-js/kaltura-player-js';
+// @ts-ignore
+const {withPlayer} = ui.Components;
+const {connect} = ui.redux;
+const {withText, Text} = ui.preacti18n;
+import * as styles from './small-screen-slate.scss';
+
+const mapStateToProps = (state: any) => ({
+  isMobile: state.shell.isMobile
+});
+
+interface SmallScreenSlateProps {
+  isMobile?: boolean;
+  toggledWithEnter?: boolean;
+  smallScreenText?: string;
+  smallScreenMobileText?: string;
+  hideTranscript?: string;
+  player?: any;
+  onClose: OnClick;
+}
+
+const translates = {
+  smallScreenText: <Text id="transcript.small_screen">To see the transcript, go to full screen</Text>,
+  smallScreenMobileText: <Text id="transcript.small_screen_mobile">To see the transcript, rotate the phone</Text>,
+  hideTranscript: <Text id="transcript.hide_plugin">Hide Transcript</Text>
+};
+
+@withText(translates)
+@withPlayer
+// @ts-ignore
+@connect(mapStateToProps)
+export class SmallScreenSlate extends Component<SmallScreenSlateProps> {
+  render() {
+    const {isMobile, smallScreenMobileText, smallScreenText, onClose, toggledWithEnter, player, hideTranscript} = this.props;
+    return (
+      <div className={styles.smallScreenWrapper} data-testid="transcript_smallScreenWrapper">
+        <Button
+          icon={'close'}
+          onClick={onClose}
+          type={ButtonType.borderless}
+          focusOnMount={toggledWithEnter}
+          className={styles.closeButton}
+          ariaLabel={hideTranscript}
+          testId="transcript_smallScreenClose"
+        />
+        <div className={styles.contentWrapper}>
+          {isMobile ? (
+            <Icon name={'screenRotation'} size={IconSize.large} />
+          ) : (
+            <Button
+              icon={'expand'}
+              onClick={() => player?.enterFullscreen()}
+              type={ButtonType.borderless}
+              size={ButtonSize.medium}
+              ariaLabel={smallScreenText}
+              testId="transcript_smallScreenFullscreen"
+            />
+          )}
+          <div className={styles.textContent} data-testid="transcript_smallScreenTextContent">
+            {isMobile ? smallScreenMobileText : smallScreenText}
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

package/src/components/transcript/transcript.tsx

@@ -1,4 +1,5 @@
 import {h, Component} from 'preact';
+import {ui} from '@playkit-js/kaltura-player-js';
 import {debounce} from '../../utils';
 import * as styles from './transcript.scss';
 import {Spinner} from '../spinner';
@@ -8,12 +9,16 @@ import {HighlightedMap, CuePointData} from '../../types';
 import {ErrorIcon} from './error-icon';
 import {AutoscrollButton} from '../autoscroll-button';
 import {TranscriptMenu} from '../transcript-menu';
-
+import {SmallScreenSlate} from '../small-screen-slate';
 import {Button, ButtonType, ButtonSize} from '@playkit-js/common/dist/components/button';
 import {OnClickEvent, OnClick} from '@playkit-js/common/dist/hoc/a11y-wrapper';
 
-const {ENTER, SPACE, TAB, ESC} = KalturaPlayer.ui.utils.KeyMap;
-const {withText, Text} = KalturaPlayer.ui.preacti18n;
+const {ENTER, SPACE, TAB, ESC} = ui.utils.KeyMap;
+const {withText, Text} = ui.preacti18n;
+
+const {SidePanelModes} = ui;
+const {PLAYER_BREAK_POINTS} = ui.Components;
+const {connect} = ui.redux;
 
 const translates = {
   skipTranscript: <Text id="transcript.skip_transcript">Skip transcript</Text>,
@@ -45,6 +50,8 @@ export interface TranscriptProps {
   onDownload: () => void;
   printDisabled: boolean;
   onPrint: () => void;
+  smallScreen?: boolean;
+  expandMode?: string;
 }
 
 interface TranscriptState {
@@ -67,6 +74,12 @@ const initialSearch = {
 
 const SEARCHBAR_HEIGHT = 38; // height of search bar with margins
 
+const mapStateToProps = (state: any, ownProps: Pick<TranscriptProps, 'expandMode'>) => ({
+  smallScreen: ownProps.expandMode === SidePanelModes.ALONGSIDE && state.shell.playerClientRect?.width < PLAYER_BREAK_POINTS.SMALL
+});
+
+// @ts-ignore
+@connect(mapStateToProps)
 @withText(translates)
 export class Transcript extends Component<TranscriptProps, TranscriptState> {
   private _transcriptListRef: HTMLElement | null = null;
@@ -364,7 +377,7 @@ export class Transcript extends Component<TranscriptProps, TranscriptState> {
   };
 
   render(props: TranscriptProps) {
-    const {isLoading, kitchenSinkActive, hasError} = props;
+    const {isLoading, kitchenSinkActive, hasError, smallScreen, toggledWithEnter} = props;
     const renderTranscriptButtons = !(isLoading || hasError);
     return (
       <div
@@ -374,21 +387,25 @@ export class Transcript extends Component<TranscriptProps, TranscriptState> {
         }}
         onKeyUp={this._handleEsc}
         data-testid="transcript_root">
-        <div className={styles.globalContainer}>
-          {this._renderHeader()}
-
-          {renderTranscriptButtons && this._renderSkipTranscriptButton()}
-          <div
-            className={styles.body}
-            onScroll={this._onScroll}
-            ref={node => {
-              this._transcriptListRef = node;
-            }}
-            data-testid="transcript_list">
-            {isLoading ? this._renderLoading() : this._renderTranscript()}
+        {smallScreen ? (
+          <SmallScreenSlate onClose={this.props.onClose} toggledWithEnter={toggledWithEnter} />
+        ) : (
+          <div className={styles.globalContainer}>
+            {this._renderHeader()}
+
+            {renderTranscriptButtons && this._renderSkipTranscriptButton()}
+            <div
+              className={styles.body}
+              onScroll={this._onScroll}
+              ref={node => {
+                this._transcriptListRef = node;
+              }}
+              data-testid="transcript_list">
+              {isLoading ? this._renderLoading() : this._renderTranscript()}
+            </div>
+            {renderTranscriptButtons && this._renderScrollToButton()}
           </div>
-          {renderTranscriptButtons && this._renderScrollToButton()}
-        </div>
+        )}
       </div>
     );
   }

package/src/transcript-plugin.tsx

@@ -228,6 +228,7 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
             highlightedMap={this._activeCuePointsMap}
             onSeek={this._seekTo}
             onItemClicked={this._seekTo}
+            expandMode={this.config.expandMode}
             captions={this._data}
             isLoading={this._isLoading}
             hasError={this._hasError}

package/src/utils/utils.ts

@@ -32,7 +32,7 @@ const makeHoursString = (seconds: number): string => {
   return '';
 };
 
-export const secontsToTime = (seconds: number, longerThanHour: boolean): string => {
+export const secondsToTime = (seconds: number, longerThanHour: boolean): string => {
   const date = new Date(0);
   date.setSeconds(seconds);
   return `${longerThanHour ? makeHoursString(seconds) : ''}${pad(date.getUTCMinutes())}:${pad(date.getUTCSeconds())}`;

package/translations/en.i18n.json

@@ -14,7 +14,9 @@
       "auto_scroll": "Resume AutoScroll",
       "whoops": "Whoops!",
       "load_failed": "Failed to load transcript",
-      "skip_transcript": "Skip transcript"
+      "skip_transcript": "Skip transcript",
+      "smallScreenText": "To see the transcript, go to full screen",
+      "smallScreenMobileText": "To see the transcript, rotate the phone"
     }
   }
 }

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

@@ -1,15 +0,0 @@
-import { h } from 'preact';
-
-export const AutoScrollIcon = () => (
-  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path
-      d="M6.29289 15.2929C6.65338 14.9324 7.22061 14.9047 7.6129 15.2097L7.70711 15.2929L12 19.585L16.2929 15.2929C16.6534 14.9324 17.2206 14.9047 17.6129 15.2097L17.7071 15.2929C18.0676 15.6534 18.0953 16.2206 17.7903 16.6129L17.7071 16.7071L12.7071 21.7071C12.3466 22.0676 11.7794 22.0953 11.3871 21.7903L11.2929 21.7071L6.29289 16.7071C5.90237 16.3166 5.90237 15.6834 6.29289 15.2929Z"
-      fill="white"
-    />
-    <path
-      d="M17.7071 8.70711C17.3466 9.06759 16.7794 9.09532 16.3871 8.7903L16.2929 8.70711L12 4.415L7.70711 8.70711C7.34662 9.06759 6.77939 9.09532 6.3871 8.79029L6.29289 8.70711C5.93241 8.34662 5.90468 7.77939 6.2097 7.3871L6.29289 7.29289L11.2929 2.29289C11.6534 1.93241 12.2206 1.90468 12.6129 2.2097L12.7071 2.29289L17.7071 7.29289C18.0976 7.68342 18.0976 8.31658 17.7071 8.70711Z"
-      fill="white"
-    />
-    <rect x="10" y="10" width="4" height="4" rx="2" fill="white" />
-  </svg>
-);