diff --git a/react/features/base/conference/actions.js b/react/features/base/conference/actions.js
index ad6556395..14b837f09 100644
--- a/react/features/base/conference/actions.js
+++ b/react/features/base/conference/actions.js
@@ -453,9 +453,9 @@ export function setPassword(conference, method, password) {
* @param {(string|undefined)} room - The name of the room of the conference to
* be joined.
* @returns {{
- * type: SET_ROOM,
- * room: string
- * }}
+ * type: SET_ROOM,
+ * room: string
+ * }}
*/
export function setRoom(room) {
return {
diff --git a/react/features/desktop-picker/actions.js b/react/features/desktop-picker/actions.js
index 8a4d473d3..43d157d06 100644
--- a/react/features/desktop-picker/actions.js
+++ b/react/features/desktop-picker/actions.js
@@ -1,35 +1,21 @@
-import { getLogger } from 'jitsi-meet-logger';
-
import { openDialog } from '../base/dialog';
+
import {
RESET_DESKTOP_SOURCES,
UPDATE_DESKTOP_SOURCES
} from './actionTypes';
import { DesktopPicker } from './components';
-const logger = getLogger(__filename);
-
-/**
- * Signals to remove all stored DesktopCapturerSources.
- *
- * @returns {{
- * type: RESET_DESKTOP_SOURCES
- * }}
- */
-export function resetDesktopSources() {
- return {
- type: RESET_DESKTOP_SOURCES
- };
-}
+const logger = require('jitsi-meet-logger').getLogger(__filename);
/**
* Begins a request to get available DesktopCapturerSources.
*
* @param {Array} types - An array with DesktopCapturerSource type strings.
- * @param {Object} options - Additional configuration for getting a list
- * of sources.
- * @param {Object} options.thumbnailSize - The desired height and width
- * of the return native image object used for the preview image of the source.
+ * @param {Object} options - Additional configuration for getting a list of
+ * sources.
+ * @param {Object} options.thumbnailSize - The desired height and width of the
+ * return native image object used for the preview image of the source.
* @returns {Function}
*/
export function obtainDesktopSources(types, options = {}) {
@@ -42,21 +28,37 @@ export function obtainDesktopSources(types, options = {}) {
}
return dispatch => {
- if (window.JitsiMeetElectron
- && window.JitsiMeetElectron.obtainDesktopStreams) {
- window.JitsiMeetElectron.obtainDesktopStreams(
+ const { JitsiMeetElectron } = window;
+
+ if (JitsiMeetElectron && JitsiMeetElectron.obtainDesktopStreams) {
+ JitsiMeetElectron.obtainDesktopStreams(
sources => dispatch(updateDesktopSources(sources)),
- error => logger.error(
- `Error while obtaining desktop sources: ${error}`),
+ error =>
+ logger.error(
+ `Error while obtaining desktop sources: ${error}`),
capturerOptions
);
} else {
- logger.error('Called JitsiMeetElectron.obtainDesktopStreams '
- + 'but it is not defined');
+ logger.error(
+ 'Called JitsiMeetElectron.obtainDesktopStreams'
+ + ' but it is not defined');
}
};
}
+/**
+ * Signals to remove all stored DesktopCapturerSources.
+ *
+ * @returns {{
+ * type: RESET_DESKTOP_SOURCES
+ * }}
+ */
+export function resetDesktopSources() {
+ return {
+ type: RESET_DESKTOP_SOURCES
+ };
+}
+
/**
* Signals to open a dialog with the DesktopPicker component.
*
diff --git a/react/features/desktop-picker/components/DesktopPicker.js b/react/features/desktop-picker/components/DesktopPicker.js
index 7f938ddde..32cc4ec08 100644
--- a/react/features/desktop-picker/components/DesktopPicker.js
+++ b/react/features/desktop-picker/components/DesktopPicker.js
@@ -6,37 +6,39 @@ import { connect } from 'react-redux';
import { Dialog, hideDialog } from '../../base/dialog';
import { translate } from '../../base/i18n';
-import {
- resetDesktopSources,
- obtainDesktopSources
-} from '../actions';
+
+import { obtainDesktopSources, resetDesktopSources } from '../actions';
import DesktopPickerPane from './DesktopPickerPane';
-const updateInterval = 1000;
-const thumbnailSize = {
+const THUMBNAIL_SIZE = {
height: 300,
width: 300
};
-const tabConfigurations = [
+const UPDATE_INTERVAL = 1000;
+
+const TAB_CONFIGURATIONS = [
{
+ /**
+ * The indicator which determines whether this tab configuration is
+ * selected by default.
+ *
+ * @type {boolean}
+ */
+ defaultSelected: true,
label: 'dialog.yourEntireScreen',
- type: 'screen',
- isDefault: true
+ type: 'screen'
},
{
label: 'dialog.applicationWindow',
type: 'window'
}
];
-
-const validTypes = tabConfigurations.map(configuration => configuration.type);
-const configuredTypes = config.desktopSharingChromeSources || [];
-
-const tabsToPopulate = tabConfigurations.filter(configuration =>
- configuredTypes.includes(configuration.type)
- && validTypes.includes(configuration.type)
-);
-const typesToFetch = tabsToPopulate.map(configuration => configuration.type);
+const CONFIGURED_TYPES = config.desktopSharingChromeSources || [];
+const VALID_TYPES = TAB_CONFIGURATIONS.map(c => c.type);
+const TABS_TO_POPULATE
+ = TAB_CONFIGURATIONS.filter(
+ c => CONFIGURED_TYPES.includes(c.type) && VALID_TYPES.includes(c.type));
+const TYPES_TO_FETCH = TABS_TO_POPULATE.map(c => c.type);
/**
* React component for DesktopPicker.
@@ -56,14 +58,14 @@ class DesktopPicker extends Component {
dispatch: React.PropTypes.func,
/**
- * The callback to be invoked when the component is closed or
- * when a DesktopCapturerSource has been chosen.
+ * The callback to be invoked when the component is closed or when
+ * a DesktopCapturerSource has been chosen.
*/
onSourceChoose: React.PropTypes.func,
/**
- * An object with arrays of DesktopCapturerSources. The key
- * should be the source type.
+ * An object with arrays of DesktopCapturerSources. The key should be
+ * the source type.
*/
sources: React.PropTypes.object,
@@ -94,8 +96,8 @@ class DesktopPicker extends Component {
}
/**
- * Perform an immediate update request for DesktopCapturerSources and
- * begin requesting updates at an interval.
+ * Perform an immediate update request for DesktopCapturerSources and begin
+ * requesting updates at an interval.
*
* @inheritdoc
*/
@@ -104,16 +106,6 @@ class DesktopPicker extends Component {
this._startPolling();
}
- /**
- * Clean up component and DesktopCapturerSource store state.
- *
- * @inheritdoc
- */
- componentWillUnmount() {
- this._stopPolling();
- this.props.dispatch(resetDesktopSources());
- }
-
/**
* Notifies this mounted React Component that it will receive new props.
* Sets a default selected source if one is not already set.
@@ -125,11 +117,23 @@ class DesktopPicker extends Component {
*/
componentWillReceiveProps(nextProps) {
if (!this.state.selectedSourceId
- && nextProps.sources.screen.length) {
- this.setState({ selectedSourceId: nextProps.sources.screen[0].id });
+ && nextProps.sources.screen.length) {
+ this.setState({
+ selectedSourceId: nextProps.sources.screen[0].id
+ });
}
}
+ /**
+ * Clean up component and DesktopCapturerSource store state.
+ *
+ * @inheritdoc
+ */
+ componentWillUnmount() {
+ this._stopPolling();
+ this.props.dispatch(resetDesktopSources());
+ }
+
/**
* Implements React's {@link Component#render()}.
*
@@ -145,22 +149,68 @@ class DesktopPicker extends Component {
titleKey = 'dialog.shareYourScreen'
width = 'medium' >
{ this._renderTabs() }
- );
+
+ );
}
/**
- * Dispatches an action to get currently available DesktopCapturerSources.
+ * Dispatches an action to hide the DesktopPicker and invokes the passed in
+ * callback with a selectedSourceId, if any.
*
- * @private
+ * @param {string} id - The id of the DesktopCapturerSource to pass into the
+ * onSourceChoose callback.
* @returns {void}
*/
- _updateSources() {
- this.props.dispatch(obtainDesktopSources(
- typesToFetch,
- {
- thumbnailSize
- }
- ));
+ _onCloseModal(id = '') {
+ this.props.onSourceChoose(id);
+ this.props.dispatch(hideDialog());
+ }
+
+ /**
+ * Sets the currently selected DesktopCapturerSource.
+ *
+ * @param {string} id - The id of DesktopCapturerSource.
+ * @returns {void}
+ */
+ _onPreviewClick(id) {
+ this.setState({ selectedSourceId: id });
+ }
+
+ /**
+ * Request to close the modal and execute callbacks with the selected source
+ * id.
+ *
+ * @returns {void}
+ */
+ _onSubmit() {
+ this._onCloseModal(this.state.selectedSourceId);
+ }
+
+ /**
+ * Configures and renders the tabs for display.
+ *
+ * @private
+ * @returns {ReactElement}
+ */
+ _renderTabs() {
+ const { selectedSourceId } = this.state;
+ const { sources, t } = this.props;
+ const tabs
+ = TABS_TO_POPULATE.map(({ defaultSelected, label, type }) => {
+ return {
+ content: