SDA-3626 Electron 17.3.0 upgrade (#1371) (#1373)

* SDA-3626 Electron 17.3.0 upgrade

* SDA-3626 Moving DesktopCapturer call to main process

package.json

@@ -1,7 +1,7 @@
 {
   "name": "symphony",
   "productName": "Symphony",
-  "version": "14.1.0",
+  "version": "17.1.0",
   "clientVersion": "2.0.1",
   "buildNumber": "0",
   "searchAPIVersion": "1.55.3",
@@ -17,7 +17,6 @@
     "browserify-preload-component": "browserify -o lib/src/renderer/_preload-component.js -x electron --insert-global-vars=__filename,__dirname lib/src/renderer/preload-component.js",
     "compile": "run-s lint compile:*",
     "compile:project": "gulp build",
-    "compile:spec": "tsc -p tsconfig.spec.json",
     "compile:robot": "npm rebuild --build-from-source robotjs",
     "dev": "gulp build && npm run browserify && cross-env ELECTRON_DEV=true electron .",
     "demo": "run-os",
@@ -126,12 +125,12 @@
     "browserify": "16.5.1",
     "cross-env": "5.2.0",
     "del": "3.0.0",
-    "electron": "14.2.1",
+    "electron": "17.3.0",
     "electron-builder": "22.7.0",
     "electron-builder-squirrel-windows": "20.38.3",
     "electron-icon-maker": "0.0.4",
     "electron-osx-sign": "^0.4.16",
-    "electron-rebuild": "1.10.1",
+    "electron-rebuild": "^3.2.7",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.10.0",
     "enzyme-to-json": "^3.3.5",
@@ -144,7 +143,7 @@
     "jest-html-reporter": "3.0.0",
     "less": "3.8.1",
     "ncp": "2.0.0",
-    "node-abi": "^3.2.0",
+    "node-abi": "^3.8.0",
     "npm-run-all": "4.1.5",
     "prettier": "2.2.1",
     "pretty-quick": "^3.1.0",

src/app/main-api-handler.ts

@@ -2,6 +2,7 @@ import {
   app,
   BrowserWindow,
   clipboard,
+  desktopCapturer,
   dialog,
   ipcMain,
   systemPreferences,
@@ -410,8 +411,12 @@ ipcMain.handle(
           microphone,
           screen,
         };
-      default:
-        break;
+      case apiCmds.getSources:
+        const { types, thumbnailSize } = arg;
+        return desktopCapturer.getSources({
+          types,
+          thumbnailSize,
+        });
       case apiCmds.isMisspelled:
         if (typeof arg.word === 'string') {
           return windowHandler.spellchecker
@@ -428,6 +433,8 @@ ipcMain.handle(
         break;
       case apiCmds.getCitrixMediaRedirectionStatus:
         return getCitrixMediaRedirectionStatus();
+      default:
+        break;
     }
     return;
   },

src/app/window-handler.ts

@@ -1665,7 +1665,7 @@ export class WindowHandler {
           modal: true,
           frame: false,
           focusable: true,
-          transparent: true,
+          transparent: false,
           autoHideMenuBar: true,
           resizable: false,
           alwaysOnTop: true,
@@ -1787,7 +1787,7 @@ export class WindowHandler {
         width: frameWidth,
         height: frameHeight,
         frame: false,
-        transparent: true,
+        transparent: false,
         alwaysOnTop: true,
       },
       {

src/app/window-utils.ts

@@ -4,6 +4,7 @@ import {
   BrowserWindow,
   dialog,
   nativeImage,
+  Rectangle,
   screen,
   shell,
   WebContents,
@@ -1183,9 +1184,7 @@ export const loadBrowserViews = async (
       // to get updated window bounds
       setTimeout(() => {
         const [width, height] = mainWindow.getSize();
-        titleBarView.setBounds({ x: 0, y: 0, width, height: 0 });
         mainWindow.removeBrowserView(titleBarView);
-
         if (!mainView || !viewExists(mainView)) {
           return;
         }
@@ -1207,27 +1206,31 @@ export const loadBrowserViews = async (
       ) {
         return;
       }
-      // Workaround: Need to delay getting the window bounds
-      // to get updated window bounds
-      setTimeout(() => {
-        const [width, height] = mainWindow.getSize();
-        mainWindow.addBrowserView(titleBarView);
-        titleBarView.setBounds({ x: 0, y: 0, width, height: TITLE_BAR_HEIGHT });
-        if (!mainView || !viewExists(mainView)) {
-          return;
-        }
-        mainView.setBounds({
-          width,
-          height,
-          x: 0,
-          y: TITLE_BAR_HEIGHT,
-        });
-        // Workaround as electron does not resize devtools automatically
-        if (mainView.webContents.isDevToolsOpened()) {
-          mainView.webContents.toggleDevTools();
-          mainView.webContents.toggleDevTools();
-        }
-      }, 500);
+      mainWindow.addBrowserView(titleBarView);
+      const winBounds: Rectangle = mainWindow.getBounds();
+      const currentScreenBounds: Rectangle = screen.getDisplayMatching({
+        ...winBounds,
+      }).workArea;
+      titleBarView.setBounds({
+        width: currentScreenBounds.width,
+        height: TITLE_BAR_HEIGHT,
+        x: 0,
+        y: 0,
+      });
+      if (!mainView || !viewExists(mainView)) {
+        return;
+      }
+      mainView.setBounds({
+        width: currentScreenBounds.width,
+        height: currentScreenBounds.height - TITLE_BAR_HEIGHT,
+        x: 0,
+        y: TITLE_BAR_HEIGHT,
+      });
+      // Workaround as electron does not resize devtools automatically
+      if (mainView.webContents.isDevToolsOpened()) {
+        mainView.webContents.toggleDevTools();
+        mainView.webContents.toggleDevTools();
+      }
       mainEvents.publish('leave-full-screen');
     });
 
@@ -1235,13 +1238,22 @@ export const loadBrowserViews = async (
       if (!mainView || !viewExists(mainView)) {
         return;
       }
-      const [width, height] = mainWindow.getSize();
+      const winBounds: Rectangle = mainWindow.getBounds();
+      const currentScreenBounds: Rectangle = screen.getDisplayMatching({
+        ...winBounds,
+      }).workArea;
       mainView.setBounds({
-        width,
-        height,
+        width: currentScreenBounds.width,
+        height: currentScreenBounds.height - TITLE_BAR_HEIGHT,
         x: 0,
         y: TITLE_BAR_HEIGHT,
       });
+      titleBarView.setBounds({
+        width: currentScreenBounds.width,
+        height: TITLE_BAR_HEIGHT,
+        x: 0,
+        y: 0,
+      });
     });
     mainWindow?.on('unmaximize', () => {
       if (!mainView || !viewExists(mainView)) {
@@ -1250,10 +1262,16 @@ export const loadBrowserViews = async (
       const [width, height] = mainWindow.getSize();
       mainView.setBounds({
         width,
-        height,
+        height: height - TITLE_BAR_HEIGHT,
         x: 0,
         y: TITLE_BAR_HEIGHT,
       });
+      titleBarView.setBounds({
+        width,
+        height: TITLE_BAR_HEIGHT,
+        x: 0,
+        y: 0,
+      });
       // Workaround as electron does not resize devtools automatically
       if (mainView.webContents.isDevToolsOpened()) {
         mainView.webContents.toggleDevTools();
@@ -1282,7 +1300,7 @@ export const loadBrowserViews = async (
 
   mainView.setBounds({
     width: mainWindowBounds?.width || DEFAULT_WIDTH,
-    height: mainWindowBounds?.height || DEFAULT_HEIGHT,
+    height: (mainWindowBounds?.height || DEFAULT_HEIGHT) - TITLE_BAR_HEIGHT,
     x: 0,
     y: TITLE_BAR_HEIGHT,
   });
@@ -1295,27 +1313,23 @@ export const loadBrowserViews = async (
 
   // Workaround to fix the auto resize of the main view container height
   mainWindow.on('resize', () => {
-    setTimeout(() => {
-      if (
-        !mainView ||
-        mainView.webContents.isDestroyed() ||
-        !mainWindow ||
-        !windowExists(mainWindow)
-      ) {
-        return;
-      }
-      const bounds = mainView.getBounds();
-      const [, height] = mainWindow.getSize();
-      mainView.setBounds({
-        ...bounds,
-        ...{
-          y: mainWindow.isFullScreen() ? 0 : TITLE_BAR_HEIGHT,
-          height: mainWindow.isFullScreen()
-            ? height
-            : height - TITLE_BAR_HEIGHT,
-        },
-      });
-    }, 500);
+    if (
+      !mainView ||
+      mainView.webContents.isDestroyed() ||
+      !mainWindow ||
+      !windowExists(mainWindow)
+    ) {
+      return;
+    }
+    const bounds = mainView.getBounds();
+    const [, height] = mainWindow.getSize();
+    mainView.setBounds({
+      ...bounds,
+      ...{
+        y: mainWindow.isFullScreen() ? 0 : TITLE_BAR_HEIGHT,
+        height: mainWindow.isFullScreen() ? height : height - TITLE_BAR_HEIGHT,
+      },
+    });
   });
 
   windowHandler.setMainView(mainView);

src/common/api-interface.ts

@@ -1,3 +1,5 @@
+import { Size } from 'electron';
+
 export enum apiCmds {
   isOnline = 'is-online',
   getVersionInfo = 'get-version-info',
@@ -63,6 +65,7 @@ export enum apiCmds {
   onSwiftSearchMessage = 'on-shift-search-message',
   getNativeWindowHandle = 'get-native-window-handle',
   getCitrixMediaRedirectionStatus = 'get-citrix-media-redirection-status',
+  getSources = 'getSources',
 }
 
 export enum apiName {
@@ -111,6 +114,8 @@ export interface IApiArgs {
   mediaStatus: IMediaPermission;
   newPodUrl: string;
   swiftSearchData: any;
+  types: string[];
+  thumbnailSize: Size;
 }
 
 export type Themes = 'light' | 'dark';

src/renderer/desktop-capturer.ts

@@ -1,9 +1,4 @@
-import {
-  desktopCapturer,
-  DesktopCapturerSource,
-  ipcRenderer,
-  SourcesOptions,
-} from 'electron';
+import { DesktopCapturerSource, ipcRenderer, SourcesOptions } from 'electron';
 
 import {
   apiCmds,
@@ -118,10 +113,14 @@ export const getSource = async (
   }
 
   id = getNextId();
-  const sources: DesktopCapturerSource[] = await desktopCapturer.getSources({
-    types: sourcesOpts,
-    thumbnailSize: updatedOptions.thumbnailSize,
-  });
+  const sources: DesktopCapturerSource[] = await ipcRenderer.invoke(
+    apiName.symphonyApi,
+    {
+      cmd: apiCmds.getSources,
+      types: sourcesOpts,
+      thumbnailSize: updatedOptions.thumbnailSize,
+    },
+  );
   // Auto select screen source based on args for testing only
   if (screenShareArgv) {
     const title = screenShareArgv.substr(screenShareArgv.indexOf('=') + 1);