fix(FEC-8710): watermark covers the playlist countdown (#305)

* move the watermark component into the player-gui before the bottom bar component
* use component's static `shouldRender` instead of the generic `shouldRenderComponent`

src/components/vr-stereo-toggle/vr-stereo-toggle.js

@@ -37,6 +37,16 @@ class VrStereoToggleControl extends BaseComponent {
    * @type {string} - Component display name
    */
   static displayName = 'vrStereo';
+  /**
+   * should render component
+   * @param {*} props - component props
+   * @returns {boolean} - whether to render the component
+   * @static
+   */
+  static shouldRender(props: any): boolean {
+    const componentConfig = props.config.components[this.displayName];
+    return !(Object.keys(componentConfig).length === 0 && componentConfig.constructor === Object);
+  }
   /**
    * Creates an instance of VrStereoToggleControl.
    * @param {Object} obj obj

src/components/watermark/watermark.js

@@ -32,6 +32,16 @@ class Watermark extends BaseComponent {
    * @type {string} - Component display name
    */
   static displayName = 'watermark';
+  /**
+   * should render component
+   * @param {*} props - component props
+   * @returns {boolean} - whether to render the component
+   * @static
+   */
+  static shouldRender(props: any): boolean {
+    const componentConfig = props.config.components[this.displayName];
+    return !(Object.keys(componentConfig).length === 0 && componentConfig.constructor === Object);
+  }
 
   /**
    * Creates an instance of Watermark.

src/ui-presets/live.js

@@ -15,7 +15,6 @@ import {KeyboardControl} from '../components/keyboard';
 import {LiveTag} from '../components/live-tag';
 import {UnmuteIndication} from '../components/unmute-indication';
 import {Watermark} from '../components/watermark/watermark';
-import {shouldRenderComponent} from '../utils/component-config';
 import {VrStereoToggleControl} from '../components/vr-stereo-toggle';
 import {CastControl} from '../components/cast';
 import {CastBeforePlay} from '../components/cast-on-tv/cast-before-play';
@@ -40,18 +39,15 @@ export function liveUI(props: any): React$Element<any> {
         <UnmuteIndication />
         <OverlayAction player={props.player} />
         <PlaybackControls player={props.player} />
+        {Watermark.shouldRender(props) ? <Watermark player={props.player} /> : undefined}
         <BottomBar>
           <SeekBarLivePlaybackContainer showFramePreview showTimeBubble player={props.player} playerContainer={props.playerContainer} />
           <div className={style.leftControls}>
             <PlaybackControls player={props.player} />
             <LiveTag player={props.player} />
           </div>
           <div className={style.rightControls}>
-            {props.state.engine.isVr && shouldRenderComponent(props.config, VrStereoToggleControl.displayName) ? (
-              <VrStereoToggleControl player={props.player} />
-            ) : (
-              undefined
-            )}
+            {VrStereoToggleControl.shouldRender(props) ? <VrStereoToggleControl player={props.player} /> : undefined}
             <VolumeControl player={props.player} />
             <LanguageControl player={props.player} />
             <SettingsControl player={props.player} />
@@ -63,7 +59,6 @@ export function liveUI(props: any): React$Element<any> {
       </div>
       <PrePlaybackPlayOverlay player={props.player} />
       <CastBeforePlay player={props.player} />
-      {shouldRenderComponent(props.config, Watermark.displayName) ? <Watermark player={props.player} /> : undefined}
       <Backdrop />
     </div>
   );

src/ui-presets/playback.js

@@ -17,7 +17,6 @@ import {OverlayPortal} from '../components/overlay-portal';
 import {KeyboardControl} from '../components/keyboard';
 import {UnmuteIndication} from '../components/unmute-indication';
 import {Watermark} from '../components/watermark/watermark';
-import {shouldRenderComponent} from '../utils/component-config';
 import {CastControl} from '../components/cast';
 import {CastBeforePlay} from '../components/cast-on-tv/cast-before-play';
 import {Backdrop} from '../components/backdrop/backdrop';
@@ -42,6 +41,7 @@ export function playbackUI(props: any): React$Element<any> {
         <UnmuteIndication player={props.player} />
         <OverlayAction player={props.player} />
         <PlaybackControls player={props.player} />
+        {Watermark.shouldRender(props) ? <Watermark player={props.player} /> : undefined}
         <BottomBar>
           <SeekBarPlaybackContainer showFramePreview showTimeBubble player={props.player} playerContainer={props.playerContainer} />
           <div className={style.leftControls}>
@@ -50,11 +50,7 @@ export function playbackUI(props: any): React$Element<any> {
             <TimeDisplayPlaybackContainer format="current / total" />
           </div>
           <div className={style.rightControls}>
-            {props.state.engine.isVr && shouldRenderComponent(props.config, VrStereoToggleControl.displayName) ? (
-              <VrStereoToggleControl player={props.player} />
-            ) : (
-              undefined
-            )}
+            {VrStereoToggleControl.shouldRender(props) ? <VrStereoToggleControl player={props.player} /> : undefined}
             <VolumeControl player={props.player} />
             <LanguageControl player={props.player} />
             <SettingsControl player={props.player} />
@@ -74,7 +70,6 @@ export function playbackUI(props: any): React$Element<any> {
       </div>
       <PrePlaybackPlayOverlay player={props.player} />
       <CastBeforePlay player={props.player} />
-      {shouldRenderComponent(props.config, Watermark.displayName) ? <Watermark player={props.player} /> : undefined}
       <Backdrop />
     </div>
   );

src/utils/component-config.js

@@ -28,15 +28,4 @@ function getComponentStateFromComponentConfig(component: string, oldState: Objec
   return oldState;
 }
 
-/**
- * Checks if component should be rendered based on its value in the store.
- * @param {Object} config - Config store
- * @param {string} alias - Component alias
- * @return {boolean} - Whether component should be rendered
- */
-function shouldRenderComponent(config: Object, alias: string) {
-  const componentConfig = config.components[alias];
-  return !(Object.keys(componentConfig).length === 0 && componentConfig.constructor === Object);
-}
-
-export {shouldRenderComponent, getComponentStateFromConfig, getComponentStateFromComponentConfig};
+export {getComponentStateFromConfig, getComponentStateFromComponentConfig};