Ottimizza per smart display

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.

Nota: questa personalizzazione richiede l'utilizzo dell'elemento UI del player integrato cast-media-player. Il monitoraggio dello stato dell'interfaccia utente, il branding e altre personalizzazioni devono essere eseguiti manualmente se questo elemento non viene utilizzato.

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

R. --playback-logo-image

B. MovieMediaMetadata.subtitle o GenericMediaMetadata.subtitle.

C. MovieMediaMetadata.title o GenericMediaMetadata.title.

D. MediaStatus.currentTime

E. MediaInformation.duration

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

R. --playback-logo-image

B. MusicTrackMediaMetadata.albumName

C. MusicTrackMediaMetadata.title

D. MusicTrackMediaMetadata.albumArtist, MusicTrackMediaMetadata.artist o MusicTrackMediaMetadata.composer

E. MusicTrackMediaMetadata.images[0]

F. MediaStatus.currentTime

G. MediaInformation.duration

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.

Importante: è necessario rimuovere tutti i pulsanti predefiniti prima di assegnare i pulsanti di controllo agli slot per evitare conflitti tra i layout personalizzati e predefiniti.

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.