Feature/mp4 download

[interim17]

Problem

Users of Simularium want to download mp4 video. It's already marked closed, but this addresses #240

Approach

FrameRecorder class handles the frame by frame recording of the canvas. Aimed for a good separation of concerns: using recorder to just record; front end handles downloading, etc.

Viewport.tsx makes an instance of FrameRecorder and watches for a boolean flag, recording. recorder.onFrame() is called in the animate() loop to keep frame capture tightly coupled to scene updates.

Viewer.tsx stores recording in state, and defines onRecordedMovie for handling recorded the output.

RecordMovieComponent buttons and a print of recording duration, this can get fleshed out more if desired?

onCompletedRecording could also send other data if wanted, number of frames, total duration of frames, etc.

There was a bug that I discussed with @toloudis that I still don't fully understand, where the canvas reference would go stale and return blank frames after changing Simularium files. Instantiating a new VideoEncoder on each call of setup() fixed the problem, but I'm still curious why the old encoder went stale, as it doesn't receive a canvas reference at all...

To confirm:

• open a trajectory
• start recording, and alter playback in various ways (starting, stopping, using camera, zooming, changing colors)
• stop recording
• open a new trajectory and repeat steps
• see if the resulting videos download, match your session, and look good

[github-actions[bot]]

jest coverage report 🧪

Total coverage

Status	Category	Percentage	Covered / Total
🔴	Statements	40.51%	2044/5045
🔴	Branches	43.53%	845/1941
🔴	Functions	36.9%	417/1130
🔴	Lines	40.72%	1957/4805

Status of coverage: 🟢 - ok, 🟡 - slightly more than threshold, 🔴 - under the threshold

Show new covered files 🌑

### Coverage of new files | Status | Filename | Statements | Branches | Functions | Lines | | :----: | :--------------- | :--------- | :------- | :-------- | :------ | | 🔴 | FrameRecorder.ts | 29.62% | 33.33% | 25% | 29.48% | > Status of coverage: 🟢 - ok, 🟡 - slightly more than threshold, 🔴 - under the threshold

Show files with reduced coverage 🔻

### Reduced coverage | Status | Filename | Statements | Branches | Functions | Lines | | :----: | :------------- | :----------------- | :----------------- | :----------------- | :----------------- | | 🟡 | src | 75.21% | 69.09% | 44.18% (-1.05% 🔻) | 75.45% | | 🟡 | constants.ts | 78.94% (-3.41% 🔻) | 100% | 50% (-7.14% 🔻) | 77.77% (-3.48% 🔻) | | 🟡 | src/simularium | 60.51% (-1.77% 🔻) | 58.45% (-1.86% 🔻) | 49.01% | 61.39% (-1.86% 🔻) | | 🔴 | src/viewport | 15.38% | 11.26% | 15.78% | 14.92% | | 🔴 | index.tsx | 15.38% | 11.26% | 15.78% | 14.92% | > Status of coverage: 🟢 - ok, 🟡 - slightly more than threshold, 🔴 - under the threshold

[interim17]

Haven't tested locally but the code changes look good. Thank you for making edits!

Thanks for review! I do want to clean up the test-bed viewer a bit so I appreciate the push to do that right.