Back button event on full screen video closes application

[Chuckytuh]

Bug Report

Problem

As the title suggests, attempting to exit fullscreen using the back button, closes the application instead of exiting fullscreen.

1. Create a cordova application with a
2. Enter full screen mode on video
3. Hit back button

What is expected to happen?

Full screen mode should be exited.

What does actually happen?

Application is closed.

Information

From what I could gather this is in fact a problem with Chrome itself, I've seen this occur on chrome versions (at least) higher than 74.0.3729.186 up to the current stable version (76.0.3809.132).

A bug report on chromium bug tracker was also opened

Command or Code

N/A

Environment, Platform, Device

Android, any version that uses Chrome as the webview provider and it has been updated.

Version information

cordova cli: 7.1.0 cordova-android: 8.0.0

Checklist

• [X] I searched for existing GitHub issues
• [ ] I updated all Cordova tooling to most recent version
• [X] I included all the necessary information above

[breautek]

If this is indeed a Chrome issue, then there is probably not much Cordova can do about it.

However a work around could be attaching an backbutton event listener so that you can respond to a back button press and programmatically close the fullscreen view. With this method, you'll probably either have to remove the event listener when it's not needed to let the back button do its default behaviour otherwise you'll have to keep track of when it should go back a page or exit the app.

[Chuckytuh]

If this is indeed a Chrome issue, then there wouldn't be much Cordova can do about it.

However a work around could be attaching an backbutton event listener so that you can respond to a back button press and programmatically close the fullscreen view. With this method, you'll probably either have to remove the event listener when it's not needed to let the back button do its default behaviour otherwise you'll have to keep track of when it should go back a page or exit the app.

@breautek From what I could gather, in app event listeners, such as one for "backbutton" event is not dispatched when in full screen mode. We're pretty much required to handle this from the native side.

I've opened a PR with a simple fix that tackles this situation.

Proceed as you see fit, cheers!

[josephlodero]

Hi @Chuckytuh, my problem is slightly different, 'backbutton' event will exit fullscreen but right after that using 'backbutton' again will exit the app. maybe you encounter this kind of problem? cordova-cli : 9 cordova-android: 8.1.0 thanks!

[Chuckytuh]

Hi @Chuckytuh, my problem is slightly different, 'backbutton' event will exit fullscreen but right after that using 'backbutton' again will exit the app. maybe you encounter this kind of problem? cordova-cli : 9 cordova-android: 8.1.0 thanks!

I haven't. Upon exiting full screen, if you press back again the event will be handled by the WebView itself with the standard behaviour which means that, if there's no items on the back history, the application will be exited.

[josephlodero]

@Chuckytuh the video is on another page.. instead of going back to main page the platform backbutton will exit the app or crash. i already open an issue regarding with this. #839

[josephlodero]

@breautek oh thanks! can you please guide me how to do it? sorry im just new with this.

[l-hwen]

Sorry, I followed the instructions to modify my file, but this still doesn't work for me. framework/src/org/apache/cordova/CordovaWebViewImpl.java Cordova-android@8.1.0

[breautek]

@josephlodero

On the top of the github page in cordova-android repo, you can click on the Fork button, which will create a copy of this repo under your own account.

Run the following commands, make sure you replace all <variables>. This should be done outside of your cordova project folder.

git clone https://github.com/<your_github_username>/cordova-android.git
cd cordova-android
git checkout rel/8.1.0
git branch backbuttonfix
git checkout backbuttonfix
git remote add Chuckytuh https://github.com/Chuckytuh/cordova-android.git
git fetch Chuckytuh
git merge Chuckytuh/fix/fullscreenbackbutton
git push -u origin backbuttonfix

The above clones your cordova-android fork, checks out the latest 8.1.0 release (for stability), creates a branch (because it's generally good practice to leave master branch clean), adds @Chuckytuh fork as a remote, so you can fetch his changes and then merge his branch into your branch. Then finally, you push your branch to your own repo.

Now you have a copy of cordova-android with the PR applied. To use it, we now have to replace your cordova-android install with your fork. So the following commands is done while inside your cordova project folder.

cordova platform remove android
cordova platform add https://github.com/<your_github_username>/cordova-android.git

That should be it.

@l-hwen

framework/src/org/apache/cordova/CordovaWebViewImpl.java is a filepath that only exists in the cordova-android repo, but it's not a filepath that exists on the installed cordova-android platform in a cordova project. So i'm not sure if you've done everything necessary to have the changeset apply in your project. I'd advise copying the same instructions as I provided @josephlodero

[patchon]

Hi @breautek

I was just curios if you were able to reproduce the issue I'm describing in https://github.com/apache/cordova-android/pull/823#issuecomment-546611188 ?

I can move the comment here if discussion here is preferred.

Best regards, Patrik

[josephlodero]

Hi @breautek thank you for your help. i followed your instruction but.. it doesn't fix the issue its the same with @patchon. actually with or without this fork the problem is still the same. when you use the backbutton after the fullscreen the app will exit.. but if you click on the app after the fullscreen and use backbutton it doesnt exit the app.

thanks!

[liuxiaoy]

cordova webview use ViewGruop onDispatchKeyEvent to perform all keyevent. so if webview has no focus. any keyevent will has no affect.

oh tian a

[breautek]

@patchon @josephlodero

I haven't seen that issue when I was doing my tests. I was however just using the basic native web player provided by the browser via the video tag. To confirm that plyr.js library isn't doing anything weird, maybe you can try a quick test with a simple <video> tag? This will rule out any weirdness coming from another library.

[josephlodero]

@breautek Yup the problem still exist with just <video> tag

[l-hwen]

@breautek I created a new ionic project 1.npm install -g ionic 2.ionic start myApp tabs 3.Add a video tag to the tab2 page. 4.Modify the photo-gallery\resources\android\xml\network_security_config.xml file，so that Android devices can access the network 5.cordova platform remove android 6.cordova platform add https://github.com//cordova-android.git 7.Mobile start developer mode，Connect Android devices to your computer using USB， 8.run the ‘ ionic cordova run android -l ’ command It still recreates this question。 It's very simple. I hope you can try it, too

[breautek]

Does it work work without the ionic framework? As a Cordova contributor I don't test ionic. Ionic overrides a lot of Cordova stuff and if the issue persists only when using the ionic classes, then that becomes an issue for the ionic team.

[josephlodero]

@breautek No, i tried it without ionic. and the problem still there.

[josephlodero]

@breautek Hi! it seems like every time we use showCustomView and then hideCustomView it lost the focus on the app thats why onStop() will be called. I tried adding engine.getView().requestFocus(); in line 295 in hideCustomView() after the engine.getView().setVisibility(View.VISIBLE) and it seems to work. Can you please check if this is a good possible solution for this problem? THanks!

[eonie]

@josephlodero Good job!!! I tried the code, it solved the problem.

[patchon]

@breautek Hi! it seems like every time we use showCustomView and then hideCustomView it lost the focus on the app thats why onStop() will be called. I tried adding engine.getView().requestFocus(); in line 295 in hideCustomView() after the engine.getView().setVisibility(View.VISIBLE) and it seems to work. Can you please check if this is a good possible solution for this problem? THanks!

Thanks for the fix @josephlodero, it worked for me as well. Now the back-button-handling works as one expect.

:cake: :champagne:

// Patrik

[breautek]

@josephlodero Can you tell me if you were using the WrapperView provided by #823 or if you were using android's master version without the WrapperView?

[josephlodero]

@breautek nope. I tried it without it. I hope there is no conflict with my solution.. cheers!

[breautek]

Ok, I'll try retesting this again sometime soon.

[iansamz]

How can one use this on ionic. Fairly new to cordova

[josephlodero]

@iansamz just use my repo : ionic cordova platform remove android ionic cordova platform add https://github.com/josephlodero/cordova-android.git

cheers!

[glenpierce]

@josephlodero

On the top of the github page in cordova-android repo, you can click on the Fork button, which will create a copy of this repo under your own account.

Run the following commands, make sure you replace all <variables>. This should be done outside of your cordova project folder.

git clone https://github.com/<your_github_username>/cordova-android.git
cd cordova-android
git checkout rel/8.1.0
git branch backbuttonfix
git checkout backbuttonfix
git remote add Chuckytuh https://github.com/Chuckytuh/cordova-android.git
git fetch Chuckytuh
git merge Chuckytuh/fix/fullscreenbackbutton
git push -u origin backbuttonfix

The above clones your cordova-android fork, checks out the latest 8.1.0 release (for stability), creates a branch (because it's generally good practice to leave master branch clean), adds @Chuckytuh fork as a remote, so you can fetch his changes and then merge his branch into your branch. Then finally, you push your branch to your own repo.

Now you have a copy of cordova-android with the PR applied. To use it, we now have to replace your cordova-android install with your fork. So the following commands is done while inside your cordova project folder.

cordova platform remove android
cordova platform add https://github.com/<your_github_username>/cordova-android.git

That should be it.

@l-hwen

framework/src/org/apache/cordova/CordovaWebViewImpl.java is a filepath that only exists in the cordova-android repo, but it's not a filepath that exists on the installed cordova-android platform in a cordova project. So i'm not sure if you've done everything necessary to have the changeset apply in your project. I'd advise copying the same instructions as I provided @josephlodero

Is the fix found here: https://github.com/Chuckytuh/cordova-android/commit/fdc4da591d03516d426daa67960ab50c6da20ae0 going to be applied to the main Cordova project?

[josephlodero]

@glenpierce just use my repo : ionic cordova platform add https://github.com/josephlodero/cordova-android.git

[iansamz]

@iansamz just use my repo : ionic cordova platform remove android ionic cordova platform add https://github.com/josephlodero/cordova-android.git

cheers!

Hope someone else comes across this. 👍🏾

[giuseeFG]

add this in MainActivity.java it works.

@Override
public void onBackPressed() {
    this.appView.loadUrl("javascript:if (document.webkitExitFullscreen) {document.webkitExitFullscreen();}");
    return;
}

[BekirBesli]

Thanks giuseeFG

You will need to update app for this process. besides Instead of direct processing from here, you can direct it to an existing javascript function.

-- @Override public void onBackPressed() { this.appView.loadUrl("javascript:backexit();"); return; }

document.addEventListener('backbutton', backexit, false); function backexit(){

 if (leftView.activePage.name != "student") {
      if (document.webkitIsFullScreen == true) {
          document.webkitExitFullscreen();
     }else{
             leftView.router.back();
     }
}else {
   navigator.notification.confirm(translate.alert_message, app.onConfirm,  appName, 
     [translate.no, translate.yes]);
 }

}

[tamsel12]

Where We can add this javascript code @BekirBesli

[GawandeC]

Thanks giuseeFG

You will need to update app for this process. besides Instead of direct processing from here, you can direct it to an existing javascript function.

-- @override public void onBackPressed() { this.appView.loadUrl("javascript:backexit();"); return; }

document.addEventListener('backbutton', backexit, false); function backexit(){

 if (leftView.activePage.name != "student") {
      if (document.webkitIsFullScreen == true) {
          document.webkitExitFullscreen();
     }else{
             leftView.router.back();
     }
}else {
   navigator.notification.confirm(translate.alert_message, app.onConfirm,  appName, 
     [translate.no, translate.yes]);
 }

}

where to add this code??

[BekirBesli]

Thanks giuseeFG You will need to update app for this process. besides Instead of direct processing from here, you can direct it to an existing javascript function.

@override public void onBackPressed() { this.appView.loadUrl("javascript:backexit();"); return; } document.addEventListener('backbutton', backexit, false); function backexit(){

 if (leftView.activePage.name != "student") {
      if (document.webkitIsFullScreen == true) {
          document.webkitExitFullscreen();
     }else{
             leftView.router.back();
     }
}else {
   navigator.notification.confirm(translate.alert_message, app.onConfirm,  appName, 
     [translate.no, translate.yes]);
 }

}

where to add this code??

in the platform MainActivity.java file.

[hammadjamil]

add this in MainActivity.java it works.

@Override
public void onBackPressed() {
    this.appView.loadUrl("javascript:if (document.webkitExitFullscreen) {document.webkitExitFullscreen();}");
    return;
}

Yaayy it worked. Thanks man

[vikasgoyal087]

In android 9 when i try to back button its exist from video full screen but after that back button not working. When we touch on screen after that backbutton working fine.

[PeterWahba]

In android 9 when i try to back button its exist from video full screen but after that back button not working. When we touch on screen after that backbutton working fine.

same here !!

[Hanzofm]

Thanks giuseeFG

You will need to update app for this process. besides Instead of direct processing from here, you can direct it to an existing javascript function. @override public void onBackPressed() { this.appView.loadUrl("javascript:backexit();"); return; } document.addEventListener('backbutton', backexit, false); function backexit(){

 if (leftView.activePage.name != "student") {
      if (document.webkitIsFullScreen == true) {
          document.webkitExitFullscreen();
     }else{
             leftView.router.back();
     }
}else {
   navigator.notification.confirm(translate.alert_message, app.onConfirm,  appName, 
     [translate.no, translate.yes]);
 }

}

where to add this code??

in the platform MainActivity.java file.

The listener and javascript function too?

[BekirBesli]

Thanks giuseeFG

You will need to update app for this process. besides Instead of direct processing from here, you can direct it to an existing javascript function. @override public void onBackPressed() { this.appView.loadUrl("javascript:backexit();"); return; } document.addEventListener('backbutton', backexit, false); function backexit(){

 if (leftView.activePage.name != "student") {
      if (document.webkitIsFullScreen == true) {
          document.webkitExitFullscreen();
     }else{
             leftView.router.back();
     }
}else {
   navigator.notification.confirm(translate.alert_message, app.onConfirm,  appName, 
     [translate.no, translate.yes]);
 }

}

where to add this code??

in the platform MainActivity.java file.

The listener and javascript function too?

Hi; Just add below directory file. APP\platforms\android\src\com\company\appid\MainActivity.java regards.