Оптимизация для смарт-дисплеев

Интеллектуальные дисплеи — это устройства с сенсорными функциями, которые позволяют приложениям веб-приемника поддерживать сенсорные элементы управления. Пакет SDK для веб-приемника предоставляет пользовательский интерфейс по умолчанию с дополнительной настройкой элементов управления проигрывателя.

В этом руководстве объясняется, как оптимизировать приложение Web Receiver при запуске на интеллектуальных дисплеях и как настроить элементы управления проигрывателем.

Доступ к элементам управления пользовательского интерфейса

Доступ к объекту UI Controls можно получить с помощью следующего кода:

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

Если вы не используете элемент cast-media-player , вам необходимо установить для свойства touchScreenOptimizedApp значение true в UiConfig в разделе CastReceiverOptions .

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

Пользовательский интерфейс видео по умолчанию

Кнопки управления по умолчанию назначаются каждому слоту на основе MetadataType и MediaStatus.supportedMediaCommands .

MetadataType.Movie, MetadataType.Generic

А. --playback-logo-image

B. MovieMediaMetadata.subtitle или GenericMediaMetadata.subtitle .

C. MovieMediaMetadata.title или GenericMediaMetadata.title .

D. MediaStatus.currentTime

E. MediaInformation.duration

F. ControlsSlot.SLOT_SECONDARY_1

G. ControlsSlot.SLOT_PRIMARY_1

H. Воспроизведение/Пауза

I. ControlsSlot.SLOT_PRIMARY_2

J. ControlsSlot.SLOT_SECONDARY_2

Когда значение supportedMediaCommands равно ALL_BASIC_MEDIA , макет элемента управления по умолчанию будет отображаться, как показано ниже:

Когда значение supportedMediaCommands равно ALL_BASIC_MEDIA | QUEUE_PREV | QUEUE_NEXT , макет элемента управления по умолчанию будет отображаться, как показано ниже:

Когда значение supportedMediaCommands равно PAUSE | QUEUE_PREV | QUEUE_NEXT , макет элемента управления по умолчанию будет отображаться, как показано ниже:

Когда текстовые дорожки доступны, кнопка субтитров всегда будет отображаться на SLOT_SECONDARY_1 .

Чтобы динамически изменить значение supportedMediaCommands после запуска контекста приемника, вы можете вызвать PlayerManager.setSupportedMediaCommands , чтобы переопределить значение. Кроме того, вы можете добавить новую команду с помощью addSupportedMediaCommands или удалить существующую команду с помощью removeSupportedMediaCommands .

Звуковой интерфейс по умолчанию

Тип метаданных.MUSIC_TRACK

А. --playback-logo-image

B. MusicTrackMediaMetadata.albumName

C. MusicTrackMediaMetadata.title

D. MusicTrackMediaMetadata.albumArtist , MusicTrackMediaMetadata.artist или MusicTrackMediaMetadata.composer

E. MusicTrackMediaMetadata.images[0]

F. MediaStatus.currentTime

G. MediaInformation.duration

H. ControlsSlot.SLOT_SECONDARY_1

I. ControlsSlot.SLOT_PRIMARY_1

J. Воспроизведение/Пауза

K. ControlsSlot.SLOT_PRIMARY_2

L. ControlsSlot.SLOT_SECONDARY_2

Когда значение supportedMediaCommands равно ALL_BASIC_MEDIA , макет элемента управления по умолчанию будет отображаться, как показано ниже:

Когда значение supportedMediaCommands равно ALL_BASIC_MEDIA | QUEUE_PREV | QUEUE_NEXT , макет элемента управления по умолчанию будет отображаться, как показано ниже:

Чтобы динамически изменить значение supportedMediaCommands медиакоманд после запуска контекста веб-приемника, вы можете вызвать PlayerManager.setSupportedMediaCommands , чтобы переопределить это значение. Кроме того, вы можете добавлять новые команды с помощью addSupportedMediaCommands или удалять существующие команды с помощью removeSupportedMediaCommands .

Настройка макета кнопки управления пользовательского интерфейса

Использование пользовательского макета, если вы хотите изменить кнопки в элементах управления пользовательского интерфейса.

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

Затем вы можете назначить кнопки управления 4 слотам, вызвав 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
)

И пользовательский макет будет отображаться, как показано ниже:

Если назначенная кнопка не поддерживается в MediaStatus.supportedMediaCommands , она отображается серым цветом. Например, если supportedMediaCommands MediaCommands равны ALL_BASIC_MEDIA | QUEUE_NEXT | LIKE | DISLIKE , то кнопка QUEUE_PREV будет отключена.

Чтобы динамически изменить значение supportedMediaCommands медиакоманд после запуска контекста веб-приемника, вы можете вызвать PlayerManager.setSupportedMediaCommands , чтобы переопределить это значение. Кроме того, вы можете добавлять новые команды с помощью addSupportedMediaCommands или удалять существующие команды с помощью removeSupportedMediaCommands .

Вторичное изображение

Вторичное изображение предоставляет разработчикам Cast возможность добавлять информационное изображение в пользовательский интерфейс для аудио- и видеоприложений, например, для отображения логотипов местных каналов или формата мультимедиа. Эта новая функциональность предоставляется с очень небольшими накладными расходами при сохранении согласованного пользовательского интерфейса на разных платформах отображения Cast: Chromecast, интеллектуальных дисплеях и Chromecast с Google TV.