rzerres/element-call
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Set up translation with i18next

Browse Source
This commit is contained in:
Robin Townsend
2022-10-10 09:19:10 -04:00
parent eca598e28f
commit 8524b9ecd6
55 changed files with 1470 additions and 326 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/home/CallTypeDropdown.tsx
View File

@@ -16,6 +16,7 @@ limitations under the License.
import React, { FC } from "react";
import { Item } from "@react-stately/collections";
import { useTranslation } from "react-i18next";
import { Headline } from "../typography/Typography";
import { Button } from "../button";
@@ -39,25 +40,29 @@ interface Props {
}
export const CallTypeDropdown: FC<Props> = ({ callType, setCallType }) => {
const { t } = useTranslation();
return (
<PopoverMenuTrigger placement="bottom">
<Button variant="dropdown" className={commonStyles.headline}>
<Headline className={styles.label}>
{callType === CallType.Video ? "Video call" : "Walkie-talkie call"}
{callType === CallType.Video
? t("Video call")
: t("Walkie-talkie call")}
</Headline>
</Button>
{(props: JSX.IntrinsicAttributes) => (
<Menu {...props} label="Call type menu" onAction={setCallType}>
<Item key={CallType.Video} textValue="Video call">
<Menu {...props} label={t("Call type menu")} onAction={setCallType}>
<Item key={CallType.Video} textValue={t("Video call")}>
<VideoIcon />
<span>Video call</span>
<span>{t("Video call")}</span>
{callType === CallType.Video && (
<CheckIcon className={menuStyles.checkIcon} />
)}
</Item>
<Item key={CallType.Radio} textValue="Walkie-talkie call">
<Item key={CallType.Radio} textValue={t("Walkie-talkie call")}>
<MicIcon />
<span>Walkie-talkie call</span>
<span>{t("Walkie-talkie call")}</span>
{callType === CallType.Radio && (
<CheckIcon className={menuStyles.checkIcon} />
)}

4
src/home/HomePage.tsx
View File

@@ -15,6 +15,7 @@ limitations under the License.
*/
import React from "react";
import { useTranslation } from "react-i18next";
import { useClient } from "../ClientContext";
import { ErrorView, LoadingView } from "../FullScreenView";
@@ -23,7 +24,8 @@ import { RegisteredView } from "./RegisteredView";
import { usePageTitle } from "../usePageTitle";
export function HomePage() {
usePageTitle("Home");
const { t } = useTranslation();
usePageTitle(t("Home"));
const { isAuthenticated, isPasswordlessUser, loading, error, client } =
useClient();

11
src/home/JoinExistingCallModal.tsx
View File

@@ -16,6 +16,7 @@ limitations under the License.
import React from "react";
import { PressEvent } from "@react-types/shared";
import { useTranslation } from "react-i18next";
import { Modal, ModalContent } from "../Modal";
import { Button } from "../button";
@@ -29,13 +30,15 @@ interface Props {
[index: string]: unknown;
}
export function JoinExistingCallModal({ onJoin, onClose, ...rest }: Props) {
const { t } = useTranslation();
return (
<Modal title="Join existing call?" isDismissable {...rest}>
<Modal title={t("Join existing call?")} isDismissable {...rest}>
<ModalContent>
<p>This call already exists, would you like to join?</p>
<p>{t("This call already exists, would you like to join?")}</p>
<FieldRow rightAlign className={styles.buttons}>
<Button onPress={onClose}>No</Button>
<Button onPress={onJoin}>Yes, join call</Button>
<Button onPress={onClose}>{t("No")}</Button>
<Button onPress={onJoin}>{t("Yes, join call")}</Button>
</FieldRow>
</ModalContent>
</Modal>

12
src/home/RegisteredView.tsx
View File

@@ -22,6 +22,7 @@ import React, {
} from "react";
import { useHistory } from "react-router-dom";
import { MatrixClient } from "matrix-js-sdk/src/client";
import { useTranslation } from "react-i18next";
import { createRoom, roomAliasLocalpartFromRoomName } from "../matrix-utils";
import { useGroupCallRooms } from "./useGroupCallRooms";
@@ -48,6 +49,7 @@ export function RegisteredView({ client, isPasswordlessUser }: Props) {
const [loading, setLoading] = useState(false);
const [error, setError] = useState<Error>();
const history = useHistory();
const { t } = useTranslation();
const { modalState, modalProps } = useModalTriggerState();
const onSubmit: FormEventHandler<HTMLFormElement> = useCallback(
@@ -93,7 +95,9 @@ export function RegisteredView({ client, isPasswordlessUser }: Props) {
}, [history, existingRoomId]);
const callNameLabel =
callType === CallType.Video ? "Video call name" : "Walkie-talkie call name";
callType === CallType.Video
? t("Video call name")
: t("Walkie-talkie call name");
return (
<>
@@ -127,19 +131,19 @@ export function RegisteredView({ client, isPasswordlessUser }: Props) {
className={styles.button}
disabled={loading}
>
{loading ? "Loading..." : "Go"}
{loading ? t("Loading…") : t("Go")}
</Button>
</FieldRow>
{error && (
<FieldRow className={styles.fieldRow}>
<ErrorMessage>{error.message}</ErrorMessage>
<ErrorMessage error={error} />
</FieldRow>
)}
</Form>
{recentRooms.length > 0 && (
<>
<Title className={styles.recentCallsTitle}>
Your recent Calls
{t("Your recent calls")}
</Title>
<CallList rooms={recentRooms} client={client} disableFacepile />
</>

32
src/home/UnauthenticatedView.tsx
View File

@@ -17,6 +17,7 @@ limitations under the License.
import React, { FC, useCallback, useState, FormEventHandler } from "react";
import { useHistory } from "react-router-dom";
import { randomString } from "matrix-js-sdk/src/randomstring";
import { Trans, useTranslation } from "react-i18next";
import { useClient } from "../ClientContext";
import { Header, HeaderLogo, LeftNav, RightNav } from "../Header";
@@ -47,6 +48,7 @@ export const UnauthenticatedView: FC = () => {
const { modalState, modalProps } = useModalTriggerState();
const [onFinished, setOnFinished] = useState<() => void>();
const history = useHistory();
const { t } = useTranslation();
const onSubmit: FormEventHandler<HTMLFormElement> = useCallback(
(e) => {
@@ -105,7 +107,9 @@ export const UnauthenticatedView: FC = () => {
);
const callNameLabel =
callType === CallType.Video ? "Video call name" : "Walkie-talkie call name";
callType === CallType.Video
? t("Video call name")
: t("Walkie-talkie call name");
return (
<>
@@ -137,24 +141,26 @@ export const UnauthenticatedView: FC = () => {
<InputField
id="displayName"
name="displayName"
label="Display Name"
placeholder="Display Name"
label={t("Display name")}
placeholder={t("Display name")}
type="text"
required
autoComplete="off"
/>
</FieldRow>
<Caption>
By clicking "Go", you agree to our{" "}
<Link href={privacyPolicyUrl}>Terms and conditions</Link>
<Trans>
By clicking "Go", you agree to our{" "}
<Link href={privacyPolicyUrl}>Terms and conditions</Link>
</Trans>
</Caption>
{error && (
<FieldRow>
<ErrorMessage>{error.message}</ErrorMessage>
<ErrorMessage error={error} />
</FieldRow>
)}
<Button type="submit" size="lg" disabled={loading}>
{loading ? "Loading..." : "Go"}
{loading ? t("Loading…") : t("Go")}
</Button>
<div id={recaptchaId} />
</Form>
@@ -162,14 +168,16 @@ export const UnauthenticatedView: FC = () => {
<footer className={styles.footer}>
<Body className={styles.mobileLoginLink}>
<Link color="primary" to="/login">
Login to your account
{t("Login to your account")}
</Link>
</Body>
<Body>
Not registered yet?{" "}
<Link color="primary" to="/register">
Create an account
</Link>
<Trans>
Not registered yet?{" "}
<Link color="primary" to="/register">
Create an account
</Link>
</Trans>
</Body>
</footer>
</div>