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.
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
B. MovieMediaMetadata.subtitle
ou GenericMediaMetadata.subtitle
.
C. MovieMediaMetadata.title
ou GenericMediaMetadata.title
.
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
B. MusicTrackMediaMetadata.albumName
C. MusicTrackMediaMetadata.title
D. MusicTrackMediaMetadata.albumArtist
, MusicTrackMediaMetadata.artist
ou MusicTrackMediaMetadata.composer
E. MusicTrackMediaMetadata.images[0]
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.
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.