fix(FEC-11400): live seekbar doesn't work properly - regression (#622)

revert #589 and #615 
make the live seekbar range between dvr start to the live duration

Solves FEC-11400

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

@@ -82,10 +82,7 @@ class EngineConnector extends Component {
     });
 
     eventManager.listen(player, player.Event.DURATION_CHANGE, () => {
-      this.props.updateDuration(player.duration);
-      if (player.isLive()) {
-        this.props.updateLiveDuration(player.liveDuration);
-      }
+      this.props.updateDuration(player.isLive() ? player.liveDuration : player.duration);
     });
 
     eventManager.listen(player, player.Event.LOADED_DATA, () => {

src/components/live-tag/live-tag.js

@@ -17,7 +17,7 @@ const mapStateToProps = state => ({
   isLive: state.engine.isLive,
   isDvr: state.engine.isDvr,
   currentTime: state.engine.currentTime,
-  duration: state.engine.liveDuration
+  duration: state.engine.duration
 });
 
 const COMPONENT_NAME = 'LiveTag';

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,
-  liveDuration: state.engine.liveDuration,
+  duration: state.seekbar.duration,
   isDraggingActive: state.seekbar.draggingActive,
   isMobile: state.shell.isMobile,
   poster: state.engine.poster,
@@ -47,11 +47,24 @@ class SeekBarLivePlaybackContainer extends Component {
    * @memberof SeekBarLivePlaybackContainer
    */
   componentDidMount() {
-    this.props.eventManager.listen(this.props.player, this.props.player.Event.TIME_UPDATE, () => {
-      if (!this.props.isDraggingActive) {
-        this.props.updateCurrentTime(this.props.player.currentTime);
+    const {eventManager, player, isDraggingActive, updateCurrentTime, updateDuration} = 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());
+    });
+  }
+
+  /**
+   *
+   * @returns {number} - the currentTime of the video to show
+   * @memberof SeekBarLivePlaybackContainer
+   */
+  get currentTime(): number {
+    return Math.min(this.props.currentTime, this.props.duration);
   }
 
   /**
@@ -72,8 +85,8 @@ 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.liveDuration)) {
-            this.props.player.currentTime = time;
+          if (!(this.props.player.isOnLiveEdge() && time === this.props.duration)) {
+            this.props.player.currentTime = time + this.props.player.getStartTimeOfDvrWindow();
           }
         }}
         playerPoster={this.props.poster}
@@ -83,9 +96,9 @@ class SeekBarLivePlaybackContainer extends Component {
         updateCurrentTime={data => this.props.updateCurrentTime(data)}
         updateVirtualTime={data => this.props.updateVirtualTime(data)}
         isDvr={this.props.isDvr}
-        currentTime={this.props.currentTime}
+        currentTime={this.currentTime}
         virtualTime={this.props.virtualTime}
-        duration={this.props.liveDuration}
+        duration={this.props.duration}
         isDraggingActive={this.props.isDraggingActive}
         isMobile={this.props.isMobile}
         notifyChange={payload => this.props.notifyChange(payload)}

src/components/seekbar/seekbar.js

@@ -247,7 +247,7 @@ class SeekBar extends Component {
      * @returns {void}
      */
     const seek = (from: number, to: number) => {
-      this.props.changeCurrentTime(to);
+      player.currentTime = to;
       this.updateSeekBarProgress(player.currentTime, this.props.duration, true);
       this.props.notifyChange({
         from: from,
@@ -424,10 +424,10 @@ class SeekBar extends Component {
       this.props.duration *
       ((xPosition - this._seekBarElement.offsetLeft - this.getOffset(this.props.playerElement).left) / this._seekBarElement.clientWidth);
     time = parseFloat(time.toFixed(2));
-    const playerTimeOffset = this.getPlayerTimeOffset();
-    if (time < playerTimeOffset) {
-      return playerTimeOffset;
-    } else if (time > this.props.duration) {
+    if (time < 0) {
+      return 0;
+    }
+    if (time > this.props.duration) {
       return this.props.duration;
     }
     return time;
@@ -536,14 +536,6 @@ class SeekBar extends Component {
     );
   }
 
-  /**
-   * gets the player time offset from the start depends on the media type
-   * @return {number} - time offset
-   */
-  getPlayerTimeOffset(): number {
-    return this.props.player.isLive() ? this.props.player.getStartTimeOfDvrWindow() : 0;
-  }
-
   /**
    * render component
    *
@@ -570,7 +562,7 @@ class SeekBar extends Component {
         ref={c => (c ? (this._seekBarElement = c) : undefined)}
         role="slider"
         aria-label={props.sliderAriaLabel}
-        aria-valuemin={this.getPlayerTimeOffset()}
+        aria-valuemin="0"
         aria-valuemax={Math.round(this.props.duration)}
         aria-valuenow={Math.round(this.props.currentTime)}
         aria-valuetext={`${toHHMMSS(this.props.currentTime)} of ${toHHMMSS(this.props.duration)}`}

src/reducers/engine.js

@@ -17,7 +17,6 @@ export const types = {
   UPDATE_IS_PLAYBACK_ENDED: `${component}/UPDATE_IS_PLAYBACK_ENDED`,
   UPDATE_CURRENT_TIME: `${component}/UPDATE_CURRENT_TIME`,
   UPDATE_DURATION: `${component}/UPDATE_DURATION`,
-  UPDATE_LIVE_DURATION: `${component}/UPDATE_LIVE_DURATION`,
   UPDATE_VOLUME: `${component}/UPDATE_VOLUME`,
   UPDATE_MUTED: `${component}/UPDATE_MUTED`,
   UPDATE_METADATA_LOADING_STATUS: `${component}/UPDATE_METADATA_LOADING_STATUS`,
@@ -70,7 +69,6 @@ export const initialState = {
   currentTime: 0,
   lastSeekPoint: 0,
   duration: 0,
-  liveDuration: 0,
   volume: 1,
   muted: false,
   videoTracks: [],
@@ -181,12 +179,6 @@ export default (state: Object = initialState, action: Object) => {
         duration: action.duration
       };
 
-    case types.UPDATE_LIVE_DURATION:
-      return {
-        ...state,
-        liveDuration: action.liveDuration
-      };
-
     case types.UPDATE_VOLUME:
       return {
         ...state,
@@ -391,7 +383,6 @@ export const actions = {
   updateIsPlaybackEnded: (isPlaybackEnded: boolean) => ({type: types.UPDATE_IS_PLAYBACK_ENDED, isPlaybackEnded}),
   updateCurrentTime: (currentTime: number) => ({type: types.UPDATE_CURRENT_TIME, currentTime}),
   updateDuration: (duration: number) => ({type: types.UPDATE_DURATION, duration}),
-  updateLiveDuration: (liveDuration: number) => ({type: types.UPDATE_LIVE_DURATION, liveDuration}),
   updateVolume: (volume: number) => ({type: types.UPDATE_VOLUME, volume}),
   updateMuted: (muted: boolean) => ({type: types.UPDATE_MUTED, muted}),
   updateMetadataLoadingStatus: (metadataLoaded: boolean) => ({