Optimiser pour les écrans connectés

Les écrans connectés sont des appareils dotés de fonctionnalités tactiles qui permettent aux applications de récepteur Web d'accepter les commandes tactiles. Le SDK Récepteur Web fournit une interface utilisateur par défaut avec une personnalisation supplémentaire des commandes du lecteur.

Ce guide explique comment optimiser votre application Web Receiver lorsqu'elle est lancée sur des écrans connectés et comment personnaliser les commandes du lecteur.

Accéder aux commandes de l'interface utilisateur

L'objet UI Controls est accessible avec le code suivant:

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

Si vous n'utilisez pas d'élément cast-media-player, vous devez définir la propriété touchScreenOptimizedApp sur true dans UiConfig sous CastReceiverOptions.

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

UI vidéo par défaut

Des boutons de commande par défaut sont attribués à chaque emplacement en fonction de MetadataType et MediaStatus.supportedMediaCommands.

MetadataType.Movie, MetadataType.Generic

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. Lecture/Pause

I. ControlsSlot.SLOT_PRIMARY_2

J. ControlsSlot.SLOT_SECONDARY_2

Lorsque la valeur de supportedMediaCommands est égale à ALL_BASIC_MEDIA, la mise en page de contrôle par défaut s'affiche comme suit:

Lorsque la valeur de supportedMediaCommands est égale à ALL_BASIC_MEDIA | QUEUE_PREV | QUEUE_NEXT, la mise en page de contrôle par défaut s'affiche comme suit:

Lorsque la valeur de supportedMediaCommands est égale à PAUSE | QUEUE_PREV | QUEUE_NEXT, la mise en page de contrôle par défaut s'affiche comme suit:

Lorsque des pistes de texte sont disponibles, le bouton des sous-titres s'affiche toujours sur SLOT_SECONDARY_1.

Pour modifier de manière dynamique la valeur de supportedMediaCommands après avoir démarré un contexte de destinataire, vous pouvez appeler PlayerManager.setSupportedMediaCommands afin de remplacer la valeur. Vous pouvez également ajouter une commande en utilisant addSupportedMediaCommands ou supprimer une commande existante en utilisant removeSupportedMediaCommands.

UI audio par défaut

MetadataType.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. Lecture/Pause

K. ControlsSlot.SLOT_PRIMARY_2

L. ControlsSlot.SLOT_SECONDARY_2

Lorsque la valeur de supportedMediaCommands est égale à ALL_BASIC_MEDIA, la disposition des commandes par défaut se présente comme suit:

Lorsque la valeur de supportedMediaCommands est égale à ALL_BASIC_MEDIA | QUEUE_PREV | QUEUE_NEXT, la disposition des commandes par défaut se présente comme suit:

Pour modifier de manière dynamique la valeur de supportedMediaCommands après avoir démarré un contexte de récepteur Web, vous pouvez appeler PlayerManager.setSupportedMediaCommands afin de remplacer la valeur. Vous pouvez également ajouter de nouvelles commandes à l'aide de addSupportedMediaCommands ou supprimer des commandes existantes à l'aide de removeSupportedMediaCommands.

Personnaliser la disposition du bouton de commande de l'interface utilisateur

Utiliser une mise en page personnalisée si vous souhaitez modifier les boutons dans les commandes de l'interface utilisateur

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

Vous pouvez ensuite attribuer des boutons de commande à quatre emplacements en appelant 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
)

La mise en page personnalisée s'affichera comme suit:

Lorsque le bouton attribué n'est pas compatible avec MediaStatus.supportedMediaCommands, il est grisé. Par exemple, si supportedMediaCommands correspond à ALL_BASIC_MEDIA | QUEUE_NEXT | LIKE | DISLIKE, le bouton QUEUE_PREV est désactivé.

Pour modifier de manière dynamique la valeur de supportedMediaCommands après avoir démarré un contexte de récepteur Web, vous pouvez appeler PlayerManager.setSupportedMediaCommands pour remplacer la valeur. Vous pouvez également ajouter de nouvelles commandes à l'aide de addSupportedMediaCommands ou supprimer des commandes existantes à l'aide de removeSupportedMediaCommands.

Image secondaire

L'image secondaire permet aux développeurs Cast d'ajouter une image d'information à l'interface utilisateur pour les applications audio et vidéo, par exemple pour afficher les logos des chaînes locales ou le format multimédia. Cette nouvelle fonctionnalité engendre très peu de frais tout en conservant une interface utilisateur cohérente sur les différentes plates-formes d'affichage Cast: Chromecast, les écrans connectés et Chromecast avec Google TV.