I’m building a vertical video feed in Jetpack Compose using VerticalPager to display a list of video URLs. I want each video to play only when the corresponding page is visible. However, I am facing an issue where the pager keeps scrolling continuously without stopping, and it resets back to page 0 after scrolling.

Here’s the code I’m using to implement the VerticalPager:

package com.ae.portraitvideoplayer

import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.pager.VerticalPager
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun VerticalVideoFeedScreen() {
    val videoUrls = listOf(
        "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4",
        "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4",
        "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
    )

    // Initialize the PagerState
    val pagerState = rememberPagerState(
        initialPage = 0, // Start from the first video
        pageCount = { videoUrls.size } // Dynamic page count based on video list size
    )

    // Use VerticalPager
    Box {
        VerticalPager(
            state = pagerState,
            modifier = Modifier.fillMaxSize()
        ) { page ->
            // Access the video URL at the current page
            val videoUrl = videoUrls[page]

            // Determine if the current page is active
            val isCurrentPage = pagerState.currentPage == page

            // Display the video player for the current page
            PortraitVideoPlayer(
                videoUrl = videoUrl,
                shouldPlay = isCurrentPage
            )
        }
    }
}

Problem:

The VerticalPager scrolls continuously and doesn’t stop after reaching the last page.
After scrolling, it resets to page 0, even if I’m at the last page.
I want the pager to stop scrolling and only move to the next page when the user scrolls. Additionally, I want each video to play only when the corresponding page is active.

What I’ve Tried:

I’m using VerticalPager with a dynamic pageCount based on the size of the videoUrls list.
I check if the current page is active with the shouldPlay flag (isCurrentPage), but it still doesn’t resolve the issue.
Could anyone help me figure out why this happens and how I can fix it?