From 484a46240437ff9cb1f1c081d65af369d2463c35 Mon Sep 17 00:00:00 2001
From: = <=>
Date: Wed, 3 Feb 2021 17:00:40 -0800
Subject: [PATCH 1/4] fix: error when unmounted while setting up
---
src/video-recorder.js | 9 +++++++++
1 file changed, 9 insertions(+)
diff --git a/src/video-recorder.js b/src/video-recorder.js
index 45140b5..f7d2b5e 100644
--- a/src/video-recorder.js
+++ b/src/video-recorder.js
@@ -134,6 +134,8 @@ export default class VideoRecorder extends Component {
videoInput = React.createRef()
+ isComponentUnmounted = false
+
timeSinceInactivity = 0
state = {
@@ -196,6 +198,7 @@ export default class VideoRecorder extends Component {
componentWillUnmount () {
this.turnOffCamera()
+ this.isComponentUnmounted = true
}
turnOnCamera = () => {
@@ -247,6 +250,12 @@ export default class VideoRecorder extends Component {
}
handleSuccess = (stream) => {
+ // Since handleSuccess is an async function, we may be in a situation where this was called after the
+ // component was unmounted
+ if (this.isComponentUnmounted) {
+ return
+ }
+
this.stream = stream
this.setState({
isCameraOn: true,
From 6b0387004726104f1b708dd41422edea61532ea3 Mon Sep 17 00:00:00 2001
From: = <=>
Date: Tue, 9 Feb 2021 08:43:00 -0800
Subject: [PATCH 2/4] fix: add unmount check to handleError
---
src/video-recorder.js | 12 ++++++++----
1 file changed, 8 insertions(+), 4 deletions(-)
diff --git a/src/video-recorder.js b/src/video-recorder.js
index f7d2b5e..43d08bb 100644
--- a/src/video-recorder.js
+++ b/src/video-recorder.js
@@ -285,14 +285,18 @@ export default class VideoRecorder extends Component {
handleError = (err) => {
const { onError } = this.props
- console.error('Captured error', err)
-
- clearTimeout(this.timeLimitTimeout)
-
if (onError) {
onError(err)
}
+ if (this.isComponentUnmounted) {
+ return
+ }
+
+ console.error('Captured error', err)
+
+ clearTimeout(this.timeLimitTimeout)
+
this.setState({
isConnecting: this.state.isConnecting && false,
isRecording: false,
From 2d0b9c6f52c8d6de4fe35ece0ec394eacba5d42b Mon Sep 17 00:00:00 2001
From: = <=>
Date: Wed, 4 Aug 2021 11:20:21 -0700
Subject: [PATCH 3/4] feat: add ability to configure controlslist and disable
pip
---
src/video-recorder.js | 8 ++++++++
src/video-recorder.stories.js | 13 +++++++++++++
2 files changed, 21 insertions(+)
diff --git a/src/video-recorder.js b/src/video-recorder.js
index b0a7e6a..a9c4561 100644
--- a/src/video-recorder.js
+++ b/src/video-recorder.js
@@ -100,6 +100,10 @@ export default class VideoRecorder extends Component {
chunkSize: PropTypes.number,
dataAvailableTimeout: PropTypes.number,
useVideoInput: PropTypes.bool,
+ /** Use this to configure the replaying video element's controlslist attribute */
+ videoControlsList: PropTypes.string,
+ /** Use this to disable picture in picture mode on the replaying video element */
+ disablePictureInPicture: PropTypes.bool,
renderDisconnectedView: PropTypes.func,
renderLoadingView: PropTypes.func,
@@ -718,6 +722,8 @@ export default class VideoRecorder extends Component {
const {
cameraViewClassName,
showReplayControls,
+ videoControlsList,
+ disablePictureInPicture,
replayVideoAutoplayAndLoopOff,
renderDisconnectedView,
renderVideoInputView,
@@ -770,6 +776,8 @@ export default class VideoRecorder extends Component {
controls={showReplayControls}
onClick={this.handleReplayVideoClick}
onDurationChange={this.handleDurationChange}
+ controlsList={videoControlsList}
+ disablePictureInPicture={disablePictureInPicture}
/>
{videoInput}
diff --git a/src/video-recorder.stories.js b/src/video-recorder.stories.js
index ea42333..ef2f661 100644
--- a/src/video-recorder.stories.js
+++ b/src/video-recorder.stories.js
@@ -102,3 +102,16 @@ stories.add(
stories.add('with isFlipped=false', () => (
))
+
+stories.add(
+ 'with showReplayControls=true videoControlsList="nodownload" disablepictureinpicture',
+ () => (
+
+ )
+)
From 9ee1f65c6ecfd4966120904a07475ee42f6eba6f Mon Sep 17 00:00:00 2001
From: = <=>
Date: Wed, 15 Sep 2021 14:23:13 -0700
Subject: [PATCH 4/4] feat: add support for custom switch camera element
---
src/video-recorder.js | 11 ++++++++++-
src/video-recorder.stories.js | 33 +++++++++++++++++++++++++++++++++
2 files changed, 43 insertions(+), 1 deletion(-)
diff --git a/src/video-recorder.js b/src/video-recorder.js
index 3b1f104..194fec0 100644
--- a/src/video-recorder.js
+++ b/src/video-recorder.js
@@ -104,6 +104,8 @@ export default class VideoRecorder extends Component {
videoControlsList: PropTypes.string,
/** Use this to disable picture in picture mode on the replaying video element */
disablePictureInPicture: PropTypes.bool,
+ /** Use this to change what element is rendered for the switch camera view button */
+ switchCameraViewElement: PropTypes.element,
renderDisconnectedView: PropTypes.func,
renderLoadingView: PropTypes.func,
@@ -733,6 +735,7 @@ export default class VideoRecorder extends Component {
renderUnsupportedView,
renderErrorView,
renderLoadingView,
+ switchCameraViewElement,
useVideoInput,
videoClassName
} = this.props
@@ -803,7 +806,13 @@ export default class VideoRecorder extends Component {
// Enable switch camera button, only if not recording and multiple video sources available
const switchCameraControl =
availableDeviceIds && availableDeviceIds.length >= 2 && !isRecording ? (
-
+ switchCameraViewElement ? (
+
+ {switchCameraViewElement}
+
+ ) : (
+
+ )
) : null
return (
diff --git a/src/video-recorder.stories.js b/src/video-recorder.stories.js
index ef2f661..ffa1717 100644
--- a/src/video-recorder.stories.js
+++ b/src/video-recorder.stories.js
@@ -36,6 +36,7 @@ const actionLoggers = {
onRecordingComplete: handleRecordingComplete,
onOpenVideoInput: action('onOpenVideoInput'),
onStopReplaying: action('onStopReplaying'),
+ onSwitchCamera: action('onSwitchCamera'),
onError: action('onError')
}
@@ -115,3 +116,35 @@ stories.add(
/>
)
)
+
+stories.add('with custom element used for switch camera view button', () => (
+
+
+
+ Switch
+
+
+ }
+ {...actionLoggers}
+ />
+))