fix: Use custom controls for iOS video (#7729)

[Cal-L]

Description

It was discovered that the video begins crashing the app for iOS 17.2+ physical devices. While there is no solution in the latest react-native-video package at the moment (TheWidlarzGroup/react-native-video#3329), we can patch it by removing the controls prop and temporarily use custom controls (a play/pause + mute controls). The tradeoff is that other features such as full screen and seeking will not be available on iOS.

Related issues

Fixes: #7729

Manual testing steps

1. Go to this page...

Screenshots/Recordings

Before

After

iOS 17.2 Interaction
https://github.com/MetaMask/metamask-mobile/assets/10508597/8976d5b7-d276-4834-9496-0ba8608e25e3

Video with play/pause + mute controls on settings
https://github.com/MetaMask/metamask-mobile/assets/10508597/492fb78d-3703-4714-bed1-8ddd7b631efa

Video with play/pause + mute controls on onboarding
https://github.com/MetaMask/metamask-mobile/assets/10508597/14780058-c595-4fb9-8aab-9987120c8126

Android remains the same
https://recordit.co/pTuloJmuIn

Pre-merge author checklist

• I’ve followed MetaMask Coding Standards.
• I've clearly explained what problem this PR is solving and how it is solved.
• I've linked related issues
• I've included manual testing steps
• I've included screenshots/recordings if applicable
• I’ve included tests if applicable
• I’ve documented my code using JSDoc format if applicable
• I’ve applied the right labels on the PR (see labeling guidelines). Not required for external contributors.
• I’ve properly set the pull request status:
  • In case it's not yet "ready for review", I've set it to "draft".
  • In case it's "ready for review", I've changed it from "draft" to "non-draft".

Pre-merge reviewer checklist

• I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
• I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[github-actions]

E2E test started on Bitrise: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/4eb79b2c-a839-47ff-974f-736bc47331a5
You can also kick off another Bitrise E2E smoke test by removing and re-applying the (Run Smoke E2E) label

[codecov-commenter]

Codecov Report

Attention: 17 lines in your changes are missing coverage. Please review.

Comparison is base (5aaf054) 34.97% compared to head (15850b0) 35.08%.
Report is 4 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #7737      +/-   ##
==========================================
+ Coverage   34.97%   35.08%   +0.10%     
==========================================
  Files        1034     1035       +1     
  Lines       27529    27544      +15     
  Branches     2298     2313      +15     
==========================================
+ Hits         9629     9664      +35     
+ Misses      17387    17360      -27     
- Partials      513      520       +7     

Files	Coverage Δ
app/components/Views/MediaPlayer/index.js	12.00% <5.55%> (-18.00%)	⬇️

... and 38 files with indirect coverage changes

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[tommasini]

Awesome work! LGTM, it would be cool to convert this to typescript and do an unit test for when the mute button is displayed if you have the time since this is a sev1

[sonarqubecloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

3.0% Coverage
0.0% Duplication

[chrisleewilcox]

Was not able to crash app on iPhone 12 iOS 16.2
https://recordit.co/4J2OvXKiau

[chrisleewilcox]

LGTM