Bug report - Advanced Audio Player

[itsdoleey]

Hey,

I’m not sure if this is the right place to report issues, but I just subscribed to use the advanced audio player and noticed that conditional statements don’t work for toggling the player color, controls color, handle color, and background bar color.

When the current user’s theme is set to Dark (i’ve also tested other conditional statements), the player should turn red, but it remains the default blue. I’ve attached screenshots of the setup and issue for reference.

Thanks!

[itsdoleey]

One additional detail: It works on page load—if the user’s theme is set to Dark (or any other conditional statement that’s true) when the page loads, the player turns red. However, if the theme is toggled afterward, the colors don’t update.

[dorel]

Hi @itsdoleey,

Thanks so much for reaching out to us and for using our plugin!

The reason why this customization doesn’t work conditionally in real-time (without refreshing the page) is due to how the element is initialized on the page. When the element initializes, it loads all the provided information, such as player color. Unfortunately, without reloading the page, it’s currently not possible to change these fields dynamically.

I’m really sorry to share this disappointing news with you

Let me know if there’s anything else I can assist you with!

Best regards

Browse all Zeroqode Plugins for Bubble

[itsdoleey]

Hey, no worries. Found a work around.

For anyone else who might need this, here’s my solution:

You can add or remove a class (like “player-dark-mode” or any name you choose) on an element to control its behavior.

Workflow:
1.Set up a trigger (e.g., a custom event). Mine was: When the user’s dark mode is “Dark”.
2. Run the following JavaScript with the code below:
3. Add class:
document.querySelector(".mejs__mediaelement").classList.add(“player-dark-mode”);

Remove class:
document.querySelector(".mejs__mediaelement").classList.remove(“player-dark-mode”);

4. Define what happens when the class is added using CSS through an html element on the page:

.mejs__mediaelement.player-dark-mode { background-color: red !important; }

Need more code to control other aspects but this should get you going.

[dorel]

Hi @itsdoleey,

Thanks so much for sharing this! Yes, modifying the CSS properties will work to change them in real-time. I hope this information helps other users with the same concern.

Let me know if there’s anything else I can assist you with

Best regards

Browse all Zeroqode Plugins for Bubble