diff --git a/Makefile b/Makefile index ca4bc2d59..cd8d857f8 100644 --- a/Makefile +++ b/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 \ diff --git a/react/features/app/reducers.any.js b/react/features/app/reducers.any.js index b22bc15c5..f337a358e 100644 --- a/react/features/app/reducers.any.js +++ b/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'; diff --git a/react/features/device-selection/actionTypes.js b/react/features/device-selection/actionTypes.js deleted file mode 100644 index 2780c8e6e..000000000 --- a/react/features/device-selection/actionTypes.js +++ /dev/null @@ -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'; diff --git a/react/features/device-selection/actions.js b/react/features/device-selection/actions.js index 4f28067c9..229584b94 100644 --- a/react/features/device-selection/actions.js +++ b/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. * diff --git a/react/features/device-selection/index.js b/react/features/device-selection/index.js index b845e8859..cc25e46aa 100644 --- a/react/features/device-selection/index.js +++ b/react/features/device-selection/index.js @@ -1,4 +1,3 @@ export * from './actions'; -export * from './actionTypes'; export * from './components'; export * from './functions'; diff --git a/react/features/device-selection/middleware.js b/react/features/device-selection/middleware.js index cf7ced47f..925cc4172 100644 --- a/react/features/device-selection/middleware.js +++ b/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); } diff --git a/react/features/device-selection/reducer.js b/react/features/device-selection/reducer.js deleted file mode 100644 index fce21fc4f..000000000 --- a/react/features/device-selection/reducer.js +++ /dev/null @@ -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; - }); diff --git a/react/features/settings/components/web/DeviceSelectionPopup.js b/react/features/settings/components/web/DeviceSelectionPopup.js deleted file mode 100644 index c2927dd4e..000000000 --- a/react/features/settings/components/web/DeviceSelectionPopup.js +++ /dev/null @@ -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( - - - - - , - 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 }) - ); - } -} diff --git a/react/features/settings/popup.js b/react/features/settings/popup.js deleted file mode 100644 index 289060668..000000000 --- a/react/features/settings/popup.js +++ /dev/null @@ -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()); diff --git a/static/deviceSelectionPopup.html b/static/deviceSelectionPopup.html deleted file mode 100644 index b3dc6d795..000000000 --- a/static/deviceSelectionPopup.html +++ /dev/null @@ -1,21 +0,0 @@ - - - - - - - - - - - - - - - - -
- - diff --git a/webpack.config.js b/webpack.config.js index b349ecd0d..0cb847b95 100644 --- a/webpack.config.js +++ b/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'