Can't interact with ExoPlayer using Jetpack Compose on Android TV

[taschmidt]

Media3 Version

ExoPlayer 2.18.7

Devices that reproduce the issue

Emulator running Android TV API 31

Devices that do not reproduce the issue

None

Reproducible in the demo app?

Yes

Reproduction steps

Using androidx.tv version 1.0.0-alpha06 with the following composable (adding focusable and focusRequester were my attempts to fix it):

@OptIn(ExperimentalComposeUiApi::class)
@Composable
fun VideoPlayer(mediaItem: VideoApi.MediaItem) {
    val (playerFocus) = remember { FocusRequester.createRefs() }
    val context = LocalContext.current

    val exoPlayer = remember {
        ExoPlayer.Builder(context)
            .build()
            .apply {
                addMediaItem(
                    MediaItem.Builder()
                        .setUri(mediaItem.hlsCaptions)
                        .setMimeType(MimeTypes.APPLICATION_M3U8)
                        .build()
                )
                prepare()
                playWhenReady = true
            }
    }

    LaunchedEffect(Unit) {
        playerFocus.requestFocus()
    }

    DisposableEffect(
        AndroidView(
            modifier = Modifier
                .focusable(true)
                .focusRequester(playerFocus),
            factory = {
                StyledPlayerView(context).apply {
                    player = exoPlayer
                    useController = true
                    controllerAutoShow = true
                    setShowBuffering(StyledPlayerView.SHOW_BUFFERING_ALWAYS)
                }
            }
        )
    ) {
        onDispose {
            exoPlayer.release()
        }
    }
}

Expected result

Should be able to interact, i.e. D-pad should bring up video HUD controls.

Actual result

Any key presses (besides back) do nothing.

Media

Any media should show it. I'm using an HLS stream. For example:
https://m.wsj.net/video/20230531/eaa54145-d07a-4100-8153-2eaf8d671921/1/hls/manifest-hd-wifi.m3u8

Bug Report

• You will email the zip file produced by adb bugreport to dev.exoplayer@gmail.com after filing this issue.

[marcbaechinger]

I'm not a Compose expert tbh. Without Compose on TV, the key events coming from the remote need to arrive here in dispatchKeyEvent for that to work. In the main demo app we delegate the calls to dispatchKeyEvents of the PlayerActivity to the PlayerView.

I believe we mainly do that for TV to have the DPad working.

How are key events delegated from your activity through the Compose stack to do what the demo app does without compose?

[taschmidt]

I'm still digging. What I've tried since:

• Tried throwing Modifier.onKeyEvent logging everywhere I could think of and I'm not seeing anything. :(
• Had a small glimmer of hope, on a whim I moved the addMediaItem/prepare/playWhenReady calls down to the AndroidView/StyledPlayerView/apply block. That caused the playback controls to be shown initially and I could move focus around and interact. Unfortunately, when it hid itself after a few seconds I found that I could no longer interact again. :(

[taschmidt]

Ok, possible breakthrough. I think my onKeyEvent was working after all, it's just that Android Studio was being weird. Also, I think I had to add the focusable modifier to my AndroidView to make it work. Once I figured all that out, I followed your helpful tip @marcbaechinger. I had to move my StyledPlayerView to state so I could call directly into it on key events but it seems to be working. Here's what I ended up with:

@Composable
fun VideoPlayer(mediaItem: VideoApi.MediaItem,
                modifier: Modifier = Modifier
) {
    val context = LocalContext.current

    val exoPlayer = remember {
        ExoPlayer.Builder(context)
            .build()
    }

    val playerView = remember {
        StyledPlayerView(context).apply {
            player = exoPlayer
            useController = true
            controllerAutoShow = true
            setShowBuffering(StyledPlayerView.SHOW_BUFFERING_ALWAYS)

            exoPlayer.setMediaItem(
                MediaItem.Builder()
                    .setUri(mediaItem.hlsCaptions)
                    .setMimeType(MimeTypes.APPLICATION_M3U8)
                    .build()
            )
            exoPlayer.prepare()
            exoPlayer.playWhenReady = true
        }
    }

    DisposableEffect(
        AndroidView(
            modifier = modifier.focusable()
                .onKeyEvent { playerView.dispatchKeyEvent(it.nativeKeyEvent) },
            factory = { playerView }
        )
    ) {
        onDispose {
            exoPlayer.release()
        }
    }
}

[marcbaechinger]

Noice! Glad it's working. Many thanks for the explanation!

I tagged this issue as documentation candidate. Guess this would be useful in a short section of the developer guide.

The code above or some other code involved in the problem you just solved, isn't related to androidx.tv. The used APIs are common Compose or Media3 classes only. Is this correct?