From 31433f8ed991bbb0103b17f23f9d70a881fe9d0d Mon Sep 17 00:00:00 2001 From: Marcel Hibbe Date: Tue, 13 May 2025 17:15:58 +0200 Subject: [PATCH] adapt avatar size to box size ..by using a BoxWithConstraints Signed-off-by: Marcel Hibbe --- .../talk/call/components/ParticipantGrid.kt | 5 +- .../talk/call/components/ParticipantTile.kt | 101 +++++++++--------- 2 files changed, 54 insertions(+), 52 deletions(-) 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 b812b5941..724b0fad7 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 @@ -99,7 +99,6 @@ fun ParticipantGrid( .height(itemHeight) .fillMaxWidth(), eglBase = eglBase, - isInPipMode = isInPipMode, isVoiceOnlyCall = isVoiceOnlyCall ) } @@ -278,9 +277,9 @@ fun getTestParticipants(numberOfParticipants: Int): List { 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 = "", 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 049126025..c15edf292 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 @@ -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) { - 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, + Box( modifier = Modifier - .align(Alignment.BottomStart) - .padding(10.dp), - style = MaterialTheme.typography.bodyMedium.copy( - shadow = Shadow( - color = Color.Black, - offset = Offset(NICK_OFFSET, NICK_OFFSET), - blurRadius = NICK_BLUR_RADIUS + .fillMaxSize() + .padding(8.dp) + ) { + if (participantUiState.raisedHand) { + 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), + style = MaterialTheme.typography.bodyMedium.copy( + shadow = Shadow( + color = Color.Black, + offset = Offset(NICK_OFFSET, NICK_OFFSET), + blurRadius = NICK_BLUR_RADIUS + ) ) ) - ) - if (!participantUiState.isConnected) { - CircularProgressIndicator( - modifier = Modifier.align(Alignment.Center) - ) + if (!participantUiState.isConnected) { + CircularProgressIndicator( + modifier = Modifier.align(Alignment.Center) + ) + } } } } @@ -135,7 +139,6 @@ fun ParticipantTilePreview() { .fillMaxWidth() .height(300.dp), eglBase = null, - isInPipMode = false, isVoiceOnlyCall = false ) }