feat: allow to open calling picture in picture

electron/src/calling/PictureInPictureCall.ts

@@ -0,0 +1,24 @@
+/*
+ * 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/.
+ *
+ */
+
+const PICTURE_IN_PICTURE_CALL_FRAME_NAME = 'WIRE_PICTURE_IN_PICTURE_CALL';
+
+export const isPictureInPictureCallWindow = (frameName: string): boolean => {
+  return frameName === PICTURE_IN_PICTURE_CALL_FRAME_NAME;
+};

electron/src/main.ts

@@ -45,6 +45,7 @@ import {LogFactory} from '@wireapp/commons';
 import {WebAppEvents} from '@wireapp/webapp-events';
 
 import * as ProxyAuth from './auth/ProxyAuth';
+import {isPictureInPictureCallWindow} from './calling/PictureInPictureCall';
 import {
   attachTo as attachCertificateVerifyProcManagerTo,
   setCertificateVerifyProc,
@@ -591,46 +592,26 @@ class ElectronWrapperInit {
       if (SingleSignOn.isSingleSignOnLoginWindow(details.frameName)) {
         return {
           action: 'allow',
-          overrideBrowserWindowOptions: {
-            alwaysOnTop: true,
-            backgroundColor: '#FFFFFF',
-            fullscreen: false,
-            fullscreenable: false,
-            height: 600,
-            maximizable: false,
-            minimizable: false,
-            modal: false,
-            movable: true,
-            parent: main,
-            resizable: false,
+          overrideBrowserWindowOptions: WindowUtil.getNewWindowOptions({
             title: SingleSignOn.getWindowTitle(details.url),
-            titleBarStyle: 'default',
-            useContentSize: true,
-            webPreferences: {
-              allowRunningInsecureContent: false,
-              backgroundThrottling: false,
-              contextIsolation: true,
-              devTools: false,
-              disableBlinkFeatures: '',
-              experimentalFeatures: false,
-              images: true,
-              javascript: true,
-              nodeIntegration: false,
-              nodeIntegrationInWorker: false,
-              offscreen: false,
-              partition: '',
-              plugins: false,
-              preload: '',
-              sandbox: true,
-              scrollBounce: true,
-              spellcheck: false,
-              textAreasAreResizable: false,
-              webSecurity: true,
-              webgl: false,
-              webviewTag: false,
-            },
+            parent: main,
             width: 480,
-          },
+            height: 600,
+          }),
+        };
+      }
+
+      if (isPictureInPictureCallWindow(details.frameName)) {
+        return {
+          action: 'allow',
+          overrideBrowserWindowOptions: WindowUtil.getNewWindowOptions({
+            title: 'Calling UI',
+            width: 290,
+            height: 290,
+            resizable: true,
+            fullscreenable: true,
+            maximizable: true,
+          }),
         };
       }
 

electron/src/window/WindowUtil.ts

@@ -78,3 +78,62 @@ export const openExternal = async (url: string, httpsOnly: boolean = false): Pro
     logger.error(error);
   }
 };
+
+export const getNewWindowOptions = ({
+  parent,
+  title = '',
+  width,
+  height,
+  resizable = false,
+  fullscreenable = false,
+  maximizable = false,
+}: {
+  title?: string;
+  parent?: Electron.BrowserWindow;
+  width: number;
+  height: number;
+  resizable?: boolean;
+  fullscreenable?: boolean;
+  maximizable?: boolean;
+}): Electron.BrowserWindowConstructorOptions => ({
+  alwaysOnTop: true,
+  width,
+  height,
+  backgroundColor: '#FFFFFF',
+  fullscreen: false,
+  fullscreenable,
+  maximizable,
+  minimizable: false,
+  modal: false,
+  movable: true,
+  parent,
+  resizable,
+  minHeight: height,
+  minWidth: width,
+  title: title,
+  titleBarStyle: 'default',
+  useContentSize: true,
+  webPreferences: {
+    allowRunningInsecureContent: false,
+    backgroundThrottling: false,
+    contextIsolation: true,
+    devTools: false,
+    disableBlinkFeatures: '',
+    experimentalFeatures: false,
+    images: true,
+    javascript: true,
+    nodeIntegration: false,
+    nodeIntegrationInWorker: false,
+    offscreen: false,
+    partition: '',
+    plugins: false,
+    preload: '',
+    sandbox: true,
+    scrollBounce: true,
+    spellcheck: false,
+    textAreasAreResizable: false,
+    webSecurity: true,
+    webgl: false,
+    webviewTag: false,
+  },
+});