Set up translation with i18next

src/video-grid/VideoTile.tsx

@@ -17,6 +17,7 @@ limitations under the License.
 import React, { forwardRef } from "react";
 import { animated } from "@react-spring/web";
 import classNames from "classnames";
+import { useTranslation } from "react-i18next";
 
 import styles from "./VideoTile.module.css";
 import { ReactComponent as MicMutedIcon } from "../icons/MicMuted.svg";
@@ -66,6 +67,8 @@ export const VideoTile = forwardRef<HTMLDivElement, Props>(
     },
     ref
   ) => {
+    const { t } = useTranslation();
+
     const toolbarButtons: JSX.Element[] = [];
     if (!isLocal) {
       toolbarButtons.push(
@@ -111,7 +114,7 @@ export const VideoTile = forwardRef<HTMLDivElement, Props>(
         {!maximised &&
           (screenshare ? (
             <div className={styles.presenterLabel}>
-              <span>{`${name} is presenting`}</span>
+              <span>{t("{{name}} is presenting", { name })}</span>
             </div>
           ) : (
             <div className={classNames(styles.infoBubble, styles.memberName)}>

src/video-grid/VideoTileSettingsModal.tsx

@@ -16,6 +16,7 @@ limitations under the License.
 
 import React, { ChangeEvent, useState } from "react";
 import { CallFeed } from "matrix-js-sdk/src/webrtc/callFeed";
+import { useTranslation } from "react-i18next";
 
 import { FieldRow } from "../input/Input";
 import { Modal } from "../Modal";
@@ -61,10 +62,12 @@ interface Props {
 }
 
 export const VideoTileSettingsModal = ({ feed, ...rest }: Props) => {
+  const { t } = useTranslation();
+
   return (
     <Modal
       className={styles.videoTileSettingsModal}
-      title="Local volume"
+      title={t("Local volume")}
       isDismissable
       mobileFullScreen
       {...rest}