fix(FEC-10503): watermark doesn't show up correctly on top and doesn'…

…t clickable. (#553) Issue: watermark wasn't clickable and respect empty spaces on bars(top and bottom), the top bar didn't make the watermark to move. Solution: watermark clickable and use the all empty space valid from top and bottom. Bars and interactive area are located directly under GUI area so new children of GUI area will be under the bars and interactive area in the hierarchy and every use of GUI area should be with MAX 2 child one is the content of GUI area and second is bars and interactive area when it exists.
kaltura · Oct 28, 2020 · 50ecc53 · 50ecc53
1 parent 57da6ce
commit 50ecc53
Show file tree

Hide file tree

Showing 11 changed files with 100 additions and 86 deletions.
diff --git a/src/components/bottom-bar/_bottom-bar.scss b/src/components/bottom-bar/_bottom-bar.scss
@@ -1,16 +1,18 @@
 .player .bottom-bar {
   background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
-  padding: 6px 16px;
   color: #fff;
   opacity: 0;
   visibility: hidden;
+  height: 0;
   transition: 100ms opacity;
   width: 100%;
   margin-top: auto;
-  position: absolute;
+  -ms-align-self: flex-end;
+  align-self: flex-end;
   bottom: 0;
   left: 0;
   z-index: 1;
+  pointer-events: auto;
 
   &.hide {
     display: none;
@@ -72,11 +74,14 @@
 .player.menu-active .bottom-bar {
   opacity: 1;
   visibility: visible;
+  height: auto;
+  padding: 6px 16px;
 }
 
 .player.overlay-active .bottom-bar {
   opacity: 0;
   visibility: hidden;
+  height: 0;
 }
 
 .player.size-sm {

diff --git a/src/components/gui-area/_gui-area.scss b/src/components/gui-area/_gui-area.scss
@@ -2,4 +2,6 @@
   pointer-events: none;
   transition: all $default-transition-time;
   transition-property: left, right, bottom, top;
+  display: flex;
+  flex-flow: column nowrap;
 }
diff --git a/src/components/gui-area/gui-area.js b/src/components/gui-area/gui-area.js
@@ -1,5 +1,5 @@
 //@flow
-import {h, Component} from 'preact';
+import {h, Component, toChildArray} from 'preact';
 import {connect} from 'react-redux';
 import {PlayerArea} from 'components/player-area';
 import style from '../../styles/style.scss';
@@ -54,11 +54,17 @@ class GuiArea extends Component {
    */
   render(): React$Element<any> {
     const {guiStyles, children} = this.props;
+    // first container contain the elements of gui area.
+    // second child will contain only the bars and interactive area and use flex positioning from gui area
+    const childArray = toChildArray(children);
+    const guiElements = childArray[0];
+    const barsAndInteractive = childArray[1];
     return (
       <div ref={this._setRef} style={guiStyles} className={style.guiArea}>
         <div style={{pointerEvents: 'auto'}}>
-          <PlayerArea name={'GuiArea'}>{typeof children === 'function' ? children({containerRef: this._ref}) : children}</PlayerArea>
+          <PlayerArea name={'GuiArea'}>{guiElements}</PlayerArea>
         </div>
+        {typeof barsAndInteractive === 'function' ? barsAndInteractive({containerRef: this._ref}) : barsAndInteractive}
       </div>
     );
   }

diff --git a/src/components/interactive-area/_interactive-area.scss b/src/components/interactive-area/_interactive-area.scss
@@ -2,20 +2,7 @@
   pointer-events: none;
   width: 100%;
   height: 100%;
-  position: absolute;
+  position: relative;
   top: 0;
   transition: top $default-transition-time, height $default-transition-time;
 }
-
-.player {
-  &:not(.overlay-active) {
-    &.state-paused,
-    &.state-idle,
-    &.hover {
-      .interactive-area {
-        height: calc(100% - #{2 * $default-hovering-offset});
-        top: $default-hovering-offset;
-      }
-    }
-  }
-}
diff --git a/src/components/top-bar/_top-bar.scss b/src/components/top-bar/_top-bar.scss
@@ -1,15 +1,17 @@
 .player .top-bar {
   background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
-  padding: 14px 16px;
   color: #fff;
   opacity: 0;
   visibility: hidden;
+  height: 0;
   transition: 100ms opacity;
   width: 100%;
-  position: absolute;
+  -ms-align-self: flex-start;
+  align-self: flex-start;
   top: 0;
   left: 0;
   z-index: 1;
+  pointer-events: auto;
 
   &.disabled {
     pointer-events: none;
@@ -22,10 +24,18 @@
     float: left;
     text-align: left;
     min-width: 0;
+    margin: 14px 0 14px 16px;
+    &:empty {
+      margin: 0;
+    }
   }
   .right-controls {
     float: right;
     text-align: left;
+    margin: 14px 16px 14px 0;
+    &:empty {
+      margin: 0;
+    }
 
     .control-button-container {
       margin: 0 6px;
@@ -45,11 +55,13 @@
 .player.menu-active .top-bar {
   opacity: 1;
   visibility: visible;
+  height: auto;
 }
 
 .player.overlay-active .top-bar {
   opacity: 0;
   visibility: hidden;
+  height: 0;
 }
 
 .player.size-sm {

diff --git a/src/components/top-bar/top-bar.js b/src/components/top-bar/top-bar.js
@@ -43,7 +43,6 @@ class TopBar extends Component {
     if (isCasting && isPlaybackEnded) {
       styleClass.push(style.hide);
     }
-
     return (
       <div className={styleClass.join(' ')}>
         <PlayerArea name={'TopBar'}>

diff --git a/src/components/watermark/_watermark.scss b/src/components/watermark/_watermark.scss
@@ -19,15 +19,3 @@
     left: 0;
   }
 }
-
-.player {
-  &:not(.pre-playback):not(.overlay-active) {
-    &.state-paused,
-    &.state-idle,
-    &.hover {
-      .watermark.bottom {
-        transform: translateY(-$default-hovering-offset);
-      }
-    }
-  }
-}
diff --git a/src/ui-presets/ads.js b/src/ui-presets/ads.js
@@ -33,9 +33,13 @@ function AdsUI(props: any, context: any): ?React$Element<any> {
         <PlayerArea name={'PresetArea'}>
           <div className={style.playerGui} id="player-gui">
             <GuiArea>
-              <Loading />
-              <UnmuteIndication hasTopBar />
-              <TopBar disabled={true} leftControls={isBumper(props) ? undefined : <AdNotice />} />
+              <Fragment>
+                <Loading />
+                <UnmuteIndication hasTopBar />
+              </Fragment>
+              <Fragment>
+                <TopBar disabled={true} leftControls={isBumper(props) ? undefined : <AdNotice />} />
+              </Fragment>
             </GuiArea>
           </div>
         </PlayerArea>
@@ -48,29 +52,33 @@ function AdsUI(props: any, context: any): ?React$Element<any> {
       <PlayerArea name={'PresetArea'}>
         <div className={style.playerGui} id="player-gui">
           <GuiArea>
-            <Loading />
-            <UnmuteIndication hasTopBar />
-            <TopBar
-              disabled={true}
-              leftControls={isBumper(props) ? 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>
-              }
-            />
+            <Fragment>
+              <Loading />
+              <UnmuteIndication hasTopBar />
+              {adsUiCustomization.skipButton ? <AdSkip /> : undefined}
+              <PlaybackControls className={style.centerPlaybackControls} />
+            </Fragment>
+            <Fragment>
+              <TopBar
+                disabled={true}
+                leftControls={isBumper(props) ? undefined : <AdNotice />}
+                rightControls={adsUiCustomization.learnMoreButton ? <AdLearnMore /> : undefined}
+              />
+              <BottomBar
+                leftControls={
+                  <Fragment>
+                    <PlaybackControls />
+                    <TimeDisplayAdsContainer />
+                  </Fragment>
+                }
+                rightControls={
+                  <Fragment>
+                    <Volume />
+                    <Fullscreen />
+                  </Fragment>
+                }
+              />
+            </Fragment>
           </GuiArea>
         </div>
       </PlayerArea>

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

diff --git a/src/ui-presets/live.js b/src/ui-presets/live.js
@@ -64,19 +64,24 @@ class LiveUI extends Component {
         <PlayerArea name={'PresetArea'}>
           <div className={style.playerGui} id="player-gui">
             <OverlayAction />
-            <VideoArea>
-              <Watermark />
-            </VideoArea>
+            <VideoArea />
             <GuiArea>
+              <Fragment>
+                <Loading />
+                <OverlayPortal />
+                <UnmuteIndication />
+                <PictureInPictureOverlay />
+                <PlaybackControls className={style.centerPlaybackControls} />
+                <PrePlaybackPlayOverlay />
+                <CastBeforePlay />
+                <Backdrop />
+              </Fragment>
               {({containerRef}) => (
                 <Fragment>
-                  <Loading />
-                  <OverlayPortal />
-                  <UnmuteIndication />
-                  <PictureInPictureOverlay />
-                  <PlaybackControls className={style.centerPlaybackControls} />
-                  <InteractiveArea />
                   <TopBar rightControls={<Share />} />
+                  <InteractiveArea>
+                    <Watermark />
+                  </InteractiveArea>
                   <BottomBar
                     leftControls={
                       <Fragment>
@@ -98,9 +103,6 @@ class LiveUI extends Component {
                     }>
                     <SeekBarLivePlaybackContainer showFramePreview showTimeBubble playerContainer={containerRef} />
                   </BottomBar>
-                  <PrePlaybackPlayOverlay />
-                  <CastBeforePlay />
-                  <Backdrop />
                 </Fragment>
               )}
             </GuiArea>

diff --git a/src/ui-presets/playback.js b/src/ui-presets/playback.js
@@ -69,20 +69,26 @@ class PlaybackUI extends Component {
         <PlayerArea name={'PresetArea'}>
           <div className={style.playerGui} id="player-gui">
             <OverlayAction />
-            <VideoArea>
-              <Watermark />
-            </VideoArea>
+            <VideoArea />
             <GuiArea>
+              <Fragment>
+                <Loading />
+                <OverlayPortal />
+                <UnmuteIndication />
+                <PictureInPictureOverlay />
+                <PlaybackControls className={style.centerPlaybackControls} />
+                <PlaylistNextScreen />
+                <PlaylistCountdown />
+                <PrePlaybackPlayOverlay />
+                <CastBeforePlay />
+                <Backdrop />
+              </Fragment>
               {({containerRef}) => (
                 <Fragment>
-                  <Loading />
-                  <OverlayPortal />
-                  <UnmuteIndication />
-                  <PictureInPictureOverlay />
-                  <PlaybackControls className={style.centerPlaybackControls} />
-                  <PlaylistNextScreen />
-                  <InteractiveArea />
                   <TopBar rightControls={<Share />} />
+                  <InteractiveArea>
+                    <Watermark />
+                  </InteractiveArea>
                   <BottomBar
                     leftControls={
                       <Fragment>
@@ -106,10 +112,6 @@ class PlaybackUI extends Component {
                     }>
                     <SeekBarPlaybackContainer showFramePreview showTimeBubble playerContainer={containerRef} />
                   </BottomBar>
-                  <PlaylistCountdown />
-                  <PrePlaybackPlayOverlay />
-                  <CastBeforePlay />
-                  <Backdrop />
                 </Fragment>
               )}
             </GuiArea>