Spotify, il servizio in abbonamento di streaming audio più popolare al mondo, mira costantemente a migliorare il modo in cui gli utenti consumano contenuti audio e video. Offre una vasta raccolta di musica, podcast e audiolibri e serve ogni giorno milioni di utenti su dispositivi mobili, PC e altre piattaforme.
Di recente Spotify ha rilasciato il miniplayer di Spotify per i client di player desktop e web. Il miniplayer è progettato per offrire i controlli di riproduzione essenziali in una finestra piccola e compatta che rimane in primo piano, offrendo agli utenti un accesso costante a Spotify. Si tratta di una funzionalità richiesta da tempo che consente agli utenti di svolgere più attività contemporaneamente in finestre e app diverse, mentre ascoltano i loro artisti, playlist e podcast preferiti su Spotify.
Di seguito è riportato un approfondimento sullo sviluppo del miniplayer, dal "hack canvas" iniziale alla versione più avanzata e user-friendly basata sulla nuova API Document Picture in Picture.
Il "hack della tela"
L'iterazione iniziale del miniplayer è stata lanciata nel 2019 sul web player di Spotify come progetto di hacking. L'obiettivo era utilizzare l'API Picture in picture (PiP) per <video> del browser per visualizzare la copertina dell'album in una finestra sempre in primo piano. Tuttavia, questa API è stata progettata principalmente per gli elementi video e non era possibile mostrare le immagini delle copertine degli album. Spotify ha aggirato il problema eseguendo il rendering della copertina dell'album in un elemento canvas e utilizzando il metodo HTMLCanvasElement captureStream() per ottenere un oggetto MediaStream in tempo reale. Questo stream funge da origine per il video utilizzato per l'API PiP. Questo approccio si basava sul sample "Audio Playlist" di Google Chrome.
Spotify ha combinato il canvas con i gestori di azioni appropriati impostati nell'API Media Session per controllare quali controlli del player vengono visualizzati nella finestra PIP. In questo modo, gli utenti potevano usufruire di una finestra mobile con la copertina dell'album e i controlli del player, che potevano utilizzare per controllare la riproduzione mentre si concentravano su altre attività.
In questo modo, Spotify ha potuto avere un miniplayer di base. Tuttavia, l'approccio presentava diversi limiti:
- I sottotitoli dei video non sono supportati all'interno della finestra PiP. Poiché Spotify era obbligato a mostrare i sottotitoli su tutti i video, era costretta a chiudere la finestra PiP non appena iniziava la riproduzione di un video.
- I controlli del player sono visibili solo se la riproduzione avviene localmente. Spotify consente la riproduzione da remoto tramite Spotify Connect (e altri protocolli) e vuole che l'utente possa controllare anche questa riproduzione
- Non è supportata la personalizzazione dell'aspetto della finestra PiP. Spotify poteva mostrare solo l'artwork e utilizzare i controlli del player forniti da Chrome, impedendo di aggiungere il branding di Spotify o controlli aggiuntivi del player.
La mancanza di controllo sull'interfaccia utente e l'impossibilità di aggiungere funzionalità specifiche di Spotify (ad esempio mettere Mi piace a un brano) hanno fatto sì che non ritenessero questo approccio adatto al loro client desktop.
Picture in Picture dei documenti: l'evoluzione del mini player
All'inizio del 2023, Spotify ha appreso del rinnovato interesse di Google Chrome per il lancio di una nuova API che consenta di visualizzare contenuti HTML arbitrari all'interno della finestra PiP, nota come API Document Picture-in-Picture. Questo sviluppo è stato entusiasmante per Spotify, in quanto gli avrebbe garantito il pieno controllo sull'aspetto della finestra PiP. Spotify ha collaborato con il team di Chrome durante la prova Origin per sviluppare un nuovo miniplayer basato sull'API Picture-in-Picture di Document.
L'API Document PiP ti consente di aprire una nuova finestra sempre in primo piano a cui puoi allegare elementi. Poiché Spotify Web Player è un'applicazione web React, Spotify ha utilizzato il metodo createPortal() di ReactDOM per eseguire il rendering di componenti personalizzati nella finestra PiP dall'applicazione principale, offrendo il pieno controllo sull'aspetto e sulle funzionalità del miniplayer.
La nuova API Document Picture-in-Picture ha risolto anche i problemi precedenti di Spotify:
- I video all'interno della finestra PiP sono elementi video normali e supportano completamente i sottotitoli.
- Con il pieno controllo dell'interfaccia utente, i controlli del player possono essere visualizzati anche quando la riproduzione avviene da remoto utilizzando Spotify Connect.
- Spotify è riuscita a incorporare il proprio look e i controlli del player, migliorando l'esperienza utente.
- Sono riusciti a implementare il supporto dell'API Document PiP nel client desktop di Spotify, il che ha permesso di offrire il miniplayer a milioni di utenti desktop.
Creare una finestra Picture in picture utilizzando React
L'esempio seguente mostra come utilizzare la funzionalità Picture-in-Picture dei documenti in React, proprio come il team di Spotify. Creerai due componenti React: MyFeature e PiPContainer.
Il componente MyFeature è responsabile della gestione della finestra Picture in picture. Mostra un pulsante che attiva/disattiva la finestra Picture in picture e mostra il componente PiPContainer. Inoltre, si iscrive all'evento "pagehide" della finestra Picture in picture per aggiornare lo stato quando la finestra viene chiusa.
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>
</>
);
};
Il componente PiPContainer utilizza il metodo createPortal() di ReactDOM per eseguire il rendering dei contenuti nella finestra 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;
};
Passaggi successivi
Spotify continua a evolversi e innovare, impegnandosi a migliorare il miniplayer e a perfezionarne le funzionalità e l'esperienza utente. Anche se non è ancora possibile impegnarsi a implementare funzionalità specifiche, il team è entusiasta delle possibilità future del miniplayer.
L'API Picture-in-Picture di Document ha fornito la flessibilità e il controllo necessari per creare un miniplayer più intuitivo e facile da usare. Ci auguriamo che altri fornitori di browser prendano nota delle opportunità offerte da questa API e valutino la possibilità di includerne il supporto. In questo modo Spotify potrebbe offrire un'esperienza coerente e migliorata a tutti gli utenti, indipendentemente dal browser scelto.
Ringraziamenti
Grazie a tutto il team di Spotify che ha contribuito alla creazione del mini player.
Spotify vuole anche ringraziare il team di Google Chrome per la collaborazione e per aver preso in considerazione il feedback di Spotify per l'API Picture-in-Picture di Document.