feat: allow uploading videos

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

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,14 +465,19 @@ export default class VideoRecorder extends Component {
  this.props.onOpenVideoInput()
  }
 
- this.videoInput.click()
+ this.videoInput.current.value = null
+ this.videoInput.current.click()
  }
 
  handleStopReplaying () {
  if (this.props.onStopReplaying) {
  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,

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} />
+))