fix(FEC-6873): replay overlay screen in desktop and mobile. (#28)

kaltura · Aug 14, 2017 · b1158d0 · b1158d0
1 parent f9de374
commit b1158d0
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 8 deletions.
diff --git a/src/components/engine-connector/engine-connector.js b/src/components/engine-connector/engine-connector.js
@@ -27,6 +27,7 @@ class EngineConnector extends BaseComponent {
       this.props.updateDuration(this.player.duration);
       this.props.updateMuted(this.player.muted);
       this.props.updateMetadataLoadingStatus(true);
+      this.props.updatePlayerPoster(this.player.poster);
     });
 
     this.player.addEventListener(this.player.Event.VOLUME_CHANGE, () => {

diff --git a/src/components/pre-playback-play-overlay/_pre-playback-play-overlay.scss b/src/components/pre-playback-play-overlay/_pre-playback-play-overlay.scss
@@ -3,6 +3,8 @@
   top: 0; left: 0;
   width: 100%; height: 100%;
   z-index: 10;
+  background-position: center center;
+  background-size: cover;
 
   .pre-playback-play-button {
     position: absolute;

diff --git a/src/components/pre-playback-play-overlay/pre-playback-play-overlay.js b/src/components/pre-playback-play-overlay/pre-playback-play-overlay.js
@@ -9,7 +9,9 @@ import { default as Icon, IconType } from '../icon';
 const mapStateToProps = state => ({
   metadataLoaded: state.engine.metadataLoaded,
   prePlayback: state.shell.prePlayback,
-  isMobile: state.shell.isMobile
+  poster: state.engine.poster,
+  isMobile: state.shell.isMobile,
+  isEnded: state.engine.isEnded
 });
 
 @connect(mapStateToProps, bindActions(actions))
@@ -54,14 +56,16 @@ class PrePlaybackPlayOverlay extends BaseComponent {
 
   render(props: any) {
     if (
-      !props.prePlayback ||
-      (!this.props.isMobile && this.autoplay) ||
-      (this.props.isMobile && this.mobileAutoplay)
+      (!props.isEnded && !props.prePlayback) ||
+      (!props.isEnded && !props.isMobile && this.autoplay) ||
+      (!props.isEnded && props.isMobile && this.mobileAutoplay)
     ) return undefined;
 
     return (
-      <div className='pre-playback-play-overlay' onClick={() => this.handleClick()}>
-        <a className='pre-playback-play-button'><Icon type={IconType.Play} /></a>
+      <div className='pre-playback-play-overlay' style={{backgroundImage: `url(${props.poster})`}} onClick={() => this.handleClick()}>
+        <a className='pre-playback-play-button'>
+          {props.isEnded ? <Icon type={IconType.Startover} /> : <Icon type={IconType.Play} />}
+        </a>
       </div>
     )
   }

diff --git a/src/reducers/engine.js b/src/reducers/engine.js
@@ -16,7 +16,8 @@ export const types = {
   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_URL: 'engine/UPDATE_AD_URL'
+  UPDATE_AD_URL: 'engine/UPDATE_AD_URL',
+  UPDATE_PLAYER_POSTER: 'engine/UPDATE_PLATER_POSTER'
 }
 
 export const initialState = {
@@ -27,6 +28,7 @@ export const initialState = {
     previousState: '',
     currentState: ''
   },
+  poster: '',
   currentTime: 0,
   duration: 0,
   volume: 1,
@@ -149,6 +151,12 @@ export default (state: Object = initialState, action: Object) => {
         adUrl: action.adUrl
       }
 
+    case types.UPDATE_PLAYER_POSTER:
+      return {
+        ...state,
+        poster: action.poster
+      }
+
     default:
       return state;
   }
@@ -171,5 +179,6 @@ export const actions = {
   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 }),
-  updateAdClickUrl: (adUrl: string) => ({ type: types.UPDATE_AD_URL, adUrl })
+  updateAdClickUrl: (adUrl: string) => ({ type: types.UPDATE_AD_URL, adUrl }),
+  updatePlayerPoster: (poster: string) => ({ type: types.UPDATE_PLAYER_POSTER, poster })
 }