Material3 Compose

La biblioteca media3-ui-compose-material3 proporciona un elemento de componibilidad Player que muestra los controles del reproductor, la barra de progreso y el contenido multimedia actual. Controla de forma interna la administración de estados y el diseño de Material 3. Para obtener más información sobre qué biblioteca usar, consulta la descripción general de Media3 Compose.

// The library provides styled UI components
Row {
  SeekBackButton(player)
  PlayPauseButton(player)
  SeekForwardButton(player)
}

// You can rearrange the composables into a layout that suits your needs
@Composable
fun PlayerProgressControlsLeftAligned(player: Player) {
  Row {
    PositionAndDurationText(player)
    ProgressSlider(player)
  }
}

@Composable
fun PlayerProgressControlsCenterAligned(player: Player) {
  Row {
    PositionText(player)
    ProgressSlider(player)
    DurationText(player)
  }
}

Personaliza los componentes de Material 3

Si bien media3-ui-compose-material3 proporciona componentes que siguen el diseño de Material 3, aún tienes control total sobre los temas. Puedes personalizar los colores, la tipografía y las formas uniendo la IU del reproductor en un MaterialTheme.

Por ejemplo, para cambiar el color de PlayPauseButton, puedes proporcionar un colorScheme personalizado:

MaterialTheme(
  colorScheme =
    lightColorScheme(
      primary = Color.Red, // Change the primary color for the button
      onPrimary = Color.White,
    )
) {
  // The PlayPauseButton will now use the custom colors
  PlayPauseButton(player)
}

Componentes de Material 3 disponibles

La biblioteca media3-ui-compose-material3 proporciona un conjunto de elementos componibles precompilados para los controles del reproductor comunes. Estos son algunos de los componentes que puedes usar directamente en tu app:

Componente Descripción
Player Un reproductor con controles, una barra de progreso, subtítulos y un marco de contenido para video o material gráfico
PlayPauseButton Botón que alterna entre reproducir y pausar, y muestra los estados de almacenamiento en búfer, repetición y reintento.
SeekBackButton Botón para retroceder en un incremento definido.
SeekForwardButton Botón para avanzar en un incremento definido.
NextButton Botón para buscar el siguiente elemento multimedia.
PreviousButton Botón para buscar el elemento multimedia anterior.
RepeatButton Botón para cambiar de un modo de repetición a otro.
ShuffleButton Botón para activar o desactivar el modo aleatorio.
MuteButton Botón para silenciar y activar el sonido del reproductor.
LiveButton Es un botón que indica si la reproducción de una transmisión en vivo está en el punto de transmisión en vivo y que busca ese punto cuando se presiona.
PositionAndDurationText Elemento componible de texto que muestra la posición actual y la duración total.
PositionText Elemento componible de texto que muestra la posición actual.
DurationText Elemento componible de texto que muestra la duración total.
RemainingDurationText Elemento componible de texto que muestra la duración restante.
ProgressSlider Un control deslizante que muestra el progreso de la reproducción y permite al usuario buscar contenido
BufferingIndicator Es un indicador de progreso que se muestra mientras el reproductor almacena en búfer.

Esta no es una lista exhaustiva. Consulta la referencia de la API de la biblioteca para conocer todos los componentes disponibles.

Otros dos elementos precompilados que probablemente necesites están relacionados con la administración de plataformas y se encuentran en el módulo media3-ui-compose porque no poseen temas de Material.

Componente Descripción
ContentFrame Es una plataforma para contenido multimedia que controla la administración de la relación de aspecto, el cambio de tamaño, un obturador, el material gráfico y un espacio para subtítulos.
PlayerSurface Plataforma sin procesar que une SurfaceView y TextureView en AndroidView