fix(FEC-6961): learn more button functionality in ads UI (#16)

src/components/ad-learn-more/ad-learn-more.js

@@ -0,0 +1,16 @@
+//@flow
+import { h, Component } from 'preact';
+import { connect } from 'preact-redux';
+
+const mapStateToProps = state => ({
+  url: state.engine.adUrl
+});
+
+@connect(mapStateToProps)
+class AdLearnMore extends Component {
+  render(props: any) {
+    return <a href={props.url} target='new' className='btn btn-dark-transparent'>Learn more</a>
+  }
+}
+
+export default AdLearnMore;

src/components/ad-learn-more/index.js

@@ -0,0 +1 @@
+export default from './ad-learn-more';

src/components/engine-connector/engine-connector.js

@@ -102,6 +102,7 @@ class EngineConnector extends BaseComponent {
     });
 
     this.player.addEventListener(this.player.Event.AD_LOADED, e => {
+      this.props.updateAdClickUrl(e.payload.ad.g.clickThroughUrl);
       this.props.updateAdSkipTimeOffset(e.payload.ad.getSkipTimeOffset());
       this.props.updateAdSkippableState(e.payload.ad.getAdSkippableState());
     });

src/reducers/engine.js

@@ -15,7 +15,8 @@ export const types = {
   UPDATE_AD_BREAK_PROGRESS: 'engine/UPDATE_AD_BREAK_PROGRESS',
   UPDATE_AD_IS_PLAYING: 'engine/UPDATE_AD_IS_PLAYING',
   UPDATE_AD_SKIP_TIME_OFFSET: 'engine/UPDATE_AD_SKIP_TIME_OFFSET',
-  UPDATE_AD_SKIPPABLE_STATE: 'engine/UPDATE_AD_SKIPPABLE_STATE'
+  UPDATE_AD_SKIPPABLE_STATE: 'engine/UPDATE_AD_SKIPPABLE_STATE',
+  UPDATE_AD_URL: 'engine/UPDATE_AD_URL'
 }
 
 export const initialState = {
@@ -40,7 +41,8 @@ export const initialState = {
   adProgress: {
     currentTime: 0,
     duration: 0
-  }
+  },
+  adUrl: ''
 }
 
 export default (state: Object = initialState, action: Object) => {
@@ -141,6 +143,12 @@ export default (state: Object = initialState, action: Object) => {
         adSkippableState: action.adSkippableState
       }
 
+    case types.UPDATE_AD_URL:
+      return {
+        ...state,
+        adUrl: action.adUrl
+      }
+
     default:
       return state;
   }
@@ -162,5 +170,6 @@ export const actions = {
   updateAdBreakProgress: (currentTime: number, duration: number) => ({ type: types.UPDATE_AD_BREAK_PROGRESS, adProgress: {currentTime, duration} }),
   updateAdIsPlaying: (adIsPlaying: boolean) => ({ type: types.UPDATE_AD_IS_PLAYING, adIsPlaying }),
   updateAdSkipTimeOffset: (adSkipTimeOffset: boolean) => ({ type: types.UPDATE_AD_SKIP_TIME_OFFSET, adSkipTimeOffset }),
-  updateAdSkippableState: (adSkippableState: boolean) => ({ type: types.UPDATE_AD_SKIPPABLE_STATE, adSkippableState })
+  updateAdSkippableState: (adSkippableState: boolean) => ({ type: types.UPDATE_AD_SKIPPABLE_STATE, adSkippableState }),
+  updateAdClickUrl: (adUrl: string) => ({ type: types.UPDATE_AD_URL, adUrl })
 }

src/styles/_shell.scss

@@ -1,3 +1,6 @@
+.kaltura-player-container {
+  position: absolute !important;
+}
 .player {
     overflow: hidden;
     user-select: none;

src/ui-presets/ads.js

@@ -7,6 +7,7 @@ import VolumeControl from '../components/volume';
 import FullscreenControl from '../components/fullscreen';
 import TimeDisplayPlaybackContainer from '../components/time-display-playback-container';
 import AdSkip from '../components/ad-skip';
+import AdLearnMore from '../components/ad-learn-more';
 import TopBar from '../components/top-bar';
 import BottomBar from '../components/bottom-bar';
 
@@ -31,7 +32,7 @@ export default function adsUI(props: any) {
                 <span className='font-size-base'>Adverisment</span>
               </div>
               <div className='right-controls'>
-                <a href='' className='btn btn-dark-transparent'>Learn more</a>
+                <AdLearnMore />
               </div>
             </TopBar>
             <AdSkip player={props.player} />