Typescript - Completed Desktop capturer & screen picker implementation

package.json

@@ -124,6 +124,7 @@
     "async.map": "0.5.2",
     "async.mapseries": "0.5.2",
     "auto-launch": "5.0.5",
+    "classnames": "2.2.6",
     "electron-dl": "1.12.0",
     "electron-fetch": "1.3.0",
     "electron-log": "2.2.17",

src/browser/main-api-handler.ts

@@ -5,6 +5,7 @@ import { LocaleType } from '../common/i18n';
 import { logger } from '../common/logger';
 import { activityDetection } from './activity-detection';
 import { screenSnippet } from './screen-snippet';
+import { windowHandler } from './window-handler';
 import {
     isValidWindow,
     sanitize,
@@ -80,12 +81,12 @@ ipcMain.on(apiName.symphonyApi, (event: Electron.Event, arg: IApiArgs) => {
             if (typeof arg.reason === 'string' && arg.reason === 'notification') {
                 bringToFront(arg.windowName, arg.reason);
             }
-            break;
-        case ApiCmds.openScreenPickerWindow:
-            if (Array.isArray(arg.sources) && typeof arg.id === 'number') {
-                openScreenPickerWindow(event.sender, arg.sources, arg.id);
-            }
             break;*/
+        case apiCmds.openScreenPickerWindow:
+            if (Array.isArray(arg.sources) && typeof arg.id === 'number') {
+                windowHandler.createScreenPickerWindow(event.sender, arg.sources, arg.id);
+            }
+            break;
         case apiCmds.popupMenu: {
             const browserWin = BrowserWindow.fromWebContents(event.sender);
             if (browserWin && !browserWin.isDestroyed()) {
@@ -120,6 +121,10 @@ ipcMain.on(apiName.symphonyApi, (event: Electron.Event, arg: IApiArgs) => {
             break;*/
         case apiCmds.openScreenSnippet:
             screenSnippet.capture(event.sender);
+            break;
+        case apiCmds.closeWindow:
+            windowHandler.closeWindow(arg.windowType);
+            break;
         default:
     }
 

src/browser/window-handler.ts

@@ -1,11 +1,13 @@
 import * as electron from 'electron';
-import { BrowserWindow, crashReporter } from 'electron';
+import { BrowserWindow, crashReporter, ipcMain, webContents } from 'electron';
 import * as fs from 'fs';
 import * as path from 'path';
 import * as url from 'url';
 
 import { buildNumber, clientVersion, version } from '../../package.json';
-import { isWindowsOS } from '../common/env';
+import DesktopCapturerSource = Electron.DesktopCapturerSource;
+import { WindowTypes } from '../common/api-interface';
+import { isMac, isWindowsOS } from '../common/env';
 import { getCommandLineArgs, getGuid } from '../common/utils';
 import { AppMenu } from './app-menu';
 import { config, IConfig } from './config-handler';
@@ -45,6 +47,27 @@ export class WindowHandler {
         };
     }
 
+    /**
+     * Screen picker window opts
+     */
+    private static getScreenPickerWindowOpts(): ICustomBrowserWindowConstructorOpts {
+        return {
+            alwaysOnTop: true,
+            autoHideMenuBar: true,
+            frame: false,
+            height: isMac ? 519 : 523,
+            width: 580,
+            modal: false,
+            resizable: true,
+            show: false,
+            webPreferences: {
+                nodeIntegration: false,
+                sandbox: true,
+            },
+            winKey: getGuid(),
+        };
+    }
+
     /**
      * Verifies if the url is valid and
      * forcefully appends https if not present
@@ -75,6 +98,7 @@ export class WindowHandler {
     private loadingWindow: Electron.BrowserWindow | null;
     private aboutAppWindow: Electron.BrowserWindow | null;
     private moreInfoWindow: Electron.BrowserWindow | null;
+    private screenPickerWindow: Electron.BrowserWindow | null;
 
     constructor(opts?: Electron.BrowserViewConstructorOptions) {
         // Settings
@@ -92,6 +116,7 @@ export class WindowHandler {
         this.loadingWindow = null;
         this.aboutAppWindow = null;
         this.moreInfoWindow = null;
+        this.screenPickerWindow = null;
 
         try {
             const extra = { podUrl: this.globalConfig.url, process: 'main' };
@@ -168,6 +193,18 @@ export class WindowHandler {
         return this.windows;
     }
 
+    /**
+     * Closes the window from an event emitted by the render processes
+     *
+     * @param windowType
+     */
+    public closeWindow(windowType: WindowTypes) {
+        switch (windowType) {
+            case 'screen-picker':
+                if (this.screenPickerWindow && !this.screenPickerWindow.isDestroyed()) this.screenPickerWindow.close();
+        }
+    }
+
     /**
      * Sets is auto reload when the application
      * is auto reloaded for optimizing memory
@@ -180,6 +217,7 @@ export class WindowHandler {
 
     /**
      * Checks if the window and a key has a window
+     *
      * @param key {string}
      * @param window {Electron.BrowserWindow}
      */
@@ -222,13 +260,36 @@ export class WindowHandler {
         this.moreInfoWindow = createComponentWindow('more-info-window');
         this.moreInfoWindow.webContents.once('did-finish-load', () => {
             if (this.aboutAppWindow) {
-                this.aboutAppWindow.webContents.send('more-info-window');
+                this.aboutAppWindow.webContents.send('more-info-data');
+            }
+        });
+    }
+
+    /**
+     * Creates a screen picker window
+     */
+    public createScreenPickerWindow(win: webContents, sources: DesktopCapturerSource[], id: number) {
+        const opts = WindowHandler.getScreenPickerWindowOpts();
+        this.screenPickerWindow = createComponentWindow('screen-picker-window', opts);
+        this.screenPickerWindow.webContents.once('did-finish-load', () => {
+            if (this.screenPickerWindow) {
+                this.screenPickerWindow.webContents.send('screen-picker-data', { sources, id });
+                this.addWindow(opts.winKey, this.screenPickerWindow);
+                this.screenPickerWindow.once('closed', () => {
+                    this.removeWindow(opts.winKey);
+                    this.screenPickerWindow = null;
+                });
+
+                ipcMain.once('screen-source-selected', (_event, source) => {
+                    win.send('start-share' + id, source);
+                });
             }
         });
     }
 
     /**
      * Stores information of all the window we have created
+     *
      * @param key {string}
      * @param browserWindow {Electron.BrowserWindow}
      */
@@ -236,6 +297,15 @@ export class WindowHandler {
         this.windows[ key ] = browserWindow;
     }
 
+    /**
+     * Removes the window reference
+     *
+     * @param key {string}
+     */
+    private removeWindow(key): void {
+        delete this.windows[ key ];
+    }
+
     /**
      * Saves the main window bounds
      */

src/browser/window-utils.ts

@@ -54,6 +54,7 @@ export const createComponentWindow = (
 
     const browserWindow = new BrowserWindow(options);
     browserWindow.on('ready-to-show', () => browserWindow.show());
+    browserWindow.webContents.toggleDevTools();
     browserWindow.setMenu(null as any);
 
     const targetUrl = url.format({

src/common/api-interface.ts

@@ -18,6 +18,7 @@ export enum apiCmds {
     setLocale = 'set-locale',
     openScreenSnippet = 'open-screen-snippet',
     keyPress = 'key-press',
+    closeWindow = 'close-window',
 }
 
 export enum apiName {
@@ -38,8 +39,11 @@ export interface IApiArgs {
     isInMeeting: boolean;
     locale: string;
     keyCode: number;
+    windowType: WindowTypes;
 }
 
+export type WindowTypes = 'screen-picker';
+
 /**
  * Activity detection
  */

src/renderer/components/about-app.tsx

@@ -35,7 +35,7 @@ export default class AboutApp extends React.Component<{}, IState> {
         const copyright = `Copyright \xA9 ${new Date().getFullYear()} ${appName}`;
         return (
             <div className='AboutApp'>
-                <img className='AboutApp-logo' src='assets/symphony-logo.png'/>
+                <img className='AboutApp-logo' src='../assets/symphony-logo.png'/>
                 <span className='AboutApp-name'>{appName}</span>
                 <span className='AboutApp-versionText'>{versionString}</span>
                 <span className='AboutApp-copyrightText'>{copyright}</span>

src/renderer/components/loading-screen.tsx

@@ -13,7 +13,7 @@ export default class LoadingScreen extends React.PureComponent {
         const appName = remote.app.getName() || 'Symphony';
         return (
             <div className='LoadingScreen'>
-                <img className='LoadingScreen-logo' src='assets/symphony-logo.png' />
+                <img className='LoadingScreen-logo' src='../assets/symphony-logo.png' />
                     <span className='LoadingScreen-name'>{appName}</span>
                     <svg width='100%' height='100%' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 200' preserveAspectRatio='xMidYMid'>
                         <circle cx='50' cy='50' fill='none' ng-attr-stroke='{{config.color}}' ng-attr-stroke-width='{{config.width}}' ng-attr-r='{{config.radius}}' ng-attr-stroke-dasharray='{{config.dasharray}}' stroke='#ffffff' stroke-width='10' r='35' stroke-dasharray='164.93361431346415 56.97787143782138' transform='rotate(59.6808 50 50)'>

src/renderer/components/screen-picker.tsx

@@ -0,0 +1,370 @@
+import classNames from 'classnames';
+import { DesktopCapturerSource, ipcRenderer } from 'electron';
+import * as React from 'react';
+
+import { apiCmds, apiName } from '../../common/api-interface';
+import { isWindowsOS } from '../../common/env';
+import { i18n } from '../../common/i18n';
+
+const screenRegExp = new RegExp(/^Screen \d+$/gmi);
+const SCREEN_PICKER_NAMESPACE = 'ScreenPicker';
+
+interface IState {
+    sources: Electron.DesktopCapturerSource[];
+    selectedSource: DesktopCapturerSource | undefined;
+    selectedTab: tabs;
+}
+
+type tabs = 'screens' | 'applications';
+
+const enum keyCode {
+    pageDown = 34,
+    rightArrow = 39,
+    pageUp = 33,
+    leftArrow = 37,
+    homeKey = 36,
+    upArrow = 38,
+    endKey = 35,
+    arrowDown = 40,
+    enterKey = 13,
+    escapeKey = 27,
+}
+
+export default class ScreenPicker extends React.Component<{}, IState> {
+
+    private isScreensAvailable: boolean;
+    private isApplicationsAvailable: boolean;
+    private readonly eventHandlers = {
+        onSelect: (src) => this.select(src),
+        onToggle: (tab) => this.toggle(tab),
+        onClose: () => this.close(),
+        onSubmit: () => this.submit(),
+    };
+    private currentIndex: number;
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            sources: [],
+            selectedSource: undefined,
+            selectedTab: 'screens',
+        };
+        this.currentIndex = 0;
+        this.isScreensAvailable = false;
+        this.isApplicationsAvailable = false;
+        this.updateState = this.updateState.bind(this);
+        this.handleKeyUpPress = this.handleKeyUpPress.bind(this);
+        this.renderTabTitles = this.renderTabTitles.bind(this);
+    }
+
+    public componentDidMount(): void {
+        ipcRenderer.on('screen-picker-data', this.updateState);
+        document.addEventListener('keyup', this.handleKeyUpPress, true);
+        if (isWindowsOS) document.body.classList.add('ScreenPicker-window-border');
+    }
+
+    public componentWillUnmount(): void {
+        ipcRenderer.removeListener('screen-picker-data', this.updateState);
+        document.removeEventListener('keyup', this.handleKeyUpPress, true);
+    }
+
+    /**
+     * main render function
+     */
+    public render(): JSX.Element {
+        const { sources, selectedSource } = this.state;
+        return (
+            <div className='ScreenPicker ScreenPicker-content'>
+                <div className='ScreenPicker-title'>
+                    <span>{i18n.t(`Choose what you'd like to share`, SCREEN_PICKER_NAMESPACE)()}</span>
+                    <div className='ScreenPicker-x-button' onClick={this.eventHandlers.onClose}>
+                        <div className='content-button'>
+                            <i>
+                                <svg viewBox='0 0 48 48' fill='grey'>
+                                    <path
+                                        d='M39.4,33.8L31,25.4c-0.4-0.4-0.9-0.9-1.4-1.4c0.5-0.5,1-1,1.4-1.4l8.4-8.4c0.8-0.8,0.8-2,0-2.8l-2.8-2.8 c-0.8-0.8-2-0.8-2.8,0L25.4,17c-0.4,0.4-0.9,0.9-1.4,1.4c-0.5-0.5-1-1-1.4-1.4l-8.4-8.4c-0.8-0.8-2-0.8-2.8,0l-2.8,2.8 c-0.8,0.8-0.8,2,0,2.8l8.4,8.4c0.4,0.4,0.9,0.9,1.4,1.4c-0.5,0.5-1,1-1.4,1.4l-8.4,8.4c-0.8,0.8-0.8,2,0,2.8l2.8,2.8 c0.8,0.8,2,0.8,2.8,0l8.4-8.4c0.4-0.4,0.9-0.9,1.4-1.4c0.5,0.5,1,1,1.4,1.4l8.4,8.4c0.8,0.8,2,0.8,2.8,0l2.8-2.8 C40.2,35.8,40.2,34.6,39.4,33.8z'
+                                    />
+                                </svg>
+                            </i>
+                        </div>
+                    </div>
+                </div>
+                {this.renderSources(sources)}
+                <footer>
+                    <button
+                        className='ScreenPicker-cancel-button'
+                        onClick={this.eventHandlers.onClose}
+                    >
+                        {i18n.t('Cancel', SCREEN_PICKER_NAMESPACE)()}
+                    </button>
+                    <button
+                        className={classNames('ScreenPicker-share-button',
+                            { 'ScreenPicker-share-button-disable': !selectedSource })}
+                        onClick={this.eventHandlers.onSubmit}
+                    >
+                        {selectedSource ? i18n.t('Share', SCREEN_PICKER_NAMESPACE)() : i18n.t('Select Screen', SCREEN_PICKER_NAMESPACE)()}
+                    </button>
+                </footer>
+            </div>
+        );
+    }
+
+    /**
+     * Renders the sources by separating screens and applications
+     *
+     * @param sources {DesktopCapturerSource}
+     */
+    private renderSources(sources: Electron.DesktopCapturerSource[]): JSX.Element {
+        const screens: JSX.Element[] = [];
+        const applications: JSX.Element[] = [];
+        sources.map((source: Electron.DesktopCapturerSource) => {
+            screenRegExp.lastIndex = 0;
+            const shouldHighlight: string = classNames(
+                'ScreenPicker-item-container',
+                { 'ScreenPicker-selected': this.shouldHighlight(source.id) },
+            );
+            if (source.name === 'Entire screen' || screenRegExp.exec(source.name)) {
+                screens.push(
+                    <div
+                        className={shouldHighlight}
+                        id={source.id}
+                        onClick={() => this.eventHandlers.onSelect(source)}>
+                        <div className='ScreenPicker-screen-section-box'>
+                            <img className='ScreenPicker-img-wrapper' src={source.thumbnail as any} alt='thumbnail image'/>
+                        </div>
+                        <div className='ScreenPicker-screen-source-title'>{source.name}</div>
+                    </div>,
+                );
+            } else {
+                applications.push(
+                    <div
+                        className={shouldHighlight}
+                        id={source.id}
+                        onClick={() => this.eventHandlers.onSelect(source)}>
+                        <div className='ScreenPicker-screen-section-box'>
+                            <img className='ScreenPicker-img-wrapper' src={source.thumbnail as any} alt='thumbnail image'/>
+                        </div>
+                        <div className='ScreenPicker-screen-source-title'>{source.name}</div>
+                    </div>,
+                );
+            }
+        });
+        this.isScreensAvailable = screens.length > 0;
+        this.isApplicationsAvailable = applications.length > 0;
+        if (!this.isScreensAvailable && !this.isApplicationsAvailable) {
+            return (
+                <div className='ScreenPicker-error-content'>
+                <span className='error-message'>
+                    {i18n.t('No screens or applications are currently available.', SCREEN_PICKER_NAMESPACE)()}
+                    </span>
+                </div>
+            );
+        }
+
+        return (
+            <div className='ScreenPicker-main-content'>
+                {this.renderTabTitles()}
+                <section id='screen-contents'>{screens}</section>
+                <section id='application-contents'> {applications}</section>
+            </div>
+        );
+    }
+
+    /**
+     * Renders the screen and application tab section
+     */
+    private renderTabTitles(): JSX.Element[] | undefined {
+        const { selectedTab } = this.state;
+        if (this.isScreensAvailable && this.isApplicationsAvailable) {
+            return [
+                <input
+                    id='screen-tab'
+                    className='ScreenPicker-screen-tab'
+                    type='radio'
+                    name='tabs'
+                    checked={selectedTab === 'screens'}
+                    onChange={() => this.eventHandlers.onToggle('screens')}
+                />,
+                <label className={classNames('screens', { hidden: !this.isScreensAvailable })}
+                       htmlFor='screen-tab'
+                >
+                    {i18n.t('Screens', SCREEN_PICKER_NAMESPACE)()}
+                </label>,
+                <input
+                    id='application-tab'
+                    className='ScreenPicker-application-tab'
+                    type='radio'
+                    name='tabs'
+                    checked={selectedTab === 'applications'}
+                    onChange={() => this.eventHandlers.onToggle('applications')}
+                />,
+                <label className={classNames('applications', { hidden: !this.isApplicationsAvailable })}
+                       htmlFor='application-tab'
+                >
+                    {i18n.t('Applications', SCREEN_PICKER_NAMESPACE)()}
+                </label>,
+            ];
+        }
+        if (this.isScreensAvailable) {
+            return [
+                <input
+                    id='screen-tab'
+                    className='ScreenPicker-screen-tab'
+                    type='radio'
+                    name='tabs'
+                    checked={true}
+                    onChange={() => this.eventHandlers.onToggle('screens')}
+                />,
+                <label className={classNames('screens', { hidden: !this.isScreensAvailable })}
+                       htmlFor='screen-tab'
+                >
+                    {i18n.t('Screens', SCREEN_PICKER_NAMESPACE)()}
+                </label>,
+            ];
+        }
+        if (this.isApplicationsAvailable) {
+            return [
+                <input
+                    id='application-tab'
+                    className='ScreenPicker-application-tab'
+                    type='radio'
+                    name='tabs'
+                    checked={true}
+                    onChange={() => this.eventHandlers.onToggle('applications')}
+                />,
+                <label className={classNames('applications', { hidden: !this.isApplicationsAvailable })}
+                       htmlFor='application-tab'
+                >
+                    {i18n.t('Applications', SCREEN_PICKER_NAMESPACE)()}
+                </label>,
+            ];
+        }
+        return;
+    }
+
+    /**
+     * Updates the selected state
+     *
+     * @param id {string}
+     */
+    private shouldHighlight(id: string): boolean {
+        const { selectedSource } = this.state;
+        return selectedSource ? id === selectedSource.id : false;
+    }
+
+    /**
+     * updates the state when the source is selected
+     *
+     * @param selectedSource {DesktopCapturerSource}
+     */
+    private select(selectedSource: DesktopCapturerSource): void {
+        this.setState({ selectedSource });
+    }
+
+    /**
+     * Updates the screen picker tabs
+     *
+     * @param selectedTab
+     */
+    private toggle(selectedTab: tabs): void {
+        this.setState({ selectedTab });
+    }
+
+    /**
+     * Closes the screen picker window
+     */
+    private close(): void {
+        ipcRenderer.send(apiName.symphonyApi, {
+            cmd: apiCmds.closeWindow,
+            windowType: 'screen-picker',
+        });
+    }
+
+    /**
+     * Sends the selected source to the main process
+     * and closes the screen picker window
+     */
+    private submit(): void {
+        const { selectedSource } = this.state;
+        if (selectedSource) {
+            ipcRenderer.send('screen-source-selected', selectedSource);
+            this.eventHandlers.onClose();
+        }
+    }
+
+    /**
+     * Method handles used key up event
+     * @param e
+     */
+    private handleKeyUpPress(e): void {
+        const key = e.keyCode || e.which;
+        const { sources } = this.state;
+
+        switch (key) {
+            case keyCode.pageDown:
+            case keyCode.rightArrow:
+                this.updateSelectedSource(1);
+                break;
+            case keyCode.pageUp:
+            case keyCode.leftArrow:
+                this.updateSelectedSource(-1);
+                break;
+            case keyCode.homeKey:
+                if (this.currentIndex !== 0) {
+                    this.updateSelectedSource(0);
+                }
+                break;
+            case keyCode.upArrow:
+                this.updateSelectedSource(-2);
+                break;
+            case keyCode.endKey:
+                if (this.currentIndex !== sources.length - 1) {
+                    this.updateSelectedSource(sources.length - 1);
+                }
+                break;
+            case keyCode.arrowDown:
+                this.updateSelectedSource(2);
+                break;
+            case keyCode.enterKey:
+                this.eventHandlers.onSubmit();
+                break;
+            case keyCode.escapeKey:
+                this.eventHandlers.onClose();
+                break;
+            default:
+                break;
+        }
+    }
+
+    /**
+     * Updated the UI selected state based on
+     * the selected source state
+     *
+     * @param index
+     */
+    private updateSelectedSource(index) {
+        const { sources, selectedSource } = this.state;
+        if (selectedSource) {
+            this.currentIndex = sources.findIndex((source) => {
+                return source.id === selectedSource.id;
+            });
+        }
+
+        // Find the next item to be selected
+        const nextIndex = (this.currentIndex + index + sources.length) % sources.length;
+        if (sources[ nextIndex ] && sources[ nextIndex ].id) {
+            // Updates the selected source
+            this.setState({ selectedSource: sources[ nextIndex ] });
+        }
+    }
+
+    /**
+     * Sets the About app state
+     *
+     * @param _event
+     * @param data {Object}
+     */
+    private updateState(_event, data): void {
+        this.setState(data as IState);
+    }
+}

src/renderer/components/snack-bar.tsx

@@ -2,7 +2,7 @@ import { ipcRenderer } from 'electron';
 import * as React from 'react';
 
 import Timer = NodeJS.Timer;
-import { i18n } from '../common/i18n';
+import { i18n } from '../../common/i18n';
 
 interface IState {
     show: boolean;

src/renderer/components/windows-title-bar.tsx

@@ -1,9 +1,9 @@
 import { ipcRenderer, remote } from 'electron';
 import * as React from 'react';
 
-import { apiCmds, apiName } from '../common/api-interface';
-import { i18n } from '../common/i18n';
-import { throttle } from '../common/utils';
+import { apiCmds, apiName } from '../../common/api-interface';
+import { i18n } from '../../common/i18n';
+import { throttle } from '../../common/utils';
 
 interface IState {
     isMaximized: boolean;

src/renderer/desktop-capturer.ts

@@ -0,0 +1,146 @@
+import {
+    desktopCapturer,
+    DesktopCapturerSource,
+    ipcRenderer,
+    remote,
+    SourcesOptions,
+} from 'electron';
+
+import { apiCmds, apiName } from '../common/api-interface';
+import { isWindowsOS } from '../common/env';
+import { i18n } from '../common/i18n';
+
+const includes = [].includes;
+
+let nextId = 0;
+// TODO: add logic to check for permissions
+let isScreenShareEnabled = true;
+let screenShareArgv: string;
+
+type CallbackType = (error: Error | null, source?: DesktopCapturerSource) => DesktopCapturerSource | Error;
+const getNextId = () => ++nextId;
+
+/**
+ * Checks if the options and their types are valid
+ * @param options |options.type| can not be empty and has to include 'window' or 'screen'.
+ * @returns {boolean}
+ */
+const isValid = (options: SourcesOptions) => {
+    return ((options !== null ? options.types : undefined) !== null) && Array.isArray(options.types);
+};
+
+/**
+ * Gets the sources for capturing screens / windows
+ *
+ * @param options {SourcesOptions}
+ * @param callback {CallbackType}
+ * @returns {*}
+ */
+export const getSource = (options: SourcesOptions, callback: CallbackType) => {
+    let captureWindow;
+    let captureScreen;
+    let id;
+    const sourcesOpts: string[] = [];
+    if (!isValid(options)) {
+        callback(new Error('Invalid options'));
+        return;
+    }
+    captureWindow = includes.call(options.types, 'window');
+    captureScreen = includes.call(options.types, 'screen');
+
+    const updatedOptions = options;
+    if (!updatedOptions.thumbnailSize) {
+        updatedOptions.thumbnailSize = {
+            height: 150,
+            width: 150,
+        };
+    }
+
+    if (isWindowsOS && captureWindow) {
+        /**
+         * Sets the captureWindow to false if Desktop composition
+         * is disabled otherwise true
+         *
+         * Setting captureWindow to false returns only screen sources
+         * @type {boolean}
+         */
+        captureWindow = remote.systemPreferences.isAeroGlassEnabled();
+    }
+
+    if (captureWindow) {
+        sourcesOpts.push('window');
+    }
+    if (captureScreen) {
+        sourcesOpts.push('screen');
+    }
+
+    // displays a dialog if media permissions are disable
+    if (!isScreenShareEnabled) {
+        const focusedWindow = remote.BrowserWindow.getFocusedWindow();
+        if (focusedWindow && !focusedWindow.isDestroyed()) {
+            remote.dialog.showMessageBox(focusedWindow, {
+                message: i18n.t('Your administrator has disabled screen share. Please contact your admin for help')(),
+                title: `${i18n.t('Permission Denied')()}!`,
+                type: 'error',
+            });
+            callback(new Error('Permission Denied'));
+            return;
+        }
+    }
+
+    id = getNextId();
+    desktopCapturer.getSources({ types: sourcesOpts, thumbnailSize: updatedOptions.thumbnailSize }, (_event, sources: DesktopCapturerSource[]) => {
+
+        // Auto select screen source based on args for testing only
+        if (screenShareArgv) {
+            const title = screenShareArgv.substr(screenShareArgv.indexOf('=') + 1);
+            const filteredSource: DesktopCapturerSource[] = sources.filter((source) => source.name === title);
+
+            if (Array.isArray(filteredSource) && filteredSource.length > 0) {
+                return callback(null, filteredSource[ 0 ]);
+            }
+
+            if (sources.length > 0) {
+                return callback(null, sources[ 0 ]);
+            }
+
+        }
+
+        const updatedSources = sources.map((source) => {
+            return Object.assign({}, source, {
+                thumbnail: source.thumbnail.toDataURL(),
+            });
+        });
+
+        ipcRenderer.send(apiName.symphonyApi, {
+            cmd: apiCmds.openScreenPickerWindow,
+            id,
+            sources: updatedSources,
+        });
+
+        const successCallback = (_e, source: DesktopCapturerSource) => {
+            // Cleaning up the event listener to prevent memory leaks
+            if (!source) {
+                ipcRenderer.removeListener('start-share' + id, successCallback);
+                return callback(new Error('User Cancelled'));
+            }
+            return callback(null, source);
+        };
+        ipcRenderer.once('start-share' + id, successCallback);
+        return null;
+    });
+};
+
+// event that updates screen share argv
+ipcRenderer.once('screen-share-argv', (_event, arg) => {
+    if (typeof arg === 'string') {
+        screenShareArgv = arg;
+    }
+});
+
+// event that updates screen share permission
+ipcRenderer.on('is-screen-share-enabled', (_event, screenShare) => {
+    if (typeof screenShare === 'boolean' && screenShare) {
+        isScreenShareEnabled = true;
+    }
+});

src/renderer/preload-component.ts

@@ -1,9 +1,10 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 
-import AboutBox from './about-app';
-import LoadingScreen from './loading-screen';
-import MoreInfo from './more-info';
+import AboutBox from './components/about-app';
+import LoadingScreen from './components/loading-screen';
+import MoreInfo from './components/more-info';
+import ScreenPicker from './components/screen-picker';
 
 /**
  * Loads the appropriate component
@@ -23,6 +24,9 @@ const load = () => {
         case 'more-info-window':
             component = MoreInfo;
             break;
+        case 'screen-picker-window':
+            component = ScreenPicker;
+            break;
     }
     const element = React.createElement(component);
     ReactDOM.render(element, document.getElementById('Root'));

src/renderer/preload-main.ts

@@ -2,8 +2,8 @@ import { ipcRenderer } from 'electron';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 
-import WindowsTitleBar from '../renderer/windows-title-bar';
-import SnackBar from './snack-bar';
+import SnackBar from './components/snack-bar';
+import WindowsTitleBar from './components/windows-title-bar';
 import { SSFApi } from './ssf-api';
 
 interface ISSFWindow extends Window {

src/renderer/ssf-api.ts

@@ -10,6 +10,7 @@ import {
 } from '../common/api-interface';
 import { i18n, LocaleType } from '../common/i18n';
 import { throttle } from '../common/utils';
+import { getSource } from './desktop-capturer';
 
 interface ILocalObject {
     ipcRenderer;
@@ -52,6 +53,17 @@ export class SSFApi {
      */
     public CryptoLib: ICryptoLib | null = cryptoLib; // tslint:disable-line
 
+    /**
+     * Implements equivalent of desktopCapturer.getSources - that works in
+     * a sandboxed renderer process.
+     * see: https://electron.atom.io/docs/api/desktop-capturer/
+     * for interface: see documentation in desktopCapturer/getSource.js
+     *
+     * This opens a window and displays all the desktop sources
+     * and returns selected source
+     */
+    public getMediaSource = getSource;
+
     /**
      * Allows JS to register a activity detector that can be used by electron main process.
      *

src/renderer/styles/main.less

@@ -1,5 +1,6 @@
 @import "about-app";
 @import "loading-screen";
+@import "screen-picker";
 
 html, body {
   margin: 0;

src/renderer/styles/screen-picker.less

@@ -0,0 +1,236 @@
+@close-button-color: rgba(221, 221, 221, 1);
+@label-color: rgba(187, 187, 187, 1);
+@input-label-color: rgba(61, 162, 253, 1);
+@title-color: grey;
+@cancel-button-color: rgba(0, 0, 0, 0.38);
+@cancel-button-hover-color: black;
+@share-button-color: rgba(255, 255, 255, 1);
+@share-button-disabled-color: rgba(148, 148, 148, 1);
+
+@font-family: "system";
+
+@cancel-button-bg-color: rgba(255, 255, 255, 0);
+@share-button-enabled-bg-color: rgba(61, 162, 253, 1);
+@share-button-disabled-bg-color: rgba(221, 221, 221, 1);
+@border-color: rgba(61, 162, 253, 1);
+
+@font-face {
+  font-family: system;
+  font-style: normal;
+  src: local(".SFNSText-Light"), local(".HelveticaNeueDeskInterface-Light"), local(".LucidaGrandeUI"), local("Ubuntu Light"), local("Segoe UI Light"), local("Roboto-Light"), local("DroidSans"), local("Tahoma");
+}
+
+
+
+.ScreenPicker {
+  margin: 0 auto;
+  overflow: hidden;
+  font-family: @font-family;
+
+  &-window-border {
+    border: 2px solid rgba(68, 68, 68, 1);
+  }
+
+  &-content {
+    margin: 0 auto;
+    background: rgba(249, 249, 250, 1);
+    text-align: center;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  &-title {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px 16px 30px;
+    font-size: 1.2rem;
+    line-height: 1.3;
+    text-align: left;
+    -webkit-user-select: none;
+    -webkit-app-region: drag;
+  }
+
+  &-x-button {
+    width: 20px;
+    color: @close-button-color;
+    -webkit-app-region: no-drag;
+    cursor: pointer;
+
+    span {
+      font-style: normal;
+      margin: 0 0 0 4px;
+      font-size: 1.2rem;
+      min-height: 13px;
+    }
+  }
+
+  input {
+    display: none;
+
+    &:checked {
+      & + label {
+        color: @input-label-color;
+        border-bottom: 4px solid rgba(61, 162, 253, 1);
+      }
+    }
+  }
+
+  label {
+    display: inline-block;
+    padding: 5px 25px;
+    font-size: 0.8em;
+    letter-spacing: 1px;
+    text-align: center;
+    color: @label-color;
+    text-transform: uppercase;
+    border: 1px solid transparent;
+    -webkit-user-select: none;
+  }
+
+  section {
+    display: none;
+    height: 331px;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    padding: 20px 0 0;
+    border-top: 1px solid rgba(221, 221, 221, 1);
+    flex-flow: row wrap;
+    text-align: center;
+    justify-content: center;
+  }
+
+  &-screen-tab {
+    &:checked {
+      & ~ #screen-contents {
+        display: flex;
+      }
+    }
+  }
+
+  &-application-tab {
+    &:checked {
+      & ~ #application-contents {
+        display: flex;
+      }
+    }
+  }
+
+  &-main-content {
+    display: block;
+  }
+
+  &-item-container {
+    background: rgba(255, 255, 255, 1);
+    border-radius: 2px;
+    display: inline-block;
+    height: 150px;
+    margin: 5px;
+    position: relative;
+    width: 40%;
+    border: 1px solid rgba(0, 0, 0, .1);
+
+    &:hover {
+      box-shadow: 0 1px 5px rgba(0, 0, 0, .1), 0 5px 5px rgba(0, 0, 0, .1);
+      cursor: pointer;
+    }
+  }
+
+  &-screen-section-box {
+    -webkit-transition: all 1.0s ease;
+    width: 100%;
+    height: 100px;
+    overflow: hidden;
+    margin: 10px auto;
+  }
+
+  &-img-wrapper {
+    max-height: 200px;
+    width: auto;
+  }
+
+  &-screen-source-title {
+    white-space: nowrap;
+    width: 70%;
+    overflow: hidden;
+    font-size: 0.8rem;
+    color: @title-color;
+    margin: auto;
+    text-overflow: ellipsis;
+  }
+
+  &-selected {
+    border-color: @border-color;
+    border-bottom-style: solid;
+  }
+
+  footer {
+    padding: 10px 16px;
+    border-top: 1px solid rgba(0, 0, 0, 0.10);
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+  }
+
+  button {
+    box-shadow: none;
+    border: none;
+    border-radius: 20px;
+    font-size: 0.8rem;
+    text-align: center;
+    padding: 8px 32px;
+    margin: 8px 8px 8px 0;
+    display: inline-block;
+    text-decoration: none;
+    line-height: 12px;
+
+    &:focus {
+      box-shadow: 0 0 10px rgba(61, 162, 253, 1);
+      outline: none;
+    }
+  }
+
+  &-cancel-button {
+    color: @cancel-button-color;
+    background-color: @cancel-button-bg-color;
+    text-transform: uppercase;
+    padding: 8px 16px;
+
+    &:hover {
+      background-color: @cancel-button-bg-color;
+      color: @cancel-button-hover-color;
+      cursor: pointer;
+    }
+  }
+
+  &-share-button {
+    background-color: @share-button-enabled-bg-color;
+    color: @share-button-color;
+    cursor: pointer;
+    text-transform: uppercase;
+    box-shadow: none;
+  }
+
+  &-share-button-disable {
+    background-color: @share-button-disabled-bg-color;
+    color: @share-button-disabled-color;
+    text-transform: uppercase;
+    cursor: default;
+    box-shadow: none;
+  }
+
+  .hidden {
+    display: none;
+  }
+
+  &-error-content {
+    display: none;
+    padding: 180px 0 180px;
+    border-top: 1px solid rgba(221, 221, 221, 1);
+
+    span {
+      color: @cancel-button-color;
+    }
+  }
+}

tslint.json

@@ -32,6 +32,7 @@
     "no-use-before-declare": true,
     "no-var-requires": true,
     "only-arrow-functions": true,
+    "object-literal-sort-keys": false,
     "no-console": [
       true,
       "log",