[Fixed]: Scanning modal remains open and blank when camera access is denied (#329) #406
Conversation
…denied (hotwax#329) Introduced an alert pop-up for the case of camera access permission denied. Added hasCameraAccess to track camera permission status. Implemented a method to request camera access and show an alert if access is denied. The barcode scanner now only loads when camera access is granted.
|
Thanks for the contribution @coolnj4 PR looks good, but I will suggest some improvements here:
|
|
I can't seem to find the parent component from which the Scanner component is being triggered. Can you please guide me through it? |
Its on the ShipmentDetails, ReturnDetails and PurchaseOrderDetails page. So you need to handle this change in all the three views. |
…tatic text for product scanning modal (hotwax#329) Moved the 'hasCameraAccess' check to the parent components (ShipmentDetails, ReturnDetails, and PurchaseOrderDetails), ensuring consistent handling of camera permissions across all views. Also, updated static text with the translate function to support internationalization, improving usability for global users.
|
I’ve implemented the suggested changes let me know if there’s anything else you'd like me to adjust! |
| @@ -268,6 +269,10 @@ export default defineComponent({ | |||
| this.queryString = '' | |||
| }, | |||
| async scanCode () { | |||
| if (!hasCameraAccess()) { | |||
| showToast(translate("Camera access is required to scan items.")); | |||
There was a problem hiding this comment.
As we are having a toast message in the hasCameraAccess function, so we do not need to have another toast here. From here we can simply return the flow without any toast or log.
| <div class="scanner"> | ||
| <!-- Conditionally render the "Start Scanning" button based on camera access --> | ||
| <ion-button v-if="!hasCameraAccess" @click="openScanner">Start Scanning</ion-button> |
There was a problem hiding this comment.
We do not need to make any change in this component, because once we have added the check of camera access in the parent component then this component will not open and thus there is no use of having any checks in this component.
| try { | ||
| const stream = await navigator.mediaDevices.getUserMedia({ video: true }); | ||
| if (stream) { | ||
| showToast(translate('Camera access granted.')); |
There was a problem hiding this comment.
We do not need to display toast when the user has camera permission, because if the camera permission is already provided, then the modal will open up, and then displaying a toast will be a redundant behaviour.
There was a problem hiding this comment.
Also, I think we can remove the stream check from here
| @@ -249,6 +250,10 @@ export default defineComponent({ | |||
| return imageModal.present(); | |||
| }, | |||
| async scan() { | |||
| if (!hasCameraAccess()) { | |||
| showToast(translate("Camera access is required to scan items.")); | |||
There was a problem hiding this comment.
Same as ReturnDetails.
Related Issues
Modal remains blank and open when camera access is denied during product scanning #329
hotwax/dxp-components#329
Short Description and Why It's Useful
Introduced an alert pop-up for the case of camera access permission denied. Added hasCameraAccess to track camera permission status.
Implemented a method to request camera access and show an alert if access is denied. The barcode scanner now only loads when camera access is granted.
Screenshots of Visual Changes before/after (If There Are Any)
Before if camera permission is denied
After
Contribution and Currently Important Rules Acceptance