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

321 lines
8.3 KiB
JavaScript
Raw Normal View History

2017-03-30 16:58:31 +00:00
import Tabs from '@atlaskit/tabs';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Dialog, hideDialog } from '../../base/dialog';
import { translate } from '../../base/i18n';
2017-04-06 16:45:36 +00:00
import { obtainDesktopSources, resetDesktopSources } from '../actions';
2017-03-30 16:58:31 +00:00
import DesktopPickerPane from './DesktopPickerPane';
2017-04-06 16:45:36 +00:00
const THUMBNAIL_SIZE = {
2017-03-30 16:58:31 +00:00
height: 300,
width: 300
};
2017-04-06 16:45:36 +00:00
const UPDATE_INTERVAL = 1000;
const TAB_CONFIGURATIONS = [
2017-03-30 16:58:31 +00:00
{
2017-04-06 16:45:36 +00:00
/**
* The indicator which determines whether this tab configuration is
* selected by default.
*
* @type {boolean}
*/
defaultSelected: true,
2017-03-30 16:58:31 +00:00
label: 'dialog.yourEntireScreen',
2017-04-06 16:45:36 +00:00
type: 'screen'
2017-03-30 16:58:31 +00:00
},
{
label: 'dialog.applicationWindow',
type: 'window'
}
];
2017-04-06 16:45:36 +00:00
const VALID_TYPES = TAB_CONFIGURATIONS.map(c => c.type);
2017-03-30 16:58:31 +00:00
/**
* React component for DesktopPicker.
*
* @extends Component
*/
class DesktopPicker extends Component {
2017-07-10 22:43:29 +00:00
/**
* Default values for DesktopPicker component's properties.
*
* @static
*/
static defaultProps = {
options: {}
};
2017-03-30 16:58:31 +00:00
/**
* DesktopPicker component's property types.
*
* @static
*/
static propTypes = {
/**
* Used to request DesktopCapturerSources.
*/
dispatch: React.PropTypes.func,
/**
2017-04-06 16:45:36 +00:00
* The callback to be invoked when the component is closed or when
* a DesktopCapturerSource has been chosen.
2017-03-30 16:58:31 +00:00
*/
onSourceChoose: React.PropTypes.func,
/**
* An object with options related to desktop sharing.
*/
options: React.PropTypes.object,
2017-03-30 16:58:31 +00:00
/**
2017-04-06 16:45:36 +00:00
* An object with arrays of DesktopCapturerSources. The key should be
* the source type.
2017-03-30 16:58:31 +00:00
*/
sources: React.PropTypes.object,
/**
* Used to obtain translations.
*/
t: React.PropTypes.func
};
2017-03-30 16:58:31 +00:00
/**
* Initializes a new DesktopPicker instance.
*
* @param {Object} props - The read-only properties with which the new
* instance is to be initialized.
*/
constructor(props) {
super(props);
this.state = {
selectedSource: {},
tabsToPopulate: [],
typesToFetch: []
2017-03-30 16:58:31 +00:00
};
this._poller = null;
this._onCloseModal = this._onCloseModal.bind(this);
this._onPreviewClick = this._onPreviewClick.bind(this);
this._onSubmit = this._onSubmit.bind(this);
this._updateSources = this._updateSources.bind(this);
}
/**
2017-04-06 16:45:36 +00:00
* Perform an immediate update request for DesktopCapturerSources and begin
* requesting updates at an interval.
2017-03-30 16:58:31 +00:00
*
* @inheritdoc
*/
componentWillMount() {
2017-07-10 22:43:29 +00:00
const { desktopSharingSources } = this.props.options;
this._onSourceTypesConfigChanged(
2017-07-10 22:43:29 +00:00
desktopSharingSources);
2017-03-30 16:58:31 +00:00
this._updateSources();
this._startPolling();
}
/**
* Notifies this mounted React Component that it will receive new props.
* Sets a default selected source if one is not already set.
*
* @inheritdoc
* @param {Object} nextProps - The read-only React Component props that this
* instance will receive.
* @returns {void}
*/
componentWillReceiveProps(nextProps) {
if (!this.state.selectedSource.id
2017-04-06 16:45:36 +00:00
&& nextProps.sources.screen.length) {
this.setState({
selectedSource: {
id: nextProps.sources.screen[0].id,
type: 'screen'
}
2017-04-06 16:45:36 +00:00
});
2017-03-30 16:58:31 +00:00
}
2017-07-10 22:43:29 +00:00
const { desktopSharingSources } = this.props.options;
this._onSourceTypesConfigChanged(
2017-07-10 22:43:29 +00:00
desktopSharingSources);
2017-03-30 16:58:31 +00:00
}
2017-04-06 16:45:36 +00:00
/**
* Clean up component and DesktopCapturerSource store state.
*
* @inheritdoc
*/
componentWillUnmount() {
this._stopPolling();
this.props.dispatch(resetDesktopSources());
}
2017-03-30 16:58:31 +00:00
/**
* Implements React's {@link Component#render()}.
*
* @inheritdoc
*/
render() {
return (
<Dialog
isModal = { false }
okTitleKey = 'dialog.Share'
onCancel = { this._onCloseModal }
onSubmit = { this._onSubmit }
titleKey = 'dialog.shareYourScreen'
width = 'medium' >
{ this._renderTabs() }
2017-04-06 16:45:36 +00:00
</Dialog>
);
2017-03-30 16:58:31 +00:00
}
/**
2017-04-06 16:45:36 +00:00
* Dispatches an action to hide the DesktopPicker and invokes the passed in
* callback with a selectedSource, if any.
2017-03-30 16:58:31 +00:00
*
2017-04-06 16:45:36 +00:00
* @param {string} id - The id of the DesktopCapturerSource to pass into the
* onSourceChoose callback.
* @param {string} type - The type of the DesktopCapturerSource to pass into
* the onSourceChoose callback.
2017-03-30 16:58:31 +00:00
* @returns {void}
*/
_onCloseModal(id = '', type) {
this.props.onSourceChoose(id, type);
2017-04-06 16:45:36 +00:00
this.props.dispatch(hideDialog());
2017-03-30 16:58:31 +00:00
}
/**
2017-04-06 16:45:36 +00:00
* Sets the currently selected DesktopCapturerSource.
2017-03-30 16:58:31 +00:00
*
2017-04-06 16:45:36 +00:00
* @param {string} id - The id of DesktopCapturerSource.
* @param {string} type - The type of DesktopCapturerSource.
2017-03-30 16:58:31 +00:00
* @returns {void}
*/
_onPreviewClick(id, type) {
this.setState({
selectedSource: {
id,
type
}
});
2017-03-30 16:58:31 +00:00
}
/**
2017-04-06 16:45:36 +00:00
* Request to close the modal and execute callbacks with the selected source
* id.
2017-03-30 16:58:31 +00:00
*
* @returns {void}
*/
2017-04-06 16:45:36 +00:00
_onSubmit() {
const { id, type } = this.state.selectedSource;
this._onCloseModal(id, type);
2017-03-30 16:58:31 +00:00
}
/**
2017-04-06 16:45:36 +00:00
* Configures and renders the tabs for display.
2017-03-30 16:58:31 +00:00
*
2017-04-06 16:45:36 +00:00
* @private
* @returns {ReactElement}
2017-03-30 16:58:31 +00:00
*/
2017-04-06 16:45:36 +00:00
_renderTabs() {
const { selectedSource } = this.state;
2017-04-06 16:45:36 +00:00
const { sources, t } = this.props;
const tabs
= this.state.tabsToPopulate.map(
({ defaultSelected, label, type }) => {
return {
content: <DesktopPickerPane
key = { type }
onClick = { this._onPreviewClick }
onDoubleClick = { this._onCloseModal }
selectedSourceId = { selectedSource.id }
sources = { sources[type] || [] }
type = { type } />,
defaultSelected,
label: t(label)
};
});
2017-04-06 16:45:36 +00:00
return <Tabs tabs = { tabs } />;
2017-03-30 16:58:31 +00:00
}
/**
2017-04-06 16:45:36 +00:00
* Create an interval to update knwon available DesktopCapturerSources.
2017-03-30 16:58:31 +00:00
*
2017-04-06 16:45:36 +00:00
* @private
2017-03-30 16:58:31 +00:00
* @returns {void}
*/
2017-04-06 16:45:36 +00:00
_startPolling() {
this._stopPolling();
this._poller = window.setInterval(this._updateSources, UPDATE_INTERVAL);
2017-03-30 16:58:31 +00:00
}
/**
2017-04-06 16:45:36 +00:00
* Cancels the interval to update DesktopCapturerSources.
2017-03-30 16:58:31 +00:00
*
2017-04-06 16:45:36 +00:00
* @private
2017-03-30 16:58:31 +00:00
* @returns {void}
*/
2017-04-06 16:45:36 +00:00
_stopPolling() {
window.clearInterval(this._poller);
this._poller = null;
2017-03-30 16:58:31 +00:00
}
/**
* Handles changing of allowed desktop sharing source types.
*
* @param {Array<string>} desktopSharingSourceTypes - The types that will be
* fetched and displayed.
* @returns {void}
*/
_onSourceTypesConfigChanged(desktopSharingSourceTypes = []) {
const tabsToPopulate = TAB_CONFIGURATIONS.filter(
c => desktopSharingSourceTypes.includes(c.type)
&& VALID_TYPES.includes(c.type)
);
this.setState({
tabsToPopulate,
typesToFetch: tabsToPopulate.map(c => c.type)
});
}
2017-03-30 16:58:31 +00:00
/**
2017-04-06 16:45:36 +00:00
* Dispatches an action to get currently available DesktopCapturerSources.
2017-03-30 16:58:31 +00:00
*
* @private
2017-04-06 16:45:36 +00:00
* @returns {void}
2017-03-30 16:58:31 +00:00
*/
2017-04-06 16:45:36 +00:00
_updateSources() {
this.props.dispatch(obtainDesktopSources(
this.state.typesToFetch,
2017-04-06 16:45:36 +00:00
{
THUMBNAIL_SIZE
}
));
2017-03-30 16:58:31 +00:00
}
}
/**
* Maps (parts of) the Redux state to the associated DesktopPicker's props.
*
* @param {Object} state - Redux state.
2017-04-06 16:45:36 +00:00
* @private
2017-03-30 16:58:31 +00:00
* @returns {{
* sources: Object
* }}
*/
2017-04-06 16:45:36 +00:00
function _mapStateToProps(state) {
2017-03-30 16:58:31 +00:00
return {
2017-04-06 16:45:36 +00:00
sources: state['features/desktop-picker']
2017-03-30 16:58:31 +00:00
};
}
2017-04-06 16:45:36 +00:00
export default translate(connect(_mapStateToProps)(DesktopPicker));