I’m trying to do something than in the Live Beats app: having a video player in a sticky liveview that continues playing when live navigation happens.
This works well with the native <video> element.
I’m now trying to integrate the vidstack player to have a better experience. This is based on web components. So the code I replace the <video> element with is something like that:
<media-player title="Sprite Fight" src="https://files.vidstack.io/sprite-fight/720p.mp4">
<media-provider></media-provider>
<media-video-layout thumbnails="https://files.vidstack.io/sprite-fight/thumbnails.vtt"></media-video-layout>
</media-player>
This is showing the player and works well. I can also put assigns in there for the src and it works. However, when I live navigate, the live navigation makes new elements appear in the DOM of the <media-player> element, creating two playings bars.
If I put a div with a phx-update="ignore" attribute around the container, this does not work. This shouldn’t be needed in this case, because the content of a sticky live view should not be updated on live navigation.
Anybody have an idea of what is happening? How can I debug that further? It seems that some phoenix javascript event specific to the sticky live view makes the player react in a weird way.
