CODEWITHSUNDEEP
android-jetpack-composeexoplayerandroid-media3
IdanB
IdanB

Reputation: 537

How to remove progress bar and 15s back and forth option in Media3 ExoPlayer in jetpack Compose

I am working with Media3 ExoPlayer in Jetpack Compose and I am trying to customize the player's control view. Specifically, I want to disable or remove the progress bar (the one that shows the playing status of the video) and the 15 seconds back and forth buttons in the live mode.

Here is the current implementation of my VideoView function:

@Composable
fun VideoView(video: string?, viewModel: ChannelsViewModel = viewModel()) {
    val context = LocalContext.current
    if(videoUri == null){
        throw Error("error")
    }
    val exoPlayer = ExoPlayer.Builder(LocalContext.current)
        .build()
        .also { exoPlayer ->
            val mediaItem = MediaItem.Builder()
                .setUri(video)
                .build()
            exoPlayer.setMediaItem(mediaItem)
            exoPlayer.prepare()
            exoPlayer.playWhenReady = true
        }

    DisposableEffect(
        AndroidView(factory = {
        PlayerView(context).apply {
            player = exoPlayer
            layoutParams = FrameLayout.LayoutParams(MATCH_PARENT, MATCH_PARENT)
        }
    })
    )
    {
        onDispose { exoPlayer.release() }
    }
}

Thanks in advance for any help you can provide.

Upvotes: 0

Views: 882

Answers (1)

Mats
Mats

Reputation: 166

You can add this style to your res/values/styles folder. This will make the progressbar vissible, but not clickable/draggable. <style name="ExoStyledControls.TimeBar" tools:override="true"> <item name="touch_target_height" tools:override="true">0dp</item> </style>

Then add these 2 functions to your playerView as shown here to remove the "jump forward/backward" buttons PlayerView(context).apply { setShowFastForwardButton(false) setShowRewindButton(false) }

Upvotes: 1

Related Questions