search

simonwep / selection

✨ Viselect - A high performance and lightweight library to add a visual way of selecting elements, just like on your Desktop. Zero dependencies, super small. Support for major frameworks!
https://simonwep.github.io/selection
MIT License
2.52k stars 148 forks source link

Mouse selection doesn't work with video tag controls #160

Open AlexiZ opened 2 years ago

AlexiZ commented 2 years ago

What is the problem?

Mouse selection doesn't work with interactive tags like "video", in my case.

What is the current behavior?

It is not possible to start a mouse selection within an html video tag with controls on, with my own content and not an iframe or a third-party service like Youtube or Vimeo. It's also impossible to end a mouse selection in a video tag. The selection-area is stuck to the cursor until I click outside of the video tag.

Please provide the steps to reproduce and create a CodeSandbox.

Here is a codepen where you can try to :

What is the expected behavior?

I would like to stop the mouse selection on mouse release, wherever the cursor is, even on a video tag.

Your environment:

Toolset (e.g. webpack, vite, vue-cli...): 
Version (@viselect/<insert package>):
Browser:  
OS:

see codepen above

AlexiZ commented 2 years ago

@Simonwep Sorry to bother but do you have any time to check this please ?

simonwep commented 2 years ago

Hey! I'll try to take a look at it this weekend :)

simonwep commented 2 years ago

Jup, seems to be an bug - the "mouseup" event doesn't bubble up to the document if it's origin is a video tag. I'd have to bind events to each such elements manually first... not sure how this can be efficiently fixed though. Maybe I can take a closer look somewhere next week, can't promise anything though - sorry :/

AlexiZ commented 2 years ago

Thank you for your answer, it actually helped me understand what was going on here. So, it seems that video tags aren't an element in the DOM, and that's why some events like mouseup are not triggered. Issue can be avoided by using object tag like so, but video now autoplays itself and that's a new problem to solve... If you find a solution for the video tag one day, I'll take it :) Meanwhile, thank you for your time again and I wish you a good day.