It's not possible to click on progress bar in some cases

[sergesemashko]

Issue description

• version #0.13.0
• browser: Latest Chrome, And firefox

Steps to reproduce the issue

I've been using Video-React inside of the slides of Flickity carousel.

I can click on play, volume toggle and fullscreen button, but the progress bar to jump to a specific video moment.

It looks like mousedown events of Flickity and Video-React interfere. However, I was not able to track it down. I hope that one of the maintainers might have a clue why the rest of the controls are working, but not the progress bar. I started digging into Video-React internals, but it may take a while.

Steps to reproduce

1. I created a playground repo to reproduce the issue - https://sergesemashko.github.io/video-react-flickity/index.html
2. Click on the play button
3. Mute/unmute, pause/unpause are working, but clicks on the progress bar are not handled.

Expected behaviour

Clicks on the progress bar are handled properly and video is advanced to the clicked time period.

Actual behaviour

Nothing happens of progress bar click.

Demo

https://codesandbox.io/s/nwvxjm80nl or https://sergesemashko.github.io/video-react-flickity/index.html

[mondaychen]

Hi. Unfortunately, I don't have time to dig deep into flickity, but my best guess is that flickity is taking over the mouse up and mouse down events, which are used by the progress bar. Unlike buttons like play/mute/unmute, it's actually using mouse up/down events instead of click events.

Is there are way that Flickity can pass through the mouse events?

[sergesemashko]

@mondaychen, I appreciate your reply. I contacted to Flickity support and I ended up with disabling dragging in flickity and just applying react-swipe listeners on the wrapper, cause it's very time consuming to make these 2 libraries using the same mouse event.