fix(FEC-11364): Live Dvr - if seek back, the scrubber "jumps" too far…

… back and after return to correct point (#615)

Instead of adding the dvr window after the seek, add it as part of the seek.

Solves FEC-11364

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

@@ -72,9 +72,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
-          const origTime = time + this.props.player.getStartTimeOfDvrWindow();
-          if (!(this.props.player.isOnLiveEdge() && origTime === this.props.liveDuration)) {
-            this.props.player.currentTime = origTime;
+          if (!(this.props.player.isOnLiveEdge() && time === this.props.liveDuration)) {
+            this.props.player.currentTime = time;
           }
         }}
         playerPoster={this.props.poster}
@@ -84,9 +83,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 - this.props.player.getStartTimeOfDvrWindow()}
+        currentTime={this.props.currentTime}
         virtualTime={this.props.virtualTime}
-        duration={this.props.liveDuration - this.props.player.getStartTimeOfDvrWindow()}
+        duration={this.props.liveDuration}
         isDraggingActive={this.props.isDraggingActive}
         isMobile={this.props.isMobile}
         notifyChange={payload => this.props.notifyChange(payload)}

src/components/seekbar/seekbar.js

@@ -419,13 +419,17 @@ class SeekBar extends Component {
    * @memberof SeekBar
    */
   getTime(e: any): number {
-    let xPosition = typeof e.clientX === 'number' ? e.clientX : e.changedTouches && e.changedTouches[0] && e.changedTouches[0].clientX;
+    const xPosition = typeof e.clientX === 'number' ? e.clientX : e.changedTouches && e.changedTouches[0] && e.changedTouches[0].clientX;
     let time =
       this.props.duration *
       ((xPosition - this._seekBarElement.offsetLeft - this.getOffset(this.props.playerElement).left) / this._seekBarElement.clientWidth);
     time = parseFloat(time.toFixed(2));
-    if (time < 0) return 0;
-    if (time > this.props.duration) return this.props.duration;
+    const playerTimeOffset = this.getPlayerTimeOffset();
+    if (time < playerTimeOffset) {
+      return playerTimeOffset;
+    } else if (time > this.props.duration) {
+      return this.props.duration;
+    }
     return time;
   }
 
@@ -532,6 +536,14 @@ 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
    *
@@ -558,7 +570,7 @@ class SeekBar extends Component {
         ref={c => (c ? (this._seekBarElement = c) : undefined)}
         role="slider"
         aria-label={props.sliderAriaLabel}
-        aria-valuemin="0"
+        aria-valuemin={this.getPlayerTimeOffset()}
         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/components/top-bar/_top-bar.scss

@@ -51,7 +51,6 @@
     pointer-events: none;
     &:empty {
       margin: 0 0 #{$gui-gutter}px 0;
-
     }
 
     .control-button-container {
@@ -74,7 +73,6 @@
     .top-bar {
       visibility: visible;
       margin-top: 0;
-
     }
   }
 }
@@ -100,7 +98,6 @@
 
   .right-controls {
     margin: #{$top-bar-top-bottom-gutter}px #{$gui-small-gutter}px #{$top-bar-top-bottom-gutter}px 0;
-
   }
   .top-bar-area {
     width: calc(100% - #{2 * $gui-small-gutter}px);

src/styles/_variables.scss

@@ -35,7 +35,7 @@ $gui-gutter: 16;
 $gui-small-gutter: 8;
 $blur: 16px;
 
-$color-tone1: #FFFFFF;
+$color-tone1: #ffffff;
 $color-tone4: #888888;
 $color-tone6: #444444;