feat(screenSharing): Add support for audio screen sharing on electron

lang/main.json

@@ -244,6 +244,7 @@
         "reservationError": "Reservation system error",
         "reservationErrorMsg": "Error code: {{code}}, message: {{msg}}",
         "retry": "Retry",
+        "screenSharingAudio": "Share audio",
         "screenSharingFailedToInstall": "Oops! Your screen sharing extension failed to install.",
         "screenSharingFailedToInstallTitle": "Screen sharing extension failed to install",
         "screenSharingFirefoxPermissionDeniedError": "Something went wrong while we were trying to share your screen. Please make sure that you have given us permission to do so. ",

package-lock.json

@@ -10883,8 +10883,8 @@
       }
     },
     "lib-jitsi-meet": {
-      "version": "github:jitsi/lib-jitsi-meet#4a2abb179672aebecf9d780f796fcca531bb2398",
-      "from": "github:jitsi/lib-jitsi-meet#4a2abb179672aebecf9d780f796fcca531bb2398",
+      "version": "github:jitsi/lib-jitsi-meet#960eea3c5087ce07e9135fad70268c7d338e0de5",
+      "from": "github:jitsi/lib-jitsi-meet#960eea3c5087ce07e9135fad70268c7d338e0de5",
       "requires": {
         "@jitsi/sdp-interop": "0.1.14",
         "@jitsi/sdp-simulcast": "0.2.2",

package.json

@@ -56,7 +56,7 @@
     "js-utils": "github:jitsi/js-utils#0b2cef90613a74777fefd98d4ee3eda3879809ab",
     "jsrsasign": "8.0.12",
     "jwt-decode": "2.2.0",
-    "lib-jitsi-meet": "github:jitsi/lib-jitsi-meet#4a2abb179672aebecf9d780f796fcca531bb2398",
+    "lib-jitsi-meet": "github:jitsi/lib-jitsi-meet#960eea3c5087ce07e9135fad70268c7d338e0de5",
     "libflacjs": "github:mmig/libflac.js#93d37e7f811f01cf7d8b6a603e38bd3c3810907d",
     "lodash": "4.17.13",
     "moment": "2.19.4",

react/features/desktop-picker/components/DesktopPicker.js

@@ -74,6 +74,11 @@ type Props = {
  */
 type State = {
 
+    /**
+     * The state of the audio screen share checkbox.
+     */
+    screenShareAudio: boolean,
+
     /**
      * The currently higlighted DesktopCapturerSource.
      */
@@ -128,6 +133,7 @@ class DesktopPicker extends PureComponent<Props, State> {
     _poller = null;
 
     state = {
+        screenShareAudio: false,
         selectedSource: {},
         selectedTab: 0,
         sources: {},
@@ -153,6 +159,7 @@ class DesktopPicker extends PureComponent<Props, State> {
         // Bind event handlers so they are only bound once per instance.
         this._onCloseModal = this._onCloseModal.bind(this);
         this._onPreviewClick = this._onPreviewClick.bind(this);
+        this._onShareAudioChecked = this._onShareAudioChecked.bind(this);
         this._onSubmit = this._onSubmit.bind(this);
         this._onTabSelected = this._onTabSelected.bind(this);
         this._updateSources = this._updateSources.bind(this);
@@ -241,7 +248,7 @@ class DesktopPicker extends PureComponent<Props, State> {
         return selectedSource;
     }
 
-    _onCloseModal: (?string, string) => void;
+    _onCloseModal: (?string, string, ?boolean) => void;
 
     /**
      * Dispatches an action to hide the DesktopPicker and invokes the passed in
@@ -251,10 +258,12 @@ class DesktopPicker extends PureComponent<Props, State> {
      * the onSourceChoose callback.
      * @param {string} type - The type of the DesktopCapturerSource to pass into
      * the onSourceChoose callback.
+     * @param {boolean} screenShareAudio - Whether or not to add system audio to
+     * screen sharing session.
      * @returns {void}
      */
-    _onCloseModal(id = '', type) {
-        this.props.onSourceChoose(id, type);
+    _onCloseModal(id = '', type, screenShareAudio = false) {
+        this.props.onSourceChoose(id, type, screenShareAudio);
         this.props.dispatch(hideDialog());
     }
 
@@ -285,9 +294,9 @@ class DesktopPicker extends PureComponent<Props, State> {
      * @returns {void}
      */
     _onSubmit() {
-        const { id, type } = this.state.selectedSource;
+        const { selectedSource: { id, type }, screenShareAudio } = this.state;
 
-        this._onCloseModal(id, type);
+        this._onCloseModal(id, type, screenShareAudio);
     }
 
     _onTabSelected: () => void;
@@ -306,12 +315,29 @@ class DesktopPicker extends PureComponent<Props, State> {
         const { types, sources } = this.state;
 
         this._selectedTabType = types[tabIndex];
+
+        // When we change tabs also reset the screenShareAudio state so we don't
+        // use the option from one tab when sharing from another.
         this.setState({
+            screenShareAudio: false,
             selectedSource: this._getSelectedSource(sources),
             selectedTab: tabIndex
         });
     }
 
+    _onShareAudioChecked: (boolean) => void;
+
+    /**
+     * Set the screenSharingAudio state indicating whether or not to also share
+     * system audio.
+     *
+     * @param {boolean} checked - Share audio or not.
+     * @returns {void}
+     */
+    _onShareAudioChecked(checked) {
+        this.setState({ screenShareAudio: checked });
+    }
+
     /**
      * Configures and renders the tabs for display.
      *
@@ -328,7 +354,8 @@ class DesktopPicker extends PureComponent<Props, State> {
                         content: <DesktopPickerPane
                             key = { type }
                             onClick = { this._onPreviewClick }
-                            onDoubleClick = { this._onCloseModal }
+                            onDoubleClick = { this._onSubmit }
+                            onShareAudioChecked = { this._onShareAudioChecked }
                             selectedSourceId = { selectedSource.id }
                             sources = { sources[type] }
                             type = { type } />,

react/features/desktop-picker/components/DesktopPickerPane.js

@@ -1,8 +1,12 @@
 /* @flow */
 
+import { Checkbox } from '@atlaskit/checkbox';
 import Spinner from '@atlaskit/spinner';
 import React, { Component } from 'react';
 
+import { Platform } from '../../base/react';
+import { translate } from '../../base/i18n';
+
 import DesktopSourcePreview from './DesktopSourcePreview';
 
 /**
@@ -20,6 +24,11 @@ type Props = {
      */
     onDoubleClick: Function,
 
+    /**
+     * The handler to be invoked if the users checks the audio screen sharing checkbox.
+     */
+    onShareAudioChecked: Function,
+
     /**
      * The id of the DesktopCapturerSource that is currently selected.
      */
@@ -33,7 +42,12 @@ type Props = {
     /**
      * The source type of the DesktopCapturerSources to display.
      */
-    type: string
+    type: string,
+
+    /**
+     * Used to obtain translations.
+     */
+    t: Function
 };
 
 /**
@@ -42,6 +56,31 @@ type Props = {
  * @extends Component
  */
 class DesktopPickerPane extends Component<Props> {
+
+    /**
+     * Initializes a new DesktopPickerPane instance.
+     *
+     * @param {Object} props - The read-only properties with which the new
+     * instance is to be initialized.
+     */
+    constructor(props: Props) {
+        super(props);
+
+        this._onShareAudioCheck = this._onShareAudioCheck.bind(this);
+    }
+
+    _onShareAudioCheck: (Object) => void;
+
+    /**
+     * Function to be called when the Checkbox is used.
+     *
+     * @param {boolean} checked - Checkbox status (checked or not).
+     * @returns {void}
+     */
+    _onShareAudioCheck({ target: { checked } }) {
+        this.props.onShareAudioChecked(checked);
+    }
+
     /**
      * Implements React's {@link Component#render()}.
      *
@@ -54,7 +93,8 @@ class DesktopPickerPane extends Component<Props> {
             onDoubleClick,
             selectedSourceId,
             sources,
-            type
+            type,
+            t
         } = this.props;
 
         const classNames
@@ -77,12 +117,25 @@ class DesktopPickerPane extends Component<Props> {
                     </div>
                 );
 
+        let checkBox;
+
+        // Only display the share audio checkbox if we're on windows and on
+        // desktop sharing tab.
+        // App window and Mac OS screen sharing doesn't work with system audio.
+        if (type === 'screen' && Platform.OS === 'windows') {
+            checkBox = (<Checkbox
+                label = { t('dialog.screenSharingAudio') }
+                name = 'share-system-audio'
+                onChange = { this._onShareAudioCheck } />);
+        }
+
         return (
             <div className = { classNames }>
                 { previews }
+                { checkBox }
             </div>
         );
     }
 }
 
-export default DesktopPickerPane;
+export default translate(DesktopPickerPane);