Cara Spotify menggunakan Picture-in-Picture API untuk membangun Miniplayer Spotify

Guido Kessels

François Beaufort

Spotify, layanan langganan streaming audio terpopuler di dunia, terus berupaya meningkatkan cara pengguna mengonsumsi konten audio dan video. Menawarkan beragam koleksi musik, podcast, dan buku audio, aplikasi ini melayani jutaan pengguna setiap hari di perangkat seluler, PC, dan platform lainnya.

Baru-baru ini, Spotify merilis Spotify Miniplayer untuk klien desktop dan pemutar web mereka. Miniplayer dirancang untuk menawarkan kontrol pemutaran yang penting dalam jendela kecil dan ringkas yang tetap berada di atas, sehingga pengguna dapat terus mengakses 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 ini adalah penjelasan mendetail tentang pengembangan Miniplayer, mulai dari "peretasan kanvas" awal hingga versi yang lebih canggih dan mudah digunakan yang dibangun berdasarkan Document Picture-in-Picture API yang baru.

"Peretasan kanvas"

Iterasi awal Miniplayer diluncurkan pada tahun 2019 di Spotify Web Player sebagai project peretasan. Tujuannya adalah menggunakan Picture-in-Picture (PiP) API) browser untuk <video>, guna menampilkan gambar album di jendela yang selalu ada di atas. Namun, API ini terutama dirancang untuk elemen video dan tidak memungkinkan untuk menampilkan gambar sampul album. Spotify mengakali hal ini dengan merender gambar 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 "Daftar Putar Audio" Google Chrome.

Spotify menggabungkan kanvas dengan pengendali tindakan yang sesuai dan disetel di Media Session API untuk mengontrol kontrol pemutar yang akan muncul di jendela PiP. Hal ini memberi pengguna jendela mengambang dengan gambar 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, Spotify dipaksa untuk menutup jendela PiP segera setelah video mulai diputar.
• Kontrol pemutar hanya dapat dilihat jika pemutaran berlangsung secara lokal. Spotify memungkinkan pemutaran jarak jauh menggunakan Spotify Connect (dan protokol lainnya) dan menginginkan pengguna dapat mengontrol pemutaran ini juga
• 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 mencegah mereka menambahkan branding Spotify atau kontrol pemutar tambahan.

Kurangnya kontrol atas antarmuka pengguna, dan ketidakmampuan untuk menambahkan fitur khusus Spotify di sini (misalnya, menyukai sebuah lagu) berarti mereka tidak merasa pendekatan ini cocok untuk klien desktop mereka.

Document Picture-in-Picture: Evolusi Miniplayer

Pada awal 2023, Spotify mempelajari minat baru Google Chrome dalam meluncurkan API baru yang memungkinkan konten HTML arbitrer ditampilkan di dalam jendela PiP, yang dikenal sebagai Document Picture-in-Picture API. Pengembangan ini menarik bagi Spotify karena akan memberi Spotify kontrol penuh atas tampilan jendela PiP. Spotify berkolaborasi dengan tim Chrome selama Origin Trial untuk mengembangkan Miniplayer baru yang dibangun di Document Picture-in-Picture API.

Document PiP API memungkinkan Anda membuka jendela baru yang selalu ada di atas, tempat Anda dapat menyematkan 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 bahkan saat pemutaran dilakukan dari jarak jauh menggunakan Spotify Connect.
• Spotify dapat menggabungkan kontrol tampilan dan nuansa serta pemutar, sehingga meningkatkan pengalaman pengguna.
• Mereka dapat menghadirkan dukungan untuk Document PiP API ke klien Desktop Spotify, yang memungkinkan mereka menghadirkan Miniplayer ke jutaan pengguna Desktop.

Membuat jendela Picture-in-Picture menggunakan React

Contoh berikut menunjukkan bagaimana Anda dapat menggunakan Document Picture-in-Picture di React, seperti halnya tim Spotify. Anda akan membuat dua komponen React: MyFeature dan PiPContainer.

Komponen MyFeature bertanggung jawab untuk 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 jendela Picture-in-Picture.

Catatan: Untuk memastikan gaya visual yang konsisten, Spotify menggunakan fungsi cloneStyles() untuk menyalin gaya dari jendela utama ke jendela Picture-in-Picture. Fungsi ini tidak disertakan dalam cuplikan ini, tetapi Anda dapat melihat contoh di Picture-in-Picture untuk elemen apa pun, bukan hanya <video>.

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 selanjutnya

Seiring kemajuan dan inovasi Spotify, Spotify tetap berkomitmen untuk meningkatkan kualitas Miniplayer, dan berencana untuk lebih meningkatkan kualitas fitur dan pengalaman penggunanya. Meskipun belum bisa berkomitmen pada fitur-fitur tertentu, mereka antusias dengan potensi Miniplayer pada masa mendatang.

Document Picture-in-Picture API telah menyediakan fleksibilitas dan kontrol untuk membuat Miniplayer yang lebih intuitif dan mudah digunakan. Diharapkan vendor browser lain akan memperhatikan peluang yang ditawarkan API ini dan mempertimbangkan untuk memasukkan dukungannya. Dengan demikian, Spotify dapat memberikan pengalaman yang konsisten dan lebih baik bagi semua pengguna, apa pun browser yang mereka pilih.

Ucapan terima kasih

Terima kasih kepada semua di Spotify yang telah terlibat dalam pembuatan Miniplayer.

Spotify juga ingin berterima kasih kepada tim Google Chrome atas kolaborasi mereka dan mempertimbangkan masukan Spotify untuk Document Picture-in-Picture API.