ref(DeviceSelectionPopup): remove.

Makefile

@@ -42,8 +42,6 @@ deploy-appbundle:
 		$(BUILD_DIR)/external_api.min.map \
 		$(BUILD_DIR)/flacEncodeWorker.min.js \
 		$(BUILD_DIR)/flacEncodeWorker.min.map \
-		$(BUILD_DIR)/device_selection_popup_bundle.min.js \
-		$(BUILD_DIR)/device_selection_popup_bundle.min.map \
 		$(BUILD_DIR)/dial_in_info_bundle.min.js \
 		$(BUILD_DIR)/dial_in_info_bundle.min.map \
 		$(BUILD_DIR)/alwaysontop.min.js \

react/features/app/reducers.any.js

@@ -29,7 +29,6 @@ import '../blur/reducer';
 import '../calendar-sync/reducer';
 import '../chat/reducer';
 import '../deep-linking/reducer';
-import '../device-selection/reducer';
 import '../dropbox/reducer';
 import '../dynamic-branding/reducer';
 import '../etherpad/reducer';

react/features/device-selection/actionTypes.js

@@ -1,10 +0,0 @@
-/**
- * The type of Redux action which Sets information about device selection popup.
- *
- * {{
- *     type: SET_DEVICE_SELECTION_POPUP_DATA,
- *     popupDialogData: Object
- * }}
- */
-export const SET_DEVICE_SELECTION_POPUP_DATA
-    = 'SET_DEVICE_SELECTION_POPUP_DATA';

react/features/device-selection/actions.js

@@ -1,8 +1,3 @@
-import { API_ID } from '../../../modules/API/constants';
-import {
-    PostMessageTransportBackend,
-    Transport
-} from '../../../modules/transport';
 import { createDeviceChangedEvent, sendAnalytics } from '../analytics';
 import {
     getDeviceLabelById,
@@ -10,93 +5,11 @@ import {
     setAudioOutputDeviceId,
     setVideoInputDevice
 } from '../base/devices';
-import { i18next } from '../base/i18n';
 import { updateSettings } from '../base/settings';
 
-import { SET_DEVICE_SELECTION_POPUP_DATA } from './actionTypes';
-import { getDeviceSelectionDialogProps, processExternalDeviceRequest } from './functions';
+import { getDeviceSelectionDialogProps } from './functions';
 import logger from './logger';
 
-/**
- * Opens a popup window with the device selection dialog in it.
- *
- * @returns {Function}
- */
-export function openDeviceSelectionPopup() {
-    return (dispatch, getState) => {
-        const { popupDialogData } = getState()['features/device-selection'];
-
-        if (popupDialogData) {
-            popupDialogData.popup.focus();
-
-            return;
-        }
-
-        // API_ID will always be defined because the iframe api is enabled
-        const scope = `dialog_${API_ID}`;
-        const url = `${
-            window.location.origin}/static/deviceSelectionPopup.html#scope=${
-            encodeURIComponent(JSON.stringify(scope))}`;
-        const popup
-            = window.open(
-                url,
-                'device-selection-popup',
-                'toolbar=no,scrollbars=no,resizable=no,width=720,height=458');
-
-        popup.addEventListener('DOMContentLoaded', () => {
-            popup.init(i18next);
-        });
-
-        const transport = new Transport({
-            backend: new PostMessageTransportBackend({
-                postisOptions: {
-                    scope,
-                    window: popup
-                }
-            })
-        });
-
-        transport.on('request',
-            processExternalDeviceRequest.bind(undefined, dispatch, getState));
-        transport.on('event', event => {
-            if (event.type === 'devices-dialog' && event.name === 'close') {
-                popup.close();
-                transport.dispose();
-                dispatch(_setDeviceSelectionPopupData());
-
-                return true;
-            }
-
-            return false;
-        });
-
-        dispatch(_setDeviceSelectionPopupData({
-            popup,
-            transport
-        }));
-    };
-}
-
-/**
- * Sets information about device selection popup in the store.
- *
- * @param {Object} popupDialogData - Information about the popup.
- * @param {Object} popupDialog.popup - The popup object returned from
- * window.open.
- * @param {Object} popupDialogData.transport - The transport instance used for
- * communication with the popup window.
- * @returns {{
- *     type: SET_DEVICE_SELECTION_POPUP_DATA,
- *     popupDialogData: Object
- * }}
- */
-function _setDeviceSelectionPopupData(popupDialogData) {
-    return {
-        type: SET_DEVICE_SELECTION_POPUP_DATA,
-        popupDialogData
-    };
-}
-
 /**
  * Submits the settings related to device selection.
  *

react/features/device-selection/index.js

@@ -1,4 +1,3 @@
 export * from './actions';
-export * from './actionTypes';
 export * from './components';
 export * from './functions';

react/features/device-selection/middleware.js

@@ -17,16 +17,8 @@ MiddlewareRegistry.register(store => next => action => {
 
     if (action.type === UPDATE_DEVICE_LIST) {
         const state = store.getState();
-        const { popupDialogData } = state['features/device-selection'];
         const { availableDevices } = state['features/base/devices'] || {};
 
-        if (popupDialogData) {
-            popupDialogData.transport.sendEvent({
-                name: 'deviceListChanged',
-                devices: availableDevices
-            });
-        }
-
         if (typeof APP !== 'undefined') {
             APP.API.notifyDeviceListChanged(availableDevices);
         }

react/features/device-selection/reducer.js

@@ -1,28 +0,0 @@
-import { ReducerRegistry } from '../base/redux';
-
-import { SET_DEVICE_SELECTION_POPUP_DATA } from './actionTypes';
-
-/**
- * Listen for actions which changes the state of the popup window for the device
- * selection.
- *
- * @param {Object} state - The Redux state of the feature
- * features/device-selection.
- * @param {Object} action - Action object.
- * @param {string} action.type - Type of action.
- * @param {Object} action.popupDialogData - Object that stores the current
- * Window object of the popup and the Transport instance. If no popup is shown
- * the value will be undefined.
- * @returns {Object}
- */
-ReducerRegistry.register('features/device-selection',
-    (state = {}, action) => {
-        if (action.type === SET_DEVICE_SELECTION_POPUP_DATA) {
-            return {
-                ...state,
-                popupDialogData: action.popupDialogData
-            };
-        }
-
-        return state;
-    });

react/features/settings/components/web/DeviceSelectionPopup.js

@@ -1,299 +0,0 @@
-/* global JitsiMeetJS */
-
-import { AtlasKitThemeProvider } from '@atlaskit/theme';
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { I18nextProvider } from 'react-i18next';
-
-import {
-    getAvailableDevices,
-    getCurrentDevices,
-    isDeviceChangeAvailable,
-    isDeviceListAvailable,
-    isMultipleAudioInputSupported,
-    setAudioInputDevice,
-    setAudioOutputDevice,
-    setVideoInputDevice
-} from '../../../../../modules/API/external/functions';
-import {
-    PostMessageTransportBackend,
-    Transport
-} from '../../../../../modules/transport';
-import DialogWithTabs from '../../../base/dialog/components/web/DialogWithTabs';
-import { parseURLParams } from '../../../base/util/parseURLParams';
-import DeviceSelection from '../../../device-selection/components/DeviceSelection';
-
-/**
- * Implements a class that renders the React components for the device selection
- * popup page and handles the communication between the components and Jitsi
- * Meet.
- */
-export default class DeviceSelectionPopup {
-    /**
-     * Initializes a new DeviceSelectionPopup instance.
-     *
-     * @param {Object} i18next - The i18next instance used for translation.
-     */
-    constructor(i18next) {
-        this.close = this.close.bind(this);
-        this._i18next = i18next;
-        this._onSubmit = this._onSubmit.bind(this);
-
-        const { scope } = parseURLParams(window.location);
-
-        this._transport = new Transport({
-            backend: new PostMessageTransportBackend({
-                postisOptions: {
-                    scope,
-                    window: window.opener
-                }
-            })
-        });
-
-        this._transport.on('event', event => {
-            if (event.name === 'deviceListChanged') {
-                this._updateAvailableDevices();
-
-                return true;
-            }
-
-            return false;
-        });
-
-        this._dialogProps = {
-            availableDevices: {},
-            selectedAudioInputId: '',
-            selectedAudioOutputId: '',
-            selectedVideoInputId: '',
-            disableAudioInputChange: true,
-            disableBlanketClickDismiss: true,
-            disableDeviceChange: true,
-            hideAudioInputPreview: !JitsiMeetJS.isCollectingLocalStats(),
-            hideAudioOutputSelect: true
-
-        };
-        this._initState();
-    }
-
-    /**
-     * Sends event to Jitsi Meet to close the popup dialog.
-     *
-     * @returns {void}
-     */
-    close() {
-        this._transport.sendEvent({
-            type: 'devices-dialog',
-            name: 'close'
-        });
-    }
-
-    /**
-     * Changes the properties of the react component and re-renders it.
-     *
-     * @param {Object} newProps - The new properties that will be assigned to
-     * the current ones.
-     * @returns {void}
-     */
-    _changeDialogProps(newProps) {
-        this._dialogProps = {
-            ...this._dialogProps,
-            ...newProps
-        };
-        this._render();
-    }
-
-    /**
-     * Returns Promise that resolves with result an list of available devices.
-     *
-     * @returns {Promise}
-     */
-    _getAvailableDevices() {
-        return getAvailableDevices(this._transport);
-    }
-
-    /**
-     * Returns Promise that resolves with current selected devices.
-     *
-     * @returns {Promise}
-     */
-    _getCurrentDevices() {
-        return getCurrentDevices(this._transport).then(currentDevices => {
-            const {
-                audioInput = {},
-                audioOutput = {},
-                videoInput = {}
-            } = currentDevices;
-
-            return {
-                audioInput: audioInput.deviceId,
-                audioOutput: audioOutput.deviceId,
-                videoInput: videoInput.deviceId
-            };
-        });
-    }
-
-    /**
-     * Initializes the state.
-     *
-     * @returns {void}
-     */
-    _initState() {
-        return Promise.all([
-            this._getAvailableDevices(),
-            this._isDeviceListAvailable(),
-            this._isDeviceChangeAvailable(),
-            this._isDeviceChangeAvailable('output'),
-            this._getCurrentDevices(),
-            this._isMultipleAudioInputSupported()
-        ]).then(([
-            availableDevices,
-            listAvailable,
-            changeAvailable,
-            changeOutputAvailable,
-            currentDevices,
-            multiAudioInputSupported
-        ]) => {
-            this._changeDialogProps({
-                availableDevices,
-                selectedAudioInputId: currentDevices.audioInput,
-                selectedAudioOutputId: currentDevices.audioOutput,
-                selectedVideoInputId: currentDevices.videoInput,
-                disableAudioInputChange: !multiAudioInputSupported,
-                disableDeviceChange: !listAvailable || !changeAvailable,
-                hideAudioOutputSelect: !changeOutputAvailable
-            });
-        });
-    }
-
-    /**
-     * Returns Promise that resolves with true if the device change is available
-     * and with false if not.
-     *
-     * @param {string} [deviceType] - Values - 'output', 'input' or undefined.
-     * Default - 'input'.
-     * @returns {Promise}
-     */
-    _isDeviceChangeAvailable(deviceType) {
-        return isDeviceChangeAvailable(this._transport, deviceType).catch(() => false);
-    }
-
-    /**
-     * Returns Promise that resolves with true if the device list is available
-     * and with false if not.
-     *
-     * @returns {Promise}
-     */
-    _isDeviceListAvailable() {
-        return isDeviceListAvailable(this._transport).catch(() => false);
-    }
-
-    /**
-     * Returns Promise that resolves with true if multiple audio input is supported
-     * and with false if not.
-     *
-     * @returns {Promise}
-     */
-    _isMultipleAudioInputSupported() {
-        return isMultipleAudioInputSupported(this._transport).catch(() => false);
-    }
-
-    /**
-     * Callback invoked to save changes to selected devices and close the
-     * dialog.
-     *
-     * @param {Object} newSettings - The chosen device IDs.
-     * @private
-     * @returns {void}
-     */
-    _onSubmit(newSettings) {
-        const promises = [];
-
-        if (newSettings.selectedVideoInputId
-                !== this._dialogProps.selectedVideoInputId) {
-            promises.push(
-                this._setVideoInputDevice(newSettings.selectedVideoInputId));
-        }
-
-        if (newSettings.selectedAudioInputId
-                !== this._dialogProps.selectedAudioInputId) {
-            promises.push(
-                this._setAudioInputDevice(newSettings.selectedAudioInputId));
-        }
-
-        if (newSettings.selectedAudioOutputId
-                !== this._dialogProps.selectedAudioOutputId) {
-            promises.push(
-                this._setAudioOutputDevice(newSettings.selectedAudioOutputId));
-        }
-
-        Promise.all(promises).then(this.close, this.close);
-    }
-
-    /**
-     * Renders the React components for the popup page.
-     *
-     * @returns {void}
-     */
-    _render() {
-        const onSubmit = this.close;
-
-        ReactDOM.render(
-            <I18nextProvider i18n = { this._i18next }>
-                <AtlasKitThemeProvider mode = 'dark'>
-                    <DialogWithTabs
-                        closeDialog = { this.close }
-                        cssClassName = 'settings-dialog'
-                        onSubmit = { onSubmit }
-                        tabs = { [ {
-                            component: DeviceSelection,
-                            label: 'settings.devices',
-                            props: this._dialogProps,
-                            submit: this._onSubmit
-                        } ] }
-                        titleKey = 'settings.title' />
-                </AtlasKitThemeProvider>
-            </I18nextProvider>,
-            document.getElementById('react'));
-    }
-
-    /**
-     * Sets the audio input device to the one with the id that is passed.
-     *
-     * @param {string} id - The id of the new device.
-     * @returns {Promise}
-     */
-    _setAudioInputDevice(id) {
-        return setAudioInputDevice(this._transport, undefined, id);
-    }
-
-    /**
-     * Sets the audio output device to the one with the id that is passed.
-     *
-     * @param {string} id - The id of the new device.
-     * @returns {Promise}
-     */
-    _setAudioOutputDevice(id) {
-        return setAudioOutputDevice(this._transport, undefined, id);
-    }
-
-    /**
-     * Sets the video input device to the one with the id that is passed.
-     *
-     * @param {string} id - The id of the new device.
-     * @returns {Promise}
-     */
-    _setVideoInputDevice(id) {
-        return setVideoInputDevice(this._transport, undefined, id);
-    }
-
-    /**
-     * Updates the available devices.
-     *
-     * @returns {void}
-     */
-    _updateAvailableDevices() {
-        this._getAvailableDevices().then(devices =>
-            this._changeDialogProps({ availableDevices: devices })
-        );
-    }
-}

react/features/settings/popup.js

@@ -1,12 +0,0 @@
-/* global JitsiMeetJS */
-
-import DeviceSelectionPopup from './components/web/DeviceSelectionPopup';
-
-let deviceSelectionPopup;
-
-window.init = i18next => {
-    JitsiMeetJS.init();
-    deviceSelectionPopup = new DeviceSelectionPopup(i18next);
-};
-
-window.addEventListener('beforeunload', () => deviceSelectionPopup.close());

static/deviceSelectionPopup.html

@@ -1,21 +0,0 @@
-<html itemscope itemtype="http://schema.org/Product" prefix="og: http://ogp.me/ns#" xmlns="http://www.w3.org/1999/html">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="content-type" content="text/html;charset=utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <!--#include virtual="/base.html" -->
-
-    <link rel="stylesheet" href="css/all.css">
-
-    <!--#include virtual="/title.html" -->
-    <script><!--#include virtual="/interface_config.js" --></script>
-    <script>
-        window.config = {};
-    </script>
-    <script src="libs/lib-jitsi-meet.min.js?v=139"></script>
-    <script src="libs/device_selection_popup_bundle.min.js?v=1"></script>
-  </head>
-  <body>
-    <div id="react"></div>
-  </body>
-</html>

webpack.config.js

@@ -196,12 +196,6 @@ module.exports = [
         },
         performance: getPerformanceHints(4 * 1024 * 1024)
     }),
-    Object.assign({}, config, {
-        entry: {
-            'device_selection_popup_bundle': './react/features/settings/popup.js'
-        },
-        performance: getPerformanceHints(750 * 1024)
-    }),
     Object.assign({}, config, {
         entry: {
             'alwaysontop': './react/features/always-on-top/index.js'