ref: reduce device popup bundle size

react/features/base/dialog/components/web/AbstractDialogTab.js

  *
  * @extends Component
  */
-class AbstractDialogTab extends Component<Props> {
+class AbstractDialogTab<P: Props, S: *> extends Component<P, S> {
     /**
      * Initializes a new {@code AbstractDialogTab} instance.
      *
-     * @param {Object} props - The read-only properties with which the new
+     * @param {P} props - The read-only properties with which the new
      * instance is to be initialized.
      */
-    constructor(props: Props) {
+    constructor(props: P) {
         super(props);
 
         // Bind event handler so it is only bound once for every instance.

react/features/base/dialog/components/web/DialogWithTabs.js

 import Tabs from '@atlaskit/tabs';
 import React, { Component } from 'react';
 
-import { StatelessDialog } from '../../../dialog';
-import { translate } from '../../../i18n';
+import { translate } from '../../../i18n/functions';
 
 import logger from '../../logger';
 
+import StatelessDialog from './StatelessDialog';
+
 /**
  * The type of the React {@code Component} props of {@link DialogWithTabs}.
  */

react/features/base/dialog/components/web/StatelessDialog.js

 import _ from 'lodash';
 import React, { Component } from 'react';
 
-import { translate } from '../../../i18n';
+import { translate } from '../../../i18n/functions';
 
 import type { DialogProps } from '../../constants';
 

react/features/base/logging/functions.js

     }
 
     // Lazy load it to avoid cycles in early web bootstrap code.
-    const { default: JitsiMeetJS } = require('../lib-jitsi-meet');
+    const { default: JitsiMeetJS } = require('../lib-jitsi-meet/_');
 
     Logger.setGlobalOptions(DEFAULT_RN_OPTS);
     JitsiMeetJS.setGlobalLogOptions(DEFAULT_RN_OPTS);

react/features/base/media/components/AbstractAudio.js

      * @type {Object | string}
      */
     src: Object | string,
-    stream: Object,
+    stream?: Object,
     loop?: ?boolean
 }
 

react/features/base/media/components/Audio.native.js

+// @flow
+
+import Audio from './native/Audio';
+
+export default Audio;

react/features/base/media/components/Audio.web.js

+// @flow
+
+import Audio from './web/Audio';
+
+export default Audio;

react/features/base/media/components/Video.native.js

+// @flow
+
+import Video from './native/Video';
+
+export default Video;

react/features/base/media/components/Video.web.js

+// @flow
+
+import Video from './web/Video';
+
+export default Video;

react/features/base/media/components/web/Video.js

     /**
      * Optional callback to invoke once the video starts playing.
      */
-    onVideoPlaying: Function,
+    onVideoPlaying?: Function,
 
     /**
      * The JitsiLocalTrack to display.

react/features/device-selection/components/AudioInputPreview.js

 
 import React, { Component } from 'react';
 
-import { JitsiTrackEvents } from '../../base/lib-jitsi-meet';
+import JitsiMeetJS from '../../base/lib-jitsi-meet/_';
+
+const JitsiTrackEvents = JitsiMeetJS.events.track;
 
 /**
  * The type of the React {@code Component} props of {@link AudioInputPreview}.

react/features/device-selection/components/AudioOutputPreview.js

 
 import React, { Component } from 'react';
 
-import { translate } from '../../base/i18n';
-import { Audio } from '../../base/media';
+import { translate } from '../../base/i18n/functions';
+import Audio from '../../base/media/components/Audio';
 
 const TEST_SOUND_PATH = 'sounds/ring.wav';
 

react/features/device-selection/components/DeviceSelection.js

 
 import React from 'react';
 
-import { AbstractDialogTab } from '../../base/dialog';
-import type { Props as AbstractDialogTabProps } from '../../base/dialog';
-import { translate } from '../../base/i18n';
-import JitsiMeetJS, { createLocalTrack } from '../../base/lib-jitsi-meet';
+import AbstractDialogTab, {
+    type Props as AbstractDialogTabProps
+} from '../../base/dialog/components/web/AbstractDialogTab';
+import { translate } from '../../base/i18n/functions';
+import JitsiMeetJS from '../../base/lib-jitsi-meet/_';
+import { createLocalTrack } from '../../base/lib-jitsi-meet/functions';
 
 import logger from '../logger';
 

react/features/device-selection/components/DeviceSelector.web.js

 import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
 import React, { Component } from 'react';
 
-import { translate } from '../../base/i18n';
+import { translate } from '../../base/i18n/functions';
 
 /**
  * The type of the React {@code Component} props of {@link DeviceSelector}.

react/features/device-selection/components/VideoInputPreview.js

 
 import React, { Component } from 'react';
 
-import { Video } from '../../base/media';
+import Video from '../../base/media/components/Video';
 
 const VIDEO_ERROR_CLASS = 'video-preview-has-error';
 
      * An error message to display instead of a preview. Displaying an error
      * will take priority over displaying a video preview.
      */
-    error: string,
+    error: ?string,
 
     /**
      * The JitsiLocalTrack to display.

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

     setVideoInputDevice
 } from '../../../../../modules/API/external/functions';
 
-import { parseURLParams } from '../../../base/config';
-import { DialogWithTabs } from '../../../base/dialog';
-import { DeviceSelection } from '../../../device-selection';
+import parseURLParams from '../../../base/config/parseURLParams';
+import DialogWithTabs from '../../../base/dialog/components/web/DialogWithTabs';
+import DeviceSelection from '../../../device-selection/components/DeviceSelection';
 
 /**
  * Implements a class that renders the React components for the device selection

webpack.config.js

         entry: {
             'device_selection_popup_bundle': './react/features/settings/popup.js'
         },
-        performance: getPerformanceHints(2.5 * 1024 * 1024)
+        performance: getPerformanceHints(700 * 1024)
     }),
     Object.assign({}, config, {
         entry: {