Skip to content

Commit

Permalink
Merge pull request #12807 from ramonlsouza/actionsbar-new-lm
Browse files Browse the repository at this point in the history 
refactor: actions bar size calculation - new layouts
  • Loading branch information
@antobinary
antobinary committed Jul 27, 2021
2 parents 9d0c4e2 + 0a2a6b1 commit 9e644e8
Show file tree
Hide file tree
Showing 9 changed files with 138 additions and 33 deletions.
14 changes: 11 additions & 3 deletions bigbluebutton-html5/imports/ui/components/actions-bar/component.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,14 +35,22 @@ class ActionsBar extends PureComponent {
currentUser,
shortcuts,
newLayoutContextDispatch,
layoutManagerLoaded,
actionsBarStyle,
} = this.props;

return (
<div
className={styles.actionsbar}
style={{
height: ACTIONSBAR_HEIGHT,
}}
style={
layoutManagerLoaded === 'new'
? {
height: actionsBarStyle.innerHeight,
}
: {
height: ACTIONSBAR_HEIGHT,
}
}
>
<div className={styles.left}>
<ActionsDropdown {...{
Expand Down
6 changes: 5 additions & 1 deletion bigbluebutton-html5/imports/ui/components/actions-bar/container.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,9 @@ const ActionsBarContainer = (props) => {
const usingUsersContext = useContext(UsersContext);
const { users } = usingUsersContext;
const newLayoutContext = useContext(NLayoutContext);
const { newLayoutContextDispatch } = newLayoutContext;
const { newLayoutContextState, newLayoutContextDispatch } = newLayoutContext;
const { output } = newLayoutContextState;
const { actionBar: actionsBarStyle } = output;

const currentUser = { userId: Auth.userID, emoji: users[Auth.meetingID][Auth.userID].emoji };

Expand All @@ -33,6 +35,7 @@ const ActionsBarContainer = (props) => {
...props,
currentUser,
newLayoutContextDispatch,
actionsBarStyle,
}
}
/>
Expand Down Expand Up @@ -65,4 +68,5 @@ export default withTracker(() => ({
{ fields: {} }),
allowExternalVideo: Meteor.settings.public.externalVideoPlayer.enabled,
setEmojiStatus: UserListService.setEmojiStatus,
layoutManagerLoaded: Session.get('layoutManagerLoaded'),
}))(injectIntl(ActionsBarContainer));
1 change: 1 addition & 0 deletions bigbluebutton-html5/imports/ui/components/app/component.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -452,6 +452,7 @@ class App extends Component {
left: actionsBarStyle.left,
height: actionsBarStyle.height,
width: actionsBarStyle.width,
padding: actionsBarStyle.padding,
}
: {
position: 'relative',
Expand Down
6 changes: 5 additions & 1 deletion bigbluebutton-html5/imports/ui/components/layout/context/context.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -206,14 +206,16 @@ const reducer = (state, action) => {
// ACTION BAR
case ACTIONS.SET_ACTIONBAR_OUTPUT: {
const {
display, width, height, top, left, tabOrder, zIndex,
display, width, height, innerHeight, top, left, padding, tabOrder, zIndex,
} = action.value;
const { actionBar } = state.output;
if (actionBar.display === display
&& actionBar.width === width
&& actionBar.height === height
&& actionBar.innerHeight === innerHeight
&& actionBar.top === top
&& actionBar.left === left
&& actionBar.padding === padding
&& actionBar.zIndex === zIndex
&& actionBar.tabOrder === tabOrder) {
return state;
Expand All @@ -227,8 +229,10 @@ const reducer = (state, action) => {
display,
width,
height,
innerHeight,
top,
left,
padding,
tabOrder,
zIndex,
},
Expand Down
3 changes: 2 additions & 1 deletion bigbluebutton-html5/imports/ui/components/layout/defaultValues.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,8 @@ const DEFAULT_VALUES = {
navBarTop: 0,
navBarTabOrder: 3,

actionBarHeight: 65,
actionBarHeight: 42,
actionBarPadding: 11.2,
actionBarTabOrder: 6,

sidebarNavMaxWidth: 240,
Expand Down
42 changes: 33 additions & 9 deletions bigbluebutton-html5/imports/ui/components/layout/layout-manager/customLayout.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,8 +85,9 @@ class CustomLayout extends Component {
}

calculatesDropAreas(sidebarNavWidth, sidebarContentWidth, cameraDockBounds) {
const { height: actionBarHeight } = this.calculatesActionbarHeight();
const mediaAreaHeight = this.mainHeight()
- (DEFAULT_VALUES.navBarHeight + DEFAULT_VALUES.actionBarHeight);
- (DEFAULT_VALUES.navBarHeight + actionBarHeight);
const mediaAreaWidth = this.mainWidth() - (sidebarNavWidth + sidebarContentWidth);
const DROP_ZONE_DEFAUL_SIZE = 100;
const dropZones = {};
Expand Down Expand Up @@ -220,18 +221,36 @@ class CustomLayout extends Component {
};
}

calculatesActionbarHeight() {
const { newLayoutContextState } = this.props;
const { fontSize } = newLayoutContextState;

const BASE_FONT_SIZE = 14; // 90% font size
const BASE_HEIGHT = DEFAULT_VALUES.actionBarHeight;
const PADDING = DEFAULT_VALUES.actionBarPadding;

const actionBarHeight = ((BASE_HEIGHT / BASE_FONT_SIZE) * fontSize);

return {
height: actionBarHeight + (PADDING * 2),
innerHeight: actionBarHeight,
padding: PADDING,
};
}

calculatesActionbarBounds(mediaAreaBounds) {
const { newLayoutContextState } = this.props;
const { input, fontSize } = newLayoutContextState;
const { input } = newLayoutContextState;

const BASE_FONT_SIZE = 16;
const actionBarHeight = (DEFAULT_VALUES.actionBarHeight / BASE_FONT_SIZE) * fontSize;
const actionBarHeight = this.calculatesActionbarHeight();

return {
display: input.actionBar.hasActionBar,
width: this.mainWidth() - mediaAreaBounds.left,
height: actionBarHeight,
top: this.mainHeight() - actionBarHeight,
height: actionBarHeight.height,
innerHeight: actionBarHeight.innerHeight,
padding: actionBarHeight.padding,
top: this.mainHeight() - actionBarHeight.height,
left: mediaAreaBounds.left,
zIndex: 1,
};
Expand Down Expand Up @@ -390,7 +409,8 @@ class CustomLayout extends Component {
calculatesMediaAreaBounds(sidebarNavWidth, sidebarContentWidth) {
const { newLayoutContextState } = this.props;
const { deviceType, layoutLoaded } = newLayoutContextState;
const { navBarHeight, actionBarHeight } = DEFAULT_VALUES;
const { navBarHeight } = DEFAULT_VALUES;
const { height: actionBarHeight } = this.calculatesActionbarHeight();
let left = 0;
let width = 0;
let top = 0;
Expand Down Expand Up @@ -600,8 +620,9 @@ class CustomLayout extends Component {
const { input, fullscreen } = newLayoutContextState;
const { presentation } = input;
const { isOpen } = presentation;
const { height: actionBarHeight } = this.calculatesActionbarHeight();
const mediaAreaHeight = this.mainHeight()
- (DEFAULT_VALUES.navBarHeight + DEFAULT_VALUES.actionBarHeight);
- (DEFAULT_VALUES.navBarHeight + actionBarHeight);
const mediaAreaWidth = this.mainWidth() - (sidebarNavWidth + sidebarContentWidth);
const mediaBounds = {};
const { element: fullscreenElement } = fullscreen;
Expand Down Expand Up @@ -695,6 +716,7 @@ class CustomLayout extends Component {
const mediaBounds = this.calculatesMediaBounds(
sidebarNavWidth.width, sidebarContentWidth.width, cameraDockBounds,
);
const { height: actionBarHeight } = this.calculatesActionbarHeight();

newLayoutContextDispatch({
type: ACTIONS.SET_NAVBAR_OUTPUT,
Expand All @@ -714,8 +736,10 @@ class CustomLayout extends Component {
display: input.actionBar.hasActionBar,
width: actionbarBounds.width,
height: actionbarBounds.height,
innerHeight: actionbarBounds.innerHeight,
top: actionbarBounds.top,
left: actionbarBounds.left,
padding: actionbarBounds.padding,
tabOrder: DEFAULT_VALUES.actionBarTabOrder,
zIndex: actionbarBounds.zIndex,
},
Expand Down Expand Up @@ -780,7 +804,7 @@ class CustomLayout extends Component {
type: ACTIONS.SET_MEDIA_AREA_SIZE,
value: {
width: this.mainWidth() - sidebarNavWidth.width - sidebarContentWidth.width,
height: this.mainHeight() - DEFAULT_VALUES.navBarHeight - DEFAULT_VALUES.actionBarHeight,
height: this.mainHeight() - DEFAULT_VALUES.navBarHeight - actionBarHeight,
},
});

Expand Down
33 changes: 27 additions & 6 deletions bigbluebutton-html5/imports/ui/components/layout/layout-manager/presentationFocusLayout.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -161,18 +161,36 @@ class PresentationFocusLayout extends Component {
};
}

calculatesActionbarHeight() {
const { newLayoutContextState } = this.props;
const { fontSize } = newLayoutContextState;

const BASE_FONT_SIZE = 14; // 90% font size
const BASE_HEIGHT = DEFAULT_VALUES.actionBarHeight;
const PADDING = DEFAULT_VALUES.actionBarPadding;

const actionBarHeight = ((BASE_HEIGHT / BASE_FONT_SIZE) * fontSize);

return {
height: actionBarHeight + (PADDING * 2),
innerHeight: actionBarHeight,
padding: PADDING,
};
}

calculatesActionbarBounds(mediaAreaBounds) {
const { newLayoutContextState } = this.props;
const { input, fontSize } = newLayoutContextState;
const { input } = newLayoutContextState;

const BASE_FONT_SIZE = 16;
const actionBarHeight = (DEFAULT_VALUES.actionBarHeight / BASE_FONT_SIZE) * fontSize;
const actionBarHeight = this.calculatesActionbarHeight();

return {
display: input.actionBar.hasActionBar,
width: this.mainWidth() - mediaAreaBounds.left,
height: actionBarHeight,
top: this.mainHeight() - actionBarHeight,
height: actionBarHeight.height,
innerHeight: actionBarHeight.innerHeight,
padding: actionBarHeight.padding,
top: this.mainHeight() - actionBarHeight.height,
left: mediaAreaBounds.left,
zIndex: 1,
};
Expand Down Expand Up @@ -316,7 +334,8 @@ class PresentationFocusLayout extends Component {
calculatesMediaAreaBounds(sidebarNavWidth, sidebarContentWidth) {
const { newLayoutContextState } = this.props;
const { deviceType, layoutLoaded } = newLayoutContextState;
const { navBarHeight, actionBarHeight } = DEFAULT_VALUES;
const { navBarHeight } = DEFAULT_VALUES;
const { height: actionBarHeight } = this.calculatesActionbarHeight();
let left = 0;
let width = 0;
let top = 0;
Expand Down Expand Up @@ -474,8 +493,10 @@ class PresentationFocusLayout extends Component {
display: input.actionBar.hasActionBar,
width: actionbarBounds.width,
height: actionbarBounds.height,
innerHeight: actionbarBounds.innerHeight,
top: actionbarBounds.top,
left: actionbarBounds.left,
padding: actionbarBounds.padding,
tabOrder: DEFAULT_VALUES.actionBarTabOrder,
zIndex: actionbarBounds.zIndex,
},
Expand Down
33 changes: 27 additions & 6 deletions bigbluebutton-html5/imports/ui/components/layout/layout-manager/smartLayout.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -162,18 +162,36 @@ class SmartLayout extends Component {
};
}

calculatesActionbarHeight() {
const { newLayoutContextState } = this.props;
const { fontSize } = newLayoutContextState;

const BASE_FONT_SIZE = 14; // 90% font size
const BASE_HEIGHT = DEFAULT_VALUES.actionBarHeight;
const PADDING = DEFAULT_VALUES.actionBarPadding;

const actionBarHeight = ((BASE_HEIGHT / BASE_FONT_SIZE) * fontSize);

return {
height: actionBarHeight + (PADDING * 2),
innerHeight: actionBarHeight,
padding: PADDING,
};
}

calculatesActionbarBounds(mediaAreaBounds) {
const { newLayoutContextState } = this.props;
const { input, fontSize } = newLayoutContextState;
const { input } = newLayoutContextState;

const BASE_FONT_SIZE = 16;
const actionBarHeight = (DEFAULT_VALUES.actionBarHeight / BASE_FONT_SIZE) * fontSize;
const actionBarHeight = this.calculatesActionbarHeight();

return {
display: input.actionBar.hasActionBar,
width: this.mainWidth() - mediaAreaBounds.left,
height: actionBarHeight,
top: this.mainHeight() - actionBarHeight,
height: actionBarHeight.height,
innerHeight: actionBarHeight.innerHeight,
padding: actionBarHeight.padding,
top: this.mainHeight() - actionBarHeight.height,
left: mediaAreaBounds.left,
zIndex: 1,
};
Expand Down Expand Up @@ -315,7 +333,8 @@ class SmartLayout extends Component {
calculatesMediaAreaBounds(sidebarNavWidth, sidebarContentWidth) {
const { newLayoutContextState } = this.props;
const { deviceType, layoutLoaded } = newLayoutContextState;
const { actionBarHeight, navBarHeight } = DEFAULT_VALUES;
const { navBarHeight } = DEFAULT_VALUES;
const { height: actionBarHeight } = this.calculatesActionbarHeight();
let left = 0;
let width = 0;
let top = 0;
Expand Down Expand Up @@ -528,8 +547,10 @@ class SmartLayout extends Component {
display: input.actionBar.hasActionBar,
width: actionbarBounds.width,
height: actionbarBounds.height,
innerHeight: actionbarBounds.innerHeight,
top: actionbarBounds.top,
left: actionbarBounds.left,
padding: actionbarBounds.padding,
tabOrder: DEFAULT_VALUES.actionBarTabOrder,
zIndex: actionbarBounds.zIndex,
},
Expand Down
33 changes: 27 additions & 6 deletions bigbluebutton-html5/imports/ui/components/layout/layout-manager/videoFocusLayout.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -168,18 +168,36 @@ class VideoFocusLayout extends Component {
};
}

calculatesActionbarHeight() {
const { newLayoutContextState } = this.props;
const { fontSize } = newLayoutContextState;

const BASE_FONT_SIZE = 14; // 90% font size
const BASE_HEIGHT = DEFAULT_VALUES.actionBarHeight;
const PADDING = DEFAULT_VALUES.actionBarPadding;

const actionBarHeight = ((BASE_HEIGHT / BASE_FONT_SIZE) * fontSize);

return {
height: actionBarHeight + (PADDING * 2),
innerHeight: actionBarHeight,
padding: PADDING,
};
}

calculatesActionbarBounds(mediaAreaBounds) {
const { newLayoutContextState } = this.props;
const { input, fontSize } = newLayoutContextState;
const { input } = newLayoutContextState;

const BASE_FONT_SIZE = 16;
const actionBarHeight = (DEFAULT_VALUES.actionBarHeight / BASE_FONT_SIZE) * fontSize;
const actionBarHeight = this.calculatesActionbarHeight();

return {
display: input.actionBar.hasActionBar,
width: this.mainWidth() - mediaAreaBounds.left,
height: actionBarHeight,
top: this.mainHeight() - actionBarHeight,
height: actionBarHeight.height,
innerHeight: actionBarHeight.innerHeight,
padding: actionBarHeight.padding,
top: this.mainHeight() - actionBarHeight.height,
left: mediaAreaBounds.left,
zIndex: 1,
};
Expand Down Expand Up @@ -346,7 +364,8 @@ class VideoFocusLayout extends Component {
calculatesMediaAreaBounds(sidebarNavWidth, sidebarContentWidth) {
const { newLayoutContextState } = this.props;
const { deviceType, layoutLoaded } = newLayoutContextState;
const { navBarHeight, actionBarHeight } = DEFAULT_VALUES;
const { navBarHeight } = DEFAULT_VALUES;
const { height: actionBarHeight } = this.calculatesActionbarHeight();
let left = 0;
let width = 0;
let top = 0;
Expand Down Expand Up @@ -510,8 +529,10 @@ class VideoFocusLayout extends Component {
display: input.actionBar.hasActionBar,
width: actionbarBounds.width,
height: actionbarBounds.height,
innerHeight: actionbarBounds.innerHeight,
top: actionbarBounds.top,
left: actionbarBounds.left,
padding: actionbarBounds.padding,
tabOrder: DEFAULT_VALUES.actionBarTabOrder,
zIndex: actionbarBounds.zIndex,
},
Expand Down

0 comments on commit 9e644e8

Please sign in to comment.