From 44f417a0f26dd4adfff3445994ae11d358d3f0e9 Mon Sep 17 00:00:00 2001
From: Pierre HUBERT <pierre.git@communiquons.org>
Date: Sat, 9 May 2020 16:06:24 +0200
Subject: [PATCH] Improve video appearance

---
 lib/ui/screens/call_screen.dart | 69 ++++++++++++++++++++++-----------
 1 file changed, 46 insertions(+), 23 deletions(-)

diff --git a/lib/ui/screens/call_screen.dart b/lib/ui/screens/call_screen.dart
index c794bf9..0fb17fc 100644
--- a/lib/ui/screens/call_screen.dart
+++ b/lib/ui/screens/call_screen.dart
@@ -1,4 +1,5 @@
 import 'dart:async';
+import 'dart:math';
 
 import 'package:comunic/helpers/calls_helper.dart';
 import 'package:comunic/helpers/conversations_helper.dart';
@@ -478,7 +479,7 @@ class _CallScreenState extends SafeState<CallScreen> {
     return Column(
       children: <Widget>[
         _canHideMenuBar ? Container() : _buildMembersArea(),
-        _buildVideosArea()
+        Expanded(child: LayoutBuilder(builder: _buildVideosArea))
       ],
     );
   }
@@ -503,34 +504,56 @@ class _CallScreenState extends SafeState<CallScreen> {
   }
 
   /// Videos area
-  Widget _buildVideosArea() {
-    return Expanded(
-      child: Stack(
-        fit: StackFit.expand,
-        children: [
-          // Remove peers videos
-          Column(
-            children: _membersList.readyPeers
-                .where(
-                    (f) => f.hasVideoStream && _renderers.containsKey(f.userID))
-                .map((f) => _buildMemberVideo(f.userID))
-                .toList(),
-          ),
+  Widget _buildVideosArea(BuildContext context, BoxConstraints constraints) {
+    final availableVideos = _membersList.readyPeers
+        .where((f) => f.hasVideoStream && _renderers.containsKey(f.userID))
+        .toList();
 
-          // Local peer video
-          isStreamingVideo && _isLocalStreamVisible
-              ? _buildLocalVideo()
-              : Container(),
+    final rows = List<Row>();
 
-          // Buttons bar
-          _canHideMenuBar ? Container() : _buildFooterArea()
-        ],
-      ),
+    var numberRows = sqrt(availableVideos.length).ceil();
+    var numberCols = numberRows;
+
+    if (availableVideos.length == 2) numberRows = 1;
+
+    final videoWidth = constraints.maxWidth / numberCols;
+    final videoHeight = constraints.maxHeight / numberRows;
+
+    for (int i = 0; i < numberRows; i++) {
+      rows.add(Row(
+        children: availableVideos
+            .getRange(i * numberRows,
+                min(availableVideos.length, i * numberRows + numberCols))
+            .map((f) => Container(
+                  width: videoWidth,
+                  height: videoHeight,
+                  child: _buildMemberVideo(f.userID),
+                ))
+            .toList(),
+      ));
+    }
+
+    return Stack(
+      fit: StackFit.expand,
+      children: [
+        // Remove peers videos
+        Column(
+          children: rows,
+        ),
+
+        // Local peer video
+        isStreamingVideo && _isLocalStreamVisible
+            ? _buildLocalVideo()
+            : Container(),
+
+        // Buttons bar
+        _canHideMenuBar ? Container() : _buildFooterArea()
+      ],
     );
   }
 
   Widget _buildMemberVideo(int peerID) {
-    return Expanded(child: RTCVideoView(_renderers[peerID]));
+    return RTCVideoView(_renderers[peerID]);
   }
 
   Widget _buildLocalVideo() {