[RNMobile] Add MVP for VideoPress block v5

[fluiddot]

Related PRs:

• Implement VideoPress metadata fetching wordpress-mobile/WordPress-iOS#20237

Fixes wordpress-mobile/gutenberg-mobile#5497.

Proposed changes:

The idea of this PR is to support VideoPress block v5 to address wordpress-mobile/gutenberg-mobile#5497 by reusing as much as possible the current implementation of the core Video block. Since the issue only affects iOS, this version will only be enabled on iOS for now. On Android, we'll keep using the core Video block.

The main changes introduced in this PR are:

• e850663: Enable v5 only on iOS.
• bd0eccc: Copy the logic of core Video block.
• 2ad6c42, bcb1cc8: Apply fixes to solve ESLint issues.
• 8473c45: Apply changes to the Video block and implement the VideoPress metadata fetch to allow playing private videos:
  • Set the attribute guid (i.e. VideoPress video ID) based if it can be inferred from the URL in src attribute. This is done upon block mounting or when the src attributes changes. The idea behind this logic is to automatically migrate from the core Video block format to VideoPress when using a VideoPress URL.
  • Fetch VideoPress video metadata to retrieve the token required for playing private videos. This will add the metadata_token query parameter in the video URL.

Other information:

• Have you written new tests for your changes, if applicable?
• Have you checked the E2E test CI results, and verified that your changes do not break them?
• Have you tested your changes on WordPress.com, if applicable (if so, you'll see a generated comment below with a script to run)?

Jetpack product discussion

N/A

Does this pull request change what data or activity we track or use?

N/A

Testing instructions:

Part of the testing requires to check the HTML produced by the block. Here are examples of the block's HTML by version:

Video block V5 - (Simple site/Self-hosted) [🍎 iOS]:

<!-- wp:video {"guid":"<VIDEOPRESS_GUID>","id":<MEDIA_ID>,"videoPressTracks":[],"videoPressClassNames":"wp-block-embed is-type-video is-provider-videopress"} -->
<figure class="wp-block-video wp-block-embed is-type-video is-provider-videopress">
    <div class="wp-block-embed__wrapper">
        https://videopress.com/v/<VIDEOPRESS_GUID>?resizeToParent=true&amp;cover=true&amp;preloadContent=metadata&amp;useAverageColor=true
    </div>
</figure>
<!-- /wp:video -->

Core Video block - Simple site [🤖 Android]:

<!-- wp:video {"id":<MEDIA_ID>} -->
<figure class="wp-block-video"><video controls
        src="https://videos.files.wordpress.com/<VIDEOPRESS_GUID/<FILENAME>"></video></figure>
<!-- /wp:video -->

Core Video block - Self-hosted [🍎 iOS/ 🤖 Android]:

<!-- wp:video {"id":<MEDIA_ID>} -->
<figure class="wp-block-video"><video controls src="https://<SITE_HOST>/wp-content/uploads/2023/03/<FILE_NAME>"></video></figure>
<!-- /wp:video -->

1 - Simple sites

Preparation:
Since the PR addresses the issue with private videos, we need to ensure to test using private videos.

1. Go to a Simple site.
2. Set the site visibility to Private.

NOTE: Alternatively, a public site can be used by changing the privacy of videos to Private after upload.

1.1 - 🍎 iOS - v5

Upload within the editor:

1. Open/create a post.
2. Add a Video block.
3. Upload a video from the local device.
4. Wait for the upload to finish.
5. Observe that the video is added to the block and can be played.
6. Switch to HTML mode and observe that the block's HTML matches the format Video block V5 referenced above.
7. Preview the post and observe that video can be played using the VideoPress player.

Upload outside the editor:

1. Open/create a post.
2. Add a Video block.
3. Upload a video from the local device.
4. Before the upload finish, leave the editor and save the post.
5. Wait for the upload to finish in the Post list screen.
6. Open the post again.
7. Observe that the video is added to the block and can be played.
8. Switch to HTML mode and observe that the block's HTML matches the format Video block V5 referenced above.
9. Preview the post and observe that video can be played using the VideoPress player.

Take a video:

1. Open/create a post.
2. Add a Video block.
3. Take a video and upload it.
4. Wait for the upload to finish.
5. Observe that the video is added to the block and can be played.
6. Switch to HTML mode and observe that the block's HTML matches the format Video block V5 referenced above.
7. Preview the post and observe that video can be played using the VideoPress player.

Insert from Media library:

1. Open/create a post.
2. Add a Video block.
3. Insert a video from the Media library.
4. Observe that the video is added to the block and can be played.
5. Switch to HTML mode and observe that the block's HTML matches the format Video block V5 referenced above.
6. Preview the post and observe that video can be played using the VideoPress player.

Replace video:

1. Follow one of the above test cases to add a Video block.
2. Replace the video with a different source.
3. Observe that the video is added to the block and can be played.
4. Switch to HTML mode and observe that the block's HTML matches the format Video block V5 referenced above.
5. Preview the post and observe that video can be played using the VideoPress player.

Transform block:

1. Follow one of the above test cases to add a Video block.
2. Transform the block to:
   • Columns
   • Cover (Video source should point to the attachment URL)
   • File (File URL should point to the attachment URL)
   • Group
   • Media & Text (Video source should point to the attachment URL)
3. Observe that the block transforms as expected.
4. Switch to HTML mode and observe that the block's HTML matches the block transform.

NOTE: When the post is saved, the src attribute is removed from the block. This means that transforming the block into Cover/File/Media & Text will result in an empty block.

1.2 - 🤖 Android - core Video block

Follow the same test cases of iOS, but after adding the video check follow these steps:

• Switch to HTML mode and observe that the block's HTML matches the format Core Video block - Simple site referenced above.
• Observe that the video can be played using the native video player.

2 - Self-hosted sites with Jetpack

Preparation - attachment and VideoPress videos:
Once VideoPress is enabled, all video uploads will use VideoPress. In order to test the block, it's important to also use videos uploaded to the site.

1. Go to the Media screen.
2. Upload a video.

Preparation - private videos:
Similar to Simple site, we need to ensure to test using private videos. However, since self-hosted sites can't be private, we need to enable video privacy:

1. Create a self-hosted site (e.g. Jurassic ninja site)
2. Connect the site to Jetpack.
3. Go to "Jetpack -> My Jetpack" and enable VideoPress.
4. Go to "Jetpack -> VideoPress" and enable Video Privacy by checking "Settings - Video Privacy: Restrict views to members of this site".

NOTE: Alternatively, the video privacy can be changed on each video via editing video details after upload.

2.1 - 🍎 iOS - v5

NOTE: Free users can only have one video in VideoPress, so keep this in mind when testing. In case you already uploaded a video, you can delete it and upload a new one. Alternatively, you can purchase the VideoPress plan to have unlimited uploads.

Upload within the editor - success:

1. Follow the same steps as "Simple sites - Upload within the editor".

Upload within the editor - error:

1. After already uploading a video.
2. Follow the same steps as "Simple sites - Upload within the editor".
3. Observe that the video is not uploaded and an error is shown.

Upload outside the editor - success:

1. Follow the same steps as "Simple sites - Upload outside the editor".

Upload outside the editor - error:

1. After already uploading a video.
2. Follow the same steps as "Simple sites - Upload outside the editor".
3. Observe that the video is not uploaded and an error is shown.

Take a video:

1. Follow the same steps as "Simple sites - Take a video".

Insert from Media library - VideoPress video:

1. Open/create a post.
2. Add a Video block.
3. Insert a video from the Media library. Select a video that was uploaded to VideoPress.
4. Observe that the video is added to the block and can be played.
5. Switch to HTML mode and observe that the block's HTML matches the format Video block V5 referenced above.
6. Preview the post and observe that video can be played using the VideoPress player.

Insert from Media library - Attachment:

1. Upload a video via the Media screen.
2. Open/create a post.
3. Add a Video block.
4. Insert a video from the Media library. Select a video that was uploaded to the site, not VideoPress.
5. Observe that the video is added to the block and can be played.
6. Switch to HTML mode and observe that the block's HTML matches the format Core Video block - Self-hosted referenced above.
7. Preview the post and observe that video can be played using the native player.

Replace video:

1. Follow one of the above test cases to add a Video block.
2. Replace the video with a different source.
3. Observe that the video is added to the block and can be played.
4. Switch to HTML mode and observe that the block's HTML matches the format Video block V5/Core Video block - Self-hosted* referenced above, depending on the video selected.
5. Preview the post and observe that video can be played using the VideoPress/native player, depending on the video selected.

Transform block:

1. Follow the same steps as "Simple sites - Transform block".

2.2 - 🤖 Android - core Video block

Follow the same test cases of iOS, but after adding the video check follow these steps:

• Switch to HTML mode and observe that the block's HTML matches the format Core Video block - Simple site referenced above.
• Observe that the video can be played using the native video player.

3 - Self-hosted sites without Jetpack

VideoPress is only available with Jetpack, so in all test cases we should check that the block's format is Core Video block - Self-hosted.

[github-actions]

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

• ✅ Include a description of your PR changes.
  
• ⚠️ All commits were linted before commit.
  
• ✅ Add a "[Status]" label (In Progress, Needs Team Review, ...).
  
• ✅ Add testing instructions.
  
• ✅ Specify whether this PR includes any changes to data or privacy.
  
• ✅ Add changelog entries to affected projects
  

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

---

The e2e test report can be found here. Please note that it can take a few minutes after the e2e tests checks are complete for the report to be available.

---

Once your PR is ready for review, check one last time that all required checks (other than "Required review") appearing at the bottom of this PR are passing or skipped.
Then, add the "[Status] Needs Team review" label and ask someone from your team review the code.
Once you’ve done so, switch to the "[Status] Needs Review" label; someone from Jetpack Crew will then review this PR and merge it to be included in the next Jetpack release.

---

Jetpack plugin:

• Next scheduled release: April 4, 2023.
• Scheduled code freeze: March 28, 2023.

[github-actions]

Are you an Automattician? You can now test your Pull Request on WordPress.com. On your sandbox, run

bin/jetpack-downloader test jetpack rnmobile/support-videopress-v5

to get started. More details: p9dueE-5Nn-p2

[github-actions]

This PR has been marked as stale. This happened because:

• It has been inactive in the past 3 months.
• It hasn’t been labeled `[Pri] BLOCKER`, `[Pri] High`, etc.

No further action is needed. But it's worth checking if this PR has clear testing instructions, is it up to date with trunk, and it is still valid. Feel free to close this PR if you think it's not valid anymore — if you do, please add a brief explanation.

[github-actions]

This PR has been automatically closed as it has not been updated in some time. If you want to resume work on the PR, feel free to restore the branch and reopen the PR.