video-split: follow up fixes

+ Only load participant's avatar when showed
+ Fix some anchors problems
+ Close popup when adding a new member
+ ParticipantsLayer: make SplitView resizable
+ Better flow

Change-Id: Ied2ac6a64df0ae929effc965d24e08c04b71c288
GitLab: #476

src/mainview/MainView.qml

@@ -385,7 +385,6 @@ Rectangle {
     CallStackView {
         id: callStackView
 
-        anchors.fill: parent
         visible: false
         objectName: "callStackViewObject"
     }

src/mainview/components/CallStackView.qml

@@ -41,8 +41,6 @@ Rectangle {
         OngoingPageStack
     }
 
-    anchors.fill: parent
-
     Shortcut {
         sequence: "Ctrl+D"
         context: Qt.ApplicationShortcut
@@ -150,7 +148,6 @@ Rectangle {
     OngoingCallPage {
         id: ongoingCallPage
 
-        anchors.fill: parent
         property int stackNumber: CallStackView.OngoingPageStack
 
         isAudioOnly: root.isAudioOnly
@@ -161,7 +158,6 @@ Rectangle {
     InitialCallPage {
         id: initialCallPage
 
-        anchors.fill: parent
         property int stackNumber: CallStackView.InitialPageStack
 
         isAudioOnly: root.isAudioOnly

src/mainview/components/ContactPickerItemDelegate.qml

@@ -26,7 +26,13 @@ import net.jami.Constants 1.1
 import "../../commoncomponents"
 
 ItemDelegate {
-    id: contactPickerItemDelegate
+    id: root
+
+    width: ListView.view.width
+    height: Math.max(
+                contactPickerContactName.height + textMetricsContactPickerContactId.height + 10,
+                avatar.height + 10
+            )
 
     property var showPresenceIndicator: false
 
@@ -44,7 +50,7 @@ ItemDelegate {
 
         imageId: UID
 
-        showPresenceIndicator: contactPickerItemDelegate.showPresenceIndicator && Presence
+        showPresenceIndicator: root.showPresenceIndicator && Presence
     }
 
     Rectangle {
@@ -92,7 +98,7 @@ ItemDelegate {
                 font: contactPickerContactId.font
                 elide: Text.ElideMiddle
                 elideWidth: contactPickerContactInfoRect.width
-                text: BestId == Title ? "" : BestId
+                text: !BestId || BestId == Title ? "" : BestId
             }
 
             text: textMetricsContactPickerContactId.elidedText
@@ -105,12 +111,6 @@ ItemDelegate {
 
         color: JamiTheme.backgroundColor
 
-
-        implicitWidth: root.width
-        implicitHeight: Math.max(
-                            contactPickerContactName.height
-                            + textMetricsContactPickerContactId.height + 10,
-                            avatar.height + 10)
         border.width: 0
     }
 

src/mainview/components/ParticipantOverlay.qml

@@ -101,9 +101,16 @@ Item {
             property real size: Math.floor((componentSize + step - 1) / step) * step
             sourceSize: Qt.size(size, size)
             mode: root.isMe ? Avatar.Mode.Account : Avatar.Mode.Contact
-            imageId: root.isMe ? LRCInstance.currentAccountId : root.uri
             showPresenceIndicator: false
             visible: root.videoMuted
+
+            onVisibleChanged: {
+                // Only request avatars when visibility changes (and once)
+                // This avoid to request images for non showed participants
+                if (visible && !imageId) {
+                    imageId = root.isMe ? LRCInstance.currentAccountId : root.uri
+                }
+            }
         }
 
         overlayItems: Rectangle {

src/mainview/components/ParticipantsLayer.qml

@@ -99,8 +99,8 @@ Item {
             id: genericParticipantsRect
 
             SplitView.preferredHeight: (parent.height / 4)
-            SplitView.minimumHeight: parent.height / 4
+            SplitView.minimumHeight: parent.height / 6
-            SplitView.maximumHeight: inLine? parent.height / 4 : parent.height
+            SplitView.maximumHeight: inLine? parent.height / 2 : parent.height
 
             visible: inLine || CallParticipantsModel.conferenceLayout === CallParticipantsModel.GRID
             color: "transparent"
@@ -176,7 +176,13 @@ Item {
                     anchors.fill: parent
 
                     spacing: 1
-                    property int columns: inLine ? commonParticipants.count : Math.max(1, Math.ceil(Math.sqrt(commonParticipants.count)))
+                    property int columns: {
+                        if (inLine)
+                            return commonParticipants.count
+                        var ratio = Math.floor(root.width / root.height)
+                        var sqrt = Math.max(1, Math.ceil(Math.sqrt(commonParticipants.count)))
+                        return Math.max(1, Math.round(sqrt * ratio))
+                    }
                     property int rows: Math.max(1, Math.ceil(commonParticipants.count/columns))
                     property int componentWidth: inLine ? height : Math.floor(genericParticipantsRect.width / commonParticipantsFlow.columns) - 1