feat: improved video export function

[Raz-js]

Used @KarimBenn22's PR as a foundation for this PR

What I changed:

• Settings for higher quality recording output
• The button now resets after the video is exported

Note: I'm also planning on attempting to find a method to allow the recorder to identify iterations and start and stop based on them.

[vercel]

@Raz-js is attempting to deploy a commit to the Paper Design Team on Vercel.

A member of the Team first needs to authorize it.

[Grenish]

The code is looking good but there are still some minor bugs that might affect the app video export feature

[Grenish]

Not all browsers support vp9. Consider fallback

mimeType: MediaRecorder.isTypeSupported('video/webm;codecs=vp9') 
  ? 'video/webm;codecs=vp9' 
  : 'video/webm';

Also for the following code,

useEffect(() => {
    return () => {
        if (recordingRef.current) {
            recordingRef.current.stop();
        }
    };
}, []);

If the component unmounts mid-recording, this is helpful, but consider stopping the stopwatch too.

useEffect(() => {
    return () => {
        recordingRef.current?.stop();
        stopStopWatch();
    };
}, []);

[Grenish]

The code is pretty good and solid but there is one major bug that you might have not noticed. In the following code,

if (startTimeRef.current !== null) {
    const elapsedMS = Date.now() - startTimeRef.current;
    setTimeElapsed(Math.floor(elapsedMS / 1000));
}
setTimeElapsed((prev) => prev + 1);

You're updating timeElapsed twice:

1. Once using actual time difference
2. Once adding +1 manually

Below is the suggested fix for the code.

const updateTime = useCallback(() => {
    if (startTimeRef.current !== null) {
        const elapsedMS = Date.now() - startTimeRef.current;
        setTimeElapsed(Math.floor(elapsedMS / 1000));
    }
    rafRef.current = requestAnimationFrame(updateTime);
}, []);