Dynamic Player Styles

[ClaudioPuggioni]

Hello,
I'll make sure to keep it short.

I want to change the player styles every time the track/album changes.
Currently, the styles for the player can only be set once (before the player loads). Not sure if I'm doing something wrong.

[gilbarbara]

Hey @ClaudioPuggioni
Can you set a codesandbox with a minimal reproducible example?

[ClaudioPuggioni]

Hey @gilbarbara ,

I just set one up. However, I did not include the authorization token, and access token fetching.
However, if you have a token, you can enter it into the input box and run the player.

Here's the link to the codesandbox: https://codesandbox.io/s/for-gilbarbara-nfe1m4?file=/src/App.js

Note:
Logs will show that the input style is changed but the player's CSS remains the same. Would be nice to change the player background color and text color after the player loads.

[gilbarbara]

@ClaudioPuggioni
Yeah, the styles are set in the Player's constructor.
I have to debug some issues with the Player styles, and I'll update the flow so it can change dynamically.

[gilbarbara]

hey @ClaudioPuggioni

Added support for dynamic styles in v0.11.3

I've created a script to update the required styles if you want a basic example.

You'll need to set up the callback to change the styles state when the track changes.

const handleSpotifyPlayerCallback = async ({ track, type }: CallbackState) => {
    if (type === TYPE.TRACK) {
      const trackStyles = await request(
        `https://your-domain/api/getImagePlayerStyles?url=${track.image}`,
      );

      setStyles(trackStyles);
    }
  };

[ClaudioPuggioni]

Thank you @gilbarbara, this is perfect.