Avoid creating empty <SlotContainer>s

THEOplayer · Mar 18, 2024 · 4d66610 · 4d66610
1 parent 267df87
commit 4d66610
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 10 deletions.
diff --git a/react/src/DefaultUI.tsx b/react/src/DefaultUI.tsx
@@ -92,10 +92,10 @@ export const DefaultUI = (props: DefaultUIProps) => {
     return (
         <RawDefaultUI {...otherProps} ref={setUi}>
             <PlayerContext.Provider value={player}>
-                <SlotContainer slot="title">{title}</SlotContainer>
-                <SlotContainer slot="top-control-bar">{topControlBar}</SlotContainer>
-                <SlotContainer slot="bottom-control-bar">{bottomControlBar}</SlotContainer>
-                <SlotContainer slot="menu">{menu}</SlotContainer>
+                {title && <SlotContainer slot="title">{title}</SlotContainer>}
+                {topControlBar && <SlotContainer slot="top-control-bar">{topControlBar}</SlotContainer>}
+                {bottomControlBar && <SlotContainer slot="bottom-control-bar">{bottomControlBar}</SlotContainer>}
+                {menu && <SlotContainer slot="menu">{menu}</SlotContainer>}
             </PlayerContext.Provider>
         </RawDefaultUI>
     );

diff --git a/react/src/UIContainer.tsx b/react/src/UIContainer.tsx
@@ -133,13 +133,13 @@ export const UIContainer = (props: UIContainerProps) => {
     return (
         <RawUIContainer {...otherProps} ref={setUi}>
             <PlayerContext.Provider value={player}>
-                <SlotContainer slot="top-chrome">{topChrome}</SlotContainer>
-                <SlotContainer slot="middle-chrome">{middleChrome}</SlotContainer>
-                <SlotContainer slot="centered-chrome">{centeredChrome}</SlotContainer>
-                <SlotContainer slot="centered-loading">{centeredLoading}</SlotContainer>
+                {topChrome && <SlotContainer slot="top-chrome">{topChrome}</SlotContainer>}
+                {middleChrome && <SlotContainer slot="middle-chrome">{middleChrome}</SlotContainer>}
+                {centeredChrome && <SlotContainer slot="centered-chrome">{centeredChrome}</SlotContainer>}
+                {centeredLoading && <SlotContainer slot="centered-loading">{centeredLoading}</SlotContainer>}
                 {bottomChrome}
-                <SlotContainer slot="menu">{menu}</SlotContainer>
-                <SlotContainer slot="error">{error}</SlotContainer>
+                {menu && <SlotContainer slot="menu">{menu}</SlotContainer>}
+                {error && <SlotContainer slot="error">{error}</SlotContainer>}
             </PlayerContext.Provider>
         </RawUIContainer>
     );