Fix topChrome not auto-hiding in React custom UIs

[MattiasBuelens]

React creates a <div style="display: contents"> to hold its topChrome/centerChrome/... elements, so it can set the correct slot attribute on that <div>. However, when the UI auto-hides, it sets opacity: 0 on its slotted children (with ::slotted(*), see UIContainer.css). Because of the display: contents, the opacity is ignored (since the <div> isn't really "displayed"), and so auto-hide doesn't work.

Fix it by adding a dedicated <theoplayer-slot-container> element. This behaves pretty much like a <div style="display: contents">, except that its slotted children have opacity: inherit. So when <theoplayer-slot-container> gets an opacity style from <theoplayer-ui-container>, it gets correctly forwarded to its children, and auto-hide works again! 😁

I also took this opportunity to make <theoplayer-slot-container> "transparent" for things like <theoplayer-menu-group> and <theoplayer-radio-group>. Usually, those elements expect their menus and radio buttons to be slotted in as direct children, but now they also allow them to be wrapped in a <theoplayer-slot-container>. This enables Open Video UI for React to use them for the menu prop of its <UIContainer> too. 🙂

[MattiasBuelens]

I also think the no-auto-hide attribute doesn't work properly in React, because of extra wrapper <theoplayer-slot-container>. It probably didn't work previously either, when we were still using <div style="display: contents">. 😬

Not sure how I'm going to fix that though... We're currently using ::slotted(:not([no-auto-hide])), but that only targets direct children. And you're not even allowed to use a complex selector... 😕

[MattiasBuelens]

CC @tvanlaerhoven: This should fix the problem you've reported. Expect a new release soon. 😉

Bonus: no-auto-hide now also works in React! Example usage:

<UIContainer
  centeredChrome={<PlayButton no-auto-hide="" />}
/>

[georgechoustoulakis]

Looking good!