diff --git a/src/script/calling/CallState.ts b/src/script/calling/CallState.ts index 9258a31f3f4..3cba9e9730e 100644 --- a/src/script/calling/CallState.ts +++ b/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,10 +143,21 @@ 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', @@ -152,6 +165,13 @@ export class CallState { 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) { diff --git a/src/script/components/calling/CallingOverlayContainer.tsx b/src/script/components/calling/CallingOverlayContainer.tsx index ebae54b4105..bc7cacfcc3a 100644 --- a/src/script/components/calling/CallingOverlayContainer.tsx +++ b/src/script/components/calling/CallingOverlayContainer.tsx @@ -53,7 +53,7 @@ const CallingContainer: React.FC = ({ }) => { 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 = ({ return ( - {isDetachedWindow && !!videoGrid?.grid.length && ( + {isFullScreenOrDetached && !!videoGrid?.grid.length && ( boolean; }; -export const useDetachedCallingFeatureState = create((set, get) => ({ - isSupported: () => !Runtime.isDesktopApp() || Config.getDesktopConfig()?.supportsCallingPopoutWindow === true, +export const useDetachedCallingFeatureState = create(() => ({ + isSupported: () => { + if (Runtime.isDesktopApp()) { + return Config.getDesktopConfig()?.supportsCallingPopoutWindow === true; + } + + return true; + }, }));