Add screen-sharing-frame, for sharing screen

src/app/window-handler.ts

@@ -84,6 +84,7 @@ export class WindowHandler {
     private aboutAppWindow: Electron.BrowserWindow | null = null;
     private screenPickerWindow: Electron.BrowserWindow | null = null;
     private screenSharingIndicatorWindow: Electron.BrowserWindow | null = null;
+    private screenSharingFrameWindow: Electron.BrowserWindow | null = null;
     private basicAuthWindow: Electron.BrowserWindow | null = null;
     private notificationSettingsWindow: Electron.BrowserWindow | null = null;
 
@@ -362,6 +363,10 @@ export class WindowHandler {
 
                     if (browserWindow && windowExists(browserWindow)) {
                         browserWindow.destroy();
+
+                        if (this.screenSharingFrameWindow && windowExists(this.screenSharingFrameWindow)) {
+                            this.screenSharingFrameWindow.close();
+                        }
                     }
                 }
                 break;
@@ -699,6 +704,20 @@ export class WindowHandler {
             });
         }
 
+        if (displayId !== '') {
+            const displays = electron.screen.getAllDisplays();
+
+            displays.forEach((element) => {
+                if (displayId === element.id.toString()) {
+                    this.createScrenSharingFrameWindow('screen-sharing-frame',
+                    element.workArea.width,
+                    element.workArea.height,
+                    element.workArea.x,
+                    element.workArea.y);
+                }
+            });
+        }
+
         this.screenSharingIndicatorWindow = createComponentWindow('screen-sharing-indicator', opts);
         this.screenSharingIndicatorWindow.setVisibleOnAllWorkspaces(true);
         this.screenSharingIndicatorWindow.webContents.once('did-finish-load', () => {
@@ -723,6 +742,55 @@ export class WindowHandler {
         ipcMain.once('stop-screen-sharing', stopScreenSharing);
     }
 
+    /**
+     * Creates a screen-sharing frame around the shared area
+     */
+    public createScrenSharingFrameWindow(windowName: string, frameWidth: number, frameHeight: number, framePositionX: number, framePositionY: number): void {
+
+        // This prevents creating multiple instances of the
+        // about window
+        if (this.screenSharingFrameWindow && windowExists(this.screenSharingFrameWindow)) {
+            if (this.screenSharingFrameWindow.isMinimized()) {
+                this.screenSharingFrameWindow.restore();
+            }
+            this.screenSharingFrameWindow.focus();
+            return;
+        }
+
+        const allWindows = BrowserWindow.getAllWindows();
+        const selectedParentWindow = allWindows.find((window) => {
+            return (window as ICustomBrowserWindow).winName === windowName;
+        });
+
+        const opts: BrowserWindowConstructorOptions = this.getWindowOpts({
+            width: frameWidth,
+            height: frameHeight,
+            frame: false,
+            transparent: true,
+            alwaysOnTop: true,
+        }, {
+            devTools: false,
+        });
+
+        if (this.mainWindow && windowExists(this.mainWindow) && this.mainWindow.isAlwaysOnTop()) {
+            opts.alwaysOnTop = true;
+        }
+
+        if (isWindowsOS && selectedParentWindow) {
+            opts.parent = selectedParentWindow;
+        }
+
+        this.screenSharingFrameWindow = createComponentWindow('screen-sharing-frame', opts);
+
+        const area = this.screenSharingFrameWindow.getBounds();
+        area.x = framePositionX;
+        area.y = framePositionY;
+        this.screenSharingFrameWindow.setBounds(area);
+
+        this.screenSharingFrameWindow.setIgnoreMouseEvents(true);
+        this.screenSharingFrameWindow.setVisibleOnAllWorkspaces(true);
+    }
+
     /**
      * Update version info on the about app window and more info window
      */

src/renderer/components/screen-sharing-frame.tsx

@@ -0,0 +1,27 @@
+import classNames from 'classnames';
+import * as React from 'react';
+
+/**
+ * Window that display app version and copyright info
+ */
+export default class ScreenSharingFrame extends React.Component<{}> {
+
+    /**
+     * main render function
+     */
+    public render(): JSX.Element {
+
+        return (
+            <div className={classNames('ScreenSharingFrame')}>
+            </div>
+        );
+    }
+
+    /*public componentDidMount(): void {
+        ipcRenderer.on('screen-sharing-frame-app-data');
+    }
+
+    public componentWillUnmount(): void {
+        ipcRenderer.removeListener('screen-sharing-frame-app-data');
+    }*/
+}

src/renderer/preload-component.ts

@@ -8,12 +8,14 @@ import BasicAuth from './components/basic-auth';
 import NotificationComp from './components/notification-comp';
 import NotificationSettings from './components/notification-settings';
 import ScreenPicker from './components/screen-picker';
+import ScreenSharingFrame from './components/screen-sharing-frame';
 import ScreenSharingIndicator from './components/screen-sharing-indicator';
 
 const enum components {
     aboutApp = 'about-app',
     screenPicker = 'screen-picker',
     screenSharingIndicator = 'screen-sharing-indicator',
+    screenSharingFrame = 'screen-sharing-frame',
     basicAuth = 'basic-auth',
     notification = 'notification-comp',
     notificationSettings = 'notification-settings',
@@ -49,6 +51,10 @@ const load = () => {
             loadStyle(components.screenSharingIndicator);
             component = ScreenSharingIndicator;
             break;
+        case components.screenSharingFrame:
+            loadStyle(components.screenSharingFrame);
+            component = ScreenSharingFrame;
+            break;
         case components.basicAuth:
             loadStyle(components.basicAuth);
             component = BasicAuth;

src/renderer/styles/screen-sharing-frame.less

@@ -0,0 +1,14 @@
+html, body {
+  height: 100%;
+  margin: 0px;
+}
+
+.ScreenSharingFrame {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  box-shadow: 0 0 0 5px rgb(251, 6, 157) inset;
+}
+
+