From fd10362befb5825b1da8c42c72f135a40c8f454a Mon Sep 17 00:00:00 2001 From: Lyubo Marinov Date: Thu, 6 Apr 2017 11:45:36 -0500 Subject: [PATCH] Comply w/ coding style --- react/features/base/conference/actions.js | 6 +- react/features/desktop-picker/actions.js | 56 ++--- .../components/DesktopPicker.js | 215 +++++++++--------- .../components/DesktopPickerPane.js | 36 +-- .../components/DesktopSourcePreview.js | 24 +- react/features/desktop-picker/index.js | 2 +- react/features/desktop-picker/reducer.js | 31 +-- 7 files changed, 196 insertions(+), 174 deletions(-) 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: , + defaultSelected, + label: t(label) + }; + }); + + return ; } /** @@ -171,8 +221,7 @@ class DesktopPicker extends Component { */ _startPolling() { this._stopPolling(); - this._poller = window.setInterval(this._updateSources, - updateInterval); + this._poller = window.setInterval(this._updateSources, UPDATE_INTERVAL); } /** @@ -187,62 +236,18 @@ class DesktopPicker extends Component { } /** - * Sets the currently selected DesktopCapturerSource. + * Dispatches an action to get currently available DesktopCapturerSources. * - * @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); - } - - /** - * Dispatches an action to hide the DesktopPicker and invokes - * the passed in callback with a selectedSourceId, if any. - * - * @param {string} id - The id of the DesktopCapturerSource to pass into - * the onSourceChoose callback. - * @returns {void} - */ - _onCloseModal(id = '') { - this.props.onSourceChoose(id); - this.props.dispatch(hideDialog()); - } - - /** - * Configures and renders the tabs for display. - * - * @returns {ReactElement} * @private + * @returns {void} */ - _renderTabs() { - const tabs = tabsToPopulate.map(tabConfig => { - const type = tabConfig.type; - - return { - label: this.props.t(tabConfig.label), - defaultSelected: tabConfig.isDefault, - content: - }; - }); - - return ; + _updateSources() { + this.props.dispatch(obtainDesktopSources( + TYPES_TO_FETCH, + { + THUMBNAIL_SIZE + } + )); } } @@ -250,15 +255,15 @@ class DesktopPicker extends Component { * Maps (parts of) the Redux state to the associated DesktopPicker's props. * * @param {Object} state - Redux state. - * @protected + * @private * @returns {{ * sources: Object * }} */ -function mapStateToProps(state) { +function _mapStateToProps(state) { return { - sources: state['features/desktop-picker/sources'] + sources: state['features/desktop-picker'] }; } -export default translate(connect(mapStateToProps)(DesktopPicker)); +export default translate(connect(_mapStateToProps)(DesktopPicker)); diff --git a/react/features/desktop-picker/components/DesktopPickerPane.js b/react/features/desktop-picker/components/DesktopPickerPane.js index 592cec5ec..b45d4f104 100644 --- a/react/features/desktop-picker/components/DesktopPickerPane.js +++ b/react/features/desktop-picker/components/DesktopPickerPane.js @@ -1,4 +1,5 @@ import React, { Component } from 'react'; + import DesktopSourcePreview from './DesktopSourcePreview'; /** @@ -19,8 +20,8 @@ class DesktopPickerPane extends Component { onClick: React.PropTypes.func, /** - * The handler to be invoked when a DesktopSourcePreview is - * double clicked. + * The handler to be invoked when a DesktopSourcePreview is double + * clicked. */ onDoubleClick: React.PropTypes.func, @@ -47,19 +48,28 @@ class DesktopPickerPane extends Component { * @returns {ReactElement} */ render() { - const previews = this.props.sources.map(source => - - ); - const classnames = 'desktop-picker-pane default-scrollbar ' - + `source-type-${this.props.type}`; + const { + onClick, + onDoubleClick, + selectedSourceId, + sources, + type + } = this.props; + + const classNames + = `desktop-picker-pane default-scrollbar source-type-${type}`; + const previews + = sources.map( + source => + ); return ( -
+
{ previews }
); diff --git a/react/features/desktop-picker/components/DesktopSourcePreview.js b/react/features/desktop-picker/components/DesktopSourcePreview.js index 612ec00d5..ebb0de62d 100644 --- a/react/features/desktop-picker/components/DesktopSourcePreview.js +++ b/react/features/desktop-picker/components/DesktopSourcePreview.js @@ -13,22 +13,24 @@ class DesktopSourcePreview extends Component { */ static propTypes = { /** - * If true the 'is-selected' class will be added to the component. - */ - isSelected: React.PropTypes.bool, - - /** - * The callback to invoke when the component is clicked. - * The id of the DesktopCapturerSource will be passed in. + * The callback to invoke when the component is clicked. The id of + * the DesktopCapturerSource will be passed in. */ onClick: React.PropTypes.func, /** - * The callback to invoke when the component is double clicked. - * The id of the DesktopCapturerSource will be passed in. + * The callback to invoke when the component is double clicked. The id + * of the DesktopCapturerSource will be passed in. */ onDoubleClick: React.PropTypes.func, + /** + * The indicator which determines whether this DesktopSourcePreview is + * selected. If true, the 'is-selected' CSS class will be added to the + * Component. + */ + selected: React.PropTypes.bool, + /** * The DesktopCapturerSource to display. */ @@ -55,8 +57,8 @@ class DesktopSourcePreview extends Component { * @returns {ReactElement} */ render() { - const isSelectedClass = this.props.isSelected ? 'is-selected' : ''; - const displayClasses = `desktop-picker-source ${isSelectedClass}`; + const selectedClass = this.props.selected ? 'is-selected' : ''; + const displayClasses = `desktop-picker-source ${selectedClass}`; return (
{ + 'features/desktop-picker', + (state = DEFAULT_STATE, action) => { switch (action.type) { case RESET_DESKTOP_SOURCES: - return { ...defaultState }; + return { ...DEFAULT_STATE }; + case UPDATE_DESKTOP_SOURCES: - return seperateSourcesByType(action.sources); + return _seperateSourcesByType(action.sources); + default: return state; } }); /** - * Converts an array of DesktopCapturerSources to an object with types - * for keys and values being an array with sources of the key's type. + * Converts an array of DesktopCapturerSources to an object with types for keys + * and values being an array with sources of the key's type. * * @param {Array} sources - DesktopCapturerSources. - * @returns {Object} An object with the sources split into seperate arrays - * based on source type. * @private + * @returns {Object} An object with the sources split into seperate arrays based + * on source type. */ -function seperateSourcesByType(sources = []) { +function _seperateSourcesByType(sources = []) { const sourcesByType = { screen: [], window: [] }; sources.forEach(source => { - const sourceIdParts = source.id.split(':'); - const sourceType = sourceIdParts[0]; + const idParts = source.id.split(':'); + const type = idParts[0]; - if (sourcesByType[sourceType]) { - sourcesByType[sourceType].push(source); + if (sourcesByType[type]) { + sourcesByType[type].push(source); } });