Fix blank consent recordings

[becky-gilbert]

Fixes #387

Summary

This PR fixes the problem with blank consent videos with the following changes:

video-consent

1. Disable the 'start recording' button when the video consent page first loads, so that it only becomes enabled when the recorder is ready.
2. Require the 'recorderReady' property to be true before enabling the 'start recording' button.

video-assent

1. If trial recording is used, check if the recorder is ready when the trial loads. If so, show a (translated) 'please wait' message and wait until the recorder is actually ready to record before starting the trial.
2. Whenever the recorder is ready, either show the first consent page (if recordLastPage is true), or start recording and then trigger the first consent page after recording has started (if recordWholeProcedure is true).

Testing steps

I've done this testing locally on Firefox and Chrome. I will repeat these tests on staging/production once the code is reviewed.

video-consent

• Create a study that starts with a video consent frame (so that the recorder takes longer to initialize).
• As soon as the start recording button appears, immediately start clicking it and continue until the recording actually starts.
• After the recording starts, stop the recording, and then click the replay button. You should see the video replay on the page (not a black screen). You should not be able to continue through the study until you play the recording.

video-assent

record whole procedure

• Create a study that starts with a video assent frame (so that the recorder takes longer to initialize), with recordWholeProcedure: true.
• When the trial starts, there should be a 'please wait' message and the first consent page should not be visible. Once the recorder is ready, it should start recording, the 'please wait' message should not be visible, and the first consent page should be shown.

record last page

• Create a study that starts with a video assent frame (so that the recorder takes longer to initialize), with recordLastPage: true.
• When the trial starts, there should be a 'please wait' message and the first consent page should not be visible. Once the recorder is ready, the 'please wait' message should not be visible and the first consent page should be shown. On the last consent page, the recording should start.

no recording

• Create a study that starts with a video assent frame with no trial recording.
• The 'please wait' message should never be visible and the first consent page should be shown immediately.

session recording

• Create a study that starts with a start recording frame (so that the recorder takes longer to initialize), then a video assent frame with no trial recording, then an end recording frame.
• The recording set-up should be taken care of during the start recording frame, so that the recorder is ready when the video-assent trial begins.
• The 'please wait' message should never be visible and the first consent page should be shown immediately.

For all tests

• Check that there are no console errors, e.g. related to stopping the trial/session recording, and that the video is saved. There are console logs related to completing the video file upload, so that's probably sufficient.
• To prolong the recording set-up time, remove the video recording permissions for the site that are saved in your browser settings so that you're asked for recording permission when the page loads. The 'start recording' button should remain disabled until you after you give permission for the page to record.
• Repeat these tests in Chrome and Firefox.

Screenshots

Here's what video-consent looks like before the recorder is ready. (It's a little hard to tell, but the 'start consent recording' button is disabled.)

The browser permissions request is just there because I intentionally revoked the permissions to stop the recorder from being ready while I got a screenshot - if the permissions were already granted then they will not be requested again!

Here's what video-assent looks like when trial recording is used and the recorder is not ready.

The browser permissions request is just there because I intentionally revoked the permissions to stop the recorder from being ready while I got a screenshot - if the permissions were already granted then they will not be requested again!

[becky-gilbert]

@ianchandlercampbell oh sorry, I totally agree and I'm not actually requiring the user to re-approve permissions! I only disabled my own permissions for testing purposes, and so that the page stayed in the 'not ready to record' state for long enough for me to take a screenshot. The permissions will work exactly the same as before.

[becky-gilbert]

Hmm, I edited the PR description to include a lot more detail and screenshots, but for some reason my updates are gone :( I'll update it again ASAP to reflect what I've actually done.

[ianchandlercampbell]

Oh sorry @becky-gilbert I clearly read too fast! I see that's part of testing