From c9d8b5c827a5f02043c73278c3059400e8052ce3 Mon Sep 17 00:00:00 2001 From: Lyubo Marinov Date: Tue, 6 Feb 2018 12:14:05 -0600 Subject: [PATCH] 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. --- .../app-settings/components/AbstractAppSettings.js | 2 +- .../app-settings/components/AppSettings.native.js | 2 +- react/features/app-settings/components/FormRow.native.js | 4 ++-- .../app-settings/components/FormSectionHeader.native.js | 4 ++-- react/features/app/components/App.native.js | 2 +- .../features/base/dimensions-detector/components/index.js | 1 - react/features/base/dimensions-detector/index.js | 1 - .../base/{aspect-ratio => responsive-ui}/actionTypes.js | 0 .../base/{aspect-ratio => responsive-ui}/actions.js | 2 +- .../components/AspectRatioAware.js | 4 ++-- .../components/AspectRatioDetector.js} | 3 +-- .../components/DimensionsDetector.native.js | 0 .../responsive-ui/components/DimensionsDetector.web.js | 0 .../{aspect-ratio => responsive-ui}/components/index.js | 1 + .../components/styles.js | 2 +- .../base/{aspect-ratio => responsive-ui}/constants.js | 0 .../base/{aspect-ratio => responsive-ui}/index.js | 0 .../base/{aspect-ratio => responsive-ui}/reducer.js | 4 ++-- react/features/filmstrip/components/Filmstrip.native.js | 6 +++--- react/features/toolbox/components/Toolbox.native.js | 8 ++++---- 20 files changed, 22 insertions(+), 24 deletions(-) delete mode 100644 react/features/base/dimensions-detector/components/index.js delete mode 100644 react/features/base/dimensions-detector/index.js rename react/features/base/{aspect-ratio => responsive-ui}/actionTypes.js (100%) rename react/features/base/{aspect-ratio => responsive-ui}/actions.js (93%) rename react/features/base/{aspect-ratio => responsive-ui}/components/AspectRatioAware.js (95%) rename react/features/base/{aspect-ratio/components/AspectRatioDetector.native.js => responsive-ui/components/AspectRatioDetector.js} (96%) rename react/features/base/{dimensions-detector => responsive-ui}/components/DimensionsDetector.native.js (100%) create mode 100644 react/features/base/responsive-ui/components/DimensionsDetector.web.js rename react/features/base/{aspect-ratio => responsive-ui}/components/index.js (60%) rename react/features/base/{dimensions-detector => responsive-ui}/components/styles.js (84%) rename react/features/base/{aspect-ratio => responsive-ui}/constants.js (100%) rename react/features/base/{aspect-ratio => responsive-ui}/index.js (100%) rename react/features/base/{aspect-ratio => responsive-ui}/reducer.js (82%) diff --git a/react/features/app-settings/components/AbstractAppSettings.js b/react/features/app-settings/components/AbstractAppSettings.js index 6a425377c..38e64810d 100644 --- a/react/features/app-settings/components/AbstractAppSettings.js +++ b/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 diff --git a/react/features/app-settings/components/AppSettings.native.js b/react/features/app-settings/components/AppSettings.native.js index 1e07239b5..db3393871 100644 --- a/react/features/app-settings/components/AppSettings.native.js +++ b/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'; diff --git a/react/features/app-settings/components/FormRow.native.js b/react/features/app-settings/components/FormRow.native.js index e55ab5470..ffd2f35aa 100644 --- a/react/features/app-settings/components/FormRow.native.js +++ b/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 { */ export function _mapStateToProps(state: Object) { return { - _aspectRatio: state['features/base/aspect-ratio'].aspectRatio + _aspectRatio: state['features/base/responsive-ui'].aspectRatio }; } diff --git a/react/features/app-settings/components/FormSectionHeader.native.js b/react/features/app-settings/components/FormSectionHeader.native.js index 077ede5f6..e4756f617 100644 --- a/react/features/app-settings/components/FormSectionHeader.native.js +++ b/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 { */ export function _mapStateToProps(state: Object) { return { - _aspectRatio: state['features/base/aspect-ratio'].aspectRatio + _aspectRatio: state['features/base/responsive-ui'].aspectRatio }; } diff --git a/react/features/app/components/App.native.js b/react/features/app/components/App.native.js index ef793e93d..3bcd8f7a2 100644 --- a/react/features/app/components/App.native.js +++ b/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'; diff --git a/react/features/base/dimensions-detector/components/index.js b/react/features/base/dimensions-detector/components/index.js deleted file mode 100644 index 5c87f6443..000000000 --- a/react/features/base/dimensions-detector/components/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default as DimensionsDetector } from './DimensionsDetector'; diff --git a/react/features/base/dimensions-detector/index.js b/react/features/base/dimensions-detector/index.js deleted file mode 100644 index 07635cbbc..000000000 --- a/react/features/base/dimensions-detector/index.js +++ /dev/null @@ -1 +0,0 @@ -export * from './components'; diff --git a/react/features/base/aspect-ratio/actionTypes.js b/react/features/base/responsive-ui/actionTypes.js similarity index 100% rename from react/features/base/aspect-ratio/actionTypes.js rename to react/features/base/responsive-ui/actionTypes.js diff --git a/react/features/base/aspect-ratio/actions.js b/react/features/base/responsive-ui/actions.js similarity index 93% rename from react/features/base/aspect-ratio/actions.js rename to react/features/base/responsive-ui/actions.js index 001f78b99..b31db0025 100644 --- a/react/features/base/aspect-ratio/actions.js +++ b/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 diff --git a/react/features/base/aspect-ratio/components/AspectRatioAware.js b/react/features/base/responsive-ui/components/AspectRatioAware.js similarity index 95% rename from react/features/base/aspect-ratio/components/AspectRatioAware.js rename to react/features/base/responsive-ui/components/AspectRatioAware.js index 8bf596c1c..4254e3ff0 100644 --- a/react/features/base/aspect-ratio/components/AspectRatioAware.js +++ b/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 }; } diff --git a/react/features/base/aspect-ratio/components/AspectRatioDetector.native.js b/react/features/base/responsive-ui/components/AspectRatioDetector.js similarity index 96% rename from react/features/base/aspect-ratio/components/AspectRatioDetector.native.js rename to react/features/base/responsive-ui/components/AspectRatioDetector.js index 4ed0d895f..66bbdb935 100644 --- a/react/features/base/aspect-ratio/components/AspectRatioDetector.native.js +++ b/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. diff --git a/react/features/base/dimensions-detector/components/DimensionsDetector.native.js b/react/features/base/responsive-ui/components/DimensionsDetector.native.js similarity index 100% rename from react/features/base/dimensions-detector/components/DimensionsDetector.native.js rename to react/features/base/responsive-ui/components/DimensionsDetector.native.js diff --git a/react/features/base/responsive-ui/components/DimensionsDetector.web.js b/react/features/base/responsive-ui/components/DimensionsDetector.web.js new file mode 100644 index 000000000..e69de29bb diff --git a/react/features/base/aspect-ratio/components/index.js b/react/features/base/responsive-ui/components/index.js similarity index 60% rename from react/features/base/aspect-ratio/components/index.js rename to react/features/base/responsive-ui/components/index.js index 30b6e5b50..74f71b3f1 100644 --- a/react/features/base/aspect-ratio/components/index.js +++ b/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'; diff --git a/react/features/base/dimensions-detector/components/styles.js b/react/features/base/responsive-ui/components/styles.js similarity index 84% rename from react/features/base/dimensions-detector/components/styles.js rename to react/features/base/responsive-ui/components/styles.js index 2fe087901..4d63f6b01 100644 --- a/react/features/base/dimensions-detector/components/styles.js +++ b/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({ /** diff --git a/react/features/base/aspect-ratio/constants.js b/react/features/base/responsive-ui/constants.js similarity index 100% rename from react/features/base/aspect-ratio/constants.js rename to react/features/base/responsive-ui/constants.js diff --git a/react/features/base/aspect-ratio/index.js b/react/features/base/responsive-ui/index.js similarity index 100% rename from react/features/base/aspect-ratio/index.js rename to react/features/base/responsive-ui/index.js diff --git a/react/features/base/aspect-ratio/reducer.js b/react/features/base/responsive-ui/reducer.js similarity index 82% rename from react/features/base/aspect-ratio/reducer.js rename to react/features/base/responsive-ui/reducer.js index 69cb4b2e8..88d3a375d 100644 --- a/react/features/base/aspect-ratio/reducer.js +++ b/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: diff --git a/react/features/filmstrip/components/Filmstrip.native.js b/react/features/filmstrip/components/Filmstrip.native.js index 26dc0a32b..76e4e98d3 100644 --- a/react/features/filmstrip/components/Filmstrip.native.js +++ b/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 diff --git a/react/features/toolbox/components/Toolbox.native.js b/react/features/toolbox/components/Toolbox.native.js index 05fa23185..c09fcd33b 100644 --- a/react/features/toolbox/components/Toolbox.native.js +++ b/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';