Implement WhatsAppVideoCallViewModel

Author: skydoves

app/src/main/AndroidManifest.xml

@@ -48,7 +48,7 @@
 
     <provider
       android:name="androidx.startup.InitializationProvider"
-      android:authorities="io.getstream.whatsappclone.androidx-startup"
+      android:authorities="${applicationId}.androidx-startup"
       android:exported="false"
       tools:node="merge">
       <meta-data

app/src/main/kotlin/io/getstream/whatsappclone/initializer/MainInitializer.kt

@@ -19,6 +19,7 @@ package io.getstream.whatsappclone.initializer
 import android.content.Context
 import androidx.startup.Initializer
 import io.getstream.whatsappclone.chats.initializer.StreamChatInitializer
+import io.getstream.whatsappclone.chats.initializer.StreamLogInitializer
 import io.getstream.whatsappclone.video.initializer.StreamVideoInitializer
 
 class MainInitializer : Initializer<Unit> {
@@ -27,6 +28,7 @@ class MainInitializer : Initializer<Unit> {
   }
 
   override fun dependencies(): List<Class<out Initializer<*>>> = listOf(
+    StreamLogInitializer::class.java,
     StreamChatInitializer::class.java,
     StreamVideoInitializer::class.java
   )

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

@@ -26,6 +26,7 @@ import io.getstream.whatsappclone.chats.messages.WhatsAppMessages
 import io.getstream.whatsappclone.model.WhatsAppUser
 import io.getstream.whatsappclone.ui.WhatsAppTabPager
 import io.getstream.whatsappclone.ui.WhatsAppTopBar
+import io.getstream.whatsappclone.video.WhatsAppVideoCall
 
 fun NavGraphBuilder.whatsAppHomeNavigation() {
   composable(route = WhatsAppScreens.Home.name) {
@@ -63,8 +64,8 @@ fun NavGraphBuilder.whatsAppHomeNavigation() {
     route = WhatsAppScreens.VideoCall.name,
     arguments = WhatsAppScreens.VideoCall.navArguments
   ) {
-    val callId = it.arguments?.getString(WhatsAppScreens.VideoCall.KEY_CALL_ID)
+    val callId = it.arguments?.getString(WhatsAppScreens.VideoCall.KEY_CALL_ID) ?: return@composable
 
-    // TODO
+    WhatsAppVideoCall(id = callId)
   }
 }

core/designsystem/src/main/kotlin/io/getstream/whatsappclone/designsystem/component/WhatsAppLoadingIndicator.kt

@@ -18,9 +18,13 @@ package io.getstream.whatsappclone.designsystem.component
 
 import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
 import io.getstream.whatsappclone.designsystem.theme.GREEN450
 
 @Composable
-fun WhatsAppLoadingIndicator() {
-  CircularProgressIndicator(color = GREEN450)
+fun WhatsAppLoadingIndicator(modifier: Modifier = Modifier) {
+  CircularProgressIndicator(
+    modifier = modifier,
+    color = GREEN450
+  )
 }

core/model/build.gradle.kts

@@ -26,6 +26,8 @@ android {
 
 dependencies {
   api(libs.stream.chat.client)
+  api(libs.stream.video.core)
+
   api(libs.retrofit.kotlin.serialization)
   api(libs.kotlinx.serialization.json)
   compileOnly(libs.compose.stable.marker)

core/uistate/src/main/kotlin/io/getstream/whatsappclone/uistate/UiState.kt

@@ -21,6 +21,7 @@ import com.skydoves.sealedx.core.Extensive
 import com.skydoves.sealedx.core.annotations.ExtensiveModel
 import com.skydoves.sealedx.core.annotations.ExtensiveSealed
 import io.getstream.chat.android.client.models.Channel
+import io.getstream.video.android.core.Call
 
 /**
  * Generates restartable and skippable UI states based on KSP and extensive models.
@@ -29,11 +30,13 @@ import io.getstream.chat.android.client.models.Channel
 @ExtensiveSealed(
   models = [
     ExtensiveModel(type = Channel::class, name = "WhatsAppMessage"),
-    ExtensiveModel(type = WhatsAppUserExtensive::class, name = "WhatsAppUser")
+    ExtensiveModel(type = WhatsAppUserExtensive::class, name = "WhatsAppUser"),
+    ExtensiveModel(type = Call::class, name = "WhatsAppVideo")
   ]
 )
 @Immutable
 sealed interface UiState {
+
   data class Success(val data: Extensive) : UiState
   data object Loading : UiState
   data object Error : UiState

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

@@ -16,54 +16,70 @@
 
 package io.getstream.whatsappclone.video
 
-import android.widget.Toast
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+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.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
-import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+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.core.Call
-import io.getstream.video.android.core.GEO
-import io.getstream.video.android.core.StreamVideoBuilder
-import io.getstream.video.android.model.User
+import io.getstream.whatsappclone.designsystem.component.WhatsAppLoadingIndicator
+import io.getstream.whatsappclone.uistate.WhatsAppVideoUiState
 
 @Composable
-fun WhatsAppVideoCall(id: String) {
-  val context = LocalContext.current
+fun WhatsAppVideoCall(
+  id: String,
+  viewModel: WhatsAppVideoCallViewModel = hiltViewModel()
+) {
+  val uiState by viewModel.videoUiSate.collectAsStateWithLifecycle()
 
-  var call: Call? by remember { mutableStateOf(null) }
+  LaunchedEffect(key1 = id) {
+    viewModel.joinCall(type = "default", id = id)
+  }
 
-  LaunchedEffect(key1 = Unit) {
-    val userToken = ""
-    val userId = "Ben_Skywalker"
-    val callId = "dE8AsD5Qxqrt"
+  when (uiState) {
+    is WhatsAppVideoUiState.Success ->
+      WhatsAppVideoCallContent(call = (uiState as WhatsAppVideoUiState.Success).data)
 
-    // step1 - create a user.
-    val user = User(
-      id = userId, // any string
-      name = "Tutorial", // name and image are used in the UI
-      role = "admin"
-    )
+    is WhatsAppVideoUiState.Error -> WhatsAppVideoCallError()
 
-    // step2 - initialize StreamVideo. For a production app we recommend adding the client to your Application class or di module.
-    val client = StreamVideoBuilder(
-      context = context,
-      apiKey = BuildConfig.STREAM_API_KEY,
-      geo = GEO.GlobalEdgeNetwork,
-      user = user,
-      token = userToken,
-      ensureSingleInstance = false
-    ).build()
+    else -> WhatsAppVideoLoading()
+  }
+}
 
-    // step3 - join a call, which type is `default` and id is `123`.
-    call = client.call("livestream", callId)
+@Composable
+fun WhatsAppVideoCallContent(
+  call: Call
+) {
+  VideoTheme {
+    CallContent(call = call)
+  }
+}
 
-    // join the cal
-    val result = call?.join()
-    result?.onError {
-      Toast.makeText(context, "uh oh $it", Toast.LENGTH_SHORT).show()
-    }
+@Composable
+fun WhatsAppVideoCallError() {
+  Box(modifier = Modifier.fillMaxSize()) {
+    Text(
+      modifier = Modifier.align(Alignment.Center),
+      text = "Something went wrong; failed to join a call",
+      fontSize = 14.sp,
+      style = MaterialTheme.typography.bodyMedium,
+      color = MaterialTheme.colorScheme.onTertiary
+    )
+  }
+}
+
+@Composable
+fun WhatsAppVideoLoading() {
+  Box(modifier = Modifier.fillMaxSize()) {
+    WhatsAppLoadingIndicator(modifier = Modifier.align(Alignment.Center))
   }
 }

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

@@ -0,0 +1,64 @@
+/*
+ * Copyright 2023 Stream.IO, Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package io.getstream.whatsappclone.video
+
+import android.util.Log
+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.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() {
+
+  private val videoMutableUiState =
+    MutableStateFlow<WhatsAppVideoUiState>(WhatsAppVideoUiState.Loading)
+  val videoUiSate: StateFlow<WhatsAppVideoUiState> = videoMutableUiState
+
+  fun joinCall(type: String, id: String) {
+    viewModelScope.launch {
+      val streamVideo = StreamVideo.instance()
+      val activeCall = streamVideo.state.activeCall.value
+      val call = if (activeCall != null) {
+        if (activeCall.id != id) {
+          Log.w("CallActivity", "A call with id: $id existed. Leaving.")
+          // If the call id is different leave the previous call
+          activeCall.leave()
+          // Return a new call
+          streamVideo.call(type = type, id = id)
+        } else {
+          // Call ID is the same, use the active call
+          activeCall
+        }
+      } else {
+        // There is no active call, create new call
+        streamVideo.call(type = type, id = id)
+      }
+      val result = call.join(create = true)
+      result.onSuccess {
+        videoMutableUiState.value = WhatsAppVideoUiState.Success(call)
+      }.onError {
+        videoMutableUiState.value = WhatsAppVideoUiState.Error
+      }
+    }
+  }
+}

features/video/src/main/kotlin/io/getstream/whatsappclone/video/initializer/StreamVideoInitializer.kt

@@ -17,47 +17,30 @@
 package io.getstream.whatsappclone.video.initializer
 
 import android.content.Context
+import android.util.Base64
 import androidx.startup.Initializer
 import io.getstream.video.android.core.StreamVideoBuilder
 import io.getstream.video.android.model.User
-import io.getstream.whatsappclone.network.Dispatcher
-import io.getstream.whatsappclone.network.WhatsAppDispatchers
-import io.getstream.whatsappclone.network.service.StreamVideoTokenService
 import io.getstream.whatsappclone.video.BuildConfig
-import javax.inject.Inject
-import kotlinx.coroutines.CoroutineDispatcher
+import java.nio.charset.StandardCharsets
 import kotlinx.coroutines.CoroutineScope
+import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.launch
 
 class StreamVideoInitializer : Initializer<Unit> {
 
-  @Inject
-  lateinit var streamVideoTokenService: StreamVideoTokenService
-
-  @Inject
-  @Dispatcher(WhatsAppDispatchers.IO)
-  lateinit var dispatcher: CoroutineDispatcher
-
-  private val coroutineScope = CoroutineScope(dispatcher)
-
   override fun create(context: Context) {
-    StreamVideoEntryPoint.resolve(context)
-
-    val userId = "stream_user"
+    val userId = "stream"
+    val coroutineScope = CoroutineScope(Dispatchers.IO)
     coroutineScope.launch {
-      val token = streamVideoTokenService.fetchToken(
-        userId = userId,
-        apiKey = BuildConfig.STREAM_API_KEY
-      ).getOrThrow().token
-
       // initialize Stream Video SDK
       StreamVideoBuilder(
         context = context,
         apiKey = BuildConfig.STREAM_API_KEY,
-        token = token,
+        token = devToken(userId),
         user = User(
           id = userId,
-          name = "Stream User",
+          name = "stream",
           image = "http://placekitten.com/200/300",
           role = "admin"
         )
@@ -67,3 +50,15 @@ class StreamVideoInitializer : Initializer<Unit> {
 
   override fun dependencies(): List<Class<out Initializer<*>>> = emptyList()
 }
+
+fun devToken(userId: String): String {
+  require(userId.isNotEmpty()) { "User id must not be empty" }
+  val header = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9" //  {"alg": "HS256", "typ": "JWT"}
+  val devSignature = "devtoken"
+  val payload: String =
+    Base64.encodeToString(
+      "{\"user_id\":\"$userId\"}".toByteArray(StandardCharsets.UTF_8),
+      Base64.NO_WRAP
+    )
+  return "$header.$payload.$devSignature"
+}

gradle/libs.versions.toml

@@ -46,6 +46,7 @@ turbine = "1.0.0"
 [libraries]
 stream-chat-client = { group = "io.getstream", name = "stream-chat-android-client", version.ref = "streamChatSDK" }
 stream-chat-compose = { group = "io.getstream", name = "stream-chat-android-compose", version.ref = "streamChatSDK" }
+stream-video-core = { group = "io.getstream", name = "stream-video-android-core", version.ref = "streamVideoSDK" }
 stream-video-compose = { group = "io.getstream", name = "stream-video-android-compose", version.ref = "streamVideoSDK" }
 stream-log = { group = "io.getstream", name = "stream-log-android", version.ref = "streamLog" }
 sealedx-core = { group = "com.github.skydoves", name = "sealedx-core", version.ref = "sealedx" }