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

@@ -173,7 +173,7 @@ export function _mapStateToProps(state: Object) {
     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

@@ -12,9 +12,9 @@ import {
 } 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

@@ -4,9 +4,9 @@ import React, { Component } from 'react';
 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';
 
@@ -162,7 +162,7 @@ class FormRow extends Component<Props> {
  */
 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

@@ -4,9 +4,9 @@ import React, { Component } from 'react';
 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';
 
@@ -110,7 +110,7 @@ class FormSectionHeader extends Component<Props> {
  */
 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

@@ -6,8 +6,8 @@ import { Linking } from 'react-native';
 
 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

@@ -1 +0,0 @@
-export { default as DimensionsDetector } from './DimensionsDetector';

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

@@ -1 +0,0 @@
-export * from './components';

react/features/base/responsive-ui/actions.js

@@ -25,7 +25,7 @@ export function setAspectRatio(width: number, height: number): Object {
                 = 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/responsive-ui/components/AspectRatioAware.js

@@ -67,11 +67,11 @@ export function makeAspectRatioAware(
  * @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/responsive-ui/components/AspectRatioDetector.js

@@ -3,9 +3,8 @@
 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/responsive-ui/components/index.js

@@ -1,2 +1,3 @@
 export * from './AspectRatioAware';
 export { default as AspectRatioDetector } from './AspectRatioDetector';
+export { default as DimensionsDetector } from './DimensionsDetector';

react/features/base/responsive-ui/components/styles.js

@@ -1,7 +1,7 @@
 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/responsive-ui/reducer.js

@@ -4,14 +4,14 @@ import { SET_ASPECT_RATIO } from './actionTypes';
 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

@@ -5,14 +5,14 @@ import React, { Component } from 'react';
 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

@@ -9,10 +9,6 @@ import {
     createToolbarEvent,
     sendAnalytics
 } from '../../analytics';
-import {
-    isNarrowAspectRatio,
-    makeAspectRatioAware
-} from '../../base/aspect-ratio';
 import { toggleAudioOnly } from '../../base/conference';
 import {
     MEDIA_TYPE,
@@ -22,6 +18,10 @@ import {
     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';