adapt avatar size to box size

..by using a BoxWithConstraints

Signed-off-by: Marcel Hibbe <dev@mhibbe.de>

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

@@ -99,7 +99,6 @@ fun ParticipantGrid(
                     .height(itemHeight)
                     .fillMaxWidth(),
                 eglBase = eglBase,
-                isInPipMode = isInPipMode,
                 isVoiceOnlyCall = isVoiceOnlyCall
             )
         }
@@ -278,9 +277,9 @@ fun getTestParticipants(numberOfParticipants: Int): List<ParticipantUiState> {
     for (i: Int in 1..numberOfParticipants) {
         val participant = ParticipantUiState(
             sessionKey = i.toString(),
-            nick = "testuser$i Test",
+            nick = "test$i user",
             isConnected = true,
-            isAudioEnabled = true,
+            isAudioEnabled = false,
             isStreamEnabled = true,
             raisedHand = true,
             avatarUrl = "",

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

@@ -9,6 +9,8 @@ package com.nextcloud.talk.call.components
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxWithConstraints
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
@@ -28,6 +30,7 @@ import androidx.compose.ui.graphics.Shadow
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.min
 import com.nextcloud.talk.R
 import com.nextcloud.talk.adapters.ParticipantUiState
 import com.nextcloud.talk.utils.ColorGenerator
@@ -35,40 +38,41 @@ import org.webrtc.EglBase
 
 const val NICK_OFFSET = 4f
 const val NICK_BLUR_RADIUS = 4f
+const val AVATAR_SIZE_FACTOR = 0.6f
 
 @Suppress("Detekt.LongMethod")
 @Composable
 fun ParticipantTile(
     participantUiState: ParticipantUiState,
     eglBase: EglBase?,
-    isInPipMode: Boolean,
     modifier: Modifier = Modifier,
     isVoiceOnlyCall: Boolean
 ) {
     val colorInt = ColorGenerator.shared.usernameToColor(participantUiState.nick)
 
-    Box(
+    BoxWithConstraints(
         modifier = modifier
             .clip(RoundedCornerShape(12.dp))
             .background(Color(colorInt))
     ) {
+        val avatarSize = min(maxWidth, maxHeight) * AVATAR_SIZE_FACTOR
+
         if (!isVoiceOnlyCall && participantUiState.isStreamEnabled && participantUiState.mediaStream != null) {
             WebRTCVideoView(participantUiState, eglBase)
         } else {
-            val avatarSize = if (isInPipMode) {
-                100.dp
-            } else {
-                150.dp
-            }
-
             AvatarWithFallback(
                 participant = participantUiState,
                 modifier = Modifier
-                    .align(Alignment.Center)
                     .size(avatarSize)
+                    .align(Alignment.Center)
             )
         }
 
+        Box(
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(8.dp)
+        ) {
             if (participantUiState.raisedHand) {
                 Icon(
                     painter = painterResource(id = R.drawable.ic_hand_back_left),
@@ -97,8 +101,7 @@ fun ParticipantTile(
                 text = participantUiState.nick,
                 color = Color.White,
                 modifier = Modifier
-                .align(Alignment.BottomStart)
+                    .align(Alignment.BottomStart),
-                .padding(10.dp),
                 style = MaterialTheme.typography.bodyMedium.copy(
                     shadow = Shadow(
                         color = Color.Black,
@@ -114,6 +117,7 @@ fun ParticipantTile(
                 )
             }
         }
+    }
 }
 
 @Preview(showBackground = false)
@@ -135,7 +139,6 @@ fun ParticipantTilePreview() {
             .fillMaxWidth()
             .height(300.dp),
         eglBase = null,
-        isInPipMode = false,
         isVoiceOnlyCall = false
     )
 }