Material3 Compose

A biblioteca media3-ui-compose-material3 oferece um elemento de composição Player que mostra os controles do player, a barra de progresso e o conteúdo de mídia atual. Ele processa o gerenciamento de estado e o estilo do Material 3 internamente. Para mais informações sobre qual biblioteca usar, consulte a visão geral do 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)
  }
}

Personalizar os componentes do Material 3

Embora o media3-ui-compose-material3 forneça componentes que seguem o design do Material 3, você ainda tem controle total sobre os temas. É possível personalizar cores, tipografia e formas ao unir a interface do player em um MaterialTheme.

Por exemplo, para mudar a cor do PlayPauseButton, forneça um 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 do Material 3 disponíveis

A biblioteca media3-ui-compose-material3 oferece um conjunto de elementos combináveis pré-criados para controles comuns do player. Confira alguns dos componentes que você pode usar diretamente no seu app:

Componente Descrição
Player Um player com controles, uma barra de progresso, legendas e um frame de conteúdo para vídeo ou arte.
PlayPauseButton Um botão que alterna entre reproduzir e pausar e mostra os estados de armazenamento em buffer, repetição e nova tentativa.
SeekBackButton Um botão para retroceder em um incremento definido.
SeekForwardButton Um botão para avançar um incremento definido.
NextButton Um botão para buscar o próximo item de mídia.
PreviousButton Um botão para buscar o item de mídia anterior.
RepeatButton Um botão para alternar entre os modos de repetição.
ShuffleButton Um botão para ativar ou desativar o modo aleatório.
MuteButton Um botão para ativar e desativar o som do player.
LiveButton Um botão que indica se a reprodução de uma transmissão ao vivo está no ponto atual e busca o ponto atual quando tocado.
PositionAndDurationText Um elemento combinável de texto que mostra a posição atual e a duração total.
PositionText Um elemento combinável de texto que mostra a posição atual.
DurationText Um elemento de texto que mostra a duração total.
RemainingDurationText Um elemento combinável de texto que mostra a duração restante.
ProgressSlider Um controle deslizante que mostra o progresso da reprodução e permite que o usuário busque um ponto específico.
BufferingIndicator Um indicador de progresso que é mostrado enquanto o player está em buffer.

Esta não é uma lista completa. Consulte a referência da API da biblioteca para ver todos os componentes disponíveis.

Dois outros elementos combináveis pré-criados que você provavelmente vai precisar estão relacionados ao gerenciamento de superfície e estão no módulo media3-ui-compose porque não têm temas do Material Design.

Componente Descrição
ContentFrame Uma superfície para conteúdo de mídia que lida com o gerenciamento de proporção, redimensionamento, um obturador, arte e um espaço para legendas.
PlayerSurface Superfície bruta que envolve SurfaceView e TextureView em AndroidView.