Translate camera

web/public/locales/en/translation.json

@@ -8,6 +8,7 @@
     "auto_dark_mode": "Auto Dark Mode",
     "best_image": "Best Image",
     "birdseye": "Birdseye",
+    "bounding_box": "Bounding Box",
     "_camera": "camera",
     "camera": "Camera",
     "cameras": "Cameras",
@@ -32,28 +33,38 @@
     "download_snapshot": "Download Snapshot",
     "events": "Events",
     "github": "GitHub",
+    "hide": "Hide",
     "in_progress": "In Progress",
     "last_month": "Last Month",
     "last_seven_days": "Last Seven Days",
     "light": "Light",
+    "live": "Live",
+    "masks": "Masks",
+    "motion_boxes": "Motion Boxes",
     "motion_masks": "Motion Masks",
     "object_masks": "Object Masks",
+    "options": "Options",
     "recordings": "Recordings",
+    "regions": "Regions",
     "remove": "Remove",
     "restart_frigate": "Restart Frigate",
     "restart_in_progress": "Restart in progress",
     "send_to_frigate_plus": "Send To Frigate+",
     "sent_to_frigate_plus": "Sent To Frigate+",
+    "show": "Show",
     "style_guide": "Style Guide",
     "this_month": "This Month",
     "thumbnail": "Thumbnail",
+    "timestamp": "Timestamp",
     "title_delete_saved_event": "Delete Saved Event?",
-    "title_mask_creation": "{camera} Mask & Zone Creator",
+    "title_mask_creation": "Mask & Zone Creator",
+    "title_mask_creation_camera": "{camera} Mask & Zone Creator",
     "title_no_recordings": "No Recordings Found",
     "today": "Today",
     "toggle_detect": "Toggle Detect",
     "toggle_recordings": "Toggle Recordings",
     "toggle_snapshots": "Toggle Snapshots",
+    "tracked_objects": "Tracked Objects",
     "uploading": "Uploading...",
     "wait_for_restart": "Please wait a few seconds for the restart to complete before reloading the page.",
     "warning": "Warning",

web/src/routes/Camera.jsx

@@ -13,10 +13,12 @@ import { usePersistence } from '../context';
 import { useCallback, useMemo, useState } from 'preact/hooks';
 import { useApiHost } from '../api';
 import useSWR from 'swr';
+import { useTranslation } from 'react-i18next';
 
 const emptyObject = Object.freeze({});
 
 export default function Camera({ camera }) {
+  const { t } = useTranslation();
   const { data: config } = useSWR('config');
   const apiHost = useApiHost();
   const [showSettings, setShowSettings] = useState(false);
@@ -61,33 +63,33 @@ export default function Camera({ camera }) {
         checked={options['bbox']}
         id="bbox"
         onChange={handleSetOption}
-        label="Bounding box"
+        label={t('bounding_box')}
         labelPosition="after"
       />
       <Switch
         checked={options['timestamp']}
         id="timestamp"
         onChange={handleSetOption}
-        label="Timestamp"
+        label={t('timestamp')}
         labelPosition="after"
       />
-      <Switch checked={options['zones']} id="zones" onChange={handleSetOption} label="Zones" labelPosition="after" />
-      <Switch checked={options['mask']} id="mask" onChange={handleSetOption} label="Masks" labelPosition="after" />
+      <Switch checked={options['zones']} id="zones" onChange={handleSetOption} label={t('zones')} labelPosition="after" />
+      <Switch checked={options['mask']} id="mask" onChange={handleSetOption} label={t('masks')} labelPosition="after" />
       <Switch
         checked={options['motion']}
         id="motion"
         onChange={handleSetOption}
-        label="Motion boxes"
+        label={t('motion_boxes')}
         labelPosition="after"
       />
       <Switch
         checked={options['regions']}
         id="regions"
         onChange={handleSetOption}
-        label="Regions"
+        label={t('regions')}
         labelPosition="after"
       />
-      <Link href={`/cameras/${camera}/editor`}>Mask & Zone creator</Link>
+      <Link href={`/cameras/${camera}/editor`}>{t('title_mask_creation')}</Link>
     </div>
   ) : null;
 
@@ -111,9 +113,9 @@ export default function Camera({ camera }) {
           <span className="w-5 h-5">
             <SettingsIcon />
           </span>{' '}
-          <span>{showSettings ? 'Hide' : 'Show'} Options</span>
+          <span>{showSettings ? t('hide') : t('show')} {t('options')}</span>
         </Button>
-        {showSettings ? <Card header="Options" elevated={false} content={optionContent} /> : null}
+        {showSettings ? <Card header={t('options')} elevated={false} content={optionContent} /> : null}
       </Fragment>
     );
   }
@@ -126,7 +128,7 @@ export default function Camera({ camera }) {
       {player}
 
       <div className="space-y-4">
-        <Heading size="sm">Tracked objects</Heading>
+        <Heading size="sm">{t('tracked_objects')}</Heading>
         <div className="flex flex-wrap justify-start">
           {cameraConfig.objects.track.map((objectType) => (
             <Card

web/src/routes/CameraMap.jsx

@@ -200,7 +200,7 @@ ${Object.keys(objectMaskPoints)
 
   return (
     <div className="flex-col space-y-4 p-2 px-4">
-      <Heading size="2xl">{t('title_mask_creation')
+      <Heading size="2xl">{t('title_mask_creation_camera')
         .replace("{camera}", camera.replace("_", " "))
       }
       </Heading>