pillarbox-ui

Provides UI Compose components and helpers.

This includes:

• PlayerSurface, to display a player on a surface, texture, or spherical surface.

• Compose wrapper for ExoPlayer Views.

• ProgressTracker to connect the player to a progress bar or slider.

Integration

To use this module, add the following dependency to your module's build.gradle/build.gradle.kts file:

implementation("ch.srgssr.pillarbox:pillarbox-ui:<pillarbox_version>")

Getting started

Display a Player

@Composable
fun SimplePlayer(
    player: Player,
    modifier: Modifier = Modifier,
) {
    PlayerSurface(
        player = player,
        modifier = modifier,
    )
}

Create a Player with controls and subtitles

In this example, we are drawing controls and subtitles on top of the Player. To add controls, you can use ExoPlayerControlView. And for subtitles, you can use ExoPlayerSubtitleView.

@Composable
fun MyPlayer(
    player: Player,
    modifier: Modifier = Modifier,
) {
    Box(
        modifier = modifier
            .fillMaxWidth()
            .wrapContentHeight()
            .background(color = Color.Black),
        contentAlignment = Alignment.Center,
    ) {
        PlayerSurface(
            player = player,
            defaultAspectRatio = 1f,
        )

        ExoPlayerControlView(
            player = player,
            modifier = Modifier.matchParentSize(),
        )

        ExoPlayerSubtitleView(
            player = player,
            modifier = Modifier.matchParentSize(),
        )
    }
}

The defaultAspectRatio is used while the video is loading or if the Player doesn't play a video.

Scale mode

You can customize how the Player scales in the PlayerSurface, by setting the scaleMode argument.

PlayerSurface(
    player = player,
    scaleMode = ScaleMode.Fit,
)

• ScaleMode.Fit (default): resizes the Player to fit within its parent while maintaining its aspect ratio.

• ScaleMode.Fill: stretches the Player to fill its parent, ignoring the defined aspect ratio.

• ScaleMode.Crop: trims the Player to fill its parent while maintaining its aspect ratio.

Surface type

PlayerSurface lets you set the type of surface used to render its content, using its surfaceType argument.

PlayerSurface(
    player = player,
    surfaceType = SurfaceType.Surface,
)

• SurfaceType.Surface (default): the Player is attached to a SurfaceView. This is the most optimized option, and supports playing any content including DRM protected content.

• SurfaceType.Texture: the Player is attached to a TextureView. This option may be interesting when dealing with animation, and the SurfaceType.Surface option doesn't work as expected. This does not work with DRM content.

• SurfaceType.Spherical: the Player is attached to a SphericalGLSurfaceView. This option is suited when playing 360° video content. This does not work with DRM content.

Observe Player states

The ch.srgssr.pillarbox.ui.extension package provides a collection of extensions to observe a Player's state through Compose's State instances.

@Composable
fun MyPlayer(player: Player) {
    val currentPosition: Long by player.currentPositionAsState()
    val duration: Long by player.durationAsState()
    val isPlaying: Boolean by player.isPlayingAsState()
}