show rounded circle for avatar

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

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

@@ -10,37 +10,56 @@ package com.nextcloud.talk.call.components
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import coil.compose.AsyncImage
 import com.nextcloud.talk.call.ParticipantUiState
 
 @Composable
-fun AvatarWithFallback(participant: ParticipantUiState) {
+fun AvatarWithFallback(participant: ParticipantUiState, modifier: Modifier = Modifier) {
-    if (!participant.avatarUrl.isNullOrEmpty()) {
+    val initials = participant.nick
-        AsyncImage(
+        .split(" ")
-            model = participant.avatarUrl,
+        .mapNotNull { it.firstOrNull()?.uppercase() }
-            contentDescription = "Avatar",
+        .take(2)
-            contentScale = ContentScale.Crop,
+        .joinToString("")
-            modifier = Modifier.fillMaxSize()
+
-        )
+    Box(
-    } else {
+        modifier = modifier
-        Box(
+            .size(150.dp)
-            modifier = Modifier
+            .clip(CircleShape),
-                .fillMaxSize()
+        contentAlignment = Alignment.Center
-                .background(Color.Gray),
+    ) {
-            contentAlignment = Alignment.Center
+        if (!participant.avatarUrl.isNullOrEmpty()) {
-        ) {
+            AsyncImage(
-            Text(
+                model = participant.avatarUrl,
-                text = participant.nick.firstOrNull()?.uppercase() ?: "?",
+                contentDescription = "Avatar",
-                color = Color.White,
+                contentScale = ContentScale.Crop,
-                fontSize = 40.sp
+                modifier = Modifier
+                    .fillMaxSize()
+                    .clip(CircleShape)
             )
+        } else {
+            Box(
+                modifier = Modifier
+                    .fillMaxSize()
+                    .background(Color.White, CircleShape),
+                contentAlignment = Alignment.Center
+            ) {
+                Text(
+                    text = if (initials.isNotEmpty()) initials else "?",
+                    color = Color.Black,
+                    fontSize = 24.sp
+                )
+            }
         }
     }
 }

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

@@ -49,7 +49,7 @@ fun ParticipantGrid(
         } else {
             when (participants.size) {
                 1 -> 1
-                2 -> 2
+                2, 4 -> 2
                 else -> 3
             }
         }
@@ -238,7 +238,7 @@ fun getTestParticipants(numberOfParticipants: Int): List<ParticipantUiState> {
     for (i: Int in 1..numberOfParticipants) {
         val participant = ParticipantUiState(
             sessionKey = i.toString(),
-            nick = "testuser$i",
+            nick = "testuser$i Test",
             isConnected = true,
             isAudioEnabled = if (i == 3) true else false,
             isStreamEnabled = true,

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

@@ -11,6 +11,7 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 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.layout.size
 import androidx.compose.foundation.shape.RoundedCornerShape
@@ -46,7 +47,10 @@ fun ParticipantTile(
         if (participant.isStreamEnabled && participant.mediaStream != null) {
             WebRTCVideoView(participant, eglBase)
         } else {
-            AvatarWithFallback(participant)
+            AvatarWithFallback(
+                participant = participant,
+                modifier = Modifier.align(Alignment.Center)
+            )
         }
 
         if (participant.raisedHand) {
@@ -96,7 +100,7 @@ fun ParticipantTile(
 fun ParticipantTilePreview() {
     val participant = ParticipantUiState(
         sessionKey = "",
-        nick = "testuser",
+        nick = "testuser one",
         isConnected = true,
         isAudioEnabled = false,
         isStreamEnabled = true,
@@ -107,7 +111,8 @@ fun ParticipantTilePreview() {
     ParticipantTile(
         participant = participant,
         modifier = Modifier
-            .fillMaxWidth(),
+            .fillMaxWidth()
+            .height(300.dp),
         eglBase = null
     )
 }