search

muxinc / media-chrome

Custom elements (web components) for making audio and video player controls that look great in your website or app.
https://media-chrome.org
MIT License
1.21k stars 62 forks source link

Flash of Slot Icons on Page Load #792

Closed jelias closed 7 months ago

jelias commented 8 months ago

I've set up a number of custom icons for play / pause, and volume, as well as other controls.

Specifically with play/pause and volume, (which have multiple icon slots), during page load it seems all of the icons are showing u, stack on top of one another

You can even see this example on the vanilla demo: https://media-chrome.mux.dev/examples/vanilla/animated-icons.html

https://github.com/muxinc/media-chrome/assets/1644531/194a1c81-d559-41e1-b145-abcd2ccdd9ac

Expected Behavior:

dylanjha commented 8 months ago

Good catch @jelias, thanks for reporting.

I think best case scenario here is we can apply some CSS during the pre-loaded state that hides the icons. We should also fix up that animated demo page to prevent the layout shift on page load

jelias commented 8 months ago

Would the icons hide entirely? It might be an odd behavior to see the icons flash in after load?

Perhaps there could be a loading slot that wraps an icon, such that one icon would be the default loading icon, and the others would be hidden via css. I imagine different use cases might benefit from the flexibility.

For example, I want to show a row of icons with an opacity shift until the player is ready.

My current workaround is to use hide certain slot icons until player ready, then render with in the FE framework