@playkit-js/transcript 3.6.0-canary.0-ebba9a2 → 3.6.0-canary.0-a940bfb

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@playkit-js/transcript",
-  "version": "3.6.0-canary.0-ebba9a2",
+  "version": "3.6.0-canary.0-a940bfb",
   "main": "dist/playkit-transcript.js",
   "license": "AGPL-3.0",
   "private": false,
@@ -15,7 +15,7 @@
   "devDependencies": {
     "@playkit-js/kaltura-player-js": "3.17.9",
     "@playkit-js/playkit-js-ui": "0.78.0",
-    "@playkit-js/ui-managers": "1.6.0-canary.0-93cb124",
+    "@playkit-js/ui-managers": "1.5.4-canary.0-9261ea6",
     "@types/sanitize-html": "^2.9.3",
     "conventional-github-releaser": "3.1.3",
     "copyfiles": "^2.4.1",

package/src/components/attach-placeholder/attach-placeholder.scss

@@ -1,21 +1,47 @@
 @import '~@playkit-js/playkit-js-ui';
+@import '../../variables.scss';
 
 .attach-placeholder-container {
   position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  .attach-text {
-    line-height: 20px;
-    font-weight: 700;
-    letter-spacing: normal;
-    color: $tone-1-color;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: $plugin-background;
+  .attach-header {
+    position: absolute;
+    top: 16px;
+    left: 0;
+    width: 100%;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 16px;
+    .attach-header-title {
+      font-weight: 700;
+      font-size: 16px;
+      color: $tone-1-color;
+    }  
   }
-  .attach-button {
-    margin-top: 20px;
+  .attach-content {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    .attach-text {
+      line-height: 20px;
+      font-weight: 700;
+      letter-spacing: normal;
+      color: $tone-1-color;
+      text-align: center;
+    }
+    .attach-button {
+      margin-top: 20px;
+    }
   }
 }

package/src/components/attach-placeholder/attach-placeholder.tsx

@@ -1,23 +1,33 @@
 import {h} from 'preact';
 import {ui} from '@playkit-js/kaltura-player-js';
 import {Button, ButtonType, ButtonSize} from '@playkit-js/common/dist/components/button';
+import {OnClickEvent} from '@playkit-js/common/dist/hoc/a11y-wrapper';
 import * as styles from './attach-placeholder.scss';
 
 const {Text} = ui.preacti18n;
 
 interface AttachPlaceholderProps {
   onAttach: () => void;
+  onClose: (e: OnClickEvent, byKeyboard: boolean) => void;
 }
 
-export const AttachPlaceholder = ({onAttach}: AttachPlaceholderProps) => {
+export const AttachPlaceholder = ({onAttach, onClose}: AttachPlaceholderProps) => {
   return (
     <div className={styles.attachPlaceholderContainer} data-testid="transcriptAttachPlaceholder">
-      <div className={styles.attachText}>
-        <Text id="transcript.attachTranscriptText">Transcript popped out</Text>
+      <div className={styles.attachHeader}>
+        <div className={styles.attachHeaderTitle}>
+          <Text id="transcript.transcript">Transcript</Text>
+        </div>
+        <Button type={ButtonType.borderless} size={ButtonSize.medium} icon={'close'} onClick={onClose}/>
+      </div>
+      <div className={styles.attachContent}>
+        <div className={styles.attachText}>
+          <Text id="transcript.attachTranscriptText">Transcript popped out</Text>
+        </div>
+        <Button type={ButtonType.primary} size={ButtonSize.medium} className={styles.attachButton} onClick={onAttach} testId="transcriptAttachButton">
+          <Text id="transcript.attachTranscriptButton">Bring it back</Text>
+        </Button>
       </div>
-      <Button type={ButtonType.primary} size={ButtonSize.medium} className={styles.attachButton} onClick={onAttach} testId="transcriptAttachButton">
-        <Text id="transcript.attachTranscriptButton">Bring it back</Text>
-      </Button>
     </div>
   );
 };

package/src/components/caption/caption.tsx

@@ -101,7 +101,7 @@ export class Caption extends Component<ExtendedCaptionProps> {
   render() {
     const {caption, highlighted, showTime, longerThanHour} = this.props;
     const {startTime, id} = caption;
-    const isHighlighted = Object.keys(highlighted)[0] === id;
+    const isHighlighted = Object.keys(highlighted).some(c => c === id) ;
     const time = showTime ? secondsToTime(startTime, longerThanHour) : '';
 
     const captionA11yProps: Record<string, any> = {

package/src/components/transcript/transcript.scss

@@ -12,10 +12,11 @@
   height: 100%;
   width: 100%;
   position: absolute;
-  background: rgba(0, 0, 0, 0.6);
+  background: $plugin-background;
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   z-index: 1;
+  cursor: default;
   .skip-transcript-button {
     position: absolute;
     top: -1000px;

package/src/components/transcript/transcript.tsx

@@ -64,6 +64,7 @@ export interface TranscriptProps {
   onDetach: () => void;
   onAttach: () => void;
   kitchenSinkDetached: boolean;
+  isMobile?: boolean;
 }
 
 interface TranscriptState {
@@ -88,7 +89,8 @@ const SEARCHBAR_HEIGHT = 38; // height of search bar with margins
 const smallScreen = PLAYER_BREAK_POINTS?.SMALL || 480;
 
 const mapStateToProps = (state: any, ownProps: Pick<TranscriptProps, 'expandMode'>) => ({
-  smallScreen: ownProps.expandMode === SidePanelModes.ALONGSIDE && state.shell.playerClientRect?.width < smallScreen
+  smallScreen: ownProps.expandMode === SidePanelModes.ALONGSIDE && state.shell.playerClientRect?.width < smallScreen,
+  isMobile: state.shell.isMobile
 });
 
 // @ts-ignore
@@ -157,6 +159,25 @@ export class Transcript extends Component<TranscriptProps, TranscriptState> {
     );
   };
 
+  private _renderDetachButton = () => {
+    const {onAttach, onDetach, attachTranscript, detachTranscript, kitchenSinkDetached, isMobile} = this.props;
+    if (isMobile) {
+      return null;
+    }
+    return (
+      <div data-testid="transcriptDetachAttachButton">
+        <Button
+          type={ButtonType.borderless}
+          size={ButtonSize.medium}
+          onClick={kitchenSinkDetached ? onAttach : onDetach}
+          icon={kitchenSinkDetached ? 'attach' : 'detach'}
+          ariaLabel={kitchenSinkDetached ? attachTranscript : detachTranscript}
+          tooltip={{label: kitchenSinkDetached ? attachTranscript! : detachTranscript!}}
+        />
+      </div>
+    );
+  };
+
   private _onSearch = (search: string) => {
     this.setState({search});
   };
@@ -217,20 +238,7 @@ export class Transcript extends Component<TranscriptProps, TranscriptState> {
   };
 
   private _renderHeader = () => {
-    const {
-      toggledWithEnter,
-      kitchenSinkActive,
-      kitchenSinkDetached,
-      downloadDisabled,
-      onDownload,
-      printDisabled,
-      onPrint,
-      isLoading,
-      onAttach,
-      onDetach,
-      attachTranscript,
-      detachTranscript
-    } = this.props;
+    const {toggledWithEnter, kitchenSinkActive, kitchenSinkDetached, downloadDisabled, onDownload, printDisabled, onPrint, isLoading} = this.props;
     const {search, activeSearchIndex, totalSearchResults} = this.state;
     return (
       <div className={[styles.header, this._getHeaderStyles()].join(' ')} data-testid="transcript_header">
@@ -244,16 +252,7 @@ export class Transcript extends Component<TranscriptProps, TranscriptState> {
           kitchenSinkActive={kitchenSinkActive}
         />
         <TranscriptMenu {...{downloadDisabled, onDownload, printDisabled, onPrint, isLoading}} />
-        <div data-testid="transcriptDetachAttachButton">
-          <Button
-            type={ButtonType.borderless}
-            size={ButtonSize.medium}
-            onClick={kitchenSinkDetached ? onAttach : onDetach}
-            icon={kitchenSinkDetached ? 'attach' : 'detach'}
-            ariaLabel={kitchenSinkDetached ? attachTranscript : detachTranscript}
-            tooltip={{label: kitchenSinkDetached ? attachTranscript! : detachTranscript!}}
-          />
-        </div>
+        {this._renderDetachButton()}
         {!kitchenSinkDetached && (
           <div data-testid="transcriptCloseButton">
             <Button
@@ -429,7 +428,7 @@ export class Transcript extends Component<TranscriptProps, TranscriptState> {
           this._widgetRootRef = node;
         }}
         data-testid="transcript_root">
-        {smallScreen ? (
+        {smallScreen && !kitchenSinkDetached ? (
           <SmallScreenSlate onClose={this.props.onClose} toggledWithEnter={toggledWithEnter} />
         ) : (
           <div className={styles.globalContainer}>

package/src/events/events.ts

@@ -1,4 +1,3 @@
-
 export const TranscriptEvents = {
   TRANSCRIPT_OPEN: 'transcript_open',
   TRANSCRIPT_CLOSE: 'transcript_close',
@@ -6,4 +5,14 @@ export const TranscriptEvents = {
   TRANSCRIPT_PRINT: 'transcript_print',
   TRANSCRIPT_SEARCH: 'transcript_search',
   TRANSCRIPT_NAVIGATE_RESULT: 'transcript_navigate_result',
+  TRANSCRIPT_POPOUT_OPEN: 'transcript_popout_open',
+  TRANSCRIPT_POPOUT_CLOSE: 'transcript_popout_close',
+  TRANSCRIPT_POPOUT_DRAG: 'transcript_popout_drag',
+  TRANSCRIPT_POPOUT_RESIZE: 'transcript_popout_resize'
 };
+
+export enum CloseDetachTypes {
+  closeWindow = 'close_window',
+  bringBack = 'bring_back',
+  arrow = 'arrow'
+}

package/src/transcript-plugin.tsx

@@ -9,7 +9,7 @@ import {PluginButton} from './components/plugin-button/plugin-button';
 import {Transcript} from './components/transcript';
 import {getConfigValue, isBoolean, makePlainText, prepareCuePoint} from './utils';
 import {TranscriptConfig, PluginStates, HighlightedMap, CuePointData, ItemTypes, CuePoint} from './types';
-import {TranscriptEvents} from './events/events';
+import {TranscriptEvents, CloseDetachTypes} from './events/events';
 import {AttachPlaceholder} from './components/attach-placeholder';
 
 export const pluginName: string = 'playkit-js-transcript';
@@ -233,11 +233,30 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
       width: 600,
       height: 600,
       title: 'Transcript',
-      attachPlaceholder: () => (<AttachPlaceholder onAttach={this._handleAttach} />) as any
+      attachPlaceholder: () =>
+        (
+          <AttachPlaceholder
+            onAttach={() => {
+              this._handleAttach(CloseDetachTypes.bringBack);
+            }}
+            onClose={this._handleClose}
+          />
+        ) as any,
+      onDetachWindowClose: () => {
+        this.dispatchEvent(TranscriptEvents.TRANSCRIPT_POPOUT_CLOSE, {type: CloseDetachTypes.closeWindow});
+      },
+      onDetachResize: (width: number, height: number) => {
+        this.dispatchEvent(TranscriptEvents.TRANSCRIPT_POPOUT_RESIZE, {size: {x: width, y: height}});
+      },
+      onDetachMove: (x: number, y: number) => {
+        this.dispatchEvent(TranscriptEvents.TRANSCRIPT_POPOUT_DRAG, {position: {x, y}});
+      }
     });
+    this.dispatchEvent(TranscriptEvents.TRANSCRIPT_POPOUT_OPEN);
   };
-  private _handleAttach = () => {
+  private _handleAttach = (type: string) => {
     this.sidePanelsManager?.attachItem(this._transcriptPanel);
+    this.dispatchEvent(TranscriptEvents.TRANSCRIPT_POPOUT_CLOSE, {type});
   };
   private _isDetached = (): boolean => {
     return this.sidePanelsManager!.isItemDetached(this._transcriptPanel);
@@ -290,7 +309,9 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
             dispatcher={(eventType, payload) => this.dispatchEvent(eventType, payload)}
             activeCaptionLanguage={this._activeCaptionMapId}
             onDetach={this._handleDetach}
-            onAttach={this._handleAttach}
+            onAttach={() => {
+              this._handleAttach(CloseDetachTypes.arrow);
+            }}
           />
         ) as any;
       },

package/src/variables.scss

@@ -4,6 +4,8 @@
 $roundness-1: 4px;
 $roundness-3: 16px;
 
+$plugin-background: rgba(0, 0, 0, 0.6);
+
 @mixin plugin-scrollbar {
   &::-webkit-scrollbar {
     width: 4px;

package/translations/en.i18n.json

@@ -20,7 +20,8 @@
       "attachTranscriptText": "Transcript popped out",
       "attachTranscriptButton": "Bring it back",
       "attachTranscript": "Bring Transcript back",
-      "detachTranscript": "Popout Transcript"
+      "detachTranscript": "Popout Transcript",
+      "transcript": "Transcript"
     }
   }
 }