SpotifyBigPicture

SpotifyBigPicture

¡Una interfaz altamente personalizable que muestra su estado de reproducción actual en Spotify en una pequeña y hermosa página de navegador!

¡Es posible que desee usar esto en el modo de pantalla completa (en mi opinión, bastante decepcionante), o puede usarlo para su televisor para darle a ese OSD anticuado y de baja resolución un trabajo de pintura fresca!

Esta interfaz es principalmente de solo lectura. Específicamente, esto significa que en realidad no puede controlar su música , más allá de algunos comandos básicos como reproducir, pausa y omitir (primero debe habilitarse en la configuración). Esto se debe a las limitaciones de la API de Spotify y porque la idea es configurar esta aplicación una vez, y luego se ejecuta permanentemente como una pantalla de información pura.

Un ejemplo en el que esto es útil sería organizar una fiesta en la que desee dejar que sus invitados vean en cualquier momento qué canciones están adelante, colocando un monitor cerca de la pista de baile que se conecta a una Raspberry Pi.

Capturas de pantalla

Estos dos ejemplos solo muestran ejemplos del preajuste predeterminado de SpotifyBigicture. Para más capturas de pantalla, ¡vea los otros presets!

Vista del álbum

Vista de la lista de reproducción

Personalización

Haga clic en el símbolo de engranaje en la parte superior izquierda de la interfaz para abrir la configuración para preferencias visuales. ¡Aquí puede personalizar el estilo de la interfaz desde varias opciones con solo unos pocos clics!

Su configuración se almacenan automáticamente localmente, por lo que no necesitará preocuparse por reconfigurar todo cada vez que reabra el sitio web.

• Aquí se puede encontrar una lista completa de cada preajuste: Presets.md
• La información general sobre la configuración se puede encontrar aquí: settings.md

Instalación

(Si prefiere un video tutorial, haga clic aquí)

Paso 1: Crear aplicación Spotify

1. Cree una aplicación en el tablero de desarrolladores de Spotify (es posible que primero deba crear una cuenta)
2. Copie la identificación del cliente y el secreto del cliente y guárdelos para más adelante
3. Vaya a "usuarios y acceso" y agregue su cuenta allí (nombre y dirección de correo electrónico)

Desde aquí, puede elegir entre una de las dos formas de continuar con la instalación.

Paso 2 - Variante A: Instalación manual de Java

1. Después de crear la aplicación Spotify, haga clic en "Editar Configuración" y agregue el URI de redirección para esta aplicación: http://localhost:8183/login-callback (asegúrese de hacer clic en el pequeño botón "Agregar" verde antes de guardar!)
2. Descargue el lanzamiento actual
3. Pegar la identificación del cliente y el secreto del cliente que ha guardado anteriormente en los campos respectivos en el archivo spotifybot.properties
4. Abra un terminal en la misma carpeta que el archivo JAR (se realiza fácilmente manteniendo presionado el cambio y haciendo clic derecho, luego seleccionando "Abrir terminal aquí"). Luego comience la aplicación con java -jar SpotifyBigPicture.jar

Paso 2 - Variante B: Pull Docker Imagen

1. Después de crear la aplicación Spotify, haga clic en "Editar Configuración" y agregue el URI de redirección para esta aplicación. Dependiendo de dónde planee ejecutar la aplicación, debe proporcionar un URI que sea accesible desde el exterior. Por ejemplo http://ip-of-docker-machine:8183/login-callback . ¡La devolución de llamada de inicio de sesión debe terminar con /login-callback ! También asegúrese de hacer clic en el pequeño botón "Agregar" verdes antes de guardar
2. Tire de la imagen Docker: docker pull ghcr.io/selbi182/spotifybigpicture
3. Ejecute la imagen Docker. Inserte el ID del cliente , el secreto del cliente y redirige URI que haya especificado anteriormente en los campos respectivos, para pasarlos como variables de entorno: docker run --name spotifybigpicture -d -p 8183:8183 -e client_id=CLIENTID -e client_secret=CLIENTSECRET -e redirect_uri=REDIRECTURI ghcr.io/selbi182/spotifybigpicture
4. Luego ejecute docker logs -f spotifybigpicture para que pueda ver la URL requerida para el siguiente paso

Paso 3: Iniciar sesión

1. Se le pedirá que inicie sesión. La aplicación intentará abrir el navegador por sí solo, pero si falla, eche un vistazo a la salida de la consola y copie la URL que se muestra en su navegador manualmente. A este momento le debería gustar: https://accounts.spotify.com:443/authorize?client_id=[...]&response_type=code&redirect_uri=[...]&scope=[...]
2. Si todo funcionó, ¡ya! Si ha elegido la variante A, la aplicación estará disponible en http: // localhost: 8183/y si eligió la variante B, será el servidor que haya proporcionado

Requisitos

• Java 11 o más nuevo:
  • Descargue aquí (obviamente solo se requiere si está haciendo la instalación manual de Java)
• El monitor debe tener una relación de aspecto 16: 9:
  • Si bien hay un preajuste específicamente optimizado para el modo de retrato, esta aplicación se ha optimizado principalmente para el modo de paisaje. Si bien cualquier relación de aspecto debería funcionar teóricamente, 16: 9 es la única relación de aspecto que es 100% apoyada y probada
• Un navegador moderno:
  • Hay muchas campanas y silbatos elegantes adjuntos a esta aplicación que simplemente no funcionarán en navegadores más antiguos. Lo desarrollé y optimicé principalmente para Mozilla Firefox, pero también funciona en Google Chrome. No probado en ningún otro navegador, por lo que no garantizaré la estabilidad completa allí
• Spotify Premium:
  • Todavía puede usar esta aplicación como usuario gratuito, pero no obtendrá la funcionalidad completa. Por ejemplo, obtener su cola actual solo está disponible para usuarios premium de Spotify. Para usuarios gratuitos, solo se puede mostrar la canción actual. Para los álbumes, más que una buena suposición de cualquier canción que llegue la próxima. Desafortunadamente no es posible

¿La interfaz no se actualiza?

La información se obtiene de la API de Spotify al sondearla una vez por segundo. Desafortunadamente, no hay una forma "adecuada" de hacerlo, ya que los webhooks para los cambios de canciones (como Discord usan, por ejemplo) no están disponibles para la API pública.

Como resultado, la conexión podría atascarse de vez en cuando. La aplicación intentará automáticamente restablecer las conexiones cuando sea posible, lo que generalmente solo toma unos segundos. Sin embargo, para mantener la apariencia de la interfaz lo más suave posible, el temporizador simulará la reproducción seguir contando segundos por sí solo si actualmente se está reproduciendo una canción.

Sin embargo, si la interfaz se vuelve completamente insensible, pruebe estos enfoques:

1. Cambie el contexto de reproducción actual (por ejemplo, cambiando de una lista de reproducción a un álbum)

2. Por cualquier razón extraña, simplemente haciendo clic en el botón Devices en Spotify en su PC (sin seleccionar ningún dispositivo diferente, literalmente, solo abrir el menú desplegable) a veces obliga a la interfaz a ponerse al día. Esta ha sido mi opción para arreglar pantallas atascadas, y funciona sorprendentemente bien:

Apoyo

Si tiene algún problema, escriba un boleto de problema en Github y con mucho gusto lo echaré un vistazo :)

Alternativamente, envíeme un mensaje en Discord. Mi nombre de usuario es: Selbi