haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Comply w/ coding style

This commit is contained in:
Lyubo Marinov 2017-04-06 11:45:36 -05:00
parent 3af6cc53d1
commit fd10362bef
7 changed files with 196 additions and 174 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
react/features/desktop-picker/actions.js
View File

@ -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 =>
logger.error(
`Error while obtaining desktop sources: ${error}`),
capturerOptions
);
} else {
logger.error('Called JitsiMeetElectron.obtainDesktopStreams '
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.
*

211
react/features/desktop-picker/components/DesktopPicker.js
View File

@ -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.
@ -126,10 +118,22 @@ class DesktopPicker extends Component {
componentWillReceiveProps(nextProps) {
if (!this.state.selectedSourceId
&& nextProps.sources.screen.length) {
this.setState({ selectedSourceId: nextProps.sources.screen[0].id });
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() }
</Dialog>);
</Dialog>
);
}
/**
* 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: <DesktopPickerPane
key = { type }
onClick = { this._onPreviewClick }
onDoubleClick = { this._onCloseModal }
selectedSourceId = { selectedSourceId }
sources = { sources[type] || [] }
type = { type } />,
defaultSelected,
label: t(label)
};
});
return <Tabs tabs = { tabs } />;
}
/**
@ -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: <DesktopPickerPane
key = { type }
onClick = { this._onPreviewClick }
onDoubleClick = { this._onCloseModal }
selectedSourceId = { this.state.selectedSourceId }
sources = { this.props.sources[type] || [] }
type = { type } />
};
});
return <Tabs tabs = { tabs } />;
_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));

32
react/features/desktop-picker/components/DesktopPickerPane.js
View File

@ -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 {
onClick,
onDoubleClick,
selectedSourceId,
sources,
type
} = this.props;
const classNames
= `desktop-picker-pane default-scrollbar source-type-${type}`;
const previews
= sources.map(
source =>
<DesktopSourcePreview
isSelected = { source.id === this.props.selectedSourceId }
key = { source.id }
onClick = { this.props.onClick }
onDoubleClick = { this.props.onDoubleClick }
source = { source } />
);
const classnames = 'desktop-picker-pane default-scrollbar '
+ `source-type-${this.props.type}`;
onClick = { onClick }
onDoubleClick = { onDoubleClick }
selected = { source.id === selectedSourceId }
source = { source } />);
return (
<div className = { classnames }>
<div className = { classNames }>
{ previews }
</div>
);

24
react/features/desktop-picker/components/DesktopSourcePreview.js
View File

@ -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 (
<div

2
react/features/desktop-picker/index.js
View File

@ -1,5 +1,5 @@
export * from './actionTypes';
export * from './actions';
export * from './actionTypes';
export * from './components';
import './reducer';

31
react/features/desktop-picker/reducer.js
View File

@ -1,10 +1,11 @@
import { ReducerRegistry } from '../base/redux';
import {
RESET_DESKTOP_SOURCES,
UPDATE_DESKTOP_SOURCES
} from './actionTypes';
const defaultState = {
const DEFAULT_STATE = {
screen: [],
window: []
};
@ -19,39 +20,41 @@ const defaultState = {
* @returns {Object}
*/
ReducerRegistry.register(
'features/desktop-picker/sources',
(state = defaultState, action) => {
'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);
}
});