# ContentFrame

## 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/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)( 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, artwork: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/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 )` A container for displaying media content from a `https://developer.android.com/reference/kotlin/androidx/media3/common/Player`. |

## Functions

### ContentFrame

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

```
@UnstableApi
@Composable
fun ContentFrame(
    player: Player?,
    modifier: Modifier = Modifier,
    surfaceType: @SurfaceType Int = SURFACE_TYPE_SURFACE_VIEW,
    contentScale: ContentScale = ContentScale.Fit,
    alignment: Alignment = Alignment.Center,
    keepContentOnReset: Boolean = false,
    artwork: (@Composable () -> Unit)? = {
    Artwork(
      player,
      modifier = Modifier.fillMaxSize(),
      alignment = alignment,
      contentScale = contentScale,
    )
  },
    subtitles: @Composable () -> Unit = {},
    shutter: @Composable () -> Unit = { Box(Modifier.fillMaxSize().background(Color.Black)) }
): Unit
```

A container for displaying media content from a `https://developer.android.com/reference/kotlin/androidx/media3/common/Player`.

This composable handles the underlying `https://developer.android.com/reference/kotlin/androidx/media3/ui/compose/PlayerSurface.composable#PlayerSurface(androidx.media3.common.Player,androidx.compose.ui.Modifier,kotlin.Int)` for video playback, resizing the video based on the provided `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/ContentScale`, and displaying a `https://developer.android.com/reference/kotlin/androidx/media3/ui/compose/package-summary#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)` and `https://developer.android.com/reference/kotlin/androidx/media3/ui/compose/package-summary#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)` according to the `https://developer.android.com/reference/kotlin/androidx/media3/ui/compose/state/PresentationState` based off the `https://developer.android.com/reference/kotlin/androidx/media3/common/Player`. Content that overflows the bounds of this container, for example video scaled with `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/ContentScale#Crop()`, is clipped.

The layers are drawn in the following order, from bottom to top: the `https://developer.android.com/reference/kotlin/androidx/media3/ui/compose/PlayerSurface.composable#PlayerSurface(androidx.media3.common.Player,androidx.compose.ui.Modifier,kotlin.Int)`, the `https://developer.android.com/reference/kotlin/androidx/media3/ui/compose/package-summary#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)`, the `https://developer.android.com/reference/kotlin/androidx/media3/ui/compose/package-summary#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)` and the `https://developer.android.com/reference/kotlin/androidx/media3/ui/compose/package-summary#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)`.

| Parameters |
|---|---|
| `player: https://developer.android.com/reference/kotlin/androidx/media3/common/Player?` | The attached `https://developer.android.com/reference/kotlin/androidx/media3/common/Player` that provides media to this content frame. |
| `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 layout. |
| `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 playback. Can be either `https://developer.android.com/reference/kotlin/androidx/media3/ui/compose/package-summary#SURFACE_TYPE_SURFACE_VIEW()` or `https://developer.android.com/reference/kotlin/androidx/media3/ui/compose/package-summary#SURFACE_TYPE_TEXTURE_VIEW()`. |
| `contentScale: https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/ContentScale = ContentScale.Fit` | The `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/ContentScale` strategy for the container. |
| `alignment: https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment = Alignment.Center` | The `https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment` used to position the scaled content within the container. If the scaled content overflows the container, 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` | If `true`, the last rendered frame will remain visible when the player is reset. If `false`, the surface will be cleared. |
| `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. |
| `subtitles: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html = {}` | A composable that displays subtitles. It is drawn on top of the `https://developer.android.com/reference/kotlin/androidx/media3/ui/compose/package-summary#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)` and the `https://developer.android.com/reference/kotlin/androidx/media3/ui/compose/package-summary#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)`, so that subtitles remain visible when there is no video, and it is laid out within the same bounds as the scaled video surface. |
| `shutter: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html = { Box(Modifier.fillMaxSize().background(Color.Black)) }` | A composable that is displayed when the video surface needs to be covered. By default, this is a black background. |