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 4b8bd63a9cd19c061033a41eda7c5e5246159706..2b78a7406b6baed80eb5ba6643882ad86abb6534 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 498d9f037b0a5ca481ec8de5df24640900285808..975c1993e2a567940c74f8d957a6b2a018125548 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 59bda21bbe7d608217691e8b404110f4eb36a8bd..4b07ef0123111d86b55c814547fcb31836bb59bc 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');