Skip to content
This repository has been archived by the owner on Aug 27, 2022. It is now read-only.

iPad 2/3 compatibility #47

Closed
andi34 opened this issue Apr 5, 2020 · 22 comments
Closed

iPad 2/3 compatibility #47

andi34 opened this issue Apr 5, 2020 · 22 comments
Labels
information
Milestone
2.8.0

Comments

@andi34
Copy link
Owner

andi34 commented Apr 5, 2020 •
edited
Loading

https://github.com/andi34/photobooth/releases/tag/v2.8.0

Is your feature request related to a problem? Please describe.
Safari Browser on iOS 9 in not compatible with es6.

Using transpiled JavaScript which enables support for Safari 9 - will be added to stable release on v2.8.0

Ready to use package
photobooth-SNAPSHOT.20200808205436739.zip

Update Photobooth
There's 2 ways:

  1. If you have installed Photobooth via git:
    Open a Terminal and navigate into your installation folder, by default /var/www/html:
    cd /var/www/html
    Now fetch latest source and checkout:

    sudo -u www-data -s
git fetch origin
git checkout origin/dev

    Update submodules and build the css files:

    git submodule update --init
yarn install && yarn build

    Once that's done you're ready
    exit

  2. Using a ready to use package:
    Download and extract the package (needs to be a own folder) and open a terminal from that path. Now type the following to update:
    sudo bash update-booth.sh --path="/var/www/html"
    (Adjust path if needed)
    Done :)
@andi34 andi34 added enhancement New feature or request question Further information is requested information and removed enhancement New feature or request question Further information is requested labels Apr 5, 2020
@andi34 andi34 changed the title iPad 2 compatibility iPad 2/3 compatibility May 8, 2020
@andi34
Copy link
Owner Author

andi34 commented May 10, 2020 •
edited
Loading

old information < v2.8

Source changes for reference
98e9055

Limitations
As of v2.3.0 we're using a new translation library which also would need to be reverted to keep Photobooth running on an old iPad.
I am not going to move back on that as it would require to much time on upcoming releases, but maybe if i have enough time i add some of the new features and bugfixes to v2.2 with ipad2/3 compatibility.

Supported browser for v2.3 and newer can be found here:
https://github.com/andi34/photobooth/wiki#browser-support

Initial Issue and explaination

Hi - first, many thanks for this great solution. Thanks a million for creating it and keep it up please, it is excellent - I'm in the process of to build my own photobox and yours is really what I am looking for.

I would like to use my (reasonably old) iPad2 in the photobox, with Photobooth on it. But found that the current master (2.1.0-alpha) is not working on iOS 9.3.5 (latest for iPad2).

Now - I am not at all a Javascript coder but thought I'd give it a try as Photobooth really is a great solution. So having a closer look I think I found three minor adjustments, which together seems make the code work also on iOS9 / Safari 9.

First, Javascript ES6 (https://webkit.org/blog/4054/es6-in-webkit/) is not supported in iOS 9 / Safari 9. As a consequence I

  • replaced let by var instead
  • replaced Arrow Functions () => {....} by a standard function notation function() { ... }

Second, in the Gallery I noticed that when in Photoswipe the feature tapToToggleControls will hide / show the controls (works as designed) but for some reason also prevent buttons from working on iPad2. So i.e. the download button or the qr code button did not work, likely the buttons did not receive a click or touchstart event. The feature default is:

// Tap should toggle visibility of controls
tapToToggleControls: true,

I decided not going deeper in Photoswipe but to switch off this feature in the Photobooth code. Done that in function openPhotoSwipe(), when creating the PhotoSwipe object and for me it works well (actually I prefer the controls visible all the time).

I realize this is a backward compatibiliy topic and maybe not high on the priority list. And this is fine. Yet having done the work, let me share for your possible consideration. I'll add a pull request shortly.

Best,
Jacques42

Final decission
Will not be merged into official stable release.

Going back to es5 is no option in my opinion. Use a transpiler or install some kind of modern browser to your device. We can't support every legacy device and it would prohibit further development

Ready to use packages
OLD VERSIONS:

@andi34 andi34 closed this as completed May 10, 2020
@andi34 andi34 reopened this May 10, 2020
@andi34
Copy link
Owner Author

andi34 commented Jun 6, 2020

Ready to use packages

Based on: https://github.com/andi34/photobooth/commits/860070261a80da2e1ebe4b681a358aac9c853ac5

Includes new options from v2.4.0

@andi34 andi34 mentioned this issue Jun 20, 2020
Closed
@andi34
Copy link
Owner Author

andi34 commented Jul 2, 2020

Ready to use packages

@andi34
Copy link
Owner Author

andi34 commented Jul 9, 2020

Ready to use packages

New options

  • Automatically reload Photobooth if an error occurs while taking a photo/collage (enabled by default)

Bugfixes

  • Fix FC on Standalone Gallery if a keycode is defined to take a photo/collage
  • Close gallery if a keycode is defined to take a photo/collage

General changes

  • update PHPMailer to latest version

@andi34
Copy link
Owner Author

andi34 commented Jul 16, 2020

Ready to use packages

@andi34
Copy link
Owner Author

andi34 commented Jul 29, 2020 •
edited
Loading

Ready to use packages

@andi34
Copy link
Owner Author

andi34 commented Aug 1, 2020

Someone able to test the following package while accessing Photobooth from ipad2?

@jacques42
Copy link
Collaborator

I'm on it - anything particular you want me to pay attention to ?

btw happy to help maintain this package, let me know how I can help more.

@andi34
Copy link
Owner Author

andi34 commented Aug 1, 2020

@jacques42 Would be good to know if it works without issues. If yes we can skip the seperate branch and use one main branch again :) it's based on https://github.com/andi34/photobooth/commits/add-build-pipeline

Andreas Remdt added a transpiler :)

@jacques42
Copy link
Collaborator

@andi34 it's not working out of the box. Text content / translations do not show, In buttons I see empty text fields . On the admin screen I get to see the component text placeholder name (again, not even english).

I may be wrong but looks like as if the Translator class crashes on iPad2. I will do some debugging and see if I can find out what's going on.

@andi34
Copy link
Owner Author

andi34 commented Aug 2, 2020 •
edited
Loading

@jacques42 thanks for testing!
Could you please enable dev mode in Photobooth and check the browser console for errors?
https://www.lifewire.com/activate-the-debug-console-in-safari-445798

@andi34 andi34 mentioned this issue Aug 2, 2020
Closed
@andi34
Copy link
Owner Author

andi34 commented Aug 2, 2020

@jacques42 you can also join https://t.me/PhotoboothGroup if you like to talk about the issue.

@jacques42
Copy link
Collaborator

I found that Safari 9 throws the following error from translator.min.js

ReferenceError: Can't find variable: fetch

After a bit of digging, it looks to me that the root cause may be iOS 9 / Safari 9 did not yet implement the fetch() API (Fetch API compatibility matrix)

There is a polyfill available that from a very first glance could be a solution to backwards compatibility - fetch

The best way I found to debug iPad2 in the Photobooth is actually via USB connected to the Pi it self, and using the instructions right here: remotedebug-ios-webkit-adapter

@andi34
Copy link
Owner Author

andi34 commented Aug 3, 2020

Another one to test which hopefully fixes it

@jacques42
Copy link
Collaborator

jacques42 commented Aug 3, 2020 •
edited
Loading

@andi34 @andreasremdt I've tested the whatwg-fetch polyfill in simple-translator as provided in above snapshot - works great on iOS 9 / iPad2, thanks a million.

I found one more small thing to be adjusted, in order to make it work with Photobooth on iPad2.

There seems to be an Javascript ES6 TypeError in Safari & IE when iterating over a NodeList object using forEach. Along that comment, I tried the following change in the simple-translatorcode-base, file translate.js, member function translatePageTo:

<                     elements.forEach(function(element) {
---
>                     Array.from(elements).forEach(function(element) {

which then made Photobooth translations work perfectly well on iPad2.

I tried to provide a simple PR but was not able to find the repo / branch where the backward compatible code base resides which is included in the snapshot (i.e. no more use of arrow function). If you are ok to take it from here would be great or let me know where to look and I am happy to provide a PR for this change.

Once more thanks for all the support and your willingness to go beyond, and to make it work.

@andreasremdt
Copy link
Collaborator

Hey @jacques42, thanks for the interesting feedback. Indeed, iterating over a NodeList using forEach is not something older browsers support. Since this is a rather small change, I will update Simple Translator today and then update the PR with the fixed version. That should fix it

@andi34
Copy link
Owner Author

andi34 commented Aug 4, 2020

@jacques42 photobooth-2020721710.zip
photobooth-2020721710.tar.gz

@jacques42
Copy link
Collaborator

Yeay - works like a charme 🥇 thank you so much for going that extra mile !

There is two small changes please to be considered - have a look at commit 0e9415e77be6e558116c6d02510fd769b45c8e98

First change is to make translations also work on the admin page - adjusted URL to the whatwg-fetch polyfill module

On the second change, interestingly with changing the default URL references for the background picture, that background picture does load on my iPad2 very nicely. However and to my surprise it does not load on my desktop (Firefox, Chrome). Desktop browsers don't throw an error on the console but also don't show the background picture. Not sure what's going on there.

@andi34
Copy link
Owner Author

andi34 commented Aug 5, 2020

Thanks for the finding!
About the background:
You've tries on an incognitotab? Sometimes the browser cache can cause some trouble.

@andi34
Copy link
Owner Author

andi34 commented Aug 5, 2020

Fixed the whatwg-fetch path also on other pages:
photobooth-SNAPSHOT.20200805035943339.zip

@andi34 andi34 added this to the v2.8.0 milestone Aug 6, 2020
@andi34
Copy link
Owner Author

andi34 commented Aug 8, 2020

neues update, "whatwg-fetch" auf version 3.4.0 upgedated.
photobooth-SNAPSHOT.20200808205436739.zip

@andi34
Copy link
Owner Author

andi34 commented Aug 13, 2020

https://github.com/andi34/photobooth/releases/tag/v2.8.0

@andi34 andi34 closed this as completed Aug 13, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
information
Projects
None yet
Milestone
2.8.0
Development

No branches or pull requests
3 participants
@andreasremdt @andi34 @jacques42