From 91b0e97589b79fe9a00b838139fba1f755f029a3 Mon Sep 17 00:00:00 2001 From: Marcel Hibbe Date: Tue, 6 May 2025 23:50:06 +0200 Subject: [PATCH] show rounded circle for avatar Signed-off-by: Marcel Hibbe --- .../call/components/AvatarWithFallback.kt | 57 ++++++++++++------- .../talk/call/components/ParticipantGrid.kt | 4 +- .../talk/call/components/ParticipantTile.kt | 11 +++- 3 files changed, 48 insertions(+), 24 deletions(-) diff --git a/app/src/main/java/com/nextcloud/talk/call/components/AvatarWithFallback.kt b/app/src/main/java/com/nextcloud/talk/call/components/AvatarWithFallback.kt index b39c279cf..0763df116 100644 --- a/app/src/main/java/com/nextcloud/talk/call/components/AvatarWithFallback.kt +++ b/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) { - 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 + ) + } } } } diff --git a/app/src/main/java/com/nextcloud/talk/call/components/ParticipantGrid.kt b/app/src/main/java/com/nextcloud/talk/call/components/ParticipantGrid.kt index 421bbe6c1..13ea916bb 100644 --- a/app/src/main/java/com/nextcloud/talk/call/components/ParticipantGrid.kt +++ b/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 { 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, diff --git a/app/src/main/java/com/nextcloud/talk/call/components/ParticipantTile.kt b/app/src/main/java/com/nextcloud/talk/call/components/ParticipantTile.kt index 480ce530b..a22e24502 100644 --- a/app/src/main/java/com/nextcloud/talk/call/components/ParticipantTile.kt +++ b/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 ) }