haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add config flag for tile responsiveness

This commit is contained in:
Mihai-Andrei Uscat 2021-01-26 10:33:31 +02:00 committed by Mihai-Andrei Uscat
parent db84889143
commit 8cf4e15b23
7 changed files with 49 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
config.js
View File

@ -326,6 +326,9 @@ var config = {
// UI
//
// Disables responsive tiles.
// disableResponsiveTiles: false,
// Hides lobby button
// hideLobbyButton: false,

1
react/features/base/config/configWhitelist.js
View File

@ -89,6 +89,7 @@ export default [
'disableProfile',
'disableRemoteControl',
'disableRemoteMute',
'disableResponsiveTiles',
'disableRtx',
'disableShortcuts',
'disableSimulcast',

17
react/features/filmstrip/actions.web.js
View File

@ -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);

10
react/features/filmstrip/functions.web.js
View File

@ -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;

3
react/features/filmstrip/middleware.web.js
View File

@ -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;

11
react/features/filmstrip/subscriber.web.js
View File

@ -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
)
);
}

40
react/features/video-layout/functions.js
View File

@ -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);