-
Notifications
You must be signed in to change notification settings - Fork 24
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
feat: permissions button on the QR Scanner #729
Conversation
…component-for-staff
…missions_button_scanner
…missions_button_scanner
✅ Deploy Preview for lazuli-stg ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The goat 🐐
I tested and it appeared to be working well. Just two things caught my eye:
- I think it would be a good idea for the permission to be requested as soon as the page opens, instead of the user initially having to click the text to request permission. The text could remain there if permission isn't granted, of course (I think different browsers handle this differently, but in firefox at least, you can't request the same permission multiple times anyway. Idk, what do you think about the whole thing?)
- I think the qr reader would look better if it were also vertically aligned when it doesn't occupy the whole page, since it is the whole content of the page. (It also gets smaller when you zoom out, but that's not really a big deal). I know it isn't extremely important, since 99% of qr reads are through mobile anyway, but still worth discussing
@tiago-bacelar |
Yes, but not at the cost of ease of use. As it is, every time the scanner is used (even if the browser already has the permission) the staff has to click the button to open the camera. It's needlessly repetitive for someone who already knows how the system works, which the staff does. |
Is it asking for your permission after you gave it the first time? It's not supposed to. Are you granting permanent permissions or just session permissions? And which browser are you using to try to replicate? In Firefox if I permanently accept camera access on next loads it will just turn on the camera. |
I already caught the problem. This just happens on Firefox. I will try fix it. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ok, it's working for me now. Just fix the automatic checks and it's ready to merge.
About vertically center the reader, it's done. I needed to change the Layout component to a flex display, so you may want to check the whole page, but what I checked it seems right. The changes are here. About the permissions, due Firefox's ideology, it seems that is not possible to fix that behavior. Firefox doesn't have a permissions API for camera, and the workaround that I was using just with Firefox, also doesn't work with temporary permissions. The solution that I found was to store on a session storage (since just the temporary permissions was creating problems) and if it is true I request the permission. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
All good! 👑
I changed the QRScanner to start verifying with the Browser API if there is any camera with access permissions - if so the camera will be accessed instantly, otherwise, a button will appear and when pressed the permission will be requested (triggering the permission pop up)
I also fixed the text down below the scanner. It was re scanning each 700ms and the message was being replaced during some milliseconds to "Scanning ...". Now the message will just change if the code isn't detected during 700ms, displaying a constant message.
While updating the component call, I did minor changes to some status messages like on the Identifier Page.
Finally I improved the webcam stream performance - the webcam video was being drawn on a alongside with the QRCode square; now the video is being displayed on a