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

428 lines
11 KiB
JavaScript
Raw Normal View History

2017-10-06 20:15:51 +00:00
// @flow
2017-03-30 16:58:31 +00:00
import Tabs from '@atlaskit/tabs';
import React, { PureComponent } from 'react';
2019-03-19 15:42:25 +00:00
import type { Dispatch } from 'redux';
2017-03-30 16:58:31 +00:00
import { Dialog, hideDialog } from '../../base/dialog';
import { translate } from '../../base/i18n';
2020-05-20 10:57:03 +00:00
import { connect } from '../../base/redux';
import { obtainDesktopSources } from '../functions';
2017-04-06 16:45:36 +00:00
2017-03-30 16:58:31 +00:00
import DesktopPickerPane from './DesktopPickerPane';
/**
* The size of the requested thumbnails.
*
* @type {Object}
*/
2017-04-06 16:45:36 +00:00
const THUMBNAIL_SIZE = {
2017-03-30 16:58:31 +00:00
height: 300,
width: 300
};
/**
* The sources polling interval in ms.
*
* @type {int}
*/
const UPDATE_INTERVAL = 2000;
2017-04-06 16:45:36 +00:00
/**
* The default selected tab.
*
* @type {string}
*/
const DEFAULT_TAB_TYPE = 'screen';
const TAB_LABELS = {
screen: 'dialog.yourEntireScreen',
window: 'dialog.applicationWindow'
};
const VALID_TYPES = Object.keys(TAB_LABELS);
2017-03-30 16:58:31 +00:00
/**
* The type of the React {@code Component} props of {@link DesktopPicker}.
2017-03-30 16:58:31 +00:00
*/
type Props = {
2017-03-30 16:58:31 +00:00
/**
* An array with desktop sharing sources to be displayed.
2017-03-30 16:58:31 +00:00
*/
desktopSharingSources: Array<string>,
/**
* Used to request DesktopCapturerSources.
*/
2019-03-19 15:42:25 +00:00
dispatch: Dispatch<any>,
/**
* The callback to be invoked when the component is closed or when a
* DesktopCapturerSource has been chosen.
*/
onSourceChoose: Function,
2017-03-30 16:58:31 +00:00
/**
* Used to obtain translations.
*/
t: Function
};
2017-03-30 16:58:31 +00:00
/**
* The type of the React {@code Component} state of {@link DesktopPicker}.
*/
type State = {
2017-03-30 16:58:31 +00:00
/**
* The state of the audio screen share checkbox.
*/
screenShareAudio: boolean,
/**
* The currently higlighted DesktopCapturerSource.
*/
selectedSource: Object,
/**
* The desktop source type currently being displayed.
*/
selectedTab: number,
/**
* An object containing all the DesktopCapturerSources.
*/
sources: Object,
/**
* The desktop source types to fetch previews for.
*/
types: Array<string>
};
/**
* React component for DesktopPicker.
*
* @extends Component
*/
class DesktopPicker extends PureComponent<Props, State> {
/**
* Implements React's {@link Component#getDerivedStateFromProps()}.
*
* @inheritdoc
*/
static getDerivedStateFromProps(props) {
return {
types: DesktopPicker._getValidTypes(props.desktopSharingSources)
};
}
/**
* Extracts only the valid types from the passed {@code types}.
*
* @param {Array<string>} types - The types to filter.
* @private
* @returns {Array<string>} The filtered types.
*/
static _getValidTypes(types = []) {
return types.filter(
type => VALID_TYPES.includes(type));
}
2017-10-06 20:15:51 +00:00
_poller = null;
state = {
screenShareAudio: false,
2017-10-06 20:15:51 +00:00
selectedSource: {},
selectedTab: 0,
sources: {},
types: []
2017-10-06 20:15:51 +00:00
};
/**
* Stores the type of the selected tab.
*
* @type {string}
*/
_selectedTabType = DEFAULT_TAB_TYPE;
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: Props) {
2017-03-30 16:58:31 +00:00
super(props);
2017-10-06 20:15:51 +00:00
// Bind event handlers so they are only bound once per instance.
2017-03-30 16:58:31 +00:00
this._onCloseModal = this._onCloseModal.bind(this);
this._onPreviewClick = this._onPreviewClick.bind(this);
this._onShareAudioChecked = this._onShareAudioChecked.bind(this);
2017-03-30 16:58:31 +00:00
this._onSubmit = this._onSubmit.bind(this);
this._onTabSelected = this._onTabSelected.bind(this);
2017-03-30 16:58:31 +00:00
this._updateSources = this._updateSources.bind(this);
this.state.types
= DesktopPicker._getValidTypes(this.props.desktopSharingSources);
2017-03-30 16:58:31 +00:00
}
/**
* Starts polling.
2017-03-30 16:58:31 +00:00
*
* @inheritdoc
* @returns {void}
2017-03-30 16:58:31 +00:00
*/
componentDidMount() {
2017-03-30 16:58:31 +00:00
this._startPolling();
}
2017-04-06 16:45:36 +00:00
/**
* Clean up component and DesktopCapturerSource store state.
*
* @inheritdoc
*/
componentWillUnmount() {
this._stopPolling();
}
2017-03-30 16:58:31 +00:00
/**
* Implements React's {@link Component#render()}.
*
* @inheritdoc
*/
render() {
return (
<Dialog
isModal = { false }
okDisabled = { Boolean(!this.state.selectedSource.id) }
2019-03-06 17:23:53 +00:00
okKey = 'dialog.Share'
2017-03-30 16:58:31 +00:00
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
}
/**
* Computates the selected source.
*
* @param {Object} sources - The available sources.
* @returns {Object} The selectedSource value.
*/
_getSelectedSource(sources = {}) {
const { selectedSource } = this.state;
/**
* If there are no sources for this type (or no sources for any type)
* we can't select anything.
*/
if (!Array.isArray(sources[this._selectedTabType])
|| sources[this._selectedTabType].length <= 0) {
return {};
}
/**
* Select the first available source for this type in the following
* scenarios:
* 1) Nothing is yet selected.
* 2) Tab change.
* 3) The selected source is no longer available.
*/
if (!selectedSource // scenario 1)
|| selectedSource.type !== this._selectedTabType // scenario 2)
|| !sources[this._selectedTabType].some( // scenario 3)
source => source.id === selectedSource.id)) {
return {
id: sources[this._selectedTabType][0].id,
type: this._selectedTabType
};
}
/**
* For all other scenarios don't change the selection.
*/
return selectedSource;
}
_onCloseModal: (?string, string, ?boolean) => void;
2017-10-06 20:15:51 +00:00
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-10-06 20:15:51 +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.
* @param {boolean} screenShareAudio - Whether or not to add system audio to
* screen sharing session.
2017-03-30 16:58:31 +00:00
* @returns {void}
*/
_onCloseModal(id = '', type, screenShareAudio = false) {
this.props.onSourceChoose(id, type, screenShareAudio);
2017-04-06 16:45:36 +00:00
this.props.dispatch(hideDialog());
2017-03-30 16:58:31 +00:00
}
2017-10-06 20:15:51 +00:00
_onPreviewClick: (string, string) => void;
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-10-06 20:15:51 +00:00
_onSubmit: () => void;
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 { selectedSource: { id, type }, screenShareAudio } = this.state;
this._onCloseModal(id, type, screenShareAudio);
2017-03-30 16:58:31 +00:00
}
_onTabSelected: () => void;
/**
* Stores the selected tab and updates the selected source via
* {@code _getSelectedSource}.
*
* @param {Object} tab - The configuration passed into atlaskit tabs to
* describe how to display the selected tab.
* @param {number} tabIndex - The index of the tab within the array of
* displayed tabs.
* @returns {void}
*/
_onTabSelected(tab, tabIndex) { // eslint-disable-line no-unused-vars
const { types, sources } = this.state;
this._selectedTabType = types[tabIndex];
// When we change tabs also reset the screenShareAudio state so we don't
// use the option from one tab when sharing from another.
this.setState({
screenShareAudio: false,
selectedSource: this._getSelectedSource(sources),
selectedTab: tabIndex
});
}
_onShareAudioChecked: (boolean) => void;
/**
* Set the screenSharingAudio state indicating whether or not to also share
* system audio.
*
* @param {boolean} checked - Share audio or not.
* @returns {void}
*/
_onShareAudioChecked(checked) {
this.setState({ screenShareAudio: checked });
}
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, sources, types } = this.state;
const { t } = this.props;
2017-04-06 16:45:36 +00:00
const tabs
= types.map(
type => {
return {
content: <DesktopPickerPane
key = { type }
onClick = { this._onPreviewClick }
onDoubleClick = { this._onSubmit }
onShareAudioChecked = { this._onShareAudioChecked }
selectedSourceId = { selectedSource.id }
sources = { sources[type] }
type = { type } />,
label: t(TAB_LABELS[type])
};
});
2017-04-06 16:45:36 +00:00
return (
<Tabs
onSelect = { this._onTabSelected }
selected = { this.state.selectedTab }
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._updateSources();
2017-04-06 16:45:36 +00:00
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
}
2017-10-06 20:15:51 +00:00
_updateSources: () => void;
2017-03-30 16:58:31 +00:00
/**
* Obtains the desktop sources and updates state with them.
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() {
const { types } = this.state;
if (types.length > 0) {
obtainDesktopSources(
this.state.types,
{ thumbnailSize: THUMBNAIL_SIZE }
)
.then(sources => {
const selectedSource = this._getSelectedSource(sources);
2017-03-30 16:58:31 +00:00
// TODO: Maybe check if we have stopped the timer and unmounted
// the component.
this.setState({
sources,
selectedSource
});
})
.catch(() => { /* ignore */ });
}
}
2017-03-30 16:58:31 +00:00
}
export default translate(connect()(DesktopPicker));