[Mobile]Add video block (first iteration) #14912

pinarol · 2019-04-10T17:17:11Z

Description

To Fix: wordpress-mobile/gutenberg-mobile#855

This PR introduces the new video block for Mobile. First of all I am sorry for this huge PR. I will try to add notes and make it easier to understand as much as possible. Please note that most of the green changes aren't actually new code, they are mostly extracted from image block, I added some inline comments to point this out.

How has this been tested?

Tested via: wordpress-mobile/gutenberg-mobile#854

Types of changes

Extracted MediaUpload component from Image block (similar to web )
Extracted MediaUploadProgress component from Image block, it's now been used by image and video blocks
Updated MediaPlaceholder component to be suitable for different media types ( similar to web )
Added video block and reused MediaUpload, MediaUploadProgress, MediaPlaceholder components
Added react-native-video 3rd party library to have the preview of videos. Also this makes it similar to web side which uses html <video> tag, so hopefully any future abstractions will be easier to make the video block cross platform.

I added some additional inline comments to describe what's done.

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows the accessibility standards.
My code has proper inline documentation.
I've included developer documentation if appropriate.

# Conflicts: # packages/block-library/src/index.native.js

pinarol · 2019-04-10T17:54:09Z

packages/edit-post/src/index.native.js

 	if ( typeof __DEV__ === 'undefined' || ! __DEV__ ) {
 		unregisterBlockType( 'core/code' );
 		unregisterBlockType( 'core/more' );
+		unregisterBlockType( 'core/video' );


Added this so we won't see this on production yet

pinarol · 2019-04-10T17:54:51Z

packages/block-library/src/video/video-player.native.scss

+	border-bottom-left-radius: $play-icon-size/8;
+	border-bottom-right-radius: $play-icon-size/8;
+	border-top-right-radius: $play-icon-size/8;
+	border-top-left-radius: $play-icon-size/8;


I don't know why but I am getting red screen if I just use border-radius

pinarol · 2019-04-10T18:06:50Z

packages/block-library/src/image/media-upload-progress.native.js

@@ -0,0 +1,151 @@
+/**


This is a new component to be used by both video and image blocks(and probably by other media upload blocks in the future). It is actually not new code, just extracted from image block.

It listens to media upload events coming from main apps and updates progress Spinner. It also provides a way to render a child component with the current upload state(see props.renderContent) If provided a coverUrl then it will also calculate width, height of the image and pass to renderContent.

Maybe a better place for this component would be media-upload/? Since it's meant to be shared between media related blocks.
It also looks like a good candidate for a HOC (not 100% sure). This might also make easier its implementation in blocks.

Thanks @etoledom 👍 I added a tech debt here wordpress-mobile/gutenberg-mobile#687 (comment)

pinarol · 2019-04-10T18:20:26Z

packages/block-editor/src/components/media-upload/index.native.js

@@ -0,0 +1,98 @@
+/**


This is a new component to be used by both video and image blocks also by MediaUpload component. It is actually not new code, just extracted from image block.

This component is responsible for displaying media options picker to user. It is designed similar to what web has, it passes a function 'open' via its render method and the rendering component decides when to call that function.

Different thing is web doesn't need to pass getMediaOptions but we do, the rendering component also needs to embed getMediaOptions() call to an appropriate place. I tried wrapping this component with a View and calling getMediaOptions() inside, but that messed up the layout of edit button. 🤷‍♀️

pinarol · 2019-04-10T18:22:36Z

packages/block-editor/src/components/media-placeholder/index.native.js

 */
 import styles from './styles.scss';

 function MediaPlaceholder( props ) {


We are making MediaPlaceholder usable by both image and video blocks by passing media type.

pinarol · 2019-04-10T18:24:13Z

packages/block-editor/src/components/media-placeholder/index.native.js

-				</Text>
-			</View>
-		</TouchableWithoutFeedback>
+		<MediaUpload


We are also using our new MediaUpload component here.

pinarol · 2019-04-10T18:27:04Z

packages/block-library/src/video/edit.native.js

+							return (
+								<View onLayout={ this.onVideoContanerLayout } style={ { flex: 1 } }>
+									{ showVideo &&
+										<Video


By using this video component we are coming close to what web side has.

koke · 2019-04-11T09:47:55Z

packages/block-library/src/video/video-player.ios.js

+					} }
+					// Using built-in player controls is messing up the layout on iOS.
+					// So we are setting controls=false and adding a play button that
+					// will trigger presentFullscreenPlayer()


Sounds good as a workaround for this PR, but let's make sure to track this in another issue for 2.0.

I've added a new item to the TODO list here: wordpress-mobile/gutenberg-mobile#687
Unfortunately this is in library level, 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. I couldn't come up with a nice solution myself, I was planning to open an issue to their repo after this is merged. I think they might agree that current way is not very healthy. I can also try to tackle this more and send a PR to the original repo if they ignore the issue in the long run 🤔

# Conflicts: # packages/block-editor/src/components/media-placeholder/index.native.js # packages/block-library/src/image/edit.native.js

# Conflicts: # packages/block-editor/src/components/media-placeholder/index.native.js

marecar3 · 2019-05-06T21:55:54Z

packages/block-library/src/video/edit.native.js

+	componentDidMount() {
+		const { attributes, setAttributes } = this.props;
+		if ( attributes.id && ! isURL( attributes.src ) ) {
+			if ( attributes.url.indexOf( 'file:' ) === 0 ) {


Hey @pinarol @SergioEstevao do we need this block of code as it was put for copy/paste images on iOS but not sure for videos?

It looks like we don't have support for video copy paste on Aztec either. So yes, we don't need this code, let me remove that.

We are not supporting video copy paste, that code was copy/paste from image block

poster support isn't present on wp.com yet and react-native-video has an ugly bug about posters so we'll need to solve that first, after that we'll re-add this.

etoledom

Thank you for all this great hard work @pinarol !

It looks great and has been more than tested via wordpress-mobile/gutenberg-mobile#854 and wordpress-mobile/WordPress-iOS#11454 (for iOS).

I left a small code commen as a possible future optimization.

etoledom · 2019-05-10T10:15:15Z

packages/block-library/src/image/media-upload-progress.native.js

@@ -0,0 +1,151 @@
+/**


Maybe a better place for this component would be media-upload/? Since it's meant to be shared between media related blocks.
It also looks like a good candidate for a HOC (not 100% sure). This might also make easier its implementation in blocks.

…e/video upload

marecar3 · 2019-05-12T05:06:58Z

Hey @pinarol, as we have refactored an image and media progress upload in this PR I have manually included this fix: #15532 into our PR.

pinarol added 16 commits April 3, 2019 18:34

Pass media type to bridge

00fb7d8

Add video block

b47e8f5

Merge branch 'master' into rnmobile/update-media-type

c496809

# Conflicts: # packages/block-library/src/index.native.js

Add media upload ui

d29cecc

Merge branch 'master' into rnmobile/update-media-type

a663c30

# Conflicts: # packages/block-library/src/index.native.js

Add video block

15ddaf2

Extract media upload

b2fe442

Merge branch 'master' into rnmobile/video-block-first-iteration

3d5aaa2

Fix lint issues

2aabed5

Integrate RN video

44cf944

Integrate RN video

7ab8ebd

Fix lint issues

63868bd

Rename MediaUploadUI

db1080a

Separate Android and iOS video player configs

069a701

Fix lint issues

7d1047f

Merge branch 'master' into rnmobile/video-block-first-iteration

9423a53

pinarol added the Mobile App - i.e. Android or iOS Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change) label Apr 10, 2019

pinarol requested a review from chrisvanpatten as a code owner April 10, 2019 17:17

pinarol self-assigned this Apr 10, 2019

pinarol removed the request for review from chrisvanpatten April 10, 2019 17:17

pinarol added 3 commits April 10, 2019 20:38

Revert unwanted auto linter fix

95278d3

Update order of video block

4307156

Fix typo

13fc93c

pinarol commented Apr 10, 2019

View reviewed changes

pinarol mentioned this pull request Apr 10, 2019

Add video block ( first iteration ) wordpress-mobile/gutenberg-mobile#854

Merged

koke reviewed Apr 11, 2019

View reviewed changes

pinarol added 3 commits April 11, 2019 18:47

Enhance placeholder

49cca70

Add retry action for video block

590d1ae

Merge branch 'master' into rnmobile/video-block-first-iteration

ab37524

pinarol requested a review from etoledom April 17, 2019 13:08

marecar3 and others added 7 commits April 17, 2019 14:01

Merge branch 'master' into rnmobile/video-block-first-iteration

7333b9f

Merge branch 'master' into rnmobile/video-block-first-iteration

bffcb7f

Remove unused state property

1c0bc4d

Merge branch 'master' into rnmobile/video-block-first-iteration

aaad3b8

Merge branch 'master' into rnmobile/video-block-first-iteration

b2fddc1

Merge branch 'master' into rnmobile/video-block-first-iteration

e5c0313

# Conflicts: # packages/block-editor/src/components/media-placeholder/index.native.js # packages/block-library/src/image/edit.native.js

Merge branch 'master' into rnmobile/video-block-first-iteration

226e57d

marecar3 requested review from daniloercoli and mzorz April 24, 2019 16:33

marecar3 and others added 4 commits April 25, 2019 19:49

Merge branch 'master' into rnmobile/video-block-first-iteration

c046bab

Merge branch 'master' into rnmobile/video-block-first-iteration

8d4e4c9

# Conflicts: # packages/block-editor/src/components/media-placeholder/index.native.js

Merge branch 'master' into rnmobile/video-block-first-iteration

8e33850

Fixed problem with cancel/retry uploading of video

c996619

marecar3 reviewed May 6, 2019

View reviewed changes

marecar3 and others added 4 commits May 6, 2019 17:59

Set proper bottom sheet icons for video block

862aebf

Make sure that icon block has latest value of isUploadingInProgress

248fce1

Remove unnecessary code for video copy/paste handling

0e13082

We are not supporting video copy paste, that code was copy/paste from image block

Removing poster support

3c29489

poster support isn't present on wp.com yet and react-native-video has an ugly bug about posters so we'll need to solve that first, after that we'll re-add this.

etoledom approved these changes May 10, 2019

View reviewed changes

Merge branch 'master' into rnmobile/video-block-first-iteration

1a9f357

pinarol mentioned this pull request May 10, 2019

Video block wordpress-mobile/gutenberg-mobile#687

Closed

marecar3 added 2 commits May 12, 2019 00:34

Merge branch 'master' into rnmobile/video-block-first-iteration

2838fec

Fixed crash when opening the post which previously had cancelled imag…

8a2f97c

…e/video upload

marecar3 merged commit 295a381 into master May 12, 2019

youknowriad added this to the 5.7 (Gutenberg) milestone May 13, 2019

Tug deleted the rnmobile/video-block-first-iteration branch July 12, 2019 07:40

[Mobile]Add video block (first iteration) #14912

[Mobile]Add video block (first iteration) #14912

Uh oh!

Conversation

pinarol commented Apr 10, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

How has this been tested?

Types of changes

Checklist:

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

pinarol Apr 10, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

pinarol Apr 10, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

pinarol Apr 12, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

etoledom left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

marecar3 commented May 12, 2019

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

pinarol commented Apr 10, 2019 •

edited

Loading

pinarol Apr 10, 2019 •

edited

Loading

pinarol Apr 10, 2019 •

edited

Loading

pinarol Apr 12, 2019 •

edited

Loading