Closed MattiasBuelens closed 5 months ago
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... š
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="" />}
/>
React creates a
<div style="display: contents">
to hold itstopChrome
/centerChrome
/... elements, so it can set the correctslot
attribute on that<div>
. However, when the UI auto-hides, it setsopacity: 0
on its slotted children (with::slotted(*)
, see UIContainer.css). Because of thedisplay: contents
, theopacity
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 haveopacity: inherit
. So when<theoplayer-slot-container>
gets anopacity
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 themenu
prop of its<UIContainer>
too. š