# Player

## Functions summary

|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/media3/common/util/UnstableApi @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/media3/ui/compose/material3/Player.composable#Player(androidx.media3.common.Player,androidx.compose.ui.Modifier)(player: https://developer.android.com/reference/kotlin/androidx/media3/common/Player?, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier)` A composable that provides a basic player UI layout with a shutter and hidden default controls. |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/media3/common/util/ExperimentalApi @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/media3/ui/compose/material3/Player.composable#Player(androidx.media3.common.Player,androidx.compose.ui.Modifier,kotlin.Int,androidx.compose.ui.layout.ContentScale,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Boolean,kotlin.Function1,kotlin.Function1,kotlin.Function1,kotlin.Function1)( player: https://developer.android.com/reference/kotlin/androidx/media3/common/Player?, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, surfaceType: @https://developer.android.com/reference/kotlin/androidx/media3/ui/compose/SurfaceType https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html, contentScale: https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/ContentScale, alignment: https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment, keepContentOnReset: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, subtitles: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, shutter: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, artwork: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?, showControls: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, topControls: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/BoxScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?, centerControls: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/BoxScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?, bottomControls: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/BoxScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?, errorOverlay: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/BoxScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? )` A composable that provides a basic player UI layout, combining a `https://developer.android.com/reference/kotlin/androidx/media3/ui/compose/ContentFrame.composable#ContentFrame(androidx.media3.common.Player,androidx.compose.ui.Modifier,kotlin.Int,androidx.compose.ui.layout.ContentScale,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function0,kotlin.Function0,kotlin.Function0)` for displaying player content with customizable controls and a shutter. |

## Functions

### Player

Artifact: [androidx.media3:media3-ui-compose-material3](https://developer.android.com/jetpack/androidx/releases/media3) [View Source](https://cs.android.com/search?q=file:androidx/media3/ui/compose/material3/Player.kt+function:Player)

```
@UnstableApi
@Composable
fun Player(player: Player?, modifier: Modifier = Modifier): Unit
```

A composable that provides a basic player UI layout with a shutter and hidden default controls.

This composable consists of a `https://developer.android.com/reference/kotlin/androidx/media3/ui/compose/ContentFrame.composable#ContentFrame(androidx.media3.common.Player,androidx.compose.ui.Modifier,kotlin.Int,androidx.compose.ui.layout.ContentScale,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function0,kotlin.Function0,kotlin.Function0)` that handles the rendering of the player's video, overlaid with a shutter and the standard Material3 layouts provided by `https://developer.android.com/reference/kotlin/androidx/media3/ui/compose/material3/PlayerDefaults`. This includes `https://developer.android.com/reference/kotlin/androidx/media3/ui/compose/material3/PlayerDefaults#TopControls(androidx.media3.common.Player,kotlin.Boolean,androidx.compose.ui.Modifier,kotlin.Function1)`, `https://developer.android.com/reference/kotlin/androidx/media3/ui/compose/material3/PlayerDefaults#CenterControls(androidx.media3.common.Player,kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.Alignment.Vertical,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Function0)`, and `https://developer.android.com/reference/kotlin/androidx/media3/ui/compose/material3/PlayerDefaults#BottomControls(androidx.media3.common.Player,kotlin.Boolean,androidx.compose.ui.Modifier,kotlin.Function1,kotlin.Function0,kotlin.Function0,kotlin.Function1,kotlin.Function0)`.

The controls are always hidden, because showing them permanently would occlude the video. To show and hide them, for example when the user taps the player, use the overload that accepts `showControls`. That overload also allows customizing the UI components.

| Parameters |
|---|---|
| `player: https://developer.android.com/reference/kotlin/androidx/media3/common/Player?` | The `https://developer.android.com/reference/kotlin/androidx/media3/ui/compose/material3/Player.composable#Player(androidx.media3.common.Player,androidx.compose.ui.Modifier)` instance whose content is displayed. |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | The `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` to be applied to the outer `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Box.composable#Box(androidx.compose.ui.Modifier,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function1)`. |

### Player

Artifact: [androidx.media3:media3-ui-compose-material3](https://developer.android.com/jetpack/androidx/releases/media3) [View Source](https://cs.android.com/search?q=file:androidx/media3/ui/compose/material3/Player.kt+function:Player)

```
@ExperimentalApi
@Composable
fun Player(
    player: Player?,
    modifier: Modifier = Modifier,
    surfaceType: @SurfaceType Int = SURFACE_TYPE_SURFACE_VIEW,
    contentScale: ContentScale = ContentScale.Fit,
    alignment: Alignment = Alignment.Center,
    keepContentOnReset: Boolean = false,
    subtitles: @Composable () -> Unit = { Subtitles(player) },
    shutter: @Composable () -> Unit = PlayerDefaults::Shutter,
    artwork: (@Composable () -> Unit)? = {
    Artwork(
      player,
      modifier = Modifier.fillMaxSize(),
      alignment = alignment,
      contentScale = contentScale,
    )
  },
    showControls: Boolean = false,
    topControls: (@Composable BoxScope.() -> Unit)? = {
    PlayerDefaults.TopControls(player, showControls, Modifier.fillMaxWidth())
  },
    centerControls: (@Composable BoxScope.() -> Unit)? = {
    PlayerDefaults.CenterControls(player, showControls, Modifier.fillMaxWidth())
  },
    bottomControls: (@Composable BoxScope.() -> Unit)? = {
    PlayerDefaults.BottomControls(player, showControls)
  },
    errorOverlay: (@Composable BoxScope.() -> Unit)? = { PlayerDefaults.ErrorOverlay(player) }
): Unit
```

A composable that provides a basic player UI layout, combining a `https://developer.android.com/reference/kotlin/androidx/media3/ui/compose/ContentFrame.composable#ContentFrame(androidx.media3.common.Player,androidx.compose.ui.Modifier,kotlin.Int,androidx.compose.ui.layout.ContentScale,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function0,kotlin.Function0,kotlin.Function0)` for displaying player content with customizable controls and a shutter.

This composable is designed to be a flexible container for building player interfaces. It consists of a `https://developer.android.com/reference/kotlin/androidx/media3/ui/compose/ContentFrame.composable#ContentFrame(androidx.media3.common.Player,androidx.compose.ui.Modifier,kotlin.Int,androidx.compose.ui.layout.ContentScale,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function0,kotlin.Function0,kotlin.Function0)` that handles the rendering of the player's video, overlaid with optional controls and a shutter.

By default, this component uses the standard Material3 layouts provided by `https://developer.android.com/reference/kotlin/androidx/media3/ui/compose/material3/PlayerDefaults`. This includes `https://developer.android.com/reference/kotlin/androidx/media3/ui/compose/material3/PlayerDefaults#TopControls(androidx.media3.common.Player,kotlin.Boolean,androidx.compose.ui.Modifier,kotlin.Function1)`, `https://developer.android.com/reference/kotlin/androidx/media3/ui/compose/material3/PlayerDefaults#CenterControls(androidx.media3.common.Player,kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.Alignment.Vertical,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Function0)`, and `https://developer.android.com/reference/kotlin/androidx/media3/ui/compose/material3/PlayerDefaults#BottomControls(androidx.media3.common.Player,kotlin.Boolean,androidx.compose.ui.Modifier,kotlin.Function1,kotlin.Function0,kotlin.Function0,kotlin.Function1,kotlin.Function0)`. You can deeply customize the player UI by providing your own composables to the slots of this composable, or by utilizing the `https://developer.android.com/reference/kotlin/androidx/media3/ui/compose/material3/PlayerDefaults` layouts and overriding only specific slots within them.

The `https://developer.android.com/reference/kotlin/androidx/media3/ui/compose/material3/Player.composable#Player(androidx.media3.common.Player,androidx.compose.ui.Modifier,kotlin.Int,androidx.compose.ui.layout.ContentScale,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Boolean,kotlin.Function1,kotlin.Function1,kotlin.Function1,kotlin.Function1)` natively manages keyboard focus traversal between its control slots. Each provided control slot (`https://developer.android.com/reference/kotlin/androidx/media3/ui/compose/material3/package-summary#Player(androidx.media3.common.Player,androidx.compose.ui.Modifier,kotlin.Int,androidx.compose.ui.layout.ContentScale,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Boolean,kotlin.Function1,kotlin.Function1,kotlin.Function1,kotlin.Function1)`, `https://developer.android.com/reference/kotlin/androidx/media3/ui/compose/material3/package-summary#Player(androidx.media3.common.Player,androidx.compose.ui.Modifier,kotlin.Int,androidx.compose.ui.layout.ContentScale,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Boolean,kotlin.Function1,kotlin.Function1,kotlin.Function1,kotlin.Function1)`, and `https://developer.android.com/reference/kotlin/androidx/media3/ui/compose/material3/package-summary#Player(androidx.media3.common.Player,androidx.compose.ui.Modifier,kotlin.Int,androidx.compose.ui.layout.ContentScale,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Boolean,kotlin.Function1,kotlin.Function1,kotlin.Function1,kotlin.Function1)`) is wrapped in a focus group. 1-dimensional focus traversal (e.g., using the Tab key) is configured to move sequentially from the top controls, to the center controls, and down to the bottom controls. Backward traversal moves in the reverse order.

| Parameters |
|---|---|
| `player: https://developer.android.com/reference/kotlin/androidx/media3/common/Player?` | The `https://developer.android.com/reference/kotlin/androidx/media3/ui/compose/material3/Player.composable#Player(androidx.media3.common.Player,androidx.compose.ui.Modifier,kotlin.Int,androidx.compose.ui.layout.ContentScale,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Boolean,kotlin.Function1,kotlin.Function1,kotlin.Function1,kotlin.Function1)` instance to be controlled and whose content is displayed. |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | The `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` to be applied to the outer `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Box.composable#Box(androidx.compose.ui.Modifier,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function1)`. |
| `surfaceType: @https://developer.android.com/reference/kotlin/androidx/media3/ui/compose/SurfaceType https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html = SURFACE_TYPE_SURFACE_VIEW` | The type of surface to use for video rendering. See `https://developer.android.com/reference/kotlin/androidx/media3/ui/compose/SurfaceType`. |
| `contentScale: https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/ContentScale = ContentScale.Fit` | The scaling mode to apply to the content within the `https://developer.android.com/reference/kotlin/androidx/media3/ui/compose/ContentFrame.composable#ContentFrame(androidx.media3.common.Player,androidx.compose.ui.Modifier,kotlin.Int,androidx.compose.ui.layout.ContentScale,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function0,kotlin.Function0,kotlin.Function0)`. |
| `alignment: https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment = Alignment.Center` | The alignment of the scaled content within the `https://developer.android.com/reference/kotlin/androidx/media3/ui/compose/ContentFrame.composable#ContentFrame(androidx.media3.common.Player,androidx.compose.ui.Modifier,kotlin.Int,androidx.compose.ui.layout.ContentScale,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function0,kotlin.Function0,kotlin.Function0)`. If the scaled content overflows the `https://developer.android.com/reference/kotlin/androidx/media3/ui/compose/ContentFrame.composable#ContentFrame(androidx.media3.common.Player,androidx.compose.ui.Modifier,kotlin.Int,androidx.compose.ui.layout.ContentScale,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function0,kotlin.Function0,kotlin.Function0)`, for example with `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/ContentScale#Crop()`, the alignment determines which part of the content is visible. |
| `keepContentOnReset: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = false` | Whether to keep the content visible when the player is reset. |
| `subtitles: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html = { Subtitles(player) }` | A composable for rendering subtitles, drawn on top of the `https://developer.android.com/reference/kotlin/androidx/media3/ui/compose/material3/package-summary#Player(androidx.media3.common.Player,androidx.compose.ui.Modifier,kotlin.Int,androidx.compose.ui.layout.ContentScale,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Boolean,kotlin.Function1,kotlin.Function1,kotlin.Function1,kotlin.Function1)` and the `https://developer.android.com/reference/kotlin/androidx/media3/ui/compose/material3/package-summary#Player(androidx.media3.common.Player,androidx.compose.ui.Modifier,kotlin.Int,androidx.compose.ui.layout.ContentScale,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Boolean,kotlin.Function1,kotlin.Function1,kotlin.Function1,kotlin.Function1)`. Note that the default implementation does not currently support `https://developer.android.com/reference/android/text/Spanned.html` styling or `https://developer.android.com/reference/android/view/accessibility/CaptioningManager.CaptionStyle.html` properties (such as text backgrounds or edge types). |
| `shutter: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html = PlayerDefaults::Shutter` | A composable to be displayed as a shutter over the content. The default shutter is a black `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Box.composable#Box(androidx.compose.ui.Modifier,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function1)`. |
| `artwork: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = { Artwork( player, modifier = Modifier.fillMaxSize(), alignment = alignment, contentScale = contentScale, ) }` | Optional composable slot to render artwork for the current media item. |
| `showControls: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = false` | Whether the default controls should be visible. False by default, so that the video isn't occluded. Toggle it, for example, when the user taps the player. Custom control slots should manage their own visibility. |
| `topControls: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/BoxScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = { PlayerDefaults.TopControls(player, showControls, Modifier.fillMaxWidth()) }` | A composable aligned with `https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment#TopCenter()`. |
| `centerControls: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/BoxScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = { PlayerDefaults.CenterControls(player, showControls, Modifier.fillMaxWidth()) }` | A composable aligned with `https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment#Center()`. |
| `bottomControls: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/BoxScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = { PlayerDefaults.BottomControls(player, showControls) }` | A composable aligned with `https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment#BottomCenter()`. |
| `errorOverlay: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/BoxScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = { PlayerDefaults.ErrorOverlay(player) }` | Slot for the error message overlay. Defaults to `https://developer.android.com/reference/kotlin/androidx/media3/ui/compose/material3/PlayerDefaults#ErrorOverlay(androidx.media3.common.Player,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,kotlin.CharSequence,androidx.media3.common.ErrorMessageProvider)`. |