Merge pull request #5008 from nextcloud/simplifyCallGridLayoutForVoiceOnly

simplify call grid design logic for voice only calls

Author: rapterjet2004

app/src/main/java/com/nextcloud/talk/activities/CallActivity.kt

@@ -947,8 +947,7 @@ class CallActivity : CallBaseActivity() {
                 ParticipantGrid(
                     participantUiStates = participantUiStates,
                     eglBase = rootEglBase!!,
-                    isVoiceOnlyCall = isVoiceOnlyCall,
-                    isInPipMode = isInPipMode
+                    isVoiceOnlyCall = isVoiceOnlyCall
                 ) {
                     animateCallControls(true, 0)
                 }

app/src/main/java/com/nextcloud/talk/call/components/ParticipantGrid.kt

@@ -12,11 +12,11 @@ package com.nextcloud.talk.call.components
 import android.content.res.Configuration
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.BoxWithConstraints
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.grid.GridCells
 import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
 import androidx.compose.foundation.lazy.grid.items
@@ -36,71 +36,66 @@ fun ParticipantGrid(
     eglBase: EglBase?,
     participantUiStates: List<ParticipantUiState>,
     isVoiceOnlyCall: Boolean,
-    isInPipMode: Boolean,
     onClick: () -> Unit
 ) {
     val configuration = LocalConfiguration.current
     val isPortrait = configuration.orientation == Configuration.ORIENTATION_PORTRAIT
 
     val minItemHeight = 100.dp
 
-    val columns =
-        if (isPortrait) {
-            when (participantUiStates.size) {
-                1, 2, 3 -> 1
-                else -> 2
-            }
-        } else {
-            when (participantUiStates.size) {
-                1 -> 1
-                2, 4 -> 2
-                else -> 3
-            }
-        }
-
-    val rows = ceil(participantUiStates.size / columns.toFloat()).toInt()
+    if (participantUiStates.isEmpty()) return
 
-    val heightForNonGridComponents = if (isVoiceOnlyCall && !isInPipMode) {
-        // this is a workaround for now. It should ~summarize the height of callInfosLinearLayout and callControls
-        // Once everything is migrated to jetpack, this workaround should be obsolete or solved in a better way
-        240.dp
+    val columns = if (isPortrait) {
+        when (participantUiStates.size) {
+            1, 2, 3 -> 1
+            else -> 2
+        }
     } else {
-        0.dp
-    }
+        when (participantUiStates.size) {
+            1 -> 1
+            2, 4 -> 2
+            else -> 3
+        }
+    }.coerceAtLeast(1) // Prevent 0
+
+    val rows = ceil(participantUiStates.size / columns.toFloat()).toInt().coerceAtLeast(1)
 
-    val gridHeight = LocalConfiguration.current.screenHeightDp.dp - heightForNonGridComponents
     val itemSpacing = 8.dp
     val edgePadding = 8.dp
-
     val totalVerticalSpacing = itemSpacing * (rows - 1)
     val totalVerticalPadding = edgePadding * 2
-    val availableHeight = gridHeight - totalVerticalSpacing - totalVerticalPadding
-
-    val rawItemHeight = availableHeight / rows
-    val itemHeight = maxOf(rawItemHeight, minItemHeight)
 
-    LazyVerticalGrid(
-        columns = GridCells.Fixed(columns),
-        modifier = Modifier
+    BoxWithConstraints(
+        modifier = modifier
             .fillMaxSize()
-            .padding(horizontal = edgePadding)
-            .clickable { onClick() },
-        verticalArrangement = Arrangement.spacedBy(itemSpacing),
-        horizontalArrangement = Arrangement.spacedBy(itemSpacing),
-        contentPadding = PaddingValues(vertical = edgePadding)
+            .clickable { onClick() }
     ) {
-        items(
-            participantUiStates,
-            key = { it.sessionKey }
-        ) { participant ->
-            ParticipantTile(
-                participantUiState = participant,
-                modifier = Modifier
-                    .height(itemHeight)
-                    .fillMaxWidth(),
-                eglBase = eglBase,
-                isVoiceOnlyCall = isVoiceOnlyCall
-            )
+        val availableHeight = maxHeight
+
+        val gridAvailableHeight = availableHeight - totalVerticalSpacing - totalVerticalPadding
+        val rawItemHeight = gridAvailableHeight / rows
+        val itemHeight = maxOf(rawItemHeight, minItemHeight)
+
+        LazyVerticalGrid(
+            columns = GridCells.Fixed(columns),
+            modifier = Modifier.fillMaxSize(),
+            verticalArrangement = Arrangement.spacedBy(itemSpacing),
+            horizontalArrangement = Arrangement.spacedBy(itemSpacing),
+            contentPadding = PaddingValues(vertical = edgePadding, horizontal = edgePadding)
+        ) {
+            items(
+                participantUiStates,
+                key = { it.sessionKey }
+            ) { participant ->
+                ParticipantTile(
+                    participantUiState = participant,
+                    modifier = Modifier
+                        .height(itemHeight)
+                        .fillMaxWidth(),
+                    eglBase = eglBase,
+                    isVoiceOnlyCall = isVoiceOnlyCall
+                )
+            }
         }
     }
 }
@@ -111,8 +106,7 @@ fun ParticipantGridPreview() {
     ParticipantGrid(
         participantUiStates = getTestParticipants(1),
         eglBase = null,
-        isVoiceOnlyCall = false,
-        isInPipMode = false
+        isVoiceOnlyCall = false
     ) {}
 }
 
@@ -122,8 +116,7 @@ fun TwoParticipants() {
     ParticipantGrid(
         participantUiStates = getTestParticipants(2),
         eglBase = null,
-        isVoiceOnlyCall = false,
-        isInPipMode = false
+        isVoiceOnlyCall = false
     ) {}
 }
 
@@ -133,8 +126,7 @@ fun ThreeParticipants() {
     ParticipantGrid(
         participantUiStates = getTestParticipants(3),
         eglBase = null,
-        isVoiceOnlyCall = false,
-        isInPipMode = false
+        isVoiceOnlyCall = false
     ) {}
 }
 
@@ -144,8 +136,7 @@ fun FourParticipants() {
     ParticipantGrid(
         participantUiStates = getTestParticipants(4),
         eglBase = null,
-        isVoiceOnlyCall = false,
-        isInPipMode = false
+        isVoiceOnlyCall = false
     ) {}
 }
 
@@ -155,8 +146,7 @@ fun FiveParticipants() {
     ParticipantGrid(
         participantUiStates = getTestParticipants(5),
         eglBase = null,
-        isVoiceOnlyCall = false,
-        isInPipMode = false
+        isVoiceOnlyCall = false
     ) {}
 }
 
@@ -166,8 +156,7 @@ fun SevenParticipants() {
     ParticipantGrid(
         participantUiStates = getTestParticipants(7),
         eglBase = null,
-        isVoiceOnlyCall = false,
-        isInPipMode = false
+        isVoiceOnlyCall = false
     ) {}
 }
 
@@ -177,8 +166,7 @@ fun FiftyParticipants() {
     ParticipantGrid(
         participantUiStates = getTestParticipants(50),
         eglBase = null,
-        isVoiceOnlyCall = false,
-        isInPipMode = false
+        isVoiceOnlyCall = false
     ) {}
 }
 
@@ -192,8 +180,7 @@ fun OneParticipantLandscape() {
     ParticipantGrid(
         participantUiStates = getTestParticipants(1),
         eglBase = null,
-        isVoiceOnlyCall = false,
-        isInPipMode = false
+        isVoiceOnlyCall = false
     ) {}
 }
 
@@ -207,8 +194,7 @@ fun TwoParticipantsLandscape() {
     ParticipantGrid(
         participantUiStates = getTestParticipants(2),
         eglBase = null,
-        isVoiceOnlyCall = false,
-        isInPipMode = false
+        isVoiceOnlyCall = false
     ) {}
 }
 
@@ -222,8 +208,7 @@ fun ThreeParticipantsLandscape() {
     ParticipantGrid(
         participantUiStates = getTestParticipants(3),
         eglBase = null,
-        isVoiceOnlyCall = false,
-        isInPipMode = false
+        isVoiceOnlyCall = false
     ) {}
 }
 
@@ -237,8 +222,7 @@ fun FourParticipantsLandscape() {
     ParticipantGrid(
         participantUiStates = getTestParticipants(4),
         eglBase = null,
-        isVoiceOnlyCall = false,
-        isInPipMode = false
+        isVoiceOnlyCall = false
     ) {}
 }
 
@@ -252,8 +236,7 @@ fun SevenParticipantsLandscape() {
     ParticipantGrid(
         participantUiStates = getTestParticipants(7),
         eglBase = null,
-        isVoiceOnlyCall = false,
-        isInPipMode = false
+        isVoiceOnlyCall = false
     ) {}
 }
 
@@ -267,8 +250,7 @@ fun FiftyParticipantsLandscape() {
     ParticipantGrid(
         participantUiStates = getTestParticipants(50),
         eglBase = null,
-        isVoiceOnlyCall = false,
-        isInPipMode = false
+        isVoiceOnlyCall = false
     ) {}
 }