Implement join a call

Author: skydoves

features/chats/src/main/kotlin/io/getstream/whatsappclone/chats/messages/WhatsAppMessageTopBar.kt

@@ -32,6 +32,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import androidx.hilt.navigation.compose.hiltViewModel
 import com.skydoves.landscapist.animation.crossfade.CrossfadePlugin
 import com.skydoves.landscapist.components.rememberImageComponent
 import com.skydoves.landscapist.glide.GlideImage
@@ -42,6 +43,8 @@ import io.getstream.whatsappclone.uistate.WhatsAppMessageUiState
 
 @Composable
 fun WhatsAppMessageTopBar(
+  channelId: String,
+  whatsAppMessagesViewModel: WhatsAppMessagesViewModel = hiltViewModel(),
   messageUiState: WhatsAppMessageUiState,
   onBackClick: () -> Unit
 ) {
@@ -64,7 +67,11 @@ fun WhatsAppMessageTopBar(
     },
     actions = {
       Icon(
-        modifier = Modifier.size(26.dp),
+        modifier = Modifier
+          .size(26.dp)
+          .clickable {
+            whatsAppMessagesViewModel.navigateToVideoCall(channelId = channelId)
+          },
         imageVector = WhatsAppIcons.Video,
         tint = MaterialTheme.colorScheme.tertiary,
         contentDescription = null
@@ -131,6 +138,7 @@ private fun WhatsAppMessageUserInfo(
 private fun WhatsAppTopBarPreview() {
   WhatsAppCloneComposeTheme {
     WhatsAppMessageTopBar(
+      channelId = "",
       messageUiState = WhatsAppMessageUiState.Loading,
       onBackClick = {}
     )
@@ -142,6 +150,7 @@ private fun WhatsAppTopBarPreview() {
 private fun WhatsAppTopBarDarkPreview() {
   WhatsAppCloneComposeTheme(darkTheme = true) {
     WhatsAppMessageTopBar(
+      channelId = "",
       messageUiState = WhatsAppMessageUiState.Loading,
       onBackClick = {}
     )

features/chats/src/main/kotlin/io/getstream/whatsappclone/chats/messages/WhatsAppMessages.kt

@@ -36,6 +36,7 @@ fun WhatsAppMessages(
   WhatsAppChatTheme {
     Column(Modifier.fillMaxSize()) {
       WhatsAppMessageTopBar(
+        channelId = channelId,
         messageUiState = messageUiState,
         onBackClick = { whatsAppMessagesViewModel.handleEvents(WhatsAppMessageEvent.NavigateUp) }
       )

features/chats/src/main/kotlin/io/getstream/whatsappclone/chats/messages/WhatsAppMessagesViewModel.kt

@@ -24,6 +24,7 @@ import io.getstream.chat.android.client.ChatClient
 import io.getstream.chat.android.client.utils.onError
 import io.getstream.chat.android.client.utils.onSuccess
 import io.getstream.whatsappclone.navigation.AppComposeNavigator
+import io.getstream.whatsappclone.navigation.WhatsAppScreens
 import io.getstream.whatsappclone.uistate.WhatsAppMessageUiState
 import javax.inject.Inject
 import kotlinx.coroutines.flow.MutableStateFlow
@@ -54,6 +55,10 @@ class WhatsAppMessagesViewModel @Inject constructor(
     }
   }
 
+  fun navigateToVideoCall(channelId: String) {
+    composeNavigator.navigate(WhatsAppScreens.VideoCall.createRoute(channelId))
+  }
+
   private fun fetchChannel(channelId: String) {
     viewModelScope.launch {
       val result = chatClient.channel(channelId).watch().await()

features/video/src/main/kotlin/io/getstream/whatsappclone/video/WhatsAppVideoCall.kt

@@ -42,7 +42,7 @@ fun WhatsAppVideoCall(
   val uiState by viewModel.videoUiSate.collectAsStateWithLifecycle()
 
   LaunchedEffect(key1 = id) {
-    viewModel.joinCall(type = "default", id = id)
+    viewModel.joinCall(type = "default", id = id.replace(":", ""))
   }
 
   when (uiState) {