@playkit-js/transcript 3.5.20 → 3.5.21-canary.0-cf3ec21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@playkit-js/transcript",
-  "version": "3.5.20",
+  "version": "3.5.21-canary.0-cf3ec21",
   "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.5.2",
+    "@playkit-js/ui-managers": "1.6.0-canary.0-93cb124",
     "@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.9",
+    "@playkit-js/common": "1.5.13",
     "sanitize-html": "^2.11.0",
     "stream-browserify": "^3.0.0"
   },

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

@@ -0,0 +1,21 @@
+@import '~@playkit-js/playkit-js-ui';
+
+.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;
+  }
+  .attach-button {
+    margin-top: 20px;
+  }
+}

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

@@ -0,0 +1,23 @@
+import {h} from 'preact';
+import {ui} from '@playkit-js/kaltura-player-js';
+import {Button, ButtonType, ButtonSize} from '@playkit-js/common/dist/components/button';
+import * as styles from './attach-placeholder.scss';
+
+const {Text} = ui.preacti18n;
+
+interface AttachPlaceholderProps {
+  onAttach: () => void;
+}
+
+export const AttachPlaceholder = ({onAttach}: AttachPlaceholderProps) => {
+  return (
+    <div className={styles.attachPlaceholderContainer} data-testid="transcriptAttachPlaceholder">
+      <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>
+  );
+};

package/src/components/attach-placeholder/index.ts

@@ -0,0 +1 @@
+export * from './attach-placeholder';

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

@@ -46,6 +46,7 @@
 }
 
 .global-container {
+  position: relative;
   height: 100%;
   display: flex;
   flex-direction: column;

package/src/components/transcript/transcript.tsx

@@ -26,7 +26,9 @@ const SEARCH_EVENT_DISPATCH_TIMEOUT = 2000;
 const translates = {
   skipTranscript: <Text id="transcript.skip_transcript">Skip transcript</Text>,
   errorTitle: <Text id="transcript.whoops">Whoops!</Text>,
-  errorDescripton: <Text id="transcript.load_failed">Failed to load transcript</Text>
+  errorDescripton: <Text id="transcript.load_failed">Failed to load transcript</Text>,
+  attachTranscript: <Text id="transcript.attach_transcript">Bring Transcript back</Text>,
+  detachTranscript: <Text id="transcript.detach_transcript">Popout Transcript</Text>
 };
 
 export interface TranscriptProps {
@@ -49,6 +51,8 @@ export interface TranscriptProps {
   skipTranscript?: string;
   errorTitle?: string;
   errorDescripton?: string;
+  attachTranscript?: string;
+  detachTranscript?: string;
   downloadDisabled: boolean;
   onDownload: () => void;
   printDisabled: boolean;
@@ -57,6 +61,9 @@ export interface TranscriptProps {
   expandMode?: string;
   dispatcher: (name: string, payload?: any) => void;
   activeCaptionLanguage: string;
+  onDetach: () => void;
+  onAttach: () => void;
+  kitchenSinkDetached: boolean;
 }
 
 interface TranscriptState {
@@ -187,7 +194,7 @@ export class Transcript extends Component<TranscriptProps, TranscriptState> {
 
   private _dispatchSearchEvent = (state: TranscriptState) => {
     this.props.dispatcher(TranscriptEvents.TRANSCRIPT_SEARCH, {search: this.state.search});
-  }
+  };
 
   private _setActiveSearchIndex = (index: number) => {
     this._scrollToSearchMatchEnabled = true;
@@ -210,7 +217,20 @@ export class Transcript extends Component<TranscriptProps, TranscriptState> {
   };
 
   private _renderHeader = () => {
-    const {toggledWithEnter, kitchenSinkActive, downloadDisabled, onDownload, printDisabled, onPrint, isLoading} = this.props;
+    const {
+      toggledWithEnter,
+      kitchenSinkActive,
+      kitchenSinkDetached,
+      downloadDisabled,
+      onDownload,
+      printDisabled,
+      onPrint,
+      isLoading,
+      onAttach,
+      onDetach,
+      attachTranscript,
+      detachTranscript
+    } = this.props;
     const {search, activeSearchIndex, totalSearchResults} = this.state;
     return (
       <div className={[styles.header, this._getHeaderStyles()].join(' ')} data-testid="transcript_header">
@@ -224,16 +244,29 @@ export class Transcript extends Component<TranscriptProps, TranscriptState> {
           kitchenSinkActive={kitchenSinkActive}
         />
         <TranscriptMenu {...{downloadDisabled, onDownload, printDisabled, onPrint, isLoading}} />
-        <div data-testid="transcriptCloseButton">
+        <div data-testid="transcriptDetachAttachButton">
           <Button
             type={ButtonType.borderless}
             size={ButtonSize.medium}
-            disabled={false}
-            onClick={this.props.onClose}
-            ariaLabel={'Hide Transcript'}
-            tooltip={{label: 'Hide Transcript'}}
-            icon={'close'}></Button>
+            onClick={kitchenSinkDetached ? onAttach : onDetach}
+            icon={kitchenSinkDetached ? 'attach' : 'detach'}
+            ariaLabel={kitchenSinkDetached ? attachTranscript : detachTranscript}
+            tooltip={{label: kitchenSinkDetached ? attachTranscript! : detachTranscript!}}
+          />
         </div>
+        {!kitchenSinkDetached && (
+          <div data-testid="transcriptCloseButton">
+            <Button
+              type={ButtonType.borderless}
+              size={ButtonSize.medium}
+              disabled={false}
+              onClick={this.props.onClose}
+              ariaLabel={'Hide Transcript'}
+              tooltip={{label: 'Hide Transcript'}}
+              icon={'close'}
+            />
+          </div>
+        )}
       </div>
     );
   };
@@ -387,11 +420,11 @@ export class Transcript extends Component<TranscriptProps, TranscriptState> {
   };
 
   render(props: TranscriptProps) {
-    const {isLoading, kitchenSinkActive, hasError, smallScreen, toggledWithEnter} = props;
+    const {isLoading, kitchenSinkActive, kitchenSinkDetached, hasError, smallScreen, toggledWithEnter} = props;
     const renderTranscriptButtons = !(isLoading || hasError);
     return (
       <div
-        className={`${styles.root} ${kitchenSinkActive ? '' : styles.hidden}`}
+        className={`${styles.root} ${kitchenSinkActive || kitchenSinkDetached ? '' : styles.hidden}`}
         ref={node => {
           this._widgetRootRef = node;
         }}

package/src/transcript-plugin.tsx

@@ -10,6 +10,7 @@ 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 {AttachPlaceholder} from './components/attach-placeholder';
 
 export const pluginName: string = 'playkit-js-transcript';
 
@@ -227,6 +228,21 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
     }));
   };
 
+  private _handleDetach = () => {
+    this.sidePanelsManager?.detachItem(this._transcriptPanel, {
+      width: 600,
+      height: 600,
+      title: 'Transcript',
+      attachPlaceholder: () => (<AttachPlaceholder onAttach={this._handleAttach} />) as any
+    });
+  };
+  private _handleAttach = () => {
+    this.sidePanelsManager?.attachItem(this._transcriptPanel);
+  };
+  private _isDetached = (): boolean => {
+    return this.sidePanelsManager!.isItemDetached(this._transcriptPanel);
+  };
+
   private _addTranscriptItem(): void {
     if (Math.max(this._transcriptPanel, this._transcriptIcon) > 0) {
       // transcript panel or icon already exist
@@ -264,6 +280,7 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
             currentTime={this.player.currentTime}
             videoDuration={this.player.duration}
             kitchenSinkActive={this._isPluginActive()}
+            kitchenSinkDetached={this._isDetached()}
             toggledWithEnter={this._triggeredByKeyboard}
             onClose={this._handleClose}
             downloadDisabled={getConfigValue(downloadDisabled, isBoolean, false)}
@@ -272,12 +289,14 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
             onPrint={this._handlePrint}
             dispatcher={(eventType, payload) => this.dispatchEvent(eventType, payload)}
             activeCaptionLanguage={this._activeCaptionMapId}
-          /> as any
-        );
+            onDetach={this._handleDetach}
+            onAttach={this._handleAttach}
+          />
+        ) as any;
       },
       presets: [ReservedPresetNames.Playback, ReservedPresetNames.Live, ReservedPresetNames.Ads],
       position: position,
-      expandMode: expandMode === SidePanelModes.ALONGSIDE ? SidePanelModes.ALONGSIDE : SidePanelModes.OVER,
+      expandMode: expandMode === SidePanelModes.ALONGSIDE ? SidePanelModes.ALONGSIDE : SidePanelModes.OVER
     }) as number;
     const translates = {
       showTranscript: <Text id="transcript.show_plugin">Show Transcript</Text>,

package/translations/en.i18n.json

@@ -16,7 +16,11 @@
       "load_failed": "Failed to load transcript",
       "skip_transcript": "Skip transcript",
       "smallScreenText": "To see the transcript, go to full screen",
-      "smallScreenMobileText": "To see the transcript, rotate the phone"
+      "smallScreenMobileText": "To see the transcript, rotate the phone",
+      "attachTranscriptText": "Transcript popped out",
+      "attachTranscriptButton": "Bring it back",
+      "attachTranscript": "Bring Transcript back",
+      "detachTranscript": "Popout Transcript"
     }
   }
 }