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,

`