Drag and Dropping videos inside a Web Component

[ralfcarneborn]

I understand that this is perhaps not a sortablejs issue or error per say, but im stuck and could use some help understanding what to do, and im sure there are people here that understand the core issue better than anyone here.

Im trying to create a page where i can drag and drop videos, my choice of DnD library is SortableJS (but i have tried several others, same issue). My problem is that when i drag and drop a Mux Player which is built as a Web Component with Shadow DOM and all that, it always resets itself to the beginning of the video, here is an example codesandbox showing this (normal video vs mux player): https://codesandbox.io/p/sandbox/sortablejs-mux-test-kldpcc

To illustrate the problem, perform these steps:

Seek 1st video to any time in the video
Drag and Drop the video to make it swap place with the other video
Expected result: the video just continues playing, but now in another location
Result: For normal videos this works fine, for mux player it resets the video and starts from the beginning all the time.

My suspicioun is that this is Web Component/ShadowDOM related because it cannot keep track of the state/key of the video, but that is just a thought ofcourse, could be anything else.
I have tried many things, mostly related to setting a key so the draggable librarie(s) can keep track, but no luck.

Boring solution was to keep track of all the video´s current time before drag and then just seek them all to the correct time after drop is done, but this is not smooth and messes up tracking etc.

Does anyone know what to do here? Any help is much appriciated