Gli smart display sono dispositivi con funzionalità touch che consentono alle applicazioni del ricevitore web di supportare i controlli touch. L'SDK Web Receiver offre un'esperienza UI predefinita con ulteriori personalizzazioni dei controlli del player.
Questa guida spiega come ottimizzare l'applicazione Ricevitore web quando viene avviata su smart display e come personalizzare i controlli del player.
Accesso ai controlli dell'interfaccia utente
È possibile accedere all'oggetto Controlli dell'interfaccia utente con il seguente codice:
const controls = cast.framework.ui.Controls.getInstance();
Se non utilizzi un elemento cast-media-player
, devi impostare la proprietà touchScreenOptimizedApp
su true
in UiConfig
in CastReceiverOptions
.
context.start({
uiConfig: {
touchScreenOptimizedApp: true
}
});
UI video predefinita
A ogni slot sono assegnati pulsanti di controllo predefiniti in base a MetadataType
e MediaStatus.supportedMediaCommands
.
MetadataType.Film, 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. Riproduci/Pausa
I. ControlsSlot.SLOT_PRIMARY_2
J ControlsSlot.SLOT_SECONDARY_2
Quando il valore di supportedMediaCommands
è uguale a
ALL_BASIC_MEDIA
,
il layout di controllo predefinito viene visualizzato come segue:
Quando il valore di supportedMediaCommands
è uguale a
ALL_BASIC_MEDIA | QUEUE_PREV | QUEUE_NEXT
, il layout di controllo predefinito viene
visualizzato nel seguente modo:
Quando il valore di supportedMediaCommands
è uguale a
PAUSE | QUEUE_PREV | QUEUE_NEXT
, il layout di controllo predefinito viene visualizzato come segue:
Quando le tracce di testo sono disponibili, il pulsante dei sottotitoli codificati viene sempre mostrato all'indirizzo SLOT_SECONDARY_1
.
Per modificare dinamicamente il valore di supportedMediaCommands
dopo aver avviato un contesto del destinatario, puoi chiamare PlayerManager.setSupportedMediaCommands
per eseguire l'override del valore. Puoi anche aggiungere un nuovo comando utilizzando addSupportedMediaCommands
o rimuovere un comando esistente utilizzando removeSupportedMediaCommands
.
UI audio predefinita
MetadataType.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. Riproduci/Pausa
K. ControlsSlot.SLOT_PRIMARY_2
L. ControlsSlot.SLOT_SECONDARY_2
Quando il valore di supportedMediaCommands
è uguale a ALL_BASIC_MEDIA
, il layout di controllo predefinito viene visualizzato come segue:
Quando il valore di supportedMediaCommands
è uguale a ALL_BASIC_MEDIA |
QUEUE_PREV | QUEUE_NEXT
, il layout di controllo predefinito viene visualizzato come segue:
Per modificare dinamicamente il valore di supportedMediaCommands
dopo aver avviato un contesto del ricevitore web, puoi chiamare PlayerManager.setSupportedMediaCommands
per eseguire l'override del valore. Inoltre, puoi aggiungere nuovi comandi usando addSupportedMediaCommands
o rimuovere i comandi esistenti usando removeSupportedMediaCommands
.
Personalizza il layout del pulsante di controllo dell'interfaccia utente
Utilizzare un layout personalizzato se vuoi modificare i pulsanti nei controlli dell'interfaccia utente.
const controls = cast.framework.ui.Controls.getInstance();
controls.clearDefaultSlotAssignments();
Puoi assegnare pulsanti di controllo a 4 slot chiamando 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
)
Inoltre, il layout personalizzato viene visualizzato nel seguente modo:
Se il pulsante assegnato non è supportato in MediaStatus.supportedMediaCommands
, non è selezionabile. Ad esempio, se supportedMediaCommands
è uguale a
ALL_BASIC_MEDIA | QUEUE_NEXT | LIKE | DISLIKE
, il pulsante QUEUE_PREV
è disabilitato.
Per modificare dinamicamente il valore di supportedMediaCommands
dopo aver avviato un contesto del ricevitore web, puoi chiamare PlayerManager.setSupportedMediaCommands
per eseguire l'override del valore. Puoi anche aggiungere nuovi comandi utilizzando addSupportedMediaCommands
o rimuovere i comandi esistenti utilizzando removeSupportedMediaCommands
.
Immagine secondaria
L'immagine secondaria offre agli sviluppatori di Google Cast la flessibilità di aggiungere un'immagine informativa all'interfaccia utente per le applicazioni audio e video, nonché di mostrare i loghi o il formato multimediale dei canali locali, ad esempio. Questa nuova funzionalità offre un carico di lavoro molto basso, pur mantenendo un'interfaccia utente coerente su diverse piattaforme di visualizzazione Cast: Chromecast, smart display e Chromecast con Google TV.