Translate camera

This commit is contained in:
Nick Mowen 2022-08-27 11:16:53 -06:00
parent 907b3752e1
commit b74f142e55
2 changed files with 12 additions and 7 deletions

View File

@ -45,6 +45,9 @@
"title_delete_saved_event": "Delete Saved Event?", "title_delete_saved_event": "Delete Saved Event?",
"title_no_recordings": "No Recordings Found", "title_no_recordings": "No Recordings Found",
"today": "Today", "today": "Today",
"toggle_detect": "Toggle Detect",
"toggle_recordings": "Toggle Recordings",
"toggle_snapshots": "Toggle Snapshots",
"uploading": "Uploading...", "uploading": "Uploading...",
"wait_for_restart": "Please wait a few seconds for the restart to complete before reloading the page.", "wait_for_restart": "Please wait a few seconds for the restart to complete before reloading the page.",
"yes": "Yes", "yes": "Yes",

View File

@ -8,6 +8,7 @@ import SnapshotIcon from '../icons/Snapshot';
import { useDetectState, useRecordingsState, useSnapshotsState } from '../api/mqtt'; import { useDetectState, useRecordingsState, useSnapshotsState } from '../api/mqtt';
import { useMemo } from 'preact/hooks'; import { useMemo } from 'preact/hooks';
import useSWR from 'swr'; import useSWR from 'swr';
import { useTranslation } from 'react-i18next';
export default function Cameras() { export default function Cameras() {
const { data: config } = useSWR('config'); const { data: config } = useSWR('config');
@ -40,16 +41,17 @@ function SortedCameras({ unsortedCameras }) {
} }
function Camera({ name }) { function Camera({ name }) {
const { t } = useTranslation();
const { payload: detectValue, send: sendDetect } = useDetectState(name); const { payload: detectValue, send: sendDetect } = useDetectState(name);
const { payload: recordValue, send: sendRecordings } = useRecordingsState(name); const { payload: recordValue, send: sendRecordings } = useRecordingsState(name);
const { payload: snapshotValue, send: sendSnapshots } = useSnapshotsState(name); const { payload: snapshotValue, send: sendSnapshots } = useSnapshotsState(name);
const href = `/cameras/${name}`; const href = `/cameras/${name}`;
const buttons = useMemo(() => { const buttons = useMemo(() => {
return [ return [
{ name: 'Events', href: `/events?camera=${name}` }, { name: `${t('events')}`, href: `/events?camera=${name}` },
{ name: 'Recordings', href: `/recording/${name}` }, { name: `${t('recordings')}`, href: `/recording/${name}` },
]; ];
}, [name]); }, [name, t]);
const cleanName = useMemo( const cleanName = useMemo(
() => { return `${name.replaceAll('_', ' ')}` }, () => { return `${name.replaceAll('_', ' ')}` },
[name] [name]
@ -57,7 +59,7 @@ function Camera({ name }) {
const icons = useMemo( const icons = useMemo(
() => [ () => [
{ {
name: `Toggle detect ${detectValue === 'ON' ? 'off' : 'on'}`, name: `${t('toggle_detect')} ${detectValue === 'ON' ? 'Off' : 'On'}`,
icon: MotionIcon, icon: MotionIcon,
color: detectValue === 'ON' ? 'blue' : 'gray', color: detectValue === 'ON' ? 'blue' : 'gray',
onClick: () => { onClick: () => {
@ -65,7 +67,7 @@ function Camera({ name }) {
}, },
}, },
{ {
name: `Toggle recordings ${recordValue === 'ON' ? 'off' : 'on'}`, name: `${t('toggle_recordings')} ${recordValue === 'ON' ? 'Off' : 'On'}`,
icon: ClipIcon, icon: ClipIcon,
color: recordValue === 'ON' ? 'blue' : 'gray', color: recordValue === 'ON' ? 'blue' : 'gray',
onClick: () => { onClick: () => {
@ -73,7 +75,7 @@ function Camera({ name }) {
}, },
}, },
{ {
name: `Toggle snapshots ${snapshotValue === 'ON' ? 'off' : 'on'}`, name: `${t('toggle_snapshots')} ${snapshotValue === 'ON' ? 'Off' : 'On'}`,
icon: SnapshotIcon, icon: SnapshotIcon,
color: snapshotValue === 'ON' ? 'blue' : 'gray', color: snapshotValue === 'ON' ? 'blue' : 'gray',
onClick: () => { onClick: () => {
@ -81,7 +83,7 @@ function Camera({ name }) {
}, },
}, },
], ],
[detectValue, sendDetect, recordValue, sendRecordings, snapshotValue, sendSnapshots] [detectValue, sendDetect, recordValue, sendRecordings, snapshotValue, sendSnapshots, t]
); );
return ( return (