التحسين على الشاشات الذكية

الشاشات الذكية هي أجهزة مزودة بوظيفة اللمس للسماح لتطبيقات مستقبل الويب بدعم عناصر التحكم الممكّنة باللمس. توفر SDK لمتلقي الويب تجربة واجهة مستخدم افتراضية مع تخصيص إضافي لعناصر التحكم في المشغل.

يشرح هذا الدليل كيفية تحسين تطبيق "مستقبل الويب" عند تشغيله على الشاشات الذكية وكيفية تخصيص عناصر التحكم في المشغل.

الوصول إلى عناصر التحكم في واجهة المستخدم

يمكن الوصول إلى كائن عناصر تحكم واجهة المستخدم بالشفرة التالية:

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

(ب). MovieMediaMetadata.subtitle أو GenericMediaMetadata.subtitle.

ج- MovieMediaMetadata.title أو GenericMediaMetadata.title.

د. MediaStatus.currentTime

هـ- MediaInformation.duration

و. ControlsSlot.SLOT_SECONDARY_1

ز. ControlsSlot.SLOT_PRIMARY_1

اتش تشغيل / إيقاف مؤقت

1- ControlsSlot.SLOT_PRIMARY_2

ي. 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

ب. MusicTrackMediaMetadata.albumName

ج. MusicTrackMediaMetadata.title

د- MusicTrackMediaMetadata.albumArtist أو MusicTrackMediaMetadata.artist أو MusicTrackMediaMetadata.composer

هـ- MusicTrackMediaMetadata.images[0]

و. MediaStatus.currentTime

ز. MediaInformation.duration

ح. ControlsSlot.SLOT_SECONDARY_1

1- ControlsSlot.SLOT_PRIMARY_1

ي. تشغيل / إيقاف مؤقت

كيه. ControlsSlot.SLOT_PRIMARY_2

إل. 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();

بعد ذلك، يمكنك تخصيص أزرار التحكم لأربعة خانات عن طريق الاتصال بـ 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 يساوي ALL_BASIC_MEDIA | QUEUE_NEXT | LIKE | DISLIKE، سيتم إيقاف الزر QUEUE_PREV.

لتغيير قيمة supportedMediaCommands ديناميكيًا بعد بدء سياق "مستقبل الويب"، يمكنك استدعاء PlayerManager.setSupportedMediaCommands لإلغاء القيمة. يمكنك أيضًا إضافة أوامر جديدة باستخدام addSupportedMediaCommands أو إزالة الأوامر الحالية باستخدام removeSupportedMediaCommands.

صورة ثانوية

تمنح الصورة الثانوية مطوّري برامج Cast مرونة إضافة صورة معلوماتية إلى واجهة المستخدم لتطبيقات الصوت والفيديو، لعرض شعارات القنوات المحلية أو تنسيق الوسائط على سبيل المثال. يتم توفير هذه الوظيفة الجديدة مع القليل من النفقات العامة مع الاحتفاظ بواجهة مستخدم ثابتة عبر الأنظمة الأساسية المختلفة لعرض Cast: Chromecast والشاشات الذكية وChromecast مع Google TV.