feat: add timeLimit prop

src/defaults/render-actions.js

@@ -28,6 +28,7 @@ export default ({
   isConnecting,
   isRunningCountdown,
   countdownTime,
+  timeLimit,
   isReplayingVideo,
 
   onTurnOnCamera,
@@ -75,7 +76,7 @@ export default ({
 
   return (
     <div>
-      {isRecording && <Timer />}
+      {isRecording && <Timer timeLimit={timeLimit} />}
       {isRunningCountdown && <Countdown countdownTime={countdownTime} />}
       <ActionsWrapper>{renderContent()}</ActionsWrapper>
     </div>

src/defaults/timer.js

@@ -23,31 +23,25 @@ const RecIcon = styled.div`
 class Timer extends Component {
   constructor (props) {
     super(props)
-    this.state = {
-      seconds: null,
-      minutes: null
-    }
-  }
 
-  init (running) {
-    this.start()
-    this.setState({ seconds: 0 })
+    const nextSeconds = props.timeLimit ? props.timeLimit / 1000 : 0
+
+    this.state = this.getState(nextSeconds)
   }
 
   componentWillUnmount () {
-    this.stop()
+    clearInterval(this.timer)
   }
 
   componentDidMount () {
-    this.init()
-  }
+    const { timeLimit } = this.props
+    this.timer = setInterval(() => {
+      const { seconds } = this.state
+      const nextSeconds = timeLimit ? seconds - 1 : seconds + 1
 
-  stop () {
-    clearInterval(this.timer)
-    this.setState({
-      seconds: null,
-      human: null
-    })
+      const nextState = this.getState(nextSeconds)
+      this.setState(nextState)
+    }, 1000)
   }
 
   pad (unit) {
@@ -56,16 +50,18 @@ class Timer extends Component {
     return pad.substring(0, pad.length - str.length) + str
   }
 
-  start () {
-    this.timer = setInterval(() => {
-      const seconds = (this.state.seconds || 0) + 1
-      const minutes = Math.floor(seconds / 60)
-      const humanTime = `${minutes}:${this.pad(seconds - minutes * 60)}`
-      this.setState({
-        seconds: seconds,
-        human: humanTime
-      })
-    }, 1000)
+  getState (seconds) {
+    const minutes = Math.floor(seconds / 60)
+
+    let humanTime =
+      minutes !== 0
+        ? `${minutes}:${this.pad(seconds - minutes * 60)}`
+        : `${seconds - minutes * 60}s`
+
+    return {
+      seconds: seconds,
+      human: humanTime
+    }
   }
 
   render () {

src/video-recorder.js

@@ -224,6 +224,8 @@ export default class VideoRecorder extends Component {
 
     console.error('Captured error', err)
 
+    clearTimeout(this.timeLimitTimeout)
+
     if (onError) {
       onError(err)
     }
@@ -324,6 +326,13 @@ export default class VideoRecorder extends Component {
         this.mediaRecorder.ondataavailable = this.handleDataAvailable
         this.mediaRecorder.start(chunkSizeInMS) // collect 10ms of data
 
+        const { timeLimit } = this.props
+        if (timeLimit) {
+          this.timeLimitTimeout = setTimeout(() => {
+            this.handleStopRecording()
+          }, timeLimit)
+        }
+
         // mediaRecorder.ondataavailable should be called every 10ms,
         // as that's what we're passing to mediaRecorder.start() above
         setTimeout(() => {
@@ -354,6 +363,8 @@ export default class VideoRecorder extends Component {
       return
     }
 
+    clearTimeout(this.timeLimitTimeout)
+
     const videoBlob = new window.Blob(this.recordedBlobs, {
       type: this.getMimeType()
     })
@@ -510,7 +521,7 @@ export default class VideoRecorder extends Component {
       isReplayVideoMuted
     } = this.state
 
-    const { countdownTime } = this.props
+    const { countdownTime, timeLimit } = this.props
 
     return (
       <Wrapper>
@@ -527,6 +538,7 @@ export default class VideoRecorder extends Component {
           isReplayingVideo,
           isReplayVideoMuted,
           countdownTime,
+          timeLimit,
 
           onTurnOnCamera: this.turnOnCamera,
           onTurnOffCamera: this.turnOffCamera,
@@ -546,5 +558,5 @@ VideoRecorder.defaultProps = {
   renderDisconnectedView: () => <DisconnectedView />,
   renderLoadingView: () => <LoadingView />,
   renderActions,
-  countdownTime: 3000
+  countdownTime: 3 * 1000
 }

src/video-recorder.stories.js

@@ -49,3 +49,15 @@ storiesOf('VideoRecorder', module)
       </Wrapper>
     )
   })
+  .add('isOnInitially with timeLimit', () => {
+    return (
+      <Wrapper>
+        <GlobalStyle />
+        <VideoRecorder
+          isOnInitially
+          timeLimit={30 * 1000}
+          onRecordingComplete={handleRecordingComplete}
+        />
+      </Wrapper>
+    )
+  })