Video block

[Tug]

Add support for Video block

[pinarol]

TO DO items to go publicly available:

• (First iteration)Make a basic video block that can upload & insert media - merged Video block (first iteration) #855
• UX/UI enhancements - Video block - UI/UX Enhancements #966 PR: [Mobile] Video block ui/ux enhancements WordPress/gutenberg#15551 merged
• Handle invalid html content resulting from the Jetpack plugin (more context available in the first iteration PR ☝️) - merged
• Remove the unregistration of video block

TODO items next:

• Update sidebar at: https://mobilegutenberg.wordpress.com to show that it is included in next version
• [Android] Video disappears from video block after turning off the device screen: Video disappears from video block after turning off device screen #974 <<not reproducible on every device
• Android only issue: there is a split second before the placeholder/uploading state shows, where the inner block collapses. Can we make sure the placeholder shows immediately, so there isn't a jump details here: Video block ui/ux enhancements #979 (comment) Opened issue to track this [Android] Video block - There is a split second before the placeholder/uploading state shows #1005
• Solve react-native-video bug about the poster. If you set a poster url then this happens: Poster and Video being displayed TheWidlarzGroup/react-native-video#1509 We have opened an issue to track it on our side: Poster and Video being displayed at same time #965 we are planning to solve this on our fork. But I think this is not a blocker for making the video block publicly available. Video settings are not yet available on wp.com so users won't be able to set posters yet. And even if they do, we can avoid the anomaly by simply not using the poster url on mobile as a workaround. Currently we removed poster setting on mobile side to avoid any possible issues.
• Add unit-tests for touched areas( both image and video block ) - ready for review but need to merge the main PR first Add unit-tests for media related components  #919
• Add some simple ui tests to cover basic upload scenarios
• Add support for Video settings
• Enhance video block to show videos with better aspect ratio rather than a fixed one
• Retry options should have a cancel button (details :Video block (first iteration) #855)
• Stopping an upload-in-progress, quote: I would expect when the upload finishes behind the ActionSheet that it would simply close the action sheet because those actions are no longer relevant.(details :Video block (first iteration) #855)
• Don't save local uri in attributes, details: Add video block ( first iteration ) #854 (review)
• Tech debt: media-upload-progress.native.js can be moved to a better place [Mobile]Add video block (first iteration) WordPress/gutenberg#14912 (comment)
• Try and look for ways to make it cross platform

[pinarol]

Note about video playing differences between platforms

Currently on iOS we have a pull page video play, on Android we have inline.

This is because we have limitations on react-native-video level. Having control buttons(like play, pause etc) in the video block are messing up the layout on iOS, so I had to hide them and add our own play button which opens the video on full page. Once the video opens full page then there's no problem about control buttons. A bit of a technical insight: I think this is the line responsible for it, they are setting the frame (as a workaround for some issue) when controls=true
https://github.com/react-native-community/react-native-video/blob/c30f246f5694452f4f081ff30ac4523dfd89f41d/ios/Video/RCTVideo.m#L593
And by doing that they are messing up the y position of our page.

On the other hand on Android the full page preview just doesn’t work, the method call does nothing. But control buttons do work correctly. The video can play inline.

So now, we have different user experiences in both platforms in terms of video playing. If we want to make this equal in the future we'll need to either solve one of this:

1. Android the full page preview doesn’t work
2. iOS controls=true messing up the layout

[hypest]

The block has been released for both platforms. Closing this.