Shareable combos

[mateusfg7]

Describe new feat

Make combos shareable through URL states

Referencies

• https://www.tabnews.com.br/jnaraujo/url-states-guardando-dados-do-usuario-na-url-em-nextjs-app-dir

[maiconloure]

Can I do the implementation, or is it already in progress?

[mateusfg7]

I was refactoring code for work on it yesterday with commits 3f0823a and c2b885f . But I haven't started the implementation itself. So yeah you can try implement this feature and I can guide you with some ideas I thought of.

It will give me more time to implement #568.

[mateusfg7]

I was thinking to share sound states within the URL, as query params, and get it with useSearchParams(), with the following pattern:

/?theme=THEME&sounds=SOUND_ID:VOLUME,SOUND_ID:VOLUME

E.g.:

/?theme=transition&sounds=rain:1,storm:0.4,drops:0.5

[maiconloure]

I'm just finishing this implementation, but I'm struggling with a problem that can't allow me to play audio automatically when the users load the site with the shareable combo link, so I think I'll need more time to do this. Do you have a suggestion or idea that can help me with this?

[mateusfg7]

Could you make a draft pull request so I can take a look?

[maiconloure]

Sure, here #582

[mateusfg7]

I made some comments on PR, take a look 😃

Another points:

On src/components/sounds/index.tsx#148, I think that will be a good ideia to change line to

active: localSoundState.active && localSoundState.loaded,

With this && localSoundState.loaded we will prevent visual feedback of an "active sound" before load the sound.

The same with src/components/sounds/index.tsx#161:

isActive={localSoundState.active && localSoundState.loaded}

[mateusfg7]

I'm just finishing this implementation, but I'm struggling with a problem that can't allow me to play audio automatically when the users load the site with the shareable combo link, so I think I'll need more time to do this. Do you have a suggestion or idea that can help me with this?

About this error, I'm not receiving anything like this on my console, but I receive another error about autoplay block, my browser was configured to block autoplay sounds.

There is a way to identify configs like that to show a message about it to the user?

[mateusfg7]

I'm just finishing this implementation, but I'm struggling with a problem that can't allow me to play audio automatically when the users load the site with the shareable combo link, so I think I'll need more time to do this. Do you have a suggestion or idea that can help me with this?

About this error, I'm not receiving anything like this on my console, but I receive another error about autoplay block, my browser was configured to block autoplay sounds.

There is a way to identify configs like that to show a message about it to the user?

When I disabled "autoplay block" on Firefox, all works great.

Maybe we can show an alert to user for when the autoplay is blocked.

refs:

• https://developer.mozilla.org/en-US/docs/Web/API/Permissions_API

[mateusfg7]

I tested on Chrome and got the same error. It appears to be related to Google Chrome's new autoplay policies: https://developer.chrome.com/blog/autoplay/

On Firefox works as expected.

[mateusfg7]

Another solution could be to show a modal with a "Play" button and a message every time it detects a new combo in the URL, as soon as the user enters the site.

[mateusfg7]

Looks like on Chrome, the audio cannot autoplay if the user hasn't interacted with the website yet. We need to make user interact before autoplay sound.

I think that the solution will be verifying this scenario (a case when user enters a link with shared combo and is on chrome based browser), like

const needInteraction = (browser == "chorme") && (querySounds.length)

and if this scenario is true, use a variable/store with the information that the user interacted or not, and block autoplay util this variable/store is true, something like userHasInteracted = false .

On the first render, if the needInteraction is true and the userHasInteracted is false, show a modal with some cool message about the combo that will be played, and a button "Ok"/"Play"/"Nice" whatever, that will force user to make this first interaction. After button is pressed, change userHasInteracted to true and unlock sound to autoplay without errors.

useEffect(() => {
    if (needInteraction && !userHasInteracted) return

    // code...
  }, [soundsStore, userHasInteracted])

and

{(needInteraction && !userHasInteracted) && <InteractionModal />}

[maiconloure]

Looks like on Chrome, the audio cannot autoplay if the user hasn't interacted with the website yet. We need to make user interact before autoplay sound.

I think that the solution will be verifying this scenario (a case when user enters a link with shared combo and is on chrome based browser), like

const needInteraction = (browser == "chorme") && (querySounds.length)

and if this scenario is true, use a variable/store with the information that the user interacted or not, and block autoplay util this variable/store is true, something like userHasInteracted = false .

On the first render, if the needInteraction is true and the userHasInteracted is false, show a modal with some cool message about the combo that will be played, and a button "Ok"/"Play"/"Nice" whatever, that will force user to make this first interaction. After button is pressed, change userHasInteracted to true and unlock sound to autoplay without errors.

useEffect(() => {
    if (needInteraction && !userHasInteracted) return

    // code...
  }, [soundsStore, userHasInteracted])

and

{(needInteraction && !userHasInteracted) && <InteractionModal />}

Yeah, I think it's a good approach in this way
Sorry for the delay in giving a reply on the implementation. I did a good part of it last week, and I just needed to clean up the code and adjust some points, but I had some personal and work problems, so I couldn't update here.

[mateusfg7]

@maiconloure It's ok, I tried this implementation that I mentioned. Take a look and see if there are any conflicts with your adjusts.

[maiconloure]

I checked the implementations and I think that is it, I liked the modal, the only thing missing now would be the button to share the combo.