Can't change volume in firefox, TouchEvent is not defined

[peterzeng]

Hi. just wanted to say this is really cool! However, it seems like changing the volume or scrubbing through the song isn't working in firefox at the moment. Doing so gives us this error log:

Uncaught ReferenceError: TouchEvent is not defined getCoordinates utils.ts:4 handleClickTrack index.tsx:104 React 14 unstable_runWithPriority scheduler.development.js:646 React 4 getCoordinates utils.ts:4 handleClickTrack index.tsx:104 React 14 bind_applyFunctionN self-hosted:1359 dispatchEvent self-hosted:1322 unstable_runWithPriority scheduler.development.js:646 React 4 bind_applyFunctionN self-hosted:1359 dispatchDiscreteEvent self-hosted:1322

It seems like an issue with FireFox requiring additional code for handling TouchEvents, perhaps in the src/components/ClickOutside.tsx file?

Thanks!

[gilbarbara]

hey @peterzenger

Apparently, the error occurred in the handleClickTrack listener...

I'll need to check that, feel free to submit a PR.

[NathanWine]

Hi @gilbarbara

I did some digging and found that the error occurs in your react-range-slider project that this player uses as a dependency. AFAIK, TouchEvents are not fully compatible with all desktop browsers (https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/TouchEvent) and will raise an error that they are undefined if you try to use them as the slider currently does.

A simple fix is to first check if TouchEvent is defined before checking if a given event is an instance of a TouchEvent (I.E. window.TouchEvent && e instanceof TouchEvent). I have submitted a PR on your slider repo that should address the issue if you want to take a look. Note that I had some issues with your test/build configurations due to some outdated dependencies so I just submitted a PR for the file in question so as to not make executive decisions where not appropriate.

[peterzeng]

Thank you @NathanWine! Collaboration is the key to our success!

[gilbarbara]

hey @NathanWine Thanks, I'll update the project to add the demo and use codesandbox ci to test it

[gilbarbara]

It will be fixed in the next update. 🤞

[peterzeng]

Thank you @gilbarbara and @NathanWine!