Cherry-pick LPC 2021 Matrix UI component for BBB on clean branch · glunardi/bigbluebutton@1f5acae (original) (raw)
`@@ -20,6 +20,8 @@ const CHAT_MIN_WIDTH = 320;
`
20
20
`const CHAT_MAX_WIDTH = 400;
`
21
21
`const POLL_MIN_WIDTH = 320;
`
22
22
`const POLL_MAX_WIDTH = 400;
`
``
23
`+
const MATRIX_MIN_WIDTH = 340;
`
``
24
`+
const MATRIX_MAX_WIDTH = 800;
`
23
25
`const NOTE_MIN_WIDTH = 340;
`
24
26
`const NOTE_MAX_WIDTH = 800;
`
25
27
`const WAITING_MIN_WIDTH = 340;
`
`@@ -106,7 +108,7 @@ class LayoutManagerComponent extends Component {
`
106
108
`window.addEventListener('webcamPlacementChange', () => {
`
107
109
`this.setLayoutSizes(false, false, true);
`
108
110
`});
`
109
``
-
``
111
+
110
112
`window.addEventListener('fullscreenchange', () => {
`
111
113
`setTimeout(() => this.setLayoutSizes(), 200);
`
112
114
`});
`
`@@ -120,7 +122,7 @@ class LayoutManagerComponent extends Component {
`
120
122
`const { layoutContextState, screenIsShared } = this.props;
`
121
123
`const {
`
122
124
`layoutContextState: prevLayoutContextState,
`
123
``
`-
screenIsShared: prevScreenIsShared
`
``
125
`+
screenIsShared: prevScreenIsShared,
`
124
126
`} = prevProps;
`
125
127
`const {
`
126
128
` numUsersVideo,
`
`@@ -191,6 +193,14 @@ class LayoutManagerComponent extends Component {
`
191
193
`},
`
192
194
`},
`
193
195
`);
`
``
196
`+
layoutContextDispatch(
`
``
197
`+
{
`
``
198
`+
type: 'setMatrixSize',
`
``
199
`+
value: {
`
``
200
`+
width: layoutSizes.matrixSize.width,
`
``
201
`+
},
`
``
202
`+
},
`
``
203
`+
);
`
194
204
`layoutContextDispatch(
`
195
205
`{
`
196
206
`type: 'setNoteSize',
`
`@@ -262,6 +272,9 @@ class LayoutManagerComponent extends Component {
`
262
272
`pollSize: {
`
263
273
`width: layoutSizes.pollSize.width,
`
264
274
`},
`
``
275
`+
matrixSize: {
`
``
276
`+
width: layoutSizes.matrixSize.width,
`
``
277
`+
},
`
265
278
`noteSize: {
`
266
279
`width: layoutSizes.noteSize.width,
`
267
280
`},
`
`@@ -306,7 +319,8 @@ class LayoutManagerComponent extends Component {
`
306
319
`return;
`
307
320
`}
`
308
321
``
309
``
`-
if (!isMobile && ((mediaAreaWidth - presentationWidth) > (mediaAreaHeight - presentationHeight))) {
`
``
322
`+
if (!isMobile && ((mediaAreaWidth - presentationWidth)
`
``
323
`+
(mediaAreaHeight - presentationHeight))) {
`
310
324
`layoutContextDispatch(
`
311
325
`{
`
312
326
`type: 'setWebcamsPlacement',
`
`@@ -331,6 +345,7 @@ class LayoutManagerComponent extends Component {
`
331
345
`userListSize: userListSizeContext,
`
332
346
`chatSize: chatSizeContext,
`
333
347
`pollSize: pollSizeContext,
`
``
348
`+
matrixSize: matrixSizeContext,
`
334
349
`noteSize: noteSizeContext,
`
335
350
`captionsSize: captionsSizeContext,
`
336
351
`waitingSize: waitingSizeContext,
`
`@@ -342,6 +357,7 @@ class LayoutManagerComponent extends Component {
`
342
357
`let storageUserListWidth;
`
343
358
`let storageChatWidth;
`
344
359
`let storagePollWidth;
`
``
360
`+
let storageMatrixWidth;
`
345
361
`let storageNoteWidth;
`
346
362
`let storageCaptionsWidth;
`
347
363
`let storageWaitingWidth;
`
`@@ -351,6 +367,7 @@ class LayoutManagerComponent extends Component {
`
351
367
`storageUserListWidth = storageLData.userListSize?.width;
`
352
368
`storageChatWidth = storageLData.chatSize?.width;
`
353
369
`storagePollWidth = storageLData.pollSize?.width;
`
``
370
`+
storageMatrixWidth = storageLData.matrixSize?.width;
`
354
371
`storageNoteWidth = storageLData.noteSize?.width;
`
355
372
`storageCaptionsWidth = storageLData.captionsSize?.width;
`
356
373
`storageWaitingWidth = storageLData.waitingSize?.width;
`
`@@ -360,6 +377,7 @@ class LayoutManagerComponent extends Component {
`
360
377
`let newUserListSize;
`
361
378
`let newChatSize;
`
362
379
`let newPollSize;
`
``
380
`+
let newMatrixSize;
`
363
381
`let newNoteSize;
`
364
382
`let newCaptionsSize;
`
365
383
`let newWaitingSize;
`
`@@ -401,6 +419,18 @@ class LayoutManagerComponent extends Component {
`
401
419
`};
`
402
420
`}
`
403
421
``
``
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
+
404
434
`if (panelChanged && noteSizeContext.width !== 0) {
`
405
435
`newNoteSize = noteSizeContext;
`
406
436
`} else if (!storageNoteWidth) {
`
`@@ -460,6 +490,9 @@ class LayoutManagerComponent extends Component {
`
460
490
`newPollSize = {
`
461
491
`width: 0,
`
462
492
`};
`
``
493
`+
newMatrixSize = {
`
``
494
`+
width: 0,
`
``
495
`+
};
`
463
496
`newNoteSize = {
`
464
497
`width: 0,
`
465
498
`};
`
`@@ -472,12 +505,36 @@ class LayoutManagerComponent extends Component {
`
472
505
`break;
`
473
506
`}
`
474
507
`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': {
`
475
529
`newChatSize = {
`
476
530
`width: 0,
`
477
531
`};
`
478
532
`newNoteSize = {
`
479
533
`width: 0,
`
480
534
`};
`
``
535
`+
newPollSize = {
`
``
536
`+
width: 0,
`
``
537
`+
};
`
481
538
`newBreakoutRoomSize = {
`
482
539
`width: 0,
`
483
540
`};
`
`@@ -496,6 +553,9 @@ class LayoutManagerComponent extends Component {
`
496
553
`newPollSize = {
`
497
554
`width: 0,
`
498
555
`};
`
``
556
`+
newMatrixSize = {
`
``
557
`+
width: 0,
`
``
558
`+
};
`
499
559
`newBreakoutRoomSize = {
`
500
560
`width: 0,
`
501
561
`};
`
`@@ -517,6 +577,9 @@ class LayoutManagerComponent extends Component {
`
517
577
`newBreakoutRoomSize = {
`
518
578
`width: 0,
`
519
579
`};
`
``
580
`+
newMatrixSize = {
`
``
581
`+
width: 0,
`
``
582
`+
};
`
520
583
`newNoteSize = {
`
521
584
`width: 0,
`
522
585
`};
`
`@@ -535,6 +598,9 @@ class LayoutManagerComponent extends Component {
`
535
598
`newBreakoutRoomSize = {
`
536
599
`width: 0,
`
537
600
`};
`
``
601
`+
newMatrixSize = {
`
``
602
`+
width: 0,
`
``
603
`+
};
`
538
604
`newNoteSize = {
`
539
605
`width: 0,
`
540
606
`};
`
`@@ -550,6 +616,9 @@ class LayoutManagerComponent extends Component {
`
550
616
`newPollSize = {
`
551
617
`width: 0,
`
552
618
`};
`
``
619
`+
newMatrixSize = {
`
``
620
`+
width: 0,
`
``
621
`+
};
`
553
622
`newNoteSize = {
`
554
623
`width: 0,
`
555
624
`};
`
`@@ -568,6 +637,9 @@ class LayoutManagerComponent extends Component {
`
568
637
`newPollSize = {
`
569
638
`width: 0,
`
570
639
`};
`
``
640
`+
newMatrixSize = {
`
``
641
`+
width: 0,
`
``
642
`+
};
`
571
643
`newNoteSize = {
`
572
644
`width: 0,
`
573
645
`};
`
`@@ -592,6 +664,9 @@ class LayoutManagerComponent extends Component {
`
592
664
`newPollSize = {
`
593
665
`width: 0,
`
594
666
`};
`
``
667
`+
newMatrixSize = {
`
``
668
`+
width: 0,
`
``
669
`+
};
`
595
670
`newNoteSize = {
`
596
671
`width: 0,
`
597
672
`};
`
`@@ -612,6 +687,7 @@ class LayoutManagerComponent extends Component {
`
612
687
` newUserListSize,
`
613
688
` newChatSize,
`
614
689
` newPollSize,
`
``
690
`+
newMatrixSize,
`
615
691
` newNoteSize,
`
616
692
` newCaptionsSize,
`
617
693
` newWaitingSize,
`
`@@ -742,6 +818,7 @@ class LayoutManagerComponent extends Component {
`
742
818
` newUserListSize,
`
743
819
` newChatSize,
`
744
820
` newPollSize,
`
``
821
`+
newMatrixSize,
`
745
822
` newNoteSize,
`
746
823
` newCaptionsSize,
`
747
824
` newWaitingSize,
`
`@@ -758,6 +835,8 @@ class LayoutManagerComponent extends Component {
`
758
835
`secondPanel = newChatSize;
`
759
836
`} else if (newPollSize.width > 0) {
`
760
837
`secondPanel = newPollSize;
`
``
838
`+
} else if (newMatrixSize.width > 0) {
`
``
839
`+
secondPanel = newMatrixSize;
`
761
840
`} else if (newNoteSize.width > 0) {
`
762
841
`secondPanel = newNoteSize;
`
763
842
`} else if (newCaptionsSize.width > 0) {
`
`@@ -780,7 +859,10 @@ class LayoutManagerComponent extends Component {
`
780
859
`left: firstPanel.width + secondPanel.width,
`
781
860
`};
`
782
861
``
783
``
`-
const { presentationWidth, presentationHeight } = LayoutManagerComponent.calculatesPresentationSize(
`
``
862
`+
const {
`
``
863
`+
presentationWidth,
`
``
864
`+
presentationHeight,
`
``
865
`+
} = LayoutManagerComponent.calculatesPresentationSize(
`
784
866
`mediaAreaWidth, mediaAreaHeight, presentationSlideWidth, presentationSlideHeight,
`
785
867
`);
`
786
868
``
`@@ -818,6 +900,7 @@ class LayoutManagerComponent extends Component {
`
818
900
`userListSize: newUserListSize,
`
819
901
`chatSize: newChatSize,
`
820
902
`pollSize: newPollSize,
`
``
903
`+
matrixSize: newMatrixSize,
`
821
904
`noteSize: newNoteSize,
`
822
905
`captionsSize: newCaptionsSize,
`
823
906
`waitingSize: newWaitingSize,
`
`@@ -829,7 +912,7 @@ class LayoutManagerComponent extends Component {
`
829
912
`}
`
830
913
``
831
914
`render() {
`
832
``
`-
return ;
`
``
915
`+
return <></>;
`
833
916
`}
`
834
917
`}
`
835
918
``
`@@ -841,6 +924,8 @@ export {
`
841
924
`CHAT_MAX_WIDTH,
`
842
925
`POLL_MIN_WIDTH,
`
843
926
`POLL_MAX_WIDTH,
`
``
927
`+
MATRIX_MIN_WIDTH,
`
``
928
`+
MATRIX_MAX_WIDTH,
`
844
929
`NOTE_MIN_WIDTH,
`
845
930
`NOTE_MAX_WIDTH,
`
846
931
`WAITING_MIN_WIDTH,
`