fix: bundle video in app to prevent crash when not available (2nd attempt)

[NicolasMassart]

Development & PR Process

1. Follow MetaMask Mobile Coding Standards
2. Add release-xx label to identify the PR slated for a upcoming release (will be used in release discussion)
3. Add needs-dev-review label when work is completed
4. Add needs-qa label when dev review is completed
5. Add QA Passed label when QA has signed off

Important

This PR is the second attempt to push this change as the previous one #5886 failed because of an unexpected side effect and required revert, see #5940
This new one takes the side effect into account, see description bellow.

Description

Make the SRP video bundled in the app instead of retrieved from Github repos.
Have the subtitles embedded in the video, removing the need to load them from an external source.

1. What is the reason for the change?
App crashed when video player tried to load the remote video and remote was not available (or network down or anything)

2. What is the improvement/solution?

• Bundling the video in the app to prevent crash when remote not available while still keeping it in the source repo with same name as the previous one for compatibility with currently in production apps
• Added readme in video folder to explain and warn others.
• Keep current subtitles files in the same location for compatibility with currently in production apps
• Embed subtitles in the video directly and select track using the language 2 letters code,
• Reduced video size from 5.7Mb to 2Mb with ffmpeg 2 passes encoding (including subtitles tracks).
• Created an ffmpeg encoding and subtitles embedding script in scripts folder if we need to regenerate the video (in case of subtitle change, video update, ...)

The video is displayed by default on its original format on portrait mobile, meaning this video is most of the time around 5x3cm, very hard to see the quality diff when not really looking for it. Fullscreen makes it a bit more visible though.
The source video is still in the repos (but not bundled in the app) and the ffmpeg script allows to compress with higher bitrates if requested (change variables in the script).

Source video

https://github.com/MetaMask/metamask-mobile/raw/471_make_SRP_video_embeded_in_app/app/videos/recovery-phrase-source.mp4

Compressed video with embedded subs

https://github.com/MetaMask/metamask-mobile/raw/471_make_SRP_video_embeded_in_app/app/videos/recovery-phrase.mp4

App size impact

The app size is only 2 additional Mb for the video. Makes it around 27.8Mb for iOS and 274.7Mb for Android.

Issue

Relates to MetaMask/mobile-planning#471
fixes #5497

Testing

Simulator.Screen.Recording.-.iPhone.11.Pro.-.2023-03-15.at.14.12.23.mov

• Video testing has been done manually as no e2e exists to test the video and previous attempts to handle the player in e2e failed.
• retro compatibility tests: due to the revert, we add a step to check on currently in prod apps that the video is not broken.

Here are the tests done:

• No network at all (plane mode) as required in issue scenario GIVEN: User has NO access to internet (airplane mode): the app has a system preventing it to be used and requires the user to turn network on, so not relevant.
• Slow network: because video and subtitles are now bundled in the app, none is impacted.
• Tested video from the multiple places it plays in the app: onboarding, settings.
• Tested with the previous version of app (before change in code to have bundled video) that the video and subs still work when path points to this PR branch 😓 making sure the name and path of the video and subtitles are ok (using console logs) and that it will still work for legacy SRP video code.

   LOG  video_source_uri https://github.com/MetaMask/metamask-mobile/blob/471_make_SRP_video_embeded_in_app/app/videos/recovery-phrase.mp4?raw=true
   LOG  getSubtitleUri https://github.com/MetaMask/metamask-mobile/blob/471_make_SRP_video_embeded_in_app/app/videos/subtitles/secretPhrase/subtitles-en.vtt?raw=true
  ...
   LOG  video_source_uri https://github.com/MetaMask/metamask-mobile/blob/471_make_SRP_video_embeded_in_app/app/videos/recovery-phrase.mp4?raw=true
   LOG  getSubtitleUri https://github.com/MetaMask/metamask-mobile/blob/471_make_SRP_video_embeded_in_app/app/videos/subtitles/secretPhrase/subtitles-de.vtt?raw=true
  ...
   LOG  video_source_uri https://github.com/MetaMask/metamask-mobile/blob/471_make_SRP_video_embeded_in_app/app/videos/recovery-phrase.mp4?raw=true
   LOG  getSubtitleUri https://github.com/MetaMask/metamask-mobile/blob/471_make_SRP_video_embeded_in_app/app/videos/subtitles/secretPhrase/subtitles-hi.vtt?raw=true
  

Test artifacts

• QA builds available on Bitrise public install pages:
  • Android QA build 6389 (apk)
  • iOS QA build 6390 (ipa)

Checklist

• There is a related GitHub issue
• Tests are included if applicable
• Any added code is fully documented

[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.

[sethkfman]

Minor comments

[Cal-L]

LGTM

[Andepande]

• Tested on bitrise with IOS & Android devices
• Video together with subtitles load fine even when network is throttled
• Verified video loads correctly with appropriate subtitles in different Languages [en, es, hi]
• Verified with @NicolasMassart production issue that occurred on previous merge has been rectified.