Spotify, el servicio mediante suscripción de transmisión de audio más popular del mundo, intenta mejorar continuamente la forma en que los usuarios consumen contenido de audio y video. Ofrece una amplia biblioteca de música, podcasts y audiolibros, y llega a millones de usuarios todos los días en dispositivos móviles, PCs y otras plataformas.
Hace poco, Spotify lanzó el Reproductor en miniatura de Spotify para sus clientes de computadoras de escritorio y reproductores web. 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 y proporciona a los usuarios acceso constante a Spotify. Esta es una función muy solicitada que les permite a los usuarios realizar varias tareas a la vez en diferentes ventanas y apps mientras disfrutan de sus artistas, playlists y podcasts favoritos en Spotify.
A continuación, se incluye una descripción detallada del desarrollo del reproductor en miniatura, desde el “truco de lienzo” inicial hasta la versión más avanzada y fácil de usar que se creó en la nueva API de pantalla en pantalla del documento.
El "truco de lienzo"
La iteración inicial del reproductor en miniatura se lanzó en 2019 en el reproductor web de Spotify como un proyecto de hackeo. El objetivo era emplear la API de pantalla en pantalla (PIP) del navegador para <video>, con el fin de mostrar la imagen del álbum en una ventana siempre activa. Sin embargo, esta API estaba diseñada principalmente para elementos de video y no era posible mostrar imágenes de la carátula de un álbum. Spotify evitó esto renderizando la imagen del álbum en un elemento de lienzo y usando el método HTMLCanvasElement captureStream() 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 el ejemplo de "Playlist de audio" de Google Chrome.
Spotify combinó el lienzo con los controladores de acciones apropiados establecidos en la API de Media Session para controlar qué controles del reproductor aparecían en la ventana de PIP. Esto les brindó a los usuarios una ventana flotante con la carátula del álbum y los controles del reproductor, que podían usar para controlar la reproducción mientras se concentraban en otras tareas.
Esto permitió que Spotify tuviera un reproductor en miniatura básico. Sin embargo, el enfoque tenía varias limitaciones:
- Los subtítulos de video no son compatibles con la ventana de PIP. Como Spotify debía mostrar subtítulos en todos los videos, se vio obligado a cerrar la ventana de PIP en cuanto un video comenzaba a reproducirse.
- Los controles del reproductor solo están visibles si la reproducción se realiza de forma local. Spotify permite la reproducción remota con Spotify Connect (y otros protocolos) y quiere que el usuario también pueda controlarla
- No se admite la personalización del aspecto de la ventana de PIP. Spotify solo podía mostrar material gráfico y usar los controles del reproductor que proporciona Chrome, lo que evitaba que se agregaran la marca de Spotify o controles adicionales del reproductor.
La falta de control sobre la interfaz de usuario y la incapacidad de agregar funciones específicas de Spotify aquí (por ejemplo, indicar que les gusta una pista) hicieron que no creyeran que este enfoque fuera adecuado para su cliente de escritorio.
Pantalla en pantalla del documento: La evolución del reproductor en miniatura
A principios de 2023, Spotify descubrió el renovado interés 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 API de Document Picture-in-Picture. Este desarrollo fue emocionante para Spotify, ya que le otorgaba control total sobre la apariencia de la ventana de PIP. Spotify colaboró con el equipo de Chrome durante la prueba de origen para desarrollar un nuevo reproductor en miniatura integrado en la API de pantalla en pantalla del documento.
La API de Document PiP te permite abrir una nueva ventana siempre activa 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 le dio control total sobre la apariencia y las funciones del reproductor en miniatura.
La nueva API de Document Picture-in-Picture también abordó problemas anteriores de Spotify:
- Los videos dentro de la ventana de PIP son elementos normales y son totalmente compatibles con los subtítulos.
- Con el control total de la IU, los controles del reproductor pueden mostrarse incluso cuando la reproducción se realiza de forma remota mediante Spotify Connect.
- Spotify pudo incorporar su estilo y controles de reproductor, lo que mejoró la experiencia del usuario.
- Pudieron admitir la API de Document PiP en el cliente de Spotify para computadoras de escritorio, lo que les permitió ofrecer el reproductor en miniatura a millones de usuarios de computadoras de escritorio.
Crea una ventana de pantalla en pantalla con React
En el siguiente ejemplo, se muestra la manera de usar la función de pantalla en pantalla del documento en React, al igual que el equipo de Spotify. Crearás dos componentes de React: MyFeature y PiPContainer.
El componente MyFeature se encarga de administrar la ventana de pantalla en pantalla. Renderiza un botón que activa o desactiva la ventana de pantalla en pantalla y procesa 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 pantalla en pantalla.
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 innovando y avanzando, mantiene su compromiso de mejorar el Reproductor en miniatura y planea perfeccionar aún más las funciones y la experiencia del usuario. Aunque aún no pueden usar funciones específicas, están entusiasmados con las posibilidades futuras del reproductor en miniatura.
La API de Document Picture-in-Picture nos proporcionó la flexibilidad y el control necesarios para crear un reproductor en miniatura más intuitivo y fácil de usar. Se espera que otros proveedores de navegadores tomen nota de las oportunidades que ofrece esta API y consideren incorporar compatibilidad con ella. Esto permitiría a Spotify ofrecer una experiencia coherente y mejorada a todos los usuarios, independientemente del navegador que hayan elegido.
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 para la API de Document Picture-in-Picture.