Browse Source

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

master
Andrei Gavrilescu 5 years ago
parent
commit
9d6a93119b
No account linked to committer's email address

+ 1
- 0
lang/main.json View File

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

+ 2
- 2
package-lock.json View File

10883
       }
10883
       }
10884
     },
10884
     },
10885
     "lib-jitsi-meet": {
10885
     "lib-jitsi-meet": {
10886
-      "version": "github:jitsi/lib-jitsi-meet#4a2abb179672aebecf9d780f796fcca531bb2398",
10887
-      "from": "github:jitsi/lib-jitsi-meet#4a2abb179672aebecf9d780f796fcca531bb2398",
10886
+      "version": "github:jitsi/lib-jitsi-meet#960eea3c5087ce07e9135fad70268c7d338e0de5",
10887
+      "from": "github:jitsi/lib-jitsi-meet#960eea3c5087ce07e9135fad70268c7d338e0de5",
10888
       "requires": {
10888
       "requires": {
10889
         "@jitsi/sdp-interop": "0.1.14",
10889
         "@jitsi/sdp-interop": "0.1.14",
10890
         "@jitsi/sdp-simulcast": "0.2.2",
10890
         "@jitsi/sdp-simulcast": "0.2.2",

+ 1
- 1
package.json View File

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

+ 33
- 6
react/features/desktop-picker/components/DesktopPicker.js View File

74
  */
74
  */
75
 type State = {
75
 type State = {
76
 
76
 
77
+    /**
78
+     * The state of the audio screen share checkbox.
79
+     */
80
+    screenShareAudio: boolean,
81
+
77
     /**
82
     /**
78
      * The currently higlighted DesktopCapturerSource.
83
      * The currently higlighted DesktopCapturerSource.
79
      */
84
      */
128
     _poller = null;
133
     _poller = null;
129
 
134
 
130
     state = {
135
     state = {
136
+        screenShareAudio: false,
131
         selectedSource: {},
137
         selectedSource: {},
132
         selectedTab: 0,
138
         selectedTab: 0,
133
         sources: {},
139
         sources: {},
153
         // Bind event handlers so they are only bound once per instance.
159
         // Bind event handlers so they are only bound once per instance.
154
         this._onCloseModal = this._onCloseModal.bind(this);
160
         this._onCloseModal = this._onCloseModal.bind(this);
155
         this._onPreviewClick = this._onPreviewClick.bind(this);
161
         this._onPreviewClick = this._onPreviewClick.bind(this);
162
+        this._onShareAudioChecked = this._onShareAudioChecked.bind(this);
156
         this._onSubmit = this._onSubmit.bind(this);
163
         this._onSubmit = this._onSubmit.bind(this);
157
         this._onTabSelected = this._onTabSelected.bind(this);
164
         this._onTabSelected = this._onTabSelected.bind(this);
158
         this._updateSources = this._updateSources.bind(this);
165
         this._updateSources = this._updateSources.bind(this);
241
         return selectedSource;
248
         return selectedSource;
242
     }
249
     }
243
 
250
 
244
-    _onCloseModal: (?string, string) => void;
251
+    _onCloseModal: (?string, string, ?boolean) => void;
245
 
252
 
246
     /**
253
     /**
247
      * Dispatches an action to hide the DesktopPicker and invokes the passed in
254
      * Dispatches an action to hide the DesktopPicker and invokes the passed in
251
      * the onSourceChoose callback.
258
      * the onSourceChoose callback.
252
      * @param {string} type - The type of the DesktopCapturerSource to pass into
259
      * @param {string} type - The type of the DesktopCapturerSource to pass into
253
      * the onSourceChoose callback.
260
      * the onSourceChoose callback.
261
+     * @param {boolean} screenShareAudio - Whether or not to add system audio to
262
+     * screen sharing session.
254
      * @returns {void}
263
      * @returns {void}
255
      */
264
      */
256
-    _onCloseModal(id = '', type) {
257
-        this.props.onSourceChoose(id, type);
265
+    _onCloseModal(id = '', type, screenShareAudio = false) {
266
+        this.props.onSourceChoose(id, type, screenShareAudio);
258
         this.props.dispatch(hideDialog());
267
         this.props.dispatch(hideDialog());
259
     }
268
     }
260
 
269
 
285
      * @returns {void}
294
      * @returns {void}
286
      */
295
      */
287
     _onSubmit() {
296
     _onSubmit() {
288
-        const { id, type } = this.state.selectedSource;
297
+        const { selectedSource: { id, type }, screenShareAudio } = this.state;
289
 
298
 
290
-        this._onCloseModal(id, type);
299
+        this._onCloseModal(id, type, screenShareAudio);
291
     }
300
     }
292
 
301
 
293
     _onTabSelected: () => void;
302
     _onTabSelected: () => void;
306
         const { types, sources } = this.state;
315
         const { types, sources } = this.state;
307
 
316
 
308
         this._selectedTabType = types[tabIndex];
317
         this._selectedTabType = types[tabIndex];
318
+
319
+        // When we change tabs also reset the screenShareAudio state so we don't
320
+        // use the option from one tab when sharing from another.
309
         this.setState({
321
         this.setState({
322
+            screenShareAudio: false,
310
             selectedSource: this._getSelectedSource(sources),
323
             selectedSource: this._getSelectedSource(sources),
311
             selectedTab: tabIndex
324
             selectedTab: tabIndex
312
         });
325
         });
313
     }
326
     }
314
 
327
 
328
+    _onShareAudioChecked: (boolean) => void;
329
+
330
+    /**
331
+     * Set the screenSharingAudio state indicating whether or not to also share
332
+     * system audio.
333
+     *
334
+     * @param {boolean} checked - Share audio or not.
335
+     * @returns {void}
336
+     */
337
+    _onShareAudioChecked(checked) {
338
+        this.setState({ screenShareAudio: checked });
339
+    }
340
+
315
     /**
341
     /**
316
      * Configures and renders the tabs for display.
342
      * Configures and renders the tabs for display.
317
      *
343
      *
328
                         content: <DesktopPickerPane
354
                         content: <DesktopPickerPane
329
                             key = { type }
355
                             key = { type }
330
                             onClick = { this._onPreviewClick }
356
                             onClick = { this._onPreviewClick }
331
-                            onDoubleClick = { this._onCloseModal }
357
+                            onDoubleClick = { this._onSubmit }
358
+                            onShareAudioChecked = { this._onShareAudioChecked }
332
                             selectedSourceId = { selectedSource.id }
359
                             selectedSourceId = { selectedSource.id }
333
                             sources = { sources[type] }
360
                             sources = { sources[type] }
334
                             type = { type } />,
361
                             type = { type } />,

+ 56
- 3
react/features/desktop-picker/components/DesktopPickerPane.js View File

1
 /* @flow */
1
 /* @flow */
2
 
2
 
3
+import { Checkbox } from '@atlaskit/checkbox';
3
 import Spinner from '@atlaskit/spinner';
4
 import Spinner from '@atlaskit/spinner';
4
 import React, { Component } from 'react';
5
 import React, { Component } from 'react';
5
 
6
 
7
+import { Platform } from '../../base/react';
8
+import { translate } from '../../base/i18n';
9
+
6
 import DesktopSourcePreview from './DesktopSourcePreview';
10
 import DesktopSourcePreview from './DesktopSourcePreview';
7
 
11
 
8
 /**
12
 /**
20
      */
24
      */
21
     onDoubleClick: Function,
25
     onDoubleClick: Function,
22
 
26
 
27
+    /**
28
+     * The handler to be invoked if the users checks the audio screen sharing checkbox.
29
+     */
30
+    onShareAudioChecked: Function,
31
+
23
     /**
32
     /**
24
      * The id of the DesktopCapturerSource that is currently selected.
33
      * The id of the DesktopCapturerSource that is currently selected.
25
      */
34
      */
33
     /**
42
     /**
34
      * The source type of the DesktopCapturerSources to display.
43
      * The source type of the DesktopCapturerSources to display.
35
      */
44
      */
36
-    type: string
45
+    type: string,
46
+
47
+    /**
48
+     * Used to obtain translations.
49
+     */
50
+    t: Function
37
 };
51
 };
38
 
52
 
39
 /**
53
 /**
42
  * @extends Component
56
  * @extends Component
43
  */
57
  */
44
 class DesktopPickerPane extends Component<Props> {
58
 class DesktopPickerPane extends Component<Props> {
59
+
60
+    /**
61
+     * Initializes a new DesktopPickerPane instance.
62
+     *
63
+     * @param {Object} props - The read-only properties with which the new
64
+     * instance is to be initialized.
65
+     */
66
+    constructor(props: Props) {
67
+        super(props);
68
+
69
+        this._onShareAudioCheck = this._onShareAudioCheck.bind(this);
70
+    }
71
+
72
+    _onShareAudioCheck: (Object) => void;
73
+
74
+    /**
75
+     * Function to be called when the Checkbox is used.
76
+     *
77
+     * @param {boolean} checked - Checkbox status (checked or not).
78
+     * @returns {void}
79
+     */
80
+    _onShareAudioCheck({ target: { checked } }) {
81
+        this.props.onShareAudioChecked(checked);
82
+    }
83
+
45
     /**
84
     /**
46
      * Implements React's {@link Component#render()}.
85
      * Implements React's {@link Component#render()}.
47
      *
86
      *
54
             onDoubleClick,
93
             onDoubleClick,
55
             selectedSourceId,
94
             selectedSourceId,
56
             sources,
95
             sources,
57
-            type
96
+            type,
97
+            t
58
         } = this.props;
98
         } = this.props;
59
 
99
 
60
         const classNames
100
         const classNames
77
                     </div>
117
                     </div>
78
                 );
118
                 );
79
 
119
 
120
+        let checkBox;
121
+
122
+        // Only display the share audio checkbox if we're on windows and on
123
+        // desktop sharing tab.
124
+        // App window and Mac OS screen sharing doesn't work with system audio.
125
+        if (type === 'screen' && Platform.OS === 'windows') {
126
+            checkBox = (<Checkbox
127
+                label = { t('dialog.screenSharingAudio') }
128
+                name = 'share-system-audio'
129
+                onChange = { this._onShareAudioCheck } />);
130
+        }
131
+
80
         return (
132
         return (
81
             <div className = { classNames }>
133
             <div className = { classNames }>
82
                 { previews }
134
                 { previews }
135
+                { checkBox }
83
             </div>
136
             </div>
84
         );
137
         );
85
     }
138
     }
86
 }
139
 }
87
 
140
 
88
-export default DesktopPickerPane;
141
+export default translate(DesktopPickerPane);

Loading…
Cancel
Save