using video element inside useDrag component doesn't allow the video to play/pause using single click over the video

[pranjalmahajan96]

Describe the bug

Using useDrag with a component which has a video element inside, doesn't allow the video to play or pause via clicking over the video (and not via the controls bar) which is a usual behaviour of the video element

Sandbox or Video

https://codesandbox.io/s/usedrag-video-6qjy33?file=/src/App.tsx

Information:

• Use Gesture version: [tried with v10.3.0, v10.2.22]
• Device: [macbook]
• OS: [macOS 13.2.1]
• Browser [chrome]

Checklist:

• I've read the documentation.
• If this is an issue with drag, I've tried setting touch-action: none to the draggable element.

[pranjalmahajan96]

https://6qjy33.csb.app/
please check this link, play pause should work with on single click on video
the codesandbox: https://codesandbox.io/s/usedrag-video-6qjy33?file=/src/App.tsx

[dbismut]

Sorry, I think I misunderstood your issue previously, my apologies. I guess pointer capturing is messing with controlling the video for some reason.

Please try with the { pointer: { capture: false } } option. See forked version here. https://codesandbox.io/s/usedrag-video-forked-zp5rtw?file=/src/App.tsx

[devcer]

@dbismut I have used the pointer capture setting to false solution but looks like the video is undraggable on Firefox browser. I was using Firefox v118.0.1 to test your code sandbox. Any thoughts on this?

[devcer]

Also if you adjust the width of the video player to 450px. the volume button would change to slider on Safari and adjusting volume is getting considered as a drag and the whole container is movable. Any thoughts on how I can handle this?

[pranjalmahajan96]

@dbismut I have used the pointer capture setting to false solution but looks like the video is undraggable on Firefox browser. I was using Firefox v118.0.1 to test your code sandbox. Any thoughts on this?

any updates? @dbismut

[dbismut]

No. I would suggest trying to implement dragging a video on your end and posting your findings.