Toolbar
Componente que centraliza as funcionalidades do player e as opções de alternância de conteúdos na tela de letra.
Uso
Este componente é utilizado na tela de letra, especificaamente para o aplicativos Android, atuando como o principal controlador da mídia associada à letra (música ou vídeo) e de alternância do conteúdo principal (letra, tradução e significado). Seu propósito é oferecer acesso rápido e intuitivo ao usuário.
Anatomia
O componente é estruturado em dois agrupamentos principais (Toolbar e Player) que se combinam para formar as variantes (Rest, Expanded e Compact).
❖. Container Toolbar
Estrutura externa que agrupa todos os elementos internos do componente. Para o container deve ser aplicado o componente de modal que padroniza a aplicação do BG e definições de elevation para estes componentes.
1. Play
Botão de Play que é exibido no estado rest e abre o player. Quando o player está ativo, o botão troca para a versão com o ícone de Song Waves e indica o estado ativo do player.
2. Chips de alternância
Grupo de chips mutuamente exclusivos que servem para trocar o conteúdo principal da tela. A chip ativa pode receber também o componente de Chips Segmented quando houver opções relacionadas ao conteúdo exibido (ex: letras em hangul, tradução).
❖. Container Player
Estrutura externa que corresponde ao Player de Mídia, presente nos estados Expanded e Compact.
1. Controles de mídia
Agrupa botões de Shuffle e Repeat, que alteram o modo de reprodução. Visível apenas no estado Expanded, logo, ausente no estado Compact.
2. Seek Bar
Exibe o tempo atual e a duração total da mídia, além do Slider para navegação. Tanto no modo Expanded quanto no modo Compact o o Slider de progresso é interativo.
3. Handle
Botão com ícone de seta que permite a transição entre os estados Expanded e Compact.
4. Toggle de fonte de áudio
Serve para selecionar o tipo de mídia associada à letra (Vídeo ou Áudio). A opção de áudio só fica visível quando o usuário possuir a música baixada em seu dispositivo.
5. Botão Fila
Botão para acessar a fila de reprodução. Visível apenas no estado Expanded.
Variantes
A Toolbar possui três variantes principais que representam o estado do player na tela. As chips de alternância de conteúdo sempre está visível e ativa nestes estados.
Rest
Exibe apenas o botão de play e as chips de alternância de conteúdo. Usada quando não há mídia sendo reproduzida.
Expanded
Exibe o player completo com todos os controles de mídia e seek bar. É o estado padrão quando a mídia está ativa e em primeiro plano. O botão Handle (seta para baixo) permite recolher para o estado Compact.
Compact
Exibe uma versão reduzida do Player, mostrando apenas os controles essenciais (Play/Pause, Avançar, Retroceder) e o tempo de progresso em formato de texto. O botão Handle (seta para cima) permite expandir para o estado Expanded.
Posicionamento
A Toolbar deve ser ancorada na parte inferior da tela logo acima do limite inferior da área de conteúdo e acima de eventuais anúncios ou barras de navegação fixas.
Layout Responsivo
O componente se estende por toda a largura para ocupar o máximo de espaço em telas pequenas (< 600px) e se recolhe para uma largura de acordo com o seu conteúdo (hug) em uma posição centralizada em telas maiores (≥ 600px).
O componente é projetado para se adaptar dinamicamente à largura da tela, equilibrando a ocupação total em dispositivos móveis e a centralização em telas maiores. Em larguras menores (abaixo de 600px) o componente fica em fill ocupando o espaço horizontal total, respeitando as margens da tela.
Telas menores
Em larguras menores (abaixo de 600px) o componente fica em fill ocupando o espaço horizontal total, respeitando as margens da tela. Em situações onde as chips de alternância (Letra, Tradução, Significado) excedam o espaço disponível, deve ser aplicado um scroll horizontal.
Telas maiores
O componente passa a ter sua largura definida pelo seu conteúdo hug content, sendo centralizado na tela. A centralização garante que o componente não se estenda desnecessariamente por toda a largura em telas grandes.
Comportamento
Ao dar scroll a toolbar e o player, quando ativo, desaparecem e voltam a aparecer no scroll reverso. Elementos temporários como dilogs contextuais aparecem no mesmo local do toolbar e podem substituí-los enquanto o usuário realiza a ação.
Histórico de Atualizações
Atualizado