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,83 +38,84 @@ 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)
             )
         }
 
-        if (participantUiState.raisedHand) {
+        Box(
-            Icon(
-                painter = painterResource(id = R.drawable.ic_hand_back_left),
-                contentDescription = "Raised Hand",
-                modifier = Modifier
-                    .align(Alignment.TopEnd)
-                    .padding(6.dp)
-                    .size(24.dp),
-                tint = Color.White
-            )
-        }
-
-        if (!participantUiState.isAudioEnabled) {
-            Icon(
-                painter = painterResource(id = R.drawable.ic_mic_off_white_24px),
-                contentDescription = "Mic Off",
-                modifier = Modifier
-                    .align(Alignment.BottomEnd)
-                    .padding(6.dp)
-                    .size(24.dp),
-                tint = Color.White
-            )
-        }
-
-        Text(
-            text = participantUiState.nick,
-            color = Color.White,
             modifier = Modifier
-                .align(Alignment.BottomStart)
+                .fillMaxSize()
-                .padding(10.dp),
+                .padding(8.dp)
-            style = MaterialTheme.typography.bodyMedium.copy(
+        ) {
-                shadow = Shadow(
+            if (participantUiState.raisedHand) {
-                    color = Color.Black,
+                Icon(
-                    offset = Offset(NICK_OFFSET, NICK_OFFSET),
+                    painter = painterResource(id = R.drawable.ic_hand_back_left),
-                    blurRadius = NICK_BLUR_RADIUS
+                    contentDescription = "Raised Hand",
+                    modifier = Modifier
+                        .align(Alignment.TopEnd)
+                        .padding(6.dp)
+                        .size(24.dp),
+                    tint = Color.White
+                )
+            }
+
+            if (!participantUiState.isAudioEnabled) {
+                Icon(
+                    painter = painterResource(id = R.drawable.ic_mic_off_white_24px),
+                    contentDescription = "Mic Off",
+                    modifier = Modifier
+                        .align(Alignment.BottomEnd)
+                        .padding(6.dp)
+                        .size(24.dp),
+                    tint = Color.White
+                )
+            }
+
+            Text(
+                text = participantUiState.nick,
+                color = Color.White,
+                modifier = Modifier
+                    .align(Alignment.BottomStart),
+                style = MaterialTheme.typography.bodyMedium.copy(
+                    shadow = Shadow(
+                        color = Color.Black,
+                        offset = Offset(NICK_OFFSET, NICK_OFFSET),
+                        blurRadius = NICK_BLUR_RADIUS
+                    )
                 )
             )
-        )
 
-        if (!participantUiState.isConnected) {
+            if (!participantUiState.isConnected) {
-            CircularProgressIndicator(
+                CircularProgressIndicator(
-                modifier = Modifier.align(Alignment.Center)
+                    modifier = Modifier.align(Alignment.Center)
-            )
+                )
+            }
         }
     }
 }
@@ -135,7 +139,6 @@ fun ParticipantTilePreview() {
             .fillMaxWidth()
             .height(300.dp),
         eglBase = null,
-        isInPipMode = false,
         isVoiceOnlyCall = false
     )
 }