feat: allow customizable container in ModalComponent for modal rendering and show end screen sharing warning only on detached window [WPB-17002] (#19943)

* feat: allow customizable container in ModalComponent for modal rendering

* feat: add condition to show end screen sharing in detached mode only

Author: zskhan

src/script/components/Modals/ModalComponent/ModalComponent.tsx

@@ -44,6 +44,7 @@ interface ModalComponentProps extends HTMLProps<HTMLDivElement> {
   onClosed?: () => void;
   showLoading?: boolean;
   wrapperCSS?: CSSObject;
+  container?: Element | DocumentFragment;
 }
 
 const CLOSE_DELAY = 350;
@@ -56,6 +57,7 @@ const ModalComponent = ({
   onClosed = noop,
   showLoading = false,
   wrapperCSS,
+  container,
   children,
   onKeyDown,
   ...rest
@@ -134,7 +136,7 @@ const ModalComponent = ({
             </div>
           )}
         </div>,
-        document.body,
+        container || document.body,
       )}
     </>
   );

src/script/components/calling/FullscreenVideoCall.tsx

@@ -177,7 +177,9 @@ const FullscreenVideoCall = ({
 
     const hasAlreadyConfirmed = localStorage.getItem(LOCAL_STORAGE_KEY_FOR_SCREEN_SHARING_CONFIRM_MODAL) === 'true';
 
-    if (isSharingScreen && isScreenSharingSourceFromDetachedWindow && !hasAlreadyConfirmed) {
+    const isDetachedWindow = viewMode === CallingViewMode.DETACHED_WINDOW;
+
+    if (isSharingScreen && isScreenSharingSourceFromDetachedWindow && isDetachedWindow && !hasAlreadyConfirmed) {
       setIsConfirmCloseModalOpen(true);
       return;
     }
@@ -457,6 +459,9 @@ const FullscreenVideoCall = ({
         onBgClick={() => setIsConfirmCloseModalOpen(false)}
         data-uie-name="confirm-close-with-active-screen-share-modal"
         wrapperCSS={{borderRadius: 10, width: 328}}
+        container={
+          viewMode === CallingViewMode.DETACHED_WINDOW && detachedWindow ? detachedWindow.document.body : undefined
+        }
       >
         {isConfirmCloseModalOpen && (
           <>