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.

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

[Mobile]Update video player to open the URL by browser on Android #16089

Merged
merged 7 commits into from
Jun 14, 2019

Conversation

pinarol
Copy link
Contributor

@pinarol pinarol commented Jun 11, 2019

Description

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

How has this been tested?

Tested with the steps on gutenberg-mobile PR: wordpress-mobile/gutenberg-mobile#1117

Screenshots

Types of changes

This should change only Android. We are canceling out the react-native-video's player controls and replacing it with system browser.

Since Android and iOS players got very close to each other I got rid of video-player.android.js.

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.

@pinarol 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 Jun 11, 2019
@pinarol pinarol self-assigned this Jun 11, 2019
@pinarol pinarol changed the title [Mobile]Update video player to open the URL by browser [Mobile]Update video player to open the URL by browser on Android Jun 11, 2019
@@ -13,7 +13,7 @@ $play-icon-size: 50;
align-items: center;
align-self: center;
position: absolute;
background-color: #e9eff3;
background-color: transparent;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

not directly related with this PR but updated this intentionally, there was a whitish color with 0.3 opacity on the videos which made videos look like they lost saturation.

@hypest hypest requested a review from marecar3 June 11, 2019 15:45
openURL( url ) {
Linking.canOpenURL(url).then(( supported ) => {
if ( !supported ) {
console.warn("Can't open the video URL: " + url);
Copy link
Contributor

Choose a reason for hiding this comment

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

On Android there is also an option to present the bottom sheet with the list of apps that can open the video, maybe that could be a good fall back scenario?

Copy link
Contributor

Choose a reason for hiding this comment

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

Got the explanation from @pinarol, so we are good with the current solution.

Copy link
Contributor Author

@pinarol pinarol Jun 11, 2019

Choose a reason for hiding this comment

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

AFAIU, if there are apps that can open the url then supported flag won't be false ever. https://facebook.github.io/react-native/docs/linking#canopenurl

Copy link
Contributor

Choose a reason for hiding this comment

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

Btw, on WPAndroid Aztec, when Chrome is disabled, it pops up the message for the user: "No application can handle this request. Please install a Web browser", maybe we can do the same so that user knows the reason why video can't be opened?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Sounds good 👍 added here 941917f

@pinarol
Copy link
Contributor Author

pinarol commented Jun 12, 2019

Ready for another look @marecar3

Screen Shot 2019-06-12 at 09 46 18

Screen Shot 2019-06-12 at 09 47 49

I had to manipulate the code to be able to see the alert messages, but the best way to test might be removing the browser from phone.

@pinarol
Copy link
Contributor Author

pinarol commented Jun 12, 2019

I added a last commit to prevent play button getting visible before our player has a height

Screen Shot 2019-06-12 at 11 46 18

I also added this as a code comment but I'll put more info here. Normally we wouldn't expect such a thing happening if we could add the play button as a child component to the VideoPlayer and center it. But If we add any child components to the VideoPlayer it decides to show its control buttons, even if we set contols={ false } it overrides it and decides to show. This is the case for iOS, not sure about Android. So I couldn't add play button as a child view to VideoPlayer. I had to add it as a sibling to VideoPlayer and place it on the VideoPlayer by using absolute position.

@pinarol pinarol changed the base branch from rnmobile/release-v1.7.0 to master June 14, 2019 11:56
@pinarol
Copy link
Contributor Author

pinarol commented Jun 14, 2019

I updated the base branch because of this wordpress-mobile/gutenberg-mobile#1117 (comment)

…rnmobile/open-video-by-browser-for-android

* 'master' of https://github.com/WordPress/gutenberg: (34 commits)
  [RNMobile] Native mobile release v1.7.0 (#16156)
  Scripts: Document and simplify changing file entry and output of build scripts (#15982)
  Block library: Refactor Heading block to use class names for text align (#16035)
  Make calendar block resilient against editor module not being present (#16161)
  Bump plugin version to 5.9.1
  Editor: Fix the issue where statics for deprecated components were not hoisted (#16152)
  Build Tooling: Use "full" `npm install` for Build Artifacts Travis task (#16166)
  Scripts: Fix naming conventions for function containing CLI keyword (#16091)
  Add native support for Inserter (Ported from gutenberg-mobile) (#16114)
  docs(components/higher-order/with-spoken-messages): fix issue in example code (#16144)
  docs(components/with-focus-return): fix typo in README.md (#16143)
  docs(block-editor/components/inspector-controls): fix image path in README.md (#16145)
  Add mention of on Figma to CONTRIBUTING.md (#16140)
  Bring greater consistency to placeholder text for media blocks. (#16135)
  Add descriptive text and a link to embed documentation in embed blocks (#16101)
  Update toolbar-text.png (#16102)
  Updating changelogs for the Gutenberg 5.9 packages release
  chore(release): publish
  [RNMobile] Fix pasting text on Post Title (#16116)
  Bump plugin version to 5.9.0
  ...

# Conflicts:
#	packages/block-library/src/video/video-player.android.js
Copy link
Contributor

@daniloercoli daniloercoli left a comment

Choose a reason for hiding this comment

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

Updated to latest master and LGTM!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
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
Development

Successfully merging this pull request may close these issues.

[Android]Video player overflows out of its bounds after playing is started
3 participants