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.
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
B. MovieMediaMetadata.subtitle
atau GenericMediaMetadata.subtitle
.
C. MovieMediaMetadata.title
atau GenericMediaMetadata.title
.
F. ControlsSlot.SLOT_SECONDARY_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
B. MusicTrackMediaMetadata.albumName
C. MusicTrackMediaMetadata.title
D. MusicTrackMediaMetadata.albumArtist
, MusicTrackMediaMetadata.artist
, atau MusicTrackMediaMetadata.composer
E. MusicTrackMediaMetadata.images[0]
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.
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.