fix: prevent overlap of warning container in call [WPB-14331] (#18413)

* feat: Warning container in call

* fix warnings container

src/script/components/calling/FullscreenVideoCall.tsx

@@ -22,6 +22,7 @@ import React, {useEffect, useRef, useState} from 'react';
 import {DefaultConversationRoleName} from '@wireapp/api-client/lib/conversation/';
 import {TabIndex} from '@wireapp/react-ui-kit/lib/types/enums';
 import classNames from 'classnames';
+import cx from 'classnames';
 import {container} from 'tsyringe';
 
 import {CALL_TYPE} from '@wireapp/avs';
@@ -73,6 +74,7 @@ import {CallingViewMode, CallState, MuteState} from '../../calling/CallState';
 import {Participant} from '../../calling/Participant';
 import type {Grid} from '../../calling/videoGridHandler';
 import type {Conversation} from '../../entity/Conversation';
+import {useWarnings} from '../../guards/useWarnings';
 import {ElectronDesktopCapturerSource, MediaDevicesHandler} from '../../media/MediaDevicesHandler';
 import {TeamState} from '../../team/TeamState';
 import {CallViewTab} from '../../view_model/CallingViewModel';
@@ -144,6 +146,9 @@ const FullscreenVideoCall: React.FC<FullscreenVideoCallProps> = ({
   const [isConfirmCloseModalOpen, setIsConfirmCloseModalOpen] = useState<boolean>(false);
   const [showEmojisBar, setShowEmojisBar] = useState<boolean>(false);
   const [disabledEmojis, setDisabledEmojis] = useState<string[]>([]);
+
+  const {showSmallOffset, showLargeOffset} = useWarnings();
+
   const selfParticipant = call.getSelfParticipant();
   const {sharesScreen: selfSharesScreen, sharesCamera: selfSharesCamera} = useKoSubscribableChildren(selfParticipant, [
     'sharesScreen',
@@ -406,7 +411,12 @@ const FullscreenVideoCall: React.FC<FullscreenVideoCallProps> = ({
   const isModerator = selfUser && roles[selfUser.id] === DefaultConversationRoleName.WIRE_ADMIN;
 
   return (
-    <div className="video-calling-wrapper">
+    <div
+      className={cx('video-calling-wrapper', {
+        'app--small-offset': showSmallOffset,
+        'app--large-offset': showLargeOffset,
+      })}
+    >
       <div id="video-calling" className="video-calling">
         <div css={videoTopBarStyles}>
           <div id="video-title" className="video-title">

src/script/guards/useWarnings.ts

@@ -0,0 +1,34 @@
+/*
+ * Wire
+ * Copyright (C) 2024 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import {useWarningsState} from '../view_model/WarningsContainer/WarningsState';
+import {CONFIG, TYPE as type} from '../view_model/WarningsContainer/WarningsTypes';
+
+export const useWarnings = () => {
+  const warnings = useWarningsState(state => state.warnings);
+  const visibleWarning = warnings[warnings.length - 1];
+  const isConnectivityRecovery = visibleWarning === type.CONNECTIVITY_RECOVERY;
+  const hasOffset = warnings.length > 0 && !isConnectivityRecovery;
+  const isMiniMode = CONFIG.MINI_MODES.includes(visibleWarning);
+
+  return {
+    showSmallOffset: hasOffset && isMiniMode,
+    showLargeOffset: hasOffset && !isMiniMode,
+  };
+};

src/script/page/AppMain.tsx

@@ -20,6 +20,7 @@
 import {FC, useEffect, useLayoutEffect} from 'react';
 
 import {amplify} from 'amplify';
+import cx from 'classnames';
 import {ErrorBoundary} from 'react-error-boundary';
 import {container} from 'tsyringe';
 
@@ -51,6 +52,7 @@ import {useAppState, ContentState} from './useAppState';
 import {CallingViewMode, CallState, DesktopScreenShareMenu} from '../calling/CallState';
 import {ConversationState} from '../conversation/ConversationState';
 import {User} from '../entity/User';
+import {useWarnings} from '../guards/useWarnings';
 import {useActiveWindow} from '../hooks/useActiveWindow';
 import {useInitializeRootFontSize} from '../hooks/useRootFontSize';
 import {App} from '../main/app';
@@ -93,6 +95,8 @@ export const AppMain: FC<AppMainProps> = ({
 
   useInitializeRootFontSize();
 
+  const {showSmallOffset, showLargeOffset} = useWarnings();
+
   if (!apiContext) {
     throw new Error('API Context has not been set');
   }
@@ -249,7 +253,13 @@ export const AppMain: FC<AppMainProps> = ({
         <ErrorBoundary FallbackComponent={ErrorFallback}>
           {Config.getConfig().FEATURE.ENABLE_DEBUG && <ConfigToolbar />}
           {!locked && (
-            <div id="app" className="app">
+            <div
+              id="app"
+              className={cx('app', {
+                'app--small-offset': showSmallOffset,
+                'app--large-offset': showLargeOffset,
+              })}
+            >
               {showLeftSidebar && (
                 <LeftSidebar
                   listViewModel={mainView.list}

src/script/view_model/WarningsContainer/WarningsContainer.tsx

@@ -17,49 +17,34 @@
  *
  */
 
-import React, {useEffect} from 'react';
-
 import cx from 'classnames';
 
 import {Runtime} from '@wireapp/commons';
 
 import * as Icon from 'Components/Icon';
 import {t} from 'Util/LocalizerUtil';
-import {afterRender} from 'Util/util';
 
 import {closeWarning, useWarningsState} from './WarningsState';
-import {CONFIG, TYPE} from './WarningsTypes';
+import {CONFIG, TYPE as type} from './WarningsTypes';
 
 import {Config} from '../../Config';
 
 interface WarningProps {
   onRefresh: () => void;
 }
 
-const WarningsContainer: React.FC<WarningProps> = ({onRefresh}) => {
+export const WarningsContainer = ({onRefresh}: WarningProps) => {
   const name = useWarningsState(state => state.name);
   const warnings = useWarningsState(state => state.warnings);
-  const type = TYPE;
   const visibleWarning = warnings[warnings.length - 1];
-  const warningDimmed = warnings.some(warning => CONFIG.DIMMED_MODES.includes(warning));
-
-  useEffect(() => {
-    const visibleWarning = warnings[warnings.length - 1];
-    const isConnectivityRecovery = visibleWarning === TYPE.CONNECTIVITY_RECOVERY;
-    const hasOffset = warnings.length > 0 && !isConnectivityRecovery;
-    const isMiniMode = CONFIG.MINI_MODES.includes(visibleWarning);
 
-    const app = document.querySelector('#app');
-    if (app) {
-      app.classList.toggle('app--small-offset', hasOffset && isMiniMode);
-      app.classList.toggle('app--large-offset', hasOffset && !isMiniMode);
-    }
+  if (warnings.length === 0) {
+    return null;
+  }
 
-    afterRender(() => window.dispatchEvent(new Event('resize')));
-  }, [warnings]);
+  const warningDimmed = warnings.some(warning => CONFIG.DIMMED_MODES.includes(warning));
 
-  const brandName = Config.getConfig().BRAND_NAME;
-  const URL = Config.getConfig().URL;
+  const {BRAND_NAME: brandName, URL} = Config.getConfig();
 
   const closeButton = (
     <button
@@ -70,10 +55,6 @@ const WarningsContainer: React.FC<WarningProps> = ({onRefresh}) => {
     />
   );
 
-  if (warnings.length === 0) {
-    return null;
-  }
-
   return (
     <div className={cx('warning', {'warning-dimmed': warningDimmed})}>
       {visibleWarning === type.REQUEST_CAMERA && (
@@ -328,5 +309,3 @@ const WarningsContainer: React.FC<WarningProps> = ({onRefresh}) => {
     </div>
   );
 };
-
-export {WarningsContainer};

src/style/foundation/video-calling.less

@@ -31,6 +31,14 @@
   width: 100vw;
   height: 100vh;
   background-color: var(--app-bg-secondary);
+
+  &.app--small-offset {
+    height: calc(100vh - 32px);
+  }
+
+  &.app--large-offset {
+    height: calc(100vh - 64px);
+  }
 }
 
 .video-calling {