fix(resizable-filmstrip): grid view paddings.
This commit is contained in:
Hristo Terezov
parent
e7c4a55add
commit
cb9511ef2c
|
|
@ -1302,7 +1302,14 @@ var config = {
|
|||
// // Disables user resizable filmstrip. Also, allows configuration of the filmstrip
|
||||
// // (width, tiles aspect ratios) through the interfaceConfig options.
|
||||
// disableResizable: false,
|
||||
// }
|
||||
// },
|
||||
|
||||
// Tile view related config options.
|
||||
// tileView: {
|
||||
// // The optimal number of tiles that are going to be shown in tile view. Depending on the screen size it may
|
||||
// // not be possible to show the exact number of participants specified here.
|
||||
// numberOfVisibleTiles: 25
|
||||
// },
|
||||
|
||||
|
||||
// Specifies whether the chat emoticons are disabled or not
|
||||
|
|
|
|||
|
|
@ -117,6 +117,25 @@
|
|||
height: calc(100% - calc(#{$newToolbarSizeWithPadding} + #{$scrollHeight}));
|
||||
}
|
||||
|
||||
.filmstrip__videos.vertical-view-grid#remoteVideos {
|
||||
align-items: 'center';
|
||||
border: 0px;
|
||||
padding-right: 7px;
|
||||
|
||||
&.has-scroll {
|
||||
padding-right: 0px;
|
||||
}
|
||||
|
||||
.remote-videos > div {
|
||||
left: 0px; // fixes an issue on FF - the div is aligned to the right by default for some reason
|
||||
}
|
||||
|
||||
.videocontainer {
|
||||
border: 0px;
|
||||
margin: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.remote-videos {
|
||||
display: flex;
|
||||
overscroll-behavior: contain;
|
||||
|
|
@ -125,10 +144,6 @@
|
|||
transition: height .3s ease-in;
|
||||
}
|
||||
|
||||
&.vertical-grid-margin > div {
|
||||
margin-right: $scrollHeight;
|
||||
}
|
||||
|
||||
& > div {
|
||||
position: absolute;
|
||||
transition: opacity 1s;
|
||||
|
|
|
|||
|
|
@ -35,10 +35,10 @@ import {
|
|||
calculateResponsiveTileViewDimensions,
|
||||
calculateThumbnailSizeForHorizontalView,
|
||||
calculateThumbnailSizeForVerticalView,
|
||||
getNumberOfPartipantsForTileView,
|
||||
isFilmstripResizable,
|
||||
showGridInVerticalView
|
||||
} from './functions';
|
||||
import { getNumberOfPartipantsForTileView } from './functions.web';
|
||||
|
||||
export * from './actions.any';
|
||||
|
||||
|
|
@ -74,7 +74,6 @@ export function setTileViewDimensions() {
|
|||
clientWidth,
|
||||
clientHeight,
|
||||
disableTileEnlargement,
|
||||
isVerticalFilmstrip: false,
|
||||
maxColumns,
|
||||
numberOfParticipants,
|
||||
numberOfVisibleTiles
|
||||
|
|
@ -146,7 +145,7 @@ export function setVerticalViewDimensions() {
|
|||
const thumbnailsTotalHeight = rows * (TILE_VERTICAL_MARGIN + height);
|
||||
const hasScroll = clientHeight < thumbnailsTotalHeight;
|
||||
const widthOfFilmstrip = (columns * (TILE_HORIZONTAL_MARGIN + width)) + (hasScroll ? SCROLL_SIZE : 0);
|
||||
const filmstripHeight = Math.min(clientHeight, thumbnailsTotalHeight);
|
||||
const filmstripHeight = Math.min(clientHeight - TILE_VIEW_GRID_VERTICAL_MARGIN, thumbnailsTotalHeight);
|
||||
|
||||
gridView = {
|
||||
gridDimensions: {
|
||||
|
|
@ -156,7 +155,8 @@ export function setVerticalViewDimensions() {
|
|||
thumbnailSize: {
|
||||
height,
|
||||
width
|
||||
}
|
||||
},
|
||||
hasScroll
|
||||
};
|
||||
|
||||
filmstripDimensions = {
|
||||
|
|
|
|||
|
|
@ -320,7 +320,8 @@ class Filmstrip extends PureComponent <Props, State> {
|
|||
const filmstrip = (<>
|
||||
<div
|
||||
className = { clsx(this.props._videosClassName,
|
||||
!tileViewActive && !_resizableFilmstrip && 'filmstrip-hover') }
|
||||
!tileViewActive && !_resizableFilmstrip && 'filmstrip-hover',
|
||||
_verticalViewGrid && 'vertical-view-grid') }
|
||||
id = 'remoteVideos'>
|
||||
{!_disableSelfView && !_verticalViewGrid && (
|
||||
<div
|
||||
|
|
@ -822,6 +823,10 @@ function _mapStateToProps(state) {
|
|||
if (_verticalViewGrid) {
|
||||
gridDimensions = gridView.gridDimensions;
|
||||
_thumbnailSize = gridView.thumbnailSize;
|
||||
|
||||
if (gridView.hasScroll) {
|
||||
videosClassName += ' has-scroll';
|
||||
}
|
||||
} else {
|
||||
_thumbnailSize = remote;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,6 +32,7 @@ import {
|
|||
DISPLAY_VIDEO,
|
||||
FILMSTRIP_GRID_BREAKPOINT,
|
||||
INDICATORS_TOOLTIP_POSITION,
|
||||
SCROLL_SIZE,
|
||||
SQUARE_TILE_ASPECT_RATIO,
|
||||
TILE_ASPECT_RATIO,
|
||||
TILE_HORIZONTAL_MARGIN,
|
||||
|
|
@ -295,7 +296,6 @@ export function calculateResponsiveTileViewDimensions({
|
|||
}) {
|
||||
let height, width;
|
||||
let columns, rows;
|
||||
|
||||
let dimensions = {
|
||||
maxArea: 0
|
||||
};
|
||||
|
|
@ -323,52 +323,31 @@ export function calculateResponsiveTileViewDimensions({
|
|||
isVerticalFilmstrip
|
||||
});
|
||||
|
||||
// eslint-disable-next-line no-negated-condition
|
||||
if (typeof size !== 'undefined') {
|
||||
|
||||
if (size) {
|
||||
const { height: currentHeight, width: currentWidth, minHeightEnforced, maxVisibleRows } = size;
|
||||
|
||||
console.error(`Num col = ${c}, visibleRows=${visibleRows}, hxw=${
|
||||
currentHeight}x${currentWidth}, maxVisibleRows=${maxVisibleRows}`);
|
||||
let area = currentHeight * currentWidth * Math.min(c * maxVisibleRows, numberOfParticipants);
|
||||
const currentDimensions = {
|
||||
maxArea: area,
|
||||
height: currentHeight,
|
||||
width: currentWidth,
|
||||
columns: c,
|
||||
rows: r
|
||||
};
|
||||
|
||||
// we have a preference to show more columns if possible, that's why even if the area is equal we
|
||||
// overwrite.
|
||||
if (!minHeightEnforced && area > dimensions.maxArea) {
|
||||
dimensions = {
|
||||
maxArea: area,
|
||||
height: currentHeight,
|
||||
width: currentWidth,
|
||||
columns: c,
|
||||
rows: r
|
||||
};
|
||||
} else if (minHeightEnforced) {
|
||||
// eslint-disable-next-line max-depth
|
||||
if (area > minHeightEnforcedDimensions.maxArea) {
|
||||
minHeightEnforcedDimensions = {
|
||||
maxArea: area,
|
||||
height: currentHeight,
|
||||
width: currentWidth,
|
||||
columns: c,
|
||||
rows: r
|
||||
};
|
||||
} else if (maxVisibleRows === 0) {
|
||||
area = currentHeight * currentWidth * Math.min(c, numberOfParticipants);
|
||||
dimensions = currentDimensions;
|
||||
} else if (minHeightEnforced && area > minHeightEnforcedDimensions.maxArea) {
|
||||
minHeightEnforcedDimensions = currentDimensions;
|
||||
} else if (minHeightEnforced && maxVisibleRows === 0) {
|
||||
area = currentHeight * currentWidth * Math.min(c, numberOfParticipants);
|
||||
|
||||
// eslint-disable-next-line max-depth
|
||||
if (area > zeroVisibleRowsDimensions.maxArea) {
|
||||
zeroVisibleRowsDimensions = {
|
||||
maxArea: area,
|
||||
height: currentHeight,
|
||||
width: currentWidth,
|
||||
columns: c,
|
||||
rows: r
|
||||
};
|
||||
}
|
||||
if (area > zeroVisibleRowsDimensions.maxArea) {
|
||||
zeroVisibleRowsDimensions = {
|
||||
...currentDimensions,
|
||||
maxArea: area
|
||||
};
|
||||
}
|
||||
}
|
||||
} else {
|
||||
console.error(`Num col = ${c}, visibleRows=${visibleRows} not possible`);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -415,7 +394,7 @@ export function calculateThumbnailSizeForTileView({
|
|||
const aspectRatio = getTileDefaultAspectRatio(disableResponsiveTiles, disableTileEnlargement, clientWidth);
|
||||
const minHeight = getThumbnailMinHeight(clientWidth);
|
||||
const viewWidth = clientWidth - (columns * TILE_HORIZONTAL_MARGIN)
|
||||
- (isVerticalFilmstrip ? 0 : TILE_VIEW_GRID_HORIZONTAL_MARGIN);
|
||||
- (isVerticalFilmstrip ? SCROLL_SIZE : TILE_VIEW_GRID_HORIZONTAL_MARGIN);
|
||||
const viewHeight = clientHeight - (minVisibleRows * TILE_VERTICAL_MARGIN) - TILE_VIEW_GRID_VERTICAL_MARGIN;
|
||||
const initialWidth = viewWidth / columns;
|
||||
let initialHeight = viewHeight / minVisibleRows;
|
||||
|
|
@ -478,6 +457,7 @@ export function calculateThumbnailSizeForTileView({
|
|||
|
||||
// else
|
||||
// We can't fit that number of columns with the desired min height and aspect ratio.
|
||||
return;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
Loading…
Reference in New Issue