feat: send and receive in-call reactions [#WPB-14254]

app/src/main/kotlin/com/wire/android/di/accountScoped/CallsModule.kt

@@ -202,4 +202,9 @@ class CallsModule {
     @Provides
     fun provideObserveConferenceCallingEnabledUseCase(callsScope: CallsScope) =
         callsScope.observeConferenceCallingEnabled
+
+    @ViewModelScoped
+    @Provides
+    fun provideObserveInCallReactionsUseCase(callsScope: CallsScope) =
+        callsScope.observeInCallReactions
 }

app/src/main/kotlin/com/wire/android/di/accountScoped/MessageModule.kt

@@ -28,6 +28,7 @@ import com.wire.kalium.logic.feature.asset.ObserveAssetStatusesUseCase
 import com.wire.kalium.logic.feature.asset.ObservePaginatedAssetImageMessages
 import com.wire.kalium.logic.feature.asset.ScheduleNewAssetMessageUseCase
 import com.wire.kalium.logic.feature.asset.UpdateAssetMessageTransferStatusUseCase
+import com.wire.kalium.logic.feature.incallreaction.SendInCallReactionUseCase
 import com.wire.kalium.logic.feature.message.DeleteMessageUseCase
 import com.wire.kalium.logic.feature.message.GetMessageByIdUseCase
 import com.wire.kalium.logic.feature.message.GetNotificationsUseCase
@@ -216,4 +217,9 @@ class MessageModule {
     @Provides
     fun provideRemoveMessageDraftUseCase(messageScope: MessageScope): RemoveMessageDraftUseCase =
         messageScope.removeMessageDraftUseCase
+
+    @ViewModelScoped
+    @Provides
+    fun provideSendInCallReactionUseCase(messageScope: MessageScope): SendInCallReactionUseCase =
+        messageScope.sendInCallReactionUseCase
 }

app/src/main/kotlin/com/wire/android/mapper/UICallParticipantMapper.kt

@@ -21,14 +21,16 @@ package com.wire.android.mapper
 import com.wire.android.model.ImageAsset
 import com.wire.android.ui.calling.model.UICallParticipant
 import com.wire.kalium.logic.data.call.Participant
+import com.wire.kalium.logic.data.conversation.ClientId
 import javax.inject.Inject
 
 class UICallParticipantMapper @Inject constructor(
     private val userTypeMapper: UserTypeMapper,
 ) {
-    fun toUICallParticipant(participant: Participant) = UICallParticipant(
+    fun toUICallParticipant(participant: Participant, currentClientId: ClientId) = UICallParticipant(
         id = participant.id,
         clientId = participant.clientId,
+        isSelfUser = participant.clientId == currentClientId.value,
         name = participant.name,
         isMuted = participant.isMuted,
         isSpeaking = participant.isSpeaking,

app/src/main/kotlin/com/wire/android/ui/calling/SharedCallingViewModel.kt

@@ -20,6 +20,7 @@ package com.wire.android.ui.calling
 
 import android.view.View
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateMapOf
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.setValue
 import androidx.lifecycle.ViewModel
@@ -29,26 +30,37 @@ import com.wire.android.mapper.UICallParticipantMapper
 import com.wire.android.mapper.UserTypeMapper
 import com.wire.android.media.CallRinger
 import com.wire.android.model.ImageAsset
+import com.wire.android.ui.calling.model.InCallReaction
+import com.wire.android.ui.calling.model.ReactionSender
 import com.wire.android.ui.calling.model.UICallParticipant
+import com.wire.android.ui.calling.ongoing.incallreactions.InCallReactions
+import com.wire.android.util.ExpiringMap
 import com.wire.android.util.dispatchers.DispatcherProvider
+import com.wire.android.util.extension.withDelayAfterFirst
 import com.wire.kalium.logic.data.call.Call
 import com.wire.kalium.logic.data.call.ConversationTypeForCall
 import com.wire.kalium.logic.data.call.VideoState
 import com.wire.kalium.logic.data.conversation.Conversation
 import com.wire.kalium.logic.data.conversation.ConversationDetails
 import com.wire.kalium.logic.data.id.ConversationId
+import com.wire.kalium.logic.data.id.QualifiedID
+import com.wire.kalium.logic.data.user.UserId
 import com.wire.kalium.logic.feature.call.usecase.EndCallUseCase
 import com.wire.kalium.logic.feature.call.usecase.FlipToBackCameraUseCase
 import com.wire.kalium.logic.feature.call.usecase.FlipToFrontCameraUseCase
 import com.wire.kalium.logic.feature.call.usecase.MuteCallUseCase
 import com.wire.kalium.logic.feature.call.usecase.ObserveEstablishedCallWithSortedParticipantsUseCase
+import com.wire.kalium.logic.feature.call.usecase.ObserveInCallReactionsUseCase
 import com.wire.kalium.logic.feature.call.usecase.ObserveSpeakerUseCase
 import com.wire.kalium.logic.feature.call.usecase.SetVideoPreviewUseCase
 import com.wire.kalium.logic.feature.call.usecase.TurnLoudSpeakerOffUseCase
 import com.wire.kalium.logic.feature.call.usecase.TurnLoudSpeakerOnUseCase
 import com.wire.kalium.logic.feature.call.usecase.UnMuteCallUseCase
 import com.wire.kalium.logic.feature.call.usecase.video.UpdateVideoStateUseCase
+import com.wire.kalium.logic.feature.client.ObserveCurrentClientIdUseCase
 import com.wire.kalium.logic.feature.conversation.ObserveConversationDetailsUseCase
+import com.wire.kalium.logic.feature.incallreaction.SendInCallReactionUseCase
+import com.wire.kalium.logic.functional.onSuccess
 import com.wire.kalium.logic.util.PlatformView
 import dagger.assisted.Assisted
 import dagger.assisted.AssistedFactory
@@ -57,13 +69,19 @@ import dagger.hilt.android.lifecycle.HiltViewModel
 import kotlinx.collections.immutable.persistentListOf
 import kotlinx.collections.immutable.toPersistentList
 import kotlinx.coroutines.CoroutineScope
+import kotlinx.coroutines.channels.BufferOverflow
+import kotlinx.coroutines.channels.Channel
 import kotlinx.coroutines.flow.SharedFlow
 import kotlinx.coroutines.flow.SharingStarted
+import kotlinx.coroutines.flow.collect
 import kotlinx.coroutines.flow.collectLatest
+import kotlinx.coroutines.flow.combine
 import kotlinx.coroutines.flow.filterIsInstance
+import kotlinx.coroutines.flow.filterNotNull
 import kotlinx.coroutines.flow.first
 import kotlinx.coroutines.flow.flowOn
 import kotlinx.coroutines.flow.map
+import kotlinx.coroutines.flow.receiveAsFlow
 import kotlinx.coroutines.flow.shareIn
 import kotlinx.coroutines.launch
 
@@ -83,6 +101,9 @@ class SharedCallingViewModel @AssistedInject constructor(
     private val flipToFrontCamera: FlipToFrontCameraUseCase,
     private val flipToBackCamera: FlipToBackCameraUseCase,
     private val observeSpeaker: ObserveSpeakerUseCase,
+    private val observeInCallReactionsUseCase: ObserveInCallReactionsUseCase,
+    private val sendInCallReactionUseCase: SendInCallReactionUseCase,
+    private val getCurrentClientId: ObserveCurrentClientIdUseCase,
     private val callRinger: CallRinger,
     private val uiCallParticipantMapper: UICallParticipantMapper,
     private val userTypeMapper: UserTypeMapper,
@@ -93,6 +114,15 @@ class SharedCallingViewModel @AssistedInject constructor(
 
     var participantsState by mutableStateOf(persistentListOf<UICallParticipant>())
 
+    private val _inCallReactions = Channel<InCallReaction>(
+        capacity = 300, // Max reactions to keep in queue
+        onBufferOverflow = BufferOverflow.DROP_OLDEST,
+    )
+
+    val inCallReactions = _inCallReactions.receiveAsFlow().withDelayAfterFirst(InCallReactions.reactionsThrottleDelayMs)
+
+    val recentReactions = recentInCallReactionMap()
+
     init {
         viewModelScope.launch {
             val allCallsSharedFlow = observeEstablishedCallWithSortedParticipants(conversationId)
@@ -110,6 +140,9 @@ class SharedCallingViewModel @AssistedInject constructor(
             launch {
                 observeOnSpeaker(this)
             }
+            launch {
+                observeInCallReactions()
+            }
         }
     }
 
@@ -172,18 +205,21 @@ class SharedCallingViewModel @AssistedInject constructor(
     }
 
     private suspend fun observeParticipants(sharedFlow: SharedFlow<Call?>) {
-        sharedFlow.collectLatest { call ->
-            call?.let {
-                callState = callState.copy(
-                    isMuted = it.isMuted,
-                    callStatus = it.status,
-                    isCameraOn = it.isCameraOn,
-                    isCbrEnabled = it.isCbrEnabled && call.conversationType == Conversation.Type.ONE_ON_ONE,
-                    callerName = it.callerName,
-                )
-                participantsState = call.participants.map { uiCallParticipantMapper.toUICallParticipant(it) }.toPersistentList()
-            }
-        }
+        combine(
+            getCurrentClientId().filterNotNull(),
+            sharedFlow.filterNotNull(),
+        ) { clientId, call ->
+            callState = callState.copy(
+                isMuted = call.isMuted,
+                callStatus = call.status,
+                isCameraOn = call.isCameraOn,
+                isCbrEnabled = call.isCbrEnabled && call.conversationType == Conversation.Type.ONE_ON_ONE,
+                callerName = call.callerName,
+            )
+            participantsState = call.participants.map {
+                uiCallParticipantMapper.toUICallParticipant(it, clientId)
+            }.toPersistentList()
+        }.collect()
     }
 
     fun hangUpCall(onCompleted: () -> Unit) {
@@ -279,8 +315,42 @@ class SharedCallingViewModel @AssistedInject constructor(
         }
     }
 
+    private suspend fun observeInCallReactions() {
+        observeInCallReactionsUseCase(conversationId).collect { message ->
+
+            val sender = participantsState.senderName(message.senderUserId)?.let { name ->
+                ReactionSender.Other(name)
+            } ?: ReactionSender.Unknown
+
+            message.emojis.forEach { emoji ->
+                _inCallReactions.send(InCallReaction(emoji, sender))
+            }
+
+            if (message.emojis.isNotEmpty()) {
+                recentReactions.put(message.senderUserId, message.emojis.last())
+            }
+        }
+    }
+
+    fun onReactionClick(emoji: String) {
+        viewModelScope.launch {
+            sendInCallReactionUseCase(conversationId, emoji).onSuccess {
+                _inCallReactions.send(InCallReaction(emoji, ReactionSender.You))
+            }
+        }
+    }
+
+    private fun recentInCallReactionMap(): MutableMap<UserId, String> =
+        ExpiringMap<UserId, String>(
+            scope = viewModelScope,
+            expiration = InCallReactions.recentReactionShowDurationMs,
+            delegate = mutableStateMapOf<UserId, String>()
+        )
+
     @AssistedFactory
     interface Factory {
         fun create(conversationId: ConversationId): SharedCallingViewModel
     }
 }
+
+private fun List<UICallParticipant>.senderName(userId: QualifiedID) = firstOrNull { it.id.value == userId.value }?.name

app/src/main/kotlin/com/wire/android/ui/calling/controlbuttons/CameraButton.kt

@@ -20,10 +20,8 @@ package com.wire.android.ui.calling.controlbuttons
 
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.unit.Dp
 import com.wire.android.R
 import com.wire.android.appLogger
-import com.wire.android.ui.common.dimensions
 import com.wire.android.ui.theme.WireTheme
 import com.wire.android.util.permission.rememberCameraPermissionFlow
 import com.wire.android.util.ui.PreviewMultipleThemes
@@ -34,7 +32,6 @@ fun CameraButton(
     onPermissionPermanentlyDenied: () -> Unit,
     modifier: Modifier = Modifier,
     isCameraOn: Boolean = false,
-    size: Dp = dimensions().defaultCallingControlsSize,
 ) {
     val cameraPermissionCheck = rememberCameraPermissionFlow(
         onPermissionGranted = {
@@ -56,7 +53,6 @@ fun CameraButton(
             false -> R.string.content_description_calling_turn_camera_on
         },
         onClick = cameraPermissionCheck::launch,
-        size = size,
         modifier = modifier,
     )
 }

app/src/main/kotlin/com/wire/android/ui/calling/controlbuttons/HangUpButton.kt

@@ -38,7 +38,7 @@ import com.wire.android.util.ui.PreviewMultipleThemes
 fun HangUpButton(
     onHangUpButtonClicked: () -> Unit,
     modifier: Modifier = Modifier,
-    size: Dp = dimensions().bigCallingControlsSize,
+    size: Dp = dimensions().defaultCallingControlsHeight,
     iconSize: Dp = dimensions().bigCallingHangUpButtonIconSize,
 ) {
     WirePrimaryIconButton(

app/src/main/kotlin/com/wire/android/ui/calling/controlbuttons/HangUpOngoingButton.kt

@@ -0,0 +1,67 @@
+/*
+ * Wire
+ * Copyright (C) 2024 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ */
+
+package com.wire.android.ui.calling.controlbuttons
+
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.DpSize
+import com.wire.android.R
+import com.wire.android.ui.common.button.WireButtonState
+import com.wire.android.ui.common.button.WirePrimaryIconButton
+import com.wire.android.ui.common.dimensions
+import com.wire.android.ui.theme.WireTheme
+import com.wire.android.ui.theme.wireDimensions
+import com.wire.android.util.ui.PreviewMultipleThemes
+
+@Composable
+fun HangUpOngoingButton(
+    onHangUpButtonClicked: () -> Unit,
+    modifier: Modifier = Modifier,
+    width: Dp = dimensions().defaultCallingControlsWidth,
+    height: Dp = dimensions().defaultCallingControlsHeight,
+    iconSize: Dp = dimensions().bigCallingHangUpButtonIconSize,
+) {
+    WirePrimaryIconButton(
+        iconResource = R.drawable.ic_call_reject,
+        contentDescription = R.string.content_description_calling_hang_up_call,
+        state = WireButtonState.Error,
+        shape = CircleShape,
+        minSize = DpSize(width, height),
+        minClickableSize = DpSize(width, height),
+        iconSize = iconSize,
+        onButtonClicked = onHangUpButtonClicked,
+        modifier = modifier,
+    )
+}
+
+@PreviewMultipleThemes
+@Composable
+fun PreviewComposableHangUpOngoingButton() = WireTheme {
+    HangUpOngoingButton(
+        modifier = Modifier
+            .width(MaterialTheme.wireDimensions.bigCallingControlsSize)
+            .height(MaterialTheme.wireDimensions.bigCallingControlsSize),
+        onHangUpButtonClicked = { }
+    )
+}

app/src/main/kotlin/com/wire/android/ui/calling/controlbuttons/CameraFlipButton.kt → app/src/main/kotlin/com/wire/android/ui/calling/controlbuttons/InCallReactionsButton.kt

@@ -15,48 +15,49 @@
  * You should have received a copy of the GNU General Public License
  * along with this program. If not, see http://www.gnu.org/licenses/.
  */
-
 package com.wire.android.ui.calling.controlbuttons
 
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.unit.Dp
 import com.wire.android.R
-import com.wire.android.ui.common.dimensions
 import com.wire.android.ui.theme.WireTheme
 import com.wire.android.util.ui.PreviewMultipleThemes
 
 @Composable
-fun CameraFlipButton(
-    onCameraFlipButtonClicked: () -> Unit,
+fun InCallReactionsButton(
+    isSelected: Boolean,
+    onInCallReactionsClick: () -> Unit,
     modifier: Modifier = Modifier,
-    isOnFrontCamera: Boolean = false,
-    size: Dp = dimensions().defaultCallingControlsSize
 ) {
     WireCallControlButton(
-        isSelected = !isOnFrontCamera,
-        iconResId = when (isOnFrontCamera) {
-            true -> R.drawable.ic_camera_flipped
-            false -> R.drawable.ic_camera_flip
+        isSelected = isSelected,
+        iconResId = when (isSelected) {
+            true -> R.drawable.ic_incall_reactions
+            false -> R.drawable.ic_incall_reactions
         },
-        contentDescription = when (isOnFrontCamera) {
-            true -> R.string.content_description_calling_flip_camera_on
-            false -> R.string.content_description_calling_flip_camera_off
+        contentDescription = when (isSelected) {
+            true -> R.string.content_description_calling_unmute_call
+            false -> R.string.content_description_calling_mute_call
         },
-        onClick = onCameraFlipButtonClicked,
-        size = size,
-        modifier = modifier,
+        onClick = onInCallReactionsClick,
+        modifier = modifier
     )
 }
 
 @PreviewMultipleThemes
 @Composable
-fun PreviewCameraFlipButtonOn() = WireTheme {
-    CameraFlipButton(isOnFrontCamera = true, onCameraFlipButtonClicked = { })
+fun PreviewInCallReactionsButton() = WireTheme {
+    InCallReactionsButton(
+        isSelected = false,
+        onInCallReactionsClick = { }
+    )
 }
 
 @PreviewMultipleThemes
 @Composable
-fun PreviewCameraFlipButtonOff() = WireTheme {
-    CameraFlipButton(isOnFrontCamera = false, onCameraFlipButtonClicked = { })
+fun PreviewInCallReactionsButtonSelected() = WireTheme {
+    InCallReactionsButton(
+        isSelected = true,
+        onInCallReactionsClick = { }
+    )
 }