Finally! Let there be... responsive-ui!

We started on the way to responsive UI and its design with aspect ratio
and keeping the filmstrip on the short side of the app's visible
rectangle.

Shortly, we're going to introduce reduced UI for Picture-in-Picture. And
that's where we'll need another dimensions-based detector akin to the
aspect ratio detector.

While the AspectRatioDetector, the up-and-coming ReducedUIDetector, and
their base DimensionsDetector are definitely separate abstractions and
implementations not mixed for the purposes of easy extensibility and
maintenance, the three of them are our building blocks on top of which
we'll build our responsive UI.

react/features/app-settings/components/AbstractAppSettings.js

     const _profile = getProfile(state);
 
     return {
-        _aspectRatio: state['features/base/aspect-ratio'].aspectRatio,
+        _aspectRatio: state['features/base/responsive-ui'].aspectRatio,
         _profile,
         _serverURL,
         _visible: state['features/app-settings'].visible

react/features/app-settings/components/AppSettings.native.js

 } from 'react-native';
 import { connect } from 'react-redux';
 
-import { ASPECT_RATIO_NARROW } from '../../base/aspect-ratio';
 import { translate } from '../../base/i18n';
 import { getSafetyOffset, isIPad } from '../../base/react';
+import { ASPECT_RATIO_NARROW } from '../../base/responsive-ui';
 
 import { _mapStateToProps, AbstractAppSettings } from './AbstractAppSettings';
 import { hideAppSettings } from '../actions';

react/features/app-settings/components/FormRow.native.js

 import { Text, View } from 'react-native';
 import { connect } from 'react-redux';
 
-import { ASPECT_RATIO_WIDE } from '../../base/aspect-ratio';
 import { translate } from '../../base/i18n';
 import { getSafetyOffset } from '../../base/react';
+import { ASPECT_RATIO_WIDE } from '../../base/responsive-ui';
 
 import styles, { ANDROID_UNDERLINE_COLOR, CONTAINER_PADDING } from './styles';
 
  */
 export function _mapStateToProps(state: Object) {
     return {
-        _aspectRatio: state['features/base/aspect-ratio'].aspectRatio
+        _aspectRatio: state['features/base/responsive-ui'].aspectRatio
     };
 }
 

react/features/app-settings/components/FormSectionHeader.native.js

 import { Text, View } from 'react-native';
 import { connect } from 'react-redux';
 
-import { ASPECT_RATIO_WIDE } from '../../base/aspect-ratio';
 import { translate } from '../../base/i18n';
 import { getSafetyOffset } from '../../base/react';
+import { ASPECT_RATIO_WIDE } from '../../base/responsive-ui';
 
 import styles, { CONTAINER_PADDING } from './styles';
 
  */
 export function _mapStateToProps(state: Object) {
     return {
-        _aspectRatio: state['features/base/aspect-ratio'].aspectRatio
+        _aspectRatio: state['features/base/responsive-ui'].aspectRatio
     };
 }
 

react/features/app/components/App.native.js

 
 import '../../analytics';
 import '../../authentication';
-import { AspectRatioDetector } from '../../base/aspect-ratio';
 import { Platform } from '../../base/react';
+import { AspectRatioDetector } from '../../base/responsive-ui';
 import '../../mobile/audio-mode';
 import '../../mobile/background';
 import '../../mobile/callkit';

react/features/base/dimensions-detector/components/index.js

-export { default as DimensionsDetector } from './DimensionsDetector';

react/features/base/dimensions-detector/index.js

-export * from './components';

react/features/base/aspect-ratio/actions.js → react/features/base/responsive-ui/actions.js

                 = width < height ? ASPECT_RATIO_NARROW : ASPECT_RATIO_WIDE;
 
             if (aspectRatio
-                    !== getState()['features/base/aspect-ratio'].aspectRatio) {
+                    !== getState()['features/base/responsive-ui'].aspectRatio) {
                 return dispatch({
                     type: SET_ASPECT_RATIO,
                     aspectRatio

react/features/base/aspect-ratio/components/AspectRatioAware.js → react/features/base/responsive-ui/components/AspectRatioAware.js

  * @param {Object} state - The whole redux state.
  * @private
  * @returns {{
- *      aspectRatio: Symbol
+ *     aspectRatio: Symbol
  * }}
  */
 function _mapStateToProps(state) {
     return {
-        aspectRatio: state['features/base/aspect-ratio'].aspectRatio
+        aspectRatio: state['features/base/responsive-ui'].aspectRatio
     };
 }

react/features/base/aspect-ratio/components/AspectRatioDetector.native.js → react/features/base/responsive-ui/components/AspectRatioDetector.js

 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
-import { DimensionsDetector } from '../../dimensions-detector';
-
 import { setAspectRatio } from '../actions';
+import DimensionsDetector from './DimensionsDetector';
 
 /**
  * AspectRatioDetector component's property types.

react/features/base/aspect-ratio/components/index.js → react/features/base/responsive-ui/components/index.js

 export * from './AspectRatioAware';
 export { default as AspectRatioDetector } from './AspectRatioDetector';
+export { default as DimensionsDetector } from './DimensionsDetector';

react/features/base/dimensions-detector/components/styles.js → react/features/base/responsive-ui/components/styles.js

 import { createStyleSheet } from '../../styles';
 
 /**
- * The styles of the feature base/aspect-ratio.
+ * The styles of the feature base/responsive-ui.
  */
 export default createStyleSheet({
     /**

react/features/base/aspect-ratio/reducer.js → react/features/base/responsive-ui/reducer.js

 import { ASPECT_RATIO_NARROW } from './constants';
 
 /**
- * The initial redux state of the feature base/aspect-ratio.
+ * The initial redux state of the feature base/responsive-ui.
  */
 const _INITIAL_STATE = {
     aspectRatio: ASPECT_RATIO_NARROW
 };
 
 ReducerRegistry.register(
-    'features/base/aspect-ratio',
+    'features/base/responsive-ui',
     (state = _INITIAL_STATE, action) => {
         switch (action.type) {
         case SET_ASPECT_RATIO:

react/features/filmstrip/components/Filmstrip.native.js

 import { ScrollView } from 'react-native';
 import { connect } from 'react-redux';
 
+import { Container } from '../../base/react';
 import {
     isNarrowAspectRatio,
     makeAspectRatioAware
-} from '../../base/aspect-ratio';
-import { Container } from '../../base/react';
+} from '../../base/responsive-ui';
 
-import Thumbnail from './Thumbnail';
 import { styles } from './_';
+import Thumbnail from './Thumbnail';
 
 /**
  * Implements a React {@link Component} which represents the filmstrip on

react/features/toolbox/components/Toolbox.native.js

     createToolbarEvent,
     sendAnalytics
 } from '../../analytics';
-import {
-    isNarrowAspectRatio,
-    makeAspectRatioAware
-} from '../../base/aspect-ratio';
 import { toggleAudioOnly } from '../../base/conference';
 import {
     MEDIA_TYPE,
     VIDEO_MUTISM_AUTHORITY
 } from '../../base/media';
 import { Container } from '../../base/react';
+import {
+    isNarrowAspectRatio,
+    makeAspectRatioAware
+} from '../../base/responsive-ui';
 import { ColorPalette } from '../../base/styles';
 import { beginRoomLockRequest } from '../../room-lock';
 import { beginShareRoom } from '../../share-room';