Merge pull request #34 from tessawiedmann/master

feat: Add replayVideoAutoplayAndLoopOff
fbaiodias · Feb 10, 2020 · 08e845c · 08e845c
2 parents a1e5d85 + 8e74f40
commit 08e845c
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 5 deletions.
diff --git 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
@@ -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
@@ -86,6 +86,19 @@ stories.add('with showReplayControls=true', () => (
   <VideoRecorder isOnInitially showReplayControls {...actionLoggers} />
 ))
 
+stories.add(
+  'with showReplayControls=true replayVideoAutoplayAndLoopOff=true',
+  () => (
+    <VideoRecorder
+      isOnInitially
+      showReplayControls
+      replayVideoAutoplayAndLoopOff
+      isReplayVideoInitiallyMuted={false}
+      {...actionLoggers}
+    />
+  )
+)
+
 stories.add('with isFlipped=false', () => (
   <VideoRecorder isFlipped={false} showReplayControls {...actionLoggers} />
 ))