From 66ca6ad3ca9ef05e13720a16505cb89b322713db Mon Sep 17 00:00:00 2001
From: SivanA-Kaltura <88330203+SivanA-Kaltura@users.noreply.github.com>
Date: Thu, 1 Aug 2024 12:26:32 +0300
Subject: [PATCH] move interactive area filter into a separate element

---
 src/components/interactive-area/_interactive-area.scss | 8 ++++++--
 src/components/interactive-area/interactive-area.tsx   | 1 +
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/interactive-area/_interactive-area.scss b/src/components/interactive-area/_interactive-area.scss
index d761de80a..59f1df52c 100644
--- a/src/components/interactive-area/_interactive-area.scss
+++ b/src/components/interactive-area/_interactive-area.scss
@@ -1,5 +1,9 @@
-.player.overlay-active .interactive-area {
-  filter: blur($blur);
+.player.overlay-active .interactive-area {  
+  .filter {
+    filter: blur($blur);
+    height: 100%;
+    width: 100%;
+  }
 }
 .interactive-area {
   pointer-events: none;
diff --git a/src/components/interactive-area/interactive-area.tsx b/src/components/interactive-area/interactive-area.tsx
index 42a91171c..2dfe71139 100644
--- a/src/components/interactive-area/interactive-area.tsx
+++ b/src/components/interactive-area/interactive-area.tsx
@@ -26,6 +26,7 @@ class InteractiveArea extends Component<any, any> {
     const {children} = this.props;
     return (
       <div className={style.interactiveArea}>
+        <div className={style.filter}></div>
         <div style={{pointerEvents: 'auto'}}>
           <PlayerArea name={'InteractiveArea'}>{children}</PlayerArea>
         </div>