Skip to content

Black screen when ExoPlayer is used inside LazyColumn > LazyRow in Jetpack Compose #2493

@asos-luisalcantara

Description

@asos-luisalcantara

Version

Media3 main branch

More version details

When using ExoPlayer in Jetpack Compose within a LazyColumn that contains a LazyRow, the player sometimes renders as a black screen instead of displaying the video.

This issue appears only when the player is deeply nested within scrollable composables like LazyColumn > LazyRow. The audio plays, but the video surface is blank.

Devices that reproduce the issue

Using next layouts in demo-compose app (AndroidMedia)

  LazyColumn(
                    modifier = Modifier.padding(top = 245.dp),
                ) {
                    // Row with videos
                    item {
                        LazyRow(
                            horizontalArrangement = Arrangement.spacedBy(16.dp),
                            contentPadding = PaddingValues(horizontal = 16.dp, vertical = 24.dp),
                        ) {
                            items(videos.size) { index ->
                                val exoPlayer = remember {
                                    ExoPlayer.Builder(context).build().apply {
                                        setMediaItem(MediaItem.fromUri(videos[index]))
                                        prepare()
                                        playWhenReady = true
                                        repeatMode = Player.REPEAT_MODE_ONE
                                    }
                                }

                                PlayerSurface(
                                    player = exoPlayer,
                                    surfaceType = SURFACE_TYPE_SURFACE_VIEW,
                                    modifier = Modifier
                                        .width(140.dp)
                                        .height(245.dp)
                                        .padding(8.dp),
                                )
                            }
                        }
                    }

                    // Add dummy views to fill the column
                    items(30) { index ->
                        Text(
                            text = "Dummy item #$index",
                            modifier = Modifier
                                .fillMaxWidth()
                                .padding(16.dp)
                        )
                    }
                }

Scrolling up/down .. in some point a black screen appear. Please see video

bug_videos.mp4

Devices reproduce the issue

Samsung S21
Emulator

Reproducible in the demo app?

Yes

Reproduction steps

  1. Open compose demo app
  2. Set layout share in this ticket
  3. Scroll up/down and horizontally for a while
  4. Observer a black screen appear.

Expected result

Player should work without getting black screen

Actual result

Player show black screen after several scrolls

Media

No DRM (use same videos as demo app)

Bug Report

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions