Implement an audio call

Author: skydoves

app/src/main/kotlin/io/getstream/whatsappclone/navigation/WhatsAppNavigation.kt

@@ -65,7 +65,9 @@ fun NavGraphBuilder.whatsAppHomeNavigation() {
     arguments = WhatsAppScreens.VideoCall.navArguments
   ) {
     val callId = it.arguments?.getString(WhatsAppScreens.VideoCall.KEY_CALL_ID) ?: return@composable
+    val videoCall =
+      it.arguments?.getBoolean(WhatsAppScreens.VideoCall.KEY_VIDEO_ID) ?: return@composable
 
-    WhatsAppVideoCall(id = callId)
+    WhatsAppVideoCall(id = callId, videoCall = videoCall)
   }
 }

core/navigation/src/main/kotlin/io/getstream/whatsappclone/navigation/WhatsAppScreens.kt

@@ -62,13 +62,19 @@ sealed class WhatsAppScreens(
       navArgument("call_id") {
         type = NavType.StringType
         nullable = false
+      },
+      navArgument("video_call") {
+        type = NavType.BoolType
+        nullable = false
       }
     )
   ) {
     const val KEY_CALL_ID = "call_id"
+    const val KEY_VIDEO_ID = "video_call"
 
-    fun createRoute(callId: String) =
-      name.replace("{${navArguments.first().name}}", callId)
+    fun createRoute(callId: String, videoCall: Boolean) =
+      name.replace("{${navArguments[0].name}}", callId)
+        .replace("{${navArguments[1].name}}", videoCall.toString())
   }
 }
 

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

@@ -70,7 +70,7 @@ fun WhatsAppMessageTopBar(
         modifier = Modifier
           .size(26.dp)
           .clickable {
-            whatsAppMessagesViewModel.navigateToVideoCall(channelId = channelId)
+            whatsAppMessagesViewModel.navigateToVideoCall(channelId = channelId, videoCall = true)
           },
         imageVector = WhatsAppIcons.Video,
         tint = MaterialTheme.colorScheme.tertiary,
@@ -80,7 +80,11 @@ fun WhatsAppMessageTopBar(
       Spacer(modifier = Modifier.size(16.dp))
 
       Icon(
-        modifier = Modifier.size(26.dp),
+        modifier = Modifier
+          .size(26.dp)
+          .clickable {
+            whatsAppMessagesViewModel.navigateToVideoCall(channelId = channelId, videoCall = false)
+          },
         imageVector = WhatsAppIcons.Call,
         tint = MaterialTheme.colorScheme.tertiary,
         contentDescription = null

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

@@ -53,8 +53,13 @@ class WhatsAppMessagesViewModel @Inject constructor(
     }
   }
 
-  fun navigateToVideoCall(channelId: String) {
-    composeNavigator.navigate(WhatsAppScreens.VideoCall.createRoute(channelId))
+  fun navigateToVideoCall(channelId: String, videoCall: Boolean) {
+    composeNavigator.navigate(
+      WhatsAppScreens.VideoCall.createRoute(
+        callId = channelId,
+        videoCall = videoCall
+      )
+    )
   }
 
   private fun fetchChannel(channelId: String) {

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

@@ -18,25 +18,31 @@ package io.getstream.whatsappclone.video
 
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.size
 import androidx.compose.material.Text
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import io.getstream.video.android.compose.theme.VideoTheme
 import io.getstream.video.android.compose.ui.components.call.activecall.CallContent
+import io.getstream.video.android.compose.ui.components.call.controls.ControlActions
+import io.getstream.video.android.compose.ui.components.call.controls.actions.LeaveCallAction
+import io.getstream.video.android.compose.ui.components.call.controls.actions.ToggleMicrophoneAction
 import io.getstream.video.android.core.Call
 import io.getstream.whatsappclone.designsystem.component.WhatsAppLoadingIndicator
 import io.getstream.whatsappclone.uistate.WhatsAppVideoUiState
 
 @Composable
 fun WhatsAppVideoCall(
   id: String,
+  videoCall: Boolean,
   viewModel: WhatsAppVideoCallViewModel = hiltViewModel()
 ) {
   val uiState by viewModel.videoUiSate.collectAsStateWithLifecycle()
@@ -47,7 +53,11 @@ fun WhatsAppVideoCall(
 
   when (uiState) {
     is WhatsAppVideoUiState.Success ->
-      WhatsAppVideoCallContent(call = (uiState as WhatsAppVideoUiState.Success).data)
+      WhatsAppVideoCallContent(
+        call = (uiState as WhatsAppVideoUiState.Success).data,
+        videoCall = videoCall,
+        onBackPressed = { viewModel.navigateUp() }
+      )
 
     is WhatsAppVideoUiState.Error -> WhatsAppVideoCallError()
 
@@ -57,10 +67,47 @@ fun WhatsAppVideoCall(
 
 @Composable
 fun WhatsAppVideoCallContent(
-  call: Call
+  call: Call,
+  videoCall: Boolean,
+  onBackPressed: () -> Unit
 ) {
+  val isMicrophoneEnabled by call.microphone.isEnabled.collectAsStateWithLifecycle()
+
+  LaunchedEffect(key1 = call.id) {
+    if (!videoCall) {
+      call.camera.setEnabled(false)
+    }
+  }
+
   VideoTheme {
-    CallContent(call = call)
+    CallContent(
+      call = call,
+      onBackPressed = onBackPressed,
+      controlsContent = {
+        if (videoCall) {
+          ControlActions(call = call)
+        } else {
+          ControlActions(
+            call = call,
+            actions = listOf(
+              {
+                ToggleMicrophoneAction(
+                  modifier = Modifier.size(52.dp),
+                  isMicrophoneEnabled = isMicrophoneEnabled,
+                  onCallAction = { call.microphone.setEnabled(it.isEnabled) }
+                )
+              },
+              {
+                LeaveCallAction(
+                  modifier = Modifier.size(52.dp),
+                  onCallAction = { onBackPressed.invoke() }
+                )
+              }
+            )
+          )
+        }
+      }
+    )
   }
 }
 

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

@@ -21,14 +21,17 @@ import androidx.lifecycle.ViewModel
 import androidx.lifecycle.viewModelScope
 import dagger.hilt.android.lifecycle.HiltViewModel
 import io.getstream.video.android.core.StreamVideo
+import io.getstream.whatsappclone.navigation.AppComposeNavigator
 import io.getstream.whatsappclone.uistate.WhatsAppVideoUiState
 import javax.inject.Inject
 import kotlinx.coroutines.flow.MutableStateFlow
 import kotlinx.coroutines.flow.StateFlow
 import kotlinx.coroutines.launch
 
 @HiltViewModel
-class WhatsAppVideoCallViewModel @Inject constructor() : ViewModel() {
+class WhatsAppVideoCallViewModel @Inject constructor(
+  private val composeNavigator: AppComposeNavigator
+) : ViewModel() {
 
   private val videoMutableUiState =
     MutableStateFlow<WhatsAppVideoUiState>(WhatsAppVideoUiState.Loading)
@@ -61,4 +64,8 @@ class WhatsAppVideoCallViewModel @Inject constructor() : ViewModel() {
       }
     }
   }
+
+  fun navigateUp() {
+    composeNavigator.navigateUp()
+  }
 }