feat(modal): added blur backdrop filter when user join the room (bigb…

…luebutton#21029)
antonbsa · Aug 27, 2024 · 226a5bd · 226a5bd
1 parent 4e7868b
commit 226a5bd
Show file tree

Hide file tree

Showing 4 changed files with 110 additions and 74 deletions.
diff --git a/bigbluebutton-html5/imports/ui/components/audio/audio-modal/component.jsx b/bigbluebutton-html5/imports/ui/components/audio/audio-modal/component.jsx
@@ -681,34 +681,36 @@ const AudioModal = ({
     : null;
 
   return (
-    <Styled.AudioModal
-      modalName="AUDIO"
-      onRequestClose={closeModal}
-      data-test="audioModal"
-      contentLabel={intl.formatMessage(intlMessages.ariaModalTitle)}
-      title={title}
-      {...{
-        setIsOpen,
-        isOpen,
-        priority,
-      }}
-    >
-      {isIE ? (
-        <Styled.BrowserWarning>
-          <FormattedMessage
-            id="app.audioModal.unsupportedBrowserLabel"
-            description="Warning when someone joins with a browser that isn't supported"
-            values={{
-              0: <a href="https://www.google.com/chrome/">Chrome</a>,
-              1: <a href="https://getfirefox.com">Firefox</a>,
-            }}
-          />
-        </Styled.BrowserWarning>
-      ) : null}
-      <Styled.Content>
-        {renderContent()}
-      </Styled.Content>
-    </Styled.AudioModal>
+    <Styled.Background isBlurred={Session.getItem('audioModalIsOpen')}>
+      <Styled.AudioModal
+        modalName="AUDIO"
+        onRequestClose={closeModal}
+        data-test="audioModal"
+        contentLabel={intl.formatMessage(intlMessages.ariaModalTitle)}
+        title={title}
+        {...{
+          setIsOpen,
+          isOpen,
+          priority,
+        }}
+      >
+        {isIE ? (
+          <Styled.BrowserWarning>
+            <FormattedMessage
+              id="app.audioModal.unsupportedBrowserLabel"
+              description="Warning when someone joins with a browser that isn't supported"
+              values={{
+                0: <a href="https://www.google.com/chrome/">Chrome</a>,
+                1: <a href="https://getfirefox.com">Firefox</a>,
+              }}
+            />
+          </Styled.BrowserWarning>
+        ) : null}
+        <Styled.Content>
+          {renderContent()}
+        </Styled.Content>
+      </Styled.AudioModal>
+    </Styled.Background>
   );
 };
 

diff --git a/bigbluebutton-html5/imports/ui/components/audio/audio-modal/styles.js b/bigbluebutton-html5/imports/ui/components/audio/audio-modal/styles.js
@@ -139,10 +139,24 @@ const Content = styled.div`
   }
 `;
 
+const Background = styled.span`
+  ${({ isBlurred }) => isBlurred
+    && css`
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    backdrop-filter: blur(10px);
+    z-index: 998;
+    `}
+`;
+
 export default {
   AudioOptions,
   AudioModalButton,
   AudioDial,
+  Background,
   Connecting,
   ConnectingAnimation,
   AudioModal,

diff --git a/bigbluebutton-html5/imports/ui/components/video-preview/component.jsx b/bigbluebutton-html5/imports/ui/components/video-preview/component.jsx
@@ -26,6 +26,8 @@ import Checkbox from '/imports/ui/components/common/checkbox/component'
 import AppService from '/imports/ui/components/app/service';
 import { CustomVirtualBackgroundsContext } from '/imports/ui/components/video-preview/virtual-background/context';
 import VBGSelectorService from '/imports/ui/components/video-preview/virtual-background/service';
+import Storage from '/imports/ui/services/storage/session';
+import getFromUserSettings from '/imports/ui/services/users-settings';
 
 const VIEW_STATES = {
   finding: 'finding',
@@ -1311,6 +1313,8 @@ class VideoPreview extends Component {
     const WebcamBackgroundImg = `${BASE_NAME}/resources/images/webcam_background.svg`;
 
     const darkThemeState = AppService.isDarkThemeEnabled();
+    const isBlurred = Storage.getItem('isFirstJoin') !== false 
+    && getFromUserSettings('bbb_auto_share_webcam', window.meetingClientSettings.public.kurento.autoShareWebcam);
 
     if (isCamLocked === true) {
       this.handleProceed();
@@ -1336,58 +1340,60 @@ class VideoPreview extends Component {
     && isVirtualBackgroundSupported()
 
     return (
-      <Styled.VideoPreviewModal
-        onRequestClose={this.handleProceed}
-        contentLabel={intl.formatMessage(intlMessages.webcamSettingsTitle)}
-        shouldShowCloseButton={allowCloseModal}
-        shouldCloseOnOverlayClick={allowCloseModal}
-        isPhone={deviceInfo.isPhone}
-        data-test="webcamSettingsModal"
-        {...{
-          isOpen,
-          priority,
-        }}
-      >
-        <Styled.Container>
-          <Styled.Header>
-            <Styled.WebcamTabs
-            onSelect={this.handleSelectTab}
-            selectedIndex={selectedTab}
-            >
-              <Styled.WebcamTabList>
-                <Styled.WebcamTabSelector selectedClassName="is-selected">
-                  <Styled.IconSvg
-                    src={WebcamSettingsImg}
-                    darkThemeState={darkThemeState}
-                  />
-                  <span 
-                    id="webcam-settings-title">{this.getModalTitle()}
-                  </span>
-                </Styled.WebcamTabSelector>
-                {shouldShowVirtualBackgroundsTab && (
-                <>
-                  <Styled.HeaderSeparator />
+      <Styled.Background isBlurred={isBlurred}>
+        <Styled.VideoPreviewModal
+          onRequestClose={this.handleProceed}
+          contentLabel={intl.formatMessage(intlMessages.webcamSettingsTitle)}
+          shouldShowCloseButton={allowCloseModal}
+          shouldCloseOnOverlayClick={allowCloseModal}
+          isPhone={deviceInfo.isPhone}
+          data-test="webcamSettingsModal"
+          {...{
+            isOpen,
+            priority,
+          }}
+        >
+          <Styled.Container>
+            <Styled.Header>
+              <Styled.WebcamTabs
+              onSelect={this.handleSelectTab}
+              selectedIndex={selectedTab}
+              >
+                <Styled.WebcamTabList>
                   <Styled.WebcamTabSelector selectedClassName="is-selected">
                     <Styled.IconSvg
-                      src={WebcamBackgroundImg}
+                      src={WebcamSettingsImg}
                       darkThemeState={darkThemeState}
                     />
-                    <span id="backgrounds-title">{intl.formatMessage(intlMessages.webcamVirtualBackgroundTitle)}</span>
+                    <span 
+                      id="webcam-settings-title">{this.getModalTitle()}
+                    </span>
                   </Styled.WebcamTabSelector>
-                </>
-              )}
-              </Styled.WebcamTabList>
-
-            </Styled.WebcamTabs>
-          </Styled.Header>
-
-          {deviceInfo.hasMediaDevices
-              ? this.renderModalContent(selectedTab)
-              : this.supportWarning()
-            }
+                  {shouldShowVirtualBackgroundsTab && (
+                  <>
+                    <Styled.HeaderSeparator />
+                    <Styled.WebcamTabSelector selectedClassName="is-selected">
+                      <Styled.IconSvg
+                        src={WebcamBackgroundImg}
+                        darkThemeState={darkThemeState}
+                      />
+                      <span id="backgrounds-title">{intl.formatMessage(intlMessages.webcamVirtualBackgroundTitle)}</span>
+                    </Styled.WebcamTabSelector>
+                  </>
+                )}
+                </Styled.WebcamTabList>
+
+              </Styled.WebcamTabs>
+            </Styled.Header>
+
+            {deviceInfo.hasMediaDevices
+                ? this.renderModalContent(selectedTab)
+                : this.supportWarning()
+              }
 
-        </Styled.Container>
-      </Styled.VideoPreviewModal>
+          </Styled.Container>
+        </Styled.VideoPreviewModal>
+      </Styled.Background>
     );
   }
 }

diff --git a/bigbluebutton-html5/imports/ui/components/video-preview/styles.js b/bigbluebutton-html5/imports/ui/components/video-preview/styles.js
@@ -255,6 +255,19 @@ const ellipsis = keyframes`
   }
 `;
 
+const Background = styled.span`
+  ${({ isBlurred }) => isBlurred
+    && css`
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    backdrop-filter: blur(10px);
+    z-index: 998;
+    `}
+`;
+
 const FetchingAnimation = styled.span`
   margin: auto;
   display: inline-block;
@@ -413,6 +426,7 @@ export default {
   BottomSeparator,
   VideoCol,
   BackgroundCol,
+  Background,
   IconSvg,
   SharingButton,
   CancelButton,