the location of contributors is not shown in firefox and safari

[negar-75]

Description

when I click on each contributors I couldn't see the map of theri location

Screenshots

Any additional information?

No response

What browser are you seeing the problem on?

No response

Checklist

• [X] I have checked for duplicate issues
• [X] I have read the Contribution Guidelines
• [x] I am willing to work on this issue (optional)

[vrun1208]

Hi @negar-75, I couldn't find any issue in the firefox and all seems to be working fine, can't say about safari right now.

[XanderRubio]

HI @negar-75

Hi @negar-75, I couldn't find any issue in the firefox and all seems to be working fine, can't say about safari right now.

Hi @vrun1208! Thank you for taking the initiative and assisting by taking the time to look into this issue and this is gratefully appreciated to assist with active engagement and participation in the Before I Die Code. Thank you!

[XanderRubio]

Hi @negar-75, I hope you're doing well and keep going with your travel videos in Lisbon on YouTube. Thank you for taking the time to raise a bug issue I am having a look into viewing in Firefox and Safari 👀

[XanderRubio]

Currently, I am able to see the location of the contributor in Safari @negar-75

[XanderRubio]

@negar-75 This is my current view when using Firefox:

[XanderRubio]

Ahhhhhh, I see what the issue is @negar-75 . I understand that you have shared a screenshot from your local dev server on localhost:3000, but you are currently unable to fetch the GooGle Maps API because you don't have the API key.

As a best practice, the API key has been added to the Vercel deployment and GiitHub project settings as an Environment Variable to avoid any potential security risks. If you need assistance in obtaining an API key to use on your local dev server, I am more than happy to help. This would be useful if you are looking to make improvements to the UI or if you are interested in learning about adding a .env file that can have your own API key that won't be pushed as a file when making a commit. Please let me know if you have any questions or need further assistance.

[XanderRubio]

For the time being this issue isn't an issue now and I am grateful for your attentiveness and enthusiasm for helping to grow the Before I Die code. Thank you @negar-75. I will await your response before closing this issue in case something changes or I haven't understood correctly.

[negar-75]

Hi @negar-75, I couldn't find any issue in the firefox and all seems to be working fine, can't say about safari right now.

Hi @vrun1208 yea the problem is coming from API key Cuz for me is undefined and I am in local server

[negar-75]

Ahhhhhh, I see what the issue is @negar-75 . I understand that you have shared a screenshot from your local dev server on localhost:3000, but you are currently unable to fetch the GooGle Maps API because you don't have the API key.

As a best practice, the API key has been added to the Vercel deployment and GiitHub project settings as an Environment Variable to avoid any potential security risks. If you need assistance in obtaining an API key to use on your local dev server, I am more than happy to help. This would be useful if you are looking to make improvements to the UI or if you are interested in learning about adding a .env file that can have your own API key that won't be pushed as a file when making a commit. Please let me know if you have any questions or need further assistance.

Hi @XanderRubio yes exactly that is a issue and I was looking for .env file and I did not find something 😂😂 I got it! you added it as a env variable in vercel ! that is ok👌👌👌👌

[negar-75]

the another problem I noticed it firefox that heartbeat song does not play on mouseover for me @XanderRubio

[negar-75]

and I have another suggestion for best performance of website! as the number of contributors grow, it is better to apply infinite scrolling and lazy loading to render only components in the point of view not all component at the same time @XanderRubio

[vrun1208]

the another problem I noticed it firefox that heartbeat song does not play on mouseover for me @XanderRubio

@negar-75, yes you're right! I also experiencing the same issue

[XanderRubio]

Ahhhhhh, I see what the issue is @negar-75 . I understand that you have shared a screenshot from your local dev server on localhost:3000, but you are currently unable to fetch the GooGle Maps API because you don't have the API key.

As a best practice, the API key has been added to the Vercel deployment and GiitHub project settings as an Environment Variable to avoid any potential security risks. If you need assistance in obtaining an API key to use on your local dev server, I am more than happy to help. This would be useful if you are looking to make improvements to the UI or if you are interested in learning about adding a .env file that can have your own API key that won't be pushed as a file when making a commit. Please let me know if you have any questions or need further assistance.

Hi @XanderRubio

yes exactly that is a issue and I was looking for .env file and I did not find something 😂😂

I got it!

you added it as a env variable in vercel !

that is ok👌👌👌👌

Great and I have done the same exact thought before 😇😅 @negar-75

[XanderRubio]

the another problem I noticed it firefox that heartbeat song does not play on mouseover for me

@XanderRubio

Excellent! I am traveling at the moment and once settled into my next location I will review and respond. Have a nice day!

[negar-75]

the problem is not from the format .wav! I think this is because of useSound hook that does not work in firefox

[negar-75]

in firefox you should click on the heart icon to music starts to play not with onMouseEnter and you got this warning An AudioContext was prevented from starting automatically. It must be created or resumed after a user gesture on the page. [howler.js:525]

​

[XanderRubio]

in firefox you should click on the heart icon to music starts to play not with onMouseEnter and you got this warning An AudioContext was prevented from starting automatically. It must be created or resumed after a user gesture on the page. [howler.js:525]

​

Yes, very similar message in the console when on chrome too.

[XanderRubio]

the problem is not from the format .wav! I think this is because of useSound hook that does not work in firefox

Yes, and I know the useSound hook has changed twice from several PRs.