Video Overflows from Bottom Sheet When Scrolling

Question

I'm working on an app where a video player is embedded inside a bottom sheet. When I scroll within the bottom sheet, the video unexpectedly goes out of bounds and overflows outside of the bottom sheet's visible area. I need the video to remain within the bottom sheet while scrolling, without disrupting the layout.

Here's the video of the issue I'm facing.

I created a composable video player using this code:

@OptIn(UnstableApi::class)
@Composable
fun VideoPlayer(
  modifier: Modifier = Modifier,
  file: File,
) {
  val context = LocalContext.current
  val exoPlayer = remember { ExoPlayer.Builder(context).build() }

  // Get the video URI from internal storage
  val correctedFile = file.takeIf { it.name.endsWith(".mp4") } ?: File(file.parent, "${file.name}.mp4")
  val videoUri = Uri.fromFile(correctedFile)

  // Set the media source
  val mediaItem = MediaItem.Builder()
    .setUri(videoUri)
    .setMimeType(MimeTypes.VIDEO_MP4) // Specify the correct MIME type
    .build()
  exoPlayer.setMediaItem(mediaItem)
  exoPlayer.prepare()
  exoPlayer.videoScalingMode = C.VIDEO_SCALING_MODE_SCALE_TO_FIT_WITH_CROPPING
  exoPlayer.playWhenReady = true

  // Add a listener to log errors
  exoPlayer.addListener(object : Player.Listener {
    override fun onPlayerError(error: PlaybackException) {
      Timber.e("VideoPlayer", "Player error: ${error.message}")
    }
  })

  // Use AndroidView to integrate ExoPlayer's PlayerView
  AndroidView(
    modifier = modifier
      .clipToBounds(),
    factory = { ctx ->
    PlayerView(ctx).apply {
      player = exoPlayer
      resizeMode = AspectRatioFrameLayout.RESIZE_MODE_ZOOM
    }
  })

  // Clean up the ExoPlayer when the composable is disposed
  DisposableEffect(Unit) {
    onDispose {
      exoPlayer.release()
    }
  }
}

I initially suspected the issue was related to AndroidView, but after replacing PlayerView with an ImageView, everything worked as expected. This suggests the problem is specifically tied to PlayerView.

Currently, I'm using a Column with vertical scrolling to populate the content of the bottom sheet. I also tried using LazyColumn, but the same issue occurred.

Does anyone know what might be causing this behavior with PlayerView? How can I resolve it and ensure the video player stays correctly within the bottom sheet during scrolling?

Answer 1

SurfaceView vs TextureView

As mentioned by @sdex in this specific case we need to use TextureView instead of SurfaceView. Here's a quick break down on why:

SurfaceView:

• Uses a dedicated surface that is drawn outside the view hierarchy.

• It operates in a separate drawing thread, making it more efficient for performance-heavy tasks like video playback.

• Does not support transparency natively. It’s always drawn over the other views unless special handling is applied.

TextureView:

• Operates within the view hierarchy, which means it behaves like a regular View and is rendered within the app’s UI thread.

• Uses OpenGL for rendering, making it flexible for transformations like scaling, rotating, and applying effects.

• It may not perform as efficiently as SurfaceView for video playback, because it runs in the same thread as the UI.

Solution

Since I wanted to apply a center crop to the video and it's difficult achieve a good proportion using Matrix, I defined PlayerView inside xml, like this:

<?xml version="1.0" encoding="utf-8"?>
<androidx.media3.ui.PlayerView android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    app:use_controller="false"
    app:resize_mode="zoom"
    xmlns:android="http://schemas.android.com/apk/res/android"
    app:surface_type="texture_view"
    android:id="@+id/playerView"/>

I had to create a xml file since surface_type cannot be set dynamically from Kotlin code.

Now the VideoPlayer looks like this:

@OptIn(UnstableApi::class)
@Composable
fun TextureVideoPlayer(
  modifier: Modifier = Modifier,
  file: File,
  onPlayerReady: (playWhenReady: Boolean) -> Unit = {},
  onPlayerError: (error: PlaybackException) -> Unit = {},
  viewModel: VideoPlayerViewModel = hiltViewModel(),
) {
  LaunchedEffect(file) {
    viewModel.setMediaItem(file)
  }

  AndroidView(
    modifier = modifier,
    factory = { ctx ->
      val view = LayoutInflater.from(ctx).inflate(R.layout.player_view, null, false)
      val textView = view.findViewById<PlayerView>(R.id.playerView)
      textView.player = viewModel.exoPlayer
      textView
    },
    update = { view ->
      val playerView = view as PlayerView
      playerView.player = viewModel.exoPlayer
    }
  )

  DisposableEffect(Unit) {
    val listener = object : Player.Listener {
      override fun onPlaybackStateChanged(playbackState: Int) {
        onPlayerReady(playbackState == Player.STATE_READY)
      }
      override fun onPlayerError(error: PlaybackException) {
        Timber.e("Player Error: ${error.errorCode}")
        viewModel.onPlayerError(error)
        onPlayerError(error)
        super.onPlayerError(error)
      }
    }
    viewModel.exoPlayer.addListener(listener)
    onDispose {
      viewModel.exoPlayer.removeListener(listener)
    }
  }
}

I need to give credit to Pzychotix that put me on the right track to solve the issue.