fix(FEC-14023): tooltip fix for detach mode (#209)

* fix(FEC-14023): tooltip fix for detach mode * upd common version
kaltura · Jul 2, 2024 · 0293024 · 0293024
1 parent f10827a
commit 0293024
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 21 deletions.
diff --git a/package.json b/package.json
@@ -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"
   },

diff --git a/src/components/popover-menu/popover-menu.tsx b/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>
     );
   }

diff --git a/src/components/transcript-menu/transcript-menu.tsx b/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;

diff --git a/src/components/transcript/transcript.tsx b/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">

diff --git a/yarn.lock b/yarn.lock
@@ -146,10 +146,10 @@
   resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"
   integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==
 
-"@playkit-js/[email protected].13":
-  version "1.5.13"
-  resolved "https://registry.yarnpkg.com/@playkit-js/common/-/common-1.5.13.tgz#70a49b80f447e2cf28beafc615ce9bc12b220411"
-  integrity sha512-7F1R62ItpVs10QIOViP7GS5yVLt9PGD77cf1nqSFgdr135GxQPtq/rIOZNxTpo6Ci+pcxsLUMU9d/j9kPixVuQ==
+"@playkit-js/[email protected].15-canary.0-e058c69":
+  version "1.5.15-canary.0-e058c69"
+  resolved "https://registry.yarnpkg.com/@playkit-js/common/-/common-1.5.15-canary.0-e058c69.tgz#f27b70c6e75ec70445887c3ee03df5229f76dd6d"
+  integrity sha512-d4Mc0/tXNmh4DYHQ/WmN6m+lgQ3B0R16iR+iFXqrNjyeJihhK7KLI0TibV4KgNHEUjw+Z61Uh+KB3mPX5E5oTw==
   dependencies:
     classnames "^2.3.2"
     linkify-it "^4.0.1"