Fix topChrome
not auto-hiding in React custom UIs
#55
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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. 🙂