Demo-app-improvements (#1333)

* Show avatar in lobby

* Add close button for Share dialog

* Rename shared prefs file based on version

* Improve closed captions

* Revert startClosedCaptions call

---------

Co-authored-by: Aleksandar Apostolov <[email protected]>

Author: liviu-timar

demo-app/src/main/kotlin/io/getstream/video/android/ui/call/CallScreen.kt

@@ -29,6 +29,7 @@ import androidx.activity.result.contract.ActivityResultContracts
 import androidx.compose.animation.Crossfade
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.BoxWithConstraints
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
@@ -38,10 +39,13 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.material.ExperimentalMaterialApi
+import androidx.compose.material.Icon
+import androidx.compose.material.IconButton
 import androidx.compose.material.ModalBottomSheetValue
 import androidx.compose.material.Snackbar
 import androidx.compose.material.Text
 import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Close
 import androidx.compose.material.icons.filled.MoreVert
 import androidx.compose.material.icons.filled.People
 import androidx.compose.material.rememberModalBottomSheetState
@@ -58,6 +62,7 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.platform.LocalContext
@@ -140,6 +145,7 @@ fun CallScreen(
     var isShowingStats by remember { mutableStateOf(false) }
     var layout by remember { mutableStateOf(LayoutType.DYNAMIC) }
     var unreadCount by remember { mutableIntStateOf(0) }
+    var showShareDialog by remember { mutableStateOf(true) }
     var showParticipants by remember { mutableStateOf(false) }
     val chatState = rememberModalBottomSheetState(
         initialValue = ModalBottomSheetValue.Hidden,
@@ -495,7 +501,7 @@ fun CallScreen(
                                 ClosedCaptionsContainer(
                                     call,
                                     ClosedCaptionsDefaults.streamThemeConfig().copy(
-                                        yOffset = (-80).dp,
+                                        yOffset = (-100).dp,
                                     ),
                                     closedCaptionUiState,
                                 )
@@ -546,7 +552,8 @@ fun CallScreen(
 
         val isPictureInPictureMode = rememberIsInPipMode()
         if (!isPictureInPictureMode) {
-            if (participantsSize.size == 1 &&
+            if (showShareDialog &&
+                participantsSize.size == 1 &&
                 !chatState.isVisible &&
                 orientation == Configuration.ORIENTATION_PORTRAIT
             ) {
@@ -558,17 +565,31 @@ fun CallScreen(
                     alignment = Alignment.BottomCenter,
                     offset = IntOffset(
                         0,
-                        -(VideoTheme.dimens.componentHeightL + VideoTheme.dimens.spacingS).toPx()
-                            .toInt(),
+                        -(VideoTheme.dimens.componentHeightL + VideoTheme.dimens.spacingS).toPx().toInt(),
                     ),
                 ) {
-                    ShareCallWithOthers(
-                        modifier = Modifier.fillMaxWidth(),
-                        call = call,
-                        clipboardManager = clipboardManager,
-                        env = env,
-                        context = context,
-                    )
+                    Box {
+                        ShareCallWithOthers(
+                            modifier = Modifier.fillMaxWidth(),
+                            call = call,
+                            clipboardManager = clipboardManager,
+                            env = env,
+                            context = context,
+                        )
+
+                        IconButton(
+                            modifier = Modifier
+                                .align(Alignment.TopEnd)
+                                .padding(top = 10.dp, end = 10.dp),
+                            onClick = { showShareDialog = false },
+                        ) {
+                            Icon(
+                                tint = Color.White,
+                                imageVector = Icons.Default.Close,
+                                contentDescription = Icons.Default.Close.name,
+                            )
+                        }
+                    }
                 }
             }
         }

demo-app/src/main/kotlin/io/getstream/video/android/ui/lobby/CallLobbyScreen.kt

@@ -68,8 +68,11 @@ import io.getstream.video.android.CallActivity
 import io.getstream.video.android.R
 import io.getstream.video.android.compose.theme.VideoTheme
 import io.getstream.video.android.compose.ui.components.avatar.UserAvatar
+import io.getstream.video.android.compose.ui.components.avatar.UserAvatarBackground
 import io.getstream.video.android.compose.ui.components.base.StreamButton
 import io.getstream.video.android.compose.ui.components.call.lobby.CallLobby
+import io.getstream.video.android.compose.ui.components.video.VideoRenderer
+import io.getstream.video.android.compose.ui.components.video.config.videoRenderConfig
 import io.getstream.video.android.core.Call
 import io.getstream.video.android.core.call.state.ToggleCamera
 import io.getstream.video.android.core.call.state.ToggleMicrophone
@@ -252,6 +255,26 @@ private fun CallLobbyBody(
                 .padding(VideoTheme.dimens.spacingM),
             isCameraEnabled = isCameraEnabled,
             isMicrophoneEnabled = isMicrophoneEnabled,
+            onRenderedContent = {
+                val videoRendererConfig = remember {
+                    videoRenderConfig {
+                        this.fallbackContent = {
+                            val userName = it.user.userNameOrId
+                            val userImage = it.user.image
+                            UserAvatarBackground(userImage = userImage, userName = userName)
+                        }
+                    }
+                }
+                VideoRenderer(
+                    modifier = Modifier
+                        .fillMaxSize()
+                        .background(VideoTheme.colors.baseSheetTertiary)
+                        .testTag("on_rendered_content"),
+                    call = call,
+                    video = it,
+                    videoRendererConfig = videoRendererConfig,
+                )
+            },
             onCallAction = { action ->
                 when (action) {
                     is ToggleCamera -> onToggleCamera(action.isEnabled)

demo-app/src/main/kotlin/io/getstream/video/android/util/config/AppConfig.kt

@@ -41,7 +41,7 @@ import kotlinx.coroutines.flow.MutableStateFlow
 object AppConfig {
     // Constants
     private val logger by taggedLogger("RemoteConfig")
-    private const val SHARED_PREF_NAME = "stream_demo_app"
+    private const val SHARED_PREF_NAME = "stream_demo_app_${BuildConfig.VERSION_CODE}"
     private const val SELECTED_ENV = "selected_env_v2"
 
     // Data