Refactor video calling tutorial samples (#1087)

GetStream · May 8, 2024 · 4955745 · 4955745
1 parent 0962202
commit 4955745
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 34 deletions.
diff --git a/.../tutorial-video/src/main/kotlin/io/getstream/video/android/tutorial/video/MainActivity.kt b/.../tutorial-video/src/main/kotlin/io/getstream/video/android/tutorial/video/MainActivity.kt
@@ -17,16 +17,13 @@
 package io.getstream.video.android.tutorial.video
 
 import android.os.Bundle
-import android.util.Log
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
 import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.BoxWithConstraints
-import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material.Text
-import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -43,7 +40,6 @@ import io.getstream.video.android.compose.permission.LaunchCallPermissions
 import io.getstream.video.android.compose.theme.VideoTheme
 import io.getstream.video.android.compose.ui.components.call.renderer.FloatingParticipantVideo
 import io.getstream.video.android.compose.ui.components.call.renderer.ParticipantVideo
-import io.getstream.video.android.compose.ui.components.video.VideoRenderer
 import io.getstream.video.android.core.GEO
 import io.getstream.video.android.core.RealtimeConnection
 import io.getstream.video.android.core.StreamVideoBuilder
@@ -63,21 +59,23 @@ class MainActivity : ComponentActivity() {
 
         // replace the secrets with the following instruction:
         // https://getstream.io/video/docs/android/playground/demo-credentials/
-        val userId = "REPLACE_WITH_USER_ID"
+        val apiKey = "REPLACE_WITH_API_KEY"
         val userToken = "REPLACE_WITH_TOKEN"
+        val userId = "REPLACE_WITH_orange-flower-9"
         val callId = "REPLACE_WITH_CALL_ID"
 
         // step1 - create a user.
         val user = User(
             id = userId, // any string
-            name = "Tutorial", // name and image are used in the UI
+            name = "Tutorial", // name and image are used in the UI,
+            image = "https://bit.ly/2TIt8NR",
             role = "admin",
         )
 
         // step2 - initialize StreamVideo. For a production app we recommend adding the client to your Application class or di module.
         val client = StreamVideoBuilder(
             context = applicationContext,
-            apiKey = "REPLACE_WITH_API_KEY", // demo API key
+            apiKey = apiKey, // demo API key
             geo = GEO.GlobalEdgeNetwork,
             user = user,
             token = userToken,
@@ -92,46 +90,38 @@ class MainActivity : ComponentActivity() {
 
             // step4 - apply VideTheme
             VideoTheme {
-                // step5 - define required properties.
+                // step5 - define required properties
                 val remoteParticipants by call.state.remoteParticipants.collectAsState()
                 val remoteParticipant = remoteParticipants.firstOrNull()
-                val me by call.state.localParticipant.collectAsState()
+                val me by call.state.me.collectAsState()
                 val connection by call.state.connection.collectAsState()
                 var parentSize: IntSize by remember { mutableStateOf(IntSize(0, 0)) }
 
-                LaunchedEffect(key1 = connection) {
-                    Log.e("Test", "connection: $connection")
-                }
-
-                // step5 - render a local and remote videos.
-                BoxWithConstraints(
+                // step6 - render text that displays the connection status
+                Box(
                     contentAlignment = Alignment.Center,
                     modifier = Modifier
                         .fillMaxSize()
-                        .background(VideoTheme.colors.baseSheetPrimary)
+                        .background(VideoTheme.colors.baseSenary)
                         .onSizeChanged { parentSize = it },
                 ) {
                     if (remoteParticipant != null) {
-                        val remoteVideo by remoteParticipant.video.collectAsState()
-
-                        Column(modifier = Modifier.fillMaxSize()) {
-                            VideoRenderer(
-                                modifier = Modifier.weight(1f),
-                                call = call,
-                                video = remoteVideo,
-                            )
-                        }
+                        ParticipantVideo(
+                            modifier = Modifier.fillMaxSize(),
+                            call = call,
+                            participant = remoteParticipant,
+                        )
                     } else {
                         if (connection != RealtimeConnection.Connected) {
                             Text(
-                                text = "loading...",
+                                text = "waiting for a remote participant...",
                                 fontSize = 30.sp,
                                 color = VideoTheme.colors.basePrimary,
                             )
                         } else {
                             Text(
                                 modifier = Modifier.padding(30.dp),
-                                text = "Join call ${call.id} in your browser",
+                                text = "Join call ${call.id} in your browser to see the video here",
                                 fontSize = 30.sp,
                                 color = VideoTheme.colors.basePrimary,
                                 textAlign = TextAlign.Center,
@@ -140,11 +130,11 @@ class MainActivity : ComponentActivity() {
                     }
 
                     // floating video UI for the local video participant
-                    if (me != null) {
+                    me?.let { localVideo ->
                         FloatingParticipantVideo(
                             modifier = Modifier.align(Alignment.TopEnd),
                             call = call,
-                            participant = me!!,
+                            participant = localVideo,
                             parentBounds = parentSize,
                         )
                     }

diff --git a/...tutorial-video/src/main/kotlin/io/getstream/video/android/tutorial/video/MainActivity2.kt b/...tutorial-video/src/main/kotlin/io/getstream/video/android/tutorial/video/MainActivity2.kt
@@ -45,21 +45,23 @@ class MainActivity2 : ComponentActivity() {
 
         // replace the secrets with the following instruction:
         // https://getstream.io/video/docs/android/playground/demo-credentials/
-        val userId = "REPLACE_WITH_USER_ID"
+        val apiKey = "REPLACE_WITH_API_KEY"
         val userToken = "REPLACE_WITH_TOKEN"
+        val userId = "REPLACE_WITH_orange-flower-9"
         val callId = "REPLACE_WITH_CALL_ID"
 
         // step1 - create a user.
         val user = User(
             id = userId, // any string
             name = "Tutorial", // name and image are used in the UI
+            image = "https://bit.ly/2TIt8NR",
             role = "admin",
         )
 
         // step2 - initialize StreamVideo. For a production app we recommend adding the client to your Application class or di module.
         val client = StreamVideoBuilder(
             context = applicationContext,
-            apiKey = "REPLACE_WITH_API_KEY", // demo API key
+            apiKey = apiKey, // demo API key
             geo = GEO.GlobalEdgeNetwork,
             user = user,
             token = userToken,

diff --git a/...tutorial-video/src/main/kotlin/io/getstream/video/android/tutorial/video/MainActivity3.kt b/...tutorial-video/src/main/kotlin/io/getstream/video/android/tutorial/video/MainActivity3.kt
@@ -47,21 +47,23 @@ class MainActivity3 : ComponentActivity() {
 
         // replace the secrets with the following instruction:
         // https://getstream.io/video/docs/android/playground/demo-credentials/
-        val userId = "REPLACE_WITH_USER_ID"
+        val apiKey = "REPLACE_WITH_API_KEY"
         val userToken = "REPLACE_WITH_TOKEN"
+        val userId = "REPLACE_WITH_orange-flower-9"
         val callId = "REPLACE_WITH_CALL_ID"
 
         // step1 - create a user.
         val user = User(
             id = userId, // any string
             name = "Tutorial", // name and image are used in the UI
+            image = "https://bit.ly/2TIt8NR",
             role = "admin",
         )
 
         // step2 - initialize StreamVideo. For a production app we recommend adding the client to your Application class or di module.
         val client = StreamVideoBuilder(
             context = applicationContext,
-            apiKey = "REPLACE_WITH_API_KEY", // demo API key
+            apiKey = apiKey, // demo API key
             geo = GEO.GlobalEdgeNetwork,
             user = user,
             token = userToken,