Video overlay another video with `initialVideoFitMode = ScreenResize.FIT`

[Evleaps]

I have 4 uploaded remote videos, last one overlay the first one with the config initialVideoFitMode = ScreenResize.FILL

if I change initialVideoFitMode to initialVideoFitMode = ScreenResize.FIT it looks correct, but I need exactly FILL.

code:

@Composable
fun MediaCard(
    modifier: Modifier,
    mediaItem: ListingMedia,
    isDragging: Boolean = false,
    onIntent: (AddListingMediaViewModel.Intent) -> Unit,
) {
    val rotation = remember { Animatable(0f) }
    val scope = rememberCoroutineScope()

    LaunchedEffect(isDragging) {
        if (isDragging) {
            rotation.animateTo(
                targetValue = 0f,
                animationSpec = infiniteRepeatable(
                    animation = tween(durationMillis = 50, easing = LinearEasing),
                    repeatMode = androidx.compose.animation.core.RepeatMode.Reverse
                )
            ) {
                scope.launch { rotation.snapTo(if (value > 0) -4f else 4f) }
            }
        } else {
            rotation.animateTo(0f, animationSpec = tween(durationMillis = 50))
        }
    }

    Card(
        modifier = modifier
            .size(110.dp)
            .graphicsLayer {
                rotationZ = rotation.value
            },
        colors = CardDefaults.cardColors(
            containerColor = DesignSystem.elementColor.backgroundPrimary
        ),
        shape = RoundedCornerShape(spacing.x12),
        elevation = CardDefaults.cardElevation(
            defaultElevation = if (isDragging) 12.dp else 4.dp
        )
    ) {
        Box {
            when (mediaItem) {
                is ListingMedia.ListingVideoItem -> RemoteVideo( // <---- video in the card
                    url = mediaItem.url,
                    id = mediaItem.uniqueName,
                    onIntent = onIntent
                )

                is ListingMedia.ListingImageItem -> {
                    Photo(
                        uniqueName = mediaItem.uniqueName,
                        url = mediaItem.url,
                        onIntent = onIntent
                    )

                    EditIcon(mediaItem.uniqueName, mediaItem.isFloorPlan, onIntent)
                }

                is ListingMedia.ListingTour3DItem -> TODO()
            }

            if (mediaItem is ListingMedia.ListingImageItem) {
                FloorPlanBadge(mediaItem.isFloorPlan)
            }
            LoadingProgress(mediaItem.uploadProgress)
        }
    }
}


@Composable
private fun rememberPlayerHost(url: String): MediaPlayerHost {
    return remember(url) {
        MediaPlayerHost(
            mediaUrl = url,
            isPaused = false,
            isMuted = true,
            initialSpeed = PlayerSpeed.X1,
            initialVideoFitMode = ScreenResize.FILL,
            isLooping = true,
            startTimeInSeconds = 0f,
            isFullScreen = false
        )
    }
}

@Composable
private fun rememberPlayerConfig(): VideoPlayerConfig {
    return remember {
        VideoPlayerConfig(
            pauseResumeIconSize = 0.dp,
            isAutoHideControlEnabled = false,
            playIconResource = null,
            pauseIconResource = null,
            showControls = false,
            isPauseResumeEnabled = false,
            isSeekBarVisible = false,
            isDurationVisible = false,
            isMuteControlEnabled = false,
            isSpeedControlEnabled = false,
            isScreenLockEnabled = false,
            isZoomEnabled = false,
            isGestureVolumeControlEnabled = false,
            showVideoQualityOptions = false,
            showAudioTracksOptions = false,
            showSubTitlesOptions = false,
            enablePIPControl = false,
            isScreenResizeEnabled = false,
            isFastForwardBackwardEnabled = false,
            enableFullEdgeToEdge = false,
            isFullScreenEnabled = false,
        )
    }
}

@Composable
private fun RemoteVideo(
    url: String,
    id: String,
    onIntent: (AddListingMediaViewModel.Intent) -> Unit,
) {
    val playerHost = rememberPlayerHost(url)
    val playerConfig = rememberPlayerConfig()
    playerHost.onError = { err ->
        onIntent(AddListingMediaViewModel.Intent.OnVideoLoadError(id, err.message))
    }

    VideoPlayerComposable(
        modifier = Modifier
            .clip(RoundedCornerShape(spacing.x8))
            .fillMaxSize(),
        playerHost = playerHost,
        playerConfig = playerConfig,
    )
}

Env:

kotlin 2.3
videoPlayer = 1.0.50
compose-multiplatform = "1.10.0-rc02"
android-gradle-plugin = "8.13.2"

[ctn-mobile-innovation]

Thanks for reporting this. After review, this is a known limitation of Media3 with fill/zoom mode. There’s no fix in the current codebase, but we will continue investigating and address it if a reliable solution is found. @Evleaps

[Evleaps]

Thanks for the response a lot. Will wait.
I don't mind closing this issue, but it's better if you do it yourself if you think it needs to be closed.