Las pantallas inteligentes son dispositivos con funcionalidad táctil que permiten que las aplicaciones de receptores web admitan controles táctiles. El SDK de receptor web proporciona una experiencia de IU predeterminada con personalización adicional de los controles del reproductor.
En esta guía, se explica cómo optimizar tu aplicación Web Receiver cuando se inicia en pantallas inteligentes y cómo personalizar los controles del reproductor.
Cómo acceder a los controles de la IU
Se puede acceder al objeto de controles de la IU con el siguiente código:
const controls = cast.framework.ui.Controls.getInstance();
Si no usas un elemento cast-media-player
, debes establecer la propiedad touchScreenOptimizedApp
en true
en UiConfig
, en CastReceiverOptions
.
context.start({
uiConfig: {
touchScreenOptimizedApp: true
}
});
IU de video predeterminada
Los botones de control predeterminados se asignan a cada ranura en función de MetadataType
y MediaStatus.supportedMediaCommands
.
MetadataType.Movie y MetadataType.Generic
B. MovieMediaMetadata.subtitle
o GenericMediaMetadata.subtitle
.
C. MovieMediaMetadata.title
o GenericMediaMetadata.title
.
F. ControlsSlot.SLOT_SECONDARY_1
G. ControlsSlot.SLOT_PRIMARY_1
H. Reproducir/Detener
I. ControlsSlot.SLOT_PRIMARY_2
J. ControlsSlot.SLOT_SECONDARY_2
Cuando el valor de supportedMediaCommands
sea igual a ALL_BASIC_MEDIA
, se mostrará el diseño de control predeterminado de la siguiente manera:
Cuando el valor de supportedMediaCommands
sea igual a ALL_BASIC_MEDIA | QUEUE_PREV | QUEUE_NEXT
, se mostrará el diseño de control predeterminado de la siguiente manera:
Cuando el valor de supportedMediaCommands
sea igual a PAUSE | QUEUE_PREV | QUEUE_NEXT
, se mostrará el diseño de control predeterminado de la siguiente manera:
Cuando haya pistas de texto disponibles, el botón de subtítulos siempre se mostrará en SLOT_SECONDARY_1
.
Para cambiar dinámicamente el valor de supportedMediaCommands
después de iniciar un contexto de receptor, puedes llamar a PlayerManager.setSupportedMediaCommands
a fin de anular el valor. Además, puedes agregar un comando nuevo con addSupportedMediaCommands
o quitar el comando existente con removeSupportedMediaCommands
.
IU de audio predeterminada
Tipo de metadatos:MUSIC_TRACK
B. MusicTrackMediaMetadata.albumName
C. MusicTrackMediaMetadata.title
D. MusicTrackMediaMetadata.albumArtist
, MusicTrackMediaMetadata.artist
o MusicTrackMediaMetadata.composer
E. MusicTrackMediaMetadata.images[0]
C. ControlsSlot.SLOT_SECONDARY_1
I. ControlsSlot.SLOT_PRIMARY_1
J. Reproducir/Detener
K. ControlsSlot.SLOT_PRIMARY_2
I. ControlsSlot.SLOT_SECONDARY_2
Cuando el valor de supportedMediaCommands
sea igual a ALL_BASIC_MEDIA
, se mostrará el diseño de control predeterminado de la siguiente manera:
Cuando el valor de supportedMediaCommands
sea igual a ALL_BASIC_MEDIA |
QUEUE_PREV | QUEUE_NEXT
, se mostrará el diseño de control predeterminado de la siguiente manera:
Para cambiar dinámicamente el valor de supportedMediaCommands
después de iniciar un contexto de receptor web, puedes llamar a PlayerManager.setSupportedMediaCommands
a fin de anular el valor. Además, puedes agregar comandos nuevos mediante addSupportedMediaCommands
o quitar comandos existentes mediante removeSupportedMediaCommands
.
Cómo personalizar el diseño del botón de control de la IU
Usa un diseño personalizado si deseas cambiar los botones en los controles de IU.
const controls = cast.framework.ui.Controls.getInstance();
controls.clearDefaultSlotAssignments();
Luego, puedes asignar botones de control a 4 ranuras llamando a 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
)
Y el diseño personalizado se mostrará de la siguiente manera:
Cuando el botón asignado no sea compatible en MediaStatus.supportedMediaCommands
, se mostrará de color gris. Por ejemplo, si supportedMediaCommands
es igual a ALL_BASIC_MEDIA | QUEUE_NEXT | LIKE | DISLIKE
, se inhabilita el botón QUEUE_PREV
.
Para cambiar dinámicamente el valor de supportedMediaCommands
después de iniciar un contexto de receptor web, puedes llamar a PlayerManager.setSupportedMediaCommands
a fin de anular el valor. Además, puedes agregar comandos nuevos mediante addSupportedMediaCommands
o quitar los existentes mediante removeSupportedMediaCommands
.
Imagen secundaria
La imagen secundaria proporciona a los desarrolladores de Cast la flexibilidad de agregar una imagen informativa a la IU para las aplicaciones de audio y video, por ejemplo, a fin de mostrar logotipos de canales locales o formatos multimedia. Esta nueva funcionalidad proporciona muy poca sobrecarga y, al mismo tiempo, mantiene una IU coherente en todas las plataformas de visualización de Cast: Chromecast, pantallas inteligentes y Chromecast con Google TV.