VideoPress: Replace video uploads in Gutenberg

[mmtr]

Fixes #11194

Changes proposed in this Pull Request:

Load an API fetch middleware in the block editor that overrides the video uploads in Gutenberg so they are uploaded against the WP.com API media endpoint and thus transcoded by VideoPress.

Is this a new feature or does it add/remove features to an existing part of Jetpack?

Improve VideoPress (paYKcK-f0-p2, p9dueE-xm-p2).

Testing instructions:

• Apply D33658-code and sandbox the API.
• Apply this branch to your JP dev environment.
• Start from a Jetpack site with an active Professional upgrade.
• Go to Jetpack > Settings in your dashboard, and enable the VideoPress feature.
• Load the block editor.
• Insert a video block.
• Upload a video using the "Upload" button (not the "Media Library" one).
• Check the VideoPress player is rendered on the editor.
• Publish the post.
• Check the VideoPress player is rendered on the published view.
• Deactivate VideoPress.
• Load the block editor again.
• Make sure the gutenberg-video-upload.js script is not enqueued.
• Sandbox a WP.com site and load the block editor.
• Make sure the gutenberg-video-upload.js script is not enqueued on the WP.com site.

Proposed changelog entry for your changes:

VideoPress: Replace video uploads in Gutenberg

[matticbot]

Caution: This PR has changes that must be merged to WordPress.com
Hello mmtr! These changes need to be synced to WordPress.com - If you 're an a11n, please commandeer, review, and approve D33658-code before merging this PR. Thank you!

[mmtr]

This is not working currently due to a CORS error when making the request to the WP.com media endpoint:

Access to fetch at 'https://public-api.wordpress.com/rest/v1.1/sites/<SITE_ID>/media/new?_locale=user' from origin '<JP_SITE>' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Credentials' header in the response is 'false' which must be 'true' when the request's credentials mode is 'include'.

[jetpackbot]

Thank you for the great PR description!

When this PR is ready for review, please apply the [Status] Needs Review label. If you are an a11n, please have someone from your team review the code if possible. The Jetpack team will also review this PR and merge it to be included in the next Jetpack release.

Scheduled Jetpack release: November 5, 2019.
Scheduled code freeze: October 29, 2019

Generated by 🚫 dangerJS against 813a173

[mmtr]

This is not working currently due to a CORS error when making the request to the WP.com media endpoint:

Access to fetch at 'https://public-api.wordpress.com/rest/v1.1/sites/<SITE_ID>/media/new?_locale=user' from origin '<JP_SITE>' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Credentials' header in the response is 'false' which must be 'true' when the request's credentials mode is 'include'.

Solved with fe79d63 but now we have another CORS error caused by the X-WP-Nonce header:

Access to fetch at 'https://public-api.wordpress.com/rest/v1.1/sites/<SITE_ID>/media/new?_locale=user' from origin '<JP_SITE>' has been blocked by CORS policy: Request header field x-wp-nonce is not allowed by Access-Control-Allow-Headers in preflight response.

[mmtr]

Access to fetch at 'https://public-api.wordpress.com/rest/v1.1/sites/<SITE_ID>/media/new?_locale=user' from origin '<JP_SITE>' has been blocked by CORS policy: Request header field x-wp-nonce is not allowed by Access-Control-Allow-Headers in preflight response.

This has been solved in D33658-code by allowing the X-WP-Nonce header in the CORS requests.

[mmtr]

The request is returning now a 400 error because the endpoint expects the data in a different format, so the middleware should change how the file is included in the payload.
Gutenberg also expects the returned data by the endpoint in a different format so the middleware should parse and format the response.

[kwight]

The request is returning now a 400 error because the endpoint expects the data in a different format, so the middleware should change how the file is included in the payload.

FWIW, yep, this is what I get (with all of the expected pieces already in place) 👍

[matticbot]

mmtr, Your synced wpcom patch D33658-code has been updated.

[matticbot]

mmtr, Your synced wpcom patch D33658-code has been updated.

[matticbot]

mmtr, Your synced wpcom patch D33658-code has been updated.

[mmtr]

The request is returning now a 400 error because the endpoint expects the data in a different format, so the middleware should change how the file is included in the payload.
Gutenberg also expects the returned data by the endpoint in a different format so the middleware should parse and format the response.

Solved both problems in 7682948 and ff0194b, so this is now ready to review.

[jeherve]

Edit: my bad, I forgot to apply the related diff. I'll try again, but I'll read the instructions this time, sorry!

I get this error when I try to upload a video:

Access to fetch at 'https://public-api.wordpress.com/rest/v1.1/sites/164776955/media/new?_locale=user' from origin 'http://my.localsite' has been blocked by CORS policy: Request header field x-wp-nonce is not allowed by Access-Control-Allow-Headers in preflight response.
Uncaught (in promise) TypeError: Cannot read property 'code' of undefined
    at http://my.localsite/wp-content/plugins/gutenberg/build/api-fetch/index.js?ver=e20b1c8bba67f2198e1cfae53eac80c5:formatted:365

I don't get any feedback in the editor though; everything happens in the console and the editor seems to be stuck on uploading:

[jeherve]

This works a lot better when I follow instructions! :)

I would have a remark to load a minified file when possible.

[matticbot]

mmtr, Your synced wpcom patch D33658-code has been updated.

[jeherve]

This looks good to me, it tests well. That's improving the VideoPress experience so much, too ❤️

[gwwar]

Nice work @mmtr! This tests well with both the upload button and drag-and-drop uploads. I also verified that the script was not loaded when VideoPress was disabled in settings.