Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[RNMobile] Cover block - Support adding video background from media library #20463

Merged
merged 2 commits into from
Mar 12, 2020
Merged

[RNMobile] Cover block - Support adding video background from media library #20463

merged 2 commits into from
Mar 12, 2020

Conversation

dratwas
Copy link
Contributor

@dratwas dratwas commented Feb 26, 2020 •
edited
Loading

Fixes - wordpress-mobile/gutenberg-mobile#1738

Gutenberg-mobile PR: wordpress-mobile/gutenberg-mobile#1959

In this PR I added the possibility to add video from the media library as a background in the cover block.

How has this been tested?

Test cases:

Test case 1 - render video background on the mobile that is set on the web

  • Open web version of gutenberg
  • Add the cover bloc, set video as a background and save the post
  • Open the mobile app and open saved post
  • Video background should be rendered properly

Test case 2 - Set video as a background in the mobile app

  • Open the mobile app (Wordpress-iOS or Wordpress Android) and add a cover block
  • Click on the media upload placeholder to open the media library
  • Select video from the media library
  • The video should be set as a background

Test case 3 - render video background on the web that is set on the mobile

  • Open the mobile version of the editor
  • Add the cover block, set video as a background and save the post
  • Open the saved post on the web
  • Video background should be rendered properly

Test case 4 - change the image background to the video background

  • Open the mobile app (Wordpress-iOS or Wordpress Android) and add a cover block with some image as a background
  • Click on the button in the Block Toolbar to change the background that is already set Screenshot 2020-03-03 at 14 08 32
  • Select some video from the media library
  • The image background should be changed to the video

Test case 5 - change the video background to the image background

  • Open the mobile app (Wordpress-iOS or Wordpress Android) and add a cover block with some video as a background
  • Click on the button in the Block Toolbar to change the background that is already set Screenshot 2020-03-03 at 14 08 32
  • Select some image from the media library
  • The video background should be changed to the image

Test case 6 - change the min-height of the block and the opacity of the overlay

  • Open the mobile app (Wordpress-iOS or Wordpress Android) and add a cover block with some video as a background
  • Open settings of the block
  • Change the opacity and min-height and look if they are applied to the block

Screenshots

iOS

Set video as a background
cover-video-set
Change settings of cover block
cover-height-opacity
Change image to the video and video to the image
cover-video-replace

Android

Set video as a background
androd-cover-set
Change settings of cover block
androd-cover-set
Change image to the video and video to the image
android-cover-change

Types of changes

New feature

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.

@dratwas dratwas changed the title [RNMobile] Cover block - Support video background [WIP][RNMobile] Cover block - Support video background Feb 26, 2020
@github-actions
Copy link

github-actions bot commented Feb 26, 2020 •
edited
Loading

Size Change: 0 B

Total Size: 866 kB

ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.01 kB 0 B
build/annotations/index.js 3.43 kB 0 B
build/api-fetch/index.js 3.39 kB 0 B
build/autop/index.js 2.58 kB 0 B
build/blob/index.js 620 B 0 B
build/block-directory/index.js 6.02 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.5 kB 0 B
build/block-editor/style.css 10.5 kB 0 B
build/block-library/editor-rtl.css 7.66 kB 0 B
build/block-library/editor.css 7.66 kB 0 B
build/block-library/index.js 116 kB 0 B
build/block-library/style-rtl.css 7.49 kB 0 B
build/block-library/style.css 7.5 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.65 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/blocks/index.js 57.6 kB 0 B
build/components/index.js 191 kB 0 B
build/components/style-rtl.css 15.5 kB 0 B
build/components/style.css 15.5 kB 0 B
build/compose/index.js 5.76 kB 0 B
build/core-data/index.js 10.5 kB 0 B
build/data-controls/index.js 1.03 kB 0 B
build/data/index.js 8.22 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 568 B 0 B
build/dom/index.js 3.06 kB 0 B
build/edit-post/index.js 90.9 kB 0 B
build/edit-post/style-rtl.css 8.53 kB 0 B
build/edit-post/style.css 8.53 kB 0 B
build/edit-site/index.js 4.63 kB 0 B
build/edit-site/style-rtl.css 2.51 kB 0 B
build/edit-site/style.css 2.51 kB 0 B
build/edit-widgets/index.js 4.42 kB 0 B
build/edit-widgets/style-rtl.css 2.59 kB 0 B
build/edit-widgets/style.css 2.58 kB 0 B
build/editor/editor-styles-rtl.css 325 B 0 B
build/editor/editor-styles.css 327 B 0 B
build/editor/index.js 44.6 kB 0 B
build/editor/style-rtl.css 4.01 kB 0 B
build/editor/style.css 4 kB 0 B
build/element/index.js 4.45 kB 0 B
build/escape-html/index.js 733 B 0 B
build/format-library/index.js 7.6 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 1.92 kB 0 B
build/html-entities/index.js 622 B 0 B
build/i18n/index.js 3.48 kB 0 B
build/is-shallow-equal/index.js 710 B 0 B
build/keyboard-shortcuts/index.js 2.3 kB 0 B
build/keycodes/index.js 1.68 kB 0 B
build/list-reusable-blocks/index.js 2.99 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 4.85 kB 0 B
build/notices/index.js 1.57 kB 0 B
build/nux/index.js 3.02 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.54 kB 0 B
build/primitives/index.js 1.49 kB 0 B
build/priority-queue/index.js 780 B 0 B
build/redux-routine/index.js 2.84 kB 0 B
build/rich-text/index.js 14.3 kB 0 B
build/server-side-render/index.js 2.54 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.27 kB 0 B
build/url/index.js 4 kB 0 B
build/viewport/index.js 1.61 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.18 kB 0 B

compressed-size-action

@dratwas dratwas force-pushed the rnmobile/cover-block-video branch from 875f09c to 9b97d8a Compare March 2, 2020 12:21
@dratwas dratwas force-pushed the rnmobile/cover-block-video branch from 9b97d8a to 01d845d Compare March 2, 2020 12:23
@dratwas dratwas changed the title [WIP][RNMobile] Cover block - Support video background [RNMobile] Cover block - Support video background Mar 4, 2020
@dratwas dratwas mentioned this pull request Mar 4, 2020
Merged
2 tasks
@dratwas dratwas changed the title [RNMobile] Cover block - Support video background [RNMobile] Cover block - Support adding video background from media library Mar 4, 2020
@dratwas
Copy link
Contributor Author

dratwas commented Mar 9, 2020

@geriux Could you please review this? :)

@pinarol
Copy link
Contributor

pinarol commented Mar 9, 2020

We had this problem on Android in the past so we stopped playing inline video. Let's make sure to test this on a few different Android simulators/devices.

geriux
geriux approved these changes Mar 10, 2020
View reviewed changes
Copy link
Member

@geriux geriux left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is awesome! Tested all test cases and it works great (iOS and Android)! Also tried to see if there was an issue on Android as @pinarol mentioned but worked nicely on the simulator and the device (Xiaomi)

LGTM! Nice work 📹

@geriux geriux added [Block] Cover Affects the Cover Block - used to display content laid over a background image Mobile App - i.e. Android or iOS Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change) labels Mar 10, 2020
@dratwas dratwas merged commit 6797931 into master Mar 12, 2020
@dratwas dratwas deleted the rnmobile/cover-block-video branch March 12, 2020 09:09
@github-actions github-actions bot added this to the Gutenberg 7.8 milestone Mar 12, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@geriux geriux geriux approved these changes

Assignees
No one assigned
Labels
[Block] Cover Affects the Cover Block - used to display content laid over a background image Mobile App - i.e. Android or iOS Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change)
Projects
None yet
Milestone
Gutenberg 7.8
Development

Successfully merging this pull request may close these issues.

None yet
3 participants
@dratwas @pinarol @geriux