Search code examples
androidandroid-jetpack-composeexoplayerandroid-tvexoplayer2.x

Can't interact with ExoPlayer. Possible focus issue?


I'm trying to use ExoPlayer (2.18.7) via an AndroidView using Jetpack Compose (1.0.0-alpha06). The video shows up and plays correctly but I can't interact with it at all (D-pad, ok/select, nothing). I tried using a FocusRequester but nothing seems to work. Any ideas?

Here's my VideoPlayer composable:

@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()
        }
    }
}

Solution

  • Apparently, key events need to get forwarded to the player. See here.