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', () => (
))