puskal-khadka/TikTok-Compose

previous video not stop ,when scrolling to next!

Closed this issue · 4 comments

previous video not stop ,when scrolling to next!

Issue not generated on the current version. After scrolling to the next, previous video will stop, and new video plays. Can you provide more details about your issue along with device details

Issue not generated on the current version. After scrolling to the next, previous video will stop, and new video plays. Can you provide more details about your issue along with device details

i load a video source from url ,not from local asset , Is this what caused it? my video_list is blow

val videoLIst = listOf<String>(
            "https://app-test.obs.cn-east-2.myhuaweicloud.com/_d14ccf24-0409-4450-8316-620024279f16_1234.mp4",
            "https://app-test.obs.cn-east-2.myhuaweicloud.com/_67cb0c70-645e-4e42-942b-230159ed7aa0_%E4%B8%BD%E6%B1%9F.mp4")

my video compose copied from your code ,only diff is load video from url:

@OptIn(ExperimentalFoundationApi::class)
@Composable
@androidx.annotation.OptIn(androidx.media3.common.util.UnstableApi::class)
fun VideoPlayer(
    url: String,
    state: PagerState,
    pageIndex: Int,
    onSingleTap: (exoPlayer: ExoPlayer) -> Unit,
    onDoubleTap: (exoPlayer: ExoPlayer) -> Unit
) {

    var ctx = LocalContext.current

    if (pageIndex == state.settledPage) {

        var exoPlayer = remember(ctx) {
            ExoPlayer.Builder(ctx).build().apply {
                videoScalingMode = C.VIDEO_SCALING_MODE_SCALE_TO_FIT;
                repeatMode = Player.REPEAT_MODE_ONE
                val mediaItem = MediaItem.fromUri(url)
                setMediaItem(mediaItem)
                playWhenReady = true;
                prepare()
                addListener(object : Player.Listener {
                    override fun onRenderedFirstFrame() {
                        super.onRenderedFirstFrame()
                    }
                })
            }
        }

        var playerView = remember {
            PlayerView(ctx).apply {
                player = exoPlayer
                useController = false
            }
        }


        val lifecycleOwner by rememberUpdatedState(LocalLifecycleOwner.current)

        DisposableEffect(key1 = lifecycleOwner) {
            val lifecycleObserver = LifecycleEventObserver { _, event ->
                when (event) {
                    Lifecycle.Event.ON_STOP -> {
                        exoPlayer.pause()
                    }

                    Lifecycle.Event.ON_START -> exoPlayer.play()
                    else -> {}
                }
            }
            lifecycleOwner.lifecycle.addObserver(lifecycleObserver)

            onDispose {
                lifecycleOwner.lifecycle.removeObserver(lifecycleObserver)
            }
        }


        DisposableEffect(key1 = AndroidView(factory = {
            playerView
        }, modifier = Modifier.pointerInput(Unit) {
            detectTapGestures(onTap = {
                onSingleTap(exoPlayer)
            }, onDoubleTap = {
                onDoubleTap(exoPlayer)
            })
        }), effect = {
            onDispose {
                exoPlayer.release()
            }
        })
    }
}

fix it by adding AsyncImage() at last in my VideoPleyer

MediaItem.fromUri(<your_video_url>) , it will work even if it is from url. Did you change the code in other place also?, maybe current exoplayer not release in your that's why previous video also played.