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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@playkit-js/transcript",
-  "version": "3.5.21-canary.0-cf3ec21",
+  "version": "3.5.21-canary.0-5b355b8",
   "main": "dist/playkit-transcript.js",
   "license": "AGPL-3.0",
   "private": false,

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

@@ -1,14 +1,18 @@
 @import '~@playkit-js/playkit-js-ui';
+@import '../../variables.scss';
 
 .attach-placeholder-container {
   position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  background: $plugin-background;
+
   .attach-text {
     line-height: 20px;
     font-weight: 700;

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/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;