if/SymphonyElectron
1
0
Fork 0
mirror of https://github.com/finos/SymphonyElectron.git synced 2024-11-21 16:38:41 -06:00
Code Issues Packages Projects Releases Wiki Activity

Typescript - Completed Desktop capturer & screen picker implementation

Browse Source
This commit is contained in:
Kiran Niranjan 2018-12-19 11:46:03 +05:30
parent c17d5e8536
commit 1054884417
18 changed files with 870 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -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",

15
src/browser/main-api-handler.ts
View File

@ -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:
}

76
src/browser/window-handler.ts
View File

@ -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
*/

1
src/browser/window-utils.ts
View File

@ -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({

4
src/common/api-interface.ts
View File

@ -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
*/

2
src/renderer/about-app.tsx → src/renderer/components/about-app.tsx
View File

@ -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>

2
src/renderer/loading-screen.tsx → src/renderer/components/loading-screen.tsx
View File

@ -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)'>

0
src/renderer/more-info.tsx → src/renderer/components/more-info.tsx
View File

370
src/renderer/components/screen-picker.tsx Normal file
View File

@ -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);
}
}

2
src/renderer/snack-bar.tsx → src/renderer/components/snack-bar.tsx
View File

@ -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;

6
src/renderer/windows-title-bar.tsx → src/renderer/components/windows-title-bar.tsx
View File

@ -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;

146
src/renderer/desktop-capturer.ts Normal file
View File

@ -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;
}
});

10
src/renderer/preload-component.ts
View File

@ -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'));

4
src/renderer/preload-main.ts
View File

@ -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 {

12
src/renderer/ssf-api.ts
View File

@ -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.
*

1
src/renderer/styles/main.less
View File

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

236
src/renderer/styles/screen-picker.less Normal file
View File

@ -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;
}
}
}

1
tslint.json
View File

@ -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",