Resolve merge conflict with master

.travis.yml

@@ -18,12 +18,5 @@ matrix:
             - libpng-dev
             - libxtst-dev
 
-before_script:
-  - | # Fix chrome-sandbox: https://github.com/electron/electron/issues/17972
-      if [[ "${TRAVIS_OS_NAME}" == "linux" ]]; then
-        echo "Fixing chrome-sandbox permissions..."
-        sudo chown root ./node_modules/electron/dist/chrome-sandbox
-        sudo chmod 4755 ./node_modules/electron/dist/chrome-sandbox
-      fi
 script:
   - npm run dist

README.md

@@ -57,6 +57,13 @@ location /external_api.js {
 }
 ```
 
+The following additional HTTP header are known not work with the Electron App:
+
+```
+Content-Security-Policy "frame-ancestors 'none'";
+X-Frame-Options "DENY";
+```
+
 ## Development
 
 If you want to hack on this project, here is how you do it.

app/features/conference/components/Conference.js

@@ -8,7 +8,7 @@ import { connect } from 'react-redux';
 import { push } from 'react-router-redux';
 
 import config from '../../config';
-import { setEmail, setName } from '../../settings';
+import { getSetting, setEmail, setName } from '../../settings';
 
 import { conferenceEnded, conferenceJoined } from '../actions';
 import { LoadingIndicator, Wrapper } from '../styled';
@@ -403,17 +403,12 @@ class Conference extends Component<Props, State> {
  * Maps (parts of) the redux state to the React props.
  *
  * @param {Object} state - The redux state.
- * @returns {{
- *     _avatarURL: string,
- *     _email: string,
- *     _name: string,
- *     _serverURL: string,
- *     _startWithAudioMuted: boolean,
- *     _startWithVideoMuted: boolean
- * }}
+ * @returns {Props}
  */
 function _mapStateToProps(state: Object) {
     return {
+        _alwaysOnTopWindowEnabled:
+            getSetting(state, 'alwaysOnTopWindowEnabled', true),
         _avatarURL: state.settings.avatarURL,
         _email: state.settings.email,
         _name: state.settings.name,

app/features/onboarding/components/AlwaysOnTopWindowSpotlight.js

@@ -0,0 +1,78 @@
+// @flow
+
+import { Spotlight } from '@atlaskit/onboarding';
+
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import type { Dispatch } from 'redux';
+
+import { closeDrawer } from '../../navbar';
+
+import { continueOnboarding } from '../actions';
+
+type Props = {
+
+    /**
+     * Redux dispatch.
+     */
+    dispatch: Dispatch<*>;
+};
+
+/**
+ * Always on Top Windows Spotlight Component.
+ */
+class AlwaysOnTopWindowSpotlight extends Component<Props, *> {
+    /**
+     * Initializes a new {@code StartMutedTogglesSpotlight} instance.
+     *
+     * @inheritdoc
+     */
+    constructor(props: Props) {
+        super(props);
+
+        this._next = this._next.bind(this);
+    }
+
+    /**
+     * Render function of component.
+     *
+     * @returns {ReactElement}
+     */
+    render() {
+        return (
+            <Spotlight
+                actions = { [
+                    {
+                        onClick: this._next,
+                        text: 'Next'
+                    }
+                ] }
+                dialogPlacement = 'left top'
+                target = { 'always-on-top-window' } >
+                You can toggle whether you want to enable the "always-on-top" window,
+                which is displayed when the main window loses focus.
+                This will be applied to all conferences.
+            </Spotlight>
+        );
+    }
+
+    _next: (*) => void;
+
+    /**
+     * Close the spotlight component.
+     *
+     * @returns {void}
+     */
+    _next() {
+        const { dispatch } = this.props;
+
+        dispatch(continueOnboarding());
+
+        // FIXME: find a better way to do this.
+        setTimeout(() => {
+            dispatch(closeDrawer());
+        }, 300);
+    }
+}
+
+export default connect()(AlwaysOnTopWindowSpotlight);

app/features/onboarding/components/StartMutedTogglesSpotlight.js

@@ -6,8 +6,6 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import type { Dispatch } from 'redux';
 
-import { closeDrawer } from '../../navbar';
-
 import { continueOnboarding } from '../actions';
 
 type Props = {
@@ -63,14 +61,7 @@ class StartMutedTogglesSpotlight extends Component<Props, *> {
      * @returns {void}
      */
     _next() {
-        const { dispatch } = this.props;
-
-        dispatch(continueOnboarding());
-
-        // FIXME: find a better way to do this.
-        setTimeout(() => {
-            dispatch(closeDrawer());
-        }, 300);
+        this.props.dispatch(continueOnboarding());
     }
 }
 

app/features/onboarding/components/index.js

@@ -8,3 +8,6 @@ export { default as SettingsDrawerSpotlight } from './SettingsDrawerSpotlight';
 export {
     default as StartMutedTogglesSpotlight
 } from './StartMutedTogglesSpotlight';
+export {
+    default as AlwaysOnTopWindowSpotlight
+} from './AlwaysOnTopWindowSpotlight';

app/features/onboarding/constants.js

@@ -7,7 +7,8 @@ import {
     NameSettingSpotlight,
     EmailSettingSpotlight,
     ServerSettingSpotlight,
-    StartMutedTogglesSpotlight
+    StartMutedTogglesSpotlight,
+    AlwaysOnTopWindowSpotlight
 } from './components';
 
 export const onboardingSteps = {
@@ -20,7 +21,8 @@ export const onboardingSteps = {
         'name-setting',
         'email-setting',
         'server-setting',
-        'start-muted-toggles'
+        'start-muted-toggles',
+        'always-on-top-window'
     ]
 };
 
@@ -31,5 +33,6 @@ export const onboardingComponents = {
     'name-setting': NameSettingSpotlight,
     'email-setting': EmailSettingSpotlight,
     'server-setting': ServerSettingSpotlight,
-    'start-muted-toggles': StartMutedTogglesSpotlight
+    'start-muted-toggles': StartMutedTogglesSpotlight,
+    'always-on-top-window': AlwaysOnTopWindowSpotlight
 };

app/features/settings/components/AlwaysOnTopWindowToggle.js

@@ -4,7 +4,6 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import type { Dispatch } from 'redux';
 
-import { TogglesContainer } from '../styled';
 import { setWindowAlwaysOnTop } from '../actions';
 
 import ToggleWithLabel from './ToggleWithLabel';
@@ -45,13 +44,11 @@ class AlwaysOnTopWindowToggle extends Component<Props> {
      */
     render() {
         return (
-            <TogglesContainer>
-                <ToggleWithLabel
-                    isDefaultChecked = { this.props._alwaysOnTopWindowEnabled }
-                    label = 'Always on Top Window'
-                    onChange = { this._onAlwaysOnTopWindowToggleChange }
-                    value = { this.props._alwaysOnTopWindowEnabled } />
-            </TogglesContainer>
+           <ToggleWithLabel
+                isDefaultChecked = { this.props._alwaysOnTopWindowEnabled }
+                label = 'Always on Top Window'
+                onChange = { this._onAlwaysOnTopWindowToggleChange }
+                value = { this.props._alwaysOnTopWindowEnabled } />
         );
     }
 

app/features/settings/components/SettingsDrawer.js

@@ -12,7 +12,7 @@ import type { Dispatch } from 'redux';
 
 import { closeDrawer, DrawerContainer, Logo } from '../../navbar';
 import { Onboarding, startOnboarding } from '../../onboarding';
-import { AvatarContainer, SettingsContainer } from '../styled';
+import { AvatarContainer, SettingsContainer, TogglesContainer } from '../styled';
 import { setEmail, setName } from '../actions';
 
 import AlwaysOnTopWindowToggle from './AlwaysOnTopWindowToggle';
@@ -130,14 +130,16 @@ class SettingsDrawer extends Component<Props, *> {
                             name = 'server-setting'>
                             <ServerURLField />
                         </SpotlightTarget>
-                        <SpotlightTarget
-                            name = 'start-muted-toggles'>
-                            <StartMutedToggles />
-                        </SpotlightTarget>
-                        <SpotlightTarget
-                            name = 'window-always-on-top'>
-                            <AlwaysOnTopWindowToggle />
-                        </SpotlightTarget>
+                        <TogglesContainer>
+                            <SpotlightTarget
+                                name = 'start-muted-toggles'>
+                                <StartMutedToggles />
+                            </SpotlightTarget>
+                            <SpotlightTarget
+                                name = 'always-on-top-window'>
+                                <AlwaysOnTopWindowToggle />
+                            </SpotlightTarget>
+                        </TogglesContainer>
                         <Onboarding section = 'settings-drawer' />
                     </SettingsContainer>
                 </DrawerContainer>

app/features/settings/components/StartMutedToggles.js

@@ -4,7 +4,6 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import type { Dispatch } from 'redux';
 
-import { TogglesContainer } from '../styled';
 import {
     setStartWithAudioMuted,
     setStartWithVideoMuted
@@ -85,7 +84,7 @@ class StartMutedToggles extends Component<Props, State> {
      */
     render() {
         return (
-            <TogglesContainer>
+            <>
                 <ToggleWithLabel
                     isDefaultChecked = { this.props._startWithAudioMuted }
                     label = 'Start with Audio muted'
@@ -96,7 +95,7 @@ class StartMutedToggles extends Component<Props, State> {
                     label = 'Start with Video muted'
                     onChange = { this._onVideoToggleChange }
                     value = { this.state.startWithVideoMuted } />
-            </TogglesContainer>
+            </>
         );
     }
 

app/features/settings/functions.js

@@ -0,0 +1,20 @@
+// @flow
+
+/**
+ * Get's the value for the given setting, providing a default value.
+ *
+ * @param {Object} state - The redux state.
+ * @param {string} setting - The name for the desired setting.
+ * @param {*} defaultValue - The default value, in case the setting is
+ * undefined.
+ * @returns {*} The setting value.
+ */
+export function getSetting(state: Object, setting: string, defaultValue: any) {
+    const value = state.settings[setting];
+
+    if (typeof value === 'undefined') {
+        return defaultValue;
+    }
+
+    return value;
+}

app/features/settings/index.js

@@ -1,6 +1,7 @@
 export * from './actions';
 export * from './actionTypes';
 export * from './components';
+export * from './functions';
 export * from './styled';
 
 export { default as middleware } from './middleware';

app/features/settings/reducer.js

@@ -25,6 +25,7 @@ type State = {
 const username = window.jitsiNodeAPI.osUserInfo().username;
 
 const DEFAULT_STATE = {
+    alwaysOnTopWindowEnabled: true,
     avatarURL: getAvatarURL({ id: username }),
     email: '',
     name: username,