From 0ed764664209d4d6a9d88daa8e80c8a144ad46db Mon Sep 17 00:00:00 2001 From: Tamara Steinwender <tamara.steinwender@tugraz.at> Date: Mon, 9 Nov 2020 12:43:00 +0100 Subject: [PATCH] Add ios warning when using wrong browser in QR code scanner --- .../src/i18n/de/translation.json | 1 + .../src/i18n/en/translation.json | 1 + .../qr-code-scanner/src/qr-code-scanner.js | 18 ++++++++++++++++++ 3 files changed, 20 insertions(+) diff --git a/packages/qr-code-scanner/src/i18n/de/translation.json b/packages/qr-code-scanner/src/i18n/de/translation.json index d93cd733..4f39bf3a 100644 --- a/packages/qr-code-scanner/src/i18n/de/translation.json +++ b/packages/qr-code-scanner/src/i18n/de/translation.json @@ -4,6 +4,7 @@ "loading-video": "Video laden ...", "no-qr-detected": "Kein QR-Code erkannt.", "no-support": "Ihr Browser unterstützt keine Videoaufnahmen.", + "no-ios-support": "Ihr Browser unterstützt keine Videoaufnahmen. Bitte verwenden Sie Safari.", "data": "Inhalt", "camera": "Kamera ", "front-camera": "Vordere Kamera", diff --git a/packages/qr-code-scanner/src/i18n/en/translation.json b/packages/qr-code-scanner/src/i18n/en/translation.json index 9e514757..c0d34284 100644 --- a/packages/qr-code-scanner/src/i18n/en/translation.json +++ b/packages/qr-code-scanner/src/i18n/en/translation.json @@ -4,6 +4,7 @@ "loading-video": "⌛ Loading video...", "no-qr-detected": "No QR code detected.", "no-support": "Your browser does not support video recording.", + "no-ios-support": "Your browser does not support video recording. Please use Safari.", "data": "Data", "camera": "Camera ", "front-camera": "Frontcamera", diff --git a/packages/qr-code-scanner/src/qr-code-scanner.js b/packages/qr-code-scanner/src/qr-code-scanner.js index fdafcaf3..2fe6476b 100644 --- a/packages/qr-code-scanner/src/qr-code-scanner.js +++ b/packages/qr-code-scanner/src/qr-code-scanner.js @@ -66,6 +66,18 @@ async function getVideoDevices() { } } +/** + * Checks if user Agent is IOS, but not Safari browser + * + * @param {string} devices_map + * @returns {object|null} a video element or null + */ +async function checkIosMobileSupport(devices_map) { + if ( !(devices_map.size > 0) && /iPhone|iPad|iPod/i.test(navigator.userAgent)) { + this._iosMobileSupport = false; + } +} + /** * @param {string} deviceId * @returns {object|null} a video element or null @@ -132,6 +144,7 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) { this._activeCamera = ''; this._devices = new Map(); + this._iosMobileSupport = true; this._requestID = null; this._loadingMessage = ''; @@ -158,6 +171,7 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) { _activeCamera: { type: String, attribute: false }, _loading: { type: Boolean, attribute: false }, _devices: { type: Map, attribute: false}, + _iosMobileSupport: { type: Boolean, attribute: false}, _loadingMessage: { type: String, attribute: false }, _outputData: { type: String, attribute: false }, _askPermission: { type: Boolean, attribute: false }, @@ -172,6 +186,7 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) { let devices = await getVideoDevices(); this._activeCamera = getPrimaryDevice(devices) || ''; this._devices = devices; + await checkIosMobileSupport(devices); if (!this.stopScan) { await this.startScanning(); @@ -511,6 +526,9 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) { <div class="${classMap({hidden: hasDevices})}"> ${i18n.t('no-support')} </div> + <div class="${classMap({hidden: this._iosMobileSupport})}"> + ${i18n.t('no-ios-support')} + </div> </div> </div> `; -- GitLab