Add config flag for tile responsiveness
This commit is contained in:
parent
db84889143
commit
8cf4e15b23
|
@ -326,6 +326,9 @@ var config = {
|
||||||
// UI
|
// UI
|
||||||
//
|
//
|
||||||
|
|
||||||
|
// Disables responsive tiles.
|
||||||
|
// disableResponsiveTiles: false,
|
||||||
|
|
||||||
// Hides lobby button
|
// Hides lobby button
|
||||||
// hideLobbyButton: false,
|
// hideLobbyButton: false,
|
||||||
|
|
||||||
|
|
|
@ -89,6 +89,7 @@ export default [
|
||||||
'disableProfile',
|
'disableProfile',
|
||||||
'disableRemoteControl',
|
'disableRemoteControl',
|
||||||
'disableRemoteMute',
|
'disableRemoteMute',
|
||||||
|
'disableResponsiveTiles',
|
||||||
'disableRtx',
|
'disableRtx',
|
||||||
'disableShortcuts',
|
'disableShortcuts',
|
||||||
'disableSimulcast',
|
'disableSimulcast',
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
|
import { toState } from '../base/redux';
|
||||||
import { CHAT_SIZE } from '../chat/constants';
|
import { CHAT_SIZE } from '../chat/constants';
|
||||||
|
|
||||||
import { SET_HORIZONTAL_VIEW_DIMENSIONS, SET_TILE_VIEW_DIMENSIONS } from './actionTypes';
|
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} dimensions - Whether the filmstrip is visible.
|
||||||
* @param {Object} windowSize - The size of the window.
|
* @param {Object} windowSize - The size of the window.
|
||||||
* @param {boolean} isChatOpen - Whether the chat panel is displayed, in
|
* @param {Object | Function} stateful - An object or function that can be
|
||||||
* order to properly compute the tile view size.
|
* resolved to Redux state using the {@code toState} function.
|
||||||
* @param {boolean} isToolboxVisible - Whether the toolbox is visible, in order
|
|
||||||
* to adjust the available size.
|
|
||||||
* @returns {{
|
* @returns {{
|
||||||
* type: SET_TILE_VIEW_DIMENSIONS,
|
* type: SET_TILE_VIEW_DIMENSIONS,
|
||||||
* dimensions: Object
|
* 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 { clientWidth, clientHeight } = windowSize;
|
||||||
const heightToUse = clientHeight;
|
const heightToUse = clientHeight;
|
||||||
let widthToUse = clientWidth;
|
let widthToUse = clientWidth;
|
||||||
|
const { isOpen } = state['features/chat'];
|
||||||
|
const { disableResponsiveTiles } = state['features/base/config'];
|
||||||
|
|
||||||
if (isChatOpen) {
|
if (isOpen) {
|
||||||
widthToUse -= CHAT_SIZE;
|
widthToUse -= CHAT_SIZE;
|
||||||
}
|
}
|
||||||
|
|
||||||
const thumbnailSize = calculateThumbnailSizeForTileView({
|
const thumbnailSize = calculateThumbnailSizeForTileView({
|
||||||
...dimensions,
|
...dimensions,
|
||||||
clientWidth: widthToUse,
|
clientWidth: widthToUse,
|
||||||
clientHeight: heightToUse
|
clientHeight: heightToUse,
|
||||||
|
disableResponsiveTiles
|
||||||
});
|
});
|
||||||
const filmstripWidth = dimensions.columns * (TILE_VIEW_SIDE_MARGINS + thumbnailSize.width);
|
const filmstripWidth = dimensions.columns * (TILE_VIEW_SIDE_MARGINS + thumbnailSize.width);
|
||||||
|
|
||||||
|
|
|
@ -140,9 +140,15 @@ export function calculateThumbnailSizeForTileView({
|
||||||
columns,
|
columns,
|
||||||
visibleRows,
|
visibleRows,
|
||||||
clientWidth,
|
clientWidth,
|
||||||
clientHeight
|
clientHeight,
|
||||||
|
disableResponsiveTiles
|
||||||
}: Object) {
|
}: 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 viewWidth = clientWidth - TILE_VIEW_SIDE_MARGINS;
|
||||||
const viewHeight = clientHeight - TILE_VIEW_SIDE_MARGINS;
|
const viewHeight = clientHeight - TILE_VIEW_SIDE_MARGINS;
|
||||||
const initialWidth = viewWidth / columns;
|
const initialWidth = viewWidth / columns;
|
||||||
|
|
|
@ -29,7 +29,6 @@ MiddlewareRegistry.register(store => next => action => {
|
||||||
case LAYOUTS.TILE_VIEW: {
|
case LAYOUTS.TILE_VIEW: {
|
||||||
const { gridDimensions } = state['features/filmstrip'].tileViewDimensions;
|
const { gridDimensions } = state['features/filmstrip'].tileViewDimensions;
|
||||||
const { clientHeight, clientWidth } = state['features/base/responsive-ui'];
|
const { clientHeight, clientWidth } = state['features/base/responsive-ui'];
|
||||||
const { isOpen } = state['features/chat'];
|
|
||||||
|
|
||||||
store.dispatch(
|
store.dispatch(
|
||||||
setTileViewDimensions(
|
setTileViewDimensions(
|
||||||
|
@ -38,7 +37,7 @@ MiddlewareRegistry.register(store => next => action => {
|
||||||
clientHeight,
|
clientHeight,
|
||||||
clientWidth
|
clientWidth
|
||||||
},
|
},
|
||||||
isOpen
|
store
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
break;
|
break;
|
||||||
|
|
|
@ -29,7 +29,6 @@ StateListenerRegistry.register(
|
||||||
|
|
||||||
if (!equals(gridDimensions, oldGridDimensions)) {
|
if (!equals(gridDimensions, oldGridDimensions)) {
|
||||||
const { clientHeight, clientWidth } = state['features/base/responsive-ui'];
|
const { clientHeight, clientWidth } = state['features/base/responsive-ui'];
|
||||||
const { isOpen } = state['features/chat'];
|
|
||||||
|
|
||||||
store.dispatch(
|
store.dispatch(
|
||||||
setTileViewDimensions(
|
setTileViewDimensions(
|
||||||
|
@ -38,7 +37,7 @@ StateListenerRegistry.register(
|
||||||
clientHeight,
|
clientHeight,
|
||||||
clientWidth
|
clientWidth
|
||||||
},
|
},
|
||||||
isOpen
|
store
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -56,7 +55,6 @@ StateListenerRegistry.register(
|
||||||
switch (layout) {
|
switch (layout) {
|
||||||
case LAYOUTS.TILE_VIEW: {
|
case LAYOUTS.TILE_VIEW: {
|
||||||
const { clientHeight, clientWidth } = state['features/base/responsive-ui'];
|
const { clientHeight, clientWidth } = state['features/base/responsive-ui'];
|
||||||
const { isOpen } = state['features/chat'];
|
|
||||||
|
|
||||||
store.dispatch(
|
store.dispatch(
|
||||||
setTileViewDimensions(
|
setTileViewDimensions(
|
||||||
|
@ -65,7 +63,7 @@ StateListenerRegistry.register(
|
||||||
clientHeight,
|
clientHeight,
|
||||||
clientWidth
|
clientWidth
|
||||||
},
|
},
|
||||||
isOpen
|
store
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
break;
|
break;
|
||||||
|
@ -126,7 +124,7 @@ StateListenerRegistry.register(
|
||||||
clientHeight,
|
clientHeight,
|
||||||
clientWidth
|
clientWidth
|
||||||
},
|
},
|
||||||
isChatOpen
|
store
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -190,7 +188,6 @@ StateListenerRegistry.register(
|
||||||
if (shouldDisplayTileView(state)) {
|
if (shouldDisplayTileView(state)) {
|
||||||
const gridDimensions = getTileViewGridDimensions(state);
|
const gridDimensions = getTileViewGridDimensions(state);
|
||||||
const { clientHeight, clientWidth } = state['features/base/responsive-ui'];
|
const { clientHeight, clientWidth } = state['features/base/responsive-ui'];
|
||||||
const { isOpen } = state['features/chat'];
|
|
||||||
|
|
||||||
store.dispatch(
|
store.dispatch(
|
||||||
setTileViewDimensions(
|
setTileViewDimensions(
|
||||||
|
@ -199,7 +196,7 @@ StateListenerRegistry.register(
|
||||||
clientHeight,
|
clientHeight,
|
||||||
clientWidth
|
clientWidth
|
||||||
},
|
},
|
||||||
isOpen
|
store
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -42,6 +42,9 @@ export function getCurrentLayout(state: Object) {
|
||||||
*/
|
*/
|
||||||
export function getMaxColumnCount(state: Object) {
|
export function getMaxColumnCount(state: Object) {
|
||||||
const configuredMax = interfaceConfig.TILE_VIEW_MAX_COLUMNS || DEFAULT_MAX_COLUMNS;
|
const configuredMax = interfaceConfig.TILE_VIEW_MAX_COLUMNS || DEFAULT_MAX_COLUMNS;
|
||||||
|
const { disableResponsiveTiles } = state['features/base/config'];
|
||||||
|
|
||||||
|
if (!disableResponsiveTiles) {
|
||||||
const { clientWidth } = state['features/base/responsive-ui'];
|
const { clientWidth } = state['features/base/responsive-ui'];
|
||||||
let availableWidth = clientWidth;
|
let availableWidth = clientWidth;
|
||||||
const participantCount = getParticipantCount(state);
|
const participantCount = getParticipantCount(state);
|
||||||
|
@ -65,6 +68,7 @@ export function getMaxColumnCount(state: Object) {
|
||||||
if (availableWidth < TWO_COLUMN_BREAKPOINT) {
|
if (availableWidth < TWO_COLUMN_BREAKPOINT) {
|
||||||
return Math.min(2, Math.max(configuredMax, 1));
|
return Math.min(2, Math.max(configuredMax, 1));
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
return Math.min(Math.max(configuredMax, 1), ABSOLUTE_MAX_COLUMNS);
|
return Math.min(Math.max(configuredMax, 1), ABSOLUTE_MAX_COLUMNS);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue