fix: Go to normal fullscreen mode if detached window is not supported…

… on desktop (#17871)

src/script/calling/CallState.ts

@@ -26,6 +26,7 @@ import {REASON as CALL_REASON, STATE as CALL_STATE} from '@wireapp/avs';
 import {Runtime} from '@wireapp/commons';
 import {WebAppEvents} from '@wireapp/webapp-events';
 
+import {useDetachedCallingFeatureState} from 'Components/calling/DetachedCallingCell/DetachedCallingFeature.state';
 import {calculateChildWindowPosition} from 'Util/DOM/caculateChildWindowPosition';
 import {matchQualifiedIds} from 'Util/QualifiedId';
 import {copyStyles} from 'Util/renderElement';
@@ -44,6 +45,7 @@ export enum MuteState {
 }
 
 export enum CallingViewMode {
+  FULL_SCREEN = 'fullscreen',
   DETACHED_WINDOW = 'detached_window',
   MINIMIZED = 'minimized',
 }
@@ -141,17 +143,35 @@ export class CallState {
   };
 
   setViewModeMinimized = () => {
+    const isDetachedWindowSupported = useDetachedCallingFeatureState.getState().isSupported();
+
+    if (!isDetachedWindowSupported) {
+      this.viewMode(CallingViewMode.MINIMIZED);
+      return;
+    }
+
     this.detachedWindow()?.close();
     this.closeDetachedWindow();
   };
 
+  setViewModeFullScreen = () => {
+    this.viewMode(CallingViewMode.FULL_SCREEN);
+  };
+
   async setViewModeDetached(
     detachedViewModeOptions: {name: string; height: number; width: number} = {
       name: 'WIRE_PICTURE_IN_PICTURE_CALL',
       width: 1026,
       height: 829,
     },
   ) {
+    const isDetachedWindowSupported = useDetachedCallingFeatureState.getState().isSupported();
+
+    if (!isDetachedWindowSupported) {
+      this.setViewModeFullScreen();
+      return;
+    }
+
     const isDesktop = Runtime.isDesktopApp();
     const {name, width, height} = detachedViewModeOptions;
     if ('documentPictureInPicture' in window && window.documentPictureInPicture && !isDesktop) {

src/script/components/calling/CallingOverlayContainer.tsx

@@ -53,7 +53,7 @@ const CallingContainer: React.FC<CallingContainerProps> = ({
 }) => {
   const {devicesHandler: mediaDevicesHandler} = mediaRepository;
   const {viewMode} = useKoSubscribableChildren(callState, ['viewMode']);
-  const isDetachedWindow = viewMode === CallingViewMode.DETACHED_WINDOW;
+  const isFullScreenOrDetached = [CallingViewMode.DETACHED_WINDOW, CallingViewMode.FULL_SCREEN].includes(viewMode);
 
   const {activeCallViewTab, joinedCall, hasAvailableScreensToShare, desktopScreenShareMenu} = useKoSubscribableChildren(
     callState,
@@ -139,7 +139,7 @@ const CallingContainer: React.FC<CallingContainerProps> = ({
 
   return (
     <Fragment>
-      {isDetachedWindow && !!videoGrid?.grid.length && (
+      {isFullScreenOrDetached && !!videoGrid?.grid.length && (
         <FullscreenVideoCall
           key={conversation.id}
           videoGrid={videoGrid}

src/script/components/calling/DetachedCallingCell/DetachedCallingFeature.state.ts

@@ -27,6 +27,12 @@ type DetachedCallingFeatureState = {
   isSupported: () => boolean;
 };
 
-export const useDetachedCallingFeatureState = create<DetachedCallingFeatureState>((set, get) => ({
-  isSupported: () => !Runtime.isDesktopApp() || Config.getDesktopConfig()?.supportsCallingPopoutWindow === true,
+export const useDetachedCallingFeatureState = create<DetachedCallingFeatureState>(() => ({
+  isSupported: () => {
+    if (Runtime.isDesktopApp()) {
+      return Config.getDesktopConfig()?.supportsCallingPopoutWindow === true;
+    }
+
+    return true;
+  },
 }));