Video block ui/ux enhancements

[marecar3]

Fixes : #966

Android Upload Video Example :

Android Upload Image Example :

More details regarding testing and preview of what is done: WordPress/gutenberg#15551

[pinarol]

hey Marko 👋 I think we might have a side effect about not showing the image placeholder. Normally I should be seeing an image placeholder during the time image loads from media library:

[marecar3]

Hey @pinarol , thanks for the feedback, I will look at it.

[iamthomasbishop]

@marecar3 Can you please add some screenshots or videos when it's ready for design review? It's a bit hard to see what to review without visuals. Thank you!

[marecar3]

Hey @iamthomasbishop you can find it on this PR: WordPress/gutenberg#15551

But I will upload here newest videos for both image and video block. Will tag you when that happens.

[marecar3]

hey Marko 👋 I think we might have a side effect about not showing the image placeholder. Normally I should be seeing an image placeholder during the time image loads from media library:

Fixed! :)

[marecar3]

Hey @iamthomasbishop I have updated description with the latest video presenting image/video block feature.

[pinarol]

hey Marko 👋 Unfortunately that new icon/index.native.js has a huge regression effect on all types of icons. Demo apps are already crashing

It looks to me that we shouldn't diverse the mobile side implementation of Icon for this PR, it needs wider testing. We have our own separate js files already for icons like:
image/icon-retry.js
video/icon-retry.js

would that be possible to change those files only and pass the fill color or size if needed? I'll try to look into this a bit.

[pinarol]

@marecar3 👋 I looked into that last crash a bit and I think I found a solution that won't effect other icons, let's discuss and I can push the commit if that's OK for you.

[iamthomasbishop]

Looking at the updated videos above, some more feedback:

Video upload progress

Looks a lot cleaner, well done! I noticed 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?

Placeholder/uploading icons

(same concept applies to Image block)

For both video and image block uploading (any progress states), can we make sure:

• Color of icon is $gray-lighten-20
• Icon is 40x40

Transitions

I understand this might be tricky, but it would be great if we could add some transitions when media items are loaded. For example, we could:

• Smoothly transition the height of the inner blocks when the uploaded item is being displayed
• Fade in the video – right now it's just an immediate display upon entrance

Side Notes

• Caption: there is some extra padding top/bottom on the caption, but this might be related to an issue I reported earlier (Remove extra inner padding on text blocks #992)

[pinarol]

hey @iamthomasbishop thank you for the feedbacks, I think it is ready for another look.

noticed 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?

I investigated the issue but couldn't figure the root cause, it is pretty weird that it only happens on Android. iOS part seems OK:

So I added an item here #687 (comment) It'd be better if an Android dev investigates it. I am assuming this is not a blocker for shipping the video block, please let me know if you have concerns about it.

For both video and image block uploading (any progress states), can we make sure:
Color of icon is $gray-lighten-20
Icon is 40x40

You are right this wasn't correct, I updated this:

Caption: there is some extra padding top/bottom on the caption, but this might be related to an issue I reported earlier

I updated caption padding due to designs:

Transitions

Yes transitions are tricky, I think we might not be able to make it until v2. Plus, considering the very little usage of video blocks it might be an over effort currently. But feel free to open a new issue for it and we can estimate and plan how to do it for future releases, does that sound good?

[iamthomasbishop]

Thanks @pinarol – these updates look great! From what I can tell from your iOS videos, everything looks to be working properly. Let's fix that issue on Android as soon as we can, but not a blocker for shipping the block.

[pinarol]

thank you @iamthomasbishop I've opened an issue to track that: #1005

[pinarol]

Tested with WPiOS, WPAndroid and example apps, also got the design approval from @iamthomasbishop