init

react/features/desktop-picker/actions.ts

@@ -0,0 +1,25 @@
+import { openDialog } from '../base/dialog/actions';
+import { DesktopSharingSourceType } from '../base/tracks/types';
+
+import DesktopPicker from './components/DesktopPicker';
+
+type Options = {
+    desktopSharingSources?: Array<DesktopSharingSourceType>;
+};
+
+/**
+ * Signals to open a dialog with the DesktopPicker component.
+ *
+ * @param {Object} options - Desktop sharing settings.
+ * @param {Function} onSourceChoose - The callback to invoke when
+ * a DesktopCapturerSource has been chosen.
+ * @returns {Object}
+ */
+export function showDesktopPicker(options: Options = {}, onSourceChoose: Function) {
+    const { desktopSharingSources } = options;
+
+    return openDialog(DesktopPicker, {
+        desktopSharingSources,
+        onSourceChoose
+    });
+}

react/features/desktop-picker/components/DesktopPicker.tsx

@@ -0,0 +1,426 @@
+import React, { PureComponent } from 'react';
+import { WithTranslation } from 'react-i18next';
+import { connect } from 'react-redux';
+
+import { IStore } from '../../app/types';
+import { hideDialog } from '../../base/dialog/actions';
+import { translate } from '../../base/i18n/functions';
+import { DesktopSharingSourceType } from '../../base/tracks/types';
+import Dialog from '../../base/ui/components/web/Dialog';
+import Tabs from '../../base/ui/components/web/Tabs';
+import { THUMBNAIL_SIZE } from '../constants';
+import { obtainDesktopSources } from '../functions';
+import logger from '../logger';
+
+import DesktopPickerPane from './DesktopPickerPane';
+
+/**
+ * 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) as DesktopSharingSourceType[];
+
+/**
+ * The type of the React {@code Component} props of {@link DesktopPicker}.
+ */
+interface IProps extends WithTranslation {
+
+    /**
+     * An array with desktop sharing sources to be displayed.
+     */
+    desktopSharingSources: Array<DesktopSharingSourceType>;
+
+    /**
+     * Used to request DesktopCapturerSources.
+     */
+    dispatch: IStore['dispatch'];
+
+    /**
+     * The callback to be invoked when the component is closed or when a
+     * DesktopCapturerSource has been chosen.
+     */
+    onSourceChoose: Function;
+}
+
+/**
+ * The type of the React {@code Component} state of {@link DesktopPicker}.
+ */
+interface IState {
+
+    /**
+     * The state of the audio screen share checkbox.
+     */
+    screenShareAudio: boolean;
+
+    /**
+     * The currently highlighted DesktopCapturerSource.
+     */
+    selectedSource: any;
+
+    /**
+     * The desktop source type currently being displayed.
+     */
+    selectedTab: string;
+
+    /**
+     * An object containing all the DesktopCapturerSources.
+     */
+    sources: any;
+
+    /**
+     * The desktop source types to fetch previews for.
+     */
+    types: Array<DesktopSharingSourceType>;
+}
+
+
+/**
+ * React component for DesktopPicker.
+ *
+ * @augments Component
+ */
+class DesktopPicker extends PureComponent<IProps, IState> {
+    /**
+     * Implements React's {@link Component#getDerivedStateFromProps()}.
+     *
+     * @inheritdoc
+     */
+    static getDerivedStateFromProps(props: IProps) {
+        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: DesktopSharingSourceType[] = []) {
+        return types.filter(
+            type => VALID_TYPES.includes(type));
+    }
+
+    _poller: any = null;
+
+    override state: IState = {
+        screenShareAudio: false,
+        selectedSource: {},
+        selectedTab: DEFAULT_TAB_TYPE,
+        sources: {},
+        types: []
+    };
+
+    /**
+     * Initializes a new DesktopPicker instance.
+     *
+     * @param {Object} props - The read-only properties with which the new
+     * instance is to be initialized.
+     */
+    constructor(props: IProps) {
+        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._onShareAudioChecked = this._onShareAudioChecked.bind(this);
+        this._onSubmit = this._onSubmit.bind(this);
+        this._onTabSelected = this._onTabSelected.bind(this);
+        this._updateSources = this._updateSources.bind(this);
+
+        this.state.types
+            = DesktopPicker._getValidTypes(this.props.desktopSharingSources);
+    }
+
+    /**
+     * Starts polling.
+     *
+     * @inheritdoc
+     * @returns {void}
+     */
+    override componentDidMount() {
+        this._startPolling();
+    }
+
+    /**
+     * Clean up component and DesktopCapturerSource store state.
+     *
+     * @inheritdoc
+     */
+    override componentWillUnmount() {
+        this._stopPolling();
+    }
+
+
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     */
+    override render() {
+        const { selectedTab, selectedSource, sources, types } = this.state;
+
+        return (
+            <Dialog
+                ok = {{
+                    disabled: Boolean(!this.state.selectedSource.id),
+                    translationKey: 'dialog.Share'
+                }}
+                onCancel = { this._onCloseModal }
+                onSubmit = { this._onSubmit }
+                size = 'large'
+                titleKey = 'dialog.shareYourScreen'>
+                { this._renderTabs() }
+                {types.map(type => (
+                    <div
+                        aria-labelledby = { `${type}-button` }
+                        className = { selectedTab === type ? undefined : 'hide' }
+                        id = { `${type}-panel` }
+                        key = { type }
+                        role = 'tabpanel'
+                        tabIndex = { 0 }>
+                        {selectedTab === type && (
+                            <DesktopPickerPane
+                                key = { selectedTab }
+                                onClick = { this._onPreviewClick }
+                                onDoubleClick = { this._onSubmit }
+                                onShareAudioChecked = { this._onShareAudioChecked }
+                                selectedSourceId = { selectedSource.id }
+                                sources = { sources[selectedTab as keyof typeof sources] }
+                                type = { selectedTab } />
+                        )}
+                    </div>
+                ))}
+
+            </Dialog>
+        );
+    }
+
+    /**
+     * Computes the selected source.
+     *
+     * @param {Object} sources - The available sources.
+     * @param {string} selectedTab - The selected tab.
+     * @returns {Object} The selectedSource value.
+     */
+    _getSelectedSource(sources: any = {}, selectedTab?: string) {
+        const { selectedSource } = this.state;
+
+        const currentSelectedTab = selectedTab ?? this.state.selectedTab;
+
+        /**
+         * If there are no sources for this type (or no sources for any type)
+         * we can't select anything.
+         */
+        if (!Array.isArray(sources[currentSelectedTab as keyof typeof sources])
+            || sources[currentSelectedTab as keyof typeof sources].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 !== currentSelectedTab // scenario 2)
+                || !sources[currentSelectedTab].some( // scenario 3)
+                        (source: any) => source.id === selectedSource.id)) {
+            return {
+                id: sources[currentSelectedTab][0].id,
+                type: currentSelectedTab
+            };
+        }
+
+        /**
+         * For all other scenarios don't change the selection.
+         */
+        return selectedSource;
+    }
+
+    /**
+     * 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.
+     * @param {boolean} screenShareAudio - Whether or not to add system audio to
+     * screen sharing session.
+     * @returns {void}
+     */
+    _onCloseModal(id = '', type?: string, screenShareAudio = false) {
+        // Find the entire source object from the id. We need the name in order
+        // to get getDisplayMedia working in Electron.
+        const { sources } = this.state;
+
+        // @ts-ignore
+        const source = (sources?.screen ?? []).concat(sources?.window ?? []).find(s => s.id === id);
+
+        this.props.onSourceChoose(id, type, screenShareAudio, source);
+        this.props.dispatch(hideDialog());
+    }
+
+    /**
+     * Sets the currently selected DesktopCapturerSource.
+     *
+     * @param {string} id - The id of DesktopCapturerSource.
+     * @param {string} type - The type of DesktopCapturerSource.
+     * @returns {void}
+     */
+    _onPreviewClick(id: string, type: string) {
+        this.setState({
+            selectedSource: {
+                id,
+                type
+            }
+        });
+    }
+
+    /**
+     * Request to close the modal and execute callbacks with the selected source
+     * id.
+     *
+     * @returns {void}
+     */
+    _onSubmit() {
+        const { selectedSource: { id, type }, screenShareAudio } = this.state;
+
+        this._onCloseModal(id, type, screenShareAudio);
+    }
+
+    /**
+     * Stores the selected tab and updates the selected source via
+     * {@code _getSelectedSource}.
+     *
+     * @param {string} id - The id of the newly selected tab.
+     * @returns {void}
+     */
+    _onTabSelected(id: string) {
+        const { sources } = this.state;
+
+        // 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, id),
+
+            // select type `window` or `screen` from id
+            selectedTab: id
+        });
+    }
+
+    /**
+     * Set the screenSharingAudio state indicating whether or not to also share
+     * system audio.
+     *
+     * @param {boolean} checked - Share audio or not.
+     * @returns {void}
+     */
+    _onShareAudioChecked(checked: boolean) {
+        this.setState({ screenShareAudio: checked });
+    }
+
+    /**
+     * Configures and renders the tabs for display.
+     *
+     * @private
+     * @returns {ReactElement}
+     */
+    _renderTabs() {
+        const { types } = this.state;
+        const { t } = this.props;
+        const tabs
+            = types.map(
+                type => {
+                    return {
+                        accessibilityLabel: t(TAB_LABELS[type]),
+                        id: `${type}`,
+                        controlsId: `${type}-panel`,
+                        label: t(TAB_LABELS[type])
+                    };
+                });
+
+        return (
+            <Tabs
+                accessibilityLabel = { t('dialog.sharingTabs') }
+                className = 'desktop-picker-tabs-container'
+                onChange = { this._onTabSelected }
+                selected = { `${this.state.selectedTab}` }
+                tabs = { tabs } />
+        );
+    }
+
+    /**
+     * Create an interval to update known 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;
+    }
+
+    /**
+     * Obtains the desktop sources and updates state with them.
+     *
+     * @private
+     * @returns {void}
+     */
+    _updateSources() {
+        const { types } = this.state;
+        const options = {
+            types,
+            thumbnailSize: THUMBNAIL_SIZE
+        };
+
+
+        if (types.length > 0) {
+            obtainDesktopSources(options)
+                .then((sources: any) => {
+                    const selectedSource = this._getSelectedSource(sources);
+
+                    this.setState({
+                        selectedSource,
+                        sources
+                    });
+                })
+                .catch((error: any) => logger.log(error));
+        }
+    }
+}
+
+export default translate(connect()(DesktopPicker));

react/features/desktop-picker/components/DesktopPickerPane.tsx

@@ -0,0 +1,131 @@
+import React, { Component } from 'react';
+import { WithTranslation } from 'react-i18next';
+
+import { translate } from '../../base/i18n/functions';
+import Platform from '../../base/react/Platform.web';
+import Checkbox from '../../base/ui/components/web/Checkbox';
+import Spinner from '../../base/ui/components/web/Spinner';
+
+import DesktopSourcePreview from './DesktopSourcePreview';
+
+/**
+ * The type of the React {@code Component} props of {@link DesktopPickerPane}.
+ */
+interface IProps extends WithTranslation {
+
+    /**
+     * The handler to be invoked when a DesktopSourcePreview is clicked.
+     */
+    onClick: Function;
+
+    /**
+     * The handler to be invoked when a DesktopSourcePreview is double clicked.
+     */
+    onDoubleClick: Function;
+
+    /**
+     * The handler to be invoked if the users checks the audio screen sharing checkbox.
+     */
+    onShareAudioChecked: Function;
+
+    /**
+     * The id of the DesktopCapturerSource that is currently selected.
+     */
+    selectedSourceId: string;
+
+    /**
+     * An array of DesktopCapturerSources.
+     */
+    sources: Array<any>;
+
+    /**
+     * The source type of the DesktopCapturerSources to display.
+     */
+    type: string;
+}
+
+/**
+ * React component for showing a grid of DesktopSourcePreviews.
+ *
+ * @augments Component
+ */
+class DesktopPickerPane extends Component<IProps> {
+
+    /**
+     * Initializes a new DesktopPickerPane instance.
+     *
+     * @param {Object} props - The read-only properties with which the new
+     * instance is to be initialized.
+     */
+    constructor(props: IProps) {
+        super(props);
+
+        this._onShareAudioCheck = this._onShareAudioCheck.bind(this);
+    }
+
+    /**
+     * Function to be called when the Checkbox is used.
+     *
+     * @param {boolean} checked - Checkbox status (checked or not).
+     * @returns {void}
+     */
+    _onShareAudioCheck({ target: { checked } }: { target: { checked: boolean; }; }) {
+        this.props.onShareAudioChecked(checked);
+    }
+
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    override render() {
+        const {
+            onClick,
+            onDoubleClick,
+            selectedSourceId,
+            sources,
+            type,
+            t
+        } = this.props;
+
+        const classNames
+            = `desktop-picker-pane default-scrollbar source-type-${type}`;
+        const previews
+            = sources
+                ? sources.map(source => (
+                    <DesktopSourcePreview
+                        key = { source.id }
+                        onClick = { onClick }
+                        onDoubleClick = { onDoubleClick }
+                        selected = { source.id === selectedSourceId }
+                        source = { source }
+                        type = { type } />))
+                : (
+                    <div className = 'desktop-picker-pane-spinner'>
+                        <Spinner />
+                    </div>
+                );
+
+        let checkBox;
+
+        // Only display the share audio checkbox if we're on windows and on
+        // desktop sharing tab.
+        // App window and Mac OS screen sharing doesn't work with system audio.
+        if (type === 'screen' && Platform.OS === 'windows') {
+            checkBox = (<Checkbox
+                label = { t('dialog.screenSharingAudio') }
+                name = 'share-system-audio'
+                onChange = { this._onShareAudioCheck } />);
+        }
+
+        return (
+            <div className = { classNames }>
+                { previews }
+                { checkBox }
+            </div>
+        );
+    }
+}
+
+export default translate(DesktopPickerPane);

react/features/desktop-picker/components/DesktopSourcePreview.tsx

@@ -0,0 +1,145 @@
+import React, { Component } from 'react';
+import { WithTranslation } from 'react-i18next';
+
+import { translate } from '../../base/i18n/functions';
+
+
+/**
+ * The type of the React {@code Component} props of
+ * {@link DesktopSourcePreview}.
+ */
+interface IProps extends WithTranslation {
+
+    /**
+     * The callback to invoke when the component is clicked. The id of the
+     * clicked on DesktopCapturerSource will be passed in.
+     */
+    onClick: Function;
+
+    /**
+     * The callback to invoke when the component is double clicked. The id of
+     * the DesktopCapturerSource will be passed in.
+     */
+    onDoubleClick: Function;
+
+    /**
+     * The indicator which determines whether this DesktopSourcePreview is
+     * selected. If true, the 'is-selected' CSS class will be added to the root
+     * of Component.
+     */
+    selected: boolean;
+
+    /**
+     * The DesktopCapturerSource to display.
+     */
+    source: any;
+
+    /**
+     * The source type of the DesktopCapturerSources to display.
+     */
+    type: string;
+}
+
+/**
+ * React component for displaying a preview of a DesktopCapturerSource.
+ *
+ * @augments Component
+ */
+class DesktopSourcePreview extends Component<IProps> {
+    /**
+     * Initializes a new DesktopSourcePreview instance.
+     *
+     * @param {Object} props - The read-only properties with which the new
+     * instance is to be initialized.
+     */
+    constructor(props: IProps) {
+        super(props);
+
+        this._onClick = this._onClick.bind(this);
+        this._onDoubleClick = this._onDoubleClick.bind(this);
+    }
+
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    override render() {
+        const selectedClass = this.props.selected ? 'is-selected' : '';
+        const displayClasses = `desktop-picker-source ${selectedClass}`;
+
+        return (
+            <div
+                className = { displayClasses }
+                onClick = { this._onClick }
+                onDoubleClick = { this._onDoubleClick }>
+                {this._renderThumbnailImageContainer()}
+                <div className = 'desktop-source-preview-label'>
+                    { this.props.source.name }
+                </div>
+            </div>
+        );
+    }
+
+    /**
+     * Render thumbnail screenshare image.
+     *
+     * @returns {Object} - Thumbnail image.
+     */
+    _renderThumbnailImageContainer() {
+        // default data URL for thumnbail image
+        let srcImage = this.props.source.thumbnail.dataUrl;
+
+        // legacy thumbnail image
+        if (typeof this.props.source.thumbnail.toDataURL === 'function') {
+            srcImage = this.props.source.thumbnail.toDataURL();
+        }
+
+        return (
+            <div className = 'desktop-source-preview-image-container'>
+                { this._renderThumbnailImage(srcImage) }
+            </div>
+        );
+
+    }
+
+    /**
+     * Render thumbnail screenshare image.
+     *
+     * @param {string} src - Of the image.
+     * @returns {Object} - Thumbnail image.
+     */
+    _renderThumbnailImage(src: string) {
+        return (
+            <img
+                alt = { this.props.t('welcomepage.logo.desktopPreviewThumbnail') }
+                className = 'desktop-source-preview-thumbnail'
+                src = { src } />
+        );
+    }
+
+    /**
+     * Invokes the passed in onClick callback.
+     *
+     * @returns {void}
+     */
+    _onClick() {
+        const { source, type } = this.props;
+
+        this.props.onClick(source.id, type);
+    }
+
+    /**
+     * Invokes the passed in onDoubleClick callback.
+     *
+     * @returns {void}
+     */
+    _onDoubleClick() {
+        const { source, type } = this.props;
+
+        this.props.onDoubleClick(source.id, type);
+    }
+}
+
+export default translate(DesktopSourcePreview);

react/features/desktop-picker/constants.ts

@@ -0,0 +1,9 @@
+/**
+ * The size of the requested thumbnails.
+ *
+ * @type {Object}
+ */
+export const THUMBNAIL_SIZE = {
+    height: 300,
+    width: 300
+};

react/features/desktop-picker/functions.ts

@@ -0,0 +1,52 @@
+import logger from './logger';
+
+/**
+ * Begins a request to get available DesktopCapturerSources.
+ *
+ * @param {Object} options - Additional configuration for getting a list of
+ * sources.
+ * @param {Array} options.types - An array with DesktopCapturerSource type strings.
+ * @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(options: { thumbnailSize?: Object; types: string[]; }) {
+    return APP.API.requestDesktopSources(options).then(
+        ({ sources, error }: { error: Error; sources: Array<{ id: string; }>; }) => {
+            if (sources) {
+                return _separateSourcesByType(sources);
+            } else if (error) {
+                logger.error(
+                    `Error while obtaining desktop sources: ${error}`);
+
+                return null;
+            }
+        });
+}
+
+/**
+ * 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 separate arrays based
+ * on source type.
+ */
+export function _separateSourcesByType(sources: Array<{ id: string; }> = []) {
+    const sourcesByType: any = {
+        screen: [],
+        window: []
+    };
+
+    sources.forEach(source => {
+        const idParts = source.id.split(':');
+        const type = idParts[0];
+
+        if (sourcesByType[type]) {
+            sourcesByType[type].push(source);
+        }
+    });
+
+    return sourcesByType;
+}

react/features/desktop-picker/logger.ts

@@ -0,0 +1,3 @@
+import { getLogger } from '../base/logging/functions';
+
+export default getLogger('features/desktop-picker');