diff --git a/src/components/engine-connector/engine-connector.js b/src/components/engine-connector/engine-connector.js index 54e17f01d..4bfc46207 100644 --- a/src/components/engine-connector/engine-connector.js +++ b/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, () => { diff --git a/src/components/live-tag/live-tag.js b/src/components/live-tag/live-tag.js index dbd9889b6..2f805d404 100644 --- a/src/components/live-tag/live-tag.js +++ b/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.duration + duration: state.engine.liveDuration }); const COMPONENT_NAME = 'LiveTag'; diff --git a/src/components/seekbar-live-playback-container/seekbar-live-playback-container.js b/src/components/seekbar-live-playback-container/seekbar-live-playback-container.js index f9391a010..3bc6cdcb6 100644 --- a/src/components/seekbar-live-playback-container/seekbar-live-playback-container.js +++ b/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()} /> ); } diff --git a/src/components/seekbar/seekbar.js b/src/components/seekbar/seekbar.js index 3cfb90f4a..ecbad6328 100644 --- a/src/components/seekbar/seekbar.js +++ b/src/components/seekbar/seekbar.js @@ -542,7 +542,7 @@ class SeekBar extends Component { */ render(props: any, state: Object): React$Element { 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); diff --git a/src/reducers/engine.js b/src/reducers/engine.js index c4bc6d2af..748731eff 100644 --- a/src/reducers/engine.js +++ b/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) => ({