Music Player Button State Inconsistent When Switching Pages

[AntonCSalvador]

Music Player Button State Inconsistent When Switching Pages

Description

On the BytesOfLove website, there is a music player button located at the bottom left of the screen. However, when switching between pages or tabs within the site, the state of the button (whether the music is playing or paused) does not persist. This requires users to manually re-click the button to continue or pause the music, which disrupts the user experience.

Steps to Reproduce

1. Go to the BytesOfLove website.
2. Click the music player button at the bottom left to start playing music.
3. Navigate to a different page or switch tabs within the website.
4. Observe that the music stops, and the button does not reflect the previous state (playing/paused).

Expected Behavior

• The state of the music player button should persist when switching between pages or tabs on the website.
• If music is playing, it should continue to play without interruption when navigating to different pages.
• If music is paused, it should remain paused when switching pages, and the button should reflect the paused state.

Possible Solution

• Implement a persistent state management solution (e.g., using local storage, session storage, or a global state management system like Redux) to ensure the music player's state is maintained across page navigations.
• Ensure the music playback is not interrupted when users navigate between pages.

Additional Context

This issue affects the continuity of the user experience, especially for users who enjoy background music while browsing the website. It is also important to adhere to web laws.

[StrBoll]

Im on it!

[AntonCSalvador]

Thank you @StrBoll ! I will assign it right now

[StrBoll]

Committed the fixes but cant push to a new branch for the issue cause I don't have permissions.

edit -- nvm figured it out --

[AntonCSalvador]

@StrBoll Hey! great work! I tested in a bit and looks good. Can you open a pull request?

[StrBoll]

Pull request created.