fix: add preset and gui area to all presets (#516)

* Add preset and gui area to all presets * Support manipulate components (before, after and replace) under Fragment * Expose the side panel enums
kaltura · Jun 18, 2020 · 363ce25 · 363ce25
1 parent 899f267
commit 363ce25
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 31 deletions.
diff --git a/src/components/player-area/player-area.js b/src/components/player-area/player-area.js
@@ -209,7 +209,7 @@ class PlayerArea extends Component {
     const {playerAreaComponents} = this.state;
     const newChildren = [];
     toChildArray(children).forEach(child => {
-      if (child.type === 'div') {
+      if (child.type === 'div' || child.type === Fragment) {
         child.props.children = this._getPositionedComponents(child.props.children);
         newChildren.push(child);
         return;

diff --git a/src/index.js b/src/index.js
@@ -13,6 +13,8 @@ import * as Components from './components';
 //Utils
 import * as Utils from './utils';
 import style from './styles/style.scss';
+//Enums
+import {SidePanelPositions, SidePanelModes} from './reducers/shell';
 
 declare var __VERSION__: string;
 declare var __NAME__: string;
@@ -31,3 +33,5 @@ export {Reducers as reducers, Presets as presets, Components as components, Util
 export {EventType};
 export {UIManager};
 export {__VERSION__ as VERSION, __NAME__ as NAME};
+
+export {SidePanelPositions, SidePanelModes};
diff --git a/src/ui-presets/ads.js b/src/ui-presets/ads.js
@@ -1,6 +1,6 @@
 //@flow
 import style from '../styles/style.scss';
-import {h} from 'preact';
+import {Fragment, h} from 'preact';
 import {Loading} from '../components/loading';
 import {Volume} from '../components/volume';
 import {Fullscreen} from '../components/fullscreen';
@@ -13,6 +13,8 @@ import {UnmuteIndication} from '../components/unmute-indication';
 import {AdNotice} from '../components/ad-notice/ad-notice';
 import {PlaybackControls} from '../components/playback-controls';
 import {withKeyboardEvent} from 'components/keyboard';
+import {PlayerArea} from 'components/player-area';
+import {GuiArea} from 'components/gui-area';
 
 const PRESET_NAME = 'Ads';
 
@@ -28,39 +30,50 @@ function AdsUI(props: any, context: any): ?React$Element<any> {
   if (useDefaultAdsUi(props, context)) {
     return (
       <div className={style.adGuiWrapper}>
-        <Loading />
-        <div className={style.playerGui} id="player-gui">
-          <UnmuteIndication hasTopBar />
-          <TopBar disabled={true}>
-            <div className={style.leftControls}>{isBumper(props, context) ? undefined : <AdNotice />}</div>
-          </TopBar>
-        </div>
+        <PlayerArea name={'PresetArea'}>
+          <div className={style.playerGui} id="player-gui">
+            <GuiArea>
+              <Loading />
+              <UnmuteIndication hasTopBar />
+              <TopBar disabled={true} leftControls={isBumper(props, context) ? undefined : <AdNotice />} />
+            </GuiArea>
+          </div>
+        </PlayerArea>
       </div>
     );
   }
   const adsUiCustomization = getAdsUiCustomization();
   return (
     <div className={style.adGuiWrapper}>
-      <Loading />
-      <div className={style.playerGui} id="player-gui">
-        <UnmuteIndication hasTopBar />
-        <TopBar disabled={true}>
-          <div className={style.leftControls}>{isBumper(props, context) ? undefined : <AdNotice />}</div>
-          <div className={style.rightControls}>{adsUiCustomization.learnMoreButton ? <AdLearnMore /> : undefined}</div>
-        </TopBar>
-        {adsUiCustomization.skipButton ? <AdSkip /> : undefined}
-        <PlaybackControls />
-        <BottomBar>
-          <div className={style.leftControls}>
-            <PlaybackControls />
-            <TimeDisplayAdsContainer />
-          </div>
-          <div className={style.rightControls}>
-            <Volume />
-            <Fullscreen />
-          </div>
-        </BottomBar>
-      </div>
+      <PlayerArea name={'PresetArea'}>
+        <div className={style.playerGui} id="player-gui">
+          <GuiArea>
+            <Loading />
+            <UnmuteIndication hasTopBar />
+            <TopBar
+              disabled={true}
+              leftControls={isBumper(props, context) ? undefined : <AdNotice />}
+              rightControls={adsUiCustomization.learnMoreButton ? <AdLearnMore /> : undefined}
+            />
+            {adsUiCustomization.skipButton ? <AdSkip /> : undefined}
+            <PlaybackControls className={style.centerPlaybackControls} />
+            <BottomBar
+              leftControls={
+                <Fragment>
+                  <PlaybackControls />
+                  <TimeDisplayAdsContainer />
+                </Fragment>
+              }
+              rightControls={
+                <Fragment>
+                  <Volume />
+                  <Fullscreen />
+                </Fragment>
+              }
+            />
+          </GuiArea>
+        </div>
+      </PlayerArea>
     </div>
   );
 }

diff --git a/src/ui-presets/error.js b/src/ui-presets/error.js
@@ -2,6 +2,8 @@
 import style from '../styles/style.scss';
 import {h} from 'preact';
 import {ErrorOverlay} from '../components/error-overlay';
+import {PlayerArea} from 'components/player-area';
+import {GuiArea} from 'components/gui-area';
 
 const PRESET_NAME = 'Error';
 
@@ -14,7 +16,11 @@ const PRESET_NAME = 'Error';
 export function ErrorUI(): React$Element<any> {
   return (
     <div className={style.playbackGuiWrapper}>
-      <ErrorOverlay />
+      <PlayerArea name={'PresetArea'}>
+        <GuiArea>
+          <ErrorOverlay />
+        </GuiArea>
+      </PlayerArea>
     </div>
   );
 }

diff --git a/src/ui-presets/idle.js b/src/ui-presets/idle.js
@@ -2,6 +2,8 @@
 import {h} from 'preact';
 import style from '../styles/style.scss';
 import {Loading} from '../components/loading';
+import {PlayerArea} from 'components/player-area';
+import {GuiArea} from 'components/gui-area';
 
 const PRESET_NAME = 'Idle';
 
@@ -13,7 +15,11 @@ const PRESET_NAME = 'Idle';
 export function IdleUI(): React$Element<any> {
   return (
     <div className={style.playbackGuiWrapper}>
-      <Loading />
+      <PlayerArea name={'PresetArea'}>
+        <GuiArea>
+          <Loading />
+        </GuiArea>
+      </PlayerArea>
     </div>
   );
 }