fix(FEC-11413): live time is 0 in wrong place (#624)

Issue: SeekBarLivePlaybackContainer mounted after the initial `DURATION_CHANGE` event so it will be updated only once the next segment will be loaded so meanwhile, the duration is 0
Solution: use the engine duration and manipulate it internally

Solves FEC-11413

(cherry picked from commit 23cecec)

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

@@ -86,7 +86,7 @@ class EngineConnector extends Component {
     });
 
     eventManager.listen(player, player.Event.LOADED_DATA, () => {
-      this.props.updateDuration(player.duration);
+      this.props.updateDuration(player.isLive() ? player.liveDuration : player.duration);
       this.props.updatePictureInPictureSupport(player.isPictureInPictureSupported());
     });
 

src/components/seekbar-live-playback-container/seekbar-live-playback-container.js

@@ -17,7 +17,7 @@ import {withEventDispatcher} from 'components/event-dispatcher';
 const mapStateToProps = state => ({
   currentTime: state.seekbar.currentTime,
   virtualTime: state.seekbar.virtualTime,
-  duration: state.seekbar.duration,
+  duration: state.engine.duration,
   isDraggingActive: state.seekbar.draggingActive,
   isMobile: state.shell.isMobile,
   poster: state.engine.poster,
@@ -47,15 +47,12 @@ class SeekBarLivePlaybackContainer extends Component {
    * @memberof SeekBarLivePlaybackContainer
    */
   componentDidMount() {
-    const {eventManager, player, isDraggingActive, updateCurrentTime, updateDuration} = this.props;
+    const {eventManager, player, isDraggingActive, updateCurrentTime} = this.props;
     eventManager.listen(player, player.Event.TIME_UPDATE, () => {
       if (!isDraggingActive) {
         updateCurrentTime(player.currentTime - player.getStartTimeOfDvrWindow());
       }
     });
-    eventManager.listen(player, player.Event.DURATION_CHANGE, () => {
-      updateDuration(player.liveDuration - player.getStartTimeOfDvrWindow());
-    });
   }
 
   /**
@@ -64,7 +61,16 @@ class SeekBarLivePlaybackContainer extends Component {
    * @memberof SeekBarLivePlaybackContainer
    */
   get currentTime(): number {
-    return Math.min(this.props.currentTime, this.props.duration);
+    return Math.min(this.props.currentTime, this.duration);
+  }
+
+  /**
+   *
+   * @returns {number} - the duration of the video to show
+   * @memberof SeekBarLivePlaybackContainer
+   */
+  get duration(): number {
+    return this.props.duration - this.props.player.getStartTimeOfDvrWindow();
   }
 
   /**
@@ -85,7 +91,7 @@ class SeekBarLivePlaybackContainer extends Component {
         showTimeBubble={this.props.showTimeBubble}
         changeCurrentTime={time => {
           // avoiding exiting live edge by mistake in case currentTime is just a bit smaller than duration
-          if (!(this.props.player.isOnLiveEdge() && time === this.props.duration)) {
+          if (!(this.props.player.isOnLiveEdge() && time === this.duration)) {
             this.props.player.currentTime = time + this.props.player.getStartTimeOfDvrWindow();
           }
         }}
@@ -98,7 +104,7 @@ class SeekBarLivePlaybackContainer extends Component {
         isDvr={this.props.isDvr}
         currentTime={this.currentTime}
         virtualTime={this.props.virtualTime}
-        duration={this.props.duration}
+        duration={this.duration}
         isDraggingActive={this.props.isDraggingActive}
         isMobile={this.props.isMobile}
         notifyChange={payload => this.props.notifyChange(payload)}

src/reducers/seekbar.js

@@ -7,14 +7,12 @@ export const types = {
   UPDATE_HIDE_SEEKBAR_PREVIEW: 'seekbar/UPDATE_HIDE_SEEKBAR_PREVIEW',
   UPDATE_HIDE_SEEKBAR_TIME_BUBBLE: 'seekbar/UPDATE_HIDE_SEEKBAR_TIME_BUBBLE',
   UPDATE_CURRENT_TIME: 'seekbar/UPDATE_CURRENT_TIME',
-  UPDATE_VIRTUAL_TIME: 'seekbar/UPDATE_VIRTUAL_TIME',
-  UPDATE_DURATION: 'seekbar/UPDATE_DURATION'
+  UPDATE_VIRTUAL_TIME: 'seekbar/UPDATE_VIRTUAL_TIME'
 };
 
 export const initialState = {
   currentTime: 0,
   virtualTime: 0,
-  duration: 0,
   draggingActive: false,
   hoverActive: false,
   previewHoverActive: false,
@@ -73,12 +71,6 @@ export default (state: Object = initialState, action: Object) => {
         virtualTime: action.virtualTime
       };
 
-    case types.UPDATE_DURATION:
-      return {
-        ...state,
-        duration: action.duration
-      };
-
     default:
       return state;
   }
@@ -106,7 +98,6 @@ export const actions = {
     type: types.UPDATE_HIDE_SEEKBAR_TIME_BUBBLE,
     hideTimeBubble
   }),
-  updateDuration: (duration: number) => ({type: types.UPDATE_DURATION, duration}),
   updateCurrentTime: (currentTime: number) => ({type: types.UPDATE_CURRENT_TIME, currentTime}),
   updateVirtualTime: (virtualTime: number) => ({type: types.UPDATE_VIRTUAL_TIME, virtualTime})
 };