fix z index of videos and click listener to show controls

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

app/src/main/java/com/nextcloud/talk/activities/CallActivity.kt

@@ -739,14 +739,6 @@ class CallActivity : CallBaseActivity() {
 
         binding!!.switchSelfVideoButton.setOnClickListener { switchCamera() }
 
-        // binding!!.composeParticipantGrid.setOnClickListener {
-        //     animateCallControls(true, 0)
-        // }
-
-        // binding!!.composeParticipantGrid.onItemClickListener =
-        //     AdapterView.OnItemClickListener { _: AdapterView<*>?, _: View?, _: Int, _: Long ->
-        //         animateCallControls(true, 0)
-        //     }
         binding!!.lowerHandButton.setOnClickListener { l: View? -> raiseHandViewModel!!.lowerHand() }
         binding!!.pictureInPictureButton.setOnClickListener { enterPipMode() }
     }
@@ -930,6 +922,7 @@ class CallActivity : CallBaseActivity() {
         }
         animateCallControls(true, 0)
         initGrid()
+        binding!!.composeParticipantGrid.z = 0f
     }
 
     @SuppressLint("ClickableViewAccessibility")
@@ -984,7 +977,9 @@ class CallActivity : CallBaseActivity() {
                 ParticipantGrid(
                     participants = participantUiStates.toList(),
                     columns = columns
-                )
+                ) {
+                    animateCallControls(true, 0)
+                }
             }
         }
 

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

@@ -7,6 +7,7 @@
 
 package com.nextcloud.talk.call.components
 
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.fillMaxSize
@@ -19,10 +20,17 @@ import androidx.compose.ui.unit.dp
 import com.nextcloud.talk.call.ParticipantUiState
 
 @Composable
-fun ParticipantGrid(participants: List<ParticipantUiState>, columns: Int = 2, modifier: Modifier = Modifier) {
+fun ParticipantGrid(
+    participants: List<ParticipantUiState>,
+    columns: Int = 2,
+    modifier: Modifier = Modifier,
+    onClick: () -> Unit
+) {
     LazyVerticalGrid(
         columns = GridCells.Fixed(columns),
-        modifier = modifier.fillMaxSize(),
+        modifier = modifier
+            .fillMaxSize()
+            .clickable { onClick() },
         contentPadding = PaddingValues(8.dp),
         verticalArrangement = Arrangement.spacedBy(8.dp),
         horizontalArrangement = Arrangement.spacedBy(8.dp)

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

@@ -13,6 +13,7 @@ import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
@@ -22,6 +23,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.nextcloud.talk.R
 import com.nextcloud.talk.call.ParticipantUiState
@@ -73,108 +75,27 @@ fun ParticipantTile(participant: ParticipantUiState) {
                 .padding(6.dp),
             style = MaterialTheme.typography.bodyMedium
         )
+
+        if (!participant.isConnected) {
+            CircularProgressIndicator(
+                modifier = Modifier.align(Alignment.Center)
+            )
+        }
     }
 }
 
-// @Composable
-// fun ParticipantItem(participant: ParticipantDisplayItem) {
-//     val context = LocalContext.current
-//     val videoTrack = participant.mediaStream?.videoTracks?.firstOrNull()
-//
-//     Box(
-//         modifier = Modifier
-//             .aspectRatio(1f)
-//             .background(Color.Black)
-//             .padding(4.dp)
-//     ) {
-//         // Renderer
-//         participant.surfaceViewRenderer?.let { renderer ->
-//             AndroidView(
-//                 factory = {
-//                     // If not yet initialized
-//                     if (renderer.parent != null) {
-//                         (renderer.parent as? ViewGroup)?.removeView(renderer)
-//                     }
-//
-//                     // if (!renderer.isInitialized) {  // TODO
-//                         renderer.init(participant.rootEglBase.eglBaseContext, null)
-//                         renderer.setMirror(false)
-//                         renderer.setZOrderMediaOverlay(false)
-//                         renderer.setEnableHardwareScaler(false)
-//                         renderer.setScalingType(RendererCommon.ScalingType.SCALE_ASPECT_FIT)
-//                     // }
-//
-//                     // Attach sink
-//                     try {
-//                         videoTrack?.removeSink(renderer)
-//                     } catch (_: Exception) {}
-//                     videoTrack?.addSink(renderer)
-//
-//                     renderer
-//                 },
-//                 modifier = Modifier.fillMaxSize(),
-//                 update = { view ->
-//                     view.visibility =
-//                         if (videoTrack != null && participant.isConnected) View.VISIBLE else View.INVISIBLE
-//                 }
-//             )
-//         }
-//
-//         // Overlay: Nick or Avatar
-//         if (videoTrack == null || !participant.isConnected) {
-//             Column(
-//                 modifier = Modifier
-//                     .fillMaxSize()
-//                     .background(Color.DarkGray)
-//                     .padding(8.dp),
-//                 verticalArrangement = Arrangement.Center,
-//                 horizontalAlignment = Alignment.CenterHorizontally
-//             ) {
-//                 Text(
-//                     text = participant.nick!!,
-//                     color = Color.White,
-//                     fontSize = 16.sp,
-//                     modifier = Modifier.padding(bottom = 8.dp)
-//                 )
-//                 // Replace this with image loader like Coil if needed
-//                 Icon(
-//                     imageVector = Icons.Default.Person,
-//                     contentDescription = null,
-//                     tint = Color.White,
-//                     modifier = Modifier.size(40.dp)
-//                 )
-//             }
-//         }
-//
-//         // Status indicators (audio muted / raised hand)
-//         Row(
-//             modifier = Modifier
-//                 .align(Alignment.TopEnd)
-//                 .padding(4.dp)
-//         ) {
-//             if (!participant.isAudioEnabled) {
-//                 Icon(
-//                     painter = painterResource(id = R.drawable.account_circle_96dp),
-//                     contentDescription = "Mic Off",
-//                     tint = Color.Red,
-//                     modifier = Modifier.size(20.dp)
-//                 )
-//             }
-//             if (participant.raisedHand?.state == true) {
-//                 Icon(
-//                     painter = painterResource(id = R.drawable.ic_hand_back_left),
-//                     contentDescription = "Hand Raised",
-//                     tint = Color.Yellow,
-//                     modifier = Modifier.size(20.dp)
-//                 )
-//             }
-//         }
-//
-//         // Loading spinner
-//         if (!participant.isConnected) {
-//             CircularProgressIndicator(
-//                 modifier = Modifier.align(Alignment.Center)
-//             )
-//         }
-//     }
-// }
+@Preview(showBackground = false)
+@Composable
+fun ParticipantTilePreview() {
+    val participant = ParticipantUiState(
+        sessionKey = "",
+        nick = "testuser",
+        isConnected = true,
+        isAudioEnabled = false,
+        isStreamEnabled = true,
+        raisedHand = true,
+        avatarUrl = "",
+        surfaceViewRenderer = null
+    )
+    ParticipantTile(participant)
+}

app/src/main/res/layout/call_activity.xml

@@ -33,15 +33,10 @@
             android:visibility="visible"
             tools:visibility="visible">
 
-<!--            <GridView-->
-<!--                android:id="@+id/gridview"-->
-<!--                android:layout_width="match_parent"-->
-<!--                android:layout_height="match_parent"-->
-<!--                android:gravity="center"-->
-<!--                android:numColumns="2"-->
-<!--                android:scrollbars="vertical"-->
-<!--                android:stretchMode="columnWidth"-->
-<!--                tools:listitem="@layout/call_item" />-->
+            <androidx.compose.ui.platform.ComposeView
+                android:id="@+id/composeParticipantGrid"
+                android:layout_width="match_parent"
+                android:layout_height="match_parent" />
 
             <FrameLayout
                 android:id="@+id/selfVideoViewWrapper"
@@ -368,9 +363,4 @@
 
     </RelativeLayout>
 
-    <androidx.compose.ui.platform.ComposeView
-        android:id="@+id/composeParticipantGrid"
-        android:layout_width="match_parent"
-        android:layout_height="match_parent" />
-
 </RelativeLayout>