BigBlueButton/bigbluebutton-Github
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #13226 from vitormateusalmeida/issue-12356

Browse Source 
Place both buttons at the bottom of the video dock when cameras are vertically positioned
This commit is contained in:
Anton Georgiev 2021-09-15 16:56:31 -04:00 committed by GitHub
commit 56fbdee49c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 69 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
bigbluebutton-html5/imports/ui/components/layout/layout-manager/customLayout.jsx
View File

@ -508,6 +508,8 @@ class CustomLayout extends Component {
cameraDockBounds.minHeight = DEFAULT_VALUES.cameraDockMinHeight;
cameraDockBounds.height = mediaAreaBounds.height;
cameraDockBounds.maxHeight = mediaAreaBounds.height;
// button size in vertical position
cameraDockBounds.height -= 20;
break;
}
case CAMERADOCK_POSITION.CONTENT_BOTTOM: {
@ -570,6 +572,8 @@ class CustomLayout extends Component {
cameraDockBounds.minHeight = mediaAreaBounds.height;
cameraDockBounds.height = mediaAreaBounds.height;
cameraDockBounds.maxHeight = mediaAreaBounds.height;
// button size in vertical position
cameraDockBounds.height -= 20;
break;
}
case CAMERADOCK_POSITION.SIDEBAR_CONTENT_BOTTOM: {

10
bigbluebutton-html5/imports/ui/components/layout/layout-manager/smartLayout.jsx
View File

@ -3,7 +3,9 @@ import _ from 'lodash';
import { LayoutContextFunc } from '/imports/ui/components/layout/context';
import DEFAULT_VALUES from '/imports/ui/components/layout/defaultValues';
import { INITIAL_INPUT_STATE } from '/imports/ui/components/layout/initState';
import { DEVICE_TYPE, ACTIONS, PANELS } from '/imports/ui/components/layout/enums';
import {
DEVICE_TYPE, ACTIONS, PANELS, CAMERADOCK_POSITION,
} from '/imports/ui/components/layout/enums';
const windowWidth = () => window.document.documentElement.clientWidth;
const windowHeight = () => window.document.documentElement.clientHeight;
@ -363,6 +365,7 @@ class SmartLayout extends Component {
cameraDockBounds.maxWidth = mediaAreaBounds.width;
cameraDockBounds.height = mediaAreaBounds.height;
cameraDockBounds.maxHeight = mediaAreaBounds.height;
cameraDockBounds.position = CAMERADOCK_POSITION.CONTENT_TOP;
} else if (mediaBounds.width < mediaAreaBounds.width) {
cameraDockBounds.width = mediaAreaBounds.width - mediaBoundsWidth;
cameraDockBounds.maxWidth = mediaAreaBounds.width * 0.8;
@ -371,6 +374,9 @@ class SmartLayout extends Component {
cameraDockBounds.left += camerasMargin;
cameraDockBounds.width -= (camerasMargin * 2);
cameraDockBounds.isCameraHorizontal = true;
cameraDockBounds.position = CAMERADOCK_POSITION.CONTENT_LEFT;
// button size in vertical position
cameraDockBounds.height -= 20;
} else {
cameraDockBounds.width = mediaAreaBounds.width;
cameraDockBounds.maxWidth = mediaAreaBounds.width;
@ -378,6 +384,7 @@ class SmartLayout extends Component {
cameraDockBounds.maxHeight = mediaAreaBounds.height * 0.8;
cameraDockBounds.top += camerasMargin;
cameraDockBounds.height -= (camerasMargin * 2);
cameraDockBounds.position = CAMERADOCK_POSITION.CONTENT_TOP;
}
cameraDockBounds.minWidth = cameraDockBounds.width;
@ -644,6 +651,7 @@ class SmartLayout extends Component {
type: ACTIONS.SET_CAMERA_DOCK_OUTPUT,
value: {
display: input.cameraDock.numCameras > 0,
position: cameraDockBounds.position,
minWidth: cameraDockBounds.minWidth,
width: cameraDockBounds.width,
maxWidth: cameraDockBounds.maxWidth,

38
bigbluebutton-html5/imports/ui/components/video-provider/video-list/component.jsx
View File

@ -279,7 +279,13 @@ class VideoList extends Component {
}
renderNextPageButton() {
const { intl, numberOfPages, currentVideoPageIndex } = this.props;
const {
intl,
numberOfPages,
currentVideoPageIndex,
cameraDock,
} = this.props;
const { position } = cameraDock;
if (!this.displayPageButtons()) return null;
@ -297,13 +303,24 @@ class VideoList extends Component {
onClick={VideoService.getNextVideoPage}
label={nextPageDetailedLabel}
hideLabel
className={cx(styles.nextPage)}
className={
cx({
[styles.nextPage]: true,
[styles.nextPageLRPosition]: position === 'contentRight' || position === 'contentLeft',
})
}
/>
);
}
renderPreviousPageButton() {
const { intl, currentVideoPageIndex, numberOfPages } = this.props;
const {
intl,
currentVideoPageIndex,
numberOfPages,
cameraDock,
} = this.props;
const { position } = cameraDock;
if (!this.displayPageButtons()) return null;
@ -321,7 +338,12 @@ class VideoList extends Component {
onClick={VideoService.getPreviousVideoPage}
label={prevPageDetailedLabel}
hideLabel
className={cx(styles.previousPage)}
className={
cx({
[styles.previousPage]: true,
[styles.previousPageLRPosition]: position === 'contentRight' || position === 'contentLeft',
})
}
/>
);
}
@ -389,11 +411,14 @@ class VideoList extends Component {
const {
streams,
intl,
cameraDock,
} = this.props;
const { optimalGrid, autoplayBlocked } = this.state;
const { position } = cameraDock;
const canvasClassName = cx({
[styles.videoCanvas]: true,
[styles.videoCanvasLRPosition]: position === 'contentRight' || position === 'contentLeft',
});
const videoListClassName = cx({
@ -436,6 +461,11 @@ class VideoList extends Component {
/>
)}
{
(position === 'contentRight' || position === 'contentLeft')
&& <div className={styles.break} />
}
{this.renderNextPageButton()}
</div>
);

22
bigbluebutton-html5/imports/ui/components/video-provider/video-list/styles.scss
View File

@ -19,6 +19,12 @@
justify-content: center;
}
.videoCanvasLRPosition {
flex-wrap: wrap;
align-content: center;
order: 0;
}
.videoList {
display: grid;
@ -258,6 +264,11 @@
}
}
.nextPageLRPosition {
order: 3;
margin-right: 2px;
}
.previousPage {
margin-right: 1px;
@ -266,6 +277,11 @@
}
}
.previousPageLRPosition {
order: 2;
margin-left: 2px;
}
.unhealthyStream {
filter: grayscale(50%) opacity(50%);
}
@ -284,3 +300,9 @@
height: 100vh;
z-index: 99;
}
.break {
order: 1;
flex-basis: 100%;
height: 5px;
}