Spotify, le service de streaming audio le plus populaire au monde, vise en permanence à améliorer la façon dont les utilisateurs consomment des contenus audio et vidéo. Offrant une vaste bibliothèque de musique, de podcasts et de livres audio, il répond quotidiennement à des millions d'utilisateurs sur mobile, PC et d'autres plates-formes.
Spotify a récemment lancé le lecteur réduit Spotify pour ses clients ordinateurs et lecteurs Web. Le lecteur réduit offre les commandes de lecture essentielles dans une petite fenêtre compacte qui reste au premier plan, offrant ainsi aux utilisateurs un accès permanent à Spotify. Cette fonctionnalité, très demandée depuis longtemps, permet aux utilisateurs d'effectuer facilement plusieurs tâches à la fois dans différentes fenêtres et applications, tout en profitant de leurs artistes, playlists et podcasts préférés sur Spotify.
Vous trouverez ci-dessous une description détaillée du développement du lecteur réduit, du "piratage du canevas" initial à la version plus avancée et conviviale basée sur la nouvelle API Document Picture-in-picture.
Le « piratage du canevas »
La première version du lecteur réduit a été lancée en 2019 sur le lecteur Web de Spotify sous la forme d'un projet de piratage. L'objectif était d'utiliser l'API Picture-in-picture (PIP) du navigateur pour que la vidéo <video> affiche les pochettes d'album dans une fenêtre toujours affichée en haut de l'écran. Cependant, cette API était principalement conçue pour des éléments vidéo et il n'était pas possible d'afficher des images de pochettes d'album. Spotify a contourné cela en affichant la pochette de l'album dans un élément de canevas et en utilisant la méthode HTMLCanvasElement captureStream() pour obtenir un objet MediaStream en temps réel. Ce flux sert ensuite de source à la vidéo utilisée pour l'API PIP. Cette approche est basée sur l'exemple "Audio Playlist" de Google Chrome.
Spotify a associé le canevas aux gestionnaires d'actions appropriés définis dans l'API Media Session pour contrôler les commandes du lecteur à afficher dans la fenêtre PIP. Les utilisateurs disposent ainsi d'une fenêtre flottante avec la pochette de l'album et les commandes du lecteur, qu'ils peuvent utiliser pour contrôler la lecture tout en se concentrant sur d'autres tâches.
Cela a permis à Spotify de disposer d'un lecteur réduit basique. Cependant, cette approche présentait plusieurs limites:
- Les sous-titres vidéo ne sont pas compatibles dans la fenêtre PIP. Spotify étant tenu d'afficher les sous-titres sur toutes les vidéos, il a été contraint de fermer la fenêtre PIP dès le début de la lecture de la vidéo.
- Les commandes du lecteur ne sont visibles que si la lecture a lieu en local. Spotify autorise la lecture à distance à l'aide de Spotify Connect (et d'autres protocoles) et souhaite que l'utilisateur puisse également contrôler cette lecture
- Il n'est pas possible de personnaliser l'apparence de la fenêtre PIP. Spotify ne pouvait afficher des illustrations et utiliser que les commandes du lecteur fournies par Chrome, ce qui l'empêchait d'ajouter la marque Spotify ou des commandes de lecteur supplémentaires.
Le manque de contrôle de l'interface utilisateur et l'impossibilité d'ajouter des fonctionnalités spécifiques à Spotify ici (par exemple, aimer un titre) signifiaient que cette approche ne convenait pas à son client de bureau.
Document Picture-in-picture: l'évolution du lecteur réduit
Début 2023, Spotify a pris connaissance du renouvellement de l'intérêt de Google Chrome pour le lancement d'une nouvelle API permettant d'afficher du contenu HTML arbitraire dans la fenêtre PIP, connue sous le nom d'API Document Picture-in-picture. Cette évolution était passionnante pour Spotify, car elle lui donnerait un contrôle total sur l'apparence de la fenêtre PIP. Spotify a collaboré avec l'équipe Chrome lors de la phase d'évaluation pour développer un nouveau lecteur réduit basé sur l'API Document Picture-in-picture.
L'API Document PIP vous permet d'ouvrir une nouvelle fenêtre permanente à laquelle vous pouvez associer des éléments. Comme le lecteur Web Spotify est une application Web React, Spotify a utilisé la méthode createPortal() de ReactDOM pour afficher les composants personnalisés dans la fenêtre PIP à partir de l'application principale, ce qui vous donne un contrôle total sur l'apparence et les fonctionnalités du lecteur réduit.
La nouvelle API Document Picture-in-picture a également résolu les problèmes précédents de Spotify:
- Les vidéos affichées dans la fenêtre PIP sont des éléments vidéo standards entièrement compatibles avec les sous-titres.
- Grâce à un contrôle total sur l'interface utilisateur, vous pouvez afficher les commandes du lecteur même lorsque la lecture est en cours à distance à l'aide de Spotify Connect.
- Spotify a pu intégrer leur apparence et les commandes du lecteur afin d'améliorer l'expérience utilisateur.
- L'équipe a pu intégrer l'API Document PIP au client pour ordinateur de Spotify, ce qui lui a permis de proposer le lecteur réduit à des millions d'utilisateurs sur ordinateur.
Créer une fenêtre Picture-in-picture à l'aide de React
L'exemple suivant montre comment utiliser la fonctionnalité Document Picture-in-picture dans React, tout comme l'équipe Spotify. Vous allez créer deux composants React: MyFeature et PiPContainer.
Le composant MyFeature permet de gérer la fenêtre Picture-in-picture. Elle affiche un bouton qui active/désactive la fenêtre Picture-in-picture et le composant PiPContainer. Elle s'abonne également à l'événement "pagehide" de la fenêtre Picture-in-picture pour mettre à jour l'état lorsque la fenêtre est fermée.
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>
</>
);
};
Le composant PiPContainer utilise la méthode createPortal() de ReactDOM pour afficher le contenu dans la fenêtre 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;
};
Étapes suivantes
À mesure que Spotify continue d'évoluer et d'innover, l'équipe s'engage à améliorer le lecteur réduit, et prévoit d'affiner ses fonctionnalités et l'expérience utilisateur. Bien qu'il ne soit pas encore en mesure de proposer des fonctionnalités spécifiques, il se réjouit des futures possibilités offertes par le lecteur réduit.
L'API Document Picture-in-picture vous offre la flexibilité et le contrôle nécessaires pour créer un lecteur réduit plus intuitif et convivial. Nous espérons que d'autres fournisseurs de navigateurs prendront note des opportunités offertes par cette API et envisageront d'intégrer la prise en charge de cette API. Cela permettrait à Spotify d'offrir une expérience cohérente et améliorée à tous les utilisateurs, quel que soit le navigateur choisi.
Remerciements
Merci à tous les employés de Spotify qui ont contribué à la création du lecteur réduit.
Spotify souhaite également remercier l'équipe Google Chrome pour sa collaboration et pour avoir tenu compte de ses commentaires concernant l'API Document Picture-in-picture.