Add Video Tracks Support to VideoPress Block #21578

roundhill · 2021-10-28T19:35:36Z

Adds support for uploading .vtt files to add captions/subtitles to a VideoPress video. Because of the way VideoPress is embedded with iframes, we need to host and serve the .vtt files from wp.com to avoid CORS issues.

When a track is selected, it will get uploaded to wp.com and attached to the video. The video player will fetch the tracks data from the API video endpoint and load the tracks into the UI. Most of this code is from the core video block's tracks component, with some tweaks added to support the management of the tracks via the API.

Screenshot:

Testing instructions:

Add a new video (or choose an old one) to the block editor, click on the captions button, and upload a new track. Only .vtt files should be allowed to be selected and uploaded.
You can add a type, source language and label. Leaving them blank should default to English, en, and subtitles.
The track should upload and you should return to the main list.
Publish the post and watch the video. Your track(s) should be selectable in the player.
Try deleting tracks, they should be removed from the list and no longer show as an option if you refresh the player.
When uploading a track, try violating one of the form field requirements, for example the Source language field can't be larger than 5 characters. You should see an error message at the bottom of the component.
Add the same video to another block, it should fetch the track data form the api and you should see them in the tracks list.
Take note of the url for a video track (Look for tags when you view source) If you delete a video from the media library, the tracks files should also be deleted and 404.

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

No.

matticbot · 2021-10-28T19:35:41Z

Caution: This PR has changes that must be merged to WordPress.com
Hello roundhill! These changes need to be synced to WordPress.com - If you 're an a11n, please commandeer and confirm D69242-code works as expected before merging this PR. Once this PR is merged, please commit the changes to WP.com. Thank you!
This revision will be updated with each commit to this PR

github-actions · 2021-10-28T19:36:50Z

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: December 7, 2021.
Scheduled code freeze: November 30, 2021.

@jgcaruso

…n this context - it is only available in recent Gutenberg releases. h/t @jgcaruso

jgcaruso

The code looks good and works as described! All add/delete scenarios worked as expected and UI updates all appear to occur correctly.

Might be worth getting a second set of eyes on it since it is so large, but the new portions of tracks-editor.js looked OK to me.

jgcaruso · 2021-11-01T21:01:12Z

projects/plugins/jetpack/extensions/blocks/videopress/edit.js

@@ -80,6 +81,8 @@ const VideoPressEdit = CoreVideoEdit =>
 			const { guid } = this.props.attributes;
 			if ( ! guid ) {
 				await this.setGuid();
+			} else {
+				this.setTracks( guid );


It looks like setTracks always gets called inside setGuid, is this second call still necessary?

I think so, as I'd like it to still fetch the tracks even if the guid is in the attributes - in case tracks were added in a separate block for the same video.

projects/plugins/jetpack/extensions/blocks/videopress/editor.scss

jgcaruso · 2021-11-01T21:32:24Z

projects/plugins/jetpack/extensions/blocks/videopress/variables.scss

+$grid-unit-05: 0.5 * $grid-unit;	// 4px
+$grid-unit-10: 1 * $grid-unit;		// 8px
+$grid-unit-15: 1.5 * $grid-unit;	// 12px


nit: whitespace doesn't match

Cleaned up some whitespace issues.

projects/plugins/jetpack/extensions/blocks/videopress/editor.scss

projects/plugins/jetpack/extensions/blocks/videopress/tracks-editor.js

@jeherve

…styles. h/t @jeherve.

…n for easier readability in render()

* Translators help comment added to `Kind` string. * Change a string to use `sprintf` for easier translation.

jgcaruso · 2021-11-10T19:40:01Z

The new code changes look good, and manual testing continues to work as expected! Leaving unapproved to wait for a 2nd team reviewer, but otherwise I'm happy with it.

roundhill · 2021-11-11T18:45:13Z

Just noting here that we're investigating an issue where the tracks don't save via the new API endpoint in production. If you still want to test this functionality, it should work if you sandbox public-api.wordpress.com.

pgk

Tested well with a sandboxed public-api. Some wee things to address, other than that good to go.

pgk · 2021-11-12T13:03:21Z

projects/plugins/jetpack/extensions/blocks/videopress/edit.js

@@ -80,6 +81,8 @@ const VideoPressEdit = CoreVideoEdit =>
 			const { guid } = this.props.attributes;
 			if ( ! guid ) {
 				await this.setGuid();


is there a chance that this call will throw? Should we wrap in a try/catch?

From looking at setGuid, I think it doesn't throw, but it does fall back to the core block if something goes wrong. So I think safe to leave as-is.

pgk · 2021-11-12T13:05:06Z

projects/plugins/jetpack/extensions/blocks/videopress/edit.js

+				return;
+			}
+
+			await apiFetch( {


Does this throw if the request fails? In async/await the catch portion becomes an exception we should probably handle.

pgk · 2021-11-12T13:06:06Z

projects/plugins/jetpack/extensions/blocks/videopress/edit.js

+				url: `https://public-api.wordpress.com/rest/v1.1/videos/${ guid }`,
+				credentials: 'omit',
+				global: true,
+			} ).then( videoInfo => {


if we use async/await then the then() part is not needed, we can instead do const videoInfo = await apiFetch(...);

On the other hand, since this code seems pretty Promise-based, we can just go all in and: 1. get rid of await 2. add catch/finally to the promise.

Updated in bb30f90! I don't think we need to take any action in a catch or finally in this case. If we don't get the video info back, then we simply won't set the tracks data.

roundhill · 2021-11-15T17:44:22Z

Just noting here that we're investigating an issue where the tracks don't save via the new API endpoint in production. If you still want to test this functionality, it should work if you sandbox public-api.wordpress.com.

This is fixed now, test away! 😉

pgk

tested well, both on sandbox and prod!

…o-tracks

jeherve

This looks good to me! 🚢

github-actions · 2021-11-24T18:43:58Z

Great news! One last step: head over to your WordPress.com diff, D69242-code, and commit it.
Once you've done so, come back to this PR and add a comment with your changeset ID.

Thank you!

roundhill · 2021-11-24T19:54:02Z

Deployed to wp.com: r235597-wpcom

# By Jeremy Herve (5) and others # Via GitHub * master: (26 commits) Colors: update Primary green reference to match latest brand book (#21741) JS Connection: Moves registerSite logic to the store (#21732) Search: Add essential scaffolding for package (#21814) Search: avoid registering the widget when the module is not active (#21588) Add Video Tracks Support to VideoPress Block (#21578) Add deprecated to VideoPress block (#21802) Admin Menu: Make API tests compatible with WPCOM (#21850) External Media: Short-circuit requests earlier in the stack (#21854) Add Busy State to License Activation Flow Button (#21861) Fixed an issue with screen resolutions of under 783px that caused the content to not be properly displayed when the nav-unification is expanded on wp-admin. (#21869) E2E tests: migrate from Jest to Playwright runner (#21848) Update reCAPTCHA constants to match Google's Verbage (#12289) JITM: Sideload Jetpack Boost functionality (#21860) Connection: properly add GET-parameters for the `fetchAuthorizationUrl` API call (#21750) License Flow: Assorted Styling Improvements (#21859) JITM: Sideload Jetpack Backup (#21719) Widget Visibility: Apply widget filtering to customizer preview (#21505) jetpack: Avoid generating unused JS for static-site-generator assets (#21789) Nav Unification: Support absolute URLs in upsell nudges (#21821) RePublicize: Enable the block editor UI by default (#21855) ... # Conflicts: # projects/plugins/boost/tests/e2e/lib/env/prerequisites.js # projects/plugins/boost/tests/e2e/lib/setupTests.js

roundhill added 2 commits October 28, 2021 13:27

Initial commit of new videopress tracks management UI.

7291421

Adding changelog.

66d0e38

roundhill added [Feature] VideoPress A feature to help you upload and insert videos on your site. [Status] In Progress [Block] VideoPress labels Oct 28, 2021

matticbot added Touches WP.com Files labels Oct 28, 2021

github-actions bot added the [Plugin] Jetpack Issues about the Jetpack plugin. https://wordpress.org/plugins/jetpack/ label Oct 28, 2021

roundhill added 2 commits October 29, 2021 12:41

Added support for apiFetch calls from wp.com.

d73e357

Remove duplicate apiFetch call

90b4d43

roundhill requested review from jgcaruso, thedebian and pgk October 29, 2021 21:50

roundhill added [Status] Needs Review To request a review from fellow Jetpack developers. Label will be renamed soon. [Status] Needs Team Review and removed [Status] In Progress [Status] Needs Review To request a review from fellow Jetpack developers. Label will be renamed soon. labels Oct 29, 2021

roundhill added 2 commits October 29, 2021 15:56

[not verified] Merge branch 'master' into add/videopress-video-tracks

57714b6

Removed getFilename since we don't need to use the src property i…

3003771

…n this context - it is only available in recent Gutenberg releases. h/t @jgcaruso

roundhill changed the title ~~(WIP) Add Video Tracks Support to VideoPress Block~~ Add Video Tracks Support to VideoPress Block Nov 1, 2021

Use isLink prop instead of variant to support older Gutenbergs.

eefd566

jgcaruso previously approved these changes Nov 1, 2021

View reviewed changes

Use isSecondary prop for Save button.

5cc245d

roundhill dismissed jgcaruso’s stale review via 5cc245d November 2, 2021 01:36

roundhill added 2 commits November 3, 2021 11:33

Added check for existing track, and show an error if so.

84ff4f6

Cleaned up some whitespace issues.

[not verified] Merge branch 'master' into add/videopress-video-tracks

fdceff2

jeherve reviewed Nov 3, 2021

View reviewed changes

Import the base gutenberg styles so we don't have to have duplicated …

129e285

…styles. h/t @jeherve.

roundhill added 3 commits November 3, 2021 14:41

Remove autofocus, and moved save button click to an extracted functio…

0e27b4b

…n for easier readability in render()

* Added help label to file upload that explains which files are allowed.

9849bd0

* Translators help comment added to `Kind` string. * Change a string to use `sprintf` for easier translation.

[not verified] Merge branch 'master' into add/videopress-video-tracks

c0883c5

pgk suggested changes Nov 12, 2021

View reviewed changes

Changed setTracks to use a Promise instead of async/await.

bb30f90

roundhill requested a review from pgk November 15, 2021 17:44

Merge branch 'master' into add/videopress-video-tracks

09bf973

jeherve assigned roundhill Nov 16, 2021

pgk approved these changes Nov 18, 2021

View reviewed changes

Merge branch 'master' into add/videopress-video-tracks

340028f

roundhill added [Status] Needs Review To request a review from fellow Jetpack developers. Label will be renamed soon. and removed [Status] Needs Team Review labels Nov 23, 2021

jeherve added this to the jetpack/10.4 milestone Nov 24, 2021

Merge remote-tracking branch 'origin/master' into add/videopress-vide…

62149e9

…o-tracks

jeherve approved these changes Nov 24, 2021

View reviewed changes

roundhill merged commit 5e20900 into master Nov 24, 2021

roundhill deleted the add/videopress-video-tracks branch November 24, 2021 18:42

github-actions bot removed the [Status] Ready to Merge Go ahead, you can push that green button! label Nov 24, 2021

jeherve removed the [Status] Needs Testing We need to add this change to the testing call for this month's release label Nov 30, 2021

jeherve mentioned this pull request Jan 10, 2022

VideoPress closed caption support #6350

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Video Tracks Support to VideoPress Block #21578

Add Video Tracks Support to VideoPress Block #21578

roundhill commented Oct 28, 2021 •

edited

Loading

matticbot commented Oct 28, 2021

github-actions bot commented Oct 28, 2021 •

edited

Loading

jgcaruso left a comment

jgcaruso Nov 1, 2021

roundhill Nov 3, 2021

jgcaruso Nov 1, 2021

jgcaruso commented Nov 10, 2021

roundhill commented Nov 11, 2021

pgk left a comment

pgk Nov 12, 2021 •

edited

Loading

roundhill Nov 12, 2021

pgk Nov 12, 2021

pgk Nov 12, 2021

roundhill Nov 12, 2021

roundhill commented Nov 15, 2021

pgk left a comment

jeherve left a comment

github-actions bot commented Nov 24, 2021

roundhill commented Nov 24, 2021

Add Video Tracks Support to VideoPress Block #21578

Add Video Tracks Support to VideoPress Block #21578

Conversation

roundhill commented Oct 28, 2021 • edited Loading

Testing instructions:

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

matticbot commented Oct 28, 2021

github-actions bot commented Oct 28, 2021 • edited Loading

jgcaruso left a comment

Choose a reason for hiding this comment

jgcaruso Nov 1, 2021

Choose a reason for hiding this comment

roundhill Nov 3, 2021

Choose a reason for hiding this comment

jgcaruso Nov 1, 2021

Choose a reason for hiding this comment

jgcaruso commented Nov 10, 2021

roundhill commented Nov 11, 2021

pgk left a comment

Choose a reason for hiding this comment

pgk Nov 12, 2021 • edited Loading

Choose a reason for hiding this comment

roundhill Nov 12, 2021

Choose a reason for hiding this comment

pgk Nov 12, 2021

Choose a reason for hiding this comment

pgk Nov 12, 2021

Choose a reason for hiding this comment

roundhill Nov 12, 2021

Choose a reason for hiding this comment

roundhill commented Nov 15, 2021

pgk left a comment

Choose a reason for hiding this comment

jeherve left a comment

Choose a reason for hiding this comment

github-actions bot commented Nov 24, 2021

roundhill commented Nov 24, 2021

roundhill commented Oct 28, 2021 •

edited

Loading

github-actions bot commented Oct 28, 2021 •

edited

Loading

pgk Nov 12, 2021 •

edited

Loading