Spotify, il servizio in abbonamento per lo streaming audio più famoso 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 si rivolge ogni giorno a milioni di utenti su dispositivi mobili, PC e altre piattaforme.
Di recente, Spotify ha rilasciato il mini player di Spotify per i clienti di lettori desktop e web player. Il mini player è progettato per offrire controlli di riproduzione essenziali in una finestra piccola e compatta che rimane nella parte superiore, offrendo agli utenti un accesso costante a Spotify. Si tratta di una funzionalità richiesta da tempo e consente agli utenti di svolgere facilmente più attività contemporaneamente in diverse finestre e app, ascoltando gli artisti, le playlist e i podcast che preferiscono su Spotify.
Di seguito è riportata una panoramica dettagliata dello sviluppo del mini player, dall'iniziale attacco "canvas hack" alla versione più avanzata e facile da usare basata sulla nuova API Document Picture in picture.
La "canvas hack"
L'iterazione iniziale del mini player è stata lanciata nel 2019 sul Web Player di Spotify come progetto di pirateria informatica. L'obiettivo era utilizzare l'API Picture in picture (PIP) del browser per <video> al fine di visualizzare le copertine degli album in una finestra sempre attiva. Tuttavia, questa API è stata progettata principalmente per gli elementi video e non è stato possibile mostrare immagini delle copertine degli album. Spotify ha aggirato questo 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 quindi da sorgente per il video utilizzato per l'API PIP. Questo approccio si basava sull'esempio di "Playlist audio" 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 mostrare nella finestra PIP. In questo modo gli utenti potevano accedere a una finestra mobile con le copertine degli album e i controlli del player, che potevano utilizzare per controllare la riproduzione mentre potevano concentrarsi su altre attività.
In questo modo Spotify ha potuto avere un mini player di base. Tuttavia, l'approccio presentava diversi limiti:
- I sottotitoli dei video non sono supportati nella finestra PIP. Poiché Spotify doveva 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 soltanto se la riproduzione avviene localmente. Spotify consente la riproduzione remota utilizzando Spotify Connect (e altri protocolli) e vuole che anche l'utente possa controllare questa riproduzione
- Non è disponibile alcun supporto per la personalizzazione dell'aspetto della finestra PIP. Spotify può visualizzare solo l'artwork e utilizzare i controlli del player forniti da Chrome, impedendogli di aggiungere il branding di Spotify o altri controlli del player.
La mancanza di controllo sull'interfaccia utente e l'impossibilità di aggiungere funzionalità specifiche di Spotify in questa sede (ad esempio l'aggiunta di Mi piace a una traccia) significavano che l'azienda non riteneva che questo approccio fosse adatto al loro client desktop.
Document Picture in picture: l'evoluzione del mini player
All'inizio del 2023, Spotify è venuta a conoscenza del rinnovato interesse di Google Chrome per il lancio di una nuova API che consentirebbe la visualizzazione di contenuti HTML arbitrari all'interno della finestra PIP, nota come API Document Picture-in-Picture. Questo sviluppo è stato entusiasmante per Spotify, che avrebbe garantito il controllo completo sull'aspetto della finestra PIP. Spotify ha collaborato con il team di Chrome durante la prova dell'origine per sviluppare un nuovo mini player basato sull'API Document Picture in picture.
L'API Document PiP ti consente di aprire una nuova finestra sempre attiva a cui puoi collegare gli 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, dando il pieno controllo sull'aspetto e sulle funzionalità del mini player.
La nuova API Document Picture in picture ha inoltre risolto i problemi precedenti di Spotify:
- I video visualizzati all'interno della finestra PIP sono elementi video normali e hanno il pieno supporto per i sottotitoli.
- Grazie al pieno controllo dell'UI, i controlli del player possono essere visualizzati anche durante la riproduzione da remoto tramite Spotify Connect.
- Spotify ha potuto integrare l'aspetto e i controlli del player, migliorando l'esperienza utente.
- Il team è riuscito a portare il supporto dell'API Document PiP al client desktop di Spotify, il che ha permesso di portare il mini player a milioni di utenti di computer desktop.
Creare una finestra Picture in picture utilizzando React
L'esempio seguente mostra come utilizzare Document Picture in picture in React, proprio come fa il team di Spotify. Dovrai creare due componenti React: MyFeature e PiPContainer.
Il componente MyFeature è responsabile della gestione della finestra Picture in picture. Esegue il rendering di un pulsante che attiva/disattiva la finestra Picture in picture e visualizza il componente PiPContainer. Sottoscrive inoltre l'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
Mentre continua a progredire e innovarsi, Spotify continua a impegnarsi a migliorare il mini player e prevede di perfezionarne ulteriormente le funzionalità e l'esperienza utente. Anche se non sono ancora in grado di dedicarsi a funzionalità specifiche, sono entusiasti delle possibilità future del mini player.
L'API Document Picture in picture ha offerto la flessibilità e il controllo necessari per creare un mini player più intuitivo e facile da usare. La speranza è che altri fornitori di browser prenderanno nota delle opportunità offerte da questa API e valuteranno la possibilità di integrarla nel supporto. Spotify può offrire un'esperienza coerente e migliorata a tutti gli utenti, indipendentemente dal browser scelto.
Ringraziamenti
Grazie a tutti i membri di Spotify che hanno partecipato alla creazione del mini player.
Spotify desidera inoltre ringraziare il team di Google Chrome per la collaborazione e per aver tenuto conto del feedback di Spotify in merito all'API Document Picture in picture.