simplify ParticipantTile

Signed-off-by: Marcel Hibbe <[email protected]>

Author: mahibi

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

@@ -8,8 +8,10 @@
 package com.nextcloud.talk.call.components
 
 import android.annotation.SuppressLint
+import androidx.annotation.DrawableRes
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.BoxWithConstraints
 import androidx.compose.foundation.layout.Row
@@ -54,12 +56,12 @@ fun ParticipantTile(
     isVoiceOnlyCall: Boolean,
     onScreenShareIconClick: ((String?) -> Unit?)?
 ) {
-    val colorInt = ColorGenerator.usernameToColor(participantUiState.nick!!)
+    val color = Color(ColorGenerator.usernameToColor(participantUiState.nick ?: ""))
 
     BoxWithConstraints(
         modifier = modifier
             .clip(RoundedCornerShape(12.dp))
-            .background(Color(colorInt))
+            .background(color)
     ) {
         val avatarSize = min(maxWidth, maxHeight) * AVATAR_SIZE_FACTOR
 
@@ -80,73 +82,77 @@ fun ParticipantTile(
                 .padding(8.dp)
         ) {
             Row(
-                modifier = Modifier
-                    .align(Alignment.BottomEnd)
+                modifier = Modifier.align(Alignment.BottomEnd),
+                horizontalArrangement = Arrangement.spacedBy(4.dp)
             ) {
                 if (participantUiState.isScreenStreamEnabled) {
-                    Icon(
-                        painter = painterResource(id = R.drawable.outline_monitor_24),
-                        contentDescription = "Mic Off",
-                        modifier = Modifier
-                            .padding(6.dp)
-                            .size(24.dp)
-                            .clickable {
-                                onScreenShareIconClick?.invoke(participantUiState.sessionKey)
-                            },
-                        tint = Color.White
+                    OverlayIcon(
+                        iconRes = R.drawable.outline_monitor_24,
+                        description = "Screen Share",
+                        onClick = { onScreenShareIconClick?.invoke(participantUiState.sessionKey) }
                     )
                 }
 
                 if (!participantUiState.isAudioEnabled) {
-                    Icon(
-                        painter = painterResource(id = R.drawable.ic_mic_off_white_24px),
-                        contentDescription = "Mic Off",
-                        modifier = Modifier
-                            .padding(6.dp)
-                            .size(24.dp),
-                        tint = Color.White
+                    OverlayIcon(
+                        iconRes = R.drawable.ic_mic_off_white_24px,
+                        description = "Mic Off"
                     )
                 }
             }
 
             Row(
-                modifier = Modifier
-                    .align(Alignment.BottomStart)
+                modifier = Modifier.align(Alignment.BottomStart),
+                horizontalArrangement = Arrangement.spacedBy(4.dp),
+                verticalAlignment = Alignment.Bottom
             ) {
                 if (participantUiState.raisedHand) {
-                    Icon(
-                        painter = painterResource(id = R.drawable.ic_hand_back_left),
-                        contentDescription = "Raised Hand",
-                        modifier = Modifier
-                            .padding(6.dp)
-                            .size(24.dp),
-                        tint = Color.White
+                    OverlayIcon(
+                        iconRes = R.drawable.ic_hand_back_left,
+                        description = "Raised Hand"
                     )
                 }
 
                 Text(
-                    text = participantUiState.nick,
+                    text = participantUiState.nick ?: "",
                     color = Color.White,
                     style = MaterialTheme.typography.bodyMedium.copy(
                         shadow = Shadow(
                             color = Color.Black,
                             offset = Offset(NICK_OFFSET, NICK_OFFSET),
                             blurRadius = NICK_BLUR_RADIUS
                         )
-                    )
+                    ),
+                    modifier = Modifier.padding(bottom = 2.dp)
                 )
             }
 
-
             if (!participantUiState.isConnected) {
-                CircularProgressIndicator(
-                    modifier = Modifier.align(Alignment.Center)
-                )
+                CircularProgressIndicator(modifier = Modifier.align(Alignment.Center))
             }
         }
     }
 }
 
+@Composable
+private fun OverlayIcon(
+    @DrawableRes iconRes: Int,
+    description: String,
+    onClick: (() -> Unit)? = null
+) {
+    val clickableModifier = onClick?.let { Modifier.clickable { it() } } ?: Modifier
+
+    Icon(
+        painter = painterResource(id = iconRes),
+        contentDescription = description,
+        modifier = Modifier
+            .padding(6.dp)
+            .size(24.dp)
+            .then(clickableModifier),
+        tint = Color.White
+    )
+}
+
 @Preview(showBackground = false)
 @Composable
 fun ParticipantTilePreview() {