Mengoptimalkan untuk Layar Smart

Layar smart adalah perangkat dengan fungsi sentuh untuk mengizinkan aplikasi Penerima Web mendukung kontrol yang mendukung sentuhan. Web Receiver SDK memberikan pengalaman UI default dengan penyesuaian tambahan kontrol pemutar.

Panduan ini menjelaskan cara mengoptimalkan aplikasi Penerima Web saat diluncurkan di layar smart dan cara menyesuaikan kontrol pemutar.

Catatan: Penyesuaian ini memerlukan penggunaan elemen cast-media-player UI pemain bawaan. Pelacakan status UI, branding, dan penyesuaian lainnya harus dilakukan secara manual jika elemen ini tidak digunakan.

Mengakses kontrol UI

Objek Kontrol UI dapat diakses dengan kode berikut:

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

Jika tidak menggunakan elemen cast-media-player, Anda perlu menetapkan properti touchScreenOptimizedApp ke true di UiConfig di bagian CastReceiverOptions.

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

UI video default

Tombol kontrol default ditetapkan ke setiap slot berdasarkan MetadataType dan MediaStatus.supportedMediaCommands.

MetadataType.Movies, MetadataType.Generic

J. --playback-logo-image

B. MovieMediaMetadata.subtitle atau GenericMediaMetadata.subtitle.

C. MovieMediaMetadata.title atau GenericMediaMetadata.title.

D. MediaStatus.currentTime

E. MediaInformation.duration

F. ControlsSlot.SLOT_SECONDARY_1

ControlsSlot.SLOT_PRIMARY_1

B Putar/Jeda

I. ControlsSlot.SLOT_PRIMARY_2

J. ControlsSlot.SLOT_SECONDARY_2

Jika nilai supportedMediaCommands sama dengan ALL_BASIC_MEDIA, tata letak kontrol default akan ditampilkan seperti di bawah ini:

Jika nilai supportedMediaCommands sama dengan ALL_BASIC_MEDIA | QUEUE_PREV | QUEUE_NEXT, tata letak kontrol default akan ditampilkan seperti di bawah ini:

Jika nilai supportedMediaCommands sama dengan PAUSE | QUEUE_PREV | QUEUE_NEXT, tata letak kontrol default akan ditampilkan seperti di bawah ini:

Saat trek teks tersedia, tombol teks tertutup akan selalu ditampilkan di SLOT_SECONDARY_1.

Untuk mengubah nilai supportedMediaCommands secara dinamis setelah memulai konteks penerima, Anda dapat memanggil PlayerManager.setSupportedMediaCommands untuk mengganti nilai. Selain itu, Anda dapat menambahkan perintah baru menggunakan addSupportedMediaCommands atau menghapus perintah yang ada menggunakan removeSupportedMediaCommands.

UI audio default

MetadataType.MUSIC_TRACK

J. --playback-logo-image

B. MusicTrackMediaMetadata.albumName

C. MusicTrackMediaMetadata.title

D. MusicTrackMediaMetadata.albumArtist, MusicTrackMediaMetadata.artist, atau MusicTrackMediaMetadata.composer

E. MusicTrackMediaMetadata.images[0]

F. MediaStatus.currentTime

MediaInformation.duration

H. ControlsSlot.SLOT_SECONDARY_1

I. ControlsSlot.SLOT_PRIMARY_1

J. Putar/Jeda

T. ControlsSlot.SLOT_PRIMARY_2

T. ControlsSlot.SLOT_SECONDARY_2

Jika nilai supportedMediaCommands sama dengan ALL_BASIC_MEDIA, tata letak kontrol default akan ditampilkan seperti di bawah ini:

Jika nilai supportedMediaCommands sama dengan ALL_BASIC_MEDIA | QUEUE_PREV | QUEUE_NEXT, tata letak kontrol default akan ditampilkan seperti di bawah ini:

Untuk mengubah nilai supportedMediaCommands secara dinamis setelah memulai konteks Penerima Web, Anda dapat memanggil PlayerManager.setSupportedMediaCommands untuk mengganti nilai. Selain itu, Anda dapat menambahkan perintah baru menggunakan addSupportedMediaCommands atau menghapus perintah yang ada dengan menggunakan removeSupportedMediaCommands.

Menyesuaikan tata letak tombol kontrol UI

Menggunakan tata letak kustom jika Anda ingin mengubah tombol di kontrol UI.

Penting: Semua tombol default harus dihapus sebelum menetapkan tombol kontrol ke slot untuk mencegah konflik antara tata letak kustom dan default.

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

Kemudian, Anda dapat menetapkan tombol kontrol ke 4 slot dengan memanggil 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
)

Kemudian, tata letak kustom akan ditampilkan seperti di bawah ini:

Jika tombol yang ditetapkan tidak didukung di MediaStatus.supportedMediaCommands, tombol tersebut akan berwarna abu-abu. Misalnya, jika supportedMediaCommands sama dengan ALL_BASIC_MEDIA | QUEUE_NEXT | LIKE | DISLIKE, tombol QUEUE_PREV akan dinonaktifkan.

Untuk mengubah nilai supportedMediaCommands secara dinamis setelah memulai konteks Web Receiver, Anda dapat memanggil PlayerManager.setSupportedMediaCommands untuk mengganti nilai. Selain itu, Anda dapat menambahkan perintah baru menggunakan addSupportedMediaCommands atau menghapus perintah yang ada dengan menggunakan removeSupportedMediaCommands.

Gambar Sekunder

Gambar Sekunder memberi developer Cast fleksibilitas untuk menambahkan gambar informasi ke UI bagi aplikasi audio dan video, untuk menampilkan logo saluran lokal atau format media. Fungsi baru ini menyediakan overhead yang sangat kecil sekaligus mempertahankan UI yang konsisten di berbagai platform tampilan Cast: Chromecast, layar smart, dan Chromecast dengan Google TV.