Skip to content

Commit 1f5acae

Browse files
glunardiglunardi
committed
Cherry-pick LPC 2021 Matrix UI component for BBB on clean branch
1 parent 3e497e2 commit 1f5acae

File tree

14 files changed

+695
-26
lines changed

14 files changed

+695
-26
lines changed

‎bigbluebutton-html5/imports/ui/components/app/styles.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -131,6 +131,7 @@
131131

132132
.poll,
133133
.breakoutRoom,
134+
.matrix,
134135
.note,
135136
.captions,
136137
.chat {

‎bigbluebutton-html5/imports/ui/components/layout/context.jsx‎

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,9 @@ const initialState = {
2323
chatSize: {
2424
width: 0,
2525
},
26+
matrixSize: {
27+
width: 0,
28+
},
2629
noteSize: {
2730
width: 0,
2831
},
@@ -118,6 +121,14 @@ const reducer = (state, action) => {
118121
},
119122
};
120123
}
124+
case 'setMatrixSize': {
125+
return {
126+
...state,
127+
matrixSize: {
128+
width: action.value.width,
129+
},
130+
};
131+
}
121132
case 'setNoteSize': {
122133
return {
123134
...state,
@@ -274,20 +285,20 @@ const ContextProvider = (props) => {
274285
);
275286
};
276287

277-
const withProvider = Component => props => (
288+
const withProvider = (Component) => (props) => (
278289
<ContextProvider {...props}>
279290
<Component />
280291
</ContextProvider>
281292
);
282293

283-
const ContextConsumer = Component => props => (
294+
const ContextConsumer = (Component) => (props) => (
284295
<LayoutContext.Consumer>
285-
{contexts => <Component {...props} {...contexts} />}
296+
{(contexts) => <Component {...props} {...contexts} />}
286297
</LayoutContext.Consumer>
287298
);
288299

289-
const withLayoutConsumer = Component => ContextConsumer(Component);
290-
const withLayoutContext = Component => withProvider(withLayoutConsumer(Component));
300+
const withLayoutConsumer = (Component) => ContextConsumer(Component);
301+
const withLayoutContext = (Component) => withProvider(withLayoutConsumer(Component));
291302

292303
export {
293304
withProvider,

‎bigbluebutton-html5/imports/ui/components/layout/layout-manager/component.jsx‎

Lines changed: 90 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@ const CHAT_MIN_WIDTH = 320;
2020
const CHAT_MAX_WIDTH = 400;
2121
const POLL_MIN_WIDTH = 320;
2222
const POLL_MAX_WIDTH = 400;
23+
const MATRIX_MIN_WIDTH = 340;
24+
const MATRIX_MAX_WIDTH = 800;
2325
const NOTE_MIN_WIDTH = 340;
2426
const NOTE_MAX_WIDTH = 800;
2527
const WAITING_MIN_WIDTH = 340;
@@ -106,7 +108,7 @@ class LayoutManagerComponent extends Component {
106108
window.addEventListener('webcamPlacementChange', () => {
107109
this.setLayoutSizes(false, false, true);
108110
});
109-
111+
110112
window.addEventListener('fullscreenchange', () => {
111113
setTimeout(() => this.setLayoutSizes(), 200);
112114
});
@@ -120,7 +122,7 @@ class LayoutManagerComponent extends Component {
120122
const { layoutContextState, screenIsShared } = this.props;
121123
const {
122124
layoutContextState: prevLayoutContextState,
123-
screenIsShared: prevScreenIsShared
125+
screenIsShared: prevScreenIsShared,
124126
} = prevProps;
125127
const {
126128
numUsersVideo,
@@ -191,6 +193,14 @@ class LayoutManagerComponent extends Component {
191193
},
192194
},
193195
);
196+
layoutContextDispatch(
197+
{
198+
type: 'setMatrixSize',
199+
value: {
200+
width: layoutSizes.matrixSize.width,
201+
},
202+
},
203+
);
194204
layoutContextDispatch(
195205
{
196206
type: 'setNoteSize',
@@ -262,6 +272,9 @@ class LayoutManagerComponent extends Component {
262272
pollSize: {
263273
width: layoutSizes.pollSize.width,
264274
},
275+
matrixSize: {
276+
width: layoutSizes.matrixSize.width,
277+
},
265278
noteSize: {
266279
width: layoutSizes.noteSize.width,
267280
},
@@ -306,7 +319,8 @@ class LayoutManagerComponent extends Component {
306319
return;
307320
}
308321

309-
if (!isMobile && ((mediaAreaWidth - presentationWidth) > (mediaAreaHeight - presentationHeight))) {
322+
if (!isMobile && ((mediaAreaWidth - presentationWidth)
323+
> (mediaAreaHeight - presentationHeight))) {
310324
layoutContextDispatch(
311325
{
312326
type: 'setWebcamsPlacement',
@@ -331,6 +345,7 @@ class LayoutManagerComponent extends Component {
331345
userListSize: userListSizeContext,
332346
chatSize: chatSizeContext,
333347
pollSize: pollSizeContext,
348+
matrixSize: matrixSizeContext,
334349
noteSize: noteSizeContext,
335350
captionsSize: captionsSizeContext,
336351
waitingSize: waitingSizeContext,
@@ -342,6 +357,7 @@ class LayoutManagerComponent extends Component {
342357
let storageUserListWidth;
343358
let storageChatWidth;
344359
let storagePollWidth;
360+
let storageMatrixWidth;
345361
let storageNoteWidth;
346362
let storageCaptionsWidth;
347363
let storageWaitingWidth;
@@ -351,6 +367,7 @@ class LayoutManagerComponent extends Component {
351367
storageUserListWidth = storageLData.userListSize?.width;
352368
storageChatWidth = storageLData.chatSize?.width;
353369
storagePollWidth = storageLData.pollSize?.width;
370+
storageMatrixWidth = storageLData.matrixSize?.width;
354371
storageNoteWidth = storageLData.noteSize?.width;
355372
storageCaptionsWidth = storageLData.captionsSize?.width;
356373
storageWaitingWidth = storageLData.waitingSize?.width;
@@ -360,6 +377,7 @@ class LayoutManagerComponent extends Component {
360377
let newUserListSize;
361378
let newChatSize;
362379
let newPollSize;
380+
let newMatrixSize;
363381
let newNoteSize;
364382
let newCaptionsSize;
365383
let newWaitingSize;
@@ -401,6 +419,18 @@ class LayoutManagerComponent extends Component {
401419
};
402420
}
403421

422+
if (panelChanged && matrixSizeContext.width !== 0) {
423+
newMatrixSize = matrixSizeContext;
424+
} else if (!storageMatrixWidth) {
425+
newMatrixSize = {
426+
width: min(max((windowWidth() * 0.2), MATRIX_MIN_WIDTH), MATRIX_MAX_WIDTH),
427+
};
428+
} else {
429+
newMatrixSize = {
430+
width: storageMatrixWidth,
431+
};
432+
}
433+
404434
if (panelChanged && noteSizeContext.width !== 0) {
405435
newNoteSize = noteSizeContext;
406436
} else if (!storageNoteWidth) {
@@ -460,6 +490,9 @@ class LayoutManagerComponent extends Component {
460490
newPollSize = {
461491
width: 0,
462492
};
493+
newMatrixSize = {
494+
width: 0,
495+
};
463496
newNoteSize = {
464497
width: 0,
465498
};
@@ -472,12 +505,36 @@ class LayoutManagerComponent extends Component {
472505
break;
473506
}
474507
case 'poll': {
508+
newChatSize = {
509+
width: 0,
510+
};
511+
newMatrixSize = {
512+
width: 0,
513+
};
514+
newNoteSize = {
515+
width: 0,
516+
};
517+
newBreakoutRoomSize = {
518+
width: 0,
519+
};
520+
newCaptionsSize = {
521+
width: 0,
522+
};
523+
newWaitingSize = {
524+
width: 0,
525+
};
526+
break;
527+
}
528+
case 'matrix': {
475529
newChatSize = {
476530
width: 0,
477531
};
478532
newNoteSize = {
479533
width: 0,
480534
};
535+
newPollSize = {
536+
width: 0,
537+
};
481538
newBreakoutRoomSize = {
482539
width: 0,
483540
};
@@ -496,6 +553,9 @@ class LayoutManagerComponent extends Component {
496553
newPollSize = {
497554
width: 0,
498555
};
556+
newMatrixSize = {
557+
width: 0,
558+
};
499559
newBreakoutRoomSize = {
500560
width: 0,
501561
};
@@ -517,6 +577,9 @@ class LayoutManagerComponent extends Component {
517577
newBreakoutRoomSize = {
518578
width: 0,
519579
};
580+
newMatrixSize = {
581+
width: 0,
582+
};
520583
newNoteSize = {
521584
width: 0,
522585
};
@@ -535,6 +598,9 @@ class LayoutManagerComponent extends Component {
535598
newBreakoutRoomSize = {
536599
width: 0,
537600
};
601+
newMatrixSize = {
602+
width: 0,
603+
};
538604
newNoteSize = {
539605
width: 0,
540606
};
@@ -550,6 +616,9 @@ class LayoutManagerComponent extends Component {
550616
newPollSize = {
551617
width: 0,
552618
};
619+
newMatrixSize = {
620+
width: 0,
621+
};
553622
newNoteSize = {
554623
width: 0,
555624
};
@@ -568,6 +637,9 @@ class LayoutManagerComponent extends Component {
568637
newPollSize = {
569638
width: 0,
570639
};
640+
newMatrixSize = {
641+
width: 0,
642+
};
571643
newNoteSize = {
572644
width: 0,
573645
};
@@ -592,6 +664,9 @@ class LayoutManagerComponent extends Component {
592664
newPollSize = {
593665
width: 0,
594666
};
667+
newMatrixSize = {
668+
width: 0,
669+
};
595670
newNoteSize = {
596671
width: 0,
597672
};
@@ -612,6 +687,7 @@ class LayoutManagerComponent extends Component {
612687
newUserListSize,
613688
newChatSize,
614689
newPollSize,
690+
newMatrixSize,
615691
newNoteSize,
616692
newCaptionsSize,
617693
newWaitingSize,
@@ -742,6 +818,7 @@ class LayoutManagerComponent extends Component {
742818
newUserListSize,
743819
newChatSize,
744820
newPollSize,
821+
newMatrixSize,
745822
newNoteSize,
746823
newCaptionsSize,
747824
newWaitingSize,
@@ -758,6 +835,8 @@ class LayoutManagerComponent extends Component {
758835
secondPanel = newChatSize;
759836
} else if (newPollSize.width > 0) {
760837
secondPanel = newPollSize;
838+
} else if (newMatrixSize.width > 0) {
839+
secondPanel = newMatrixSize;
761840
} else if (newNoteSize.width > 0) {
762841
secondPanel = newNoteSize;
763842
} else if (newCaptionsSize.width > 0) {
@@ -780,7 +859,10 @@ class LayoutManagerComponent extends Component {
780859
left: firstPanel.width + secondPanel.width,
781860
};
782861

783-
const { presentationWidth, presentationHeight } = LayoutManagerComponent.calculatesPresentationSize(
862+
const {
863+
presentationWidth,
864+
presentationHeight,
865+
} = LayoutManagerComponent.calculatesPresentationSize(
784866
mediaAreaWidth, mediaAreaHeight, presentationSlideWidth, presentationSlideHeight,
785867
);
786868

@@ -818,6 +900,7 @@ class LayoutManagerComponent extends Component {
818900
userListSize: newUserListSize,
819901
chatSize: newChatSize,
820902
pollSize: newPollSize,
903+
matrixSize: newMatrixSize,
821904
noteSize: newNoteSize,
822905
captionsSize: newCaptionsSize,
823906
waitingSize: newWaitingSize,
@@ -829,7 +912,7 @@ class LayoutManagerComponent extends Component {
829912
}
830913

831914
render() {
832-
return <Fragment />;
915+
return <></>;
833916
}
834917
}
835918

@@ -841,6 +924,8 @@ export {
841924
CHAT_MAX_WIDTH,
842925
POLL_MIN_WIDTH,
843926
POLL_MAX_WIDTH,
927+
MATRIX_MIN_WIDTH,
928+
MATRIX_MAX_WIDTH,
844929
NOTE_MIN_WIDTH,
845930
NOTE_MAX_WIDTH,
846931
WAITING_MIN_WIDTH,

0 commit comments

Comments
 (0)