diff --git a/config.js b/config.js index 62f4ca540..3e1b0711b 100644 --- a/config.js +++ b/config.js @@ -326,6 +326,9 @@ var config = { // UI // + // Disables responsive tiles. + // disableResponsiveTiles: false, + // Hides lobby button // hideLobbyButton: false, diff --git a/react/features/base/config/configWhitelist.js b/react/features/base/config/configWhitelist.js index 8196023be..cd67b759c 100644 --- a/react/features/base/config/configWhitelist.js +++ b/react/features/base/config/configWhitelist.js @@ -89,6 +89,7 @@ export default [ 'disableProfile', 'disableRemoteControl', 'disableRemoteMute', + 'disableResponsiveTiles', 'disableRtx', 'disableShortcuts', 'disableSimulcast', diff --git a/react/features/filmstrip/actions.web.js b/react/features/filmstrip/actions.web.js index 3318e93df..da126cfed 100644 --- a/react/features/filmstrip/actions.web.js +++ b/react/features/filmstrip/actions.web.js @@ -1,5 +1,6 @@ // @flow +import { toState } from '../base/redux'; import { CHAT_SIZE } from '../chat/constants'; import { SET_HORIZONTAL_VIEW_DIMENSIONS, SET_TILE_VIEW_DIMENSIONS } from './actionTypes'; @@ -15,28 +16,30 @@ const TILE_VIEW_SIDE_MARGINS = 20; * * @param {Object} dimensions - Whether the filmstrip is visible. * @param {Object} windowSize - The size of the window. - * @param {boolean} isChatOpen - Whether the chat panel is displayed, in - * order to properly compute the tile view size. - * @param {boolean} isToolboxVisible - Whether the toolbox is visible, in order - * to adjust the available size. + * @param {Object | Function} stateful - An object or function that can be + * resolved to Redux state using the {@code toState} function. * @returns {{ * type: SET_TILE_VIEW_DIMENSIONS, * dimensions: Object * }} */ -export function setTileViewDimensions(dimensions: Object, windowSize: Object, isChatOpen: boolean) { +export function setTileViewDimensions(dimensions: Object, windowSize: Object, stateful: Object | Function) { + const state = toState(stateful); const { clientWidth, clientHeight } = windowSize; const heightToUse = clientHeight; let widthToUse = clientWidth; + const { isOpen } = state['features/chat']; + const { disableResponsiveTiles } = state['features/base/config']; - if (isChatOpen) { + if (isOpen) { widthToUse -= CHAT_SIZE; } const thumbnailSize = calculateThumbnailSizeForTileView({ ...dimensions, clientWidth: widthToUse, - clientHeight: heightToUse + clientHeight: heightToUse, + disableResponsiveTiles }); const filmstripWidth = dimensions.columns * (TILE_VIEW_SIDE_MARGINS + thumbnailSize.width); diff --git a/react/features/filmstrip/functions.web.js b/react/features/filmstrip/functions.web.js index d84fc7deb..37ffefbc5 100644 --- a/react/features/filmstrip/functions.web.js +++ b/react/features/filmstrip/functions.web.js @@ -140,9 +140,15 @@ export function calculateThumbnailSizeForTileView({ columns, visibleRows, clientWidth, - clientHeight + clientHeight, + disableResponsiveTiles }: Object) { - const aspectRatio = clientWidth < ASPECT_RATIO_BREAKPOINT ? SQUARE_TILE_ASPECT_RATIO : TILE_ASPECT_RATIO; + let aspectRatio = TILE_ASPECT_RATIO; + + if (!disableResponsiveTiles && clientWidth < ASPECT_RATIO_BREAKPOINT) { + aspectRatio = SQUARE_TILE_ASPECT_RATIO; + } + const viewWidth = clientWidth - TILE_VIEW_SIDE_MARGINS; const viewHeight = clientHeight - TILE_VIEW_SIDE_MARGINS; const initialWidth = viewWidth / columns; diff --git a/react/features/filmstrip/middleware.web.js b/react/features/filmstrip/middleware.web.js index 1c8525e1d..0712adc32 100644 --- a/react/features/filmstrip/middleware.web.js +++ b/react/features/filmstrip/middleware.web.js @@ -29,7 +29,6 @@ MiddlewareRegistry.register(store => next => action => { case LAYOUTS.TILE_VIEW: { const { gridDimensions } = state['features/filmstrip'].tileViewDimensions; const { clientHeight, clientWidth } = state['features/base/responsive-ui']; - const { isOpen } = state['features/chat']; store.dispatch( setTileViewDimensions( @@ -38,7 +37,7 @@ MiddlewareRegistry.register(store => next => action => { clientHeight, clientWidth }, - isOpen + store ) ); break; diff --git a/react/features/filmstrip/subscriber.web.js b/react/features/filmstrip/subscriber.web.js index 48a669063..3af7fbe3b 100644 --- a/react/features/filmstrip/subscriber.web.js +++ b/react/features/filmstrip/subscriber.web.js @@ -29,7 +29,6 @@ StateListenerRegistry.register( if (!equals(gridDimensions, oldGridDimensions)) { const { clientHeight, clientWidth } = state['features/base/responsive-ui']; - const { isOpen } = state['features/chat']; store.dispatch( setTileViewDimensions( @@ -38,7 +37,7 @@ StateListenerRegistry.register( clientHeight, clientWidth }, - isOpen + store ) ); } @@ -56,7 +55,6 @@ StateListenerRegistry.register( switch (layout) { case LAYOUTS.TILE_VIEW: { const { clientHeight, clientWidth } = state['features/base/responsive-ui']; - const { isOpen } = state['features/chat']; store.dispatch( setTileViewDimensions( @@ -65,7 +63,7 @@ StateListenerRegistry.register( clientHeight, clientWidth }, - isOpen + store ) ); break; @@ -126,7 +124,7 @@ StateListenerRegistry.register( clientHeight, clientWidth }, - isChatOpen + store ) ); } @@ -190,7 +188,6 @@ StateListenerRegistry.register( if (shouldDisplayTileView(state)) { const gridDimensions = getTileViewGridDimensions(state); const { clientHeight, clientWidth } = state['features/base/responsive-ui']; - const { isOpen } = state['features/chat']; store.dispatch( setTileViewDimensions( @@ -199,7 +196,7 @@ StateListenerRegistry.register( clientHeight, clientWidth }, - isOpen + store ) ); } diff --git a/react/features/video-layout/functions.js b/react/features/video-layout/functions.js index fec263fb1..18c2a5298 100644 --- a/react/features/video-layout/functions.js +++ b/react/features/video-layout/functions.js @@ -42,28 +42,32 @@ export function getCurrentLayout(state: Object) { */ export function getMaxColumnCount(state: Object) { const configuredMax = interfaceConfig.TILE_VIEW_MAX_COLUMNS || DEFAULT_MAX_COLUMNS; - const { clientWidth } = state['features/base/responsive-ui']; - let availableWidth = clientWidth; - const participantCount = getParticipantCount(state); - const { isOpen } = state['features/chat']; + const { disableResponsiveTiles } = state['features/base/config']; - if (isOpen) { - availableWidth -= CHAT_SIZE; - } + if (!disableResponsiveTiles) { + const { clientWidth } = state['features/base/responsive-ui']; + let availableWidth = clientWidth; + const participantCount = getParticipantCount(state); + const { isOpen } = state['features/chat']; - // If there are just two participants in a conference, enforce single-column view for mobile size. - if (participantCount === 2 && availableWidth < ASPECT_RATIO_BREAKPOINT) { - return Math.min(1, Math.max(configuredMax, 1)); - } + if (isOpen) { + availableWidth -= CHAT_SIZE; + } - // Enforce single column view at very small screen widths. - if (availableWidth < SINGLE_COLUMN_BREAKPOINT) { - return Math.min(1, Math.max(configuredMax, 1)); - } + // If there are just two participants in a conference, enforce single-column view for mobile size. + if (participantCount === 2 && availableWidth < ASPECT_RATIO_BREAKPOINT) { + return Math.min(1, Math.max(configuredMax, 1)); + } - // Enforce two column view below breakpoint. - if (availableWidth < TWO_COLUMN_BREAKPOINT) { - return Math.min(2, Math.max(configuredMax, 1)); + // Enforce single column view at very small screen widths. + if (availableWidth < SINGLE_COLUMN_BREAKPOINT) { + return Math.min(1, Math.max(configuredMax, 1)); + } + + // Enforce two column view below breakpoint. + if (availableWidth < TWO_COLUMN_BREAKPOINT) { + return Math.min(2, Math.max(configuredMax, 1)); + } } return Math.min(Math.max(configuredMax, 1), ABSOLUTE_MAX_COLUMNS);