mirror of
https://github.com/vector-im/element-call.git
synced 2026-09-22 22:29:30 +00:00
Valere
7485b3d71f
Element Call configured the global i18next singleton. When Element Call runs embedded in a host application rather than as its own page, that singleton belongs to the host, so configuring it would clobber the host's translations. Create Element Call's own instance in utils/i18n.ts, configure it in the initializer, and pass it to components via <I18nextProvider>. Drop .use(initReactI18next) from the initializer: it registers the instance as react-i18next's global default, which is the global we are trying to avoid. Tests and stories keep using it, so that they do not need to wrap every render in a provider. Two modules imported `t` directly from "i18next" and so were bound to the global instance: utils/errors.ts now calls i18n.t() on the instance (reached at call time, since i18next only assigns `t` during init), and QrCode uses useTranslation() like every other component. No functional change.
50 lines
1.1 KiB
TypeScript
50 lines
1.1 KiB
TypeScript
/*
|
|
Copyright 2024 New Vector Ltd.
|
|
|
|
SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
|
|
Please see LICENSE in the repository root for full details.
|
|
*/
|
|
|
|
import { type FC, useEffect, useState } from "react";
|
|
import { toDataURL } from "qrcode";
|
|
import classNames from "classnames";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
import styles from "./QrCode.module.css";
|
|
|
|
interface Props {
|
|
data: string;
|
|
className?: string;
|
|
}
|
|
|
|
export const QrCode: FC<Props> = ({ data, className }) => {
|
|
const { t } = useTranslation();
|
|
const [url, setUrl] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
let isCancelled = false;
|
|
|
|
toDataURL(data, { errorCorrectionLevel: "L" })
|
|
.then((url) => {
|
|
if (!isCancelled) {
|
|
setUrl(url);
|
|
}
|
|
})
|
|
.catch((reason) => {
|
|
if (!isCancelled) {
|
|
setUrl(null);
|
|
}
|
|
});
|
|
|
|
return (): void => {
|
|
isCancelled = true;
|
|
};
|
|
}, [data]);
|
|
|
|
return (
|
|
<div className={classNames(styles.qrCode, className)}>
|
|
{url && <img src={url} alt={t("qr_code")} />}
|
|
</div>
|
|
);
|
|
};
|