diff --git a/CHANGELOG.md b/CHANGELOG.md index 4aadc72a8c..011edcaf01 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -32,6 +32,7 @@ On CallContent make sure to pass onBackPressed to CallAppBar in order to make th ### ✅ Added Add `participantLabelContent` slot to `CallLobby` so the lobby participant label can be hidden (`{}`) or fully customized. Brings the Compose API in line with React's `VideoPreview` slot overrides. +Add `videoPreviewModifier` parameter to `CallLobby` so callers can override the size, shape, padding, and background of the local video preview box. Defaults preserve the previous responsive height + 12dp rounded corner clip, matching iOS (parent-driven sizing in `GeometryReader`) and React (`className`-driven sizing on `VideoPreview`). ### ⚠️ Changed Deprecate the `CallLobby` overload that takes `labelPosition: Alignment`. Migrate to the new `participantLabelContent` slot; pass `{}` to hide the label or supply a composable to customize content and positioning. diff --git a/stream-video-android-ui-compose/api/stream-video-android-ui-compose.api b/stream-video-android-ui-compose/api/stream-video-android-ui-compose.api index 548c217356..3b122c1ca0 100644 --- a/stream-video-android-ui-compose/api/stream-video-android-ui-compose.api +++ b/stream-video-android-ui-compose/api/stream-video-android-ui-compose.api @@ -1039,7 +1039,7 @@ public final class io/getstream/video/android/compose/ui/components/call/diagnos public final class io/getstream/video/android/compose/ui/components/call/lobby/CallLobbyKt { public static final fun CallLobby (Landroidx/compose/ui/Modifier;Lio/getstream/video/android/core/Call;Lio/getstream/video/android/model/User;Landroidx/compose/ui/Alignment;ZZLio/getstream/video/android/core/ParticipantState$Video;Lio/getstream/video/android/compose/permission/VideoPermissionsState;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function3;Lkotlin/jvm/functions/Function2;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function4;Landroidx/compose/runtime/Composer;III)V - public static final fun CallLobby (Landroidx/compose/ui/Modifier;Lio/getstream/video/android/core/Call;Lio/getstream/video/android/model/User;ZZLio/getstream/video/android/core/ParticipantState$Video;Lio/getstream/video/android/compose/permission/VideoPermissionsState;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function3;Lkotlin/jvm/functions/Function2;Lkotlin/jvm/functions/Function3;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function4;Landroidx/compose/runtime/Composer;III)V + public static final fun CallLobby (Landroidx/compose/ui/Modifier;Lio/getstream/video/android/core/Call;Lio/getstream/video/android/model/User;ZZLio/getstream/video/android/core/ParticipantState$Video;Lio/getstream/video/android/compose/permission/VideoPermissionsState;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function3;Lkotlin/jvm/functions/Function2;Landroidx/compose/ui/Modifier;Lkotlin/jvm/functions/Function3;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function4;Landroidx/compose/runtime/Composer;III)V } public final class io/getstream/video/android/compose/ui/components/call/lobby/ComposableSingletons$CallLobbyKt { diff --git a/stream-video-android-ui-compose/src/main/kotlin/io/getstream/video/android/compose/ui/components/call/lobby/CallLobby.kt b/stream-video-android-ui-compose/src/main/kotlin/io/getstream/video/android/compose/ui/components/call/lobby/CallLobby.kt index e6cb3ce561..391fa43819 100644 --- a/stream-video-android-ui-compose/src/main/kotlin/io/getstream/video/android/compose/ui/components/call/lobby/CallLobby.kt +++ b/stream-video-android-ui-compose/src/main/kotlin/io/getstream/video/android/compose/ui/components/call/lobby/CallLobby.kt @@ -75,6 +75,10 @@ import io.getstream.video.android.ui.common.R * @param permissions Android permissions that should be required to render a video call properly. * @param onRenderedContent A video renderer, which renders a local video track before joining a call. * @param onDisabledContent Content is shown that a local camera is disabled. It displays user avatar by default. + * @param videoPreviewModifier Modifier applied to the [Box] that wraps the local video preview. Defaults + * to a responsive height (180/280/200dp depending on screen size and orientation), full width, and a + * 12dp rounded corner clip. Override to provide custom size, shape, padding, or background — useful + * when the preview needs to match a host layout instead of the SDK's default sizing. * @param participantLabelContent Slot for the participant label overlaid on the preview. Defaults to a * label showing the user's name and microphone state at [Alignment.BottomStart]. Pass `{}` to hide the * label entirely, or override to provide custom positioning and content (use [BoxScope.align] inside). @@ -118,6 +122,7 @@ public fun CallLobby( onDisabledContent: @Composable () -> Unit = { OnDisabledContent(user = user) }, + videoPreviewModifier: Modifier = defaultVideoPreviewModifier(), participantLabelContent: @Composable BoxScope.() -> Unit = { DefaultParticipantLabel( user = user, @@ -144,18 +149,10 @@ public fun CallLobby( DefaultPermissionHandler(videoPermission = permissions) MediaPiPLifecycle(call = call, PictureInPictureConfiguration(false, false)) - val configuration = LocalConfiguration.current - val isPortrait = configuration.orientation == Configuration.ORIENTATION_PORTRAIT - val screenHeightDp = configuration.screenHeightDp - - val boxModifier = Modifier - .responsiveHeight(isPortrait, screenHeightDp) - .fillMaxWidth() - .clip(RoundedCornerShape(12.dp)) Column(modifier = modifier) { Box( - modifier = boxModifier, + modifier = videoPreviewModifier, ) { if (isCameraEnabled) { onRenderedContent.invoke(video) @@ -358,6 +355,16 @@ private fun OnDisabledContent(user: User) { } } +@Composable +private fun defaultVideoPreviewModifier(): Modifier { + val configuration = LocalConfiguration.current + val isPortrait = configuration.orientation == Configuration.ORIENTATION_PORTRAIT + return Modifier + .responsiveHeight(isPortrait = isPortrait, screenHeightDp = configuration.screenHeightDp) + .fillMaxWidth() + .clip(RoundedCornerShape(12.dp)) +} + private fun Modifier.responsiveHeight(isPortrait: Boolean, screenHeightDp: Int): Modifier { val isSmallDevice = screenHeightDp <= 640 val height = if (isPortrait && isSmallDevice) {