Hi, I'm trying to create a video clips feed with a...

# compose

[Cyril Find]

Hi, I'm trying to create a video clips feed with a LazyColumn and Exoplayer views in each cell but the scrolling is very slow and I can't find a way to play only one video at a time
(basically i'm doing JetInstagram Reels but not fullscreen: https://github.com/vipulasri/JetInstagram/blob/master/app/src/main/java/com/vipulasri/jetinstagram/ui/components/VideoPlayer.kt)
Has anyone tried this ? Do you have ideas how to improve it ?

[Halil Ozercan]

I have implemented exactly what you want. First, I started with implementing a general purpose video player in compose which I can reuse in other projects. However, soon I'd realized that it's no easy task to play Video in a RecyclerView. Ofc by RecyclerView I mean that where views gets created and destroyed as they are scrolled.

There are few points you need to be careful about.

1. Always assume that scroll might be really fast. That's why, delay the initialization of video for like 150 ms. If composable gets destroyed in 150 ms, you will face no performance problems while fast scrolling.
2. Video players need to be coordinated with each other if you want to have only one video playing at a time. I've created a coordinator which receives updates from each item in LazyColumn to check their visible percentage in parent LazyColumn view. The rest depends on your algorithm and expected behavior.
3. Ofc your video player composable has to have a controller where you can send play and pause events from outside. Keep that in mind while writing your coordinator.

[Cyril Find]

Thanks a lot for you detailed response ! 🙏
In the meantime I have made some progress by only creating a Player view when the cell is the first visible item but the delay is a good point too
The thing is I don't really know how to make such a coordinator: how do you get the visible percentage ?
The performance is better now but I have issues with my cells "jumping" because I don't know the height of the video before it starts (but I have an idea for that ^^)

[Halil Ozercan]

I was lucky to be using reddit api where width and height are available before loading the video. So I could just get away with putting a placeholder with the exact size.

For coordinator, I kept track of positions of videoplayers and their controllers. For position tracking, you can use onGloballyPositioned modifier. That will give you all the information you need. Second step is to compare each item's location, size to others as well as the whole LazyColumn size.

[Cyril Find]

yes i'm going to get info from the backend too so that's fine 😉
ok i didn't know about onGloballyPositioned ! i'll have look at that, thank you very much ! 🙏