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

Merge pull request #2090 from jitsi/desktop_picker_dialog 

feat(desktop-picker): Add spinner and disable button if sources aren't initialized.
This commit is contained in:
virtuacoplenny 2017-10-20 12:37:30 -07:00 committed by GitHub
parent 40377634f2 c7b0028652
commit 20d140a3ce
8 changed files with 175 additions and 256 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
css/modals/desktop-picker/_desktop-picker.scss
View File

@ -26,6 +26,13 @@
width: 30%;
}
}
&-spinner {
justify-content: center;
display: flex;
height: 100%;
align-items: center;
}
}
.desktop-picker-source {

18
react/features/desktop-picker/actionTypes.js
View File

@ -1,18 +0,0 @@
/**
* Action to remove known DesktopCapturerSources.
*
* {
* type: RESET_DESKTOP_SOURCES,
* }
*/
export const RESET_DESKTOP_SOURCES = Symbol('RESET_DESKTOP_SOURCES');
/**
* Action to replace stored DesktopCapturerSources with new sources.
*
* {
* type: UPDATE_DESKTOP_SOURCES,
* sources: {Array}
* }
*/
export const UPDATE_DESKTOP_SOURCES = Symbol('UPDATE_DESKTOP_SOURCES');

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

@ -1,64 +1,7 @@
import { openDialog } from '../base/dialog';
import {
RESET_DESKTOP_SOURCES,
UPDATE_DESKTOP_SOURCES
} from './actionTypes';
import { DesktopPicker } from './components';
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.
* @returns {Function}
*/
export function obtainDesktopSources(types, options = {}) {
const capturerOptions = {
types
};
if (options.thumbnailSize) {
capturerOptions.thumbnailSize = options.thumbnailSize;
}
return dispatch => {
const { JitsiMeetElectron } = window;
if (JitsiMeetElectron && JitsiMeetElectron.obtainDesktopStreams) {
JitsiMeetElectron.obtainDesktopStreams(
sources => dispatch(updateDesktopSources(sources)),
error =>
logger.error(
`Error while obtaining desktop sources: ${error}`),
capturerOptions
);
} else {
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.
*
@ -67,25 +10,11 @@ export function resetDesktopSources() {
* a DesktopCapturerSource has been chosen.
* @returns {Object}
*/
export function showDesktopPicker(options, onSourceChoose) {
export function showDesktopPicker(options = {}, onSourceChoose) {
const { desktopSharingSources } = options;
return openDialog(DesktopPicker, {
options,
desktopSharingSources,
onSourceChoose
});
}
/**
* Signals new DesktopCapturerSources have been received.
*
* @param {Object} sources - Arrays with DesktopCapturerSources.
* @returns {{
* type: UPDATE_DESKTOP_SOURCES,
* sources: Array
* }}
*/
export function updateDesktopSources(sources) {
return {
type: UPDATE_DESKTOP_SOURCES,
sources
};
}

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

@ -8,22 +8,23 @@ import { connect } from 'react-redux';
import { Dialog, hideDialog } from '../../base/dialog';
import { translate } from '../../base/i18n';
import { obtainDesktopSources, resetDesktopSources } from '../actions';
import DesktopPickerPane from './DesktopPickerPane';
import { obtainDesktopSources } from '../functions';
const THUMBNAIL_SIZE = {
height: 300,
width: 300
};
const UPDATE_INTERVAL = 1000;
const UPDATE_INTERVAL = 2000;
type TabConfiguration = {
defaultSelected?: boolean,
label: string,
type: string
label: string
};
const TAB_CONFIGURATIONS: Array<TabConfiguration> = [
{
const TAB_CONFIGURATIONS: { [type: string]: TabConfiguration} = {
screen: {
/**
* The indicator which determines whether this tab configuration is
* selected by default.
@ -31,15 +32,14 @@ const TAB_CONFIGURATIONS: Array<TabConfiguration> = [
* @type {boolean}
*/
defaultSelected: true,
label: 'dialog.yourEntireScreen',
type: 'screen'
label: 'dialog.yourEntireScreen'
},
{
label: 'dialog.applicationWindow',
type: 'window'
window: {
label: 'dialog.applicationWindow'
}
];
const VALID_TYPES = TAB_CONFIGURATIONS.map(c => c.type);
};
const VALID_TYPES = Object.keys(TAB_CONFIGURATIONS);
/**
* React component for DesktopPicker.
@ -47,21 +47,18 @@ const VALID_TYPES = TAB_CONFIGURATIONS.map(c => c.type);
* @extends Component
*/
class DesktopPicker extends Component {
/**
* Default values for DesktopPicker component's properties.
*
* @static
*/
static defaultProps = {
options: {}
};
/**
* DesktopPicker component's property types.
*
* @static
*/
static propTypes = {
/**
* An array with desktop sharing sources to be displayed.
*/
desktopSharingSources: PropTypes.arrayOf(PropTypes.string),
/**
* Used to request DesktopCapturerSources.
*/
@ -73,17 +70,6 @@ class DesktopPicker extends Component {
*/
onSourceChoose: PropTypes.func,
/**
* An object with options related to desktop sharing.
*/
options: PropTypes.object,
/**
* An object with arrays of DesktopCapturerSources. The key should be
* the source type.
*/
sources: PropTypes.object,
/**
* Used to obtain translations.
*/
@ -94,8 +80,8 @@ class DesktopPicker extends Component {
state = {
selectedSource: {},
tabsToPopulate: [],
typesToFetch: []
sources: {},
types: []
};
/**
@ -112,20 +98,18 @@ class DesktopPicker extends Component {
this._onPreviewClick = this._onPreviewClick.bind(this);
this._onSubmit = this._onSubmit.bind(this);
this._updateSources = this._updateSources.bind(this);
this.state.types
= this._getValidTypes(this.props.desktopSharingSources);
}
/**
* Perform an immediate update request for DesktopCapturerSources and begin
* requesting updates at an interval.
* Starts polling.
*
* @inheritdoc
* @returns {void}
*/
componentWillMount() {
const { desktopSharingSources } = this.props.options;
this._onSourceTypesConfigChanged(
desktopSharingSources);
this._updateSources();
componentDidMount() {
this._startPolling();
}
@ -139,20 +123,19 @@ class DesktopPicker extends Component {
* @returns {void}
*/
componentWillReceiveProps(nextProps) {
if (!this.state.selectedSource.id
&& nextProps.sources.screen.length) {
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({
selectedSource: {
id: nextProps.sources.screen[0].id,
type: 'screen'
}
types: this._getValidTypes(desktopSharingSources)
});
}
const { desktopSharingSources } = this.props.options;
this._onSourceTypesConfigChanged(
desktopSharingSources);
}
/**
@ -162,7 +145,6 @@ class DesktopPicker extends Component {
*/
componentWillUnmount() {
this._stopPolling();
this.props.dispatch(resetDesktopSources());
}
/**
@ -174,6 +156,7 @@ class DesktopPicker extends Component {
return (
<Dialog
isModal = { false }
okDisabled = { Boolean(!this.state.selectedSource.id) }
okTitleKey = 'dialog.Share'
onCancel = { this._onCloseModal }
onSubmit = { this._onSubmit }
@ -220,22 +203,14 @@ class DesktopPicker extends Component {
}
/**
* Handles changing of allowed desktop sharing source types.
* Extracts only the valid types from the passed {@code types}.
*
* @param {Array<string>} desktopSharingSourceTypes - The types that will be
* fetched and displayed.
* @returns {void}
* @param {Array<string>} types - The types to filter.
* @returns {Array<string>} The filtered types.
*/
_onSourceTypesConfigChanged(desktopSharingSourceTypes = []) {
const tabsToPopulate
= TAB_CONFIGURATIONS.filter(({ type }) =>
desktopSharingSourceTypes.includes(type)
&& VALID_TYPES.includes(type));
this.setState({
tabsToPopulate,
typesToFetch: tabsToPopulate.map(c => c.type)
});
_getValidTypes(types = []) {
return types.filter(
type => VALID_TYPES.includes(type));
}
_onSubmit: () => void;
@ -259,18 +234,20 @@ class DesktopPicker extends Component {
* @returns {ReactElement}
*/
_renderTabs() {
const { selectedSource } = this.state;
const { sources, t } = this.props;
const { selectedSource, sources, types } = this.state;
const { t } = this.props;
const tabs
= this.state.tabsToPopulate.map(
({ defaultSelected, label, type }) => {
= types.map(
type => {
const { defaultSelected, label } = TAB_CONFIGURATIONS[type];
return {
content: <DesktopPickerPane
key = { type }
onClick = { this._onPreviewClick }
onDoubleClick = { this._onCloseModal }
selectedSourceId = { selectedSource.id }
sources = { sources[type] || [] }
sources = { sources[type] }
type = { type } />,
defaultSelected,
label: t(label)
@ -288,6 +265,7 @@ class DesktopPicker extends Component {
*/
_startPolling() {
this._stopPolling();
this._updateSources();
this._poller = window.setInterval(this._updateSources, UPDATE_INTERVAL);
}
@ -311,28 +289,35 @@ class DesktopPicker extends Component {
* @returns {void}
*/
_updateSources() {
this.props.dispatch(obtainDesktopSources(
this.state.typesToFetch,
{
THUMBNAIL_SIZE
}
));
const { types } = this.state;
if (types.length > 0) {
obtainDesktopSources(
this.state.types,
{ thumbnailSize: THUMBNAIL_SIZE }
)
.then(sources => {
const nextState: Object = {
sources
};
// FIXME: selectedSource when screen is disabled, when the
// source has been removed or when the selectedTab is changed!!!
if (!this.state.selectedSource.id
&& sources.screen.length > 0) {
nextState.selectedSource = {
id: sources.screen[0].id,
type: 'screen'
};
}
// TODO: Maybe check if we have stopped the timer and unmounted
// the component.
this.setState(nextState);
})
.catch(() => { /* ignore */ });
}
}
}
/**
* Maps (parts of) the Redux state to the associated DesktopPicker's props.
*
* @param {Object} state - Redux state.
* @private
* @returns {{
* sources: Object
* }}
*/
function _mapStateToProps(state) {
return {
sources: state['features/desktop-picker']
};
}
export default translate(connect(_mapStateToProps)(DesktopPicker));
export default translate(connect()(DesktopPicker));

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

@ -1,3 +1,4 @@
import Spinner from '@atlaskit/spinner';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
@ -60,7 +61,7 @@ class DesktopPickerPane extends Component {
const classNames
= `desktop-picker-pane default-scrollbar source-type-${type}`;
const previews
= sources.map(
= sources ? sources.map(
source =>
// eslint-disable-next-line react/jsx-wrap-multilines
@ -70,7 +71,14 @@ class DesktopPickerPane extends Component {
onDoubleClick = { onDoubleClick }
selected = { source.id === selectedSourceId }
source = { source }
type = { type } />);
type = { type } />)
: ( // eslint-disable-line no-extra-parens
<div className = 'desktop-picker-pane-spinner'>
<Spinner
isCompleting = { false }
size = 'medium' />
</div>
);
return (
<div className = { classNames }>

73
react/features/desktop-picker/functions.js Normal file
View File

@ -0,0 +1,73 @@
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.
* @returns {Function}
*/
export function obtainDesktopSources(types, options = {}) {
const capturerOptions = {
types
};
if (options.thumbnailSize) {
capturerOptions.thumbnailSize = options.thumbnailSize;
}
return new Promise((resolve, reject) => {
const { JitsiMeetElectron } = window;
if (JitsiMeetElectron && JitsiMeetElectron.obtainDesktopStreams) {
JitsiMeetElectron.obtainDesktopStreams(
sources => resolve(_seperateSourcesByType(sources)),
error => {
logger.error(
`Error while obtaining desktop sources: ${error}`);
reject(error);
},
capturerOptions
);
} else {
const reason = 'Called JitsiMeetElectron.obtainDesktopStreams'
+ ' but it is not defined';
logger.error(reason);
return Promise.reject(new Error(reason));
}
});
}
/**
* 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.
* @private
* @returns {Object} An object with the sources split into seperate arrays based
* on source type.
*/
function _seperateSourcesByType(sources = []) {
const sourcesByType = {
screen: [],
window: []
};
sources.forEach(source => {
const idParts = source.id.split(':');
const type = idParts[0];
if (sourcesByType[type]) {
sourcesByType[type].push(source);
}
});
return sourcesByType;
}

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

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

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

@ -1,62 +0,0 @@
import { ReducerRegistry } from '../base/redux';
import {
RESET_DESKTOP_SOURCES,
UPDATE_DESKTOP_SOURCES
} from './actionTypes';
const DEFAULT_STATE = {
screen: [],
window: []
};
/**
* Listen for actions that mutate the known available DesktopCapturerSources.
*
* @param {Object[]} state - Current state.
* @param {Object} action - Action object.
* @param {string} action.type - Type of action.
* @param {Array} action.sources - DesktopCapturerSources.
* @returns {Object}
*/
ReducerRegistry.register(
'features/desktop-picker',
(state = DEFAULT_STATE, action) => {
switch (action.type) {
case RESET_DESKTOP_SOURCES:
return { ...DEFAULT_STATE };
case UPDATE_DESKTOP_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.
*
* @param {Array} sources - DesktopCapturerSources.
* @private
* @returns {Object} An object with the sources split into seperate arrays based
* on source type.
*/
function _seperateSourcesByType(sources = []) {
const sourcesByType = {
screen: [],
window: []
};
sources.forEach(source => {
const idParts = source.id.split(':');
const type = idParts[0];
if (sourcesByType[type]) {
sourcesByType[type].push(source);
}
});
return sourcesByType;
}