Add p5.record example

[jamesrweb]

Related Issue

Fixes #519

PR Type

• 🐛 Bug Fix
• ✨ New Feature
• 🔨 Code Refactor
• 📝 Documentation Update
• 🧪 Test Update
• 🔧 Build/CI Update
• 🧹 Chore
• ⏪ Revert

Description

Adds an example of how to use p5.record with the wrapper.

Proposed Changes

• Add a new example sketch
• Update the existing html template to show the play, pause, stop and resume buttons when using the p5.record example
• Updated project dependencies

How Has This Been Tested?

• Unit Tests
• Integration Tests
• Manual Testing (please describe)

Screenshots/Recordings

Recording.1.webm

Breaking Changes

• Yes (please describe)
• No

Checklist

• My code follows the code style of this project
• I have updated the documentation accordingly
• I have added tests to cover my changes
• All new and existing tests passed
• My changes generate no new warnings

Additional Notes

N / A

[github-actions]

Coverage report for commit: e1c6d99
File: ./coverage/clover.xml

Cover ┌─────────────────────────┐ Freq.
   0% │ ░░░░░░░░░░░░░░░░░░░░░░░ │  0.0%
  10% │ ░░░░░░░░░░░░░░░░░░░░░░░ │  0.0%
  20% │ ░░░░░░░░░░░░░░░░░░░░░░░ │  0.0%
  30% │ ░░░░░░░░░░░░░░░░░░░░░░░ │  0.0%
  40% │ ░░░░░░░░░░░░░░░░░░░░░░░ │  0.0%
  50% │ ░░░░░░░░░░░░░░░░░░░░░░░ │  0.0%
  60% │ ░░░░░░░░░░░░░░░░░░░░░░░ │  0.0%
  70% │ ░░░░░░░░░░░░░░░░░░░░░░░ │  0.0%
  80% │ ░░░░░░░░░░░░░░░░░░░░░░░ │  0.0%
  90% │ ░░░░░░░░░░░░░░░░░░░░░░░ │  0.0%
 100% │ ███████████████████████ │ 100.0%
      └─────────────────────────┘
 *Legend:* █ = Current Distribution 

Summary - Lines: 100.00% | Methods: 100.00% | Branches: 91.30%

Files	Lines	Methods	Branches
src/components
ReactP5Wrapper.tsx	100.00%	100.00%	100.00%
ReactP5WrapperGuard.tsx	100.00%	100.00%	72.73%
ReactP5WrapperWithSketch.tsx	100.00%	100.00%	88.89%
src/constants
P5WrapperClassName.ts	100.00%	100.00%	100.00%
src/contracts
CanvasInstanceRef.ts	100.00%	100.00%	100.00%
InputProps.ts	100.00%	100.00%	100.00%
P5CanvasInstance.ts	100.00%	100.00%	100.00%
P5WrapperProps.ts	100.00%	100.00%	100.00%
P5WrapperPropsWithSketch.ts	100.00%	100.00%	100.00%
Sketch.ts	100.00%	100.00%	100.00%
SketchProps.ts	100.00%	100.00%	100.00%
WithChildren.ts	100.00%	100.00%	100.00%
Wrapper.ts	100.00%	100.00%	100.00%
WrapperRef.ts	100.00%	100.00%	100.00%
src
main.tsx	100.00%	100.00%	100.00%
src/utils
createCanvasInstance.ts	100.00%	100.00%	100.00%
logErrorBoundaryError.ts	100.00%	100.00%	100.00%
propsAreEqual.ts	100.00%	100.00%	100.00%
removeCanvasInstance.ts	100.00%	100.00%	100.00%
updateCanvasInstance.ts	100.00%	100.00%	100.00%
withoutKeys.ts	100.00%	100.00%	100.00%

_{🤖 comment via lucassabreu/comment-coverage-clover}