486e8e35d9
For the most part the changes are taking the "static propTypes" declaration off of components and declaring them as Flow types. Sometimes to support flow some method signatures had to be added. There are some exceptions in which more had to be done to tame the beast: - AbstractVideoTrack: put in additional truthy checks for videoTrack. - Video: add truthy checks for the _videoElement ref. - shouldRenderVideoTrack function: Some component could pass null for the videoTrack argument and Flow wanted that called out explicitly. - DisplayName: Add a truthy check for the input ref before acting on it. - NumbersList: Move array checks inline for Flow to comprehend array methods could be called. Add type checks in the Object.entries loop as the value is assumed to be a mixed type by Flow. - AbstractToolbarButton: add additional truthy check for passed in type.
412 lines
11 KiB
JavaScript
412 lines
11 KiB
JavaScript
// @flow
|
|
|
|
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';
|
|
|
|
import DesktopPickerPane from './DesktopPickerPane';
|
|
import { obtainDesktopSources } from '../functions';
|
|
|
|
/**
|
|
* The size of the requested thumbnails.
|
|
*
|
|
* @type {Object}
|
|
*/
|
|
const THUMBNAIL_SIZE = {
|
|
height: 300,
|
|
width: 300
|
|
};
|
|
|
|
/**
|
|
* The sources polling interval in ms.
|
|
*
|
|
* @type {int}
|
|
*/
|
|
const UPDATE_INTERVAL = 2000;
|
|
|
|
/**
|
|
* 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);
|
|
|
|
/**
|
|
* The type of the React {@code Component} props of {@link DesktopPicker}.
|
|
*/
|
|
type Props = {
|
|
|
|
/**
|
|
* An array with desktop sharing sources to be displayed.
|
|
*/
|
|
desktopSharingSources: Array<string>,
|
|
|
|
/**
|
|
* Used to request DesktopCapturerSources.
|
|
*/
|
|
dispatch: Dispatch<*>,
|
|
|
|
/**
|
|
* The callback to be invoked when the component is closed or when a
|
|
* DesktopCapturerSource has been chosen.
|
|
*/
|
|
onSourceChoose: Function,
|
|
|
|
/**
|
|
* Used to obtain translations.
|
|
*/
|
|
t: Function
|
|
};
|
|
|
|
/**
|
|
* The type of the React {@code Component} state of {@link DesktopPicker}.
|
|
*/
|
|
type State = {
|
|
|
|
/**
|
|
* 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 Component<Props, State> {
|
|
_poller = null;
|
|
|
|
state = {
|
|
selectedSource: {},
|
|
selectedTab: 0,
|
|
sources: {},
|
|
types: []
|
|
};
|
|
|
|
/**
|
|
* Stores the type of the selected tab.
|
|
*
|
|
* @type {string}
|
|
*/
|
|
_selectedTabType = DEFAULT_TAB_TYPE;
|
|
|
|
/**
|
|
* Initializes a new DesktopPicker instance.
|
|
*
|
|
* @param {Object} props - The read-only properties with which the new
|
|
* instance is to be initialized.
|
|
*/
|
|
constructor(props: Props) {
|
|
super(props);
|
|
|
|
// Bind event handlers so they are only bound once per instance.
|
|
this._onCloseModal = this._onCloseModal.bind(this);
|
|
this._onPreviewClick = this._onPreviewClick.bind(this);
|
|
this._onSubmit = this._onSubmit.bind(this);
|
|
this._onTabSelected = this._onTabSelected.bind(this);
|
|
this._updateSources = this._updateSources.bind(this);
|
|
|
|
this.state.types
|
|
= this._getValidTypes(this.props.desktopSharingSources);
|
|
}
|
|
|
|
/**
|
|
* Starts polling.
|
|
*
|
|
* @inheritdoc
|
|
* @returns {void}
|
|
*/
|
|
componentDidMount() {
|
|
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: Props) {
|
|
const { desktopSharingSources } = nextProps;
|
|
|
|
/**
|
|
* Do only reference check in order to not calculate the types on every
|
|
* update. This is enough for our use case and we don't need value
|
|
* checking because if the value is the same we won't change the
|
|
* reference for the desktopSharingSources array.
|
|
*/
|
|
if (desktopSharingSources !== this.props.desktopSharingSources) {
|
|
this.setState({
|
|
types: this._getValidTypes(desktopSharingSources)
|
|
});
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Clean up component and DesktopCapturerSource store state.
|
|
*
|
|
* @inheritdoc
|
|
*/
|
|
componentWillUnmount() {
|
|
this._stopPolling();
|
|
}
|
|
|
|
/**
|
|
* Implements React's {@link Component#render()}.
|
|
*
|
|
* @inheritdoc
|
|
*/
|
|
render() {
|
|
return (
|
|
<Dialog
|
|
isModal = { false }
|
|
okDisabled = { Boolean(!this.state.selectedSource.id) }
|
|
okTitleKey = 'dialog.Share'
|
|
onCancel = { this._onCloseModal }
|
|
onSubmit = { this._onSubmit }
|
|
titleKey = 'dialog.shareYourScreen'
|
|
width = 'medium' >
|
|
{ this._renderTabs() }
|
|
</Dialog>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* 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;
|
|
}
|
|
|
|
/**
|
|
* Extracts only the valid types from the passed {@code types}.
|
|
*
|
|
* @param {Array<string>} types - The types to filter.
|
|
* @returns {Array<string>} The filtered types.
|
|
*/
|
|
_getValidTypes(types = []) {
|
|
return types.filter(
|
|
type => VALID_TYPES.includes(type));
|
|
}
|
|
|
|
_onCloseModal: (?string, string) => void;
|
|
|
|
/**
|
|
* Dispatches an action to hide the DesktopPicker and invokes the passed in
|
|
* callback with a selectedSource, if any.
|
|
*
|
|
* @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.
|
|
* @returns {void}
|
|
*/
|
|
_onCloseModal(id = '', type) {
|
|
this.props.onSourceChoose(id, type);
|
|
this.props.dispatch(hideDialog());
|
|
}
|
|
|
|
_onPreviewClick: (string, string) => void;
|
|
|
|
/**
|
|
* Sets the currently selected DesktopCapturerSource.
|
|
*
|
|
* @param {string} id - The id of DesktopCapturerSource.
|
|
* @param {string} type - The type of DesktopCapturerSource.
|
|
* @returns {void}
|
|
*/
|
|
_onPreviewClick(id, type) {
|
|
this.setState({
|
|
selectedSource: {
|
|
id,
|
|
type
|
|
}
|
|
});
|
|
}
|
|
|
|
_onSubmit: () => void;
|
|
|
|
/**
|
|
* Request to close the modal and execute callbacks with the selected source
|
|
* id.
|
|
*
|
|
* @returns {void}
|
|
*/
|
|
_onSubmit() {
|
|
const { id, type } = this.state.selectedSource;
|
|
|
|
this._onCloseModal(id, type);
|
|
}
|
|
|
|
_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];
|
|
this.setState({
|
|
selectedSource: this._getSelectedSource(sources),
|
|
selectedTab: tabIndex
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Configures and renders the tabs for display.
|
|
*
|
|
* @private
|
|
* @returns {ReactElement}
|
|
*/
|
|
_renderTabs() {
|
|
const { selectedSource, sources, types } = this.state;
|
|
const { t } = this.props;
|
|
const tabs
|
|
= types.map(
|
|
type => {
|
|
return {
|
|
content: <DesktopPickerPane
|
|
key = { type }
|
|
onClick = { this._onPreviewClick }
|
|
onDoubleClick = { this._onCloseModal }
|
|
selectedSourceId = { selectedSource.id }
|
|
sources = { sources[type] }
|
|
type = { type } />,
|
|
label: t(TAB_LABELS[type])
|
|
};
|
|
});
|
|
|
|
return (
|
|
<Tabs
|
|
onSelect = { this._onTabSelected }
|
|
selected = { this.state.selectedTab }
|
|
tabs = { tabs } />);
|
|
}
|
|
|
|
/**
|
|
* Create an interval to update knwon available DesktopCapturerSources.
|
|
*
|
|
* @private
|
|
* @returns {void}
|
|
*/
|
|
_startPolling() {
|
|
this._stopPolling();
|
|
this._updateSources();
|
|
this._poller = window.setInterval(this._updateSources, UPDATE_INTERVAL);
|
|
}
|
|
|
|
/**
|
|
* Cancels the interval to update DesktopCapturerSources.
|
|
*
|
|
* @private
|
|
* @returns {void}
|
|
*/
|
|
_stopPolling() {
|
|
window.clearInterval(this._poller);
|
|
this._poller = null;
|
|
}
|
|
|
|
_updateSources: () => void;
|
|
|
|
/**
|
|
* Obtains the desktop sources and updates state with them.
|
|
*
|
|
* @private
|
|
* @returns {void}
|
|
*/
|
|
_updateSources() {
|
|
const { types } = this.state;
|
|
|
|
if (types.length > 0) {
|
|
obtainDesktopSources(
|
|
this.state.types,
|
|
{ thumbnailSize: THUMBNAIL_SIZE }
|
|
)
|
|
.then(sources => {
|
|
const selectedSource = this._getSelectedSource(sources);
|
|
|
|
// TODO: Maybe check if we have stopped the timer and unmounted
|
|
// the component.
|
|
this.setState({
|
|
sources,
|
|
selectedSource
|
|
});
|
|
})
|
|
.catch(() => { /* ignore */ });
|
|
}
|
|
}
|
|
}
|
|
|
|
export default translate(connect()(DesktopPicker));
|