fix(FEC-13950): align attach placeholder with design (#196)

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

@@ -3,23 +3,45 @@
 
 .attach-placeholder-container {
   position: absolute;
-  width: 100%;
-  height: 100%;
   top: 0;
   left: 0;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
+  width: 100%;
+  height: 100%;
   background: $plugin-background;
-
-  .attach-text {
-    line-height: 20px;
-    font-weight: 700;
-    letter-spacing: normal;
-    color: $tone-1-color;
+  .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;
+    }
   }
 }

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>
   );
 };

src/transcript-plugin.tsx

@@ -233,7 +233,7 @@ 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} onClose={this._handleClose} />) as any
     });
   };
   private _handleAttach = () => {

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"
     }
   }
 }