Spotify, el servicio de suscripción de transmisión de audio más popular del mundo, se esfuerza constantemente por mejorar la forma en que los usuarios consumen contenido de audio y video. Ofrece una amplia biblioteca de música, podcasts y audiolibros, y atiende a millones de usuarios a diario en dispositivos móviles, PCs y otras plataformas.
Recientemente, Spotify lanzó el Spotify Miniplayer para sus clientes de reproductores web y de escritorio. El Reproductor en miniatura está diseñado para ofrecer controles de reproducción esenciales en una ventana pequeña y compacta que permanece en la parte superior, lo que les brinda a los usuarios acceso constante a Spotify. Esta es una función que los usuarios pedían desde hace tiempo y les permite realizar varias tareas sin problemas en diferentes ventanas y apps mientras disfrutan de sus artistas, playlists y podcasts favoritos en Spotify.
A continuación, se muestra un análisis detallado del desarrollo del minireproductor, desde el "hack de lienzo" inicial hasta la versión más avanzada y fácil de usar compilada en la nueva API de Pantalla en pantalla de documentos.
El "hack de lienzo"
La iteración inicial del Miniplayer se lanzó en 2019 en el reproductor web de Spotify como un proyecto de hack. El objetivo era emplear la API de pantalla en pantalla (PiP) del navegador para <video> para mostrar la portada del álbum en una ventana siempre en la parte superior. Sin embargo, esta API se diseñó principalmente para elementos de video y no era posible mostrar imágenes de la portada del álbum. Spotify evitó esto renderizando la portada del álbum en un elemento de lienzo y usando el método captureStream() de HTMLCanvasElement para obtener un objeto MediaStream en tiempo real. Esta transmisión sirve como fuente del video que se usa para la API de PiP. Este enfoque se basó en la muestra de "Playlist de audio" de Google Chrome.
Spotify combinó el lienzo con los controladores de acciones adecuados establecidos en la API de Media Session para controlar qué controles del reproductor aparecerían en la ventana de PiP. Esto les brindaba a los usuarios una ventana flotante con la portada del álbum y los controles del reproductor, que podían usar para controlar la reproducción mientras se enfocaban en otras tareas.
Esto permitió que Spotify tuviera un minireproductor básico. Sin embargo, el enfoque tenía varias limitaciones:
- No se admiten subtítulos de video en la ventana de PiP. Debido a que Spotify debía mostrar subtítulos en todos los videos, se vio obligado a cerrar la ventana de PiP en cuanto comenzaba a reproducirse un video.
- Los controles del reproductor solo se ven si la reproducción se realiza de forma local. Spotify permite la reproducción remota con Spotify Connect (y otros protocolos) y desea que el usuario también pueda controlar esta reproducción.
- No se admite la personalización del aspecto de la ventana del PiP. Spotify solo podía mostrar material gráfico y usar los controles del reproductor que proporciona Chrome, lo que les impedía agregar el desarrollo de la marca de Spotify o controles de reproductor adicionales.
La falta de control sobre la interfaz de usuario y la imposibilidad de agregar funciones específicas de Spotify (por ejemplo, marcar una pista como favorita) significaba que no sentían que este enfoque fuera adecuado para su cliente de escritorio.
Pantalla en pantalla para documentos: la evolución del reproductor en miniatura
A principios de 2023, Spotify se enteró del interés renovado de Google Chrome en lanzar una nueva API que permitiría que se mostrara contenido HTML arbitrario dentro de la ventana de PiP, conocida como la API de Documento en Pantalla en Pantalla. Este desarrollo fue emocionante para Spotify, ya que les otorgaría control total sobre la apariencia de la ventana de PiP. Spotify colaboró con el equipo de Chrome durante su prueba de origen para desarrollar un nuevo minireproductor creado con la API de Picture-in-Picture de Documentos.
La API de Document PiP te permite abrir una nueva ventana siempre en la parte superior a la que puedes adjuntar elementos. Como el reproductor web de Spotify es una aplicación web de React, Spotify usó el método createPortal() de ReactDOM para renderizar componentes personalizados en la ventana de PiP desde la aplicación principal, lo que brinda control total sobre la apariencia y las funciones del minireproductor.
La nueva API de Document Picture-in-Picture también abordó los problemas anteriores de Spotify:
- Los videos dentro de la ventana de PiP son elementos de video normales y son compatibles por completo con los subtítulos.
- Con el control total de la IU, los controles del reproductor se pueden mostrar incluso cuando la reproducción se realiza de forma remota con Spotify Connect.
- Spotify pudo incorporar su apariencia y controles de reproductor, lo que mejoró la experiencia del usuario.
- Pudieron admitir la API de Document PiP en el cliente de escritorio de Spotify, lo que les permitió llevar el minireproductor a millones de usuarios de computadoras de escritorio.
Crea una ventana de Pantalla en pantalla con React
En el siguiente ejemplo, se muestra cómo puedes usar la función de pantalla en pantalla de documentos en React, al igual que el equipo de Spotify. Crearás dos componentes de React: MyFeature y PiPContainer.
El componente MyFeature es responsable de administrar la ventana de pantalla en pantalla. Renderiza un botón que activa o desactiva la ventana Pantalla en pantalla y renderiza el componente PiPContainer. También se suscribe al evento "pagehide" de la ventana de pantalla en pantalla para actualizar el estado cuando se cierra la ventana.
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>
</>
);
};
El componente PiPContainer usa el método createPortal() de ReactDOM para renderizar contenido en la ventana de imagen en imagen.
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;
};
¿Qué sigue?
A medida que Spotify sigue avanzando e innovando, se mantiene firme en su compromiso de mejorar el Miniplayer y planea definir mejor sus funciones y la experiencia del usuario. Si bien aún no pueden comprometerse con funciones específicas, les entusiasman las posibilidades futuras del minireproductor.
La API de Document Picture-in-Picture proporcionó la flexibilidad y el control necesarios para crear un minireproductor más intuitivo y fácil de usar. Esperamos que otros proveedores de navegadores tomen nota de las oportunidades que ofrece esta API y consideren incorporar compatibilidad con ella. Esto permitiría que Spotify ofrezca una experiencia coherente y mejorada para todos los usuarios, independientemente del navegador que elijan.
Agradecimientos
Gracias a todos los miembros de Spotify que participaron en la creación del Reproductor en miniatura.
Spotify también quiere agradecer al equipo de Google Chrome por su colaboración y por tener en cuenta los comentarios de Spotify sobre la API de Document Picture-in-Picture.