migrate call started banner to compose (+remove caller name)

As we only rely on hasCall now, for simplicity the chip with the caller was removed.
It can be reimplemented in the future, but as the deriving from chat messages was quite buggy, we should keep it simple for now.

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

Author: mahibi

app/src/main/java/com/nextcloud/talk/chat/MessageInputFragment.kt

@@ -35,8 +35,8 @@ import android.widget.LinearLayout
 import android.widget.PopupMenu
 import android.widget.RelativeLayout
 import android.widget.SeekBar
-import androidx.appcompat.content.res.AppCompatResources
 import androidx.appcompat.view.ContextThemeWrapper
+import androidx.compose.material3.MaterialTheme
 import androidx.core.graphics.drawable.toDrawable
 import androidx.core.view.isVisible
 import androidx.core.widget.doAfterTextChanged
@@ -67,6 +67,7 @@ import com.nextcloud.talk.models.json.chat.ChatUtils
 import com.nextcloud.talk.models.json.mention.Mention
 import com.nextcloud.talk.models.json.signaling.NCSignalingMessage
 import com.nextcloud.talk.presenters.MentionAutocompletePresenter
+import com.nextcloud.talk.ui.CallStartedBanner
 import com.nextcloud.talk.ui.MicInputCloud
 import com.nextcloud.talk.ui.dialog.AttachmentDialog
 import com.nextcloud.talk.ui.theme.ViewThemeUtils
@@ -119,7 +120,6 @@ class MessageInputFragment : Fragment() {
     private var mentionAutocomplete: Autocomplete<*>? = null
     private var xcounter = 0f
     private var ycounter = 0f
-    private var collapsed = false
     private var hasScheduledMessages = false
     private lateinit var spreedCapabilities: SpreedCapability
     private var hasSharedText = false
@@ -285,9 +285,19 @@ class MessageInputFragment : Fragment() {
                 }.collect()
         }
 
+        binding.fragmentCallStarted.setContent {
+            MaterialTheme(colorScheme = viewThemeUtils.getColorScheme(requireContext())) {
+                CallStartedBanner(
+                    viewThemeUtils = viewThemeUtils,
+                    onJoinVideoCall = { chatActivity.joinVideoCall() },
+                    onJoinAudioCall = { chatActivity.joinAudioCall() }
+                )
+            }
+        }
+
         viewLifecycleOwner.lifecycleScope.launch {
-            chatActivity.chatViewModel.lastCallSystemMessage.collect { hasCall ->
-                binding.fragmentCallStarted.root.visibility = if (hasCall) View.VISIBLE else View.GONE
+            chatActivity.chatViewModel.hasCall.collect { hasCall ->
+                binding.fragmentCallStarted.visibility = if (hasCall) View.VISIBLE else View.GONE
             }
         }
     }
@@ -518,36 +528,11 @@ class MessageInputFragment : Fragment() {
         binding.fragmentMessageInputView.button?.contentDescription =
             resources.getString(R.string.nc_description_send_message_button)
 
-        binding.fragmentCallStarted.joinAudioCall.setOnClickListener {
-            chatActivity.joinAudioCall()
-        }
-
-        binding.fragmentCallStarted.joinVideoCall.setOnClickListener {
-            chatActivity.joinVideoCall()
-        }
-
-        binding.fragmentCallStarted.callStartedCloseBtn.setOnClickListener {
-            collapsed = !collapsed
-            binding.fragmentCallStarted.callBtnLayout.visibility = if (collapsed) View.GONE else View.VISIBLE
-            setDropDown(collapsed)
-        }
-
         binding.fragmentMessageInputView.findViewById<ImageButton>(R.id.cancelReplyButton)?.setOnClickListener {
             cancelReply()
         }
     }
 
-    private fun setDropDown(collapsed: Boolean) {
-        val drawable = if (collapsed) {
-            AppCompatResources.getDrawable(requireContext(), R.drawable.ic_keyboard_arrow_up)
-        } else {
-            AppCompatResources.getDrawable(requireContext(), R.drawable.ic_keyboard_arrow_down)
-        }
-
-        binding.fragmentCallStarted.callStartedCloseBtn.setImageDrawable(drawable)
-        viewThemeUtils.platform.colorImageView(binding.fragmentCallStarted.callStartedCloseBtn, ColorRole.PRIMARY)
-    }
-
     @Suppress("ClickableViewAccessibility", "CyclomaticComplexMethod", "LongMethod")
     private fun initVoiceRecordButton() {
         handleButtonsVisibility()
@@ -1144,14 +1129,6 @@ class MessageInputFragment : Fragment() {
             viewThemeUtils.platform.colorImageView(it, ColorRole.PRIMARY)
         }
 
-        binding.fragmentCallStarted.callStartedBackground.apply {
-            viewThemeUtils.talk.themeOutgoingMessageBubble(this, grouped = true, false)
-        }
-
-        binding.fragmentCallStarted.callStartedCloseBtn.apply {
-            viewThemeUtils.platform.colorImageView(this, ColorRole.PRIMARY)
-        }
-
         binding.fragmentMessageInputView.submitThreadButton.apply {
             viewThemeUtils.platform.colorImageView(this, ColorRole.SECONDARY)
         }

app/src/main/java/com/nextcloud/talk/chat/viewmodels/ChatViewModel.kt

@@ -469,7 +469,7 @@ class ChatViewModel @AssistedInject constructor(
     private val nonNullUserFlow = currentUserFlow.filterNotNull()
 
     // Unlike conversationFlow below, this is not deduped by lastReadMessage/lastCommonReadMessage,
-    // so it also reacts to fields those two ignore, e.g. hasCall (see lastCallSystemMessage).
+    // so it also reacts to fields those two ignore, e.g. hasCall (see [hasCall]).
     private val rawConversationFlow: Flow<ConversationModel> =
         nonNullUserFlow
             .flatMapLatest { user ->
@@ -1029,7 +1029,7 @@ class ChatViewModel @AssistedInject constructor(
     // active" — unlike a scan over whatever chat message window happens to be loaded (which used to
     // make the call-started banner reappear for calls that had long since ended, since a loaded
     // window's contents don't necessarily reflect what's actually happening right now).
-    val lastCallSystemMessage: Flow<Boolean> = rawConversationFlow.map { it.hasCall }.distinctUntilChanged()
+    val hasCall: Flow<Boolean> = rawConversationFlow.map { it.hasCall }.distinctUntilChanged()
 
     private val _callEndedSystemMessage = MutableSharedFlow<ChatMessage.SystemMessageType>(extraBufferCapacity = 1)
     val callEndedSystemMessage: SharedFlow<ChatMessage.SystemMessageType>
@@ -1377,7 +1377,7 @@ class ChatViewModel @AssistedInject constructor(
         val chatMessageIterator = chatMessageMap.iterator()
 
         // Only drives the "conversation will be deleted after the call" warning (callEndedSystemMessage)
-        // — the call-started banner itself comes from lastCallSystemMessage / conversation.hasCall now.
+        // — the call-started banner itself comes from hasCall / conversation.hasCall now.
         chatMessageList.lastOrNull {
             it.systemMessageType in
                 listOf(

app/src/main/java/com/nextcloud/talk/ui/CallStartedBanner.kt

@@ -0,0 +1,138 @@
+/*
+ * Nextcloud Talk - Android Client
+ *
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+package com.nextcloud.talk.ui
+
+import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.res.vectorResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.nextcloud.talk.R
+import com.nextcloud.talk.ui.theme.ViewThemeUtils
+import com.nextcloud.talk.utils.preview.ComposePreviewUtils
+
+@Composable
+fun CallStartedBanner(viewThemeUtils: ViewThemeUtils, onJoinVideoCall: () -> Unit, onJoinAudioCall: () -> Unit) {
+    val context = LocalContext.current
+    val colorScheme = remember { viewThemeUtils.getColorScheme(context) }
+
+    Card(
+        modifier = Modifier.fillMaxWidth(),
+        shape = RoundedCornerShape(4.dp),
+        colors = CardDefaults.cardColors(containerColor = colorScheme.surface),
+        border = BorderStroke(1.dp, MaterialTheme.colorScheme.outlineVariant)
+    ) {
+        Column(modifier = Modifier.padding(8.dp)) {
+            Row(
+                modifier = Modifier.fillMaxWidth(),
+                horizontalArrangement = Arrangement.Center,
+                verticalAlignment = Alignment.CenterVertically
+            ) {
+                Icon(
+                    imageVector = ImageVector.vectorResource(R.drawable.ic_phone),
+                    contentDescription = null,
+                    modifier = Modifier.size(24.dp)
+                )
+                Spacer(modifier = Modifier.size(8.dp))
+                Text(
+                    text = stringResource(R.string.call_in_progress),
+                    style = MaterialTheme.typography.bodyMedium
+                )
+            }
+
+            Row(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(top = 8.dp),
+                horizontalArrangement = Arrangement.Center
+            ) {
+                CallStartedActionButton(
+                    icon = R.drawable.ic_videocam_grey_600_24dp,
+                    text = stringResource(R.string.video_call),
+                    onClick = onJoinVideoCall,
+                    modifier = Modifier.padding(end = 8.dp)
+                )
+                CallStartedActionButton(
+                    icon = R.drawable.ic_phone,
+                    text = stringResource(R.string.audio_call),
+                    onClick = onJoinAudioCall
+                )
+            }
+        }
+    }
+}
+
+@Composable
+private fun CallStartedActionButton(icon: Int, text: String, onClick: () -> Unit, modifier: Modifier = Modifier) {
+    Button(
+        onClick = onClick,
+        modifier = modifier,
+        colors = ButtonDefaults.buttonColors(containerColor = colorResource(R.color.nc_darkGreen))
+    ) {
+        Icon(
+            imageVector = ImageVector.vectorResource(icon),
+            contentDescription = null,
+            tint = Color.White,
+            modifier = Modifier.size(18.dp)
+        )
+        Spacer(modifier = Modifier.size(4.dp))
+        Text(text = text, color = Color.White)
+    }
+}
+
+@Preview(name = "Light Mode")
+@Composable
+fun CallStartedBannerPreview() {
+    val context = LocalContext.current
+    val previewUtils = ComposePreviewUtils.getInstance(context)
+    val viewThemeUtils = previewUtils.viewThemeUtils
+    val colorScheme = viewThemeUtils.getColorScheme(context)
+
+    MaterialTheme(colorScheme = colorScheme) {
+        CallStartedBanner(
+            viewThemeUtils = viewThemeUtils,
+            onJoinVideoCall = {},
+            onJoinAudioCall = {}
+        )
+    }
+}
+
+@Preview(name = "Dark Mode", uiMode = android.content.res.Configuration.UI_MODE_NIGHT_YES)
+@Composable
+fun CallStartedBannerPreviewDark() {
+    CallStartedBannerPreview()
+}
+
+@Preview(name = "R-t-L", locale = "ar")
+@Composable
+fun CallStartedBannerPreviewRtl() {
+    CallStartedBannerPreview()
+}

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

@@ -13,9 +13,8 @@
     android:layout_height="wrap_content"
     android:orientation="vertical">
 
-    <include
+    <androidx.compose.ui.platform.ComposeView
         android:id="@+id/fragment_call_started"
-        layout="@layout/call_started_message"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_marginHorizontal="@dimen/standard_half_margin"

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

@@ -31,8 +31,6 @@
     <color name="fg_default">#FFFFFF</color>
     <color name="fg_inverse">#121212</color>
 
-    <color name="nc_darkGreen">#00AA00</color>
-
     <color name="conversation_unread_bubble">#373737</color>
     <color name="conversation_unread_bubble_text">#D8D8D8</color>
 

app/src/main/res/values-night/colors.xml

@@ -950,6 +950,7 @@ How to translate with transifex:
     <string name="video_call">Video call</string>
     <string name="audio_call">Audio call</string>
     <string name="started_a_call">started a call</string>
+    <string name="call_in_progress">A call is in progress</string>
     <string name="nc_settings_phone_book_integration_phone_number_dialog_429">Error 429 Too Many Requests</string>
     <string name="nc_caption">Caption</string>
     <string name="nc_compress_images">Compress images and videos</string>