search

metafizzy / flickity

:leaves: Touch, responsive, flickable carousels
https://flickity.metafizzy.co
7.52k stars 605 forks source link

Flickity drag interfere with events of other libraries (Help needed) #858

Closed sergesemashko closed 5 years ago

sergesemashko commented 5 years ago

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 and flickity internals, and figured that once set dragabble: false it starts working:

Steps to reproduce:

  1. I created a playground repo to reproduce the issue - https://codesandbox.io/s/nwvxjm80nl
  2. Click on the play button
  3. Mute/unmute, pause/unpause are working, but clicks on the progress bar are not handled.

The original issue link - https://github.com/video-react/video-react/issues/178.

Any clues or suggestions are much appreciated.

desandro commented 5 years ago

Thanks for reporting this issue. As you mention, as both libraries use mousedown event, there are likely to be conflicts. One solution may be to disable dragging when the video is playing.

sergesemashko commented 5 years ago

@desandro, thanks for the suggestion. It's important to keep the dragging, but this option might work if dragging is replaced by swiping detection when a video is playing. I'll give it a shot.