feat(FEC-10817): expose the current time of the video element in live streams

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

@@ -83,6 +83,9 @@ class EngineConnector extends Component {
 
     eventManager.listen(player, player.Event.DURATION_CHANGE, () => {
       this.props.updateDuration(player.duration);
+      if (player.isLive()) {
+        this.props.updateLiveDuration(player.liveDuration);
+      }
     });
 
     eventManager.listen(player, player.Event.LOADED_DATA, () => {

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

@@ -77,13 +77,14 @@ class LiveTag extends Component {
   /**
    * render live tag component
    *
-   * @param {*} props - component props
    * @returns {React$Element} component element
    * @memberof LiveTag
    */
-  render(props: any): React$Element<any> {
+  render(): React$Element<any> {
     const tagStyleClass = [style.liveTag];
-    if (props.isDvr && !this.isOnLiveEdge()) tagStyleClass.push(style.nonLivePlayhead);
+    if (!this.isOnLiveEdge()) {
+      tagStyleClass.push(style.nonLivePlayhead);
+    }
 
     return (
       <div tabIndex="0" className={tagStyleClass.join(' ')} onClick={this.onClick} onKeyDown={this.onKeyDown}>

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.engine.duration,
+  liveDuration: state.engine.liveDuration,
   isDraggingActive: state.seekbar.draggingActive,
   isMobile: state.shell.isMobile,
   poster: state.engine.poster,
@@ -54,15 +54,6 @@ class SeekBarLivePlaybackContainer extends Component {
     });
   }
 
-  /**
-   *
-   * @returns {number} - the currentTime of the video to show
-   * @memberof SeekBarLivePlaybackContainer
-   */
-  get currentTime(): number {
-    return Math.min(this.props.currentTime, this.props.duration);
-  }
-
   /**
    * render component
    *
@@ -81,8 +72,9 @@ 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)) {
-            this.props.player.currentTime = time;
+          const origTime = time + this.props.player.getStartTimeOfDvrWindow();
+          if (!(this.props.player.isOnLiveEdge() && origTime === this.props.liveDuration)) {
+            this.props.player.currentTime = origTime;
           }
         }}
         playerPoster={this.props.poster}
@@ -92,12 +84,13 @@ class SeekBarLivePlaybackContainer extends Component {
         updateCurrentTime={data => this.props.updateCurrentTime(data)}
         updateVirtualTime={data => this.props.updateVirtualTime(data)}
         isDvr={this.props.isDvr}
-        currentTime={this.currentTime}
+        currentTime={this.props.currentTime - this.props.player.getStartTimeOfDvrWindow()}
         virtualTime={this.props.virtualTime}
-        duration={this.props.duration}
+        duration={this.props.liveDuration - this.props.player.getStartTimeOfDvrWindow()}
         isDraggingActive={this.props.isDraggingActive}
         isMobile={this.props.isMobile}
         notifyChange={payload => this.props.notifyChange(payload)}
+        forceFullProgress={this.props.player.isOnLiveEdge()}
       />
     );
   }

src/components/seekbar/seekbar.js

@@ -542,7 +542,7 @@ class SeekBar extends Component {
    */
   render(props: any, state: Object): React$Element<any> {
     const virtualProgressWidth = `${(props.virtualTime / props.duration) * 100}%`;
-    const progressWidth = `${(props.currentTime / props.duration) * 100}%`;
+    const progressWidth = `${props.forceFullProgress ? 100 : (props.currentTime / props.duration) * 100}%`;
     const bufferedWidth = `${Math.round(this.getBufferedPercent())}%`;
     const seekbarStyleClass = [style.seekBar];
     if (props.adBreak) seekbarStyleClass.push(style.adBreak);

src/reducers/engine.js

@@ -17,6 +17,7 @@ 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`,
@@ -69,6 +70,7 @@ export const initialState = {
   currentTime: 0,
   lastSeekPoint: 0,
   duration: 0,
+  liveDuration: 0,
   volume: 1,
   muted: false,
   videoTracks: [],
@@ -179,6 +181,12 @@ 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,
@@ -383,6 +391,7 @@ 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) => ({

translations/fr_ca.i18n.json

@@ -96,4 +96,4 @@
       "overlay_text": "Lecture en mode Picture-in-picture"
     }
   }
-}s
+}