show rounded circle for avatar

Signed-off-by: Marcel Hibbe <dev@mhibbe.de>
This commit is contained in:
Marcel Hibbe 2025-05-06 23:50:06 +02:00
parent 15d7c8371c
commit 91b0e97589
No known key found for this signature in database
GPG Key ID: C793F8B59F43CE7B
3 changed files with 48 additions and 24 deletions

View File

@ -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) {
if (!participant.avatarUrl.isNullOrEmpty()) {
AsyncImage(
model = participant.avatarUrl,
contentDescription = "Avatar",
contentScale = ContentScale.Crop,
modifier = Modifier.fillMaxSize()
)
} else {
Box(
modifier = Modifier
.fillMaxSize()
.background(Color.Gray),
contentAlignment = Alignment.Center
) {
Text(
text = participant.nick.firstOrNull()?.uppercase() ?: "?",
color = Color.White,
fontSize = 40.sp
fun AvatarWithFallback(participant: ParticipantUiState, modifier: Modifier = Modifier) {
val initials = participant.nick
.split(" ")
.mapNotNull { it.firstOrNull()?.uppercase() }
.take(2)
.joinToString("")
Box(
modifier = modifier
.size(150.dp)
.clip(CircleShape),
contentAlignment = Alignment.Center
) {
if (!participant.avatarUrl.isNullOrEmpty()) {
AsyncImage(
model = participant.avatarUrl,
contentDescription = "Avatar",
contentScale = ContentScale.Crop,
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
)
}
}
}
}

View File

@ -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,

View File

@ -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
)
}