andreknieriem / photobooth

A photobooth Web-Application for raspberry pi with gphoto2
https://photobooth.andrerinas.de/
MIT License
300 stars 163 forks source link

How to close the browser when using Gallery in standalone mode #215

Closed djtale closed 4 years ago

djtale commented 4 years ago

Is your feature request related to a problem? Please describe.

Hello, I'm using your code for the gallery feature and based on the FAQ, i'm using this : "Open http://localhost/gallery.php in your browser (you can replace localhost with your IP adress)."

I have changed a little the gallery.php code to keep the close icon displayed on top right.

I would like to be able to close the gallery (and the browser) when I click on the cross icon. But I'm having javascript error which is : "Scripts may close only the windows that were opened by it."

This error is displayed ONLY when I click on a picture first and then close the image div, and try to close the gallery.

Describe the solution you'd like I would like to have a button to close the gallery when running it in standalone and fullscreen.

Describe alternatives you've considered I have tried many javascript codes found on the web such as : window.open("", "_self";""); window.close();

Or also tried to call another page on which there would be a button to close the browser.

Additional context

Thanks for helping.

andi34 commented 4 years ago

Use Gallery from start Page if you don't need the standalone gallery. Else modify the gallery.php.

https://github.com/andreknieriem/photobooth/blob/master/gallery.php#L98

Remove or comment out photoBooth.openGallery();

djtale commented 4 years ago

Hi andi34,

I will clarify my need because I still can't resolve it by myself. I'm using a python script for photobooth. I'm using your script as a gallery because it looks userfriendly and has just the features I need. proc=subprocess.Popen(["chromium-browser","--incognito","--kiosk","http://localhost/photobooth/gallery.php"],stdout=subprocess.PIPE) So from my python cpde, I'm calling

This open chromium in fullscreen with the gallery. In gallery.php, I have changed $('.galleryclose').hide(); with $('.galleryclose').show();

Here is the behvior I observe. If I click on the close button, it works fine. But as soon as I click on a thumbnail, and close the image displayed, then when I click on the close_gallery button, the gallery just disappears and I'm stuck with the background.

And if I wait for a while, a gallery is reloaded but if I click on the close_gallery button, same behavior : stuck with the background.

I know this is not the standard way to use your script but I would like to understand why after displayed an image, the close_gallery button doesn't work.

andi34 commented 4 years ago

On standalone gallery we don't want to close the gallery, on reload via reload button the gallery will refresh.

If you like to have the close button make sure to not add the refresh button and add the gallery button https://github.com/andreknieriem/photobooth/blob/master/index.php#L48 so you have it instead a background only if you close it.

(The reload button is sitting on same position as the close button. Could explain why sometimes it's refreshing and sometimes closing if you have both)

andi34 commented 4 years ago

Maybe interesting for you as the close gallery button also won't close the window: https://stackoverflow.com/questions/19761241/window-close-and-self-close-do-not-close-the-window-in-chrome/19768082#19768082

andi34 commented 4 years ago
        $(function() {
            let reloadElement = $('<a class="gallery__reload">');
            reloadElement.append('<i class="fa fa-refresh"></i>');
            reloadElement.attr('href', '#');
            reloadElement.on('click', function() { 
                            window.open('','_parent','');
                            window.close();
            });
                        reloadElement.appendTo('.gallery__header');

            $('.gallery__close').hide();

            photoBooth.openGallery();
        });

Does this work to close the window? Just mobile and can't test myself.

djtale commented 4 years ago

Hi @andi34 and thanks for considering my message.

I tried your code above. With this, the close button is replaced by the refresh button. Closing browser by clicking on Refresh button works only if I don't open an image. Same behavior as when I replace the refresh with the close button.

Here is the code in gallery.php image

And here is a short recording for showing you the issue. I'm aware of the security on javascript. And that's why I'm also trying a workaround by calling first an own-made open.php file with image

Same issue with that.

Here is a short recording of what I'm observing. https://photos.app.goo.gl/1LKxokaLuAZ8MM128

andi34 commented 4 years ago

Try the "child" trick: https://medium.com/javascript-in-plain-english/closing-a-window-with-javascript-beeec56344bb

andi34 commented 4 years ago

And maybe you like to push your project to GitHub and open an issue there. This one here should only be for this Photobooth project ;)