Support fullscreen video on Android #325

dvicory · 2019-02-07T09:32:21Z

Fixes #294.

Let me know if we want to add anything as part of this.

smathson · 2019-02-14T20:02:10Z

@dvicory This works great! Wish I had seen it earlier this week before I did almost identical work on my own fork. Your implementation is much cleaner though, so going to use yours and hope it gets merged soon. Nice work!

Edit: After some further testing I ran into an issue trying to fullscreen videos that were captured in portrait orientation. More details below.

android/src/main/java/com/reactnativecommunity/webview/RNCWebViewManager.java

Titozzz · 2019-02-15T00:12:50Z

I'll wait for updates from @dvicory to merge, but many thanks for testing @smathson

android/src/main/java/com/reactnativecommunity/webview/RNCWebViewManager.java

dvicory · 2019-03-14T21:04:18Z

@Titozzz and @smathson sorry for the very late followup, but I've addressed the original issue of forcing orientation. Currently, I've made the best fullscreen experience only for KitKat or greater. I hope that's acceptable as getting it working well pre-KitKat turned out to be quite a challenge. Fullscreen video will still work there, just with the navigation and status bars.

Right now it uses sticky immersive mode (for KitKat and above), doesn't force orientation, and works well if a user locks the screen or backgrounds the app. Let me know if I can address anything further.

smathson · 2019-03-22T03:38:33Z

@dvicory Looks great to me. I won't have a chance to test this in our production app anytime soon but I'll try to run it through a test app tomorrow or early next week.

Titozzz · 2019-03-22T09:00:07Z

@dvicory Any change you can get a look at the conflicts? I merged quite a lot of stuff recently

dvicory · 2019-03-22T21:43:44Z

@Titozzz Rebased and resolved conflicts. Also I've tested on the following devices we have:

Nexus 7 with Android 4.3
Nexus 5 with Android 6.0.1
Samsung S7 with Android 7.0
Samsung S9 with Android 8.0
Pixel 2 with Android 9.0

Couldn't find our phone with KitKat unfortunately.

Titozzz · 2019-03-23T00:36:57Z

Great, thanks

Strate · 2019-04-01T12:37:24Z

did you checked how embedded youtube works in fullscreen? I've tried your PR, but there was an issues:

Sometimes "fullscreen" button is not tapable on real device (Xiaomi Redmi 6A)
When button is tapable, video missing on fullscreen, only audio available.

dvicory · 2019-04-01T18:58:00Z

@Strate I experienced the same problem on my Nexus 6P with a custom ROM (Pixel Experience), but attributed it to the custom ROM... Other Nexus, Samsung, and Pixel phones have no problems. I would appreciate any help in investigating what's going wrong here. I don't know that this should be a blocker to merging?

Titozzz · 2019-04-02T08:17:13Z

@Strate @dvicory please keep me updated if this is a blocker or not :)

Strate · 2019-04-02T08:19:47Z

@Titozzz actually, this happens with other webview components (I've tried https://github.com/teamairship/react-native-android-fullscreen-webview-video). Looks like this is a youtube-related problem, because Vimeo works great.

Titozzz · 2019-04-02T08:21:17Z

So you are saying we can merge this as is?

Strate · 2019-04-03T13:40:11Z

@Titozzz I can't say this, because actually I am not an android developer, I just tried to find out youtube fullscreen problem, found this PR and tested it )

adrianchinghc · 2019-04-05T10:56:22Z

Manually applied the changes to test this out. This is for youtube and vimeo embed in a website. (Huawei Nova 3)

For youtube embed, the fullscreen icon is not greyed out anymore. But when I tap on the icon, nothing happens. Seeing this mSecurityInputMethodService is null in logcat.

As for vimeo embed, when I tap on the fullscreen icon, the screen becomes white colour. But the video is actually already full screen and playing below the white screen.

miltoneiji · 2019-04-26T14:55:49Z

Is there anything that I can do to help this PR to get merged?

I was thinking of creating a repo with this branch and try to reproduce the bug. Would it help?

ambrosiora

I'm trying to implement this feature on my app. So I get this modified file and manually applied the changes to test. Here's the tests result bellow:

Galaxy S8 - Android 9.0. - Fullscreen button working fine.

Lenovo Z2 Plus - Android 7.1.2. - Fullscreen button working fine.

Tested on 3 Moto X Play with Android 7.1.1. - Fullscreen button working fine.

Samsung Galaxy J7 - Android 6.0.1 - Fullscreen button working fine.

One of these Moto X Play is mine and the only strange issue that hapend on my cellphone is: The Fullscreen button appears enabled but nothing happens on tap at first try, so I uninstalled the app and run react-native run-android --deviceId=<MY_DEVICE_ID_HERE> again and it works fine.

Unfortunately, I'm not able to analyze and suggest any changes on the Java Code.
I hope I helped, and I'm waiting this solution gets fully merged soon.
Thanks :D

karvulf · 2019-05-08T21:14:55Z

I tested it on my Galaxy Tab S2 with Android 7.0 and in fullscreen, my screen gets black, if my rotation is portrait (sound works and video is clickable), in landscape mode, it works.
And on my Galaxy s7 with Android 8.0, if I change multiple times the rotation in fullscreen, sometimes the screen gets black (sound works and video is clickable)

Titozzz · 2019-05-10T07:52:45Z

If anyone can find the reasons for the last few bugs it would be great as it already looks like it's working on many devices

sibelius · 2019-05-10T18:19:09Z

can we ship this as experimental? would this break other features?

Titozzz · 2019-05-13T07:45:58Z

I could. I can always revert if something gets broken but I guess it should only affect people using full screen and since it's broken right now..

karvulf · 2019-05-15T18:26:09Z

That would be great and easier for me to test it! @dvicory

dvicory · 2019-05-15T18:35:10Z

@karvulf Okay, I made a branch with the TypeScript built.

You should be able to add it like so: yarn add "github:appfolio/react-native-webview#built-android-fullscreen-video". Please let me know how it works out for you. For other readers out there, please don't depend on this branch long-term, the goal is to get this merged. 😄

karvulf · 2019-05-15T18:44:49Z

Thank you very much! It works @dvicory

dvicory · 2019-05-16T17:39:50Z

@sibelius @smathson Anything more I can do to help push this through?

Titozzz · 2019-05-16T22:20:11Z

Nope, you already rock 😍

# [5.9.0](v5.8.2...v5.9.0) (2019-05-16) ### Bug Fixes * **Android:** geolocation access ([#562](#562)) ([409b9ae](409b9ae)) ### Features * **fullscreen videos:** Support fullscreen video on Android ([#325](#325)) ([d72c2ae](d72c2ae)) * **onScroll:** Add `onScroll` callback for iOS & Android ([#516](#516)) ([e4c8dab](e4c8dab))

react-native-community-bot · 2019-05-16T22:30:05Z

🎉 This PR is included in version 5.9.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Mookiies · 2019-05-16T23:00:43Z

@allcontributors[bot] please add @dvicory for code doc

allcontributors · 2019-05-16T23:00:53Z

@MalcolmScruggs

I've put up a pull request to add @dvicory! 🎉

ambrosiora · 2019-05-17T10:27:53Z

Nice job fellows!
Like I said above, if any user reports some unexpected behaviour , I will stat you guys.
Thanks!

ouabing · 2019-05-20T06:29:14Z

Any ideas about getting notified when enter/exit fullscreen? I'm seeking for a way on Android to unlock the orientations when the webview enters fullscreen mode to enable auto-rotate feature, and lock it again when exits.

WKWebView handles this case well on iOS side, so it's a bit inconsistent on this. Temporarily my workaround is changing the Java code to emit exit and enter events. I don't know if it's a good idea to add another callback for Android : /.

dvicory · 2019-05-20T18:56:36Z

@ouabing perhaps continue this discussion in #586.

Fix missing `allowsFullscreenVideo` prop after react-native-webview#325 got merged.

Fix missing `allowsFullscreenVideo` prop after #325 got merged.

…ative-webview#325) * Extract WebChromeClient from an anonymous class * Support fullscreen videos on Android Forces landscape mode while playing. * Use sticky immersive mode for fullscreen videos No longer forces landscape mode as that is a problem for portrait videos - allow the user to rotate as necessary. Only supports KitKat or greater, and falls back to leaving the status and navigation bars visible for lower than KitKat. This is the easiest way to prevent issues with resizing the video during playback. Also implement a lifecyle event listener which means if a user backgrounds the app or locks the screen with the video fullscreen, the UI visibility is re-applied. * Add allowsFullscreenVideo prop to control whether videos can be fullscreen on Android Luckily, we're able to change the WebChromeClient on demand in response to prop changes without seeming to do any harm. If you switch to disallow fullscreen, it will attempt to close the currently fullscreened video (if there is one) so users aren't stuck. I did notice a bug that if you go from fullscreen allowed, to fullscreen disallowed, the fullscreen button will remain on the video. Tapping the button will have no effect.

Fix missing `allowsFullscreenVideo` prop after react-native-webview#325 got merged.

Fix missing `allowsFullscreenVideo` prop after react-native-webview/react-native-webview#325 got merged.

dvicory force-pushed the android-fullscreen-video branch from b7455fa to 65657ce Compare February 7, 2019 09:38

smathson reviewed Feb 14, 2019

View reviewed changes

android/src/main/java/com/reactnativecommunity/webview/RNCWebViewManager.java Outdated Show resolved Hide resolved

smathson reviewed Feb 14, 2019

View reviewed changes

android/src/main/java/com/reactnativecommunity/webview/RNCWebViewManager.java Outdated Show resolved Hide resolved

johman10 reviewed Feb 20, 2019

View reviewed changes

android/src/main/java/com/reactnativecommunity/webview/RNCWebViewManager.java Outdated Show resolved Hide resolved

amhinson mentioned this pull request Feb 26, 2019

Use WebView from react-native-webview as it has been deprecated from … teamairship/react-native-android-fullscreen-webview-video#20

Open

dvicory force-pushed the android-fullscreen-video branch from 65657ce to 0c7c489 Compare March 14, 2019 20:59

dvicory force-pushed the android-fullscreen-video branch from 0c7c489 to 3dc3f73 Compare March 22, 2019 21:43

dvicory force-pushed the android-fullscreen-video branch from 3dc3f73 to d89a3db Compare March 26, 2019 22:07

smathson mentioned this pull request Mar 27, 2019

Android needs full screen video support #294

Closed

dvicory force-pushed the android-fullscreen-video branch from d89a3db to becb4ad Compare March 28, 2019 09:13

ambrosiora previously approved these changes May 7, 2019

View reviewed changes

Titozzz merged commit d72c2ae into react-native-webview:master May 16, 2019

react-native-community-bot added the released label May 16, 2019

allcontributors bot mentioned this pull request May 16, 2019

docs: add dvicory as a contributor #576

Merged

Slowl mentioned this pull request May 19, 2019

Not able to compile or build apk with Android #581

Closed

retyui mentioned this pull request May 21, 2019

[react-native-webview_v5.x.x] Update types flow-typed/flow-typed#3342

Merged

4 tasks

Palid added a commit to Palid/react-native-webview that referenced this pull request May 22, 2019

Update WebViewTypes.ts

76bb848

Fix missing `allowsFullscreenVideo` prop after react-native-webview#325 got merged.

Palid mentioned this pull request May 22, 2019

Add missing allowsFullscreenVideo to WebViewTypes.ts #590

Merged

4 tasks

Titozzz pushed a commit that referenced this pull request Jun 13, 2019

fix(types): android/allowsFullscreenVideo (#590)

f8a560b

Fix missing `allowsFullscreenVideo` prop after #325 got merged.

Titozzz pushed a commit that referenced this pull request Jun 13, 2019

fix(types): android/allowsFullscreenVideo (#590)

9d5f07a

Fix missing `allowsFullscreenVideo` prop after #325 got merged.

amhinson mentioned this pull request Aug 23, 2019

Library is not working on RN 0.60 teamairship/react-native-android-fullscreen-webview-video#27

Open

This was referenced Aug 28, 2019

Allow user to rotate fullscreen video on Android ustudio/react-native-webview#1

Merged

Allow user to rotate fullscreen video on Android (No Android X) #815

Merged

fix(android): Allow user to rotate fullscreen video (Android X) #816

Merged

phuongwd pushed a commit to phuongwd/react-native-webview that referenced this pull request Apr 29, 2020

fix(types): android/allowsFullscreenVideo (react-native-webview#590)

cf1bcb8

Fix missing `allowsFullscreenVideo` prop after react-native-webview#325 got merged.

noproblem23 added a commit to noproblem23/react-native-webview that referenced this pull request Apr 18, 2023

fix(types): android/allowsFullscreenVideo (#590)

0670b36

Fix missing `allowsFullscreenVideo` prop after react-native-webview/react-native-webview#325 got merged.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Support fullscreen video on Android #325

Support fullscreen video on Android #325

dvicory commented Feb 7, 2019

smathson commented Feb 14, 2019 •

edited

Loading

Titozzz commented Feb 15, 2019

dvicory commented Mar 14, 2019

smathson commented Mar 22, 2019

Titozzz commented Mar 22, 2019

dvicory commented Mar 22, 2019 •

edited

Loading

Titozzz commented Mar 23, 2019

Strate commented Apr 1, 2019

dvicory commented Apr 1, 2019

Titozzz commented Apr 2, 2019

Strate commented Apr 2, 2019

Titozzz commented Apr 2, 2019

Strate commented Apr 3, 2019

adrianchinghc commented Apr 5, 2019

miltoneiji commented Apr 26, 2019

ambrosiora left a comment •

edited

Loading

karvulf commented May 8, 2019 •

edited

Loading

Titozzz commented May 10, 2019

sibelius commented May 10, 2019

Titozzz commented May 13, 2019

karvulf commented May 15, 2019

dvicory commented May 15, 2019 •

edited

Loading

karvulf commented May 15, 2019

dvicory commented May 16, 2019

Titozzz commented May 16, 2019

react-native-community-bot commented May 16, 2019

Mookiies commented May 16, 2019

allcontributors bot commented May 16, 2019

ambrosiora commented May 17, 2019

ouabing commented May 20, 2019 •

edited

Loading

dvicory commented May 20, 2019

Support fullscreen video on Android #325

Support fullscreen video on Android #325

Conversation

dvicory commented Feb 7, 2019

smathson commented Feb 14, 2019 • edited Loading

Titozzz commented Feb 15, 2019

dvicory commented Mar 14, 2019

smathson commented Mar 22, 2019

Titozzz commented Mar 22, 2019

dvicory commented Mar 22, 2019 • edited Loading

Titozzz commented Mar 23, 2019

Strate commented Apr 1, 2019

dvicory commented Apr 1, 2019

Titozzz commented Apr 2, 2019

Strate commented Apr 2, 2019

Titozzz commented Apr 2, 2019

Strate commented Apr 3, 2019

adrianchinghc commented Apr 5, 2019

miltoneiji commented Apr 26, 2019

ambrosiora left a comment • edited Loading

Choose a reason for hiding this comment

karvulf commented May 8, 2019 • edited Loading

Titozzz commented May 10, 2019

sibelius commented May 10, 2019

Titozzz commented May 13, 2019

karvulf commented May 15, 2019

dvicory commented May 15, 2019 • edited Loading

karvulf commented May 15, 2019

dvicory commented May 16, 2019

Titozzz commented May 16, 2019

react-native-community-bot commented May 16, 2019

Mookiies commented May 16, 2019

allcontributors bot commented May 16, 2019

ambrosiora commented May 17, 2019

ouabing commented May 20, 2019 • edited Loading

dvicory commented May 20, 2019

smathson commented Feb 14, 2019 •

edited

Loading

dvicory commented Mar 22, 2019 •

edited

Loading

ambrosiora left a comment •

edited

Loading

karvulf commented May 8, 2019 •

edited

Loading

dvicory commented May 15, 2019 •

edited

Loading

ouabing commented May 20, 2019 •

edited

Loading