@playkit-js/transcript 3.5.23-canary.0-f10827a → 3.5.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@playkit-js/transcript",
-  "version": "3.5.23-canary.0-f10827a",
+  "version": "3.5.23",
   "main": "dist/playkit-transcript.js",
   "license": "AGPL-3.0",
   "private": false,
@@ -77,7 +77,7 @@
     "html5 player"
   ],
   "dependencies": {
-    "@playkit-js/common": "1.5.13",
+    "@playkit-js/common": "1.5.15-canary.0-e058c69",
     "sanitize-html": "^2.11.0",
     "stream-browserify": "^3.0.0"
   },

package/src/components/popover-menu/popover-menu.tsx

@@ -21,6 +21,7 @@ interface PopoverMenuProps {
   eventManager?: any;
   children?: VNode;
   items: Array<PopoverMenuItemData>;
+  kitchenSinkDetached: boolean;
 }
 
 interface PopoverMenuState {
@@ -86,18 +87,18 @@ class PopoverMenu extends Component<PopoverMenuProps, PopoverMenuState> {
     const isOpen = !this.state.isOpen;
 
     this.setState({isOpen}, () => {
-      if (isOpen){
+      if (isOpen) {
         this._controlElementRef?.focus();
         this.props.eventManager?.listen(this._controlElementRef, 'keydown', (event: KeyboardEvent) => {
-          if (event.keyCode === TAB){
+          if (event.keyCode === TAB) {
             const firstNonDisabledItem = this.props.items.findIndex((item: PopoverMenuItemData) => !item.isDisabled);
             if (firstNonDisabledItem !== -1) {
-              this._getItemRef(firstNonDisabledItem -1)?.focus();
+              this._getItemRef(firstNonDisabledItem - 1)?.focus();
             }
           }
-        })
+        });
       }
-    })
+    });
   };
 
   private _getItemRef = (index: number) => {
@@ -109,14 +110,15 @@ class PopoverMenu extends Component<PopoverMenuProps, PopoverMenuState> {
   };
 
   render() {
-    const {children, items} = this.props;
+    const {children, items, kitchenSinkDetached} = this.props;
 
     const popoverMenuContent = (
       <div className={styles.popoverContainer}>
-        <A11yWrapper onClick={(e) => {
-          e.stopPropagation();
-          this.togglePopover();
-        }}>
+        <A11yWrapper
+          onClick={e => {
+            e.stopPropagation();
+            this.togglePopover();
+          }}>
           <div
             aria-label={this.props.moreOptionsLabel!}
             tabIndex={0}
@@ -125,7 +127,7 @@ class PopoverMenu extends Component<PopoverMenuProps, PopoverMenuState> {
             aria-expanded={this.state.isOpen}
             aria-controls="popoverContent"
             ref={node => {
-              if (node){
+              if (node) {
                 this._controlElementRef = node;
               }
             }}>
@@ -186,7 +188,9 @@ class PopoverMenu extends Component<PopoverMenuProps, PopoverMenuState> {
       popoverMenuContent
     ) : (
       <div>
-        <Tooltip label={this.props.moreOptionsLabel!}>{popoverMenuContent}</Tooltip>
+        <Tooltip label={this.props.moreOptionsLabel!} {...(kitchenSinkDetached ? {type: 'bottom-left', strictPosition: true} : {})}>
+          {popoverMenuContent}
+        </Tooltip>
       </div>
     );
   }

package/src/components/transcript/transcript.tsx

@@ -200,7 +200,10 @@ export class Transcript extends Component<TranscriptProps, TranscriptState> {
           onClick={kitchenSinkDetached ? onAttach : onDetach}
           icon={kitchenSinkDetached ? 'attach' : 'detach'}
           ariaLabel={kitchenSinkDetached ? attachTranscript : detachTranscript}
-          tooltip={{label: kitchenSinkDetached ? attachTranscript! : detachTranscript!}}
+          tooltip={{
+            label: kitchenSinkDetached ? attachTranscript! : detachTranscript!,
+            ...(kitchenSinkDetached ? {type: 'bottom-left', strictPosition: kitchenSinkDetached} : {})
+          }}
         />
       </div>
     );
@@ -303,7 +306,7 @@ export class Transcript extends Component<TranscriptProps, TranscriptState> {
           toggledWithEnter={toggledWithEnter}
           kitchenSinkActive={kitchenSinkActive}
         />
-        <TranscriptMenu {...{downloadDisabled, onDownload, printDisabled, onPrint, isLoading, detachMenuItem}} />
+        <TranscriptMenu {...{downloadDisabled, onDownload, printDisabled, onPrint, isLoading, detachMenuItem, kitchenSinkDetached}} />
         {!detachMenuItem && this._renderDetachButton()}
         {!kitchenSinkDetached && (
           <div data-testid="transcriptCloseButton">

package/src/components/transcript-menu/transcript-menu.tsx

@@ -13,6 +13,7 @@ interface TranscriptMenuProps {
   downloadDisabled?: boolean;
   printDisabled?: boolean;
   isLoading?: boolean;
+  kitchenSinkDetached: boolean;
   detachMenuItem?: {
     testId: string;
     label: string;
@@ -33,7 +34,17 @@ const translates = {
 @withText(translates)
 class TranscriptMenu extends Component<TranscriptMenuProps, TranscriptMenuState> {
   render() {
-    const {downloadDisabled, onDownload, printDisabled, onPrint, printTranscript, downloadTranscript, isLoading, detachMenuItem} = this.props;
+    const {
+      downloadDisabled,
+      onDownload,
+      printDisabled,
+      onPrint,
+      printTranscript,
+      downloadTranscript,
+      isLoading,
+      detachMenuItem,
+      kitchenSinkDetached
+    } = this.props;
     const items = [];
 
     if (detachMenuItem) {
@@ -59,7 +70,7 @@ class TranscriptMenu extends Component<TranscriptMenuProps, TranscriptMenuState>
     }
 
     return items.length ? (
-      <PopoverMenu items={items}>
+      <PopoverMenu items={items} kitchenSinkDetached={kitchenSinkDetached}>
         <Button type={ButtonType.borderless} icon={'more'} tabIndex={-1} />
       </PopoverMenu>
     ) : null;