bu6n
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.
Where Next?
Trending in Questions
Other Trending Topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Deploy Phoenix to your own VPS with PaaS ease: push-to-deploy, zero downtime, auto SSL, managed Postgres. 14-day free trial at potions.io
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #library
- #deployment
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #elixirconf
- #channels
- #exunit
- #discussion
- #code-sync
- #podcasts
- #javascript
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixirconf-us
- #ai
- #blog-post
- #elixir-ls
- #phoenix_html
- #iex
- #graphql
- #genstage
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #hex
- #security
- #metaprogramming
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking, logs, uptime, and Just Enough APM. Built for developers.
Practical resources that improve the lives of professional developers.
Producing high quality Elixir screencasts since 2017.
The deployment platform built for Elixir: PaaS ease, VPS control.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"
Showing Posts 1 to 2- Show Best Posts
- Show All (oldest first)
- Show All (newest first)
rhcarvalho
Do you set a unique ID for the sticky liveview container?
bu6n
Yes, the project does not compile if you do not set an ID.