fix(FEC-8778): no watermark is shown in pre-play presentation (#319)

Move the watermark and the playlist-countdown outside the player gui and set the css on the playlist countdown which is applied automatically while it was under the player gui.

src/components/playlist-countdown/_playlist-countdown.scss

@@ -1,6 +1,7 @@
 .player {
 
   .playlist-countdown {
+    font-family: $font-family;
     height: 72px;
     position: absolute;
     bottom: 0;
@@ -12,6 +13,7 @@
 
     &.hidden {
       right: -160px;
+      pointer-events: none;
       opacity: 0;
       .playlist-countdown-content-placeholder {
         .playlist-countdown-content-background {

src/ui-presets/live.js

@@ -39,7 +39,6 @@ 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}>
@@ -57,6 +56,7 @@ export function liveUI(props: any): React$Element<any> {
           </div>
         </BottomBar>
       </div>
+      {Watermark.shouldRender(props) ? <Watermark player={props.player} /> : undefined}
       <PrePlaybackPlayOverlay player={props.player} />
       <CastBeforePlay player={props.player} />
       <Backdrop />

src/ui-presets/playback.js

@@ -43,7 +43,6 @@ export function playbackUI(props: any): React$Element<any> {
         <OverlayAction player={props.player} />
         <PlaybackControls player={props.player} />
         {PlaylistNextScreen.shouldRender(props) ? <PlaylistNextScreen player={props.player} /> : undefined}
-        {Watermark.shouldRender(props) ? <Watermark player={props.player} /> : undefined}
         <BottomBar>
           <SeekBarPlaybackContainer showFramePreview showTimeBubble player={props.player} playerContainer={props.playerContainer} />
           <div className={style.leftControls}>
@@ -61,8 +60,9 @@ export function playbackUI(props: any): React$Element<any> {
             <FullscreenControl player={props.player} />
           </div>
         </BottomBar>
-        {PlaylistCountdown.shouldRender(props) ? <PlaylistCountdown player={props.player} /> : undefined}
       </div>
+      {Watermark.shouldRender(props) ? <Watermark player={props.player} /> : undefined}
+      {PlaylistCountdown.shouldRender(props) ? <PlaylistCountdown player={props.player} /> : undefined}
       <PrePlaybackPlayOverlay player={props.player} />
       <CastBeforePlay player={props.player} />
       <Backdrop />