From 5e869e334dd2b032e21430380bc939c6b3e9e8c7 Mon Sep 17 00:00:00 2001
From: Francisco Baio Dias <xicombd@gmail.com>
Date: Fri, 24 May 2019 14:56:27 +0200
Subject: [PATCH] feat: allow uploading videos

---
 src/defaults/render-actions.js | 11 ++++++++-
 src/video-recorder.js          | 42 ++++++++++++++++++++++++++++------
 src/video-recorder.stories.js  |  4 ++++
 3 files changed, 49 insertions(+), 8 deletions(-)

diff --git a/src/defaults/render-actions.js b/src/defaults/render-actions.js
index 67419e6..63283e4 100644
--- a/src/defaults/render-actions.js
+++ b/src/defaults/render-actions.js
@@ -30,6 +30,7 @@ export default ({
   countdownTime,
   timeLimit,
   isReplayingVideo,
+  useVideoInput,
 
   onTurnOnCamera,
   onTurnOffCamera,
@@ -55,7 +56,7 @@ export default ({
     if (isReplayingVideo) {
       return (
         <Button onClick={onStopReplaying} data-qa='start-replaying'>
-          Record another video
+          Use another video
         </Button>
       )
     }
@@ -70,6 +71,14 @@ export default ({
       )
     }
 
+    if (useVideoInput) {
+      return (
+        <Button onClick={onOpenVideoInput} data-qa='open-input'>
+          Upload a video
+        </Button>
+      )
+    }
+
     return shouldUseVideoInput ? (
       <Button onClick={onOpenVideoInput} data-qa='open-input'>
         Record a video
diff --git a/src/video-recorder.js b/src/video-recorder.js
index 581d121..49dc024 100644
--- a/src/video-recorder.js
+++ b/src/video-recorder.js
@@ -97,6 +97,8 @@ export default class VideoRecorder extends Component {
     countdownTime: 3000
   }
 
+  videoInput = React.createRef()
+
   constructor (props) {
     super(props)
 
@@ -146,7 +148,12 @@ export default class VideoRecorder extends Component {
         isVideoInputSupported
       },
       () => {
-        if (this.state.isInlineRecordingSupported && this.props.isOnInitially) {
+        if (this.props.useVideoInput && this.props.isOnInitially) {
+          this.handleOpenVideoInput()
+        } else if (
+          this.state.isInlineRecordingSupported &&
+          this.props.isOnInitially
+        ) {
           this.turnOnCamera()
         } else if (
           this.state.isVideoInputSupported &&
@@ -414,12 +421,20 @@ export default class VideoRecorder extends Component {
   }
 
   handleVideoSelected (e) {
+    if (this.state.isReplayingVideo) {
+      this.setState({
+        isReplayingVideo: false
+      })
+    }
+
     const files = e.target.files || e.dataTransfer.files
     if (files.length === 0) return
 
     const startedAt = new Date().getTime()
     const video = files[0]
 
+    e.target.value = null
+
     const extension = video.type === 'video/quicktime' ? 'mov' : undefined
 
     getVideoInfo(video)
@@ -450,7 +465,8 @@ export default class VideoRecorder extends Component {
       this.props.onOpenVideoInput()
     }
 
-    this.videoInput.click()
+    this.videoInput.current.value = null
+    this.videoInput.current.click()
   }
 
   handleStopReplaying () {
@@ -458,6 +474,10 @@ export default class VideoRecorder extends Component {
       this.props.onStopReplaying()
     }
 
+    if (this.props.useVideoInput && this.props.isOnInitially) {
+      return this.handleOpenVideoInput()
+    }
+
     this.setState({
       isReplayingVideo: false
     })
@@ -475,7 +495,8 @@ export default class VideoRecorder extends Component {
       renderVideoInputView,
       renderUnsupportedView,
       renderErrorView,
-      renderLoadingView
+      renderLoadingView,
+      useVideoInput
     } = this.props
 
     const {
@@ -489,14 +510,15 @@ export default class VideoRecorder extends Component {
     } = this.state
 
     const shouldUseVideoInput =
-      !isInlineRecordingSupported && isVideoInputSupported
+      useVideoInput || (!isInlineRecordingSupported && isVideoInputSupported)
 
     const videoInput = shouldUseVideoInput ? (
       <input
-        ref={el => (this.videoInput = el)}
+        ref={this.videoInput}
+        key='videoInput'
         type='file'
         accept='video/*'
-        capture='user'
+        capture={useVideoInput ? undefined : 'user'}
         style={{ display: 'none' }}
         onChange={this.handleVideoSelected}
       />
@@ -565,7 +587,12 @@ export default class VideoRecorder extends Component {
       isReplayVideoMuted
     } = this.state
 
-    const { countdownTime, timeLimit, renderActions } = this.props
+    const {
+      countdownTime,
+      timeLimit,
+      renderActions,
+      useVideoInput
+    } = this.props
 
     return (
       <Wrapper>
@@ -583,6 +610,7 @@ export default class VideoRecorder extends Component {
           isReplayVideoMuted,
           countdownTime,
           timeLimit,
+          useVideoInput,
 
           onTurnOnCamera: this.turnOnCamera,
           onTurnOffCamera: this.turnOffCamera,
diff --git a/src/video-recorder.stories.js b/src/video-recorder.stories.js
index 194b702..eb6fa6b 100644
--- a/src/video-recorder.stories.js
+++ b/src/video-recorder.stories.js
@@ -73,3 +73,7 @@ stories.add('with isOnInitially=true', () => (
     {...actionLoggers}
   />
 ))
+
+stories.add('with useVideoInput=true isOnInitially=true', () => (
+  <VideoRecorder isOnInitially useVideoInput {...actionLoggers} />
+))