Merge pull request #13007 from ramonlsouza/issue-13002
restore captions feature in new layouts
This commit is contained in:
commit
b291279860
@ -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,
|
||||
maxWidth: captionsStyle.maxWidth,
|
||||
}
|
||||
}
|
||||
>
|
||||
{captions}
|
||||
</div>
|
||||
);
|
||||
@ -484,6 +497,7 @@ class App extends Component {
|
||||
? <ExternalVideoContainer isPresenter={isPresenter} />
|
||||
: null
|
||||
}
|
||||
{this.renderCaptions()}
|
||||
<UploaderContainer />
|
||||
<BreakoutRoomInvitation />
|
||||
<AudioContainer />
|
||||
|
@ -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,
|
||||
|
@ -211,11 +211,8 @@
|
||||
}
|
||||
|
||||
.captionsWrapper {
|
||||
position: absolute;
|
||||
width: auto;
|
||||
height: auto;
|
||||
bottom: 100px;
|
||||
left: 20%;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
|
@ -238,6 +238,31 @@ const reducer = (state, action) => {
|
||||
};
|
||||
}
|
||||
|
||||
// CAPTIONS
|
||||
case ACTIONS.SET_CAPTIONS_OUTPUT: {
|
||||
const {
|
||||
left, right, maxWidth,
|
||||
} = action.value;
|
||||
const { captions } = state.output;
|
||||
if (captions.left === left
|
||||
&& captions.right === right
|
||||
&& captions.maxWidth === maxWidth) {
|
||||
return state;
|
||||
}
|
||||
return {
|
||||
...state,
|
||||
output: {
|
||||
...state.output,
|
||||
captions: {
|
||||
...captions,
|
||||
left,
|
||||
right,
|
||||
maxWidth,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
// SIDEBAR NAVIGATION
|
||||
case ACTIONS.SET_SIDEBAR_NAVIGATION_IS_OPEN: {
|
||||
const { sidebarNavigation } = state.input;
|
||||
|
@ -17,6 +17,7 @@ const DEFAULT_VALUES = {
|
||||
cameraDockMinHeight: 120,
|
||||
cameraDockMinWidth: 120,
|
||||
camerasMargin: 10,
|
||||
captionsMargin: 10,
|
||||
|
||||
presentationTabOrder: 5,
|
||||
presentationMinHeight: 220,
|
||||
|
@ -115,6 +115,10 @@ export const INITIAL_OUTPUT_STATE = {
|
||||
tabOrder: 0,
|
||||
zIndex: 1,
|
||||
},
|
||||
captions: {
|
||||
left: 0,
|
||||
right: 0,
|
||||
},
|
||||
sidebarNavigation: {
|
||||
display: true,
|
||||
minWidth: 0,
|
||||
|
@ -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,
|
||||
maxWidth: mediaBounds.width - (captionsMargin * 2),
|
||||
},
|
||||
});
|
||||
|
||||
layoutContextDispatch({
|
||||
type: ACTIONS.SET_SIDEBAR_NAVIGATION_OUTPUT,
|
||||
value: {
|
||||
|
@ -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,
|
||||
maxWidth: mediaBounds.width - (captionsMargin * 2),
|
||||
},
|
||||
});
|
||||
|
||||
layoutContextDispatch({
|
||||
type: ACTIONS.SET_SIDEBAR_NAVIGATION_OUTPUT,
|
||||
value: {
|
||||
|
@ -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,
|
||||
maxWidth: mediaBounds.width - (captionsMargin * 2),
|
||||
},
|
||||
});
|
||||
|
||||
layoutContextDispatch({
|
||||
type: ACTIONS.SET_SIDEBAR_NAVIGATION_OUTPUT,
|
||||
value: {
|
||||
|
@ -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,
|
||||
maxWidth: mediaBounds.width - (captionsMargin * 2),
|
||||
},
|
||||
});
|
||||
|
||||
layoutContextDispatch({
|
||||
type: ACTIONS.SET_SIDEBAR_NAVIGATION_OUTPUT,
|
||||
value: {
|
||||
|
Loading…
Reference in New Issue
Block a user