diff --git a/src/defaults/render-actions.js b/src/defaults/render-actions.js index 7fca100..c46b79c 100644 --- a/src/defaults/render-actions.js +++ b/src/defaults/render-actions.js @@ -32,6 +32,7 @@ const Actions = ({ countdownTime, timeLimit, showReplayControls, + replayVideoAutoplayAndLoopOff, useVideoInput, onTurnOnCamera, @@ -115,6 +116,7 @@ Actions.propTypes = { countdownTime: PropTypes.number, timeLimit: PropTypes.number, showReplayControls: PropTypes.bool, + replayVideoAutoplayAndLoopOff: PropTypes.bool, isReplayingVideo: PropTypes.bool, useVideoInput: PropTypes.bool, diff --git a/src/video-recorder.js b/src/video-recorder.js index 27ef5a6..cc0ebde 100644 --- a/src/video-recorder.js +++ b/src/video-recorder.js @@ -86,6 +86,8 @@ export default class VideoRecorder extends Component { timeLimit: PropTypes.number, /** Use this if you want to show play/pause/etc. controls on the replay video */ showReplayControls: PropTypes.bool, + /** Use this to turn off autoplay and looping of the replay video. It is recommended to also showReplayControls in order to play */ + replayVideoAutoplayAndLoopOff: PropTypes.bool, /** Use this if you want to customize the constraints passed to getUserMedia() */ constraints: PropTypes.shape({ audio: PropTypes.any, @@ -347,6 +349,11 @@ export default class VideoRecorder extends Component { playPromise .then(() => { this.setState({ isReplayVideoMuted: false }) + // fixes bug where seeking control during autoplay is not available until the video is almost completely played through + if (this.props.replayVideoAutoplayAndLoopOff) { + video.pause() + video.loop = false + } }) .catch(err => { console.warn('Could not autoplay replay video', err) @@ -582,15 +589,19 @@ export default class VideoRecorder extends Component { } handleReplayVideoClick = () => { - if (this.replayVideo.paused) { + if (this.replayVideo.paused && !this.props.showReplayControls) { this.replayVideo.play() } - this.setState({ - isReplayVideoMuted: !this.state.isReplayVideoMuted - }) + // fixes bug where seeking control during autoplay is not available until the video is almost completely played through + if (!this.props.replayVideoAutoplayAndLoopOff) { + this.setState({ + isReplayVideoMuted: !this.state.isReplayVideoMuted + }) + } } + // fixes bug where seeking control is not available until the video is almost completely played through handleDurationChange = () => { if (this.props.showReplayControls) { this.replayVideo.currentTime = 1000000 @@ -600,6 +611,7 @@ export default class VideoRecorder extends Component { renderCameraView () { const { showReplayControls, + replayVideoAutoplayAndLoopOff, renderDisconnectedView, renderVideoInputView, renderUnsupportedView, @@ -643,7 +655,7 @@ export default class VideoRecorder extends Component { loop muted={isReplayVideoMuted} playsInline - autoPlay + autoPlay={!replayVideoAutoplayAndLoopOff} controls={showReplayControls} onClick={this.handleReplayVideoClick} onDurationChange={this.handleDurationChange} @@ -703,6 +715,7 @@ export default class VideoRecorder extends Component { countdownTime, timeLimit, showReplayControls, + replayVideoAutoplayAndLoopOff, renderActions, useVideoInput } = this.props @@ -724,6 +737,7 @@ export default class VideoRecorder extends Component { countdownTime, timeLimit, showReplayControls, + replayVideoAutoplayAndLoopOff, useVideoInput, onTurnOnCamera: this.turnOnCamera, diff --git a/src/video-recorder.stories.js b/src/video-recorder.stories.js index 3a4ce4a..ea42333 100644 --- a/src/video-recorder.stories.js +++ b/src/video-recorder.stories.js @@ -86,6 +86,19 @@ stories.add('with showReplayControls=true', () => ( )) +stories.add( + 'with showReplayControls=true replayVideoAutoplayAndLoopOff=true', + () => ( + + ) +) + stories.add('with isFlipped=false', () => ( ))