New component: Video

[benlk]

Description of the Change

Adds a Video component to match Image, and a VideoControl component to simplify uploading and other aspects of the video.

Adds incomplete documentation for the new components.

Outstanding questions:

• [ ] Should this include (optional) controls for managing poster images?
• [ ] Should this include (optional) controls for uploading the semi-mandatory subtitle <track>? If so, this may need to be paired with PHP code allowing vtt files to be uploaded to WordPress. WordPress' core Video Block allows subtitles; we should borrow from their subtitle components where possible. https://wordpress.org/documentation/article/video-block/
• [ ] Should this include controls for autoplay, loop, muted, controls, and playsinline?
• [ ] Should this include (optional) controls for different video tracks in different resolutions? Or would a "different videos at different viewports" component be better done with a higher-level "multiple video" component with multiple VideoControls?
• [ ] Should this allow the programmer to list an array allowedTypes of specific MIME types that are allowed for upload, instead of defaulting to the wide-open "video" or the more-limited [ 'video/webm', 'video/mp4']?

Closes #220

How to test the Change

Testing suggestions are welcome.

• add the Video and VideoControl components to a block; make sure they work

Changelog Entry

Added - New feature Changed - Existing functionality Deprecated - Soon-to-be removed feature Removed - Feature Fixed - Bug fix Security - Vulnerability

Credits

Props @username, @username2, ...

Checklist:

• [x] I agree to follow this project's Code of Conduct.
• [ ] I have updated the documentation accordingly.
• [ ] I have added tests to cover my change.
• [ ] All new and existing tests pass.

[github-actions[bot]]

Size Change: +11.6 kB (+22%) 🚨

Total Size: 65.2 kB

Filename	Size	Change
dist/index.js	65.2 kB	+11.6 kB (+22%)	🚨

_{compressed-size-action}

[benlk]

One issue that has come up in testing of this component on a client project is that sometimes people may upload videos that are too large, either by resolution or by filesize. It would be good to have a way to warn if the uploaded video dimensions are too large, or the filesize is too large.

[cypress[bot]]

1 failed test on run #681 ↗︎

1

5

0

0

0

Details:

Merge branch 'feat/220-video-components' of github.com:10up/block-components int...
Project: 10up Block Components	Commit: df10f03ad9
Status: Failed	Duration: 01:46 💡
Started: Nov 15, 2023 6:39 PM	Ended: Nov 15, 2023 6:41 PM

  cypress/e2e/IconPicker.spec.js • 1 failed test

View Output Video

Test		Artifacts
IconPicker > allows the user to use the post picker to change an icon and displays it		Screenshots Video

Review all test suite changes for PR #225 ↗︎

[benlk]

Items to copy from the client project:

• [ ] changes to `Video
• [ ] and VideoControl
• [ ] PosterControl
• [ ] updated PHP partial
• [ ] WarnRequiredPoster

Items to consider adding:

• [ ] A [TracksEditor] component, perhaps as part of the VideoControl or a parent CompleteVideoControl