Merge pull request #27 from tessawiedmann/master

feat: Add showReplayControls, onPauseRecording, onResumeRecording
fbaiodias · Jan 8, 2020 · b5ee19b · b5ee19b
2 parents d590834 + 339692e
commit b5ee19b
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 3 deletions.
diff --git a/src/defaults/render-actions.js b/src/defaults/render-actions.js
@@ -28,16 +28,19 @@ const Actions = ({
   streamIsReady,
   isConnecting,
   isRunningCountdown,
+  isReplayingVideo,
   countdownTime,
   timeLimit,
-  isReplayingVideo,
+  showReplayControls,
   useVideoInput,
 
   onTurnOnCamera,
   onTurnOffCamera,
   onOpenVideoInput,
   onStartRecording,
   onStopRecording,
+  onPauseRecording,
+  onResumeRecording,
   onStopReplaying,
   onConfirm
 }) => {
@@ -111,6 +114,7 @@ Actions.propTypes = {
   isRunningCountdown: PropTypes.bool,
   countdownTime: PropTypes.number,
   timeLimit: PropTypes.number,
+  showReplayControls: PropTypes.bool,
   isReplayingVideo: PropTypes.bool,
   useVideoInput: PropTypes.bool,
 
@@ -119,6 +123,8 @@ Actions.propTypes = {
   onOpenVideoInput: PropTypes.func,
   onStartRecording: PropTypes.func,
   onStopRecording: PropTypes.func,
+  onPauseRecording: PropTypes.func,
+  onResumeRecording: PropTypes.func,
   onStopReplaying: PropTypes.func,
   onConfirm: PropTypes.func
 }

diff --git a/src/video-recorder.js b/src/video-recorder.js
@@ -74,15 +74,17 @@ const Video = styled.video`
 
 export default class VideoRecorder extends Component {
   static propTypes = {
-    /** Wether or not to start the camera initially */
+    /** Whether or not to start the camera initially */
     isOnInitially: PropTypes.bool,
     /** Pass this if you want to force a specific mime-type for the video */
     mimeType: PropTypes.string,
     /** How much time to wait until it starts recording (in ms) */
     countdownTime: PropTypes.number,
     /** Use this if you want to set a time limit for the video (in ms) */
     timeLimit: PropTypes.number,
-    /** Use this if you want to customize the constaints passed to getUserMedia() */
+    /** Use this if you want to show play/pause/etc. controls on the replay video */
+    showReplayControls: PropTypes.bool,
+    /** Use this if you want to customize the constraints passed to getUserMedia() */
     constraints: PropTypes.shape({
       audio: PropTypes.any,
       video: PropTypes.any
@@ -102,6 +104,8 @@ export default class VideoRecorder extends Component {
     onTurnOffCamera: PropTypes.func,
     onStartRecording: PropTypes.func,
     onStopRecording: PropTypes.func,
+    onPauseRecording: PropTypes.func,
+    onResumeRecording: PropTypes.func,
     onRecordingComplete: PropTypes.func,
     onOpenVideoInput: PropTypes.func,
     onStopReplaying: PropTypes.func,
@@ -366,6 +370,32 @@ export default class VideoRecorder extends Component {
     this.mediaRecorder.stop()
   }
 
+  handlePauseRecording = () => {
+    if (this.props.onPauseRecording) {
+      this.props.onPauseRecording()
+    }
+
+    if (!this.mediaRecorder) {
+      this.handleError(new ReactVideoRecorderMediaRecorderUnavailableError())
+      return
+    }
+
+    this.mediaRecorder.pause()
+  }
+
+  handleResumeRecording = () => {
+    if (this.props.onResumeRecording) {
+      this.props.onResumeRecording()
+    }
+
+    if (!this.mediaRecorder) {
+      this.handleError(new ReactVideoRecorderMediaRecorderUnavailableError())
+      return
+    }
+
+    this.mediaRecorder.resume()
+  }
+
   handleStartRecording = () => {
     if (this.props.onStartRecording) {
       this.props.onStartRecording()
@@ -556,6 +586,7 @@ export default class VideoRecorder extends Component {
 
   renderCameraView () {
     const {
+      showReplayControls,
       renderDisconnectedView,
       renderVideoInputView,
       renderUnsupportedView,
@@ -600,6 +631,7 @@ export default class VideoRecorder extends Component {
             muted={isReplayVideoMuted}
             playsInline
             autoPlay
+            controls={showReplayControls}
             onClick={this.handleReplayVideoClick}
           />
           {videoInput}
@@ -651,6 +683,7 @@ export default class VideoRecorder extends Component {
     const {
       countdownTime,
       timeLimit,
+      showReplayControls,
       renderActions,
       useVideoInput
     } = this.props
@@ -671,13 +704,16 @@ export default class VideoRecorder extends Component {
           isReplayVideoMuted,
           countdownTime,
           timeLimit,
+          showReplayControls,
           useVideoInput,
 
           onTurnOnCamera: this.turnOnCamera,
           onTurnOffCamera: this.turnOffCamera,
           onOpenVideoInput: this.handleOpenVideoInput,
           onStartRecording: this.handleStartRecording,
           onStopRecording: this.handleStopRecording,
+          onPauseRecording: this.handlePauseRecording,
+          onResumeRecording: this.handleResumeRecording,
           onStopReplaying: this.handleStopReplaying
         })}
       </Wrapper>

diff --git a/src/video-recorder.stories.js b/src/video-recorder.stories.js
@@ -81,3 +81,7 @@ stories.add('with useVideoInput=true isOnInitially=true', () => (
 stories.add('without dataAvailableTimeout', () => (
   <VideoRecorder isOnInitially dataAvailableTimeout={null} {...actionLoggers} />
 ))
+
+stories.add('with showReplayControls=true', () => (
+  <VideoRecorder isOnInitially showReplayControls {...actionLoggers} />
+))