Skip to content

Commit

Permalink
Cherry-pick LPC 2021 Matrix UI component for BBB on clean branch
Browse files Browse the repository at this point in the history
  • Loading branch information
glunardi committed Sep 12, 2021
1 parent 3e497e2 commit 1f5acae
Show file tree
Hide file tree
Showing 14 changed files with 695 additions and 26 deletions.
1 change: 1 addition & 0 deletions bigbluebutton-html5/imports/ui/components/app/styles.scss
Original file line number Diff line number Diff line change
Expand Up @@ -131,6 +131,7 @@

.poll,
.breakoutRoom,
.matrix,
.note,
.captions,
.chat {
Expand Down
21 changes: 16 additions & 5 deletions bigbluebutton-html5/imports/ui/components/layout/context.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,9 @@ const initialState = {
chatSize: {
width: 0,
},
matrixSize: {
width: 0,
},
noteSize: {
width: 0,
},
Expand Down Expand Up @@ -118,6 +121,14 @@ const reducer = (state, action) => {
},
};
}
case 'setMatrixSize': {
return {
...state,
matrixSize: {
width: action.value.width,
},
};
}
case 'setNoteSize': {
return {
...state,
Expand Down Expand Up @@ -274,20 +285,20 @@ const ContextProvider = (props) => {
);
};

const withProvider = Component => props => (
const withProvider = (Component) => (props) => (
<ContextProvider {...props}>
<Component />
</ContextProvider>
);

const ContextConsumer = Component => props => (
const ContextConsumer = (Component) => (props) => (
<LayoutContext.Consumer>
{contexts => <Component {...props} {...contexts} />}
{(contexts) => <Component {...props} {...contexts} />}
</LayoutContext.Consumer>
);

const withLayoutConsumer = Component => ContextConsumer(Component);
const withLayoutContext = Component => withProvider(withLayoutConsumer(Component));
const withLayoutConsumer = (Component) => ContextConsumer(Component);
const withLayoutContext = (Component) => withProvider(withLayoutConsumer(Component));

export {
withProvider,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@ const CHAT_MIN_WIDTH = 320;
const CHAT_MAX_WIDTH = 400;
const POLL_MIN_WIDTH = 320;
const POLL_MAX_WIDTH = 400;
const MATRIX_MIN_WIDTH = 340;
const MATRIX_MAX_WIDTH = 800;
const NOTE_MIN_WIDTH = 340;
const NOTE_MAX_WIDTH = 800;
const WAITING_MIN_WIDTH = 340;
Expand Down Expand Up @@ -106,7 +108,7 @@ class LayoutManagerComponent extends Component {
window.addEventListener('webcamPlacementChange', () => {
this.setLayoutSizes(false, false, true);
});

window.addEventListener('fullscreenchange', () => {
setTimeout(() => this.setLayoutSizes(), 200);
});
Expand All @@ -120,7 +122,7 @@ class LayoutManagerComponent extends Component {
const { layoutContextState, screenIsShared } = this.props;
const {
layoutContextState: prevLayoutContextState,
screenIsShared: prevScreenIsShared
screenIsShared: prevScreenIsShared,
} = prevProps;
const {
numUsersVideo,
Expand Down Expand Up @@ -191,6 +193,14 @@ class LayoutManagerComponent extends Component {
},
},
);
layoutContextDispatch(
{
type: 'setMatrixSize',
value: {
width: layoutSizes.matrixSize.width,
},
},
);
layoutContextDispatch(
{
type: 'setNoteSize',
Expand Down Expand Up @@ -262,6 +272,9 @@ class LayoutManagerComponent extends Component {
pollSize: {
width: layoutSizes.pollSize.width,
},
matrixSize: {
width: layoutSizes.matrixSize.width,
},
noteSize: {
width: layoutSizes.noteSize.width,
},
Expand Down Expand Up @@ -306,7 +319,8 @@ class LayoutManagerComponent extends Component {
return;
}

if (!isMobile && ((mediaAreaWidth - presentationWidth) > (mediaAreaHeight - presentationHeight))) {
if (!isMobile && ((mediaAreaWidth - presentationWidth)
> (mediaAreaHeight - presentationHeight))) {
layoutContextDispatch(
{
type: 'setWebcamsPlacement',
Expand All @@ -331,6 +345,7 @@ class LayoutManagerComponent extends Component {
userListSize: userListSizeContext,
chatSize: chatSizeContext,
pollSize: pollSizeContext,
matrixSize: matrixSizeContext,
noteSize: noteSizeContext,
captionsSize: captionsSizeContext,
waitingSize: waitingSizeContext,
Expand All @@ -342,6 +357,7 @@ class LayoutManagerComponent extends Component {
let storageUserListWidth;
let storageChatWidth;
let storagePollWidth;
let storageMatrixWidth;
let storageNoteWidth;
let storageCaptionsWidth;
let storageWaitingWidth;
Expand All @@ -351,6 +367,7 @@ class LayoutManagerComponent extends Component {
storageUserListWidth = storageLData.userListSize?.width;
storageChatWidth = storageLData.chatSize?.width;
storagePollWidth = storageLData.pollSize?.width;
storageMatrixWidth = storageLData.matrixSize?.width;
storageNoteWidth = storageLData.noteSize?.width;
storageCaptionsWidth = storageLData.captionsSize?.width;
storageWaitingWidth = storageLData.waitingSize?.width;
Expand All @@ -360,6 +377,7 @@ class LayoutManagerComponent extends Component {
let newUserListSize;
let newChatSize;
let newPollSize;
let newMatrixSize;
let newNoteSize;
let newCaptionsSize;
let newWaitingSize;
Expand Down Expand Up @@ -401,6 +419,18 @@ class LayoutManagerComponent extends Component {
};
}

if (panelChanged && matrixSizeContext.width !== 0) {
newMatrixSize = matrixSizeContext;
} else if (!storageMatrixWidth) {
newMatrixSize = {
width: min(max((windowWidth() * 0.2), MATRIX_MIN_WIDTH), MATRIX_MAX_WIDTH),
};
} else {
newMatrixSize = {
width: storageMatrixWidth,
};
}

if (panelChanged && noteSizeContext.width !== 0) {
newNoteSize = noteSizeContext;
} else if (!storageNoteWidth) {
Expand Down Expand Up @@ -460,6 +490,9 @@ class LayoutManagerComponent extends Component {
newPollSize = {
width: 0,
};
newMatrixSize = {
width: 0,
};
newNoteSize = {
width: 0,
};
Expand All @@ -472,12 +505,36 @@ class LayoutManagerComponent extends Component {
break;
}
case 'poll': {
newChatSize = {
width: 0,
};
newMatrixSize = {
width: 0,
};
newNoteSize = {
width: 0,
};
newBreakoutRoomSize = {
width: 0,
};
newCaptionsSize = {
width: 0,
};
newWaitingSize = {
width: 0,
};
break;
}
case 'matrix': {
newChatSize = {
width: 0,
};
newNoteSize = {
width: 0,
};
newPollSize = {
width: 0,
};
newBreakoutRoomSize = {
width: 0,
};
Expand All @@ -496,6 +553,9 @@ class LayoutManagerComponent extends Component {
newPollSize = {
width: 0,
};
newMatrixSize = {
width: 0,
};
newBreakoutRoomSize = {
width: 0,
};
Expand All @@ -517,6 +577,9 @@ class LayoutManagerComponent extends Component {
newBreakoutRoomSize = {
width: 0,
};
newMatrixSize = {
width: 0,
};
newNoteSize = {
width: 0,
};
Expand All @@ -535,6 +598,9 @@ class LayoutManagerComponent extends Component {
newBreakoutRoomSize = {
width: 0,
};
newMatrixSize = {
width: 0,
};
newNoteSize = {
width: 0,
};
Expand All @@ -550,6 +616,9 @@ class LayoutManagerComponent extends Component {
newPollSize = {
width: 0,
};
newMatrixSize = {
width: 0,
};
newNoteSize = {
width: 0,
};
Expand All @@ -568,6 +637,9 @@ class LayoutManagerComponent extends Component {
newPollSize = {
width: 0,
};
newMatrixSize = {
width: 0,
};
newNoteSize = {
width: 0,
};
Expand All @@ -592,6 +664,9 @@ class LayoutManagerComponent extends Component {
newPollSize = {
width: 0,
};
newMatrixSize = {
width: 0,
};
newNoteSize = {
width: 0,
};
Expand All @@ -612,6 +687,7 @@ class LayoutManagerComponent extends Component {
newUserListSize,
newChatSize,
newPollSize,
newMatrixSize,
newNoteSize,
newCaptionsSize,
newWaitingSize,
Expand Down Expand Up @@ -742,6 +818,7 @@ class LayoutManagerComponent extends Component {
newUserListSize,
newChatSize,
newPollSize,
newMatrixSize,
newNoteSize,
newCaptionsSize,
newWaitingSize,
Expand All @@ -758,6 +835,8 @@ class LayoutManagerComponent extends Component {
secondPanel = newChatSize;
} else if (newPollSize.width > 0) {
secondPanel = newPollSize;
} else if (newMatrixSize.width > 0) {
secondPanel = newMatrixSize;
} else if (newNoteSize.width > 0) {
secondPanel = newNoteSize;
} else if (newCaptionsSize.width > 0) {
Expand All @@ -780,7 +859,10 @@ class LayoutManagerComponent extends Component {
left: firstPanel.width + secondPanel.width,
};

const { presentationWidth, presentationHeight } = LayoutManagerComponent.calculatesPresentationSize(
const {
presentationWidth,
presentationHeight,
} = LayoutManagerComponent.calculatesPresentationSize(
mediaAreaWidth, mediaAreaHeight, presentationSlideWidth, presentationSlideHeight,
);

Expand Down Expand Up @@ -818,6 +900,7 @@ class LayoutManagerComponent extends Component {
userListSize: newUserListSize,
chatSize: newChatSize,
pollSize: newPollSize,
matrixSize: newMatrixSize,
noteSize: newNoteSize,
captionsSize: newCaptionsSize,
waitingSize: newWaitingSize,
Expand All @@ -829,7 +912,7 @@ class LayoutManagerComponent extends Component {
}

render() {
return <Fragment />;
return <></>;
}
}

Expand All @@ -841,6 +924,8 @@ export {
CHAT_MAX_WIDTH,
POLL_MIN_WIDTH,
POLL_MAX_WIDTH,
MATRIX_MIN_WIDTH,
MATRIX_MAX_WIDTH,
NOTE_MIN_WIDTH,
NOTE_MAX_WIDTH,
WAITING_MIN_WIDTH,
Expand Down

0 comments on commit 1f5acae

Please sign in to comment.