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