Want to do something! (Add Spotify Canvas) (Add await for Canvas)

[dientuki]

Hi! Im a developer too, from Argentina. I want to add the mini video loop instead album cover (if avaiable) but, i don't know how to achieve an dev environment to work. Im running MM on an ALL-IN-One (celeron, 8gb ram ddr, 512gb ssd)... but, i need a bit better to work... i reboot electron when i want to try something.

Would you help me?

dientuki@gmail.com

[Fabrizz]

Hola, para desarrollar para MM2 es fácil, ya que es JS puro, sin framework aparte de electron, la guía para instalarlo en windows es https://docs.magicmirror.builders/getting-started/installation.html#other-operating-systems, podes clonar tu fork a la carpeta de modules, después de seguir la guía para instalación en windows, usando npm run server ya vas a tener tu MM2 local.

El problema de los videos o canvas es que están bajo una API que solo se accede con credenciales generadas con la aplicación de escritorio o móvil, las únicas implementaciones de clientes de Spotify que simulan las de aplicaciones nativas están escritas en rust/python/java. No se si existe alguna forma de obtenerlos puramente en js/in-browser.

[dientuki]

Claro, es como lo corro en la maquina que lo uso, para "desarrollar" abro el inspector en electron, y cuando hago algun cambio lo cierro (control + q) y lo vuelvo a levantar, a veces con control + r no levanta bien el modulo.

Este este repo que lo hace lo de los canvas, queria https://github.com/bartleyg/my-spotify-canvas

[Fabrizz]

Ahh es un reverse de la API interna del reproductor web de ellos, se puede hacer, el "backend" del módulo avisa cuando es un cambio de canción y no solo una actualización, de ahí podes hacer lo que quieras.

Si vas a hacerlo en el mismo pc donde tenes MM2, en vez de usar PM2 para prenderlo o npm start, usa npm start dev, y entra a localhost:8080 en el buscador, como vas a estar solo modificando el código del "frontend" con F5 se te va recargar todo con los cambios.

[dientuki]

Chaaaaaaa gracias! Cuando lo tenga hago una PR!

[dientuki]

Me falta pulir detalles.

Features que quiero: Como el video es mas grande que la caratula, poder elegir entre: a) centrar el video al tamaño actual de la caratura o b) "aumentar" el tamaño vertical (no horizontal) del lugar de la caratula para que entre (teniendo en cuenta si el modulo esta en algun lugar raro) Transicion bonita entre canvas/imagenes

¿Queres que suba el codigo a mi fork? output.webm

[Fabrizz]

Esta genial, subilo a tu fork, cuando tenga tiempo lo miro bien, estaría genial mantener la relación de aspecto de los canvas y trasladar los textos para que el modulo no cambie de tamaño, pero la verdad es que es hasta demasiado para un modulo de MM2.

Quizás abría que poner tanto los elementos del cover y el canvas adentro de un div que cambie de relación de aspecto 1:1 (imagen) a 9:21 (canvas, no se si es la relación de aspecto, pero como ejemplo). Así el cambio de tamaño se puede hacer con una transición, esperando a la carga del canvas. (Si el modulo esta en una posición bottom, esto solo movería el titulo para arriba, en una posición top también movería todos los otros módulos que lo sigan)

[dientuki]

New PR! https://github.com/Fabrizz/MMM-OnSpotify/pull/67 El aspect ratio de los canvas cambia, cualquier artista los puede subir en el formato que quiera, por lo general son verticales para que aparezcan en telefonos.

Opciones: showCanvas... doh, para que aparesca o no canvasEffect, como se muestra el canvas en la caja

Tambien cambie la manera en la que se muestra el cover y como se hace el fade, aparte de que puse variables css para manejar el tiempo y la funcion de easing

[Fabrizz]

Ahí quedo la release https://github.com/Fabrizz/MMM-OnSpotify/releases. Thanks!

[dientuki]

Gracias!!!! Lo estaba viendo creo que hay 2 issues: 1) en el readme figura otro repo (el de los colores vibrantes) en lugar del original del canvas 2) conseguir el canvas tarda un poco mas que conseguir las imagenes, esto hace que cuando cambias de una cancion que tiene canvas a otra cancion la animacion sea... rara cuando usas "scale". Placeholder con canva > placeholder con imagen, cambiando tamaño > placeholder con canva y vuelve a cambiar de tamaño.

[Fabrizz]

1. En la prox release lo arreglo, gracias
2. Seguramente añada una opción como experimentalCanvasAwait para esperar a la respuesta del Canvas antes de cambiar el tamaño

[Fabrizz]

Parece que Spotify blockea el endpoint si es anónimo después de un tiempo, de vuelve un 502 con un body que dice que la repuesta original fue 500. La única opcion seria enviar una cookie para autentificarse (dura un año):

      return fetch(new URL("get_access_token?reason=transport&productType=web_player", spotifyBase), {
        headers: {
          "User-Agent": "Mozilla/5.0 (X11; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/114.0",
          Accept:
            "text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,*/*;q=0.8",
          "Accept-Language": "en-US,en;q=0.5",
          "Alt-Used": "open.spotify.com",
          "Upgrade-Insecure-Requests": "1",
          "Sec-Fetch-Dest": "document",
          "Sec-Fetch-Mode": "navigate",
          "Sec-Fetch-Site": "cross-site",
          Cookie: `sp_dc=WEB_PLAYER_SP_DC_COOKIE`,
        }
      })

[dientuki]

en mi caso me autentique con la app de spotify en la pc donde tengo MM; tal ves por eso no veo ese problema