fix(FEC-13483): fix blur issue with css (#11)

### Description of the Changes fix blur behavior using css instead of js.
kaltura · Nov 19, 2023 · 3e62f42 · 3e62f42
1 parent 962e43f
commit 3e62f42
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 21 deletions.
diff --git a/src/components/slate/slate.scss b/src/components/slate/slate.scss
@@ -49,6 +49,12 @@
       }
     }
   }
+
+  &.slate-has-image {
+    .playkit-overlay .playkit-overlay-contents {
+      background-color: transparent;
+    }
+  }
 }
 
 :global {
@@ -60,3 +66,12 @@
     }
   }
 }
+
+:global(.overlay-portal) {
+  &:has(> :last-child:nth-child(2)) {
+    /* 2 elements */
+    .slate-overlay-wrapper-id {
+      background-color: rgba(0, 0, 0, 0.7);
+    }
+  }
+}
diff --git a/src/components/slate/slate.tsx b/src/components/slate/slate.tsx
@@ -51,32 +51,15 @@ const SPINNER_SIZE_M_L_PLAYER = 48;
 @connect(mapStateToProps)
 @withText(translates)
 export class Slate extends Component<SlateProps> {
-  private _slateOverlayWrapperEl: HTMLDivElement | null = null;
-
   public componentDidMount(): void {
-    const { showCloseButton, backgroundImageUrl } = this.props;
+    const { showCloseButton } = this.props;
 
     // handle overlay close button
     const closeButtonEl = document.querySelector('.playkit-close-overlay') as any;
     if (!showCloseButton && closeButtonEl) {
       closeButtonEl.style['display'] = 'none';
     }
 
-    // handle slate overlay wrapper background style
-    if (this._slateOverlayWrapperEl) {
-      if (backgroundImageUrl) {
-        this._slateOverlayWrapperEl.style['background-image'] = `url(${this.props.backgroundImageUrl})`;
-        this._slateOverlayWrapperEl.style['background-size'] = 'contain';
-      } else {
-        const overlayPortalEl = document.querySelector('.overlay-portal') as any;
-        if (overlayPortalEl && overlayPortalEl.children.length > 1) {
-          // if the overlayPortal contains more elements, in addition to the slate,
-          // need to blur the background of the slate to cover them properly
-          this._slateOverlayWrapperEl.style['background-color'] = 'rgba(0,0,0,0.7)';
-        }
-      }
-    }
-
     if (this.props.timeout) {
       setTimeout(() => {
         this.props.onClose(new MouseEvent('click'), false);
@@ -146,13 +129,26 @@ export class Slate extends Component<SlateProps> {
     return SPINNER_SIZE_M_L_PLAYER;
   }
 
+  private getSlateOverlayWrapperStyle(): any {
+    if (this.props.backgroundImageUrl) {
+      return {
+        backgroundImage: `url(${this.props.backgroundImageUrl})`,
+        backgroundSize: 'contain'
+      };
+    }
+    return null;
+  }
+
   public render(): ComponentChild {
-    const { onClose, showSpinner } = this.props;
+    const { onClose, showSpinner, backgroundImageUrl } = this.props;
+    const slateOverlayWrapperStyle = this.getSlateOverlayWrapperStyle();
     return (
       <OverlayPortal>
         <div
-          className={styles.slateOverlayWrapper}
-          ref={(node): HTMLDivElement | null => (this._slateOverlayWrapperEl = node)}
+          className={[styles.slateOverlayWrapper, 'slate-overlay-wrapper-id', backgroundImageUrl ? 'slate-has-image' : ''].join(
+            ' '
+          )}
+          style={slateOverlayWrapperStyle}
           data-testid="slate_overlay_wrapper"
         >
           <Overlay open onClose={onClose}>