Otimizar para smart displays

Os smart displays são dispositivos com funcionalidade de toque para permitir que aplicativos receptores da Web sejam compatíveis com controles ativados por toque. O SDK do receptor da Web fornece uma experiência de IU padrão com personalização adicional dos controles do player.

Este guia explica como otimizar o aplicativo Web Receiver quando usado em smart displays e como personalizar os controles do player.

Observação: essa personalização exige o uso do elemento cast-media-player da IU do jogador integrado. O rastreamento do estado da IU, o branding e outras personalizações precisam ser feitos manualmente se esse elemento não for usado.

Como acessar os controles da IU

O objeto de controles de IU pode ser acessado com o seguinte código:

const controls = cast.framework.ui.Controls.getInstance();

Se você não estiver usando um elemento cast-media-player, será necessário definir a propriedade touchScreenOptimizedApp como true em UiConfig, em CastReceiverOptions.

context.start({
  uiConfig: {
    touchScreenOptimizedApp: true
  }
});

IU de vídeo padrão

Os botões de controle padrão são atribuídos a cada slot com base em MetadataType e MediaStatus.supportedMediaCommands.

MetadataType.Movie, MetadataType.Genérico

R. --playback-logo-image

B. MovieMediaMetadata.subtitle ou GenericMediaMetadata.subtitle.

C. MovieMediaMetadata.title ou GenericMediaMetadata.title.

D. MediaStatus.currentTime

E. MediaInformation.duration

F. ControlsSlot.SLOT_SECONDARY_1

G. ControlsSlot.SLOT_PRIMARY_1

H. Reproduzir/pausar

I. ControlsSlot.SLOT_PRIMARY_2

J. ControlsSlot.SLOT_SECONDARY_2

Quando o valor de supportedMediaCommands for igual a ALL_BASIC_MEDIA, o layout de controle padrão será exibido da seguinte forma:

Quando o valor de supportedMediaCommands for igual a ALL_BASIC_MEDIA | QUEUE_PREV | QUEUE_NEXT, o layout de controle padrão será mostrado abaixo:

Quando o valor de supportedMediaCommands for igual a PAUSE | QUEUE_PREV | QUEUE_NEXT, o layout de controle padrão será exibido da seguinte forma:

Quando as faixas de texto estiverem disponíveis, o botão de legenda será sempre mostrado em SLOT_SECONDARY_1.

Para mudar dinamicamente o valor de supportedMediaCommands após iniciar um contexto do destinatário, chame PlayerManager.setSupportedMediaCommands para substituir o valor. Além disso, é possível adicionar novos comandos usando addSupportedMediaCommands ou remover comandos existentes usando removeSupportedMediaCommands.

IU de áudio padrão

TipoDeMetadados.MUSIC_TRACK

R. --playback-logo-image

B. MusicTrackMediaMetadata.albumName

C. MusicTrackMediaMetadata.title

D. MusicTrackMediaMetadata.albumArtist, MusicTrackMediaMetadata.artist ou MusicTrackMediaMetadata.composer

E. MusicTrackMediaMetadata.images[0]

F. MediaStatus.currentTime

G. MediaInformation.duration

H. ControlsSlot.SLOT_SECONDARY_1

I. ControlsSlot.SLOT_PRIMARY_1

J. Reproduzir/pausar

K. ControlsSlot.SLOT_PRIMARY_2

L. ControlsSlot.SLOT_SECONDARY_2

Quando o valor de supportedMediaCommands for igual a ALL_BASIC_MEDIA, o layout de controle padrão vai ser mostrado abaixo:

Quando o valor de supportedMediaCommands for igual a ALL_BASIC_MEDIA | QUEUE_PREV | QUEUE_NEXT, o layout de controle padrão vai ser mostrado abaixo:

Para mudar dinamicamente o valor de supportedMediaCommands após iniciar um contexto de receptor da Web, chame PlayerManager.setSupportedMediaCommands para substituir o valor. Além disso, é possível adicionar novos comandos usando addSupportedMediaCommands ou remover os comandos existentes usando removeSupportedMediaCommands.

Personalizar o layout do botão de controle da IU

Usar um layout personalizado se quiser mudar os botões nos controles de IU.

Importante: é necessário remover todos os botões padrão antes de atribuir botões de controle aos slots para evitar conflitos entre os layouts padrão e personalizados.

const controls = cast.framework.ui.Controls.getInstance();
controls.clearDefaultSlotAssignments();

Em seguida, você pode atribuir botões de controle a quatro slots chamando assignButton.

controls.assignButton(
  cast.framework.ui.ControlsSlot.SLOT_SECONDARY_1,
  cast.framework.ui.ControlsButton.LIKE
)

controls.assignButton(
  cast.framework.ui.ControlsSlot.SLOT_SECONDARY_2,
  cast.framework.ui.ControlsButton.DISLIKE
)

O layout personalizado será exibido como mostrado abaixo:

Quando o botão atribuído não for compatível com o MediaStatus.supportedMediaCommands, ele ficará esmaecido. Por exemplo, se supportedMediaCommands for igual a ALL_BASIC_MEDIA | QUEUE_NEXT | LIKE | DISLIKE, o botão QUEUE_PREV será desativado.

Para mudar dinamicamente o valor de supportedMediaCommands após iniciar um contexto de Web Receiver, chame PlayerManager.setSupportedMediaCommands para substituir o valor. Além disso, é possível adicionar novos comandos usando addSupportedMediaCommands ou remover comandos existentes usando removeSupportedMediaCommands.

Imagem secundária

A imagem secundária oferece aos desenvolvedores do Google Cast a flexibilidade de adicionar uma imagem informativa à IU para aplicativos de áudio e vídeo, a fim de exibir logotipos de canais ou formatos de mídia locais, por exemplo. Essa nova funcionalidade é fornecida com pouca sobrecarga, enquanto mantém uma IU consistente em diferentes plataformas de exibição do Google Cast: Chromecast, smart displays e Chromecast com Google TV.