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

restore captions feature in new layouts

Browse Source
This commit is contained in:
Ramon Souza 2021-08-16 10:38:39 -03:00
parent 778ddc3ef4
commit 230cce6f3a
10 changed files with 88 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
bigbluebutton-html5/imports/ui/components/app/component.jsx
View File

@ -364,12 +364,25 @@ class App extends Component {
}
renderCaptions() {
const { captions } = this.props;
const {
captions,
captionsStyle,
} = this.props;
if (!captions) return null;
return (
<div className={styles.captionsWrapper}>
<div
className={styles.captionsWrapper}
style={
{
position: 'absolute',
left: captionsStyle.left,
right: captionsStyle.right,
width: captionsStyle.width,
}
}
>
{captions}
</div>
);
@ -484,6 +497,7 @@ class App extends Component {
? <ExternalVideoContainer isPresenter={isPresenter} />
: null
}
{this.renderCaptions()}
<UploaderContainer />
<BreakoutRoomInvitation />
<AudioContainer />

3
bigbluebutton-html5/imports/ui/components/app/container.jsx
View File

@ -69,7 +69,7 @@ const AppContainer = (props) => {
deviceType,
} = layoutContextState;
const { sidebarContent, sidebarNavigation } = input;
const { actionBar: actionsBarStyle } = output;
const { actionBar: actionsBarStyle, captions: captionsStyle } = output;
const { sidebarNavPanel } = sidebarNavigation;
const { sidebarContentPanel } = sidebarContent;
const sidebarNavigationIsOpen = sidebarNavigation.isOpen;
@ -81,6 +81,7 @@ const AppContainer = (props) => {
{...{
actionsbar,
actionsBarStyle,
captionsStyle,
currentUserId,
layoutType,
meetingLayout,

3
bigbluebutton-html5/imports/ui/components/app/styles.scss
View File

@ -211,11 +211,8 @@
}
.captionsWrapper {
position: absolute;
width: auto;
height: auto;
bottom: 100px;
left: 20%;
z-index: 2;
}

25
bigbluebutton-html5/imports/ui/components/layout/context.jsx
View File

@ -238,6 +238,31 @@ const reducer = (state, action) => {
};
}
// CAPTIONS
case ACTIONS.SET_CAPTIONS_OUTPUT: {
const {
left, right, width,
} = action.value;
const { captions } = state.output;
if (captions.left === left
&& captions.right === right
&& captions.width === width) {
return state;
}
return {
...state,
output: {
...state.output,
captions: {
...captions,
left,
right,
width,
},
},
};
}
// SIDEBAR NAVIGATION
case ACTIONS.SET_SIDEBAR_NAVIGATION_IS_OPEN: {
const { sidebarNavigation } = state.input;

1
bigbluebutton-html5/imports/ui/components/layout/defaultValues.js
View File

@ -17,6 +17,7 @@ const DEFAULT_VALUES = {
cameraDockMinHeight: 120,
cameraDockMinWidth: 120,
camerasMargin: 10,
captionsMargin: 10,
presentationTabOrder: 5,
presentationMinHeight: 220,

4
bigbluebutton-html5/imports/ui/components/layout/initState.js
View File

@ -115,6 +115,10 @@ export const INITIAL_OUTPUT_STATE = {
tabOrder: 0,
zIndex: 1,
},
captions: {
left: 0,
right: 0,
},
sidebarNavigation: {
display: true,
minWidth: 0,

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

@ -723,7 +723,7 @@ class CustomLayout extends Component {
const { deviceType, input, isRTL } = layoutContextState;
const { cameraDock } = input;
const { position: cameraPosition } = cameraDock;
const { camerasMargin } = DEFAULT_VALUES;
const { camerasMargin, captionsMargin } = DEFAULT_VALUES;
const sidebarNavWidth = this.calculatesSidebarNavWidth();
const sidebarNavHeight = this.calculatesSidebarNavHeight();
@ -784,6 +784,15 @@ class CustomLayout extends Component {
},
});
layoutContextDispatch({
type: ACTIONS.SET_CAPTIONS_OUTPUT,
value: {
left: !isRTL ? (mediaBounds.left + captionsMargin) : null,
right: isRTL ? (mediaBounds.right + captionsMargin) : null,
width: mediaBounds.width - (captionsMargin * 2),
},
});
layoutContextDispatch({
type: ACTIONS.SET_SIDEBAR_NAVIGATION_OUTPUT,
value: {

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

@ -462,6 +462,7 @@ class PresentationFocusLayout extends Component {
calculatesLayout() {
const { layoutContextState, layoutContextDispatch } = this.props;
const { deviceType, input, isRTL } = layoutContextState;
const { captionsMargin } = DEFAULT_VALUES;
const sidebarNavWidth = this.calculatesSidebarNavWidth();
const sidebarNavHeight = this.calculatesSidebarNavHeight();
@ -516,6 +517,15 @@ class PresentationFocusLayout extends Component {
},
});
layoutContextDispatch({
type: ACTIONS.SET_CAPTIONS_OUTPUT,
value: {
left: !isRTL ? (mediaBounds.left + captionsMargin) : null,
right: isRTL ? (mediaBounds.right + captionsMargin) : null,
width: mediaBounds.width - (captionsMargin * 2),
},
});
layoutContextDispatch({
type: ACTIONS.SET_SIDEBAR_NAVIGATION_OUTPUT,
value: {

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

@ -512,7 +512,7 @@ class SmartLayout extends Component {
calculatesLayout() {
const { layoutContextState, layoutContextDispatch } = this.props;
const { deviceType, input, isRTL } = layoutContextState;
const { camerasMargin } = DEFAULT_VALUES;
const { camerasMargin, captionsMargin } = DEFAULT_VALUES;
const sidebarNavWidth = this.calculatesSidebarNavWidth();
const sidebarNavHeight = this.calculatesSidebarNavHeight();
@ -563,6 +563,15 @@ class SmartLayout extends Component {
},
});
layoutContextDispatch({
type: ACTIONS.SET_CAPTIONS_OUTPUT,
value: {
left: !isRTL ? (mediaBounds.left + captionsMargin) : null,
right: isRTL ? (mediaBounds.right + captionsMargin) : null,
width: mediaBounds.width - (captionsMargin * 2),
},
});
layoutContextDispatch({
type: ACTIONS.SET_SIDEBAR_NAVIGATION_OUTPUT,
value: {

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

@ -475,6 +475,7 @@ class VideoFocusLayout extends Component {
calculatesLayout() {
const { layoutContextState, layoutContextDispatch } = this.props;
const { deviceType, input, isRTL } = layoutContextState;
const { captionsMargin } = DEFAULT_VALUES;
const sidebarNavWidth = this.calculatesSidebarNavWidth();
const sidebarNavHeight = this.calculatesSidebarNavHeight();
@ -530,6 +531,15 @@ class VideoFocusLayout extends Component {
},
});
layoutContextDispatch({
type: ACTIONS.SET_CAPTIONS_OUTPUT,
value: {
left: !isRTL ? (mediaBounds.left + captionsMargin) : null,
right: isRTL ? (mediaBounds.right + captionsMargin) : null,
width: mediaBounds.width - (captionsMargin * 2),
},
});
layoutContextDispatch({
type: ACTIONS.SET_SIDEBAR_NAVIGATION_OUTPUT,
value: {