I'm integrating ExoPlayer in Compose. I need it in a LazyColumn and the video is supposed to pause/resume every time it leave the screen or enter it. Can anyone help me on how to monitor the visibility of a composable on the Screen? (code in the thread)

🙏 :thread-please: 👉 https://kotlinlang.slack.com/archives/CJLTWPH7S/p1615303547114200

With my very basic integration (just drafting it) I can hear the video stops right away when i scroll UP but it takes a while (I need to scroll away for at least 2 screens) for the video to stop if i scroll DOWN. -- it hits the

exoPlayer.release()

in both cases (I still have to save the state and resume it) (Also can anyone tell me if you see any problem in the code below?)

@Composable
fun Video() {
    val context = LocalContext.current
    val lifecycleState by LocalLifecycleOwner.current.lifecycle.collectState()
    val exoPlayer = remember {
        SimpleExoPlayer.Builder(context.applicationContext)
            .build()
    }
    DisposableEffect(key1 = exoPlayer) {
        val videoItem =
            MediaItem.fromUri("<https://storage.googleapis.com/exoplayer-test-media-0/BigBuckBunny_320x180.mp4>")
        exoPlayer.setMediaItem(videoItem)
//        exoPlayer.volume = 0f
        exoPlayer.prepare()
        onDispose { exoPlayer.release() }
    }
    exoPlayer.playWhenReady = lifecycleState.isAtLeast(Lifecycle.State.RESUMED)
    AndroidView(
        modifier = Modifier
            .fillMaxWidth()
            .aspectRatio(16f / 9f),
        factory = { context ->
            PlayerView(context).apply {
                player = exoPlayer
                useController = false
            }
        }
    )
}

@Composable
private fun Lifecycle.collectState(): State<Lifecycle.State> {
    val state = remember { mutableStateOf(currentState) }
    DisposableEffect(this) {
        val listener = LifecycleEventObserver { _, _ ->
            state.value = currentState
        }
        addObserver(listener)
        onDispose {
            removeObserver(listener)
        }
    }
    return state
}

I've found this https://github.com/evant/compose-shown/blob/main/shown/src/main/java/me/tatarka/compose/shown/Shown.kt containing some code to detect when a Composable becomes visible (I also need the opposite) is there any better way / API to monitor how much of a composable is visible on the screen at any given time? Thanks

Yes, thank you 👌

You should be able to use LazyListState.isVisible() for this. You might need some of the properties of LazyListState.layoutInfo too, depending on your exact requirements

Thanks @Chris Miller I'll look into this

It shouldn't have to - the enabling/disabling code can live outside the LazyColumn e.g something like:

val state = rememberLazyListState()
LazyColumn(state = state, ...) {
  ...
}

if (state.isVisible(videoItemIndex) {
  // start video if not already started
} else {
  // stop video if not already stopped
}

You'll likely need extra smarts around the state handling, but the above is the general gist of it I think

The container, in my case, is dynamic with multiple items types in it. The container knows almost nothing of the items inside it. So it doesn't know about video start/stop either. Also I do not see a

isVisible()

method in LazyListState

See here and here.

Ah sorry, isVisible() is my own 😂 defined as:

private fun LazyListState.isVisible(index: Int): Boolean {
  return index >= firstVisibleItemIndex && index < firstVisibleItemIndex + layoutInfo.visibleItemsInfo.size
}

@Albert Chang thanks I've read those.

You can use a snapshot flow. Something like

snapshotFlow { listState.layoutInfo.visibleItemsInfo.any { it.key == someKey } }.collect()

@Albert Chang but snapshotFlow converts a State into a Flow. I don't have a State. LazyListState contains vars (layoutInfo is a var) the state is hidden

private val layoutInfoState = mutableStateOf<LazyListLayoutInfo>(EmptyLazyListLayoutInfo)

would it work anyway?

layoutInfo

is a property backed by a mutable state, not a variable. And you don't necessarily need a state. Flow is also observable. You can collect the snapshot flow in a

LaunchedEffect

and when the item becomes invisible you stop the player.

@Albert Chang I'm trying to integrate this