pillarbox-ui

Provides UI Compose components and helpers.

This includes:

PillarboxPlayerSurface, to display a player on a surface, texture, or spherical surface.
Compose wrapper for ExoPlayer Views.
PlayerFrame to handle player component such as subtitles, overlays and surface content.
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,
) {
    PillarboxPlayerSurface(
        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.

@Composable
fun MyPlayer(
    player: Player,
    modifier: Modifier = Modifier,
) {
    Box(
        modifier = modifier
            .fillMaxWidth()
            .wrapContentHeight()
            .background(color = Color.Black),
        contentAlignment = Alignment.Center,
    ) {
        val presentationState: PresentationState = rememberPresentationState(player = player, keepContentOnReset = false)
        PlayerFrame(
            player = player,
            presentationState = presentationState,
            contentScale = ContentScale.Fit,
            subtitle = {
                PlayerSubitle(player)
            },
            shutter = {
                // Draw when no video is playing or when the player is loading
                DrawShutter(player)
            }
        ) {
            ExoPlayerControlView(
                player = player,
                modifier = Modifier.matchParentSize(),
            )   
        }
    }
}

Surface type

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

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