[RNMobile][FIX] Cover block background when there's a video is totally black

[dratwas]

Description

Fixes wordpress-mobile/gutenberg-mobile#2104

Gutenberg-mobile PR - wordpress-mobile/gutenberg-mobile#2146

The Video component from react-native-video has a black background on Android even if i set the backgroundColor in style. In this PR I hide the Video component until the video is loaded.

How has this been tested?

• Run Wordpress-Android with the packager
• Add a cover block and set video as a background
• the background should be set to the same as a placeholder until the video is loaded

Screenshots

before	after

Types of changes

Fix black background while the video is loading

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.
• I've updated all React Native files affected by any refactorings/renamings in this PR.

[github-actions]

Size Change: 0 B

Total Size: 904 kB

ℹ️ View Unchanged

Filename	Size	Change
build/a11y/index.js	1.02 kB	0 B
build/annotations/index.js	3.62 kB	0 B
build/api-fetch/index.js	4.01 kB	0 B
build/autop/index.js	2.82 kB	0 B
build/blob/index.js	620 B	0 B
build/block-directory/index.js	6.24 kB	0 B
build/block-directory/style-rtl.css	760 B	0 B
build/block-directory/style.css	760 B	0 B
build/block-editor/index.js	104 kB	0 B
build/block-editor/style-rtl.css	10.2 kB	0 B
build/block-editor/style.css	10.2 kB	0 B
build/block-library/editor-rtl.css	7.23 kB	0 B
build/block-library/editor.css	7.23 kB	0 B
build/block-library/index.js	112 kB	0 B
build/block-library/style-rtl.css	7.43 kB	0 B
build/block-library/style.css	7.44 kB	0 B
build/block-library/theme-rtl.css	669 B	0 B
build/block-library/theme.css	671 B	0 B
build/block-serialization-default-parser/index.js	1.88 kB	0 B
build/block-serialization-spec-parser/index.js	3.1 kB	0 B
build/blocks/index.js	57.7 kB	0 B
build/components/index.js	198 kB	0 B
build/components/style-rtl.css	16.6 kB	0 B
build/components/style.css	16.5 kB	0 B
build/compose/index.js	6.66 kB	0 B
build/core-data/index.js	11.1 kB	0 B
build/data-controls/index.js	1.25 kB	0 B
build/data/index.js	8.43 kB	0 B
build/date/index.js	5.37 kB	0 B
build/deprecated/index.js	772 B	0 B
build/dom-ready/index.js	569 B	0 B
build/dom/index.js	3.1 kB	0 B
build/edit-navigation/index.js	3.1 kB	0 B
build/edit-navigation/style-rtl.css	279 B	0 B
build/edit-navigation/style.css	280 B	0 B
build/edit-post/index.js	93.5 kB	0 B
build/edit-post/style-rtl.css	12.3 kB	0 B
build/edit-post/style.css	12.3 kB	0 B
build/edit-site/index.js	10.4 kB	0 B
build/edit-site/style-rtl.css	5.02 kB	0 B
build/edit-site/style.css	5.02 kB	0 B
build/edit-widgets/index.js	7.53 kB	0 B
build/edit-widgets/style-rtl.css	3.74 kB	0 B
build/edit-widgets/style.css	3.73 kB	0 B
build/editor/editor-styles-rtl.css	428 B	0 B
build/editor/editor-styles.css	431 B	0 B
build/editor/index.js	43.6 kB	0 B
build/editor/style-rtl.css	3.49 kB	0 B
build/editor/style.css	3.49 kB	0 B
build/element/index.js	4.64 kB	0 B
build/escape-html/index.js	733 B	0 B
build/format-library/index.js	7.29 kB	0 B
build/format-library/style-rtl.css	502 B	0 B
build/format-library/style.css	502 B	0 B
build/hooks/index.js	2.13 kB	0 B
build/html-entities/index.js	622 B	0 B
build/i18n/index.js	3.56 kB	0 B
build/is-shallow-equal/index.js	711 B	0 B
build/keyboard-shortcuts/index.js	2.51 kB	0 B
build/keycodes/index.js	1.91 kB	0 B
build/list-reusable-blocks/index.js	3.12 kB	0 B
build/list-reusable-blocks/style-rtl.css	226 B	0 B
build/list-reusable-blocks/style.css	226 B	0 B
build/media-utils/index.js	5.28 kB	0 B
build/notices/index.js	1.79 kB	0 B
build/nux/index.js	3.4 kB	0 B
build/nux/style-rtl.css	616 B	0 B
build/nux/style.css	613 B	0 B
build/plugins/index.js	2.67 kB	0 B
build/primitives/index.js	1.5 kB	0 B
build/priority-queue/index.js	789 B	0 B
build/redux-routine/index.js	2.84 kB	0 B
build/rich-text/index.js	14.8 kB	0 B
build/server-side-render/index.js	2.67 kB	0 B
build/shortcode/index.js	1.7 kB	0 B
build/token-list/index.js	1.28 kB	0 B
build/url/index.js	4.01 kB	0 B
build/viewport/index.js	1.84 kB	0 B
build/warning/index.js	1.14 kB	0 B
build/wordcount/index.js	1.17 kB	0 B

_{compressed-size-action}

[pinarol]

hey @mkevins could you review this one?

[mkevins]

hey @mkevins could you review this one?

Yes 👍

[mkevins]

Hi @dratwas 👋 😃 This looks good from a code perspective. For some reason, I see slightly darker colors in dark mode compared to the placeholder:

Android	iOS

Is this expected / do you see the same? Other than that, it's working as expected. 👍

[dratwas]

Is this expected / do you see the same? Other than that, it's working as expected. 👍

Hey @mkevins , it is the same for the image. This is darker because of the overlay that is set to 50%. We could hide the overlay while the video/image is loading as well. WDYT?

[mkevins]

Hey @mkevins , it is the same for the image. This is darker because of the overlay that is set to 50%. We could hide the overlay while the video/image is loading as well. WDYT?

Ah, that makes sense! Since it's the same for image, I think it is good the way it is (especially since the loading background color was not considered an issue for image). Nice work!