بهینه سازی برای نمایشگرهای هوشمند

نمایشگرهای هوشمند دستگاه‌هایی با قابلیت لمسی هستند که به برنامه‌های گیرنده وب اجازه می‌دهند از کنترل‌های لمسی پشتیبانی کنند. Web Receiver SDK یک تجربه رابط کاربری پیش‌فرض را با سفارشی‌سازی اضافی کنترل‌های پخش‌کننده فراهم می‌کند.

این راهنما نحوه بهینه سازی برنامه گیرنده وب خود را هنگام راه اندازی بر روی نمایشگرهای هوشمند و نحوه سفارشی کردن کنترل های پخش کننده را توضیح می دهد.

توجه: این سفارشی سازی نیاز به استفاده از عنصر cast-media-player دارد. در صورت عدم استفاده از این عنصر، ردیابی وضعیت رابط کاربری، نام تجاری و سایر سفارشی‌سازی‌ها باید به صورت دستی انجام شوند.

دسترسی به کنترل های رابط کاربری

شیء UI Controls با کد زیر قابل دسترسی است:

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

اگر از عنصر cast-media-player استفاده نمی‌کنید، باید ویژگی touchScreenOptimizedApp را در UiConfig زیر CastReceiverOptions true .

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

رابط کاربری پیش‌فرض ویدیو

دکمه های کنترل پیش فرض بر اساس MetadataType و MediaStatus.supportedMediaCommands به هر شکاف اختصاص داده می شوند.

MetadataType.Movie، MetadataType.Generic

الف. --playback-logo-image

ب. MovieMediaMetadata.subtitle یا GenericMediaMetadata.subtitle .

ج. 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 دستور جدیدی اضافه کنید یا با استفاده از addSupportedMediaCommands دستور موجود را حذف removeSupportedMediaCommands .

رابط صوتی پیش فرض

MetadataType.MUSIC_TRACK

الف. --playback-logo-image

ب. 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 پس از راه‌اندازی زمینه Web Receiver، می‌توانید PlayerManager.setSupportedMediaCommands را فراخوانی کنید تا مقدار را لغو کنید. همچنین، می‌توانید با استفاده از addSupportedMediaCommands دستورات جدیدی اضافه کنید یا با استفاده از addSupportedMediaCommands دستورات موجود را حذف removeSupportedMediaCommands .

طرح بندی دکمه کنترل رابط کاربری را سفارشی کنید

اگر می‌خواهید دکمه‌ها را در کنترل‌های UI تغییر دهید، از یک طرح‌بندی سفارشی استفاده کنید.

مهم: برای جلوگیری از تضاد بین طرح‌بندی سفارشی و پیش‌فرض، لازم است قبل از اختصاص دکمه‌های کنترل به شکاف‌ها، همه دکمه‌های پیش‌فرض را حذف کنید.

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

سپس، می‌توانید با فراخوانی assignButton ، دکمه‌های کنترل را به 4 اسلات اختصاص دهید.

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 برابر با ALL_BASIC_MEDIA | QUEUE_NEXT | LIKE | DISLIKE ، سپس دکمه QUEUE_PREV غیرفعال است.

برای تغییر پویا مقدار supportedMediaCommands پس از راه‌اندازی زمینه Web Receiver، می‌توانید PlayerManager.setSupportedMediaCommands را فراخوانی کنید تا مقدار را لغو کنید. همچنین، می‌توانید با استفاده از addSupportedMediaCommands دستورات جدیدی اضافه کنید یا با استفاده از addSupportedMediaCommands دستورات موجود را حذف removeSupportedMediaCommands .

تصویر ثانویه

تصویر ثانویه به توسعه دهندگان Cast این امکان را می دهد که برای مثال، برای نمایش آرم کانال های محلی یا قالب رسانه، یک تصویر اطلاعاتی به رابط کاربری برای برنامه های صوتی و تصویری اضافه کنند. این عملکرد جدید با هزینه بسیار کمی ارائه می شود و در عین حال رابط کاربری ثابتی را در پلتفرم های مختلف نمایش Cast حفظ می کند: Chromecast، نمایشگرهای هوشمند، و Chromecast با Google TV.