renderActions

[hjhimanshu01]

Hey, I basically want to remove the option or maybe customize useAnotherVideo option, please could you help me out how to perfectly use renderActions module?

[tessawiedmann]

I needed to customize some of the buttons as well, so I followed the following steps:

• added the defaults/render-actions.js file to my project, as a base to start making changes to
• removed imports for any of the other components from this package because they're not exported. I just used my own Button components and made sure to import those instead
• update renderContent to return my own components. This way I can customize the components but still use the provided functions like onStartRecording etc.

If you wanted to remove the option all together, just don't return anything in renderContent whenever a certain condition is met.

I specifically wanted to trigger onStartRecording with a button totally separate from the VideoRecorder component - lets call this separate button "beginButton" - so I added a display: none style to the button in render-actions, gave it an id of 'startButton' and programatically clicked it (document.getElementById('startButton').click()) in the onClick of beginButton. Not sure if this is the best way to do this, but it works for me!

edit: A better solution for what I was specifically trying to do was to use React refs

[raykanani]

@tessawiedmann curious on how using React refs would be implemented?

I'm running into the same use case (re: styling buttons). Was thinking about doing the same thing you mentioned (re: creating my own render-actions.js file and swapping component imports with my own components)

[tessawiedmann]

hi @raykanani If you want to just style buttons within the VideoRecorder component itself, render-actions is definitely the way to go. Import whatever components you want into your own version of react-actions, and then pass that into the renderActions prop on VideoRecorder

If you want to be able to trigger any of the handleXYZ methods from outside the VideoRecorder component, that's where React refs have come in handy. Here is some pseudo code of what my app looks like

<Main>
  <Video>
    <VideoRecorder
      ...
      ref={this.videoRecorderRef}
    />
  </Video>
</Main>

In the Video component, I have some public methods, like

public stopRecording() {
  this.videoRecorderRef.current.handleStopRecording();
}

This calls the handleStopRecording method from inside the VideoRecorder component

I follow the same ref pattern to connect the Video component and Main component (so inside Main, Video also has ref={this.videoRef}), so from any button or component in Main, I can pass around that ref and call this.videoRef.current.stopRecording(), which lets me fully customize what actions trigger what methods in VideoRecorder

Hopefully that helps!

[anubhutigupta2409]

I have made my own render-actions.js file with all the necessary imports, how to I replace this new file, in the VideoRecorder component?

[k-ahn]

Hi @tessawiedmann - i am trying to follow your instructions above, essentially just to achieve some minor styling tweaks to the existing UI.

I have:

• copied the /src/defaults folder (so including render-actions) into my react project
• added import Actions from '../functions/render-actions' to my component running React Video Recorder
• added renderActions={Actions} as a prop on VidoeRecorder

I then get Uncaught TypeError: t is not a function

Can you help - where am i going wrong?

[k-ahn]

Hi again @tessawiedmann - i've fixed it.

I think the t function must just apply some text formatting, but it's not obvious to me where or how this gets passed where the renderActions prop is added. I just removed references to it and all was fine.

Thanks for your instructions above, super helpful

[jvmontes]

Hi @tessawiedmann , thank you for sharing your solution.

I am experiencing a similar situation, and am wondering where I'm going wrong.

I created my own component VideoRecorderActions.tsx which is based off of the render-actions.js file referenced here.

This is how I am using that file:

<VideoRecorder
          onRecordingComplete={(videoBlob) => {
            // Do something with the video...
            console.log('videoBlob', videoBlob)
          }}
          timeLimit={VIDEO_RECORDER_TIME_LIMIT}
          renderActions={() => <VideoRecorderActions />}
        />

Within the renderContent method of the actions component, when I would expect it to show the "Turn my camera ON" button, I instead see nothing.

I added a console log and sure enough the first if statement is being hit:

    if (
      (!isInlineRecordingSupported && !isVideoInputSupported) ||
      thereWasAnError ||
      isConnecting ||
      isRunningCountdown
    ) {
      console.log("returning null");
      return null;
    }

My thought is that the following props are never being set:

const VideoRecorderActions = ({
  t,
  isVideoInputSupported,
  isInlineRecordingSupported,
  thereWasAnError,
  isRecording,
  isCameraOn,
  streamIsReady,
  isConnecting,
  isRunningCountdown,
  isReplayingVideo,
  countdownTime,
  timeLimit,
  showReplayControls,
  replayVideoAutoplayAndLoopOff,
  useVideoInput,

  onTurnOnCamera,
  onTurnOffCamera,
  onOpenVideoInput,
  onStartRecording,
  onStopRecording,
  onPauseRecording,
  onResumeRecording,
  onStopReplaying,
  onConfirm,
}) => {
  const renderContent = () => {
    ...
  };

  return (
    ...
  );
};

therefore causing the issue. Any idea on how to get the props from the default implementation? My only thought now would be to bring over the entire video-recorder implementation into my project, but I don't think that's the best approach.

Thanks in advance for any help!