fix(FEC-10583): fix linear image ads (#634)

Prevent display of bottom bar controls in an ad in case it's not a video ad. Fixes FEC-10583. Related PR: kaltura/playkit-js-ima#209
kaltura · Sep 5, 2021 · 77c70c7 · 77c70c7
1 parent 5db84ec
commit 77c70c7
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 16 deletions.
diff --git a/src/components/engine-connector/engine-connector.js b/src/components/engine-connector/engine-connector.js
@@ -205,10 +205,12 @@ class EngineConnector extends Component {
     });
 
     eventManager.listen(player, player.Event.AD_STARTED, e => {
+      const ad = e.payload.ad;
       this.props.updateLoadingSpinnerState(false);
       this.props.updateAdIsPlaying(true);
       this.props.updatePrePlayback(false);
-      this.props.updateAdIsBumper(e.payload.ad.bumper);
+      this.props.updateAdIsBumper(ad.bumper);
+      this.props.updateAdContentType(ad.contentType);
     });
 
     eventManager.listen(player, player.Event.AD_RESUMED, () => {

diff --git a/src/reducers/engine.js b/src/reducers/engine.js
@@ -32,6 +32,7 @@ export const types = {
   UPDATE_AD_URL: `${component}/UPDATE_AD_URL`,
   UPDATE_AD_IS_LINEAR: `${component}/UPDATE_AD_IS_LINEAR`,
   UPDATE_AD_IS_BUMPER: `${component}/UPDATE_AD_IS_BUMPER`,
+  UPDATE_AD_CONTENT_TYPE: `${component}/UPDATE_AD_CONTENT_TYPE`,
   UPDATE_PLAYER_POSTER: `${component}/UPDATE_PLAYER_POSTER`,
   UPDATE_IS_LIVE: `${component}/UPDATE_IS_LIVE`,
   UPDATE_IS_DVR: `${component}/UPDATE_IS_DVR`,
@@ -80,6 +81,7 @@ export const initialState = {
   adSkipTimeOffset: 0,
   adSkippableState: false,
   adIsBumper: false,
+  adContentType: null,
   isLive: false,
   isDvr: false,
   adProgress: {
@@ -272,6 +274,12 @@ export default (state: Object = initialState, action: Object) => {
         adIsBumper: action.adIsBumper
       };
 
+    case types.UPDATE_AD_CONTENT_TYPE:
+      return {
+        ...state,
+        adContentType: action.adContentType
+      };
+
     case types.UPDATE_PLAYER_POSTER:
       return {
         ...state,
@@ -404,6 +412,7 @@ export const actions = {
   updateAdClickUrl: (adUrl: string) => ({type: types.UPDATE_AD_URL, adUrl}),
   updateAdIsLinear: (adIsLinear: boolean) => ({type: types.UPDATE_AD_IS_LINEAR, adIsLinear}),
   updateAdIsBumper: (adIsBumper: boolean) => ({type: types.UPDATE_AD_IS_BUMPER, adIsBumper}),
+  updateAdContentType: (adContentType: string) => ({type: types.UPDATE_AD_CONTENT_TYPE, adContentType}),
   updatePlayerPoster: (poster: string) => ({type: types.UPDATE_PLAYER_POSTER, poster}),
   updateIsLive: (isLive: boolean) => ({type: types.UPDATE_IS_LIVE, isLive}),
   updateIsDvr: (isDvr: boolean) => ({type: types.UPDATE_IS_DVR, isDvr}),

diff --git a/src/ui-presets/ads.js b/src/ui-presets/ads.js
@@ -1,6 +1,7 @@
 //@flow
 import style from '../styles/style.scss';
 import {Fragment, h} from 'preact';
+import {connect} from 'react-redux';
 import {Loading} from '../components/loading';
 import {Volume} from '../components/volume';
 import {Fullscreen} from '../components/fullscreen';
@@ -47,6 +48,32 @@ function AdsUI(props: any, context: any): ?React$Element<any> {
     );
   }
   const adsUiCustomization = getAdsUiCustomization();
+  const bottomBar = (
+    <BottomBar
+      leftControls={
+        <Fragment>
+          <PlaybackControls />
+          <TimeDisplayAdsContainer />
+        </Fragment>
+      }
+      rightControls={
+        <Fragment>
+          <Volume />
+          <Fullscreen />
+        </Fragment>
+      }
+    />
+  );
+  const onlyFullscreenBottomBar = (
+    <BottomBar
+      rightControls={
+        <Fragment>
+          <Fullscreen />
+        </Fragment>
+      }
+    />
+  );
+
   return (
     <div className={style.adGuiWrapper}>
       <PlayerArea name={'PresetArea'}>
@@ -64,20 +91,7 @@ function AdsUI(props: any, context: any): ?React$Element<any> {
                 leftControls={<AdLeftControls />}
                 rightControls={adsUiCustomization.learnMoreButton ? <AdLearnMore /> : undefined}
               />
-              <BottomBar
-                leftControls={
-                  <Fragment>
-                    <PlaybackControls />
-                    <TimeDisplayAdsContainer />
-                  </Fragment>
-                }
-                rightControls={
-                  <Fragment>
-                    <Volume />
-                    <Fullscreen />
-                  </Fragment>
-                }
-              />
+              {displayBottomBar(props) ? bottomBar : onlyFullscreenBottomBar}
             </Fragment>
           </GuiArea>
         </div>
@@ -86,7 +100,22 @@ function AdsUI(props: any, context: any): ?React$Element<any> {
   );
 }
 
-const AdsUIComponent = withKeyboardEvent(PRESET_NAME)(AdsUI);
+/**
+ * mapping state to props
+ * @param {*} state - redux store state
+ * @returns {Object} - mapped state to this component
+ */
+const mapStateToProps = state => ({
+  state: {
+    shell: state.shell,
+    engine: {
+      adIsLinear: state.engine.adIsLinear,
+      adContentType: state.engine.adContentType
+    }
+  }
+});
+
+const AdsUIComponent = connect(mapStateToProps)(withKeyboardEvent(PRESET_NAME)(AdsUI));
 AdsUIComponent.displayName = PRESET_NAME;
 /**
  * Ads ui interface
@@ -143,3 +172,12 @@ function useCustomLearnMoreButton(): boolean {
   //TODO: false until we develop are own ads manager
   return false;
 }
+
+/**
+ * @param {any} props - component props
+ * @returns {boolean} - Whether to display bottom bar or not.
+ */
+function displayBottomBar(props: any): boolean {
+  const {adIsLinear, adContentType} = props.state.engine;
+  return !(adIsLinear && adContentType && !adContentType.startsWith('video'));
+}