Spotify, layanan langganan streaming audio paling populer di dunia, terus berupaya meningkatkan cara pengguna mengonsumsi konten audio dan video. Dengan menawarkan koleksi musik, podcast, dan buku audio yang luas, aplikasi ini melayani jutaan pengguna setiap hari di perangkat seluler, PC, dan platform lainnya.
Baru-baru ini, Spotify merilis Spotify Miniplayer untuk klien pemutar desktop dan web mereka. Miniplayer dirancang untuk menawarkan kontrol pemutaran penting dalam jendela kecil dan ringkas yang tetap berada di atas, sehingga memberi pengguna akses konstan ke Spotify. Fitur ini telah lama diminta, dan memungkinkan pengguna melakukan multitasking dengan lancar di berbagai jendela dan aplikasi sambil menikmati artis, playlist, dan podcast favorit mereka di Spotify.
Berikut adalah tampilan mendetail tentang pengembangan Miniplayer, mulai dari "canvas hack" awal hingga versi yang lebih canggih dan mudah digunakan yang dibuat di Document Picture-in-Picture API baru.
"Canvas hack"
Iterasi awal Miniplayer diluncurkan pada tahun 2019 di Web Player Spotify sebagai project hack. Tujuannya adalah untuk menggunakan Picture-in-Picture (PiP) API browser untuk <video> guna menampilkan sampul album di jendela yang selalu berada di atas. Namun, API ini terutama dirancang untuk elemen video dan tidak dapat menampilkan gambar sampul album. Spotify mengakalinya dengan merender sampul album ke elemen kanvas dan menggunakan metode HTMLCanvasElement captureStream() untuk mendapatkan objek MediaStream real-time. Streaming ini kemudian berfungsi sebagai sumber untuk video yang digunakan untuk PiP API. Pendekatan ini didasarkan pada contoh "Playlist Audio" Google Chrome.
Spotify menggabungkan kanvas dengan pengendali tindakan yang sesuai yang ditetapkan di Media Session API untuk mengontrol kontrol pemutar yang akan muncul di jendela PiP. Tindakan ini memberi pengguna jendela mengambang dengan sampul album dan kontrol pemutar, yang dapat mereka gunakan untuk mengontrol pemutaran sambil berfokus pada tugas lain.
Hal ini memungkinkan Spotify memiliki Miniplayer dasar. Namun, pendekatan ini memiliki beberapa batasan:
- Subtitel video tidak didukung di dalam jendela PiP. Karena Spotify diwajibkan untuk menampilkan subtitel di semua video, mereka terpaksa menutup jendela PiP segera setelah video mulai diputar.
- Kontrol pemutar hanya terlihat jika pemutaran terjadi secara lokal. Spotify memungkinkan pemutaran jarak jauh menggunakan Spotify Connect (dan protokol lainnya) dan ingin pengguna juga dapat mengontrol pemutaran ini
- Tidak ada dukungan untuk menyesuaikan tampilan dan nuansa jendela PiP. Spotify hanya dapat menampilkan karya seni dan menggunakan kontrol pemutar yang disediakan oleh Chrome, sehingga mencegahnya menambahkan branding Spotify atau kontrol pemutar tambahan.
Kurangnya kontrol atas antarmuka pengguna, dan ketidakmampuan untuk menambahkan fitur khusus Spotify di sini (misalnya, menyukai lagu) berarti mereka merasa pendekatan ini tidak cocok untuk klien desktop mereka.
Mendokumentasikan Picture-in-Picture: Evolusi Miniplayer
Pada awal tahun 2023, Spotify mengetahui minat baru Google Chrome untuk meluncurkan API baru yang akan memungkinkan konten HTML arbitrer ditampilkan di dalam jendela PiP, yang dikenal sebagai Document Picture-in-Picture API. Pengembangan ini sangat menarik bagi Spotify karena akan memberi mereka kontrol penuh atas tampilan jendela PiP. Spotify berkolaborasi dengan tim Chrome selama Uji Coba Origin untuk mengembangkan Miniplayer baru yang dibuat di Document Picture-in-Picture API.
Document PiP API memungkinkan Anda membuka jendela baru yang selalu di atas tempat Anda dapat melampirkan elemen. Karena Spotify Web Player adalah aplikasi web React, Spotify menggunakan metode createPortal() ReactDOM untuk merender komponen kustom ke jendela PiP dari aplikasi utama, sehingga memberikan kontrol penuh atas tampilan dan fitur Miniplayer.
Document Picture-in-Picture API baru juga mengatasi masalah Spotify sebelumnya:
- Video di dalam jendela PiP adalah elemen video reguler dan memiliki dukungan penuh untuk subtitel.
- Dengan kontrol penuh atas UI, kontrol pemutar dapat ditampilkan meskipun pemutaran terjadi dari jarak jauh menggunakan Spotify Connect.
- Spotify dapat menggabungkan tampilan dan nuansa serta kontrol pemutar mereka, sehingga meningkatkan pengalaman pengguna.
- Mereka dapat menghadirkan dukungan untuk Document PiP API ke klien Desktop Spotify, sehingga mereka dapat menghadirkan Miniplayer kepada jutaan pengguna Desktop.
Membuat jendela Picture-in-Picture menggunakan React
Contoh berikut menunjukkan cara menggunakan Picture-in-Picture Dokumen di React, seperti yang dilakukan tim Spotify. Anda akan membuat dua komponen React: MyFeature dan PiPContainer.
Komponen MyFeature bertanggung jawab mengelola jendela Picture-in-Picture. Fungsi ini merender tombol yang mengalihkan jendela Picture-in-Picture dan merender komponen PiPContainer. Fungsi ini juga berlangganan peristiwa "pagehide" jendela Picture-in-Picture untuk memperbarui status saat jendela ditutup.
const MyFeature = () => {
const [pipWindow, setPiPWindow] = useState<Window | null>(
documentPictureInPicture.window
);
const handleClick = useCallback(async () => {
if (pipWindow) {
pipWindow.close();
} else {
const newWindow = await documentPictureInPicture.requestWindow();
setPiPWindow(newWindow);
}
}, [pipWindow]);
useEffect(() => {
const handleWindowClose = (): void => {
setPiPWindow(null);
};
pipWindow?.addEventListener("pagehide", handleWindowClose);
return () => {
pipWindow?.removeEventListener("pagehide", handleWindowClose);
};
}, [pipWindow]);
return (
<>
<button onClick={handleClick}>
{pipWindow ? "Close PiP Window" : "Open PiP Window"}
</button>
<PiPContainer pipWindow={pipWindow}>Hello World 👋!</PiPContainer>
</>
);
};
Komponen PiPContainer menggunakan metode createPortal() ReactDOM untuk merender konten ke dalam jendela Picture-in-Picture.
type Props = PropsWithChildren<{
pipWindow: Window | null;
}>;
const PiPContainer = ({ pipWindow, children }: Props) => {
useEffect(() => {
if (pipWindow) {
cloneStyles(window.document, pipWindow.document);
}
}, [pipWindow]);
return pipWindow ? createPortal(children, pipWindow.document.body) : null;
};
Langkah berikutnya
Seiring Spotify terus berkembang dan berinovasi, mereka tetap berkomitmen untuk meningkatkan kualitas Miniplayer, dan berencana untuk lebih meningkatkan kualitas fitur dan pengalaman penggunanya. Meskipun belum dapat berkomitmen pada fitur tertentu, mereka sangat antusias dengan kemungkinan Miniplayer di masa mendatang.
Document Picture-in-Picture API telah memberikan fleksibilitas dan kontrol untuk membuat Miniplayer yang lebih intuitif dan mudah digunakan. Harapannya adalah vendor browser lain akan memperhatikan peluang yang ditawarkan API ini dan mempertimbangkan untuk menyertakan dukungan untuknya. Hal ini akan memungkinkan Spotify memberikan pengalaman yang konsisten dan ditingkatkan bagi semua pengguna, terlepas dari browser yang mereka pilih.
Ucapan terima kasih
Terima kasih kepada semua orang di Spotify yang terlibat dalam pembuatan Miniplayer.
Spotify juga ingin berterima kasih kepada tim Google Chrome atas kolaborasi mereka dan karena mempertimbangkan masukan Spotify untuk Document Picture-in-Picture API.