From 83c59262159e4658260e9c7c6e253d94db356bdd Mon Sep 17 00:00:00 2001
From: Christoph Reiter <reiter.christoph@gmail.com>
Date: Thu, 1 Jul 2021 17:27:43 +0200
Subject: [PATCH] qr-code-scanner: one i18next instance per element
---
.../src/dbp-qr-code-scanner-demo.js | 16 ++++++++--------
packages/qr-code-scanner/src/i18n.js | 6 ++++--
packages/qr-code-scanner/src/qr-code-scanner.js | 15 +++++++++------
3 files changed, 21 insertions(+), 16 deletions(-)
diff --git a/packages/qr-code-scanner/src/dbp-qr-code-scanner-demo.js b/packages/qr-code-scanner/src/dbp-qr-code-scanner-demo.js
index 4b8bd63a..2b78a740 100644
--- a/packages/qr-code-scanner/src/dbp-qr-code-scanner-demo.js
+++ b/packages/qr-code-scanner/src/dbp-qr-code-scanner-demo.js
@@ -1,4 +1,4 @@
-import {i18n} from './i18n';
+import {createInstance} from './i18n';
import {css, html, LitElement} from 'lit-element';
import {ScopedElementsMixin} from '@open-wc/scoped-elements';
import * as commonUtils from '@dbp-toolkit/common/utils';
@@ -8,7 +8,8 @@ import {QrCodeScanner} from './qr-code-scanner.js';
export class QrCodeScannerDemo extends ScopedElementsMixin(LitElement) {
constructor() {
super();
- this.lang = 'de';
+ this._i18n = createInstance();
+ this.lang = this._i18n.language;
}
static get scopedElements() {
@@ -23,12 +24,11 @@ export class QrCodeScannerDemo extends ScopedElementsMixin(LitElement) {
};
}
- connectedCallback() {
- super.connectedCallback();
- i18n.changeLanguage(this.lang);
-
- this.updateComplete.then(()=>{
- });
+ update(changedProperties) {
+ if (changedProperties.has("lang")) {
+ this._i18n.changeLanguage(this.lang);
+ }
+ super.update(changedProperties);
}
static get styles() {
diff --git a/packages/qr-code-scanner/src/i18n.js b/packages/qr-code-scanner/src/i18n.js
index 498d9f03..975c1993 100644
--- a/packages/qr-code-scanner/src/i18n.js
+++ b/packages/qr-code-scanner/src/i18n.js
@@ -1,6 +1,8 @@
-import {createInstance} from '@dbp-toolkit/common/i18next.js';
+import {createInstance as _createInstance} from '@dbp-toolkit/common/i18next.js';
import de from './i18n/de/translation.json';
import en from './i18n/en/translation.json';
-export const i18n = createInstance({en: en, de: de}, 'de', 'en');
\ No newline at end of file
+export function createInstance() {
+ return _createInstance({en: en, de: de}, 'de', 'en');
+}
\ No newline at end of file
diff --git a/packages/qr-code-scanner/src/qr-code-scanner.js b/packages/qr-code-scanner/src/qr-code-scanner.js
index 59bda21b..4b07ef01 100644
--- a/packages/qr-code-scanner/src/qr-code-scanner.js
+++ b/packages/qr-code-scanner/src/qr-code-scanner.js
@@ -1,4 +1,4 @@
-import {i18n} from './i18n';
+import {createInstance} from './i18n';
import {css, html, unsafeCSS} from 'lit-element';
import DBPLitElement from '@dbp-toolkit/common/dbp-lit-element';
import * as commonStyles from '@dbp-toolkit/common/styles';
@@ -33,9 +33,10 @@ function getPrimaryDevice(devices) {
*
* Moreimportant devices first.
*
+ * @param i18n
* @returns {Map<string,string>} the map of devices
*/
-async function getVideoDevices() {
+async function getVideoDevices(i18n) {
let devices_map = new Map();
if (navigator.mediaDevices
&& navigator.mediaDevices.enumerateDevices
@@ -135,7 +136,8 @@ class QRScanner {
export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
constructor() {
super();
- this.lang = 'de';
+ this._i18n = createInstance();
+ this.lang = this._i18n.language;
this._askPermission = false;
this._loading = false;
@@ -181,9 +183,8 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
async connectedCallback() {
super.connectedCallback();
- i18n.changeLanguage(this.lang);
- let devices = await getVideoDevices();
+ let devices = await getVideoDevices(this._i18n);
this._activeCamera = getPrimaryDevice(devices) || '';
this._devices = devices;
@@ -209,7 +210,7 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
changedProperties.forEach((oldValue, propName) => {
switch (propName) {
case "lang":
- i18n.changeLanguage(this.lang);
+ this._i18n.changeLanguage(this.lang);
break;
}
});
@@ -232,6 +233,7 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
}
async _startScanning() {
+ const i18n = this._i18n;
console.assert(this._lock.isLocked());
await this.updateComplete;
@@ -488,6 +490,7 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
}
render() {
+ const i18n = this._i18n;
let hasDevices = this._devices.size > 0;
let showCanvas = this._videoRunning && !this._askPermission && !this._loading;
let noSupportString = checkIosMobileSupport(this._devices) ? i18n.t('no-ios-support') : i18n.t('no-support');
--
GitLab