administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-05-06 05:27:44 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Translation module init

Browse Source
This commit is contained in:
ZhaiSoul 2025-03-02 00:12:40 +08:00
parent 458134de5d
commit f73281c554
76 changed files with 2942 additions and 734 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

143
web/package-lock.json generated
View File

@ -41,6 +41,8 @@
"embla-carousel-react": "^8.2.0",
"framer-motion": "^11.5.4",
"hls.js": "^1.5.17",
"i18next": "^24.2.0",
"i18next-http-backend": "^3.0.1",
"idb-keyval": "^6.2.1",
"immer": "^10.1.1",
"konva": "^9.3.16",
@ -56,6 +58,7 @@
"react-dom": "^18.3.1",
"react-grid-layout": "^1.5.0",
"react-hook-form": "^7.52.1",
"react-i18next": "^15.2.0",
"react-icons": "^5.2.1",
"react-konva": "^18.2.10",
"react-router-dom": "^6.26.0",
@ -189,9 +192,10 @@
}
},
"node_modules/@babel/runtime": {
"version": "7.24.4",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.4.tgz",
"integrity": "sha512-dkxf7+hn8mFBwKjs9bvBlArzLVxVbS8usaPUDd5p2a9JCL9tB8OaOVN1isD4+Xyk4ns89/xeOmbQvgdK7IIVdA==",
"version": "7.26.0",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.0.tgz",
"integrity": "sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==",
"license": "MIT",
"dependencies": {
"regenerator-runtime": "^0.14.0"
},
@ -4544,6 +4548,15 @@
"toggle-selection": "^1.0.6"
}
},
"node_modules/cross-fetch": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-4.0.0.tgz",
"integrity": "sha512-e4a5N8lVvuLgAWgnCrLr2PP0YyDOTHa9H/Rj54dirp61qXnNq46m82bRhNqIA5VccJtWBvPTFRV3TtvHUKPB1g==",
"license": "MIT",
"dependencies": {
"node-fetch": "^2.6.12"
}
},
"node_modules/cross-spawn": {
"version": "7.0.3",
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@ -5716,6 +5729,15 @@
"dev": true,
"license": "MIT"
},
"node_modules/html-parse-stringify": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
"integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
"license": "MIT",
"dependencies": {
"void-elements": "3.1.0"
}
},
"node_modules/http-proxy-agent": {
"version": "7.0.2",
"resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
@ -5753,6 +5775,46 @@
"node": ">=16.17.0"
}
},
"node_modules/i18next": {
"version": "24.2.0",
"resolved": "https://registry.npmjs.org/i18next/-/i18next-24.2.0.tgz",
"integrity": "sha512-ArJJTS1lV6lgKH7yEf4EpgNZ7+THl7bsGxxougPYiXRTJ/Fe1j08/TBpV9QsXCIYVfdE/HWG/xLezJ5DOlfBOA==",
"funding": [
{
"type": "individual",
"url": "https://locize.com"
},
{
"type": "individual",
"url": "https://locize.com/i18next.html"
},
{
"type": "individual",
"url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
}
],
"license": "MIT",
"dependencies": {
"@babel/runtime": "^7.23.2"
},
"peerDependencies": {
"typescript": "^5"
},
"peerDependenciesMeta": {
"typescript": {
"optional": true
}
}
},
"node_modules/i18next-http-backend": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/i18next-http-backend/-/i18next-http-backend-3.0.1.tgz",
"integrity": "sha512-XT2lYSkbAtDE55c6m7CtKxxrsfuRQO3rUfHzj8ZyRtY9CkIX3aRGwXGTkUhpGWce+J8n7sfu3J0f2wTzo7Lw0A==",
"license": "MIT",
"dependencies": {
"cross-fetch": "4.0.0"
}
},
"node_modules/idb-keyval": {
"version": "6.2.1",
"resolved": "https://registry.npmjs.org/idb-keyval/-/idb-keyval-6.2.1.tgz",
@ -6677,6 +6739,48 @@
"react-dom": "^16.8 || ^17 || ^18"
}
},
"node_modules/node-fetch": {
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
"integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
"license": "MIT",
"dependencies": {
"whatwg-url": "^5.0.0"
},
"engines": {
"node": "4.x || >=6.0.0"
},
"peerDependencies": {
"encoding": "^0.1.0"
},
"peerDependenciesMeta": {
"encoding": {
"optional": true
}
}
},
"node_modules/node-fetch/node_modules/tr46": {
"version": "0.0.3",
"resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
"integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
"license": "MIT"
},
"node_modules/node-fetch/node_modules/webidl-conversions": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
"integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
"license": "BSD-2-Clause"
},
"node_modules/node-fetch/node_modules/whatwg-url": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
"integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
"license": "MIT",
"dependencies": {
"tr46": "~0.0.3",
"webidl-conversions": "^3.0.0"
}
},
"node_modules/node-releases": {
"version": "2.0.18",
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.18.tgz",
@ -7468,6 +7572,28 @@
"react": "^16.8.0 || ^17 || ^18 || ^19"
}
},
"node_modules/react-i18next": {
"version": "15.2.0",
"resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-15.2.0.tgz",
"integrity": "sha512-iJNc8111EaDtVTVMKigvBtPHyrJV+KblWG73cUxqp+WmJCcwkzhWNFXmkAD5pwP2Z4woeDj/oXDdbjDsb3Gutg==",
"license": "MIT",
"dependencies": {
"@babel/runtime": "^7.25.0",
"html-parse-stringify": "^3.0.1"
},
"peerDependencies": {
"i18next": ">= 23.2.3",
"react": ">= 16.8.0"
},
"peerDependenciesMeta": {
"react-dom": {
"optional": true
},
"react-native": {
"optional": true
}
}
},
"node_modules/react-icons": {
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.2.1.tgz",
@ -8774,7 +8900,7 @@
"version": "5.5.4",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.4.tgz",
"integrity": "sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==",
"dev": true,
"devOptional": true,
"license": "Apache-2.0",
"bin": {
"tsc": "bin/tsc",
@ -9155,6 +9281,15 @@
}
}
},
"node_modules/void-elements": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
"integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==",
"license": "MIT",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/vscode-jsonrpc": {
"version": "8.2.0",
"resolved": "https://registry.npmjs.org/vscode-jsonrpc/-/vscode-jsonrpc-8.2.0.tgz",

3
web/package.json
View File

@ -47,6 +47,8 @@
"embla-carousel-react": "^8.2.0",
"framer-motion": "^11.5.4",
"hls.js": "^1.5.17",
"i18next": "^24.2.0",
"i18next-http-backend": "^3.0.1",
"idb-keyval": "^6.2.1",
"immer": "^10.1.1",
"konva": "^9.3.16",
@ -62,6 +64,7 @@
"react-dom": "^18.3.1",
"react-grid-layout": "^1.5.0",
"react-hook-form": "^7.52.1",
"react-i18next": "^15.2.0",
"react-icons": "^5.2.1",
"react-konva": "^18.2.10",
"react-router-dom": "^6.26.0",

620
web/public/locales/en/translation.json Normal file
View File

@ -0,0 +1,620 @@
{
"object.person": "Person",
"object.bicycle": "Bicycle",
"object.car": "Car",
"object.motorcycle": "Motorcycle",
"object.airplane": "Airplane",
"object.bus": "Bus",
"object.train": "Train",
"object.boat": "Boat",
"object.traffic_light": "Traffic Light",
"object.fire_hydrant": "Fire Hydrant",
"object.street_sign": "Street Sign",
"object.stop_sign": "Stop Sign",
"object.parking_meter": "Parking Meter",
"object.bench": "Bench",
"object.bird": "Bird",
"object.cat": "Cat",
"object.dog": "Dog",
"object.horse": "Horse",
"object.sheep": "Sheep",
"object.cow": "Cow",
"object.elephant": "Elephant",
"object.bear": "Bear",
"object.zebra": "Zebra",
"object.giraffe": "Giraffe",
"object.hat": "Hat",
"object.backpack": "Backpack",
"object.umbrella": "Umbrella",
"object.shoe": "Shoe",
"object.eye_glasses": "Eye Glasses",
"object.handbag": "Handbag",
"object.tie": "Tie",
"object.suitcase": "Suitcase",
"object.frisbee": "Frisbee",
"object.skis": "Skis",
"object.snowboard": "Snowboard",
"object.sports_ball": "Sports Ball",
"object.kite": "Kite",
"object.baseball_bat": "Baseball Bat",
"object.baseball_glove": "Baseball Glove",
"object.skateboard": "Skateboard",
"object.surfboard": "Surfboard",
"object.tennis_racket": "Tennis Racket",
"object.bottle": "Bottle",
"object.plate": "Plate",
"object.wine_glass": "Wine Glass",
"object.cup": "Cup",
"object.fork": "Fork",
"object.knife": "Knife",
"object.spoon": "Spoon",
"object.bowl": "Bowl",
"object.banana": "Banana",
"object.apple": "Apple",
"object.sandwich": "Sandwich",
"object.orange": "Orange",
"object.broccoli": "Broccoli",
"object.carrot": "Carrot",
"object.hot_dog": "Hot Dog",
"object.pizza": "Pizza",
"object.donut": "Donut",
"object.cake": "Cake",
"object.chair": "Chair",
"object.couch": "Couch",
"object.potted_plant": "Potted Plant",
"object.bed": "Bed",
"object.mirror": "Mirror",
"object.dining_table": "Dining Table",
"object.window": "Window",
"object.desk": "Desk",
"object.toilet": "Toilet",
"object.door": "Door",
"object.tv": "TV",
"object.laptop": "Laptop",
"object.mouse": "Mouse",
"object.remote": "Remote",
"object.keyboard": "Keyboard",
"object.cell_phone": "Cell Phone",
"object.microwave": "Microwave",
"object.oven": "Oven",
"object.toaster": "Toaster",
"object.sink": "Sink",
"object.refrigerator": "Refrigerator",
"object.blender": "Blender",
"object.book": "Book",
"object.clock": "Clock",
"object.vase": "Vase",
"object.scissors": "Scissors",
"object.teddy_bear": "Teddy Bear",
"object.hair_dryer": "Hair Dryer",
"object.toothbrush": "Toothbrush",
"object.hair_brush": "Hair Brush",
"object.vehicle": "Vehicle",
"object.squirrel": "Squirrel",
"object.deer": "Deer",
"object.animal": "Animal",
"object.bark": "Bark",
"object.fox": "Fox",
"object.goat": "Goat",
"object.rabbit": "Rabbit",
"object.raccoon": "Raccoon",
"object.robot_lawnmower": "Robot Lawnmower",
"object.waste_bin": "Waste bin",
"object.on_demand": "On_demand",
"audio.crying": "Crying",
"audio.laughter": "Laughter",
"audio.scream": "Scream",
"audio.speech": "Speech",
"audio.yell": "Yell",
"audio.fire_alarm": "Fire alarm",
"ui.time.ago": "{{timeAgo}} ago",
"ui.time.justNow": "Just now",
"ui.time.today": "Today",
"ui.time.yesterday": "Yesterday",
"ui.time.last7": "Last 7 days",
"ui.time.last14": "Last 14 days",
"ui.time.last30": "Last 30 days",
"ui.time.thisWeek": "This Week",
"ui.time.lastWeek": "Last Week",
"ui.time.thisMonth": "This Month",
"ui.time.lastMonth": "Last Month",
"ui.time.pm": "pm",
"ui.time.am": "am",
"ui.time.yr": "{{time}}yr",
"ui.time.year": "{{time}} years",
"ui.time.mo": "{{time}}mo",
"ui.time.month": "{{time}} months",
"ui.time.d": "{{time}}d",
"ui.time.day": "{{time}} days",
"ui.time.h": "{{time}}h",
"ui.time.hour": "{{time}} hours",
"ui.time.m": "{{time}}m",
"ui.time.minute": "{{time}} minutes",
"ui.time.s": "s",
"ui.time.second": "{{time}} seconds",
"ui.time.formattedTimestamp": "%b %-d, %I:%M:%S %p",
"ui.time.formattedTimestamp.24hour": "%b %-d, %H:%M:%S",
"ui.time.formattedTimestampExcludeSeconds": "%b %-d, %I:%M %p",
"ui.time.formattedTimestampExcludeSeconds.24hour": "%b %-d, %H:%M",
"ui.time.formattedTimestampWithYear": "%b %-d %Y, %I:%M %p",
"ui.time.formattedTimestampWithYear.24hour": "%b %-d %Y, %H:%M",
"ui.iconPicker.selectIcon": "Select an icon",
"ui.iconPicker.search.placeholder": "Search for an icon...",
"ui.dialog.restart.title": "Are you sure you want to restart Frigate?",
"ui.dialog.restart.button": "Restart",
"ui.dialog.restart.restarting.title": "Frigate is Restarting",
"ui.dialog.restart.restarting.content": "This page will reload in {{countdown}} seconds.",
"ui.dialog.restart.restarting.button": "Force Reload Now",
"ui.dialog.export.time.fromTimeline": "Select from Timeline",
"ui.dialog.export.time.lastHour_one": "Last Hour",
"ui.dialog.export.time.lastHour_other": "Last {{count}} Hours",
"ui.dialog.export.time.custom": "Custom",
"ui.dialog.export.name.placeholder": "Name the Export",
"ui.dialog.export.select": "Select",
"ui.dialog.export.export": "Export",
"ui.dialog.export.toast.success": "Successfully started export. View the file in the /exports folder.",
"ui.dialog.export.toast.error.failed": "Failed to start export: {{error}}",
"ui.dialog.export.toast.error.endTimeMustAfterStartTime": "End time must be after start time",
"ui.dialog.export.toast.error.noVaildTimeSelected": "No valid time range selected",
"ui.dialog.export.fromTimeline.saveExport": "Save Export",
"ui.dialog.export.fromTimeline.previewExport": "Preview Export",
"ui.dialog.streaming": "Stream",
"ui.dialog.streaming.restreaming.NotEnabled": "Restreaming is not enabled for this camera.",
"ui.dialog.streaming.restreaming.desc": "Set up go2rtc for additional live view options and audio for this camera.",
"ui.dialog.streaming.restreaming.desc.readTheDocumentation": "Read the documentation ",
"ui.dialog.streaming.showStats": "Show stream stats",
"ui.dialog.streaming.showStats.desc": "Enable this option to show stream statistics as an overlay on the camera feed.",
"ui.dialog.streaming.debugView": "Debug View",
"ui.stats.ffmpegHighCpuUsage": "{{camera}} has high FFMPEG CPU usage ({{ffmpegAvg}}%)",
"ui.stats.detectHighCpuUsage": "{{camera}} has high detect CPU usage ({{detectAvg}}%)",
"ui.stats.healthy": "System is healthy",
"ui.system.general": "General",
"ui.system.storage": "Storage",
"ui.system.cameras": "Cameras",
"ui.system.lastRefreshed": "Last refreshed: ",
"ui.system.general.detector": "Detectors",
"ui.system.general.detectorInferenceSpeed": "Detector Inference Speed",
"ui.system.general.detectorCpuUsage": "Detector CPU Usage",
"ui.system.general.detectorMemoryUsage": "Detector Memory Usage",
"ui.system.general.hardwareInfo": "Hardware Info",
"ui.system.general.gpuUsage": "GPU Usage",
"ui.system.general.gpuMemory": "GPU Memory",
"ui.system.general.gpuEncoder": "GPU Encoder",
"ui.system.general.gpuDecoder": "GPU Decoder",
"ui.system.general.otherProcesses": "Other Processes",
"ui.system.general.processCpuUsage": "Process CPU Usage",
"ui.system.general.processMemoryUsage": "Process Memory Usage",
"ui.system.storage.overview": "Overview",
"ui.system.storage.recordings": "Recordings",
"ui.system.storage.recordings.tips": "This value represents the total storage used by the recordings in Frigate's database. Frigate does not track storage usage for all files on your disk.",
"ui.system.storage.cameraStorage": "Camera Storage",
"ui.system.storage.cameraStorage.camera": "Camera",
"ui.system.storage.cameraStorage.unused": "Unused",
"ui.system.storage.cameraStorage.storageUsed": "Storage Used",
"ui.system.storage.cameraStorage.percentageOfTotalUsed": "Percentage of Total Used",
"ui.system.storage.cameraStorage.bandwidth": "Bandwidth",
"ui.system.storage.cameraStorage.unused.tips": "This value may not accurately represent the free space available to Frigate if you have other files stored on your drive beyond Frigate's recordings. Frigate does not track storage usage outside of its recordings.",
"ui.system.cameras.overview": "Overview",
"ui.system.cameras.info.cameraProbeInfo": "{{camera}} Camera Probe Info",
"ui.system.cameras.info.streamDataFromFFPROBE": "Stream data is obtained with <code>ffprobe</code>.",
"ui.system.cameras.info.fetching": "Fetching Camera Data",
"ui.system.cameras.info.stream": "Stream {{idx}}",
"ui.system.cameras.info.video": "Video:",
"ui.system.cameras.info.codec": "Codec:",
"ui.system.cameras.info.resolution": "Resolution:",
"ui.system.cameras.info.fps": "FPS:",
"ui.system.cameras.info.unknown": "Unknown",
"ui.system.cameras.info.audio": "Audio:",
"ui.system.cameras.info.error": "Error: {{error}}",
"ui.system.cameras.framesAndDetections": "Frames / Detections",
"ui.system.cameras.label.camera": "camera",
"ui.system.cameras.label.detect": "detect",
"ui.system.cameras.label.skipped": "skipped",
"ui.system.cameras.label.ffmpeg": "ffmpeg",
"ui.system.cameras.label.capture": "capture",
"ui.system": "System",
"ui.systemMetrics": "System metrics",
"ui.systemLogs": "System logs",
"ui.configuration": "Configuration",
"ui.settings": "Settings",
"ui.configurationEditor": "Configuration Editor",
"ui.withSystem": "System",
"ui.language.en": "English",
"ui.language.zhCN": "简体中文(Simplified Chinese)",
"ui.languages" : "Languages",
"ui.appearance": "Appearance",
"ui.darkMode": "Dark Mode",
"ui.darkMode.light": "Light",
"ui.darkMode.dark": "Dark",
"ui.theme": "Theme",
"ui.theme.blue": "Blue",
"ui.theme.green": "Green",
"ui.theme.nord": "Nord",
"ui.theme.red": "Red",
"ui.theme.high.contrast": "High Contrast",
"ui.theme.default": "Default",
"ui.help": "Help",
"ui.documentation": "Documentation",
"ui.documentation.label": "Frigate documentation",
"ui.restart": "Restart Frigate",
"ui.menu.live": "Live",
"ui.menu.live.allCameras": "All Cameras",
"ui.menu.review": "Review",
"ui.menu.explore": "Explore",
"ui.menu.export": "Export",
"ui.menu.uiPlayground": "UI Playground",
"ui.menu.user.current": "Current User: {{user}}",
"ui.menu.user.anonymous": "anonymous",
"ui.menu.user.logout": "Logout",
"ui.cameraGroup": "Camera Groups",
"ui.cameraGroup.add": "Add camera groups",
"ui.cameraGroup.edit": "Edit camera groups",
"ui.cameraGroup.delete.confirm": "Confirm Delete",
"ui.cameraGroup.delete.confirm.desc": "Are you sure you want to delete the camera group <em>{{name}}</em>?",
"ui.cameraGroup.name": "Name",
"ui.cameraGroup.name.placeholder": "Enter a name...",
"ui.cameraGroup.name.errorMessage.mustLeastCharacters": "Camera group name must be at least 2 characters.",
"ui.cameraGroup.name.errorMessage.exists": "Camera group name already exists.",
"ui.cameraGroup.name.errorMessage.nameMustNotPeriod": "Camera group name must not contain a period.",
"ui.cameraGroup.name.errorMessage.invalid": "Invalid camera group name.",
"ui.cameraGroup.cameras": "Cameras",
"ui.cameraGroup.cameras.desc": "Select cameras for this group.",
"ui.cameraGroup.icon": "Icon",
"ui.cameraGroup.success": "Camera group ({{name}}) has been saved.",
"ui.cameraGroup.toast.error": "Failed to save config changes: {{error}}",
"ui.eventView.alerts": "Alerts",
"ui.eventView.detections": "Detections",
"ui.eventView.motion": "Motion",
"ui.eventView.allCameras": "All Cameras",
"ui.eventView.empty.alert": "There are no alerts to review",
"ui.eventView.empty.detection": "There are no detections to review",
"ui.exploreView.trackedObjectDetails": "Tracked Object Details",
"ui.exploreView.type.details": "details",
"ui.exploreView.type.snapshot": "snapshot",
"ui.exploreView.type.video": "video",
"ui.exploreView.type.object_lifecycle": "object lifecycle",
"ui.exploreView.details.label": "Label",
"ui.exploreView.details.editSubLable": "Edit sub label",
"ui.exploreView.details.topScore": "Top Score",
"ui.exploreView.details.topScore.info": "The top score is the highest median score for the tracked object, so this may differ from the score shown on the search result thumbnail.",
"ui.exploreView.details.estimatedSpeed": "Estimated Speed",
"ui.exploreView.details.camera": "Camera",
"ui.exploreView.details.timestamp": "Timestamp",
"ui.exploreView.details.button.findSimilar": "Find Similar",
"ui.exploreView.details.description": "Description",
"ui.exploreView.details.description.placeholder": "Description of the tracked object",
"ui.exploreView.details.description.aiTips": "Frigate will not request a description from your Generative AI provider until the tracked object's lifecycle has ended.",
"ui.exploreView.details.button.regenerate": "Regenerate",
"ui.exploreView.details.regenerateFromSnapshot": "Regenerate from Snapshot",
"ui.exploreView.details.regenerateFromThumbnails": "Regenerate from Thumbnails",
"ui.exploreView.details.tips.descriptionSaved": "Successfully saved description",
"ui.exploreView.details.tips.saveDescriptionFailed": "Failed to update the description",
"ui.exploreView.itemMenu.downloadVideo": "Download video",
"ui.exploreView.itemMenu.downloadVideo.aria": "Download video",
"ui.exploreView.itemMenu.downloadSnapshot": "Download snapshot",
"ui.exploreView.itemMenu.downloadSnapshot.aria": "Download snapshot",
"ui.exploreView.itemMenu.viewObjectLifecycle": "View object lifecycle",
"ui.exploreView.itemMenu.viewObjectLifecycle.aria": "Show the object lifecycle",
"ui.exploreView.itemMenu.findSimilar": "Find similar",
"ui.exploreView.itemMenu.findSimilar.aria": "Find similar tracked objects",
"ui.exploreView.itemMenu.submitToPlus": "Submit to Frigate+",
"ui.exploreView.itemMenu.submitToPlus.aria": "Submit to Frigate Plus",
"ui.exploreView.dialog.confirmDelete": "Confirm Delete",
"ui.exploreView.dialog.confirmDelete.desc": "Deleting this tracked object removes the snapshot, any saved embeddings, and any associated object lifecycle entries. Recorded footage of this tracked object in History view will <em>NOT</em> be deleted.<br /><br />Are you sure you want to proceed?",
"ui.filter": "Filter",
"ui.filter.allLabels": "All Labels",
"ui.filter.allLabels.short": "Labels",
"ui.filter.countLabels": "{{count}} Labels",
"ui.filter.allZones": "All Zones",
"ui.filter.allZones.short": "Zones",
"ui.filter.allDates": "All Dates",
"ui.filter.allDates.short": "Dates",
"ui.filter.more": "More Filters",
"ui.filter.timeRange": "Time Range",
"ui.filter.zones": "Zones",
"ui.filter.subLabels": "Sub Labels",
"ui.filter.allSubLabels": "All Sub Labels",
"ui.filter.score": "Score",
"ui.filter.features": "Features",
"ui.filter.features.hasSnapshot": "Has a snapshot",
"ui.filter.features.hasVideoClip": "Has a video clip",
"ui.filter.features.submittedToFrigatePlus": "Submitted to Frigate+",
"ui.filter.features.submittedToFrigatePlus.tips": "You must first filter on tracked objects that have a snapshot.<br /><br />Tracked objects without a snapshot cannot be submitted to Frigate+.",
"ui.filter.sort": "Sort",
"ui.filter.sort.dateAsc": "Date (Ascending)",
"ui.filter.sort.dateDesc": "Date (Descending)",
"ui.filter.sort.scoreAsc": "Object Score (Ascending)",
"ui.filter.sort.scoreDesc": "Object Score (Descending)",
"ui.filter.sort.relevance": "Relevance",
"ui.filter.allCameras": "All Cameras",
"ui.filter.allCameras.short": "Cameras",
"ui.reviewFilter.showReviewed": "Show Reviewed",
"ui.apply": "Apply",
"ui.reset": "Reset",
"ui.enabled": "Enabled",
"ui.save": "Save",
"ui.saving": "Saving...",
"ui.cancel": "Cancel",
"ui.close": "Close",
"ui.copy": "Copy",
"ui.back": "Back",
"ui.history": "History",
"ui.fullscreen": "Fullscreen",
"ui.pictureInPicture": "Picture in Picture",
"ui.on": "ON",
"ui.off": "OFF",
"ui.edit": "Edit",
"ui.delete": "Delete",
"ui.yes": "Yes",
"ui.no": "No",
"ui.download": "Download",
"ui.live.documentTitle": "Live - Frigate",
"ui.live.documentTitle.withCamera": "{{camera}} - Live - Frigate",
"ui.live.twoWayTalk.enable": "Enable Two Way Talk",
"ui.live.twoWayTalk.disable": "Disable Two Way Talk",
"ui.live.cameraAudio.enable": "Enable Camera Audio",
"ui.live.cameraAudio.disable": "Disable Camera Audio",
"ui.live.ptz.move.left.label": "Move PTZ camera to the left",
"ui.live.ptz.move.up.label": "Move PTZ camera up",
"ui.live.ptz.move.down.label": "Move PTZ camera down",
"ui.live.ptz.move.right.label": "Move PTZ camera to the right",
"ui.live.ptz.zoom.in.label": "Zoom PTZ camera in",
"ui.live.ptz.zoom.out.label": "Zoom PTZ camera out",
"ui.live.ptz.frame.center.label": "Click in the frame to center the PTZ camera",
"ui.live.detect.enable": "Enable Detect",
"ui.live.detect.disable": "Disable Detect",
"ui.live.recording.enable": "Enable Recording",
"ui.live.recording.disable": "Disable Recording",
"ui.live.snapshots.enable": "Enable Snapshots",
"ui.live.snapshots.disable": "Disable Snapshots",
"ui.live.audioDetect.enable": "Enable Audio Detect",
"ui.live.audioDetect.disable": "Disable Audio Detect",
"ui.live.autotracking.enable": "Enable Autotracking",
"ui.live.autotracking.disable": "Disable Autotracking",
"ui.live.manualRecording.start": "Start on-demand recording",
"ui.live.manualRecording.started": "Started manual on-demand recording.",
"ui.live.manualRecording.failedToStart": "Failed to start manual on-demand recording.",
"ui.live.manualRecording.recordDisabledTips": "Since recording is disabled or restricted in the config for this camera, only a snapshot will be saved.",
"ui.live.manualRecording.end": "End on-demand recording",
"ui.live.manualRecording.ended": "Ended manual on-demand recording.",
"ui.live.manualRecording.failedToEnd": "Failed to end manual on-demand recording.",
"ui.review.timeline": "Timeline",
"ui.review.events": "Events",
"ui.review.events.noFoundForTimePeriod": "No events found for this time period.",
"ui.review.documentTitle": "Review - Frigate",
"ui.review.recordings.documentTitle": "Recordings - Frigate",
"ui.player.noRecordingsFoundForThisTime": "No recordings found for this time",
"ui.player.noPreviewFound": "No Preview Found",
"ui.player.noPreviewFoundFor": "No Preview Found for {{cameraName}}",
"ui.calendarFilter.last24Hours": "Last 24 Hours",
"ui.searchView.noTrackedObjects": "No Tracked Objects Found",
"ui.searchView.settings": "Settings",
"ui.searchView.settings.defaultView": "Default View",
"ui.searchView.settings.defaultView.desc": "When no filters are selected, display a summary of the most recent tracked objects per label, or display an unfiltered grid.",
"ui.searchView.settings.defaultView.summary": "Summary",
"ui.searchView.settings.defaultView.unfilteredGrid": "Unfiltered Grid",
"ui.searchView.settings.gridColumns": "Grid Columns",
"ui.searchView.settings.gridColumns.desc": "Select the number of columns in the grid view.",
"ui.searchView.settings.searchSource": "Search Source",
"ui.searchView.settings.searchSource.desc": "Choose whether to search the thumbnails or descriptions of your tracked objects.",
"ui.settingView.menu.uiSettings": "UI Settings",
"ui.settingView.menu.exploreSettings": "Explore Settings",
"ui.settingView.menu.cameraSettings": "Camera Settings",
"ui.settingView.menu.masksAndZones": "Masks / Zones",
"ui.settingView.menu.motionTuner": "Motion Tuner",
"ui.settingView.menu.debug": "Debug",
"ui.settingView.menu.users": "Users",
"ui.settingView.menu.notifications": "Notifications",
"ui.settingView.generalSettings": "General Settings",
"ui.settingView.generalSettings.liveDashboard": "Live Dashboard",
"ui.settingView.generalSettings.automaticLiveView": "Automatic Live View",
"ui.settingView.generalSettings.automaticLiveView.desc": "Automatically switch to a camera's live view when activity is detected. Disabling this option causes static camera images on the Live dashboard to only update once per minute.",
"ui.settingView.generalSettings.playAlertVideos": "Play Alert Videos",
"ui.settingView.generalSettings.playAlertVideos.desc": "By default, recent alerts on the Live dashboard play as small looping videos. Disable this option to only show a static image of recent alerts on this device/browser.",
"ui.settingView.generalSettings.storedLayouts": "Stored Layouts",
"ui.settingView.generalSettings.storedLayouts.desc": "The layout of cameras in a camera group can be dragged/resized. The positions are stored in your browser's local storage.",
"ui.settingView.generalSettings.storedLayouts.clearAll": "Clear All Layouts",
"ui.settingView.generalSettings.cameraGroupStreaming": "Camera Group Streaming Settings",
"ui.settingView.generalSettings.cameraGroupStreaming.desc": "Streaming settings for each camera group are stored in your browser's local storage.",
"ui.settingView.generalSettings.cameraGroupStreaming.clearAll": "Clear All Streaming Settings",
"ui.settingView.generalSettings.recordingsViewer": "Recordings Viewer",
"ui.settingView.generalSettings.recordingsViewer.defaultPlaybackRate": "Default Playback Rate",
"ui.settingView.generalSettings.recordingsViewer.defaultPlaybackRate.desc": "Default playback rate for recordings playback.",
"ui.settingView.generalSettings.calendar": "Calendar",
"ui.settingView.generalSettings.calendar.firstWeekday": "First Weekday",
"ui.settingView.generalSettings.calendar.firstWeekday.desc": "The day that the weeks of the review calendar begin on.",
"ui.settingView.generalSettings.calendar.firstWeekday.sunday": "Sunday",
"ui.settingView.generalSettings.calendar.firstWeekday.monday": "Monday",
"ui.settingView.exploreSettings": "Explore Settings",
"ui.settingView.exploreSettings.semanticSearch": "Semantic Search",
"ui.settingView.exploreSettings.semanticSearch.desc": "Semantic Search in Frigate allows you to find tracked objects within your review items using either the image itself, a user-defined text description, or an automatically generated one.",
"ui.settingView.exploreSettings.semanticSearch.readTheDocumentation": "Read the Documentation",
"ui.settingView.exploreSettings.semanticSearch.reindexOnStartup": "Re-Index On Startup",
"ui.settingView.exploreSettings.semanticSearch.reindexOnStartup.desc": "Re-indexing will reprocess all thumbnails and descriptions (if enabled) and apply the embeddings on each startup. <em>Don't forget to disable the option after restarting!</em>",
"ui.settingView.exploreSettings.semanticSearch.modelSize": "Model Size",
"ui.settingView.exploreSettings.semanticSearch.modelSize.desc": "The size of the model used for semantic search embeddings.",
"ui.settingView.exploreSettings.semanticSearch.modelSize.small": "small",
"ui.settingView.exploreSettings.semanticSearch.modelSize.large": "large",
"ui.settingView.exploreSettings.semanticSearch.modelSize.small.desc": "Using <em>small</em> employs a quantized version of the model that uses less RAM and runs faster on CPU with a very negligible difference in embedding quality.",
"ui.settingView.exploreSettings.semanticSearch.modelSize.large.desc": "Using <em>large</em> employs the full Jina model and will automatically run on the GPU if applicable.",
"ui.settingView.cameraSettings": "Camera Settings",
"ui.settingView.cameraSettings.review": "Review",
"ui.settingView.cameraSettings.review.desc": "Enable/disable alerts and detections for this camera. When disabled, no new review items will be generated.",
"ui.settingView.cameraSettings.review.alerts": "Alerts",
"ui.settingView.cameraSettings.review.detections": "Detections",
"ui.settingView.cameraSettings.reviewClassification": "Review Classification",
"ui.settingView.cameraSettings.reviewClassification.desc": "Frigate categorizes review items as Alerts and Detections. By default, all <em>person</em> and <em>car</em> objects are considered Alerts. You can refine categorization of your review items by configuring required zones for them.",
"ui.settingView.cameraSettings.reviewClassification.readTheDocumentation": "Read the Documentation",
"ui.settingView.cameraSettings.reviewClassification.noDefinedZones": "No zones are defined for this camera.",
"ui.settingView.cameraSettings.reviewClassification.objectAlertsTips": "All {{alertsLabels}} objects on {{cameraName}} will be shown as Alerts.",
"ui.settingView.cameraSettings.reviewClassification.zoneObjectAlertsTips": "All {{alertsLabels}} objects detected in {{zone}} on {{cameraName}} will be shown as Alerts.",
"ui.settingView.cameraSettings.reviewClassification.selectAlertsZones": "Select zones for Alerts",
"ui.settingView.cameraSettings.reviewClassification.objectDetectionsTips": "All {{detectionsLabels}} objects <em>not classified as Alerts</em> on {{cameraName}} will be shown as Detections.",
"ui.settingView.cameraSettings.reviewClassification.zoneObjectDetectionsTips": "All {{detectionsLabels}} objects <em>not classified as Alerts</em> that are detected in {{zone}} on {{cameraName}} will be shown as Detections.",
"ui.settingView.cameraSettings.reviewClassification.zoneObjectDetectionsTips.notSelectDetections": "All {{detectionsLabels}} objects <em>not classified as Alerts</em> that are detected in {{zone}} on {{cameraName}} will be shown as Detections, regardless of zone",
"ui.settingView.cameraSettings.reviewClassification.zoneObjectDetectionsTips.regardlessOfZoneObjectDetectionsTips": "All {{detectionsLabels}} objects <em>not classified as Alerts</em> on {{cameraName}} will be shown as Detections, regardless of zone.",
"ui.settingView.masksAndZonesSettings": "Masks / Zones",
"ui.settingView.masksAndZonesSettings.zone": "Zones",
"ui.settingView.masksAndZonesSettings.zone.documentTitle": "Edit Zone - Frigate",
"ui.settingView.masksAndZonesSettings.zone.desc": "Zones allow you to define a specific area of the frame so you can determine whether or not an object is within a particular area.",
"ui.settingView.masksAndZonesSettings.zone.desc.documentation": "Documentation",
"ui.settingView.masksAndZonesSettings.zone.add": "Add Zone",
"ui.settingView.masksAndZonesSettings.zone.edit": "Edit Zone",
"ui.settingView.masksAndZonesSettings.zone.point_one": "{{count}} point",
"ui.settingView.masksAndZonesSettings.zone.point_other": "{{count}} points",
"ui.settingView.masksAndZonesSettings.zone.clickDrawPolygon": "Click to draw a polygon on the image.",
"ui.settingView.masksAndZonesSettings.zone.name": "Name",
"ui.settingView.masksAndZonesSettings.zone.name.inputPlaceHolder": "Enter a name...",
"ui.settingView.masksAndZonesSettings.zone.name.tips": "Name must be at least 2 characters and must not be the name of a camera or another zone.",
"ui.settingView.masksAndZonesSettings.zone.inertia": "Inertia",
"ui.settingView.masksAndZonesSettings.zone.inertia.desc": "Specifies how many frames that an object must be in a zone before they are considered in the zone. <em>Default: 3</em>",
"ui.settingView.masksAndZonesSettings.zone.loiteringTime": "Loitering Time",
"ui.settingView.masksAndZonesSettings.zone.loiteringTime.desc": "Sets a minimum amount of time in seconds that the object must be in the zone for it to activate. <em>Default: 0</em>",
"ui.settingView.masksAndZonesSettings.zone.objects": "Objects",
"ui.settingView.masksAndZonesSettings.zone.objects.desc": "List of objects that apply to this zone.",
"ui.settingView.masksAndZonesSettings.zone.allObjects": "All Objects",
"ui.settingView.masksAndZonesSettings.zone.speedEstimation": "Speed Estimation",
"ui.settingView.masksAndZonesSettings.zone.speedEstimation.desc": "Enable speed estimation for objects in this zone. The zone must have exactly 4 points.",
"ui.settingView.masksAndZonesSettings.zone.speedEstimation.pointLengthError": "Zones with speed estimation must have exactly 4 points.",
"ui.settingView.masksAndZonesSettings.zone.speedEstimation.loiteringTimeError": "Zones with loitering times greater than 0 should not be used with speed estimation.",
"ui.settingView.masksAndZonesSettings.motionMasks": "Motion Mask",
"ui.settingView.masksAndZonesSettings.motionMasks.documentTitle": "Edit Motion Mask - Frigate",
"ui.settingView.masksAndZonesSettings.motionMasks.desc": "Motion masks are used to prevent unwanted types of motion from triggering detection. Over masking will make it more difficult for objects to be tracked.",
"ui.settingView.masksAndZonesSettings.motionMasks.desc.documentation": "Documentation",
"ui.settingView.masksAndZonesSettings.motionMasks.add": "New Motion Mask",
"ui.settingView.masksAndZonesSettings.motionMasks.edit": "Edit Motion Mask",
"ui.settingView.masksAndZonesSettings.motionMasks.context": "Motion masks are used to prevent unwanted types of motion from triggering detection (example: tree branches, camera timestamps). Motion masks should be used <em>very sparingly</em>, over-masking will make it more difficult for objects to be tracked.",
"ui.settingView.masksAndZonesSettings.motionMasks.context.documentation": "Read the documentation",
"ui.settingView.masksAndZonesSettings.motionMasks.point_one": "{{count}} point",
"ui.settingView.masksAndZonesSettings.motionMasks.point_other": "{{count}} points",
"ui.settingView.masksAndZonesSettings.motionMasks.clickDrawPolygon": "Click to draw a polygon on the image.",
"ui.settingView.masksAndZonesSettings.motionMasks.polygonAreaTooLarge": "The motion mask is covering {{polygonArea}}% of the camera frame. Large motion masks are not recommended.",
"ui.settingView.masksAndZonesSettings.motionMasks.polygonAreaTooLarge.tips": "Motion masks do not prevent objects from being detected. You should use a required zone instead.",
"ui.settingView.masksAndZonesSettings.motionMasks.polygonAreaTooLarge.documentation": "Read the documentation",
"ui.settingView.masksAndZonesSettings.objectMasks": "Object Masks",
"ui.settingView.masksAndZonesSettings.objectMasks.documentTitle": "Edit Object Mask - Frigate",
"ui.settingView.masksAndZonesSettings.objectMasks.desc": "Object filter masks are used to filter out false positives for a given object type based on location.",
"ui.settingView.masksAndZonesSettings.objectMasks.documentation": "Documentation",
"ui.settingView.masksAndZonesSettings.objectMasks.add": "Add Object Mask",
"ui.settingView.masksAndZonesSettings.objectMasks.edit": "Edit Object Mask",
"ui.settingView.masksAndZonesSettings.objectMasks.context": "Object filter masks are used to filter out false positives for a given object type based on location.",
"ui.settingView.masksAndZonesSettings.objectMasks.point_one": "{{count}} point",
"ui.settingView.masksAndZonesSettings.objectMasks.point_other": "{{count}} points",
"ui.settingView.masksAndZonesSettings.objectMasks.clickDrawPolygon": "Click to draw a polygon on the image.",
"ui.settingView.masksAndZonesSettings.objectMasks.objects": "Objects",
"ui.settingView.masksAndZonesSettings.objectMasks.objects.desc": "The object type that that applies to this object mask.",
"ui.settingView.masksAndZonesSettings.objectMasks.objects.allObjectTypes": "All object types",
"ui.settingView.motionDetectionTuner": "Motion Detection Tuner",
"ui.settingView.motionDetectionTuner.desc": "Frigate uses motion detection as a first line check to see if there is anything happening in the frame worth checking with object detection.",
"ui.settingView.motionDetectionTuner.desc.documentation": "Read the Motion Tuning Guide",
"ui.settingView.motionDetectionTuner.Threshold": "Threshold",
"ui.settingView.motionDetectionTuner.Threshold.desc": "The threshold value dictates how much of a change in a pixel's luminance is required to be considered motion. <em>Default: 30</em>",
"ui.settingView.motionDetectionTuner.contourArea": "Contour Area",
"ui.settingView.motionDetectionTuner.contourArea.desc": "The contour area value is used to decide which groups of changed pixels qualify as motion. <em>Default: 10</em>",
"ui.settingView.motionDetectionTuner.improveContrast": "Improve Contrast",
"ui.settingView.motionDetectionTuner.improveContrast.desc": "Improve contrast for darker scenes. <em>Default: ON</em>",
"ui.settingView.debug": "Debug",
"ui.settingView.debug.detectorDesc": "Frigate uses your detectors ({{detectors}}) to detect objects in your camera's video stream.",
"ui.settingView.debug.desc": "Debugging view shows a real-time view of tracked objects and their statistics. The object list shows a time-delayed summary of detected objects.",
"ui.settingView.debug.debugging": "Debugging",
"ui.settingView.debug.objectList": "Object List",
"ui.settingView.debug.noObjects": "No objects",
"ui.settingView.debug.boundingBoxes": "Bounding boxes",
"ui.settingView.debug.boundingBoxes.desc": "Show bounding boxes around tracked objects",
"ui.settingView.debug.boundingBoxes.colors": "Object Bounding Box Colors",
"ui.settingView.debug.boundingBoxes.colors.info": "<li>At startup, different colors will be assigned to each object label</li><li>A dark blue thin line indicates that object is not detected at this current point in time</li><li>A gray thin line indicates that object is detected as being stationary</li><li>A thick line indicates that object is the subject of autotracking (when enabled)</li>",
"ui.settingView.debug.timestamp": "Timestamp",
"ui.settingView.debug.timestamp.desc": "Overlay a timestamp on the image",
"ui.settingView.debug.zone": "Zones",
"ui.settingView.debug.zone.desc": "Show an outline of any defined zones",
"ui.settingView.debug.mask": "Motion masks",
"ui.settingView.debug.mask.desc": "Show motion mask polygons",
"ui.settingView.debug.motion": "Motion boxes",
"ui.settingView.debug.motion.desc": "Show boxes around areas where motion is detected",
"ui.settingView.debug.motion.tips": "<p className=\"mb-2\"><strong>Motion Boxes</strong></p><br><p>Red boxes will be overlaid on areas of the frame where motion is currently being detected</p>",
"ui.settingView.debug.regions": "Regions",
"ui.settingView.debug.regions.desc": "Show a box of the region of interest sent to the object detector",
"ui.settingView.debug.regions.tips": "<p className=\"mb-2\"><strong>Region Boxes</strong></p><br><p>Bright green boxes will be overlaid on areas of interest in the frame that are being sent to the object detector.</p>",
"ui.settingView.users": "Users",
"ui.settingView.users.addUser": "Add User",
"ui.settingView.users.updatePassword": "Update Password",
"ui.settingView.users.dialog.createUser": "Create User",
"ui.settingView.users.dialog.createUser.user": "User",
"ui.settingView.users.dialog.createUser.password": "Password",
"ui.settingView.users.dialog.deleteUser": "Delete User",
"ui.settingView.users.dialog.deleteUser.warn": "Are you sure?",
"ui.settingView.users.dialog.setPassword": "Set Password",
"ui.settingView.notification": "Notifications",
"ui.settingView.notification.notificationSettings": "Notification Settings",
"ui.settingView.notification.desc": "Frigate can natively send push notifications to your device when it is running in the browser or installed as a PWA.",
"ui.settingView.notification.documentation": "Read the Documentation",
"ui.settingView.notification.email": "Email",
"ui.settingView.notification.email.placeholder": "example@email.com",
"ui.settingView.notification.email.desc": "Entering a valid email is required, as this is used by the push server in case problems occur.",
"ui.settingView.notification.cameras": "Cameras",
"ui.settingView.notification.cameras.noCameras": "No cameras available.",
"ui.settingView.notification.cameras.desc": "Select the cameras to enable notifications for.",
"ui.settingView.notification.deviceSpecific": "Device-Specific Settings",
"ui.settingView.notification.registerDevice": "Register this device",
"ui.settingView.notification.unregisterDevice": "Unregister this device",
"ui.configEditorView.configEditor": "Config Editor",
"ui.configEditorView.copyConfig": "Copy Config",
"ui.configEditorView.saveAndRestart": "Save & Restart",
"ui.configEditorView.saveOnly": "Save Only",
"ui.exportView.documentTitle": "Export - Frigate",
"ui.exportView.search": "Search",
"ui.exportView.noExports": "No exports found",
"ui.exportView.deleteExport": "Delete Export",
"ui.exportView.deleteExport.desc": "Are you sure you want to delete {{exportName}}?"
}

622
web/public/locales/zh-CN/translation.json Normal file
View File

@ -0,0 +1,622 @@
{
"object.person": "人",
"object.bicycle": "自行车",
"object.car": "汽车",
"object.motorcycle": "摩托车",
"object.airplane": "飞机",
"object.bus": "公交车",
"object.train": "火车",
"object.boat": "船",
"object.traffic_light": "交通灯",
"object.fire_hydrant": "消防栓",
"object.street_sign": "路标",
"object.stop_sign": "停车标志",
"object.parking_meter": "停车计时器",
"object.bench": "长椅",
"object.bird": "鸟",
"object.cat": "猫",
"object.dog": "狗",
"object.horse": "马",
"object.sheep": "羊",
"object.cow": "牛",
"object.elephant": "大象",
"object.bear": "熊",
"object.zebra": "斑马",
"object.giraffe": "长颈鹿",
"object.hat": "帽子",
"object.backpack": "背包",
"object.umbrella": "雨伞",
"object.shoe": "鞋子",
"object.eye_glasses": "眼镜",
"object.handbag": "手提包",
"object.tie": "领带",
"object.suitcase": "手提箱",
"object.frisbee": "飞盘",
"object.skis": "滑雪板",
"object.snowboard": "滑雪板",
"object.sports_ball": "运动球",
"object.kite": "风筝",
"object.baseball_bat": "棒球棒",
"object.baseball_glove": "棒球手套",
"object.skateboard": "滑板",
"object.surfboard": "冲浪板",
"object.tennis_racket": "网球拍",
"object.bottle": "瓶子",
"object.plate": "盘子",
"object.wine_glass": "酒杯",
"object.cup": "杯子",
"object.fork": "叉子",
"object.knife": "刀",
"object.spoon": "勺子",
"object.bowl": "碗",
"object.banana": "香蕉",
"object.apple": "苹果",
"object.sandwich": "三明治",
"object.orange": "橙子",
"object.broccoli": "西兰花",
"object.carrot": "胡萝卜",
"object.hot_dog": "热狗",
"object.pizza": "披萨",
"object.donut": "甜甜圈",
"object.cake": "蛋糕",
"object.chair": "椅子",
"object.couch": "沙发",
"object.potted_plant": "盆栽植物",
"object.bed": "床",
"object.mirror": "镜子",
"object.dining_table": "餐桌",
"object.window": "窗户",
"object.desk": "桌子",
"object.toilet": "厕所",
"object.door": "门",
"object.tv": "电视",
"object.laptop": "笔记本电脑",
"object.mouse": "鼠标",
"object.remote": "遥控器",
"object.keyboard": "键盘",
"object.cell_phone": "手机",
"object.microwave": "微波炉",
"object.oven": "烤箱",
"object.toaster": "烤面包机",
"object.sink": "水槽",
"object.refrigerator": "冰箱",
"object.blender": "搅拌机",
"object.book": "书",
"object.clock": "时钟",
"object.vase": "花瓶",
"object.scissors": "剪刀",
"object.teddy_bear": "泰迪熊",
"object.hair_dryer": "吹风机",
"object.toothbrush": "牙刷",
"object.hair_brush": "发刷",
"object.vehicle": "车辆",
"object.squirrel": "松鼠",
"object.deer": "鹿",
"object.animal": "动物",
"object.bark": "树皮",
"object.fox": "狐狸",
"object.goat": "山羊",
"object.rabbit": "兔子",
"object.raccoon": "浣熊",
"object.robot_lawnmower": "自动割草机",
"object.waste_bin": "垃圾桶",
"object.on_demand": "手动",
"audio.crying": "哭泣",
"audio.laughter": "笑声",
"audio.scream": "尖叫",
"audio.speech": "谈话",
"audio.yell": "大喊",
"audio.fire_alarm": "火灾警报器",
"ui.time.ago": "{{timeAgo}} 前",
"ui.time.justNow": "刚才",
"ui.time.today": "今天",
"ui.time.yesterday": "昨天",
"ui.time.last7": "最后 7 天",
"ui.time.last14": "最后 14 天",
"ui.time.last30": "最后 30 天",
"ui.time.thisWeek": "本周",
"ui.time.lastWeek": "上个周",
"ui.time.thisMonth": "本月",
"ui.time.lastMonth": "上个月",
"ui.time.pm": "上午",
"ui.time.am": "下午",
"ui.time.yr": "{{time}}年",
"ui.time.year": "{{time}}年",
"ui.time.mo": "{{time}}月",
"ui.time.month": "{{time}}月",
"ui.time.d": "{{time}}天",
"ui.time.day": "{{time}}天",
"ui.time.h": "{{time}}小时",
"ui.time.hour": "{{time}}小时",
"ui.time.m": "{{time}}分钟",
"ui.time.minute": "{{time}}分钟",
"ui.time.s": "{{time}}秒",
"ui.time.second": "{{time}}秒",
"ui.time.formattedTimestamp": "%m月%-d日 %I:%M:%S %p",
"ui.time.formattedTimestamp.24hour": "%m月%-d日 %H:%M:%S",
"ui.time.formattedTimestampExcludeSeconds": "%m月%-d日 %I:%M %p",
"ui.time.formattedTimestampExcludeSeconds.24hour": "%m月%-d日 %H:%M",
"ui.time.formattedTimestampWithYear": "%Y年%m月%-d日 %I:%M:%S %p",
"ui.time.formattedTimestampWithYear.24hour": "%Y年%m月%-d日 %H:%M",
"ui.iconPicker.selectIcon": "选择图标",
"ui.iconPicker.search.placeholder": "搜索图标...",
"ui.dialog.restart.title": "你确定要重启 Frigate?",
"ui.dialog.restart.button": "重启",
"ui.dialog.restart.restarting.title": "Frigate 正在重启",
"ui.dialog.restart.restarting.content": "该页面将会在 {{countdown}} 秒后自动刷新。",
"ui.dialog.restart.restarting.button": "强制刷新",
"ui.dialog.export.time.fromTimeline": "从时间线选择",
"ui.dialog.export.time.lastHour_one": "最后1小时",
"ui.dialog.export.time.lastHour_other": "最后 {{count}} 小时",
"ui.dialog.export.time.custom": "自定义",
"ui.dialog.export.name.placeholder": "导出项目的名字",
"ui.dialog.export.select": "选择",
"ui.dialog.export.export": "导出",
"ui.dialog.export.toast.success": "导出成功。进入 /exports 目录查看文件。",
"ui.dialog.export.toast.error.failed": "导出失败：{{error}}",
"ui.dialog.export.toast.error.endTimeMustAfterStartTime": "结束时间必须在开始时间之后",
"ui.dialog.export.toast.error.noVaildTimeSelected": "未选择有效的时间范围",
"ui.dialog.export.fromTimeline.saveExport": "保存导出",
"ui.dialog.export.fromTimeline.previewExport": "预览导出",
"ui.dialog.streaming": "视频流",
"ui.dialog.streaming.restreaming.disabled": "重新流式传输未启用。",
"ui.dialog.streaming.restreaming.desc": "为此摄像头设置 go2rtc，以获取额外的实时预览选项和音频支持。",
"ui.dialog.streaming.restreaming.readTheDocumentation": "阅读文档（英文） ",
"ui.dialog.streaming.showStats": "显示视频流统计信息",
"ui.dialog.streaming.showStats.desc": "启用后将在摄像头画面上叠加显示视频流统计信息。",
"ui.dialog.streaming.debugView": "调试界面",
"ui.stats.ffmpegHighCpuUsage": "{{camera}} 的 FFMPEG CPU 使用率较高（{{ffmpegAvg}}%）",
"ui.stats.detectHighCpuUsage": "{{camera}} 的 探测 CPU 使用率较高（{{detectAvg}}%）",
"ui.stats.healthy": "系统运行正常",
"ui.system.general": "常规",
"ui.system.storage": "存储",
"ui.system.cameras": "摄像头",
"ui.system.lastRefreshed": "最后刷新时间：",
"ui.system.general.detector": "探测器",
"ui.system.general.detectorInferenceSpeed": "探测器推理速度",
"ui.system.general.detectorCpuUsage": "探测器CPU使用率",
"ui.system.general.detectorMemoryUsage": "探测器内存使用率",
"ui.system.general.hardwareInfo": "硬件信息",
"ui.system.general.gpuUsage": "GPU使用率",
"ui.system.general.gpuMemory": "GPU显存",
"ui.system.general.gpuEncoder": "GPU编码",
"ui.system.general.gpuDecoder": "GPU解码",
"ui.system.general.otherProcesses": "其他进程",
"ui.system.general.processCpuUsage": "主进程CPU使用率",
"ui.system.general.processMemoryUsage": "主进程CPU使用率",
"ui.system.storage.overview": "概览",
"ui.system.storage.recordings": "录制内容",
"ui.system.storage.recordings.tips": "该值表示 Frigate 数据库中录制内容所使用的总存储空间。Frigate 不会追踪磁盘上所有文件的存储使用情况。",
"ui.system.storage.cameraStorage": "摄像头存储",
"ui.system.storage.cameraStorage.camera": "摄像头",
"ui.system.storage.cameraStorage.unused": "未使用",
"ui.system.storage.cameraStorage.storageUsed": "存储使用",
"ui.system.storage.cameraStorage.percentageOfTotalUsed": "总使用率",
"ui.system.storage.cameraStorage.bandwidth": "带宽",
"ui.system.storage.cameraStorage.unused.tips": "如果您的驱动器上存储了除 Frigate 录制内容之外的其他文件，该值可能无法准确反映 Frigate 可用的剩余空间。Frigate 不会追踪录制内容以外的存储使用情况。",
"ui.system.cameras.overview": "概览",
"ui.system.cameras.info.cameraProbeInfo": "{{camera}} 的摄像头信息",
"ui.system.cameras.info.streamDataFromFFPROBE": "流数据信息通过<code>ffprobe</code>获取。",
"ui.system.cameras.info.fetching": "正在获取摄像头数据",
"ui.system.cameras.info.stream": "视频流{{idx}}",
"ui.system.cameras.info.video": "视频：",
"ui.system.cameras.info.codec": "编解码器：",
"ui.system.cameras.info.resolution": "分辨率：",
"ui.system.cameras.info.fps": "帧率：",
"ui.system.cameras.info.unknown": "未知",
"ui.system.cameras.info.audio": "音频：",
"ui.system.cameras.info.error": "错误：{{error}}",
"ui.system.cameras.framesAndDetections": "帧数/检测次数",
"ui.system.cameras.label.camera": "摄像头",
"ui.system.cameras.label.detect": "探测",
"ui.system.cameras.label.skipped": "跳过",
"ui.system.cameras.label.ffmpeg": "ffmpeg编码器",
"ui.system.cameras.label.capture": "捕获",
"ui.system": "系统",
"ui.systemMetrics": "系统指标",
"ui.systemLogs": "系统日志",
"ui.configuration": "配置",
"ui.settings": "设置",
"ui.configurationEditor": "配置编辑器",
"ui.withSystem": "跟随系统",
"ui.language.en": "English",
"ui.language.zhCN": "简体中文",
"ui.languages" : "languages / 语言",
"ui.appearance": "外观",
"ui.darkMode": "深色模式",
"ui.darkMode.light": "浅色",
"ui.darkMode.dark": "深色",
"ui.theme": "主题",
"ui.theme.blue": "蓝色",
"ui.theme.green": "绿色",
"ui.theme.nord": "Nord",
"ui.theme.red": "红色",
"ui.theme.high.contrast": "高对比度",
"ui.theme.default": "默认",
"ui.help": "帮助",
"ui.documentation": "文档（英文）",
"ui.documentation.label": "Frigate 的官方文档",
"ui.restart": "重启 Frigate",
"ui.menu.live": "实时监控",
"ui.menu.live.allCameras": "所有摄像头",
"ui.menu.review": "回放",
"ui.menu.explore": "探测",
"ui.menu.export": "导出",
"ui.menu.uiPlayground": "UI Playground",
"ui.menu.user.current": "当前用户：{{user}}",
"ui.menu.user.anonymous": "匿名",
"ui.menu.user.logout": "登出",
"ui.cameraGroup": "摄像头组",
"ui.cameraGroup.add": "添加摄像头组",
"ui.cameraGroup.edit": "编辑摄像头组",
"ui.cameraGroup.edit.desc": "编辑摄像头组",
"ui.cameraGroup.delete.confirm": "确认删除",
"ui.cameraGroup.delete.confirm.desc": "你确定要删除摄像头组 <strong>{{name}}</strong> 吗？",
"ui.cameraGroup.name": "名称",
"ui.cameraGroup.name.placeholder": "请输入名称",
"ui.cameraGroup.name.errorMessage.mustLeastCharacters": "摄像头组的名称必须至少有 2 个字符。",
"ui.cameraGroup.name.errorMessage.exists": "摄像头组名称已存在。",
"ui.cameraGroup.name.errorMessage.nameMustNotPeriod": "摄像头组名称不能包含英文句号(.)。",
"ui.cameraGroup.name.errorMessage.invalid": "无效的摄像头组名称。",
"ui.cameraGroup.cameras": "摄像头",
"ui.cameraGroup.cameras.desc": "选择添加至该组的摄像头。",
"ui.cameraGroup.icon": "图标",
"ui.cameraGroup.toast.success": "摄像头组（{{name}}）保存成功。",
"ui.cameraGroup.toast.error": "保存设置失败： {{error}}",
"ui.eventView.alerts": "警告",
"ui.eventView.detections": "检测",
"ui.eventView.motion": "运动",
"ui.eventView.allCameras": "所有摄像头",
"ui.eventView.empty.alert": "还没有“警告”类回放",
"ui.eventView.empty.detection": "还没有“探测”类回放",
"ui.exploreView.trackedObjectDetails": "探测对象详情",
"ui.exploreView.type.details": "详情",
"ui.exploreView.type.snapshot": "快照",
"ui.exploreView.type.video": "视频",
"ui.exploreView.type.object_lifecycle": "对象生命周期",
"ui.exploreView.details.label": "标签",
"ui.exploreView.details.editSubLable": "编辑子标签",
"ui.exploreView.details.topScore": "最高得分",
"ui.exploreView.details.topScore.info": "最高分是跟踪对象的最高中位数得分，因此可能与搜索结果缩略图上显示的得分不同。",
"ui.exploreView.details.estimatedSpeed": "预计速度",
"ui.exploreView.details.camera": "摄像头",
"ui.exploreView.details.timestamp": "时间",
"ui.exploreView.details.button.findSimilar": "查找相似项",
"ui.exploreView.details.description": "描述",
"ui.exploreView.details.description.placeholder": "跟踪对象的描述",
"ui.exploreView.details.description.aiTips": "在跟踪对象的生命周期结束之前，Frigate 不会向您的生成式 AI 提供商请求描述。",
"ui.exploreView.details.button.regenerate": "重新生成",
"ui.exploreView.details.regenerateFromSnapshot": "从快照重新生成",
"ui.exploreView.details.regenerateFromThumbnails": "从缩略图重新生成",
"ui.exploreView.details.tips.descriptionSaved": "已保存描述",
"ui.exploreView.details.tips.saveDescriptionFailed": "更新描述失败",
"ui.exploreView.itemMenu.downloadVideo": "下载视频",
"ui.exploreView.itemMenu.downloadVideo.aria": "下载视频",
"ui.exploreView.itemMenu.downloadSnapshot": "下载快照",
"ui.exploreView.itemMenu.downloadSnapshot.aria": "下载快照",
"ui.exploreView.itemMenu.viewObjectLifecycle": "查看对象生命周期",
"ui.exploreView.itemMenu.viewObjectLifecycle.aria": "显示对象的生命周期",
"ui.exploreView.itemMenu.findSimilar": "查找相似项",
"ui.exploreView.itemMenu.findSimilar.aria": "查看相似的对象",
"ui.exploreView.itemMenu.submitToPlus": "提交至 Frigate+",
"ui.exploreView.itemMenu.submitToPlus.aria": "提交至 Frigate Plus",
"ui.exploreView.dialog.confirmDelete": "确认删除",
"ui.exploreView.dialog.confirmDelete.desc": "删除此跟踪对象将移除快照、所有已保存的嵌入数据以及任何关联的对象生命周期条目。但在历史视图中的录制视频<strong>不会</strong>被删除。<br /><br />你确定要继续删除吗？",
"ui.filter": "过滤器",
"ui.filter.allLabels": "所有标签",
"ui.filter.allLabels.short": "标签",
"ui.filter.countLabels": "{{count}} 个标签",
"ui.filter.allZones": "所有区域",
"ui.filter.allZones.short": "区域",
"ui.filter.allDates": "所有日期",
"ui.filter.allDates.short": "日期",
"ui.filter.more": "更多筛选项",
"ui.filter.timeRange": "时间范围",
"ui.filter.zones": "区域",
"ui.filter.subLabels": "子标签",
"ui.filter.allSubLabels": "所有子标签",
"ui.filter.score": "分值",
"ui.filter.features": "特性",
"ui.filter.features.hasSnapshot": "包含快照",
"ui.filter.features.hasVideoClip": "包含视频片段",
"ui.filter.features.submittedToFrigatePlus": "提交至 Frigate+",
"ui.filter.features.submittedToFrigatePlus.tips": "你必须要先筛选具有快照的探测对象。<br /><br />没有快照的跟踪对象无法提交至 Frigate+.",
"ui.filter.sort": "排序",
"ui.filter.sort.dateAsc": "日期 (正序)",
"ui.filter.sort.dateDesc": "日期 (倒序)",
"ui.filter.sort.scoreAsc": "对象分值 (正序)",
"ui.filter.sort.scoreDesc": "对象分值 (倒序)",
"ui.filter.sort.relevance": "关联性",
"ui.filter.allCameras": "所有摄像头",
"ui.filter.allCameras.short": "摄像头",
"ui.reviewFilter.showReviewed": "显示已查看的项目",
"ui.apply": "应用",
"ui.reset": "重置",
"ui.enabled": "启用",
"ui.save": "保存",
"ui.saving": "保存中……",
"ui.cancel": "取消",
"ui.close": "关闭",
"ui.copy": "复制",
"ui.back": "返回",
"ui.history": "历史",
"ui.fullscreen": "全屏",
"ui.exitFullscreen": "退出全屏",
"ui.pictureInPicture": "画中画",
"ui.on": "开",
"ui.off": "关",
"ui.edit": "编辑",
"ui.delete": "删除",
"ui.yes": "是",
"ui.no": "否",
"ui.download": "下载",
"ui.live.documentTitle": "实时监控 - Frigate",
"ui.live.documentTitle.withCamera": "{{camera}} - 实时监控 - Frigate",
"ui.live.twoWayTalk.enable": "开启双向对话",
"ui.live.twoWayTalk.disable": "关闭双向对话",
"ui.live.cameraAudio.enable": "开启摄像头音频",
"ui.live.cameraAudio.disable": "关闭摄像头音频",
"ui.live.ptz.move.left.label": "PTZ摄像头向左移动",
"ui.live.ptz.move.up.label": "PTZ摄像头向上移动",
"ui.live.ptz.move.down.label": "PTZ摄像头向下移动",
"ui.live.ptz.move.right.label": "PTZ摄像头向右移动",
"ui.live.ptz.zoom.in.label": "PTZ摄像头放大",
"ui.live.ptz.zoom.out.label": "PTZ摄像头缩小",
"ui.live.ptz.frame.center.label": "点击将PTZ摄像头画面居中",
"ui.live.detect.enable": "启用检测",
"ui.live.detect.disable": "关闭检测",
"ui.live.recording.enable": "启用录制",
"ui.live.recording.disable": "关闭录制",
"ui.live.snapshots.enable": "启用快照",
"ui.live.snapshots.disable": "关闭快照",
"ui.live.audioDetect.enable": "启用音频检测",
"ui.live.audioDetect.disable": "关闭音频检测",
"ui.live.autotracking.enable": "启用自动追踪",
"ui.live.autotracking.disable": "关闭自动追踪",
"ui.live.manualRecording.start": "开始手动按需录制",
"ui.live.manualRecording.started": "已启用手动按需录制",
"ui.live.manualRecording.failedToStart": "启动手动录制失败",
"ui.live.manualRecording.recordDisabledTips": "由于此摄像头的配置中禁用了录制或对其进行了限制，将只会保存快照。",
"ui.live.manualRecording.end": "停止手动按需录制",
"ui.live.manualRecording.ended": "已完成手动按需录制",
"ui.live.manualRecording.failedToEnd": "停止手动录制失败",
"ui.review.timeline": "时间线",
"ui.review.events": "事件",
"ui.review.events.noFoundForTimePeriod": "未找到该时间段的事件。",
"ui.review.documentTitle": "预览 - Frigate",
"ui.review.recordings.documentTitle": "回放 - Frigate",
"ui.player.noRecordingsFoundForThisTime": "找不到此次录制",
"ui.player.noPreviewFound": "没有找到预览",
"ui.player.noPreviewFoundFor": "没有在 {{cameraName}} 下找到预览",
"ui.calendarFilter.last24Hours": "过去24小时",
"ui.searchView.noTrackedObjects": "找不到探测的对象",
"ui.searchView.settings": "设置",
"ui.searchView.settings.defaultView": "默认视图",
"ui.searchView.settings.defaultView.desc": "当未选择任何过滤器时，显示每个标签最近跟踪对象的摘要，或显示未过滤的网格。",
"ui.searchView.settings.defaultView.summary": "摘要",
"ui.searchView.settings.defaultView.unfilteredGrid": "未过滤网格",
"ui.searchView.settings.gridColumns": "网格列数",
"ui.searchView.settings.gridColumns.desc": "选择网格视图中的列数。",
"ui.searchView.settings.searchSource": "搜索源",
"ui.searchView.settings.searchSource.desc": "选择是搜索缩略图还是跟踪对象的描述。",
"ui.settingView.menu.uiSettings": "界面设置",
"ui.settingView.menu.exploreSettings": "搜索设置",
"ui.settingView.menu.cameraSettings": "摄像头设置",
"ui.settingView.menu.masksAndZones": "屏罩 / 区域",
"ui.settingView.menu.motionTuner": "运动调整器",
"ui.settingView.menu.debug": "调试",
"ui.settingView.menu.users": "用户",
"ui.settingView.menu.notifications": "通知",
"ui.settingView.generalSettings": "常规设置",
"ui.settingView.generalSettings.liveDashboard": "实时监控面板",
"ui.settingView.generalSettings.automaticLiveView": "自动实时预览",
"ui.settingView.generalSettings.automaticLiveView.desc": "检测到画面活动时将自动切换至该摄像头实时画面。禁用此选项会导致实时监控页面的摄像头图像每分钟只更新一次。",
"ui.settingView.generalSettings.playAlertVideos": "播放警告视频",
"ui.settingView.generalSettings.playAlertVideos.desc": "默认情况下，实时监控页面上的最新警告会以一小段循环的形式进行播放。禁用此选项将仅显示浏览器本地缓存的静态图片。",
"ui.settingView.generalSettings.storedLayouts": "存储监控面板布局",
"ui.settingView.generalSettings.storedLayouts.desc": "可以在监控面板调整或拖动摄像头的布局。这些设置将保存在浏览器的本地存储中。",
"ui.settingView.generalSettings.storedLayouts.clearAll": "清除所有布局",
"ui.settingView.generalSettings.cameraGroupStreaming": "摄像头组视频流设置",
"ui.settingView.generalSettings.cameraGroupStreaming.desc": "每个摄像头组的视频流设置将保存在浏览器的本地存储中。",
"ui.settingView.generalSettings.cameraGroupStreaming.clearAll": "清除所有视频流设置",
"ui.settingView.generalSettings.recordingsViewer": "回放查看",
"ui.settingView.generalSettings.recordingsViewer.defaultPlaybackRate": "默认播放速率",
"ui.settingView.generalSettings.recordingsViewer.defaultPlaybackRate.desc": "调整播放录像时默认的速率。",
"ui.settingView.generalSettings.calendar": "日历",
"ui.settingView.generalSettings.calendar.firstWeekday": "每周第一天",
"ui.settingView.generalSettings.calendar.firstWeekday.desc": "设置每周第一天是星期几。",
"ui.settingView.generalSettings.calendar.firstWeekday.sunday": "星期天",
"ui.settingView.generalSettings.calendar.firstWeekday.monday": "星期一",
"ui.settingView.exploreSettings": "探测设置",
"ui.settingView.exploreSettings.semanticSearch": "语义搜索",
"ui.settingView.exploreSettings.semanticSearch.desc": "Frigate的语义搜索能够让你使用自然语言根据图像本身、自定义的文本描述或自动生成的描述来搜索视频。",
"ui.settingView.exploreSettings.semanticSearch.readTheDocumentation": "阅读文档（英文）",
"ui.settingView.exploreSettings.semanticSearch.reindexOnStartup": "启动时重新索引",
"ui.settingView.exploreSettings.semanticSearch.reindexOnStartup.desc": "每次启动将重新索引并重新处理所有缩略图和描述。<em>关闭该设置后不要忘记重启！</em>",
"ui.settingView.exploreSettings.semanticSearch.modelSize": "模型大小",
"ui.settingView.exploreSettings.semanticSearch.modelSize.desc": "用于语义搜索的语言模型大小",
"ui.settingView.exploreSettings.semanticSearch.modelSize.small": "小",
"ui.settingView.exploreSettings.semanticSearch.modelSize.large": "大",
"ui.settingView.exploreSettings.semanticSearch.modelSize.small.desc": "使用 <strong>小</strong>模型。该模型将使用较少的内存，在CPU上也能较快的运行。质量较好。",
"ui.settingView.exploreSettings.semanticSearch.modelSize.large.desc": "使用 <strong>大</strong>模型。该模型采用了完整的Jina模型，并在适用的情况下使用GPU。",
"ui.settingView.cameraSettings": "摄像头设置",
"ui.settingView.cameraSettings.review": "预览",
"ui.settingView.cameraSettings.review.desc": "启用/禁用摄像头的警报和检测。禁用后，不会生成新的预览项。",
"ui.settingView.cameraSettings.review.alerts": "警告",
"ui.settingView.cameraSettings.review.detections": "检测",
"ui.settingView.cameraSettings.reviewClassification": "预览分级",
"ui.settingView.cameraSettings.reviewClassification.desc": "Frigate 将回放项目分为“警告”和“检测”。默认情况下，所有的 <em>人</em>、<em>汽车</em> 的对象都视为警告。你可以通过修改配置文件配置区域来细分。",
"ui.settingView.cameraSettings.reviewClassification.readTheDocumentation": "阅读文档（英文）",
"ui.settingView.cameraSettings.reviewClassification.noDefinedZones": "该摄像头没有设置区域。",
"ui.settingView.cameraSettings.reviewClassification.objectAlertsTips": "所有的 {{alertsLabels}} 对象在 {{cameraName}} 都将显示为警告。",
"ui.settingView.cameraSettings.reviewClassification.zoneObjectAlertsTips": "所有的 {{alertsLabels}} 对象在 {{cameraName}} 的 {{zone}} 区域都将显示为警告。",
"ui.settingView.cameraSettings.reviewClassification.selectAlertsZones": "选择要显示为警告的区域",
"ui.settingView.cameraSettings.reviewClassification.objectDetectionsTips": "所有未在 {{cameraName}} 归类的 {{detectionsLabels}} 对象，无论它位于哪个区域，都将显示为检测。",
"ui.settingView.cameraSettings.reviewClassification.zoneObjectDetectionsTips": "所有未在 {{cameraName}} 上归类为 {{detectionsLabels}} 的对象在 {{zone}} 区域都将显示为检测。",
"ui.settingView.cameraSettings.reviewClassification.zoneObjectDetectionsTips.notSelectDetections": "所有在 {{cameraName}} 的 {{zone}} 上检测到的未归类为警告的 {{detectionsLabels}} 对象，无论它位于哪个区域，都将显示为检测。",
"ui.settingView.cameraSettings.reviewClassification.zoneObjectDetectionsTips.regardlessOfZoneObjectDetectionsTips": "所有未在 {{cameraName}} 归类的 {{detectionsLabels}} 对象，无论它位于哪个区域，都将显示为检测。",
"ui.settingView.masksAndZonesSettings": "屏罩 / 区域",
"ui.settingView.masksAndZonesSettings.zone": "区域",
"ui.settingView.masksAndZonesSettings.zone.documentTitle": "编辑区域 - Frigate",
"ui.settingView.masksAndZonesSettings.zone.desc": "该功能允许你定义特定区域，以便你可以确定特定对象是否在该区域内。",
"ui.settingView.masksAndZonesSettings.zone.desc.documentation": "文档（英文）",
"ui.settingView.masksAndZonesSettings.zone.add": "添加区域",
"ui.settingView.masksAndZonesSettings.zone.edit": "编辑区域",
"ui.settingView.masksAndZonesSettings.zone.point_one": "{{count}} 点",
"ui.settingView.masksAndZonesSettings.zone.point_other": "{{count}} 点",
"ui.settingView.masksAndZonesSettings.zone.clickDrawPolygon": "在图像上点击添加点绘制多边形区域。",
"ui.settingView.masksAndZonesSettings.zone.name": "区域名称",
"ui.settingView.masksAndZonesSettings.zone.name.inputPlaceHolder": "请输入名称",
"ui.settingView.masksAndZonesSettings.zone.name.tips": "名称至少包含两个字符，且不能和摄像头或其他区域同名。",
"ui.settingView.masksAndZonesSettings.zone.inertia": "区域名称",
"ui.settingView.masksAndZonesSettings.zone.inertia.desc": "识别指定对象前该对象必须在这个区域内出现了多少帧。<em>默认值：3</em>",
"ui.settingView.masksAndZonesSettings.zone.loiteringTime": "停留时间",
"ui.settingView.masksAndZonesSettings.zone.loiteringTime.desc": "设置对象必须在区域中活动的最小时间（单位为秒）。<em>默认值：0</em>",
"ui.settingView.masksAndZonesSettings.zone.objects": "对象",
"ui.settingView.masksAndZonesSettings.zone.objects.desc": "将在此区域应用的对象列表。",
"ui.settingView.masksAndZonesSettings.zone.allObjects": "所有对象",
"ui.settingView.masksAndZonesSettings.motionMasks": "运动遮罩",
"ui.settingView.masksAndZonesSettings.motionMasks.documentTitle": "编辑运动遮罩 - Frigate",
"ui.settingView.masksAndZonesSettings.motionMasks.desc": "该功能用于防止触发不必要的运动类型。过度的设置遮罩将使对象更加难以被追踪",
"ui.settingView.masksAndZonesSettings.motionMasks.desc.documentation": "文档（英文）",
"ui.settingView.masksAndZonesSettings.motionMasks.add": "添加运动遮罩",
"ui.settingView.masksAndZonesSettings.motionMasks.edit": "编辑运动遮罩",
"ui.settingView.masksAndZonesSettings.motionMasks.context": "运动遮罩用于防止不需要的运动类型触发检测（例如：树枝、摄像头显示的时间等）。运动遮罩需要<strong>谨慎使用</strong>，过度的遮罩会导致追踪对象变得更加困难。",
"ui.settingView.masksAndZonesSettings.motionMasks.context.documentation": "阅读文档（英文）",
"ui.settingView.masksAndZonesSettings.motionMasks.point_one": "{{count}} 点",
"ui.settingView.masksAndZonesSettings.motionMasks.point_other": "{{count}} 点",
"ui.settingView.masksAndZonesSettings.motionMasks.clickDrawPolygon": "在图像上点击添加点绘制多边形区域。",
"ui.settingView.masksAndZonesSettings.motionMasks.polygonAreaTooLarge": "运动遮罩的大小达到了摄像头画面的{{polygonArea}}%。不建议设置太大的运动遮罩。",
"ui.settingView.masksAndZonesSettings.motionMasks.polygonAreaTooLarge.tips": "运动遮罩不会阻止检测到对象，你应该使用区域来限制检测对象。",
"ui.settingView.masksAndZonesSettings.motionMasks.polygonAreaTooLarge.documentation": "阅读文档（英文）",
"ui.settingView.masksAndZonesSettings.objectMasks": "对象遮罩",
"ui.settingView.masksAndZonesSettings.objectMasks.documentTitle": "编辑对象遮罩 - Frigate",
"ui.settingView.masksAndZonesSettings.objectMasks.desc": "对象过滤器用于防止特定位置的指定对象被误报。",
"ui.settingView.masksAndZonesSettings.objectMasks.documentation": "文档（英文）",
"ui.settingView.masksAndZonesSettings.objectMasks.add": "添加对象遮罩",
"ui.settingView.masksAndZonesSettings.objectMasks.edit": "编辑对象遮罩",
"ui.settingView.masksAndZonesSettings.objectMasks.context": "对象过滤器用于防止特定位置的指定对象被误报。",
"ui.settingView.masksAndZonesSettings.objectMasks.point_one": "{{count}} 点",
"ui.settingView.masksAndZonesSettings.objectMasks.point_other": "{{count}} 点",
"ui.settingView.masksAndZonesSettings.objectMasks.clickDrawPolygon": "在图像上点击添加点绘制多边形区域。",
"ui.settingView.masksAndZonesSettings.objectMasks.objects": "对象",
"ui.settingView.masksAndZonesSettings.objectMasks.objects.desc": "将应用于此对象遮罩的对象列表。",
"ui.settingView.masksAndZonesSettings.objectMasks.objects.allObjectTypes": "所有对象类型",
"ui.settingView.motionDetectionTuner": "运动检测调整器",
"ui.settingView.motionDetectionTuner.desc": "Frigate 将使用运动检测作为首个步骤，以确认一帧画面中是否有对象需要使用对象检测。",
"ui.settingView.motionDetectionTuner.desc.documentation": "阅读有关运动检测的文档（英文）",
"ui.settingView.motionDetectionTuner.Threshold": "阈值",
"ui.settingView.motionDetectionTuner.Threshold.desc": "阈值决定像素亮度高于多少时会被认为是运动。<em>默认值：30</em>",
"ui.settingView.motionDetectionTuner.contourArea": "轮廓面积",
"ui.settingView.motionDetectionTuner.contourArea.desc": "轮廓面积决定哪些变化的像素组符合运动条件。<em>默认值：10</em>",
"ui.settingView.motionDetectionTuner.improveContrast": "提高对比度",
"ui.settingView.motionDetectionTuner.improveContrast.desc": "提高较暗场景的对比度。默认值：开启",
"ui.settingView.debug": "调试",
"ui.settingView.debug.detectorDesc": "Frigate 将使用探测器（{{detectors}}）来检测摄像头视频流中的对象。",
"ui.settingView.debug.desc": "调试界面将实时显示被追踪的对象以及统计信息，对象列表将显示检测到的对象和延迟显示的概览。",
"ui.settingView.debug.debugging": "调试选项",
"ui.settingView.debug.objectList": "对象列表",
"ui.settingView.debug.noObjects": "没有对象",
"ui.settingView.debug.boundingBoxes": "边界框",
"ui.settingView.debug.boundingBoxes.desc": "将在被追踪的对象周围显示边界框",
"ui.settingView.debug.boundingBoxes.colors": "对象边界框颜色定义",
"ui.settingView.debug.boundingBoxes.colors.info": "<li>启用后，将会为每个对象标签分配不同的颜色</li><li>深蓝色细线代表该对象在当前时间点未被检测到</li><li>灰色细线代表检测到的物体静止不动</li><li>粗线表示该对象为自动跟踪的主体（在启动时）</li>",
"ui.settingView.debug.timestamp": "时间戳",
"ui.settingView.debug.timestamp.desc": "在图像上显示时间戳",
"ui.settingView.debug.zone": "区域",
"ui.settingView.debug.zone.desc": "显示已定义的区域图层",
"ui.settingView.debug.mask": "运动遮罩",
"ui.settingView.debug.mask.desc": "显示运动遮罩图层",
"ui.settingView.debug.motion": "运动区域框",
"ui.settingView.debug.motion.desc": "在检测到运动的区域显示区域框",
"ui.settingView.debug.motion.tips": "<p className=\"mb-2\"><strong>运动区域框</strong></p><br><p>将在当前检测到运动的区域内显示红色区域框。</p>",
"ui.settingView.debug.regions": "范围",
"ui.settingView.debug.regions.desc": "显示发送到运动检测器感兴趣范围的框。",
"ui.settingView.debug.regions.tips": "<p className=\"mb-2\"><strong>范围框</strong></p><br><p>将在帧中发送到目标检测器的感兴趣范围上叠加绿色框。</p>",
"ui.settingView.users": "用户管理",
"ui.settingView.users.addUser": "添加用户",
"ui.settingView.users.updatePassword": "修改密码",
"ui.settingView.users.dialog.createUser": "创建用户",
"ui.settingView.users.dialog.createUser.user": "用户名",
"ui.settingView.users.dialog.createUser.password": "密码",
"ui.settingView.users.dialog.deleteUser": "删除该用户",
"ui.settingView.users.dialog.deleteUser.warn": "你确定要删除该用户吗？",
"ui.settingView.users.dialog.setPassword": "修改密码",
"ui.settingView.notification": "通知",
"ui.settingView.notification.notificationSettings": "通知设置",
"ui.settingView.notification.desc": "Frigate 在浏览器中运行或作为 PWA 安装时，可以原生向您的设备发送推送通知。",
"ui.settingView.notification.documentation": "阅读文档（英文）",
"ui.settingView.notification.email": "电子邮箱",
"ui.settingView.notification.email.placeholder": "例如：example@email.com",
"ui.settingView.notification.email.desc": "需要输入有效的电子邮件，在推送服务出现问题时，将使用此电子邮件进行通知。",
"ui.settingView.notification.cameras": "摄像头",
"ui.settingView.notification.cameras.noCameras": "没有可用的摄像头",
"ui.settingView.notification.cameras.desc": "选择要启用通知的摄像头。",
"ui.settingView.notification.deviceSpecific": "设备专用设置",
"ui.settingView.notification.registerDevice": "注册该设备",
"ui.settingView.notification.unregisterDevice": "取消注册该设备",
"ui.configEditorView.configEditor": "配置编辑器",
"ui.configEditorView.copyConfig": "复制配置",
"ui.configEditorView.saveAndRestart": "保存并重启",
"ui.configEditorView.saveOnly": "只保存",
"ui.exportView.documentTitle": "导出 - Frigate",
"ui.exportView.search": "搜索",
"ui.exportView.noExports": "没有找到导出的项目",
"ui.exportView.deleteExport": "删除导出的项目",
"ui.exportView.deleteExport.desc": "你确定要删除 {{exportName}} 吗？"
}

3
web/src/components/Statusbar.tsx
View File

@ -5,6 +5,7 @@ import {
} from "@/context/statusbar-provider";
import useStats, { useAutoFrigateStats } from "@/hooks/use-stats";
import { useContext, useEffect, useMemo } from "react";
import { Trans } from "react-i18next";
import { FaCheck } from "react-icons/fa";
import { IoIosWarning } from "react-icons/io";
import { MdCircle } from "react-icons/md";
@ -129,7 +130,7 @@ export default function Statusbar() {
{Object.entries(messages).length === 0 ? (
<div className="flex items-center gap-2 text-sm">
<FaCheck className="size-3 text-green-500" />
System is healthy
<Trans>ui.stats.healthy</Trans>
</div>
) : (
Object.entries(messages).map(([key, messageArray]) => (

8
web/src/components/card/ReviewCard.tsx
View File

@ -35,6 +35,7 @@ import useKeyboardListener from "@/hooks/use-keyboard-listener";
import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
import { capitalizeFirstLetter } from "@/utils/stringUtil";
import { buttonVariants } from "../ui/button";
import { t } from "i18next";
type ReviewCardProps = {
event: ReviewSegment;
@ -82,10 +83,9 @@ export default function ReviewCard({
)
.then((response) => {
if (response.status == 200) {
toast.success(
"Successfully started export. View the file in the /exports folder.",
{ position: "top-center" },
);
toast.success(t("ui.dialog.export.toast.success"), {
position: "top-center",
});
}
})
.catch((error) => {

4
web/src/components/card/SearchThumbnail.tsx
View File

@ -8,11 +8,11 @@ import Chip from "@/components/indicators/Chip";
import useImageLoaded from "@/hooks/use-image-loaded";
import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
import ImageLoadingIndicator from "../indicators/ImageLoadingIndicator";
import { capitalizeFirstLetter } from "@/utils/stringUtil";
import { SearchResult } from "@/types/search";
import { cn } from "@/lib/utils";
import { TooltipPortal } from "@radix-ui/react-tooltip";
import useContextMenu from "@/hooks/use-contextmenu";
import { t } from "i18next";
type SearchThumbnailProps = {
searchResult: SearchResult;
@ -113,7 +113,7 @@ export default function SearchThumbnail({
.filter(
(item) => item !== undefined && !item.includes("-verified"),
)
.map((text) => capitalizeFirstLetter(text))
.map((text) => t("object." + text))
.sort()
.join(", ")
.replaceAll("-verified", "")}

5
web/src/components/card/SearchThumbnailFooter.tsx
View File

@ -6,6 +6,7 @@ import { SearchResult } from "@/types/search";
import ActivityIndicator from "../indicators/activity-indicator";
import SearchResultActions from "../menu/SearchResultActions";
import { cn } from "@/lib/utils";
import { t } from "i18next";
type SearchThumbnailProps = {
searchResult: SearchResult;
@ -29,7 +30,9 @@ export default function SearchThumbnailFooter({
// date
const formattedDate = useFormattedTimestamp(
searchResult.start_time,
config?.ui.time_format == "24hour" ? "%b %-d, %H:%M" : "%b %-d, %I:%M %p",
config?.ui.time_format == "24hour"
? t("ui.time.formattedTimestampExcludeSeconds.24hour")
: t("ui.time.formattedTimestampExcludeSeconds"),
config?.ui.timezone,
);

18
web/src/components/dynamic/TimeAgo.tsx
View File

@ -1,3 +1,4 @@
import { t } from "i18next";
import { FunctionComponent, useEffect, useMemo, useState } from "react";
interface IProp {
@ -40,7 +41,7 @@ const timeAgo = ({
const elapsed: number = elapsedTime / 1000;
if (elapsed < 10) {
return "just now";
return t("ui.time.justNow");
}
for (let i = 0; i < timeUnits.length; i++) {
@ -64,11 +65,22 @@ const timeAgo = ({
if (monthDiff > 0) {
const unitAmount = monthDiff;
return `${unitAmount}${dense ? timeUnits[i].unit : ` ${timeUnits[i].full}`}${dense ? "" : "s"} ago`;
return t("ui.time.ago", {
timeAgo: t(
`ui.time.${dense ? timeUnits[i].unit : timeUnits[i].full}`,
{
time: unitAmount,
},
),
});
}
} else if (elapsed >= timeUnits[i].value) {
const unitAmount: number = Math.floor(elapsed / timeUnits[i].value);
return `${unitAmount}${dense ? timeUnits[i].unit : ` ${timeUnits[i].full}`}${dense ? "" : "s"} ago`;
return t("ui.time.ago", {
timeAgo: t(`ui.time.${dense ? timeUnits[i].unit : timeUnits[i].full}`, {
time: unitAmount,
}),
});
}
}
return "Invalid Time";

6
web/src/components/filter/CalendarFilterButton.tsx
View File

@ -14,6 +14,8 @@ import { DateRangePicker } from "../ui/calendar-range";
import { DateRange } from "react-day-picker";
import { useState } from "react";
import PlatformAwareDialog from "../overlay/dialog/PlatformAwareDialog";
import { t } from "i18next";
import { Trans } from "react-i18next";
type CalendarFilterButtonProps = {
reviewSummary?: ReviewSummary;
@ -46,7 +48,7 @@ export default function CalendarFilterButton({
<div
className={`hidden md:block ${day == undefined ? "text-primary" : "text-selected-foreground"}`}
>
{day == undefined ? "Last 24 Hours" : selectedDate}
{day == undefined ? t("ui.calendarFilter.last24Hours") : selectedDate}
</div>
</Button>
);
@ -66,7 +68,7 @@ export default function CalendarFilterButton({
updateSelectedDay(undefined);
}}
>
Reset
<Trans>ui.reset</Trans>
</Button>
</div>
</>

103
web/src/components/filter/CameraGroupSelector.tsx
View File

@ -70,6 +70,8 @@ import {
MobilePageHeader,
MobilePageTitle,
} from "../mobile/MobilePage";
import { Trans } from "react-i18next";
import { t } from "i18next";
import { Label } from "../ui/label";
import { Switch } from "../ui/switch";
import { CameraStreamingDialog } from "../settings/CameraStreamingDialog";
@ -160,8 +162,8 @@ export function CameraGroupSelector({ className }: CameraGroupSelectorProps) {
</Button>
</TooltipTrigger>
<TooltipPortal>
<TooltipContent className="capitalize" side="right">
All Cameras
<TooltipContent className="" side="right">
<Trans>ui.menu.live.allCameras</Trans>
</TooltipContent>
</TooltipPortal>
</Tooltip>
@ -349,9 +351,11 @@ function NewGroupDialog({
className={cn(isDesktop && "mt-5", "justify-center")}
onClose={() => setOpen(false)}
>
<Title>Camera Groups</Title>
<Title>
<Trans>ui.cameraGroup</Trans>
</Title>
<Description className="sr-only">
Edit camera groups
<Trans>ui.cameraGroup.edit</Trans>
</Description>
<div
className={cn(
@ -399,7 +403,11 @@ function NewGroupDialog({
}}
>
<Title>
{editState == "add" ? "Add" : "Edit"} Camera Group
{editState == "add" ? (
<Trans>ui.cameraGroup.add</Trans>
) : (
<Trans>ui.cameraGroup.edit</Trans>
)}
</Title>
<Description className="sr-only">
Edit camera groups
@ -472,8 +480,12 @@ export function EditGroupDialog({
>
<div className="scrollbar-container flex flex-col overflow-y-auto md:my-4">
<Header className="mt-2" onClose={() => setOpen(false)}>
<Title>Edit Camera Group</Title>
<Description className="sr-only">Edit camera group</Description>
<Title>
<Trans>ui.cameraGroup.edit</Trans>
</Title>
<Description className="sr-only">
<Trans>ui.cameraGroup.edit.desc</Trans>
</Description>
</Header>
<CameraGroupEdit
@ -523,19 +535,24 @@ export function CameraGroupRow({
>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Confirm Delete</AlertDialogTitle>
<AlertDialogTitle>
<Trans>ui.cameraGroup.delete.confirm</Trans>
</AlertDialogTitle>
</AlertDialogHeader>
<AlertDialogDescription>
Are you sure you want to delete the camera group{" "}
<em>{group[0]}</em>?
<Trans values={{ name: group[0] }}>
ui.cameraGroup.delete.confirm.desc
</Trans>
</AlertDialogDescription>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogCancel>
<Trans>ui.cancel</Trans>
</AlertDialogCancel>
<AlertDialogAction
className={buttonVariants({ variant: "destructive" })}
onClick={onDeleteGroup}
>
Delete
<Trans>ui.delete</Trans>
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
@ -576,7 +593,9 @@ export function CameraGroupRow({
onClick={onEditGroup}
/>
</TooltipTrigger>
<TooltipContent>Edit</TooltipContent>
<TooltipContent>
<Trans>ui.edit</Trans>
</TooltipContent>
</Tooltip>
<Tooltip>
@ -587,7 +606,9 @@ export function CameraGroupRow({
onClick={() => setDeleteDialogOpen(true)}
/>
</TooltipTrigger>
<TooltipContent>Delete</TooltipContent>
<TooltipContent>
<Trans>ui.delete</Trans>
</TooltipContent>
</Tooltip>
</div>
)}
@ -632,7 +653,7 @@ export function CameraGroupEdit({
name: z
.string()
.min(2, {
message: "Camera group name must be at least 2 characters.",
message: t("ui.cameraGroup.name.errorMessage.mustLeastCharacters"),
})
.transform((val: string) => val.trim().replace(/\s+/g, "_"))
.refine(
@ -643,7 +664,7 @@ export function CameraGroupEdit({
);
},
{
message: "Camera group name already exists.",
message: t("ui.cameraGroup.name.errorMessage.exists"),
},
)
.refine(
@ -651,11 +672,11 @@ export function CameraGroupEdit({
return !value.includes(".");
},
{
message: "Camera group name must not contain a period.",
message: t("ui.cameraGroup.name.errorMessage.nameMustNotPeriod"),
},
)
.refine((value: string) => value.toLowerCase() !== "default", {
message: "Invalid camera group name.",
message: t("ui.cameraGroup.name.errorMessage.invalid"),
}),
cameras: z.array(z.string()),
@ -710,23 +731,31 @@ export function CameraGroupEdit({
)
.then(async (res) => {
if (res.status === 200) {
toast.success(`Camera group (${values.name}) has been saved.`, {
position: "top-center",
});
toast.success(
t("ui.cameraGroup.toast.success", { name: values.name }),
{
position: "top-center",
},
);
updateConfig();
if (onSave) {
onSave();
}
setAllGroupsStreamingSettings(updatedSettings);
} else {
toast.error(`Failed to save config changes: ${res.statusText}`, {
position: "top-center",
});
toast.error(
t("ui.cameraGroup.toast.error", { error: res.statusText }),
{
position: "top-center",
},
);
}
})
.catch((error) => {
toast.error(
`Failed to save config changes: ${error.response.data.message}`,
t("ui.cameraGroup.toast.error", {
error: error.response.data.message,
}),
{ position: "top-center" },
);
})
@ -767,11 +796,13 @@ export function CameraGroupEdit({
name="name"
render={({ field }) => (
<FormItem>
<FormLabel>Name</FormLabel>
<FormLabel>
<Trans>ui.cameraGroup.name</Trans>
</FormLabel>
<FormControl>
<Input
className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
placeholder="Enter a name..."
placeholder={t("ui.cameraGroup.name.placeholder")}
{...field}
/>
</FormControl>
@ -787,9 +818,11 @@ export function CameraGroupEdit({
name="cameras"
render={({ field }) => (
<FormItem>
<FormLabel>Cameras</FormLabel>
<FormLabel>
<Trans>ui.cameraGroup.cameras</Trans>
</FormLabel>
<FormDescription>
Select cameras for this group.
<Trans>ui.cameraGroup.cameras.desc</Trans>
</FormDescription>
<FormMessage />
{[
@ -874,7 +907,9 @@ export function CameraGroupEdit({
name="icon"
render={({ field }) => (
<FormItem className="flex flex-col space-y-2">
<FormLabel>Icon</FormLabel>
<FormLabel>
<Trans>ui.cameraGroup.icon</Trans>
</FormLabel>
<FormControl>
<IconPicker
selectedIcon={{
@ -902,7 +937,7 @@ export function CameraGroupEdit({
aria-label="Cancel"
onClick={onCancel}
>
Cancel
<Trans>ui.cancel</Trans>
</Button>
<Button
variant="select"
@ -914,10 +949,12 @@ export function CameraGroupEdit({
{isLoading ? (
<div className="flex flex-row items-center gap-2">
<ActivityIndicator />
<span>Saving...</span>
<span>
<Trans>ui.saving</Trans>
</span>
</div>
) : (
"Save"
<Trans>ui.save</Trans>
)}
</Button>
</div>

12
web/src/components/filter/CamerasFilterButton.tsx
View File

@ -12,6 +12,8 @@ import { isMobile } from "react-device-detect";
import { Drawer, DrawerContent, DrawerTrigger } from "../ui/drawer";
import FilterSwitch from "./FilterSwitch";
import { FaVideo } from "react-icons/fa";
import { t } from "i18next";
import { Trans } from "react-i18next";
type CameraFilterButtonProps = {
allCameras: string[];
@ -38,7 +40,7 @@ export function CamerasFilterButton({
}
if (!selectedCameras || selectedCameras.length == 0) {
return "All Cameras";
return t("ui.menu.live.allCameras");
}
return `${selectedCameras.includes("birdseye") ? selectedCameras.length - 1 : selectedCameras.length} Camera${selectedCameras.length !== 1 ? "s" : ""}`;
@ -138,7 +140,7 @@ export function CamerasFilterContent({
{isMobile && (
<>
<DropdownMenuLabel className="flex justify-center">
Cameras
<Trans>ui.filter.allCameras.short</Trans>
</DropdownMenuLabel>
<DropdownMenuSeparator />
</>
@ -146,7 +148,7 @@ export function CamerasFilterContent({
<div className="scrollbar-container flex h-auto max-h-[80dvh] flex-col gap-2 overflow-y-auto overflow-x-hidden p-4">
<FilterSwitch
isChecked={currentCameras == undefined}
label="All Cameras"
label={t("ui.filter.allCameras")}
onCheckedChange={(isChecked) => {
if (isChecked) {
setCurrentCameras(undefined);
@ -211,7 +213,7 @@ export function CamerasFilterContent({
setOpen(false);
}}
>
Apply
<Trans>ui.apply</Trans>
</Button>
<Button
aria-label="Reset"
@ -220,7 +222,7 @@ export function CamerasFilterContent({
updateCameraFilter(undefined);
}}
>
Reset
<Trans>ui.reset</Trans>
</Button>
</div>
</>

18
web/src/components/filter/ReviewFilterGroup.tsx
View File

@ -23,6 +23,8 @@ import { FilterList, GeneralFilter } from "@/types/filter";
import CalendarFilterButton from "./CalendarFilterButton";
import { CamerasFilterButton } from "./CamerasFilterButton";
import PlatformAwareDialog from "../overlay/dialog/PlatformAwareDialog";
import { Trans } from "react-i18next";
import { t } from "i18next";
const REVIEW_FILTERS = [
"cameras",
@ -275,7 +277,7 @@ function ShowReviewFilter({
}
/>
<Label className="ml-2 cursor-pointer text-primary" htmlFor="reviewed">
Show Reviewed
<Trans>ui.reviewFilter.showReviewed</Trans>
</Label>
</div>
@ -361,7 +363,7 @@ function GeneralFilterButton({
: "text-primary"
}`}
>
Filter
<Trans>ui.filter</Trans>
</div>
</Button>
);
@ -442,7 +444,7 @@ export function GeneralFilterContent({
{currentSeverity && (
<div className="my-2.5 flex flex-col gap-2.5">
<FilterSwitch
label="Alerts"
label={t("ui.eventView.alerts")}
disabled={currentSeverity == "alert"}
isChecked={
currentSeverity == "alert" ? true : filter.showAll === true
@ -452,7 +454,7 @@ export function GeneralFilterContent({
}
/>
<FilterSwitch
label="Detections"
label={t("ui.eventView.detections")}
disabled={currentSeverity == "detection"}
isChecked={
currentSeverity == "detection" ? true : filter.showAll === true
@ -469,7 +471,7 @@ export function GeneralFilterContent({
className="mx-2 cursor-pointer text-primary"
htmlFor="allLabels"
>
All Labels
<Trans>ui.filter.allLabels</Trans>
</Label>
<Switch
className="ml-1"
@ -516,7 +518,7 @@ export function GeneralFilterContent({
className="mx-2 cursor-pointer text-primary"
htmlFor="allZones"
>
All Zones
<Trans>ui.filter.allZones</Trans>
</Label>
<Switch
className="ml-1"
@ -572,10 +574,10 @@ export function GeneralFilterContent({
onClose();
}}
>
Apply
<Trans>ui.apply</Trans>
</Button>
<Button aria-label="Reset" onClick={onReset}>
Reset
<Trans>ui.reset</Trans>
</Button>
</div>
</>

39
web/src/components/filter/SearchFilterGroup.tsx
View File

@ -24,6 +24,8 @@ import PlatformAwareDialog from "../overlay/dialog/PlatformAwareDialog";
import SearchFilterDialog from "../overlay/dialog/SearchFilterDialog";
import { CalendarRangeFilterButton } from "./CalendarFilterButton";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import { Trans } from "react-i18next";
import { t } from "i18next";
type SearchFilterGroupProps = {
className: string;
@ -195,7 +197,9 @@ export default function SearchFilterGroup({
to: new Date(filter.before * 1000),
}
}
defaultText={isMobile ? "Dates" : "All Dates"}
defaultText={
isMobile ? t("ui.filter.allDates.short") : t("ui.filter.allDates")
}
updateSelectedRange={onUpdateSelectedRange}
/>
)}
@ -236,18 +240,18 @@ function GeneralFilterButton({
const buttonText = useMemo(() => {
if (isMobile) {
return "Labels";
return t("ui.filter.allLabels.short");
}
if (!selectedLabels || selectedLabels.length == 0) {
return "All Labels";
return t("ui.filter.allLabels");
}
if (selectedLabels.length == 1) {
return selectedLabels[0];
return t("object." + selectedLabels[0]);
}
return `${selectedLabels.length} Labels`;
return t("ui.filter.countLabels", { count: selectedLabels.length });
}, [selectedLabels]);
// ui
@ -331,7 +335,7 @@ export function GeneralFilterContent({
className="mx-2 cursor-pointer text-primary"
htmlFor="allLabels"
>
All Labels
<Trans>ui.filter.allLabels</Trans>
</Label>
<Switch
className="ml-1"
@ -348,7 +352,7 @@ export function GeneralFilterContent({
{allLabels.map((item) => (
<FilterSwitch
key={item}
label={item.replaceAll("_", " ")}
label={t("object." + item)}
isChecked={currentLabels?.includes(item) ?? false}
onCheckedChange={(isChecked) => {
if (isChecked) {
@ -383,7 +387,7 @@ export function GeneralFilterContent({
onClose();
}}
>
Apply
<Trans>ui.apply</Trans>
</Button>
<Button
aria-label="Reset"
@ -392,7 +396,7 @@ export function GeneralFilterContent({
updateLabelFilter(undefined);
}}
>
Reset
<Trans>ui.reset</Trans>
</Button>
</div>
</>
@ -441,7 +445,7 @@ function SortTypeButton({
<div
className={`${selectedSortType != defaultSortType && selectedSortType != undefined ? "text-selected-foreground" : "text-primary"}`}
>
Sort
<Trans>ui.filter.sort</Trans>
</div>
</Button>
);
@ -497,15 +501,14 @@ export function SortTypeContent({
onClose,
}: SortTypeContentProps) {
const sortLabels = {
date_asc: "Date (Ascending)",
date_desc: "Date (Descending)",
score_asc: "Object Score (Ascending)",
score_desc: "Object Score (Descending)",
date_asc: t("ui.filter.sort.dateAsc"),
date_desc: t("ui.filter.sort.dateDesc"),
score_asc: t("ui.filter.sort.scoreAsc"),
score_desc: t("ui.filter.sort.scoreDesc"),
speed_asc: "Estimated Speed (Ascending)",
speed_desc: "Estimated Speed (Descending)",
relevance: "Relevance",
relevance: t("ui.filter.sort.relevance"),
};
return (
<>
<div className="overflow-x-hidden">
@ -558,7 +561,7 @@ export function SortTypeContent({
onClose();
}}
>
Apply
<Trans>ui.apply</Trans>
</Button>
<Button
aria-label="Reset"
@ -567,7 +570,7 @@ export function SortTypeContent({
updateSortType(undefined);
}}
>
Reset
<Trans>ui.reset</Trans>
</Button>
</div>
</>

5
web/src/components/graph/CameraGraph.tsx
View File

@ -1,6 +1,7 @@
import { useTheme } from "@/context/theme-provider";
import { FrigateConfig } from "@/types/frigateConfig";
import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
import { t } from "i18next";
import { useCallback, useEffect, useMemo } from "react";
import Chart from "react-apexcharts";
import { isMobileOnly } from "react-device-detect";
@ -126,7 +127,9 @@ export function CameraLineGraph({
className="size-2"
style={{ color: GRAPH_COLORS[labelIdx] }}
/>
<div className="text-xs text-muted-foreground">{label}</div>
<div className="text-xs text-muted-foreground">
{t("ui.system.cameras.label." + label)}
</div>
<div className="text-xs text-primary">
{lastValues[labelIdx]}
{unit}

31
web/src/components/graph/CombinedStorageGraph.tsx
View File

@ -17,6 +17,8 @@ import {
} from "@/components/ui/popover";
import { getUnitSize } from "@/utils/storageUtil";
import { LuAlertCircle } from "react-icons/lu";
import { Trans } from "react-i18next";
import { t } from "i18next";
type CameraStorage = {
[key: string]: {
@ -176,10 +178,20 @@ export function CombinedStorageGraph({
<Table>
<TableHeader>
<TableRow>
<TableHead>Camera</TableHead>
<TableHead>Storage Used</TableHead>
<TableHead>Percentage of Total Used</TableHead>
<TableHead>Bandwidth</TableHead>
<TableHead>
<Trans>ui.system.storage.cameraStorage.camera</Trans>
</TableHead>
<TableHead>
<Trans>ui.system.storage.cameraStorage.storageUsed</Trans>
</TableHead>
<TableHead>
<Trans>
ui.system.storage.cameraStorage.percentageOfTotalUsed
</Trans>
</TableHead>
<TableHead>
<Trans>ui.system.storage.cameraStorage.bandwidth</Trans>
</TableHead>
</TableRow>
</TableHeader>
<TableBody>
@ -191,7 +203,9 @@ export function CombinedStorageGraph({
className="size-3 rounded-md"
style={{ backgroundColor: item.color }}
></div>
{item.name.replaceAll("_", " ")}
{item.name === "Unused"
? t("ui.system.storage.cameraStorage.unused")
: item.name.replaceAll("_", " ")}
{item.name === "Unused" && (
<Popover>
<PopoverTrigger asChild>
@ -207,10 +221,9 @@ export function CombinedStorageGraph({
</PopoverTrigger>
<PopoverContent className="w-80">
<div className="space-y-2">
This value may not accurately represent the free space
available to Frigate if you have other files stored on
your drive beyond Frigate's recordings. Frigate does
not track storage usage outside of its recordings.
<Trans>
ui.system.storage.cameraStorage.unused.tips
</Trans>
</div>
</PopoverContent>
</Popover>

10
web/src/components/icons/IconPicker.tsx
View File

@ -11,6 +11,8 @@ import { IoClose } from "react-icons/io5";
import Heading from "../ui/heading";
import { cn } from "@/lib/utils";
import { Button } from "../ui/button";
import { Trans } from "react-i18next";
import { t } from "i18next";
export type IconName = keyof typeof LuIcons;
@ -70,7 +72,7 @@ export default function IconPicker({
className="mt-2 w-full text-muted-foreground"
aria-label="Select an icon"
>
Select an icon
<Trans>ui.iconPicker.selectIcon</Trans>
</Button>
) : (
<div className="hover:cursor-pointer">
@ -101,7 +103,9 @@ export default function IconPicker({
className="flex max-h-[50dvh] flex-col overflow-y-hidden md:max-h-[30dvh]"
>
<div className="mb-3 flex flex-row items-center justify-between">
<Heading as="h4">Select an icon</Heading>
<Heading as="h4">
<Trans>ui.iconPicker.selectIcon</Trans>
</Heading>
<span tabIndex={0} className="sr-only" />
<IoClose
size={15}
@ -113,7 +117,7 @@ export default function IconPicker({
</div>
<Input
type="text"
placeholder="Search for an icon..."
placeholder={t("ui.iconPicker.search.placeholder")}
className="text-md mb-3 md:text-sm"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}

10
web/src/components/menu/AccountSettings.tsx
View File

@ -20,6 +20,8 @@ import { Drawer, DrawerContent, DrawerTrigger } from "../ui/drawer";
import { DialogClose } from "../ui/dialog";
import { LuLogOut } from "react-icons/lu";
import useSWR from "swr";
import { t } from "i18next";
import { Trans } from "react-i18next";
type AccountSettingsProps = {
className?: string;
@ -65,7 +67,9 @@ export default function AccountSettings({ className }: AccountSettingsProps) {
>
<div className="scrollbar-container w-full flex-col overflow-y-auto overflow-x-hidden">
<DropdownMenuLabel>
Current User: {profile?.username || "anonymous"}
{t("ui.menu.user.current", {
user: profile?.username || t("ui.menu.user.anonymous"),
})}
</DropdownMenuLabel>
<DropdownMenuSeparator className={isDesktop ? "mt-3" : "mt-1"} />
<MenuItem
@ -76,7 +80,9 @@ export default function AccountSettings({ className }: AccountSettingsProps) {
>
<a className="flex" href={logoutUrl}>
<LuLogOut className="mr-2 size-4" />
<span>Logout</span>
<span>
<Trans>ui.menu.user.logout</Trans>
</span>
</a>
</MenuItem>
</div>

160
web/src/components/menu/GeneralSettings.tsx
View File

@ -1,6 +1,7 @@
import {
LuActivity,
LuGithub,
LuLanguages,
LuLifeBuoy,
LuList,
LuLogOut,
@ -55,6 +56,9 @@ import { TooltipPortal } from "@radix-ui/react-tooltip";
import { cn } from "@/lib/utils";
import useSWR from "swr";
import RestartDialog from "../overlay/dialog/RestartDialog";
import { t } from "i18next";
import { Trans } from "react-i18next";
import { useLanguage } from "@/context/language-provider";
type GeneralSettingsProps = {
className?: string;
@ -66,6 +70,7 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
// settings
const { language, setLanguage, systemLanguage } = useLanguage();
const { theme, colorScheme, setTheme, setColorScheme } = useTheme();
const [restartDialogOpen, setRestartDialogOpen] = useState(false);
const { send: sendRestart } = useRestart();
@ -99,7 +104,9 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
</TooltipTrigger>
<TooltipPortal>
<TooltipContent side="right">
<p>Settings</p>
<p>
<Trans>ui.settings</Trans>
</p>
</TooltipContent>
</TooltipPortal>
</Tooltip>
@ -143,7 +150,9 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
</MenuItem>
</>
)}
<DropdownMenuLabel>System</DropdownMenuLabel>
<DropdownMenuLabel>
<Trans>ui.system</Trans>
</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuGroup className={isDesktop ? "" : "flex flex-col"}>
<Link to="/system#general">
@ -156,7 +165,9 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
aria-label="System metrics"
>
<LuActivity className="mr-2 size-4" />
<span>System metrics</span>
<span>
<Trans>ui.systemMetrics</Trans>
</span>
</MenuItem>
</Link>
<Link to="/logs">
@ -169,12 +180,14 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
aria-label="System logs"
>
<LuList className="mr-2 size-4" />
<span>System logs</span>
<span>
<Trans>ui.systemLogs</Trans>
</span>
</MenuItem>
</Link>
</DropdownMenuGroup>
<DropdownMenuLabel className={isDesktop ? "mt-3" : "mt-1"}>
Configuration
<Trans>ui.configuration</Trans>
</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuGroup>
@ -188,7 +201,9 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
aria-label="Settings"
>
<LuSettings className="mr-2 size-4" />
<span>Settings</span>
<span>
<Trans>ui.settings</Trans>
</span>
</MenuItem>
</Link>
<Link to="/config">
@ -201,11 +216,96 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
aria-label="Configuration editor"
>
<LuPenSquare className="mr-2 size-4" />
<span>Configuration editor</span>
<span>
<Trans>ui.configurationEditor</Trans>
</span>
</MenuItem>
</Link>
<SubItem>
<SubItemTrigger
className={
isDesktop
? "cursor-pointer"
: "flex items-center p-2 text-sm"
}
>
<LuLanguages className="mr-2 size-4" />
<span>
<Trans>ui.languages</Trans>
</span>
</SubItemTrigger>
<Portal>
<SubItemContent
className={
isDesktop ? "" : "w-[92%] rounded-lg md:rounded-2xl"
}
>
<span tabIndex={0} className="sr-only" />
<MenuItem
className={
isDesktop
? "cursor-pointer"
: "flex items-center p-2 text-sm"
}
aria-label="Light mode"
onClick={() => setLanguage("en")}
>
{language === "en" ? (
<>
<LuSun className="mr-2 size-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
<Trans>ui.language.en</Trans>
</>
) : (
<span className="ml-6 mr-2">
<Trans>ui.language.en</Trans>
</span>
)}
</MenuItem>
<MenuItem
className={
isDesktop
? "cursor-pointer"
: "flex items-center p-2 text-sm"
}
aria-label="Dark mode"
onClick={() => setLanguage("zh-CN")}
>
{language === "zh-CN" ? (
<>
<LuMoon className="mr-2 size-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
<Trans>ui.language.zhCN</Trans>
</>
) : (
<span className="ml-6 mr-2">
<Trans>ui.language.zhCN</Trans>
</span>
)}
</MenuItem>
<MenuItem
className={
isDesktop
? "cursor-pointer"
: "flex items-center p-2 text-sm"
}
aria-label="Use the system settings for light or dark mode"
onClick={() => setLanguage(systemLanguage)}
>
{language === systemLanguage ? (
<>
<CgDarkMode className="mr-2 size-4 scale-100 transition-all" />
<Trans>ui.withSystem</Trans>
</>
) : (
<span className="ml-6 mr-2">
<Trans>ui.withSystem</Trans>
</span>
)}
</MenuItem>
</SubItemContent>
</Portal>
</SubItem>
<DropdownMenuLabel className={isDesktop ? "mt-3" : "mt-1"}>
Appearance
<Trans>ui.appearance</Trans>
</DropdownMenuLabel>
<DropdownMenuSeparator />
<SubItem>
@ -217,7 +317,9 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
}
>
<LuSunMoon className="mr-2 size-4" />
<span>Dark Mode</span>
<span>
<Trans>ui.darkMode</Trans>
</span>
</SubItemTrigger>
<Portal>
<SubItemContent
@ -238,10 +340,12 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
{theme === "light" ? (
<>
<LuSun className="mr-2 size-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
Light
<Trans>ui.darkMode.light</Trans>
</>
) : (
<span className="ml-6 mr-2">Light</span>
<span className="ml-6 mr-2">
<Trans>ui.darkMode.light</Trans>
</span>
)}
</MenuItem>
<MenuItem
@ -256,10 +360,12 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
{theme === "dark" ? (
<>
<LuMoon className="mr-2 size-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
Dark
<Trans>ui.darkMode.dark</Trans>
</>
) : (
<span className="ml-6 mr-2">Dark</span>
<span className="ml-6 mr-2">
<Trans>ui.darkMode.dark</Trans>
</span>
)}
</MenuItem>
<MenuItem
@ -274,10 +380,12 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
{theme === "system" ? (
<>
<CgDarkMode className="mr-2 size-4 scale-100 transition-all" />
System
<Trans>ui.withSystem</Trans>
</>
) : (
<span className="ml-6 mr-2">System</span>
<span className="ml-6 mr-2">
<Trans>ui.withSystem</Trans>
</span>
)}
</MenuItem>
</SubItemContent>
@ -292,7 +400,9 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
}
>
<LuSunMoon className="mr-2 size-4" />
<span>Theme</span>
<span>
<Trans>ui.theme</Trans>
</span>
</SubItemTrigger>
<Portal>
<SubItemContent
@ -315,11 +425,11 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
{scheme === colorScheme ? (
<>
<IoColorPalette className="mr-2 size-4 rotate-0 scale-100 transition-all" />
{friendlyColorSchemeName(scheme)}
<Trans>{friendlyColorSchemeName(scheme)}</Trans>
</>
) : (
<span className="ml-6 mr-2">
{friendlyColorSchemeName(scheme)}
<Trans>{friendlyColorSchemeName(scheme)}</Trans>
</span>
)}
</MenuItem>
@ -329,7 +439,7 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
</SubItem>
</DropdownMenuGroup>
<DropdownMenuLabel className={isDesktop ? "mt-3" : "mt-1"}>
Help
<Trans>ui.help</Trans>
</DropdownMenuLabel>
<DropdownMenuSeparator />
<a href="https://docs.frigate.video" target="_blank">
@ -337,10 +447,12 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
className={
isDesktop ? "cursor-pointer" : "flex items-center p-2 text-sm"
}
aria-label="Frigate documentation"
aria-label={t("ui.documentation.label")}
>
<LuLifeBuoy className="mr-2 size-4" />
<span>Documentation</span>
<span>
<Trans>ui.documentation</Trans>
</span>
</MenuItem>
</a>
<a
@ -362,11 +474,13 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
className={
isDesktop ? "cursor-pointer" : "flex items-center p-2 text-sm"
}
aria-label="Restart Frigate"
aria-label={t("ui.restart")}
onClick={() => setRestartDialogOpen(true)}
>
<LuRotateCw className="mr-2 size-4" />
<span>Restart Frigate</span>
<span>
<Trans>ui.restart</Trans>
</span>
</MenuItem>
</div>
</Content>

2
web/src/components/menu/LiveContextMenu.tsx
View File

@ -200,7 +200,7 @@ export default function LiveContextMenu({
// notifications
const notificationsEnabledInConfig =
config?.cameras[camera].notifications.enabled_in_config;
config?.cameras[camera]?.notifications?.enabled_in_config;
const { payload: notificationState, send: sendNotification } =
useNotifications(camera);

59
web/src/components/menu/SearchResultActions.tsx
View File

@ -38,6 +38,8 @@ import {
TooltipTrigger,
} from "@/components/ui/tooltip";
import useSWR from "swr";
import { t } from "i18next";
import { Trans } from "react-i18next";
type SearchResultActionsProps = {
searchResult: SearchResult;
@ -85,45 +87,55 @@ export default function SearchResultActions({
const menuItems = (
<>
{searchResult.has_clip && (
<MenuItem aria-label="Download video">
<MenuItem aria-label={t("ui.exploreView.itemMenu.downloadVideo.aria")}>
<a
className="flex items-center"
href={`${baseUrl}api/events/${searchResult.id}/clip.mp4`}
download={`${searchResult.camera}_${searchResult.label}.mp4`}
>
<LuDownload className="mr-2 size-4" />
<span>Download video</span>
<span>
<Trans>ui.exploreView.itemMenu.downloadVideo</Trans>
</span>
</a>
</MenuItem>
)}
{searchResult.has_snapshot && (
<MenuItem aria-label="Download snapshot">
<MenuItem
aria-label={t("ui.exploreView.itemMenu.downloadSnapshot.aria")}
>
<a
className="flex items-center"
href={`${baseUrl}api/events/${searchResult.id}/snapshot.jpg`}
download={`${searchResult.camera}_${searchResult.label}.jpg`}
>
<LuCamera className="mr-2 size-4" />
<span>Download snapshot</span>
<span>
<Trans>ui.exploreView.itemMenu.downloadSnapshot</Trans>
</span>
</a>
</MenuItem>
)}
{searchResult.data.type == "object" && (
<MenuItem
aria-label="Show the object lifecycle"
aria-label={t("ui.exploreView.itemMenu.viewObjectLifecycle.aria")}
onClick={showObjectLifecycle}
>
<FaArrowsRotate className="mr-2 size-4" />
<span>View object lifecycle</span>
<span>
<Trans>ui.exploreView.itemMenu.viewObjectLifecycle</Trans>
</span>
</MenuItem>
)}
{config?.semantic_search?.enabled && isContextMenu && (
<MenuItem
aria-label="Find similar tracked objects"
aria-label={t("ui.exploreView.itemMenu.findSimilar.aria")}
onClick={findSimilar}
>
<MdImageSearch className="mr-2 size-4" />
<span>Find similar</span>
<span>
<Trans>ui.exploreView.itemMenu.findSimilar</Trans>
</span>
</MenuItem>
)}
{isMobileOnly &&
@ -132,9 +144,14 @@ export default function SearchResultActions({
searchResult.end_time &&
searchResult.data.type == "object" &&
!searchResult.plus_id && (
<MenuItem aria-label="Submit to Frigate Plus" onClick={showSnapshot}>
<MenuItem
aria-label={t("ui.exploreView.itemMenu.submitToPlus.aria")}
onClick={showSnapshot}
>
<FrigatePlusIcon className="mr-2 size-4 cursor-pointer text-primary" />
<span>Submit to Frigate+</span>
<span>
<Trans>ui.exploreView.itemMenu.submitToPlus</Trans>
</span>
</MenuItem>
)}
<MenuItem
@ -142,7 +159,9 @@ export default function SearchResultActions({
onClick={() => setDeleteDialogOpen(true)}
>
<LuTrash2 className="mr-2 size-4" />
<span>Delete</span>
<span>
<Trans>ui.delete</Trans>
</span>
</MenuItem>
</>
);
@ -155,24 +174,22 @@ export default function SearchResultActions({
>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Confirm Delete</AlertDialogTitle>
<AlertDialogTitle>
<Trans>ui.exploreView.dialog.confirmDelete</Trans>
</AlertDialogTitle>
</AlertDialogHeader>
<AlertDialogDescription>
Deleting this tracked object removes the snapshot, any saved
embeddings, and any associated object lifecycle entries. Recorded
footage of this tracked object in History view will <em>NOT</em> be
deleted.
<br />
<br />
Are you sure you want to proceed?
<Trans>ui.exploreView.dialog.confirmDelete.desc</Trans>
</AlertDialogDescription>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogCancel>
<Trans>ui.cancel</Trans>
</AlertDialogCancel>
<AlertDialogAction
className={buttonVariants({ variant: "destructive" })}
onClick={handleDelete}
>
Delete
<Trans>ui.delete</Trans>
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>

5
web/src/components/navigation/NavItem.tsx
View File

@ -9,6 +9,7 @@ import { TooltipPortal } from "@radix-ui/react-tooltip";
import { NavData } from "@/types/navigation";
import { IconType } from "react-icons";
import { cn } from "@/lib/utils";
import { Trans } from "react-i18next";
const variants = {
primary: {
@ -60,7 +61,9 @@ export default function NavItem({
<TooltipTrigger>{content}</TooltipTrigger>
<TooltipPortal>
<TooltipContent side="right">
<p>{item.title}</p>
<p>
<Trans>{item.title}</Trans>
</p>
</TooltipContent>
</TooltipPortal>
</Tooltip>

42
web/src/components/overlay/CameraInfoDialog.tsx
View File

@ -15,6 +15,8 @@ import { useEffect, useState } from "react";
import axios from "axios";
import { toast } from "sonner";
import { Toaster } from "../ui/sonner";
import { t } from "i18next";
import { Trans } from "react-i18next";
type CameraInfoDialogProps = {
camera: CameraConfig;
@ -72,11 +74,13 @@ export default function CameraInfoDialog({
<DialogContent>
<DialogHeader>
<DialogTitle className="capitalize">
{camera.name.replaceAll("_", " ")} Camera Probe Info
{t("ui.system.cameras.info.cameraProbeInfo", {
camera: camera.name.replaceAll("_", " "),
})}
</DialogTitle>
</DialogHeader>
<DialogDescription>
Stream data is obtained with <code>ffprobe</code>.
<Trans>ui.system.cameras.info.streamDataFromFFPROBE</Trans>
</DialogDescription>
<div className="mb-2 p-4">
@ -85,7 +89,7 @@ export default function CameraInfoDialog({
{ffprobeInfo.map((stream, idx) => (
<div key={idx} className="mb-5">
<div className="mb-1 rounded-md bg-secondary p-2 text-lg text-primary">
Stream {idx + 1}
{t("ui.system.cameras.info.stream", { idx: idx + 1 })}
</div>
{stream.return_code == 0 ? (
<div>
@ -93,10 +97,12 @@ export default function CameraInfoDialog({
<div className="" key={idx}>
{codec.width ? (
<div className="text-muted-foreground">
<div className="ml-2">Video:</div>
<div className="ml-2">
<Trans>ui.system.cameras.info.video</Trans>
</div>
<div className="ml-5">
<div>
Codec:
<Trans>ui.system.cameras.info.codec</Trans>
<span className="text-primary">
{" "}
{codec.codec_long_name}
@ -105,7 +111,9 @@ export default function CameraInfoDialog({
<div>
{codec.width && codec.height ? (
<>
Resolution:{" "}
<Trans>
ui.system.cameras.info.resolution
</Trans>{" "}
<span className="text-primary">
{" "}
{codec.width}x{codec.height} (
@ -119,7 +127,9 @@ export default function CameraInfoDialog({
</>
) : (
<span>
Resolution:{" "}
<Trans>
ui.system.cameras.info.resolution
</Trans>{" "}
<span className="text-primary">
Unknown
</span>
@ -127,10 +137,10 @@ export default function CameraInfoDialog({
)}
</div>
<div>
FPS:{" "}
<Trans>ui.system.cameras.info.fps</Trans>{" "}
<span className="text-primary">
{codec.avg_frame_rate == "0/0"
? "Unknown"
? t("ui.system.cameras.info.unknown")
: codec.avg_frame_rate}
</span>
</div>
@ -140,7 +150,7 @@ export default function CameraInfoDialog({
<div className="text-muted-foreground">
<div className="ml-2 mt-1">Audio:</div>
<div className="ml-4">
Codec:{" "}
<Trans>ui.system.cameras.info.codec</Trans>{" "}
<span className="text-primary">
{codec.codec_long_name}
</span>
@ -152,7 +162,11 @@ export default function CameraInfoDialog({
</div>
) : (
<div className="px-2">
<div>Error: {stream.stderr}</div>
<div>
{t("ui.system.cameras.info.error", {
error: stream.stderr,
})}
</div>
</div>
)}
</div>
@ -161,7 +175,9 @@ export default function CameraInfoDialog({
) : (
<div className="flex flex-col items-center">
<ActivityIndicator />
<div className="mt-2">Fetching Camera Data</div>
<div className="mt-2">
<Trans>ui.system.cameras.info.fetching</Trans>
</div>
</div>
)}
</div>
@ -172,7 +188,7 @@ export default function CameraInfoDialog({
aria-label="Copy"
onClick={() => onCopyFfprobe()}
>
Copy
<Trans>ui.copy</Trans>
</Button>
</DialogFooter>
</DialogContent>

17
web/src/components/overlay/CreateUserDialog.tsx
View File

@ -20,6 +20,7 @@ import {
DialogHeader,
DialogTitle,
} from "../ui/dialog";
import { Trans } from "react-i18next";
type CreateUserOverlayProps = {
show: boolean;
@ -63,7 +64,9 @@ export default function CreateUserDialog({
<Dialog open={show} onOpenChange={onCancel}>
<DialogContent>
<DialogHeader>
<DialogTitle>Create User</DialogTitle>
<DialogTitle>
<Trans>ui.settingView.users.dialog.createUser</Trans>
</DialogTitle>
</DialogHeader>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)}>
@ -71,7 +74,9 @@ export default function CreateUserDialog({
name="user"
render={({ field }) => (
<FormItem>
<FormLabel>User</FormLabel>
<FormLabel>
<Trans>ui.settingView.users.dialog.createUser.user</Trans>
</FormLabel>
<FormControl>
<Input
className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
@ -86,7 +91,11 @@ export default function CreateUserDialog({
name="password"
render={({ field }) => (
<FormItem>
<FormLabel>Password</FormLabel>
<FormLabel>
<Trans>
ui.settingView.users.dialog.createUser.password
</Trans>
</FormLabel>
<FormControl>
<Input
className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
@ -104,7 +113,7 @@ export default function CreateUserDialog({
disabled={isLoading}
>
{isLoading && <ActivityIndicator className="mr-2 h-4 w-4" />}
Create User
<Trans>ui.settingView.users.dialog.createUser</Trans>
</Button>
</DialogFooter>
</form>

11
web/src/components/overlay/DeleteUserDialog.tsx
View File

@ -1,3 +1,4 @@
import { Trans } from "react-i18next";
import { Button } from "../ui/button";
import {
Dialog,
@ -21,9 +22,13 @@ export default function DeleteUserDialog({
<Dialog open={show} onOpenChange={onCancel}>
<DialogContent>
<DialogHeader>
<DialogTitle>Delete User</DialogTitle>
<DialogTitle>
<Trans>ui.settingView.users.dialog.deleteUser</Trans>
</DialogTitle>
</DialogHeader>
<div>Are you sure?</div>
<div>
<Trans>ui.settingView.users.dialog.deleteUser.warn</Trans>
</div>
<DialogFooter>
<Button
className="flex items-center gap-1"
@ -32,7 +37,7 @@ export default function DeleteUserDialog({
size="sm"
onClick={onDelete}
>
Delete
<Trans>ui.delete</Trans>
</Button>
</DialogFooter>
</DialogContent>

67
web/src/components/overlay/ExportDialog.tsx
View File

@ -30,6 +30,8 @@ import { getUTCOffset } from "@/utils/dateUtil";
import { baseUrl } from "@/api/baseUrl";
import { cn } from "@/lib/utils";
import { GenericVideoPlayer } from "../player/GenericVideoPlayer";
import { Trans } from "react-i18next";
import { t } from "i18next";
const EXPORT_OPTIONS = [
"1",
@ -68,12 +70,14 @@ export default function ExportDialog({
const onStartExport = useCallback(() => {
if (!range) {
toast.error("No valid time range selected", { position: "top-center" });
toast.error(t("ui.dialog.export.toast.error.noVaildTimeSelected"), {
position: "top-center",
});
return;
}
if (range.before < range.after) {
toast.error("End time must be after start time", {
toast.error(t("ui.dialog.export.toast.error.endTimeMustAfterStartTime"), {
position: "top-center",
});
return;
@ -89,10 +93,9 @@ export default function ExportDialog({
)
.then((response) => {
if (response.status == 200) {
toast.success(
"Successfully started export. View the file in the /exports folder.",
{ position: "top-center" },
);
toast.success(t("ui.dialog.export.toast.success"), {
position: "top-center",
});
setName("");
setRange(undefined);
setMode("none");
@ -100,14 +103,18 @@ export default function ExportDialog({
})
.catch((error) => {
if (error.response?.data?.message) {
// api error message need to be translated
toast.error(
`Failed to start export: ${error.response.data.message}`,
`${t("ui.dialog.export.toast.error.failed", { error: error.response.data.message })}`,
{ position: "top-center" },
);
} else {
toast.error(`Failed to start export: ${error.message}`, {
position: "top-center",
});
toast.error(
`${t("ui.dialog.export.toast.error.failed", { error: error.message })}`,
{
position: "top-center",
},
);
}
});
}, [camera, name, range, setRange, setName, setMode]);
@ -163,7 +170,11 @@ export default function ExportDialog({
}}
>
<FaArrowDown className="rounded-md bg-secondary-foreground fill-secondary p-1" />
{isDesktop && <div className="text-primary">Export</div>}
{isDesktop && (
<div className="text-primary">
<Trans>ui.menu.export</Trans>
</div>
)}
</Button>
</Trigger>
<Content
@ -259,7 +270,9 @@ export function ExportContent({
{isDesktop && (
<>
<DialogHeader>
<DialogTitle>Export</DialogTitle>
<DialogTitle>
<Trans>ui.menu.export</Trans>
</DialogTitle>
</DialogHeader>
<SelectSeparator className="my-4 bg-secondary" />
</>
@ -283,9 +296,11 @@ export function ExportContent({
<Label className="cursor-pointer capitalize" htmlFor={opt}>
{isNaN(parseInt(opt))
? opt == "timeline"
? "Select from Timeline"
: `${opt}`
: `Last ${opt > "1" ? `${opt} Hours` : "Hour"}`}
? t("ui.dialog.export.time.fromTimeline")
: t("ui.dialog.export.time." + opt)
: t("ui.dialog.export.time.lastHour", {
count: parseInt(opt),
})}
</Label>
</div>
);
@ -301,7 +316,7 @@ export function ExportContent({
<Input
className="text-md my-6"
type="search"
placeholder="Name the Export"
placeholder={t("ui.dialog.export.name.placeholder")}
value={name}
onChange={(e) => setName(e.target.value)}
/>
@ -313,7 +328,7 @@ export function ExportContent({
className={`cursor-pointer p-2 text-center ${isDesktop ? "" : "w-full"}`}
onClick={onCancel}
>
Cancel
<Trans>ui.cancel</Trans>
</div>
<Button
className={isDesktop ? "" : "w-full"}
@ -331,7 +346,9 @@ export function ExportContent({
}
}}
>
{selectedOption == "timeline" ? "Select" : "Export"}
{selectedOption == "timeline"
? t("ui.dialog.export.select")
: t("ui.dialog.export.export")}
</Button>
</DialogFooter>
</div>
@ -391,14 +408,14 @@ function CustomTimeSelector({
const formattedStart = useFormattedTimestamp(
startTime,
config?.ui.time_format == "24hour"
? "%b %-d, %H:%M:%S"
: "%b %-d, %I:%M:%S %p",
? t("ui.time.formattedTimestamp.24hour")
: t("ui.time.formattedTimestamp"),
);
const formattedEnd = useFormattedTimestamp(
endTime,
config?.ui.time_format == "24hour"
? "%b %-d, %H:%M:%S"
: "%b %-d, %I:%M:%S %p",
? t("ui.time.formattedTimestamp.24hour")
: t("ui.time.formattedTimestamp"),
);
const startClock = useMemo(() => {
@ -585,9 +602,11 @@ export function ExportPreviewDialog({
)}
>
<DialogHeader>
<DialogTitle>Preview Export</DialogTitle>
<DialogTitle>
<Trans>ui.dialog.export.fromTimeline.previewExport</Trans>
</DialogTitle>
<DialogDescription className="sr-only">
Preview Export
<Trans>ui.dialog.export.fromTimeline.previewExport</Trans>
</DialogDescription>
</DialogHeader>
<GenericVideoPlayer source={source} />

11
web/src/components/overlay/MobileReviewSettingsDrawer.tsx
View File

@ -19,6 +19,8 @@ import { toast } from "sonner";
import axios from "axios";
import SaveExportOverlay from "./SaveExportOverlay";
import { isIOS, isMobile } from "react-device-detect";
import { Trans } from "react-i18next";
import { t } from "i18next";
type DrawerMode = "none" | "select" | "export" | "calendar" | "filter";
@ -96,10 +98,9 @@ export default function MobileReviewSettingsDrawer({
)
.then((response) => {
if (response.status == 200) {
toast.success(
"Successfully started export. View the file in the /exports folder.",
{ position: "top-center" },
);
toast.success(t("ui.dialog.export.toast.success"), {
position: "top-center",
});
setName("");
setRange(undefined);
setMode("none");
@ -246,7 +247,7 @@ export default function MobileReviewSettingsDrawer({
});
}}
>
Reset
<Trans>ui.reset</Trans>
</Button>
</div>
</div>

7
web/src/components/overlay/SaveExportOverlay.tsx
View File

@ -2,6 +2,7 @@ import { LuVideo, LuX } from "react-icons/lu";
import { Button } from "../ui/button";
import { FaCompactDisc } from "react-icons/fa";
import { cn } from "@/lib/utils";
import { Trans } from "react-i18next";
type SaveExportOverlayProps = {
className: string;
@ -33,7 +34,7 @@ export default function SaveExportOverlay({
onClick={onCancel}
>
<LuX />
Cancel
<Trans>ui.cancel</Trans>
</Button>
<Button
className="flex items-center gap-1"
@ -42,7 +43,7 @@ export default function SaveExportOverlay({
onClick={onPreview}
>
<LuVideo />
Preview Export
<Trans>ui.dialog.export.fromTimeline.previewExport</Trans>
</Button>
<Button
className="flex items-center gap-1"
@ -52,7 +53,7 @@ export default function SaveExportOverlay({
onClick={onSave}
>
<FaCompactDisc />
Save Export
<Trans>ui.dialog.export.fromTimeline.saveExport</Trans>
</Button>
</div>
</div>

7
web/src/components/overlay/SetPasswordDialog.tsx
View File

@ -8,6 +8,7 @@ import {
DialogHeader,
DialogTitle,
} from "../ui/dialog";
import { Trans } from "react-i18next";
type SetPasswordProps = {
show: boolean;
@ -25,7 +26,9 @@ export default function SetPasswordDialog({
<Dialog open={show} onOpenChange={onCancel}>
<DialogContent onOpenAutoFocus={(e) => e.preventDefault()}>
<DialogHeader>
<DialogTitle>Set Password</DialogTitle>
<DialogTitle>
<Trans>ui.settingView.users.dialog.setPassword</Trans>
</DialogTitle>
</DialogHeader>
<Input
className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
@ -43,7 +46,7 @@ export default function SetPasswordDialog({
onSave(password!);
}}
>
Save
<Trans>ui.save</Trans>
</Button>
</DialogFooter>
</DialogContent>

5
web/src/components/overlay/detail/ReviewDetailDialog.tsx
View File

@ -42,6 +42,7 @@ import { DownloadVideoButton } from "@/components/button/DownloadVideoButton";
import { TooltipPortal } from "@radix-ui/react-tooltip";
import { LuSearch } from "react-icons/lu";
import useKeyboardListener from "@/hooks/use-keyboard-listener";
import { t } from "i18next";
type ReviewDetailDialogProps = {
review?: ReviewSegment;
@ -95,8 +96,8 @@ export default function ReviewDetailDialog({
const formattedDate = useFormattedTimestamp(
review?.start_time ?? 0,
config?.ui.time_format == "24hour"
? "%b %-d %Y, %H:%M"
: "%b %-d %Y, %I:%M %p",
? t("ui.time.formattedTimestampWithYear.24hour")
: t("ui.time.formattedTimestampWithYear"),
config?.ui.timezone,
);

83
web/src/components/overlay/detail/SearchDetailDialog.tsx
View File

@ -73,12 +73,14 @@ import { LuInfo } from "react-icons/lu";
import { TooltipPortal } from "@radix-ui/react-tooltip";
import { FaPencilAlt } from "react-icons/fa";
import TextEntryDialog from "@/components/overlay/dialog/TextEntryDialog";
import { Trans } from "react-i18next";
import { t } from "i18next";
const SEARCH_TABS = [
"details",
"snapshot",
"video",
"object lifecycle",
"object_lifecycle",
] as const;
export type SearchTab = (typeof SEARCH_TABS)[number];
@ -152,7 +154,7 @@ export default function SearchDetailDialog({
}
if (search.data.type != "object" || !search.has_clip) {
const index = views.indexOf("object lifecycle");
const index = views.indexOf("object_lifecycle");
views.splice(index, 1);
}
@ -192,8 +194,12 @@ export default function SearchDetailDialog({
)}
>
<Header>
<Title>Tracked Object Details</Title>
<Description className="sr-only">Tracked object details</Description>
<Title>
<Trans>ui.exploreView.trackedObjectDetails</Trans>
</Title>
<Description className="sr-only">
<Trans>ui.exploreView.details</Trans>
</Description>
</Header>
<ScrollArea
className={cn("w-full whitespace-nowrap", isMobile && "my-2")}
@ -221,10 +227,12 @@ export default function SearchDetailDialog({
{item == "details" && <FaRegListAlt className="size-4" />}
{item == "snapshot" && <FaImage className="size-4" />}
{item == "video" && <FaVideo className="size-4" />}
{item == "object lifecycle" && (
{item == "object_lifecycle" && (
<FaRotate className="size-4" />
)}
<div className="capitalize">{item}</div>
<div className="capitalize">
<Trans>ui.exploreView.type.{item}</Trans>
</div>
</ToggleGroupItem>
))}
</ToggleGroup>
@ -254,7 +262,7 @@ export default function SearchDetailDialog({
/>
)}
{page == "video" && <VideoTab search={search} />}
{page == "object lifecycle" && (
{page == "object_lifecycle" && (
<ObjectLifecycle
className="w-full overflow-x-hidden"
event={search as unknown as Event}
@ -306,8 +314,8 @@ function ObjectDetailsTab({
const formattedDate = useFormattedTimestamp(
search?.start_time ?? 0,
config?.ui.time_format == "24hour"
? "%b %-d %Y, %H:%M"
: "%b %-d %Y, %I:%M %p",
? t("ui.time.formattedTimestampWithYear.24hour")
: t("ui.time.formattedTimestampWithYear"),
config?.ui.timezone,
);
@ -366,7 +374,7 @@ function ObjectDetailsTab({
.post(`events/${search.id}/description`, { description: desc })
.then((resp) => {
if (resp.status == 200) {
toast.success("Successfully saved description", {
toast.success(t("ui.exploreView.details.tips.descriptionSaved"), {
position: "top-center",
});
}
@ -395,7 +403,7 @@ function ObjectDetailsTab({
);
})
.catch(() => {
toast.error("Failed to update the description", {
toast.error(t("ui.exploreView.details.tips.saveDescriptionFailed"), {
position: "top-center",
});
setDesc(search.data.description);
@ -506,10 +514,12 @@ function ObjectDetailsTab({
<div className="flex w-full flex-row">
<div className="flex w-full flex-col gap-3">
<div className="flex flex-col gap-1.5">
<div className="text-sm text-primary/40">Label</div>
<div className="text-sm text-primary/40">
<Trans>ui.exploreView.details.label</Trans>
</div>
<div className="flex flex-row items-center gap-2 text-sm capitalize">
{getIconForLabel(search.label, "size-4 text-primary")}
{search.label}
<Trans>object.{search.label}</Trans>
{search.sub_label && ` (${search.sub_label})`}
<Tooltip>
<TooltipTrigger asChild>
@ -523,7 +533,9 @@ function ObjectDetailsTab({
</span>
</TooltipTrigger>
<TooltipPortal>
<TooltipContent>Edit sub label</TooltipContent>
<TooltipContent>
<Trans>ui.exploreView.details.editSubLable</Trans>
</TooltipContent>
</TooltipPortal>
</Tooltip>
</div>
@ -531,7 +543,7 @@ function ObjectDetailsTab({
<div className="flex flex-col gap-1.5">
<div className="text-sm text-primary/40">
<div className="flex flex-row items-center gap-1">
Top Score
<Trans>ui.exploreView.details.topScore</Trans>
<Popover>
<PopoverTrigger asChild>
<div className="cursor-pointer p-0">
@ -540,9 +552,7 @@ function ObjectDetailsTab({
</div>
</PopoverTrigger>
<PopoverContent className="w-80">
The top score is the highest median score for the tracked
object, so this may differ from the score shown on the
search result thumbnail.
<Trans>ui.exploreView.details.topScore.info</Trans>
</PopoverContent>
</Popover>
</div>
@ -553,7 +563,9 @@ function ObjectDetailsTab({
</div>
{averageEstimatedSpeed && (
<div className="flex flex-col gap-1.5">
<div className="text-sm text-primary/40">Estimated Speed</div>
<div className="text-sm text-primary/40">
<Trans>ui.exploreView.details.estimatedSpeed</Trans>
</div>
<div className="flex flex-col space-y-0.5 text-sm">
{averageEstimatedSpeed && (
<div className="flex flex-row items-center gap-2">
@ -575,13 +587,17 @@ function ObjectDetailsTab({
</div>
)}
<div className="flex flex-col gap-1.5">
<div className="text-sm text-primary/40">Camera</div>
<div className="text-sm text-primary/40">
<Trans>ui.exploreView.details.camera</Trans>
</div>
<div className="text-sm capitalize">
{search.camera.replaceAll("_", " ")}
</div>
</div>
<div className="flex flex-col gap-1.5">
<div className="text-sm text-primary/40">Timestamp</div>
<div className="text-sm text-primary/40">
<Trans>ui.exploreView.details.timestamp</Trans>
</div>
<div className="text-sm">{formattedDate}</div>
</div>
</div>
@ -633,17 +649,16 @@ function ObjectDetailsTab({
<ActivityIndicator />
</div>
<div className="flex">
Frigate will not request a description from your Generative AI
provider until the tracked object's lifecycle has ended.
<Trans>ui.exploreView.details.description.aiTips</Trans>
</div>
</div>
</>
) : (
<>
<div className="text-sm text-primary/40">Description</div>
<div className="text-sm text-primary/40"></div>
<Textarea
className="h-64"
placeholder="Description of the tracked object"
placeholder={t("ui.exploreView.details.description.placeholder")}
value={desc}
onChange={(e) => setDesc(e.target.value)}
onFocus={handleDescriptionFocus}
@ -660,7 +675,7 @@ function ObjectDetailsTab({
aria-label="Regenerate tracked object description"
onClick={() => regenerateDescription("thumbnails")}
>
Regenerate
<Trans>ui.exploreView.details.button.regenerate</Trans>
</Button>
{search.has_snapshot && (
<DropdownMenu>
@ -678,14 +693,18 @@ function ObjectDetailsTab({
aria-label="Regenerate from snapshot"
onClick={() => regenerateDescription("snapshot")}
>
Regenerate from Snapshot
<Trans>
ui.exploreView.details.regenerateFromSnapshot
</Trans>
</DropdownMenuItem>
<DropdownMenuItem
className="cursor-pointer"
aria-label="Regenerate from thumbnails"
onClick={() => regenerateDescription("thumbnails")}
>
Regenerate from Thumbnails
<Trans>
ui.exploreView.details.regenerateFromThumbnails
</Trans>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
@ -699,13 +718,13 @@ function ObjectDetailsTab({
aria-label="Save"
onClick={updateDescription}
>
Save
<Trans>ui.save</Trans>
</Button>
)}
<TextEntryDialog
open={isSubLabelDialogOpen}
setOpen={setIsSubLabelDialogOpen}
title="Edit Sub Label"
title={t("ui.exploreView.details.editSubLable")}
description={`Enter a new sub label for this ${search.label ?? "tracked object"}.`}
onSave={handleSubLabelSave}
defaultValue={search?.sub_label || ""}
@ -807,7 +826,9 @@ export function ObjectSnapshotTab({
</a>
</TooltipTrigger>
<TooltipPortal>
<TooltipContent>Download</TooltipContent>
<TooltipContent>
<Trans>ui.download</Trans>
</TooltipContent>
</TooltipPortal>
</Tooltip>
</div>

18
web/src/components/overlay/dialog/RestartDialog.tsx
View File

@ -18,6 +18,8 @@ import {
import { Button } from "@/components/ui/button";
import ActivityIndicator from "@/components/indicators/activity-indicator";
import { baseUrl } from "@/api/baseUrl";
import { t } from "i18next";
import { Trans } from "react-i18next";
type RestartDialogProps = {
isOpen: boolean;
@ -79,13 +81,15 @@ export default function RestartDialog({
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>
Are you sure you want to restart Frigate?
<Trans>ui.dialog.restart.title</Trans>
</AlertDialogTitle>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogCancel>
<Trans>ui.cancel</Trans>
</AlertDialogCancel>
<AlertDialogAction onClick={handleRestart}>
Restart
<Trans>ui.dialog.restart.button</Trans>
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
@ -100,10 +104,12 @@ export default function RestartDialog({
<ActivityIndicator />
<SheetHeader className="mt-5 text-center">
<SheetTitle className="text-center">
Frigate is Restarting
<Trans>ui.dialog.restart.restarting.title</Trans>
</SheetTitle>
<SheetDescription className="text-center">
<div>This page will reload in {countdown} seconds.</div>
<div>
{t("ui.dialog.restart.restarting.content", { countdown })}
</div>
</SheetDescription>
</SheetHeader>
<Button
@ -112,7 +118,7 @@ export default function RestartDialog({
aria-label="Force reload now"
onClick={handleForceReload}
>
Force Reload Now
<Trans>ui.dialog.restart.restarting.button</Trans>
</Button>
</div>
</SheetContent>

58
web/src/components/overlay/dialog/SearchFilterDialog.tsx
View File

@ -33,6 +33,7 @@ import {
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip";
import { Trans } from "react-i18next";
type SearchFilterDialogProps = {
config?: FrigateConfig;
@ -93,7 +94,7 @@ export default function SearchFilterDialog({
moreFiltersSelected ? "text-white" : "text-secondary-foreground",
)}
/>
More Filters
<Trans>ui.filter.more</Trans>
</Button>
);
const content = (
@ -175,7 +176,7 @@ export default function SearchFilterDialog({
setOpen(false);
}}
>
Apply
<Trans>ui.apply</Trans>
</Button>
<Button
aria-label="Reset filters to default values"
@ -195,7 +196,7 @@ export default function SearchFilterDialog({
}));
}}
>
Reset
<Trans>ui.reset</Trans>
</Button>
</div>
</div>
@ -272,7 +273,9 @@ function TimeRangeFilterContent({
return (
<div className="overflow-x-hidden">
<div className="text-lg">Time Range</div>
<div className="text-lg">
<Trans>ui.filter.timeRange</Trans>
</div>
<div className="mt-3 flex flex-row items-center justify-center gap-2">
<Popover
open={startOpen}
@ -370,7 +373,9 @@ export function ZoneFilterContent({
<>
<div className="overflow-x-hidden">
<DropdownMenuSeparator className="mb-3" />
<div className="text-lg">Zones</div>
<div className="text-lg">
<Trans>ui.filter.zones</Trans>
</div>
{allZones && (
<>
<div className="mb-5 mt-2.5 flex items-center justify-between">
@ -378,7 +383,7 @@ export function ZoneFilterContent({
className="mx-2 cursor-pointer text-primary"
htmlFor="allZones"
>
All Zones
<Trans>ui.filter.allZones</Trans>
</Label>
<Switch
className="ml-1"
@ -436,10 +441,12 @@ export function SubFilterContent({
return (
<div className="overflow-x-hidden">
<DropdownMenuSeparator className="mb-3" />
<div className="text-lg">Sub Labels</div>
<div className="text-lg">
<Trans>ui.filter.subLabels</Trans>
</div>
<div className="mb-5 mt-2.5 flex items-center justify-between">
<Label className="mx-2 cursor-pointer text-primary" htmlFor="allLabels">
All Sub Labels
<Trans>ui.filter.allSubLabels</Trans>
</Label>
<Switch
className="ml-1"
@ -494,7 +501,9 @@ export function ScoreFilterContent({
return (
<div className="overflow-x-hidden">
<DropdownMenuSeparator className="mb-3" />
<div className="mb-3 text-lg">Score</div>
<div className="mb-3 text-lg">
<Trans>ui.filter.score</Trans>
</div>
<div className="flex items-center gap-1">
<Input
className="w-14 text-center"
@ -636,7 +645,9 @@ export function SnapshotClipFilterContent({
return (
<div className="overflow-x-hidden">
<DropdownMenuSeparator className="mb-3" />
<div className="mb-3 text-lg">Features</div>
<div className="mb-3 text-lg">
<Trans>ui.filter.features</Trans>
</div>
<div className="my-2.5 space-y-1">
<div className="flex items-center justify-between">
@ -658,7 +669,7 @@ export function SnapshotClipFilterContent({
htmlFor="snapshot-filter"
className="cursor-pointer text-sm font-medium leading-none"
>
Has a snapshot
<Trans>ui.filter.features.hasSnapshot</Trans>
</Label>
</div>
<ToggleGroup
@ -679,14 +690,14 @@ export function SnapshotClipFilterContent({
aria-label="Yes"
className="data-[state=on]:bg-selected data-[state=on]:text-white data-[state=on]:hover:bg-selected data-[state=on]:hover:text-white"
>
Yes
<Trans>ui.yes</Trans>
</ToggleGroupItem>
<ToggleGroupItem
value="no"
aria-label="No"
className="data-[state=on]:bg-selected data-[state=on]:text-white data-[state=on]:hover:bg-selected data-[state=on]:hover:text-white"
>
No
<Trans>ui.no</Trans>
</ToggleGroupItem>
</ToggleGroup>
</div>
@ -720,12 +731,9 @@ export function SnapshotClipFilterContent({
side="left"
sideOffset={5}
>
You must first filter on tracked objects that have a
snapshot.
<br />
<br />
Tracked objects without a snapshot cannot be submitted to
Frigate+.
<Trans>
ui.filter.features.submittedToFrigatePlus.tips
</Trans>
</TooltipContent>
)}
</Tooltip>
@ -734,7 +742,7 @@ export function SnapshotClipFilterContent({
htmlFor="plus-filter"
className="cursor-pointer text-sm font-medium leading-none"
>
Submitted to Frigate+
<Trans>ui.filter.features.submittedToFrigatePlus</Trans>
</Label>
</div>
<ToggleGroup
@ -760,14 +768,14 @@ export function SnapshotClipFilterContent({
aria-label="Yes"
className="data-[state=on]:bg-selected data-[state=on]:text-white data-[state=on]:hover:bg-selected data-[state=on]:hover:text-white"
>
Yes
<Trans>ui.yes</Trans>
</ToggleGroupItem>
<ToggleGroupItem
value="no"
aria-label="No"
className="data-[state=on]:bg-selected data-[state=on]:text-white data-[state=on]:hover:bg-selected data-[state=on]:hover:text-white"
>
No
<Trans>ui.no</Trans>
</ToggleGroupItem>
</ToggleGroup>
</div>
@ -796,7 +804,7 @@ export function SnapshotClipFilterContent({
htmlFor="clip-filter"
className="cursor-pointer text-sm font-medium leading-none"
>
Has a video clip
<Trans>ui.filter.features.hasVideoClip</Trans>
</Label>
</div>
<ToggleGroup
@ -815,14 +823,14 @@ export function SnapshotClipFilterContent({
aria-label="Yes"
className="data-[state=on]:bg-selected data-[state=on]:text-white data-[state=on]:hover:bg-selected data-[state=on]:hover:text-white"
>
Yes
<Trans>ui.yes</Trans>
</ToggleGroupItem>
<ToggleGroupItem
value="no"
aria-label="No"
className="data-[state=on]:bg-selected data-[state=on]:text-white data-[state=on]:hover:bg-selected data-[state=on]:hover:text-white"
>
No
<Trans>ui.no</Trans>
</ToggleGroupItem>
</ToggleGroup>
</div>

11
web/src/components/player/PreviewPlayer.tsx
View File

@ -20,6 +20,7 @@ import {
getPreviewForTimeRange,
usePreviewForTimeRange,
} from "@/hooks/use-camera-previews";
import { Trans } from "react-i18next";
type PreviewPlayerProps = {
className?: string;
@ -88,7 +89,7 @@ export default function PreviewPlayer({
className,
)}
>
No Preview Found
<Trans>ui.player.noPreviewFound</Trans>
</div>
);
}
@ -324,7 +325,9 @@ function PreviewVideoPlayer({
</video>
{cameraPreviews && !currentPreview && (
<div className="absolute inset-0 flex items-center justify-center rounded-lg bg-background_alt text-primary dark:bg-black md:rounded-2xl">
No Preview Found for {camera.replaceAll("_", " ")}
<Trans value={{ camera: camera.replaceAll("_", " ") }}>
ui.player.noPreviewFoundFor
</Trans>
</div>
)}
{firstLoad && <Skeleton className="absolute aspect-video size-full" />}
@ -544,7 +547,9 @@ function PreviewFramesPlayer({
/>
{previewFrames?.length === 0 && (
<div className="-y-translate-1/2 align-center absolute inset-x-0 top-1/2 rounded-lg bg-background_alt text-center text-primary dark:bg-black md:rounded-2xl">
No Preview Found for {camera.replaceAll("_", " ")}
<Trans values={{ cameraName: camera.replaceAll("_", " ") }}>
ui.player.noPreviewFoundFor
</Trans>
</div>
)}
{firstLoad && <Skeleton className="absolute aspect-video size-full" />}

5
web/src/components/player/PreviewThumbnailPlayer.tsx
View File

@ -21,6 +21,7 @@ import { cn } from "@/lib/utils";
import { InProgressPreview, VideoPreview } from "../preview/ScrubbablePreview";
import { Preview } from "@/types/preview";
import { baseUrl } from "@/api/baseUrl";
import { t } from "i18next";
type PreviewPlayerProps = {
review: ReviewSegment;
@ -167,7 +168,9 @@ export default function PreviewThumbnailPlayer({
const formattedDate = useFormattedTimestamp(
review.start_time,
config?.ui.time_format == "24hour" ? "%b %-d, %H:%M" : "%b %-d, %I:%M %p",
config?.ui.time_format == "24hour"
? t("ui.time.formattedTimestampExcludeSeconds.24hour")
: t("ui.time.formattedTimestampExcludeSeconds"),
config?.ui?.timezone,
);

3
web/src/components/player/dynamic/DynamicVideoPlayer.tsx
View File

@ -12,6 +12,7 @@ import ActivityIndicator from "@/components/indicators/activity-indicator";
import { VideoResolutionType } from "@/types/live";
import axios from "axios";
import { cn } from "@/lib/utils";
import { Trans } from "react-i18next";
/**
* Dynamically switches between video playback and scrubbing preview player.
@ -247,7 +248,7 @@ export default function DynamicVideoPlayer({
)}
{!isScrubbing && !isLoading && noRecording && (
<div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
No recordings found for this time
<Trans>ui.player.noRecordingsFoundForThisTime</Trans>
</div>
)}
</>

14
web/src/components/settings/CameraStreamingDialog.tsx
View File

@ -31,6 +31,7 @@ import useSWR from "swr";
import { LuCheck, LuExternalLink, LuInfo, LuX } from "react-icons/lu";
import { Link } from "react-router-dom";
import { LiveStreamMetadata } from "@/types/live";
import { Trans } from "react-i18next";
type CameraStreamingDialogProps = {
camera: string;
@ -177,10 +178,12 @@ export function CameraStreamingDialog({
<div className="flex flex-col space-y-8">
{!isRestreamed && (
<div className="flex flex-col gap-2">
<Label>Stream</Label>
<Label></Label>
<div className="flex flex-row items-center gap-1 text-sm text-muted-foreground">
<LuX className="size-4 text-danger" />
<div>Restreaming is not enabled for this camera.</div>
<div>
<Trans>ui.dialog.streaming.restreaming.disabled</Trans>
</div>
<Popover>
<PopoverTrigger asChild>
<div className="cursor-pointer p-0">
@ -189,8 +192,7 @@ export function CameraStreamingDialog({
</div>
</PopoverTrigger>
<PopoverContent className="w-80 text-xs">
Set up go2rtc for additional live view options and audio for
this camera.
<Trans>ui.dialog.streaming.restreaming.desc</Trans>
<div className="mt-2 flex items-center text-primary">
<Link
to="https://docs.frigate.video/configuration/live"
@ -198,7 +200,9 @@ export function CameraStreamingDialog({
rel="noopener noreferrer"
className="inline"
>
Read the documentation{" "}
<Trans>
ui.dialog.streaming.restreaming.readTheDocumentation
</Trans>
<LuExternalLink className="ml-2 inline-flex size-3" />
</Link>
</div>

58
web/src/components/settings/MotionMaskEditPane.tsx
View File

@ -22,6 +22,8 @@ import { Toaster } from "../ui/sonner";
import ActivityIndicator from "../indicators/activity-indicator";
import { Link } from "react-router-dom";
import { LuExternalLink } from "react-icons/lu";
import { t } from "i18next";
import { Trans } from "react-i18next";
type MotionMaskEditPaneProps = {
polygons?: Polygon[];
@ -206,7 +208,9 @@ export default function MotionMaskEditPane({
}
useEffect(() => {
document.title = "Edit Motion Mask - Frigate";
document.title = t(
"ui.settingView.masksAndZonesSettings.motionMasks.documentTitle",
);
}, []);
if (!polygon) {
@ -217,14 +221,15 @@ export default function MotionMaskEditPane({
<>
<Toaster position="top-center" closeButton={true} />
<Heading as="h3" className="my-2">
{polygon.name.length ? "Edit" : "New"} Motion Mask
{polygon.name.length
? t("ui.settingView.masksAndZonesSettings.motionMasks.edit")
: t("ui.settingView.masksAndZonesSettings.motionMasks.add")}
</Heading>
<div className="my-3 space-y-3 text-sm text-muted-foreground">
<p>
Motion masks are used to prevent unwanted types of motion from
triggering detection (example: tree branches, camera timestamps).
Motion masks should be used <em>very sparingly</em>, over-masking will
make it more difficult for objects to be tracked.
<Trans>
ui.settingView.masksAndZonesSettings.motionMasks.context
</Trans>
</p>
<div className="flex items-center text-primary">
@ -234,7 +239,9 @@ export default function MotionMaskEditPane({
rel="noopener noreferrer"
className="inline"
>
Read the documentation{" "}
<Trans>
ui.settingView.masksAndZonesSettings.motionMasks.context.documentation
</Trans>{" "}
<LuExternalLink className="ml-2 inline-flex size-3" />
</Link>
</div>
@ -243,11 +250,9 @@ export default function MotionMaskEditPane({
{polygons && activePolygonIndex !== undefined && (
<div className="my-2 flex w-full flex-row justify-between text-sm">
<div className="my-1 inline-flex">
{polygons[activePolygonIndex].points.length}{" "}
{polygons[activePolygonIndex].points.length > 1 ||
polygons[activePolygonIndex].points.length == 0
? "points"
: "point"}
{t("ui.settingView.masksAndZonesSettings.motionMasks.point", {
count: polygons[activePolygonIndex].points.length,
})}
{polygons[activePolygonIndex].isFinished && (
<FaCheckCircle className="ml-2 size-5" />
)}
@ -262,7 +267,9 @@ export default function MotionMaskEditPane({
</div>
)}
<div className="mb-3 text-sm text-muted-foreground">
Click to draw a polygon on the image.
<Trans>
ui.settingView.masksAndZonesSettings.motionMasks.clickDrawPolygon
</Trans>
</div>
<Separator className="my-3 bg-secondary" />
@ -270,19 +277,26 @@ export default function MotionMaskEditPane({
{polygonArea && polygonArea >= 0.35 && (
<>
<div className="mb-3 text-sm text-danger">
The motion mask is covering {Math.round(polygonArea * 100)}% of the
camera frame. Large motion masks are not recommended.
{t(
"ui.settingView.masksAndZonesSettings.motionMasks.polygonAreaTooLarge",
{
polygonArea: Math.round(polygonArea * 100),
},
)}
</div>
<div className="mb-3 text-sm text-primary">
Motion masks do not prevent objects from being detected. You should
use a required zone instead.
<Trans>
ui.settingView.masksAndZonesSettings.motionMasks.polygonAreaTooLarge.tips
</Trans>
<Link
to="https://github.com/blakeblackshear/frigate/discussions/13040"
target="_blank"
rel="noopener noreferrer"
className="my-3 block"
>
Read the documentation{" "}
<Trans>
ui.settingView.masksAndZonesSettings.motionMasks.polygonAreaTooLarge.documentation
</Trans>{" "}
<LuExternalLink className="ml-2 inline-flex size-3" />
</Link>
</div>
@ -319,7 +333,7 @@ export default function MotionMaskEditPane({
aria-label="Cancel"
onClick={onCancel}
>
Cancel
<Trans>ui.cancel</Trans>
</Button>
<Button
variant="select"
@ -331,10 +345,12 @@ export default function MotionMaskEditPane({
{isLoading ? (
<div className="flex flex-row items-center gap-2">
<ActivityIndicator />
<span>Saving...</span>
<span>
<Trans>ui.saving</Trans>
</span>
</div>
) : (
"Save"
<Trans>ui.save</Trans>
)}
</Button>
</div>

44
web/src/components/settings/ObjectMaskEditPane.tsx
View File

@ -38,6 +38,8 @@ import { toast } from "sonner";
import { Toaster } from "../ui/sonner";
import ActivityIndicator from "../indicators/activity-indicator";
import { getAttributeLabels } from "@/utils/iconUtil";
import { t } from "i18next";
import { Trans } from "react-i18next";
type ObjectMaskEditPaneProps = {
polygons?: Polygon[];
@ -240,7 +242,9 @@ export default function ObjectMaskEditPane({
}
useEffect(() => {
document.title = "Edit Object Mask - Frigate";
document.title = t(
"ui.settingView.masksAndZonesSettings.objectMasks.documentTitle",
);
}, []);
if (!polygon) {
@ -251,23 +255,24 @@ export default function ObjectMaskEditPane({
<>
<Toaster position="top-center" closeButton={true} />
<Heading as="h3" className="my-2">
{polygon.name.length ? "Edit" : "New"} Object Mask
{polygon.name.length
? t("ui.settingView.masksAndZonesSettings.objectMasks.edit")
: t("ui.settingView.masksAndZonesSettings.objectMasks.add")}
</Heading>
<div className="my-2 text-sm text-muted-foreground">
<p>
Object filter masks are used to filter out false positives for a given
object type based on location.
<Trans>
ui.settingView.masksAndZonesSettings.objectMasks.context
</Trans>
</p>
</div>
<Separator className="my-3 bg-secondary" />
{polygons && activePolygonIndex !== undefined && (
<div className="my-2 flex w-full flex-row justify-between text-sm">
<div className="my-1 inline-flex">
{polygons[activePolygonIndex].points.length}{" "}
{polygons[activePolygonIndex].points.length > 1 ||
polygons[activePolygonIndex].points.length == 0
? "points"
: "point"}
{t("ui.settingView.masksAndZonesSettings.objectMasks.point", {
count: polygons[activePolygonIndex].points.length,
})}
{polygons[activePolygonIndex].isFinished && (
<FaCheckCircle className="ml-2 size-5" />
)}
@ -282,6 +287,9 @@ export default function ObjectMaskEditPane({
</div>
)}
<div className="mb-3 text-sm text-muted-foreground">
<Trans>
ui.settingView.masksAndZonesSettings.objectMasks.clickDrawPolygon
</Trans>
Click to draw a polygon on the image.
</div>
@ -307,7 +315,11 @@ export default function ObjectMaskEditPane({
name="objects"
render={({ field }) => (
<FormItem>
<FormLabel>Objects</FormLabel>
<FormLabel>
<Trans>
ui.settingView.masksAndZonesSettings.objectMasks.objects
</Trans>
</FormLabel>
<Select
onValueChange={field.onChange}
defaultValue={field.value}
@ -323,7 +335,9 @@ export default function ObjectMaskEditPane({
</SelectContent>
</Select>
<FormDescription>
The object type that that applies to this object mask.
<Trans>
ui.settingView.masksAndZonesSettings.objectMasks.objects.desc
</Trans>
</FormDescription>
<FormMessage />
</FormItem>
@ -420,11 +434,15 @@ export function ZoneObjectSelector({ camera }: ZoneObjectSelectorProps) {
return (
<>
<SelectGroup>
<SelectItem value="all_labels">All object types</SelectItem>
<SelectItem value="all_labels">
<Trans>
ui.settingView.masksAndZonesSettings.objectMasks.objects.allObjectTypes
</Trans>
</SelectItem>
<SelectSeparator className="bg-secondary" />
{allLabels.map((item) => (
<SelectItem key={item} value={item}>
{item.replaceAll("_", " ").charAt(0).toUpperCase() + item.slice(1)}
{t("object." + item)}
</SelectItem>
))}
</SelectGroup>

38
web/src/components/settings/SearchSettings.tsx
View File

@ -17,8 +17,10 @@ import FilterSwitch from "../filter/FilterSwitch";
import { SearchFilter, SearchSource } from "@/types/search";
import useSWR from "swr";
import { FrigateConfig } from "@/types/frigateConfig";
import { Trans } from "react-i18next";
import { t } from "i18next";
type SearchSettingsProps = {
type ExploreSettingsProps = {
className?: string;
columns: number;
defaultView: string;
@ -27,7 +29,7 @@ type SearchSettingsProps = {
setDefaultView: (view: string) => void;
onUpdateFilter: (filter: SearchFilter) => void;
};
export default function SearchSettings({
export default function ExploreSettings({
className,
columns,
setColumns,
@ -35,7 +37,7 @@ export default function SearchSettings({
filter,
setDefaultView,
onUpdateFilter,
}: SearchSettingsProps) {
}: ExploreSettingsProps) {
const { data: config } = useSWR<FrigateConfig>("config");
const [open, setOpen] = useState(false);
@ -50,17 +52,18 @@ export default function SearchSettings({
size="sm"
>
<FaCog className="text-secondary-foreground" />
Settings
<Trans>ui.searchView.settings</Trans>
</Button>
);
const content = (
<div className={cn(className, "my-3 space-y-5 py-3 md:mt-0 md:py-0")}>
<div className="space-y-4">
<div className="space-y-0.5">
<div className="text-md">Default View</div>
<div className="text-md">
<Trans>ui.searchView.settings.defaultView</Trans>
</div>
<div className="space-y-1 text-xs text-muted-foreground">
When no filters are selected, display a summary of the most recent
tracked objects per label, or display an unfiltered grid.
<Trans>ui.searchView.settings.defaultView.desc</Trans>
</div>
</div>
<Select
@ -68,7 +71,9 @@ export default function SearchSettings({
onValueChange={(value) => setDefaultView(value)}
>
<SelectTrigger className="w-full">
{defaultView == "summary" ? "Summary" : "Unfiltered Grid"}
{defaultView == "summary"
? t("ui.searchView.settings.defaultView.summary")
: t("ui.searchView.settings.defaultView.unfilteredGrid")}
</SelectTrigger>
<SelectContent>
<SelectGroup>
@ -78,7 +83,9 @@ export default function SearchSettings({
className="cursor-pointer"
value={value}
>
{value == "summary" ? "Summary" : "Unfiltered Grid"}
{value == "summary"
? t("ui.searchView.settings.defaultView.summary")
: t("ui.searchView.settings.defaultView.unfilteredGrid")}
</SelectItem>
))}
</SelectGroup>
@ -90,9 +97,11 @@ export default function SearchSettings({
<DropdownMenuSeparator />
<div className="flex w-full flex-col space-y-4">
<div className="space-y-0.5">
<div className="text-md">Grid Columns</div>
<div className="text-md">
<Trans>ui.searchView.settings.gridColumns</Trans>
</div>
<div className="space-y-1 text-xs text-muted-foreground">
Select the number of columns in the grid view.
<Trans>ui.searchView.settings.gridColumns.desc</Trans>
</div>
</div>
<div className="flex items-center space-x-4">
@ -153,10 +162,11 @@ export function SearchTypeContent({
<div className="overflow-x-hidden">
<DropdownMenuSeparator className="mb-3" />
<div className="space-y-0.5">
<div className="text-md">Search Source</div>
<div className="text-md">
<Trans>ui.searchView.settings.searchSource</Trans>
</div>
<div className="space-y-1 text-xs text-muted-foreground">
Choose whether to search the thumbnails or descriptions of your
tracked objects.
<Trans>ui.searchView.settings.searchSource.desc</Trans>
</div>
</div>
<div className="mt-2.5 flex flex-col gap-2.5">

90
web/src/components/settings/ZoneEditPane.tsx
View File

@ -29,6 +29,8 @@ import { toast } from "sonner";
import { flattenPoints, interpolatePoints } from "@/utils/canvasUtil";
import ActivityIndicator from "../indicators/activity-indicator";
import { getAttributeLabels } from "@/utils/iconUtil";
import { t } from "i18next";
import { Trans } from "react-i18next";
type ZoneEditPaneProps = {
polygons?: Polygon[];
@ -451,7 +453,9 @@ export default function ZoneEditPane({
}
useEffect(() => {
document.title = "Edit Zone - Frigate";
document.title = t(
"ui.settingView.masksAndZonesSettings.zone.documentTitle",
);
}, []);
if (!polygon) {
@ -462,23 +466,23 @@ export default function ZoneEditPane({
<>
<Toaster position="top-center" closeButton={true} />
<Heading as="h3" className="my-2">
{polygon.name.length ? "Edit" : "New"} Zone
{polygon.name.length
? t("ui.settingView.masksAndZonesSettings.zone.edit")
: t("ui.settingView.masksAndZonesSettings.zone.add")}
</Heading>
<div className="my-2 text-sm text-muted-foreground">
<p>
Zones allow you to define a specific area of the frame so you can
determine whether or not an object is within a particular area.
<Trans>ui.settingView.masksAndZonesSettings.zone.desc</Trans>
</p>
</div>
<Separator className="my-3 bg-secondary" />
{polygons && activePolygonIndex !== undefined && (
<div className="my-2 flex w-full flex-row justify-between text-sm">
<div className="my-1 inline-flex">
{polygons[activePolygonIndex].points.length}{" "}
{polygons[activePolygonIndex].points.length > 1 ||
polygons[activePolygonIndex].points.length == 0
? "points"
: "point"}
{t("ui.settingView.masksAndZonesSettings.zone.point", {
count: polygons[activePolygonIndex].points.length,
})}
{polygons[activePolygonIndex].isFinished && (
<FaCheckCircle className="ml-2 size-5" />
)}
@ -493,7 +497,9 @@ export default function ZoneEditPane({
</div>
)}
<div className="mb-3 text-sm text-muted-foreground">
Click to draw a polygon on the image.
<Trans>
ui.settingView.masksAndZonesSettings.zone.clickDrawPolygon
</Trans>
</div>
<Separator className="my-3 bg-secondary" />
@ -505,17 +511,22 @@ export default function ZoneEditPane({
name="name"
render={({ field }) => (
<FormItem>
<FormLabel>Name</FormLabel>
<FormLabel>
<Trans>ui.settingView.masksAndZonesSettings.zone.name</Trans>
</FormLabel>
<FormControl>
<Input
className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
placeholder="Enter a name..."
placeholder={t(
"ui.settingView.masksAndZonesSettings.zone.name.inputPlaceHolder",
)}
{...field}
/>
</FormControl>
<FormDescription>
Name must be at least 2 characters and must not be the name of
a camera or another zone.
<Trans>
ui.settingView.masksAndZonesSettings.zone.name.tips
</Trans>
</FormDescription>
<FormMessage />
</FormItem>
@ -527,7 +538,11 @@ export default function ZoneEditPane({
name="inertia"
render={({ field }) => (
<FormItem>
<FormLabel>Inertia</FormLabel>
<FormLabel>
<Trans>
ui.settingView.masksAndZonesSettings.zone.inertia
</Trans>
</FormLabel>
<FormControl>
<Input
className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
@ -536,8 +551,9 @@ export default function ZoneEditPane({
/>
</FormControl>
<FormDescription>
Specifies how many frames that an object must be in a zone
before they are considered in the zone. <em>Default: 3</em>
<Trans>
ui.settingView.masksAndZonesSettings.zone.inertia.desc
</Trans>
</FormDescription>
<FormMessage />
</FormItem>
@ -549,7 +565,11 @@ export default function ZoneEditPane({
name="loitering_time"
render={({ field }) => (
<FormItem>
<FormLabel>Loitering Time</FormLabel>
<FormLabel>
<Trans>
ui.settingView.masksAndZonesSettings.zone.loiteringTime
</Trans>
</FormLabel>
<FormControl>
<Input
className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
@ -558,8 +578,9 @@ export default function ZoneEditPane({
/>
</FormControl>
<FormDescription>
Sets a minimum amount of time in seconds that the object must
be in the zone for it to activate. <em>Default: 0</em>
<Trans>
ui.settingView.masksAndZonesSettings.zone.loiteringTime.desc
</Trans>
</FormDescription>
<FormMessage />
</FormItem>
@ -567,9 +588,13 @@ export default function ZoneEditPane({
/>
<Separator className="my-2 flex bg-secondary" />
<FormItem>
<FormLabel>Objects</FormLabel>
<FormLabel>
<Trans>ui.settingView.masksAndZonesSettings.zone.objects</Trans>
</FormLabel>
<FormDescription>
List of objects that apply to this zone.
<Trans>
ui.settingView.masksAndZonesSettings.zone.objects.desc
</Trans>
</FormDescription>
<ZoneObjectSelector
camera={polygon.camera}
@ -603,7 +628,9 @@ export default function ZoneEditPane({
className="cursor-pointer text-primary"
htmlFor="allLabels"
>
Speed Estimation
<Trans>
ui.settingView.masksAndZonesSettings.zone.speedEstimation
</Trans>
</FormLabel>
<Switch
checked={field.value}
@ -615,7 +642,9 @@ export default function ZoneEditPane({
polygons[activePolygonIndex].points.length !== 4
) {
toast.error(
"Zones with speed estimation must have exactly 4 points.",
t(
"ui.settingView.masksAndZonesSettings.zone.speedEstimation.pointLengthError",
),
);
return;
}
@ -624,7 +653,9 @@ export default function ZoneEditPane({
if (checked && loiteringTime && loiteringTime > 0) {
toast.error(
"Zones with loitering times greater than 0 should not be used with speed estimation.",
t(
"ui.settingView.masksAndZonesSettings.zone.speedEstimation.loiteringTimeError",
),
);
}
field.onChange(checked);
@ -634,8 +665,9 @@ export default function ZoneEditPane({
</FormControl>
</div>
<FormDescription>
Enable speed estimation for objects in this zone. The zone
must have exactly 4 points.
<Trans>
ui.settingView.masksAndZonesSettings.zone.speedEstimation.desc
</Trans>
</FormDescription>
<FormMessage />
</FormItem>
@ -877,7 +909,7 @@ export function ZoneObjectSelector({
<div className="scrollbar-container h-auto overflow-y-auto overflow-x-hidden">
<div className="my-2.5 flex items-center justify-between">
<Label className="cursor-pointer text-primary" htmlFor="allLabels">
All Objects
<Trans>ui.settingView.masksAndZonesSettings.zone.allObjects</Trans>
</Label>
<Switch
className="ml-1"
@ -898,7 +930,7 @@ export function ZoneObjectSelector({
className="w-full cursor-pointer capitalize text-primary"
htmlFor={item}
>
{item.replaceAll("_", " ")}
{t("object." + item)}
</Label>
<Switch
key={item}

24
web/src/components/ui/calendar-range.tsx
View File

@ -12,6 +12,8 @@ import {
import { Switch } from "./switch";
import { cn } from "@/lib/utils";
import { LuCheck } from "react-icons/lu";
import { t } from "i18next";
import { Trans } from "react-i18next";
export interface DateRangePickerProps {
/** Click handler for applying the updates from DateRangePicker. */
@ -59,15 +61,15 @@ interface Preset {
// Define presets
const PRESETS: Preset[] = [
{ name: "today", label: "Today" },
{ name: "yesterday", label: "Yesterday" },
{ name: "last7", label: "Last 7 days" },
{ name: "last14", label: "Last 14 days" },
{ name: "last30", label: "Last 30 days" },
{ name: "thisWeek", label: "This Week" },
{ name: "lastWeek", label: "Last Week" },
{ name: "thisMonth", label: "This Month" },
{ name: "lastMonth", label: "Last Month" },
{ name: "today", label: t("ui.time.today") },
{ name: "yesterday", label: t("ui.time.yesterday") },
{ name: "last7", label: t("ui.time.last7") },
{ name: "last14", label: t("ui.time.last14") },
{ name: "last30", label: t("ui.time.last30") },
{ name: "thisWeek", label: t("ui.time.thisWeek") },
{ name: "lastWeek", label: t("ui.time.lastWeek") },
{ name: "thisMonth", label: t("ui.time.thisMonth") },
{ name: "lastMonth", label: t("ui.time.lastMonth") },
];
/** The DateRangePicker component allows a user to select a range of dates */
@ -429,7 +431,7 @@ export function DateRangePicker({
}
}}
>
Apply
<Trans>ui.apply</Trans>
</Button>
<Button
onClick={() => {
@ -440,7 +442,7 @@ export function DateRangePicker({
variant="ghost"
aria-label="Reset"
>
Reset
<Trans>ui.reset</Trans>
</Button>
</div>
</div>

15
web/src/components/ui/calendar.tsx
View File

@ -1,12 +1,24 @@
import * as React from "react";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { DayPicker } from "react-day-picker";
import { enUS, Locale, zhCN } from "date-fns/locale";
import { cn } from "@/lib/utils";
import { buttonVariants } from "@/components/ui/button";
import i18n from "@/utils/i18n";
export type CalendarProps = React.ComponentProps<typeof DayPicker>;
let locale: Locale;
switch(i18n.language) {
case "zh-CN":
locale = zhCN;
break;
default:
locale = enUS;
break;
}
function Calendar({
className,
classNames,
@ -15,6 +27,7 @@ function Calendar({
}: CalendarProps) {
return (
<DayPicker
locale={locale}
showOutsideDays={showOutsideDays}
className={cn("p-3", className)}
classNames={{

77
web/src/context/language-provider.tsx Normal file
View File

@ -0,0 +1,77 @@
import { createContext, useContext, useState, useEffect, useMemo } from "react";
import i18next from "i18next";
type LanguageProviderState = {
language: string;
systemLanguage: string;
setLanguage: (language: string) => void;
};
const initialState: LanguageProviderState = {
language: i18next.language || "en",
systemLanguage: "en",
setLanguage: () => null,
};
const LanguageProviderContext =
createContext<LanguageProviderState>(initialState);
export function LanguageProvider({
children,
defaultLanguage = "en",
storageKey = "frigate-ui-language",
...props
}: {
children: React.ReactNode;
defaultLanguage?: string;
storageKey?: string;
}) {
const [language, setLanguage] = useState<string>(() => {
try {
const storedData = localStorage.getItem(storageKey);
const newLanguage = storedData || defaultLanguage;
i18next.changeLanguage(newLanguage);
return newLanguage;
} catch (error) {
// eslint-disable-next-line no-console
console.error("Error retrieving language data from storage:", error);
return defaultLanguage;
}
});
const systemLanguage = useMemo<string>(() => {
if (typeof window === "undefined") return "en";
return window.navigator.language;
}, []);
useEffect(() => {
if (language === systemLanguage) return;
i18next.changeLanguage(language);
}, [language, systemLanguage]);
const value = {
language,
systemLanguage,
setLanguage: (language: string) => {
localStorage.setItem(storageKey, language);
setLanguage(language);
window.location.reload();
},
};
return (
<LanguageProviderContext.Provider {...props} value={value}>
{children}
</LanguageProviderContext.Provider>
);
}
// eslint-disable-next-line react-refresh/only-export-components
export const useLanguage = () => {
const context = useContext(LanguageProviderContext);
if (context === undefined)
throw new Error("useLanguage must be used within a LanguageProvider");
return context;
};

21
web/src/context/providers.tsx
View File

@ -5,6 +5,7 @@ import { ApiProvider } from "@/api";
import { IconContext } from "react-icons";
import { TooltipProvider } from "@/components/ui/tooltip";
import { StatusBarMessagesProvider } from "@/context/statusbar-provider";
import { LanguageProvider } from "./language-provider";
import { StreamingSettingsProvider } from "./streaming-settings-provider";
type TProvidersProps = {
@ -16,15 +17,17 @@ function providers({ children }: TProvidersProps) {
<RecoilRoot>
<ApiProvider>
<ThemeProvider defaultTheme="system" storageKey="frigate-ui-theme">
<TooltipProvider>
<IconContext.Provider value={{ size: "20" }}>
<StatusBarMessagesProvider>
<StreamingSettingsProvider>
{children}
</StreamingSettingsProvider>
</StatusBarMessagesProvider>
</IconContext.Provider>
</TooltipProvider>
<LanguageProvider>
<TooltipProvider>
<IconContext.Provider value={{ size: "20" }}>
<StatusBarMessagesProvider>
<StreamingSettingsProvider>
{children}
</StreamingSettingsProvider>
</StatusBarMessagesProvider>
</IconContext.Provider>
</TooltipProvider>
</LanguageProvider>
</ThemeProvider>
</ApiProvider>
</RecoilRoot>

4
web/src/context/theme-provider.tsx
View File

@ -23,9 +23,7 @@ export const colorSchemes: ColorScheme[] = [
// eslint-disable-next-line react-refresh/only-export-components
export const friendlyColorSchemeName = (className: string): string => {
const words = className.split("-").slice(1); // Exclude the first word (e.g., 'theme')
return words
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
.join(" ");
return "ui.theme." + words.join(".");
};
type ThemeProviderProps = {

2
web/src/hooks/use-camera-activity.ts
View File

@ -52,7 +52,7 @@ export function useCameraActivity(
// handle camera activity
const hasActiveObjects = useMemo(
() => objects.filter((obj) => !obj.stationary).length > 0,
() => objects?.filter((obj) => !obj?.stationary)?.length > 0,
[objects],
);

12
web/src/hooks/use-navigation.ts
View File

@ -31,35 +31,35 @@ export default function useNavigation(
id: ID_LIVE,
variant,
icon: FaVideo,
title: "Live",
title: "ui.menu.live",
url: "/",
},
{
id: ID_REVIEW,
variant,
icon: MdVideoLibrary,
title: "Review",
title: "ui.menu.review",
url: "/review",
},
{
id: ID_EXPLORE,
variant,
icon: IoSearch,
title: "Explore",
title: "ui.menu.explore",
url: "/explore",
},
{
id: ID_EXPORT,
variant,
icon: FaCompactDisc,
title: "Export",
title: "ui.menu.export",
url: "/export",
},
{
id: ID_PLAYGROUND,
variant,
icon: LuConstruction,
title: "UI Playground",
title: "ui.menu.uiPlayground",
url: "/playground",
enabled: ENV !== "production",
},
@ -72,6 +72,6 @@ export default function useNavigation(
enabled: isDesktop && config?.face_recognition.enabled,
},
] as NavData[],
[config?.face_recognition.enabled, variant],
[config?.face_recognition?.enabled, variant],
);
}

11
web/src/hooks/use-stats.ts
View File

@ -10,6 +10,7 @@ import useSWR from "swr";
import useDeepMemo from "./use-deep-memo";
import { capitalizeFirstLetter } from "@/utils/stringUtil";
import { useFrigateStats } from "@/api/ws";
import { t } from "i18next";
export default function useStats(stats: FrigateStats | undefined) {
const { data: config } = useSWR<FrigateConfig>("config");
@ -72,7 +73,10 @@ export default function useStats(stats: FrigateStats | undefined) {
if (!isNaN(ffmpegAvg) && ffmpegAvg >= CameraFfmpegThreshold.error) {
problems.push({
text: `${capitalizeFirstLetter(name.replaceAll("_", " "))} has high FFMPEG CPU usage (${ffmpegAvg}%)`,
text: t("ui.stats.ffmpegHighCpuUsage", {
camera: capitalizeFirstLetter(name.replaceAll("_", " ")),
ffmpegAvg,
}), //`${capitalizeFirstLetter(name.replaceAll("_", " "))} has high FFMPEG CPU usage (${ffmpegAvg}%)`,
color: "text-danger",
relevantLink: "/system#cameras",
});
@ -80,7 +84,10 @@ export default function useStats(stats: FrigateStats | undefined) {
if (!isNaN(detectAvg) && detectAvg >= CameraDetectThreshold.error) {
problems.push({
text: `${capitalizeFirstLetter(name.replaceAll("_", " "))} has high detect CPU usage (${detectAvg}%)`,
text: t("ui.stats.detectHighCpuUsage", {
camera: capitalizeFirstLetter(name.replaceAll("_", " ")),
detectAvg,
}), //`${capitalizeFirstLetter(name.replaceAll("_", " "))} has high detect CPU usage (${detectAvg}%)`,
color: "text-danger",
relevantLink: "/system#cameras",
});

2
web/src/main.tsx
View File

@ -2,6 +2,8 @@ import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import "./index.css";
import "@/utils/i18n";
import "react-i18next";
ReactDOM.createRoot(document.getElementById("root")!).render(
<React.StrictMode>

15
web/src/pages/ConfigEditor.tsx
View File

@ -14,6 +14,7 @@ import { toast } from "sonner";
import { LuCopy, LuSave } from "react-icons/lu";
import { MdOutlineRestartAlt } from "react-icons/md";
import RestartDialog from "@/components/overlay/dialog/RestartDialog";
import { Trans } from "react-i18next";
type SaveOptions = "saveonly" | "restart";
@ -189,7 +190,7 @@ function ConfigEditor() {
<div className="relative h-full overflow-hidden">
<div className="mr-1 flex items-center justify-between">
<Heading as="h2" className="mb-0 ml-1 md:ml-0">
Config Editor
<Trans>ui.configEditorView.configEditor</Trans>
</Heading>
<div className="flex flex-row gap-1">
<Button
@ -199,7 +200,9 @@ function ConfigEditor() {
onClick={() => handleCopyConfig()}
>
<LuCopy className="text-secondary-foreground" />
<span className="hidden md:block">Copy Config</span>
<span className="hidden md:block">
<Trans>ui.configEditorView.copyConfig</Trans>
</span>
</Button>
<Button
size="sm"
@ -211,7 +214,9 @@ function ConfigEditor() {
<LuSave className="absolute left-0 top-0 size-3 text-secondary-foreground" />
<MdOutlineRestartAlt className="absolute size-4 translate-x-1 translate-y-1/2 text-secondary-foreground" />
</div>
<span className="hidden md:block">Save & Restart</span>
<span className="hidden md:block">
<Trans>ui.configEditorView.saveAndRestart</Trans>
</span>
</Button>
<Button
size="sm"
@ -220,7 +225,9 @@ function ConfigEditor() {
onClick={() => onHandleSaveConfig("saveonly")}
>
<LuSave className="text-secondary-foreground" />
<span className="hidden md:block">Save Only</span>
<span className="hidden md:block">
<Trans>ui.configEditorView.saveOnly</Trans>
</span>
</Button>
</div>
</div>

5
web/src/pages/Events.tsx
View File

@ -22,6 +22,7 @@ import {
import EventView from "@/views/events/EventView";
import { RecordingView } from "@/views/recording/RecordingView";
import axios from "axios";
import { t } from "i18next";
import { useCallback, useEffect, useMemo, useState } from "react";
import useSWR from "swr";
@ -77,9 +78,9 @@ export default function Events() {
useEffect(() => {
if (recording) {
document.title = "Recordings - Frigate";
document.title = t("ui.review.recordings.documentTitle");
} else {
document.title = `Review - Frigate`;
document.title = t("ui.review.documentTitle");
}
}, [recording, severity]);

22
web/src/pages/Exports.tsx
View File

@ -17,8 +17,10 @@ import { useSearchEffect } from "@/hooks/use-overlay-state";
import { cn } from "@/lib/utils";
import { DeleteClipType, Export } from "@/types/export";
import axios from "axios";
import { t } from "i18next";
import { useCallback, useEffect, useMemo, useState } from "react";
import { isMobile } from "react-device-detect";
import { Trans } from "react-i18next";
import { LuFolderX } from "react-icons/lu";
import { toast } from "sonner";
import useSWR from "swr";
@ -27,7 +29,7 @@ function Exports() {
const { data: exports, mutate } = useSWR<Export[]>("exports");
useEffect(() => {
document.title = "Export - Frigate";
document.title = t("ui.exportView.documentTitle");
}, []);
// Search
@ -118,20 +120,26 @@ function Exports() {
>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Delete Export</AlertDialogTitle>
<AlertDialogTitle>
<Trans>ui.exportView.deleteExport</Trans>
</AlertDialogTitle>
<AlertDialogDescription>
Are you sure you want to delete {deleteClip?.exportName}?
<Trans values={{ exportName: deleteClip?.exportName }}>
ui.exportView.deleteExport.desc
</Trans>
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogCancel>
<Trans>ui.cancel</Trans>
</AlertDialogCancel>
<Button
className="text-white"
aria-label="Delete Export"
variant="destructive"
onClick={() => onHandleDelete()}
>
Delete
<Trans>ui.delete</Trans>
</Button>
</AlertDialogFooter>
</AlertDialogContent>
@ -179,7 +187,7 @@ function Exports() {
<div className="flex w-full items-center justify-center p-2">
<Input
className="text-md w-full bg-muted md:w-1/3"
placeholder="Search"
placeholder={t("ui.exportView.search")}
value={search}
onChange={(e) => setSearch(e.target.value)}
/>
@ -207,7 +215,7 @@ function Exports() {
) : (
<div className="absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center text-center">
<LuFolderX className="size-16" />
No exports found
<Trans>ui.exportView.noExports</Trans>
</div>
)}
</div>

11
web/src/pages/Live.tsx
View File

@ -9,6 +9,7 @@ import { FrigateConfig } from "@/types/frigateConfig";
import LiveBirdseyeView from "@/views/live/LiveBirdseyeView";
import LiveCameraView from "@/views/live/LiveCameraView";
import LiveDashboardView from "@/views/live/LiveDashboardView";
import { t } from "i18next";
import { useEffect, useMemo, useRef } from "react";
import useSWR from "swr";
@ -64,11 +65,15 @@ function Live() {
.split("_")
.filter((text) => text)
.map((text) => text[0].toUpperCase() + text.substring(1));
document.title = `${capitalized.join(" ")} - Live - Frigate`;
document.title = t("ui.live.documentTitle.withCamera", {
camera: capitalized.join(" "),
});
} else if (cameraGroup && cameraGroup != "default") {
document.title = `${cameraGroup[0].toUpperCase()}${cameraGroup.substring(1)} - Live - Frigate`;
document.title = t("ui.live.documentTitle.withCamera", {
camera: `${cameraGroup[0].toUpperCase()}${cameraGroup.substring(1)}`,
});
} else {
document.title = "Live - Frigate";
document.title = t("ui.live.documentTitle");
}
}, [cameraGroup, selectedCameraName]);

37
web/src/pages/Settings.tsx
View File

@ -37,15 +37,16 @@ import AuthenticationView from "@/views/settings/AuthenticationView";
import NotificationView from "@/views/settings/NotificationsSettingsView";
import SearchSettingsView from "@/views/settings/SearchSettingsView";
import UiSettingsView from "@/views/settings/UiSettingsView";
import { t } from "i18next";
import { useSearchEffect } from "@/hooks/use-overlay-state";
import { useSearchParams } from "react-router-dom";
const allSettingsViews = [
"UI settings",
"explore settings",
"camera settings",
"masks / zones",
"motion tuner",
"uiSettings",
"exploreSettings",
"cameraSettings",
"masksAndZones",
"motionTuner",
"debug",
"users",
"notifications",
@ -53,7 +54,7 @@ const allSettingsViews = [
type SettingsType = (typeof allSettingsViews)[number];
export default function Settings() {
const [page, setPage] = useState<SettingsType>("UI settings");
const [page, setPage] = useState<SettingsType>("uiSettings");
const [pageToggle, setPageToggle] = useOptimisticState(page, setPage, 100);
const tabsRef = useRef<HTMLDivElement | null>(null);
@ -150,12 +151,14 @@ export default function Settings() {
{Object.values(allSettingsViews).map((item) => (
<ToggleGroupItem
key={item}
className={`flex scroll-mx-10 items-center justify-between gap-2 ${page == "UI settings" ? "last:mr-20" : ""} ${pageToggle == item ? "" : "*:text-muted-foreground"}`}
className={`flex scroll-mx-10 items-center justify-between gap-2 ${page == "uiSettings" ? "last:mr-20" : ""} ${pageToggle == item ? "" : "*:text-muted-foreground"}`}
value={item}
data-nav-item={item}
aria-label={`Select ${item}`}
>
<div className="capitalize">{item}</div>
<div className="capitalize">
{t("ui.settingView.menu." + item)}
</div>
</ToggleGroupItem>
))}
</ToggleGroup>
@ -163,11 +166,11 @@ export default function Settings() {
</div>
</ScrollArea>
{(page == "debug" ||
page == "camera settings" ||
page == "masks / zones" ||
page == "motion tuner") && (
page == "cameraSettings" ||
page == "masksAndZones" ||
page == "motionTuner") && (
<div className="ml-2 flex flex-shrink-0 items-center gap-2">
{page == "masks / zones" && (
{page == "masksAndZones" && (
<ZoneMaskFilterButton
selectedZoneMask={filterZoneMask}
updateZoneMaskFilter={setFilterZoneMask}
@ -182,27 +185,27 @@ export default function Settings() {
)}
</div>
<div className="mt-2 flex h-full w-full flex-col items-start md:h-dvh md:pb-24">
{page == "UI settings" && <UiSettingsView />}
{page == "explore settings" && (
{page == "uiSettings" && <UiSettingsView />}
{page == "exploreSettings" && (
<SearchSettingsView setUnsavedChanges={setUnsavedChanges} />
)}
{page == "debug" && (
<ObjectSettingsView selectedCamera={selectedCamera} />
)}
{page == "camera settings" && (
{page == "cameraSettings" && (
<CameraSettingsView
selectedCamera={selectedCamera}
setUnsavedChanges={setUnsavedChanges}
/>
)}
{page == "masks / zones" && (
{page == "masksAndZones" && (
<MasksAndZonesView
selectedCamera={selectedCamera}
selectedZoneMask={filterZoneMask}
setUnsavedChanges={setUnsavedChanges}
/>
)}
{page == "motion tuner" && (
{page == "motionTuner" && (
<MotionTunerView
selectedCamera={selectedCamera}
setUnsavedChanges={setUnsavedChanges}

9
web/src/pages/System.tsx
View File

@ -14,6 +14,8 @@ import CameraMetrics from "@/views/system/CameraMetrics";
import { useHashState } from "@/hooks/use-overlay-state";
import { capitalizeFirstLetter } from "@/utils/stringUtil";
import { Toaster } from "@/components/ui/sonner";
import { t } from "i18next";
import { Trans } from "react-i18next";
import { FrigateConfig } from "@/types/frigateConfig";
import FeatureMetrics from "@/views/system/FeatureMetrics";
@ -91,7 +93,9 @@ function System() {
{item == "features" && <LuSearchCode className="size-4" />}
{item == "storage" && <LuHardDrive className="size-4" />}
{item == "cameras" && <FaVideo className="size-4" />}
{isDesktop && <div className="capitalize">{item}</div>}
{isDesktop && (
<div className="capitalize">{t("ui.system." + item)}</div>
)}
</ToggleGroupItem>
))}
</ToggleGroup>
@ -99,7 +103,8 @@ function System() {
<div className="flex h-full items-center">
{lastUpdated && (
<div className="h-full content-center text-sm text-muted-foreground">
Last refreshed: <TimeAgo time={lastUpdated * 1000} dense />
<Trans>ui.system.lastRefreshed</Trans>
<TimeAgo time={lastUpdated * 1000} dense />
</div>
)}
</div>

49
web/src/utils/i18n.ts Normal file
View File

@ -0,0 +1,49 @@
import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import HttpBackend from "i18next-http-backend";
i18n
.use(initReactI18next)
.use(HttpBackend)
.init({
fallbackLng: "en", // use en if detected lng is not available
//lng: "zh-Hans", // language to use, more information here: https://www.i18next.com/overview/configuration-options#languages-namespaces-resources
// you can use the i18n.changeLanguage function to change the language manually: https://www.i18next.com/overview/api#changelanguage
// if you're using a language detector, do not define the lng option
backend: {
loadPath: "/locales/{{lng}}/{{ns}}.json",
},
react: {
transSupportBasicHtmlNodes: true,
transKeepBasicHtmlNodesFor: [
"br",
"strong",
"i",
"em",
"li",
"p",
"code",
],
},
interpolation: {
escapeValue: false, // react already safes from xss
},
keySeparator: false,
parseMissingKeyHandler: (key: string) => {
const parts = key.split(".");
if (parts.length > 1) {
if (parts[0] === "object" || parts[0] === "audio") {
return (
parts[1].replaceAll("_", " ").charAt(0).toUpperCase() +
parts[1].slice(1)
);
}
return parts[parts.length - 1];
}
return key;
},
});
export default i18n;

15
web/src/views/events/EventView.tsx
View File

@ -54,6 +54,8 @@ import { FilterList, LAST_24_HOURS_KEY } from "@/types/filter";
import { GiSoundWaves } from "react-icons/gi";
import useKeyboardListener from "@/hooks/use-keyboard-listener";
import ReviewDetailDialog from "@/components/overlay/detail/ReviewDetailDialog";
import { Trans } from "react-i18next";
import { t } from "i18next";
import { useTimelineZoom } from "@/hooks/use-timeline-zoom";
type EventViewProps = {
@ -197,10 +199,9 @@ export default function EventView({
)
.then((response) => {
if (response.status == 200) {
toast.success(
"Successfully started export. View the file in the /exports folder.",
{ position: "top-center" },
);
toast.success(t("ui.dialog.export.toast.success"), {
position: "top-center",
});
}
})
.catch((error) => {
@ -288,7 +289,7 @@ export default function EventView({
<>
<MdCircle className="size-2 text-severity_alert md:mr-[10px]" />
<div className="hidden md:flex md:flex-row md:items-center">
Alerts
<Trans>ui.eventView.alerts</Trans>
{reviewCounts.alert > -1 ? (
` ∙ ${reviewCounts.alert}`
) : (
@ -324,7 +325,7 @@ export default function EventView({
<>
<MdCircle className="size-2 text-severity_detection md:mr-[10px]" />
<div className="hidden md:flex md:flex-row md:items-center">
Detections
<Trans>ui.eventView.detections</Trans>
{reviewCounts.detection > -1 ? (
` ∙ ${reviewCounts.detection}`
) : (
@ -715,7 +716,7 @@ function DetectionReview({
{!loading && currentItems?.length === 0 && (
<div className="absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center text-center">
<LuFolderCheck className="size-16" />
There are no {severity.replace(/_/g, " ")}s to review
<Trans>ui.eventView.empty.{severity.replace(/_/g, " ")}</Trans>
</div>
)}

2
web/src/views/explore/ExploreView.tsx
View File

@ -225,7 +225,7 @@ function ExploreThumbnailImage({
};
const handleShowObjectLifecycle = () => {
onSelectSearch(event, false, "object lifecycle");
onSelectSearch(event, false, "object_lifecycle");
};
const handleShowSnapshot = () => {

3
web/src/views/live/DraggableGridLayout.tsx
View File

@ -48,6 +48,7 @@ import {
} from "@/components/ui/tooltip";
import { Toaster } from "@/components/ui/sonner";
import useCameraLiveMode from "@/hooks/use-camera-live-mode";
import { t } from "i18next";
import LiveContextMenu from "@/components/menu/LiveContextMenu";
import { useStreamingSettings } from "@/context/streaming-settings-provider";
@ -692,7 +693,7 @@ export default function DraggableGridLayout({
</div>
</TooltipTrigger>
<TooltipContent>
{fullscreen ? "Exit Fullscreen" : "Fullscreen"}
{fullscreen ? t("ui.exitFullscreen") : t("ui.fullscreen")}
</TooltipContent>
</Tooltip>
</>

120
web/src/views/live/LiveCameraView.tsx
View File

@ -100,6 +100,8 @@ import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
import useSWR from "swr";
import { cn } from "@/lib/utils";
import { useSessionPersistence } from "@/hooks/use-session-persistence";
import { Trans } from "react-i18next";
import { t } from "i18next";
import {
Select,
SelectContent,
@ -402,7 +404,11 @@ export default function LiveCameraView({
onClick={() => navigate(-1)}
>
<IoMdArrowRoundBack className="size-5 text-secondary-foreground" />
{isDesktop && <div className="text-primary">Back</div>}
{isDesktop && (
<div className="text-primary">
<Trans>ui.back</Trans>
</div>
)}
</Button>
<Button
className="flex items-center gap-2.5 rounded-lg"
@ -422,7 +428,11 @@ export default function LiveCameraView({
}}
>
<LuHistory className="size-5 text-secondary-foreground" />
{isDesktop && <div className="text-primary">History</div>}
{isDesktop && (
<div className="text-primary">
<Trans>ui.history</Trans>
</div>
)}
</Button>
</div>
) : (
@ -441,7 +451,9 @@ export default function LiveCameraView({
>
<IoMdArrowRoundBack className="size-5 text-secondary-foreground" />
{isDesktop && (
<div className="text-secondary-foreground">Back</div>
<div className="text-secondary-foreground">
<Trans>ui.back</Trans>
</div>
)}
</Button>
)}
@ -451,7 +463,7 @@ export default function LiveCameraView({
variant={fullscreen ? "overlay" : "primary"}
Icon={fullscreen ? FaCompress : FaExpand}
isActive={fullscreen}
title={fullscreen ? "Close" : "Fullscreen"}
title={fullscreen ? t("ui.close") : t("ui.fullscreen")}
onClick={toggleFullscreen}
/>
)}
@ -461,7 +473,7 @@ export default function LiveCameraView({
variant={fullscreen ? "overlay" : "primary"}
Icon={LuPictureInPicture}
isActive={pip}
title={pip ? "Close" : "Picture in Picture"}
title={pip ? t("ui.close") : t("ui.pictureInPicture")}
onClick={() => {
if (!pip) {
setPip(true);
@ -719,7 +731,7 @@ function PtzControlPanel({
{ptz?.features?.includes("pt") && (
<>
<TooltipButton
label="Move camera left"
label={t("ui.live.ptz.move.left.label")}
onMouseDown={(e) => {
e.preventDefault();
sendPtz("MOVE_LEFT");
@ -734,7 +746,7 @@ function PtzControlPanel({
<FaAngleLeft />
</TooltipButton>
<TooltipButton
label="Move camera up"
label={t("ui.live.ptz.move.up.label")}
onMouseDown={(e) => {
e.preventDefault();
sendPtz("MOVE_UP");
@ -749,7 +761,7 @@ function PtzControlPanel({
<FaAngleUp />
</TooltipButton>
<TooltipButton
label="Move camera down"
label={t("ui.live.ptz.move.down.label")}
onMouseDown={(e) => {
e.preventDefault();
sendPtz("MOVE_DOWN");
@ -764,7 +776,7 @@ function PtzControlPanel({
<FaAngleDown />
</TooltipButton>
<TooltipButton
label="Move camera right"
label={t("ui.live.ptz.move.right.label")}
onMouseDown={(e) => {
e.preventDefault();
sendPtz("MOVE_RIGHT");
@ -783,7 +795,7 @@ function PtzControlPanel({
{ptz?.features?.includes("zoom") && (
<>
<TooltipButton
label="Zoom in"
label={t("ui.live.ptz.zoom.in.label")}
onMouseDown={(e) => {
e.preventDefault();
sendPtz("ZOOM_IN");
@ -798,7 +810,7 @@ function PtzControlPanel({
<MdZoomIn />
</TooltipButton>
<TooltipButton
label="Zoom out"
label={t("ui.live.ptz.zoom.out.label")}
onMouseDown={(e) => {
e.preventDefault();
sendPtz("ZOOM_OUT");
@ -969,12 +981,11 @@ function FrigateCameraFeatures({
const toastId = toast.success(
<div className="flex flex-col space-y-3">
<div className="font-semibold">
Started manual on-demand recording.
<Trans>ui.live.manualRecording.started</Trans>
</div>
{!camera.record.enabled || camera.record.retain.days == 0 ? (
<div>
Since recording is disabled or restricted in the config for this
camera, only a snapshot will be saved.
<Trans>ui.live.manualRecording.recordDisabledTips</Trans>
</div>
) : (
<OnDemandRetentionMessage camera={camera} />
@ -988,7 +999,7 @@ function FrigateCameraFeatures({
setActiveToastId(toastId);
}
} catch (error) {
toast.error("Failed to start manual on-demand recording.", {
toast.error(t("ui.live.manualRecording.failedToStart"), {
position: "top-center",
});
}
@ -1005,12 +1016,12 @@ function FrigateCameraFeatures({
});
recordingEventIdRef.current = null;
setIsRecording(false);
toast.success("Ended manual on-demand recording.", {
toast.success(t("ui.live.manualRecording.ended"), {
position: "top-center",
});
}
} catch (error) {
toast.error("Failed to end manual on-demand recording.", {
toast.error(t("ui.live.manualRecording.failedToEnd"), {
position: "top-center",
});
}
@ -1048,7 +1059,11 @@ function FrigateCameraFeatures({
variant={fullscreen ? "overlay" : "primary"}
Icon={detectState == "ON" ? MdPersonSearch : MdPersonOff}
isActive={detectState == "ON"}
title={`${detectState == "ON" ? "Disable" : "Enable"} Detect`}
title={
detectState == "ON"
? t("ui.live.detect.disable")
: t("ui.live.detect.enable")
}
onClick={() => sendDetect(detectState == "ON" ? "OFF" : "ON")}
/>
<CameraFeatureToggle
@ -1056,7 +1071,11 @@ function FrigateCameraFeatures({
variant={fullscreen ? "overlay" : "primary"}
Icon={recordState == "ON" ? LuVideo : LuVideoOff}
isActive={recordState == "ON"}
title={`${recordState == "ON" ? "Disable" : "Enable"} Recording`}
title={
recordState == "ON"
? t("ui.live.recording.disable")
: t("ui.live.recording.enable")
}
onClick={() => sendRecord(recordState == "ON" ? "OFF" : "ON")}
/>
<CameraFeatureToggle
@ -1064,7 +1083,11 @@ function FrigateCameraFeatures({
variant={fullscreen ? "overlay" : "primary"}
Icon={snapshotState == "ON" ? MdPhotoCamera : MdNoPhotography}
isActive={snapshotState == "ON"}
title={`${snapshotState == "ON" ? "Disable" : "Enable"} Snapshots`}
title={
snapshotState == "ON"
? t("ui.live.snapshots.disable")
: t("ui.live.snapshots.enable")
}
onClick={() => sendSnapshot(snapshotState == "ON" ? "OFF" : "ON")}
/>
{audioDetectEnabled && (
@ -1073,7 +1096,11 @@ function FrigateCameraFeatures({
variant={fullscreen ? "overlay" : "primary"}
Icon={audioState == "ON" ? LuEar : LuEarOff}
isActive={audioState == "ON"}
title={`${audioState == "ON" ? "Disable" : "Enable"} Audio Detect`}
title={
audioState == "ON"
? t("ui.live.audioDetect.disable")
: t("ui.live.audioDetect.enable")
}
onClick={() => sendAudio(audioState == "ON" ? "OFF" : "ON")}
/>
)}
@ -1083,7 +1110,11 @@ function FrigateCameraFeatures({
variant={fullscreen ? "overlay" : "primary"}
Icon={autotrackingState == "ON" ? TbViewfinder : TbViewfinderOff}
isActive={autotrackingState == "ON"}
title={`${autotrackingState == "ON" ? "Disable" : "Enable"} Autotracking`}
title={
autotrackingState == "ON"
? t("ui.live.autotracking.disable")
: t("ui.live.autotracking.enable")
}
onClick={() =>
sendAutotracking(autotrackingState == "ON" ? "OFF" : "ON")
}
@ -1097,7 +1128,9 @@ function FrigateCameraFeatures({
variant={fullscreen ? "overlay" : "primary"}
Icon={isRecording ? TbRecordMail : TbRecordMailOff}
isActive={isRecording}
title={`${isRecording ? "Stop" : "Start"} on-demand recording`}
title={t(
"ui.live.manualRecording." + (isRecording ? "stop" : "start"),
)}
onClick={handleEventButtonClick}
/>
@ -1117,10 +1150,14 @@ function FrigateCameraFeatures({
<div className="flex flex-col gap-5 p-4">
{!isRestreamed && (
<div className="flex flex-col gap-2">
<Label>Stream</Label>
<Label>
<Trans>ui.dialog.streaming</Trans>
</Label>
<div className="flex flex-row items-center gap-1 text-sm text-muted-foreground">
<LuX className="size-4 text-danger" />
<div>Restreaming is not enabled for this camera.</div>
<div>
<Trans>ui.dialog.streaming.restreaming.disabled</Trans>
</div>
<Popover>
<PopoverTrigger asChild>
<div className="cursor-pointer p-0">
@ -1129,8 +1166,7 @@ function FrigateCameraFeatures({
</div>
</PopoverTrigger>
<PopoverContent className="w-80 text-xs">
Set up go2rtc for additional live view options and audio
for this camera.
<Trans>ui.dialog.streaming.restreaming.desc</Trans>
<div className="mt-2 flex items-center text-primary">
<Link
to="https://docs.frigate.video/configuration/live"
@ -1138,7 +1174,9 @@ function FrigateCameraFeatures({
rel="noopener noreferrer"
className="inline"
>
Read the documentation{" "}
<Trans>
ui.dialog.streaming.restreaming.readTheDocumentation
</Trans>
<LuExternalLink className="ml-2 inline-flex size-3" />
</Link>
</div>
@ -1319,7 +1357,7 @@ function FrigateCameraFeatures({
className="mx-0 cursor-pointer text-primary"
htmlFor="showstats"
>
Show stream stats
<Trans>ui.dialog.streaming.showStats</Trans>
</Label>
<Switch
className="ml-1"
@ -1329,13 +1367,12 @@ function FrigateCameraFeatures({
/>
</div>
<p className="text-sm text-muted-foreground">
Enable this option to show stream statistics as an overlay on
the camera feed.
<Trans>ui.dialog.streaming.showStats.desc</Trans>
</p>
</div>
<div className="flex flex-col gap-1">
<div className="flex items-center justify-between text-sm font-medium leading-none">
Debug View
<Trans>ui.dialog.streaming.debugView</Trans>
<LuExternalLink
onClick={() =>
navigate(`/settings?page=debug&camera=${camera.name}`)
@ -1414,10 +1451,14 @@ function FrigateCameraFeatures({
<div className="mt-3 flex flex-col gap-5">
{!isRestreamed && (
<div className="flex flex-col gap-2 p-2">
<Label>Stream</Label>
<Label>
<Trans>ui.dialog.streaming</Trans>
</Label>
<div className="flex flex-row items-center gap-1 text-sm text-muted-foreground">
<LuX className="size-4 text-danger" />
<div>Restreaming is not enabled for this camera.</div>
<div>
<Trans>ui.dialog.streaming.restreaming.disabled</Trans>
</div>
<Popover>
<PopoverTrigger asChild>
<div className="cursor-pointer p-0">
@ -1426,8 +1467,7 @@ function FrigateCameraFeatures({
</div>
</PopoverTrigger>
<PopoverContent className="w-80 text-xs">
Set up go2rtc for additional live view options and audio for
this camera.
<Trans>ui.dialog.streaming.restreaming.desc</Trans>
<div className="mt-2 flex items-center text-primary">
<Link
to="https://docs.frigate.video/configuration/live"
@ -1435,7 +1475,9 @@ function FrigateCameraFeatures({
rel="noopener noreferrer"
className="inline"
>
Read the documentation{" "}
<Trans>
ui.dialog.streaming.restreaming.readTheDocumentation
</Trans>
<LuExternalLink className="ml-2 inline-flex size-3" />
</Link>
</div>
@ -1588,7 +1630,9 @@ function FrigateCameraFeatures({
isRecording && "animate-pulse bg-red-500 hover:bg-red-600",
)}
>
{isRecording ? "End" : "Start"} on-demand recording
<Trans>
ui.live.manualRecording.{isRecording ? "end" : "start"}
</Trans>
</Button>
<p className="text-sm text-muted-foreground">
Start a manual event based on this camera's recording retention

7
web/src/views/live/LiveDashboardView.tsx
View File

@ -41,6 +41,7 @@ import {
import { FaCompress, FaExpand } from "react-icons/fa";
import useCameraLiveMode from "@/hooks/use-camera-live-mode";
import { useResizeObserver } from "@/hooks/resize-observer";
import { t } from "i18next";
import LiveContextMenu from "@/components/menu/LiveContextMenu";
import { useStreamingSettings } from "@/context/streaming-settings-provider";
@ -469,7 +470,9 @@ export default function LiveDashboardView({
}
const streamName =
currentGroupStreamingSettings?.[camera.name]?.streamName ||
Object.values(camera.live.streams)?.[0];
camera?.live?.streams
? Object?.values(camera?.live?.streams)?.[0]
: "";
const autoLive =
currentGroupStreamingSettings?.[camera.name]?.streamType !==
"no-streaming";
@ -558,7 +561,7 @@ export default function LiveDashboardView({
</div>
</TooltipTrigger>
<TooltipContent>
{fullscreen ? "Exit Fullscreen" : "Fullscreen"}
{fullscreen ? t("ui.exitFullscreen") : t("ui.fullscreen")}
</TooltipContent>
</Tooltip>
</div>

23
web/src/views/recording/RecordingView.tsx
View File

@ -47,6 +47,7 @@ import { ASPECT_VERTICAL_LAYOUT, ASPECT_WIDE_LAYOUT } from "@/types/record";
import { useResizeObserver } from "@/hooks/resize-observer";
import { cn } from "@/lib/utils";
import { useFullscreen } from "@/hooks/use-fullscreen";
import { Trans } from "react-i18next";
import { useTimezone } from "@/hooks/use-date-utils";
import { useTimelineZoom } from "@/hooks/use-timeline-zoom";
@ -398,7 +399,11 @@ export function RecordingView({
onClick={() => navigate(-1)}
>
<IoMdArrowRoundBack className="size-5 text-secondary-foreground" />
{isDesktop && <div className="text-primary">Back</div>}
{isDesktop && (
<div className="text-primary">
<Trans>ui.back</Trans>
</div>
)}
</Button>
<Button
className="flex items-center gap-2.5 rounded-lg"
@ -409,7 +414,11 @@ export function RecordingView({
}}
>
<FaVideo className="size-5 text-secondary-foreground" />
{isDesktop && <div className="text-primary">Live</div>}
{isDesktop && (
<div className="text-primary">
<Trans>ui.menu.live</Trans>
</div>
)}
</Button>
</div>
<div className="flex items-center justify-end gap-2">
@ -469,14 +478,18 @@ export function RecordingView({
value="timeline"
aria-label="Select timeline"
>
<div className="">Timeline</div>
<div className="">
<Trans>ui.review.timeline</Trans>
</div>
</ToggleGroupItem>
<ToggleGroupItem
className={`${timelineType == "events" ? "" : "text-muted-foreground"}`}
value="events"
aria-label="Select events"
>
<div className="">Events</div>
<div className="">
<Trans>ui.review.events</Trans>
</div>
</ToggleGroupItem>
</ToggleGroup>
) : (
@ -783,7 +796,7 @@ function Timeline({
>
{mainCameraReviewItems.length === 0 ? (
<div className="mt-5 text-center text-primary">
No events found for this time period.
<Trans>ui.review.events.noFoundForTimePeriod</Trans>
</div>
) : (
mainCameraReviewItems.map((review) => {

9
web/src/views/search/SearchView.tsx
View File

@ -22,7 +22,7 @@ import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
import { isEqual } from "lodash";
import { formatDateToLocaleString } from "@/utils/dateUtil";
import SearchThumbnailFooter from "@/components/card/SearchThumbnailFooter";
import SearchSettings from "@/components/settings/SearchSettings";
import ExploreSettings from "@/components/settings/SearchSettings";
import {
Tooltip,
TooltipContent,
@ -31,6 +31,7 @@ import {
import Chip from "@/components/indicators/Chip";
import { TooltipPortal } from "@radix-ui/react-tooltip";
import SearchActionGroup from "@/components/filter/SearchActionGroup";
import { Trans } from "react-i18next";
type SearchViewProps = {
search: string;
@ -484,7 +485,7 @@ export default function SearchView({
filter={searchFilter}
onUpdateFilter={onUpdateFilter}
/>
<SearchSettings
<ExploreSettings
columns={columns}
setColumns={setColumns}
defaultView={defaultView}
@ -520,7 +521,7 @@ export default function SearchView({
{uniqueResults?.length == 0 && !isLoading && (
<div className="absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center text-center">
<LuSearchX className="size-16" />
No Tracked Objects Found
<Trans>ui.searchView.noTrackedObjects</Trans>
</div>
)}
@ -605,7 +606,7 @@ export default function SearchView({
}}
refreshResults={refresh}
showObjectLifecycle={() =>
onSelectSearch(value, false, "object lifecycle")
onSelectSearch(value, false, "object_lifecycle")
}
showSnapshot={() =>
onSelectSearch(value, false, "snapshot")

13
web/src/views/settings/AuthenticationView.tsx
View File

@ -15,6 +15,7 @@ import { Card } from "@/components/ui/card";
import { HiTrash } from "react-icons/hi";
import { FaUserEdit } from "react-icons/fa";
import { LuPlus } from "react-icons/lu";
import { Trans } from "react-i18next";
export default function AuthenticationView() {
const { data: config } = useSWR<FrigateConfig>("config");
@ -91,7 +92,7 @@ export default function AuthenticationView() {
<div className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto rounded-lg border-[1px] border-secondary-foreground bg-background_alt p-2 md:order-none md:mb-0 md:mr-2 md:mt-0">
<div className="flex flex-row items-center justify-between gap-2">
<Heading as="h3" className="my-2">
Users
<Trans>ui.settingView.users</Trans>
</Heading>
<Button
className="flex items-center gap-1"
@ -102,7 +103,7 @@ export default function AuthenticationView() {
}}
>
<LuPlus className="text-secondary-foreground" />
Add User
<Trans>ui.settingView.users.addUser</Trans>
</Button>
</div>
<div className="mt-3 space-y-3">
@ -123,7 +124,9 @@ export default function AuthenticationView() {
}}
>
<FaUserEdit />
<div className="hidden md:block">Update Password</div>
<div className="hidden md:block">
<Trans>ui.settingView.users.updatePassword</Trans>
</div>
</Button>
<Button
className="flex items-center gap-1"
@ -135,7 +138,9 @@ export default function AuthenticationView() {
}}
>
<HiTrash />
<div className="hidden md:block">Delete</div>
<div className="hidden md:block">
<Trans>ui.delete</Trans>
</div>
</Button>
</div>
</div>

150
web/src/views/settings/CameraSettingsView.tsx
View File

@ -27,6 +27,8 @@ import { LuExternalLink } from "react-icons/lu";
import { capitalizeFirstLetter } from "@/utils/stringUtil";
import { MdCircle } from "react-icons/md";
import { cn } from "@/lib/utils";
import { Trans } from "react-i18next";
import { t } from "i18next";
import { Switch } from "@/components/ui/switch";
import { Label } from "@/components/ui/label";
import { useAlertsState, useDetectionsState } from "@/api/ws";
@ -76,7 +78,7 @@ export default function CameraSettingsView({
const alertsLabels = useMemo(() => {
return cameraConfig?.review.alerts.labels
? cameraConfig.review.alerts.labels
.map((label) => label.replaceAll("_", " "))
.map((label) => t("object." + label))
.join(", ")
: "";
}, [cameraConfig]);
@ -84,7 +86,7 @@ export default function CameraSettingsView({
const detectionsLabels = useMemo(() => {
return cameraConfig?.review.detections.labels
? cameraConfig.review.detections.labels
.map((label) => label.replaceAll("_", " "))
.map((label) => t("object." + label))
.join(", ")
: "";
}, [cameraConfig]);
@ -247,13 +249,13 @@ export default function CameraSettingsView({
<Toaster position="top-center" closeButton={true} />
<div className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto rounded-lg border-[1px] border-secondary-foreground bg-background_alt p-2 md:order-none md:mb-0 md:mr-2 md:mt-0">
<Heading as="h3" className="my-2">
Camera Settings
<Trans>ui.settingView.cameraSettings</Trans>
</Heading>
<Separator className="my-2 flex bg-secondary" />
<Heading as="h4" className="my-2">
Review
<Trans>ui.settingView.cameraSettings.review</Trans>
</Heading>
<div className="mb-5 mt-2 flex max-w-5xl flex-col gap-2 space-y-3 text-sm text-primary-variant">
@ -267,7 +269,9 @@ export default function CameraSettingsView({
}}
/>
<div className="space-y-0.5">
<Label htmlFor="alerts-enabled">Alerts</Label>
<Label htmlFor="alerts-enabled">
<Trans>ui.settingView.cameraSettings.review.alerts</Trans>
</Label>
</div>
</div>
<div className="flex flex-col">
@ -281,12 +285,15 @@ export default function CameraSettingsView({
}}
/>
<div className="space-y-0.5">
<Label htmlFor="detections-enabled">Detections</Label>
<Label htmlFor="detections-enabled">
<Trans>
ui.settingView.cameraSettings.review.detections
</Trans>
</Label>
</div>
</div>
<div className="mt-3 text-sm text-muted-foreground">
Enable/disable alerts and detections for this camera. When
disabled, no new review items will be generated.
<Trans>ui.settingView.cameraSettings.review.desc</Trans>
</div>
</div>
</div>
@ -294,16 +301,15 @@ export default function CameraSettingsView({
<Separator className="my-2 flex bg-secondary" />
<Heading as="h4" className="my-2">
Review Classification
<Trans>ui.settingView.cameraSettings.reviewClassification</Trans>
</Heading>
<div className="max-w-6xl">
<div className="mb-5 mt-2 flex max-w-5xl flex-col gap-2 text-sm text-primary-variant">
<p>
Frigate categorizes review items as Alerts and Detections. By
default, all <em>person</em> and <em>car</em> objects are
considered Alerts. You can refine categorization of your review
items by configuring required zones for them.
<Trans>
ui.settingView.cameraSettings.reviewClassification.desc
</Trans>
</p>
<div className="flex items-center text-primary">
<Link
@ -312,7 +318,9 @@ export default function CameraSettingsView({
rel="noopener noreferrer"
className="inline"
>
Read the Documentation{" "}
<Trans>
ui.settingView.cameraSettings.reviewClassification.readTheDocumentation
</Trans>{" "}
<LuExternalLink className="ml-2 inline-flex size-3" />
</Link>
</div>
@ -345,7 +353,9 @@ export default function CameraSettingsView({
<MdCircle className="ml-3 size-2 text-severity_alert" />
</FormLabel>
<FormDescription>
Select zones for Alerts
<Trans>
ui.settingView.cameraSettings.reviewClassification.selectAlertsZones
</Trans>
</FormDescription>
</div>
<div className="max-w-md rounded-lg bg-secondary p-4 md:max-w-full">
@ -394,20 +404,40 @@ export default function CameraSettingsView({
</>
) : (
<div className="font-normal text-destructive">
No zones are defined for this camera.
<Trans>
ui.settingView.cameraSettings.reviewClassification.noDefinedZones
</Trans>
</div>
)}
<FormMessage />
<div className="text-sm">
All {alertsLabels} objects
{watchedAlertsZones && watchedAlertsZones.length > 0
? ` detected in ${watchedAlertsZones.map((zone) => capitalizeFirstLetter(zone).replaceAll("_", " ")).join(", ")}`
: ""}{" "}
on{" "}
{capitalizeFirstLetter(
cameraConfig?.name ?? "",
).replaceAll("_", " ")}{" "}
will be shown as Alerts.
? t(
"ui.settingView.cameraSettings.reviewClassification.zoneObjectAlertsTips",
{
alertsLabels,
zone: watchedAlertsZones
.map((zone) =>
capitalizeFirstLetter(zone).replaceAll(
"_",
" ",
),
)
.join(", "),
cameraName: capitalizeFirstLetter(
cameraConfig?.name ?? "",
).replaceAll("_", " "),
},
)
: t(
"ui.settingView.cameraSettings.reviewClassification.objectAlertsTips",
{
alertsLabels,
cameraName: capitalizeFirstLetter(
cameraConfig?.name ?? "",
).replaceAll("_", " "),
},
)}
</div>
</FormItem>
)}
@ -498,22 +528,56 @@ export default function CameraSettingsView({
)}
<div className="text-sm">
All {detectionsLabels} objects{" "}
<em>not classified as Alerts</em>{" "}
{watchedDetectionsZones &&
watchedDetectionsZones.length > 0
? ` that are detected in ${watchedDetectionsZones.map((zone) => capitalizeFirstLetter(zone).replaceAll("_", " ")).join(", ")}`
: ""}{" "}
on{" "}
{capitalizeFirstLetter(
cameraConfig?.name ?? "",
).replaceAll("_", " ")}{" "}
will be shown as Detections
{(!selectDetections ||
(watchedDetectionsZones &&
watchedDetectionsZones.length === 0)) &&
", regardless of zone"}
.
watchedDetectionsZones.length > 0 ? (
!selectDetections ? (
<Trans
i18nKey="ui.settingView.cameraSettings.reviewClassification.zoneObjectDetectionsTips"
values={{
detectionsLabels,
zone: watchedDetectionsZones
.map((zone) =>
capitalizeFirstLetter(zone).replaceAll(
"_",
" ",
),
)
.join(", "),
cameraName: capitalizeFirstLetter(
cameraConfig?.name ?? "",
).replaceAll("_", " "),
}}
></Trans>
) : (
<Trans
i18nKey="ui.settingView.cameraSettings.reviewClassification.zoneObjectDetectionsTips.notSelectDetections"
values={{
detectionsLabels,
zone: watchedDetectionsZones
.map((zone) =>
capitalizeFirstLetter(zone).replaceAll(
"_",
" ",
),
)
.join(", "),
cameraName: capitalizeFirstLetter(
cameraConfig?.name ?? "",
).replaceAll("_", " "),
}}
/>
)
) : (
<Trans
i18nKey="ui.settingView.cameraSettings.reviewClassification.objectDetectionsTips"
values={{
detectionsLabels,
cameraName: capitalizeFirstLetter(
cameraConfig?.name ?? "",
).replaceAll("_", " "),
}}
/>
)}
</div>
</FormItem>
)}
@ -528,7 +592,7 @@ export default function CameraSettingsView({
onClick={onCancel}
type="button"
>
Cancel
<Trans>ui.cancel</Trans>
</Button>
<Button
variant="select"
@ -540,10 +604,12 @@ export default function CameraSettingsView({
{isLoading ? (
<div className="flex flex-row items-center gap-2">
<ActivityIndicator />
<span>Saving...</span>
<span>
<Trans>ui.saving</Trans>
</span>
</div>
) : (
"Save"
<Trans>ui.save</Trans>
)}
</Button>
</div>

66
web/src/views/settings/MasksAndZonesView.tsx
View File

@ -37,6 +37,7 @@ import PolygonItem from "@/components/settings/PolygonItem";
import { Link } from "react-router-dom";
import { isDesktop } from "react-device-detect";
import { StatusBarMessagesContext } from "@/context/statusbar-provider";
import { Trans } from "react-i18next";
import { useSearchEffect } from "@/hooks/use-overlay-state";
type MasksAndZoneViewProps = {
@ -480,7 +481,7 @@ export default function MasksAndZonesView({
{editPane === undefined && (
<>
<Heading as="h3" className="my-2">
Masks / Zones
<Trans>ui.settingView.masksAndZonesSettings</Trans>
</Heading>
<div className="flex w-full flex-col">
{(selectedZoneMask === undefined ||
@ -489,14 +490,18 @@ export default function MasksAndZonesView({
<div className="my-3 flex flex-row items-center justify-between">
<HoverCard>
<HoverCardTrigger asChild>
<div className="text-md cursor-default">Zones</div>
<div className="text-md cursor-default">
<Trans>
ui.settingView.masksAndZonesSettings.zone
</Trans>
</div>
</HoverCardTrigger>
<HoverCardContent>
<div className="my-2 flex flex-col gap-2 text-sm text-primary-variant">
<p>
Zones allow you to define a specific area of the
frame so you can determine whether or not an
object is within a particular area.
<Trans>
ui.settingView.masksAndZonesSettings.zone.desc
</Trans>
</p>
<div className="flex items-center text-primary">
<Link
@ -505,7 +510,9 @@ export default function MasksAndZonesView({
rel="noopener noreferrer"
className="inline"
>
Documentation{" "}
<Trans>
ui.settingView.masksAndZonesSettings.zone.desc.documentation
</Trans>{" "}
<LuExternalLink className="ml-2 inline-flex size-3" />
</Link>
</div>
@ -526,7 +533,11 @@ export default function MasksAndZonesView({
<LuPlus />
</Button>
</TooltipTrigger>
<TooltipContent>Add Zone</TooltipContent>
<TooltipContent>
<Trans>
ui.settingView.masksAndZonesSettings.zone.add
</Trans>
</TooltipContent>
</Tooltip>
</div>
{allPolygons
@ -556,16 +567,17 @@ export default function MasksAndZonesView({
<HoverCard>
<HoverCardTrigger asChild>
<div className="text-md cursor-default">
Motion Masks
<Trans>
ui.settingView.masksAndZonesSettings.motionMasks
</Trans>
</div>
</HoverCardTrigger>
<HoverCardContent>
<div className="my-2 flex flex-col gap-2 text-sm text-primary-variant">
<p>
Motion masks are used to prevent unwanted types
of motion from triggering detection. Over
masking will make it more difficult for objects
to be tracked.
<Trans>
ui.settingView.masksAndZonesSettings.motionMasks.desc
</Trans>
</p>
<div className="flex items-center text-primary">
<Link
@ -574,7 +586,9 @@ export default function MasksAndZonesView({
rel="noopener noreferrer"
className="inline"
>
Documentation{" "}
<Trans>
ui.settingView.masksAndZonesSettings.motionMasks.desc.documentation
</Trans>{" "}
<LuExternalLink className="ml-2 inline-flex size-3" />
</Link>
</div>
@ -595,7 +609,11 @@ export default function MasksAndZonesView({
<LuPlus />
</Button>
</TooltipTrigger>
<TooltipContent>Add Motion Mask</TooltipContent>
<TooltipContent>
<Trans>
ui.settingView.masksAndZonesSettings.motionMasks.add
</Trans>
</TooltipContent>
</Tooltip>
</div>
{allPolygons
@ -627,15 +645,17 @@ export default function MasksAndZonesView({
<HoverCard>
<HoverCardTrigger asChild>
<div className="text-md cursor-default">
Object Masks
<Trans>
ui.settingView.masksAndZonesSettings.objectMasks
</Trans>
</div>
</HoverCardTrigger>
<HoverCardContent>
<div className="my-2 flex flex-col gap-2 text-sm text-primary-variant">
<p>
Object filter masks are used to filter out false
positives for a given object type based on
location.
<Trans>
ui.settingView.masksAndZonesSettings.objectMasks.desc
</Trans>
</p>
<div className="flex items-center text-primary">
<Link
@ -644,7 +664,9 @@ export default function MasksAndZonesView({
rel="noopener noreferrer"
className="inline"
>
Documentation{" "}
<Trans>
ui.settingView.masksAndZonesSettings.objectMasks.documentation
</Trans>{" "}
<LuExternalLink className="ml-2 inline-flex size-3" />
</Link>
</div>
@ -665,7 +687,11 @@ export default function MasksAndZonesView({
<LuPlus />
</Button>
</TooltipTrigger>
<TooltipContent>Add Object Mask</TooltipContent>
<TooltipContent>
<Trans>
ui.settingView.masksAndZonesSettings.objectMasks.add
</Trans>
</TooltipContent>
</Tooltip>
</div>
{allPolygons

44
web/src/views/settings/MotionTunerView.tsx
View File

@ -21,6 +21,7 @@ import { Separator } from "@/components/ui/separator";
import { Link } from "react-router-dom";
import { LuExternalLink } from "react-icons/lu";
import { StatusBarMessagesContext } from "@/context/statusbar-provider";
import { Trans } from "react-i18next";
type MotionTunerViewProps = {
selectedCamera: string;
@ -179,13 +180,11 @@ export default function MotionTunerView({
<Toaster position="top-center" closeButton={true} />
<div className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto rounded-lg border-[1px] border-secondary-foreground bg-background_alt p-2 md:order-none md:mb-0 md:mr-2 md:mt-0 md:w-3/12">
<Heading as="h3" className="my-2">
Motion Detection Tuner
<Trans>ui.settingView.motionDetectionTuner</Trans>
</Heading>
<div className="my-3 space-y-3 text-sm text-muted-foreground">
<p>
Frigate uses motion detection as a first line check to see if there
is anything happening in the frame worth checking with object
detection.
<Trans>ui.settingView.motionDetectionTuner.desc</Trans>
</p>
<div className="flex items-center text-primary">
@ -195,7 +194,9 @@ export default function MotionTunerView({
rel="noopener noreferrer"
className="inline"
>
Read the Motion Tuning Guide{" "}
<Trans>
ui.settingView.motionDetectionTuner.desc.documentation
</Trans>{" "}
<LuExternalLink className="ml-2 inline-flex size-3" />
</Link>
</div>
@ -205,13 +206,13 @@ export default function MotionTunerView({
<div className="mt-2 space-y-6">
<div className="space-y-0.5">
<Label htmlFor="motion-threshold" className="text-md">
Threshold
<Trans>ui.settingView.motionDetectionTuner.Threshold</Trans>
</Label>
<div className="my-2 text-sm text-muted-foreground">
<p>
The threshold value dictates how much of a change in a pixel's
luminance is required to be considered motion.{" "}
<em>Default: 30</em>
<Trans>
ui.settingView.motionDetectionTuner.Threshold.desc
</Trans>
</p>
</div>
</div>
@ -236,12 +237,13 @@ export default function MotionTunerView({
<div className="mt-2 space-y-6">
<div className="space-y-0.5">
<Label htmlFor="motion-threshold" className="text-md">
Contour Area
<Trans>ui.settingView.motionDetectionTuner.contourArea</Trans>
</Label>
<div className="my-2 text-sm text-muted-foreground">
<p>
The contour area value is used to decide which groups of
changed pixels qualify as motion. <em>Default: 10</em>
<Trans>
ui.settingView.motionDetectionTuner.contourArea.desc
</Trans>
</p>
</div>
</div>
@ -266,9 +268,15 @@ export default function MotionTunerView({
<Separator className="my-2 flex bg-secondary" />
<div className="flex flex-row items-center justify-between">
<div className="space-y-0.5">
<Label htmlFor="improve-contrast">Improve Contrast</Label>
<Label htmlFor="improve-contrast">
<Trans>
ui.settingView.motionDetectionTuner.improveContrast
</Trans>
</Label>
<div className="text-sm text-muted-foreground">
Improve contrast for darker scenes. <em>Default: ON</em>
<Trans>
ui.settingView.motionDetectionTuner.improveContrast.desc
</Trans>
</div>
</div>
<Switch
@ -289,7 +297,7 @@ export default function MotionTunerView({
aria-label="Reset"
onClick={onCancel}
>
Reset
<Trans>ui.reset</Trans>
</Button>
<Button
variant="select"
@ -301,10 +309,12 @@ export default function MotionTunerView({
{isLoading ? (
<div className="flex flex-row items-center gap-2">
<ActivityIndicator />
<span>Saving...</span>
<span>
<Trans>ui.saving</Trans>
</span>
</div>
) : (
"Save"
<Trans>ui.save</Trans>
)}
</Button>
</div>

48
web/src/views/settings/NotificationsSettingsView.tsx
View File

@ -18,8 +18,10 @@ import { StatusBarMessagesContext } from "@/context/statusbar-provider";
import { FrigateConfig } from "@/types/frigateConfig";
import { zodResolver } from "@hookform/resolvers/zod";
import axios from "axios";
import { t } from "i18next";
import { useCallback, useContext, useEffect, useMemo, useState } from "react";
import { useForm } from "react-hook-form";
import { Trans } from "react-i18next";
import { LuAlertCircle, LuCheck, LuExternalLink, LuX } from "react-icons/lu";
import { Link } from "react-router-dom";
import { toast } from "sonner";
@ -345,14 +347,13 @@ export default function NotificationView({
<div className="grid w-full grid-cols-1 gap-4 md:grid-cols-2">
<div className="col-span-1">
<Heading as="h3" className="my-2">
Notification Settings
<Trans>ui.settingView.notification.notificationSettings</Trans>
</Heading>
<div className="max-w-6xl">
<div className="mb-5 mt-2 flex max-w-5xl flex-col gap-2 text-sm text-primary-variant">
<p>
Frigate can natively send push notifications to your device
when it is running in the browser or installed as a PWA.
<Trans>ui.settingView.notification.desc</Trans>
</p>
<div className="flex items-center text-primary">
<Link
@ -361,7 +362,7 @@ export default function NotificationView({
rel="noopener noreferrer"
className="inline"
>
Read the Documentation{" "}
<Trans>ui.settingView.notification.documentation</Trans>{" "}
<LuExternalLink className="ml-2 inline-flex size-3" />
</Link>
</div>
@ -378,17 +379,20 @@ export default function NotificationView({
name="email"
render={({ field }) => (
<FormItem>
<FormLabel>Email</FormLabel>
<FormLabel>
<Trans>ui.settingView.notification.email</Trans>
</FormLabel>
<FormControl>
<Input
className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark] md:w-72"
placeholder="example@email.com"
placeholder={t(
"ui.settingView.notification.email.placeholder",
)}
{...field}
/>
</FormControl>
<FormDescription>
Entering a valid email is required, as this is used by
the push server in case problems occur.
<Trans>ui.settingView.notification.email.desc</Trans>
</FormDescription>
<FormMessage />
</FormItem>
@ -404,7 +408,9 @@ export default function NotificationView({
<>
<div className="mb-2">
<FormLabel className="flex flex-row items-center text-base">
Cameras
<Trans>
ui.settingView.notification.cameras
</Trans>
</FormLabel>
</div>
<div className="max-w-md space-y-2 rounded-lg bg-secondary p-4">
@ -413,7 +419,7 @@ export default function NotificationView({
name="allEnabled"
render={({ field }) => (
<FilterSwitch
label="All Cameras"
label={t("ui.filter.allCameras")}
isChecked={field.value}
onCheckedChange={(checked) => {
setChangedValue(true);
@ -452,13 +458,17 @@ export default function NotificationView({
</>
) : (
<div className="font-normal text-destructive">
No cameras available.
<Trans>
ui.settingView.notification.cameras.noCameras
</Trans>
</div>
)}
<FormMessage />
<FormDescription>
Select the cameras to enable notifications for.
<Trans>
ui.settingView.notification.cameras.desc
</Trans>
</FormDescription>
</FormItem>
)}
@ -471,7 +481,7 @@ export default function NotificationView({
onClick={onCancel}
type="button"
>
Cancel
<Trans>ui.cancel</Trans>
</Button>
<Button
variant="select"
@ -483,10 +493,12 @@ export default function NotificationView({
{isLoading ? (
<div className="flex flex-row items-center gap-2">
<ActivityIndicator />
<span>Saving...</span>
<span>
<Trans>ui.saving</Trans>
</span>
</div>
) : (
"Save"
t("ui.save")
)}
</Button>
</div>
@ -499,7 +511,7 @@ export default function NotificationView({
<div className="flex flex-col gap-2 md:max-w-[50%]">
<Separator className="my-2 flex bg-secondary md:hidden" />
<Heading as="h4" className="my-2">
Device-Specific Settings
<Trans>ui.settingView.notification.deviceSpecific</Trans>
</Heading>
<Button
aria-label="Register or unregister notifications for this device"
@ -542,7 +554,9 @@ export default function NotificationView({
}
}}
>
{`${registration != null ? "Unregister" : "Register"} this device`}
{registration != null
? t("ui.settingView.notification.unregisterDevice")
: t("ui.settingView.notification.registerDevice")}
</Button>
{registration != null && registration.active && (
<Button

97
web/src/views/settings/ObjectSettingsView.tsx
View File

@ -23,6 +23,8 @@ import { getIconForLabel } from "@/utils/iconUtil";
import { capitalizeFirstLetter } from "@/utils/stringUtil";
import { LuExternalLink, LuInfo } from "react-icons/lu";
import { Link } from "react-router-dom";
import { t } from "i18next";
import { Trans } from "react-i18next";
import DebugDrawingLayer from "@/components/overlay/DebugDrawingLayer";
import { Separator } from "@/components/ui/separator";
import { isDesktop } from "react-device-detect";
@ -45,78 +47,53 @@ export default function ObjectSettingsView({
const DEBUG_OPTIONS = [
{
param: "bbox",
title: "Bounding boxes",
description: "Show bounding boxes around tracked objects",
title: t("ui.settingView.debug.boundingBoxes"),
description: t("ui.settingView.debug.boundingBoxes.desc"),
info: (
<>
<p className="mb-2">
<strong>Object Bounding Box Colors</strong>
<strong>
<Trans>ui.settingView.debug.boundingBoxes.colors</Trans>
</strong>
</p>
<ul className="list-disc space-y-1 pl-5">
<li>
At startup, different colors will be assigned to each object label
</li>
<li>
A dark blue thin line indicates that object is not detected at
this current point in time
</li>
<li>
A gray thin line indicates that object is detected as being
stationary
</li>
<li>
A thick line indicates that object is the subject of autotracking
(when enabled)
</li>
<Trans>ui.settingView.debug.boundingBoxes.colors.info</Trans>
</ul>
</>
),
},
{
param: "timestamp",
title: "Timestamp",
description: "Overlay a timestamp on the image",
title: t("ui.settingView.debug.timestamp"),
description: t("ui.settingView.debug.timestamp.desc"),
},
{
param: "zones",
title: "Zones",
description: "Show an outline of any defined zones",
title: t("ui.settingView.debug.zone"),
description: t("ui.settingView.debug.zone.desc"),
},
{
param: "mask",
title: "Motion masks",
description: "Show motion mask polygons",
title: t("ui.settingView.debug.mask"),
description: t("ui.settingView.debug.mask.desc"),
},
{
param: "motion",
title: "Motion boxes",
description: "Show boxes around areas where motion is detected",
title: t("ui.settingView.debug.motion"),
description: t("ui.settingView.debug.motion.desc"),
info: (
<>
<p className="mb-2">
<strong>Motion Boxes</strong>
</p>
<p>
Red boxes will be overlaid on areas of the frame where motion is
currently being detected
</p>
<Trans>ui.settingView.debug.motion.tips</Trans>
</>
),
},
{
param: "regions",
title: "Regions",
description:
"Show a box of the region of interest sent to the object detector",
title: t("ui.settingView.debug.regions"),
description: t("ui.settingView.debug.regions.desc"),
info: (
<>
<p className="mb-2">
<strong>Region Boxes</strong>
</p>
<p>
Bright green boxes will be overlaid on areas of interest in the
frame that are being sent to the object detector.
</p>
<Trans>ui.settingView.debug.regions.tips</Trans>
</>
),
},
@ -179,24 +156,20 @@ export default function ObjectSettingsView({
<Toaster position="top-center" closeButton={true} />
<div className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto rounded-lg border-[1px] border-secondary-foreground bg-background_alt p-2 md:order-none md:mb-0 md:mr-2 md:mt-0 md:w-3/12">
<Heading as="h3" className="my-2">
Debug
<Trans>ui.settingView.debug</Trans>
</Heading>
<div className="mb-5 space-y-3 text-sm text-muted-foreground">
<p>
Frigate uses your detectors{" "}
{config
? "(" +
Object.keys(config?.detectors)
.map((detector) => capitalizeFirstLetter(detector))
.join(",") +
")"
: ""}{" "}
to detect objects in your camera's video stream.
{t("ui.settingView.debug.detectorDesc", {
detectors: config
? Object.keys(config?.detectors)
.map((detector) => capitalizeFirstLetter(detector))
.join(",")
: "",
})}
</p>
<p>
Debugging view shows a real-time view of tracked objects and their
statistics. The object list shows a time-delayed summary of detected
objects.
<Trans>ui.settingView.debug.desc</Trans>
</p>
</div>
{config?.cameras[cameraConfig.name]?.webui_url && (
@ -217,8 +190,12 @@ export default function ObjectSettingsView({
<Tabs defaultValue="debug" className="w-full">
<TabsList className="grid w-full grid-cols-2">
<TabsTrigger value="debug">Debugging</TabsTrigger>
<TabsTrigger value="objectlist">Object List</TabsTrigger>
<TabsTrigger value="debug">
<Trans>ui.settingView.debug.debugging</Trans>
</TabsTrigger>
<TabsTrigger value="objectlist">
<Trans>ui.settingView.debug.objectList</Trans>
</TabsTrigger>
</TabsList>
<TabsContent value="debug">
<div className="flex w-full flex-col space-y-6">
@ -457,7 +434,9 @@ function ObjectList({ cameraConfig, objects }: ObjectListProps) {
);
})
) : (
<div className="p-3 text-center">No objects</div>
<div className="p-3 text-center">
<Trans>ui.settingView.debug.noObjects</Trans>
</div>
)}
</div>
);

122
web/src/views/settings/SearchSettingsView.tsx
View File

@ -20,20 +20,22 @@ import {
SelectItem,
SelectTrigger,
} from "@/components/ui/select";
import { Trans } from "react-i18next";
import { t } from "i18next";
type SearchSettingsViewProps = {
type ExploreSettingsViewProps = {
setUnsavedChanges: React.Dispatch<React.SetStateAction<boolean>>;
};
type SearchSettings = {
type ExploreSettings = {
enabled?: boolean;
reindex?: boolean;
model_size?: SearchModelSize;
};
export default function SearchSettingsView({
export default function ExploreSettingsView({
setUnsavedChanges,
}: SearchSettingsViewProps) {
}: ExploreSettingsViewProps) {
const { data: config, mutate: updateConfig } =
useSWR<FrigateConfig>("config");
const [changedValue, setChangedValue] = useState(false);
@ -41,29 +43,30 @@ export default function SearchSettingsView({
const { addMessage, removeMessage } = useContext(StatusBarMessagesContext)!;
const [searchSettings, setSearchSettings] = useState<SearchSettings>({
const [ExploreSettings, setExploreSettings] = useState<ExploreSettings>({
enabled: undefined,
reindex: undefined,
model_size: undefined,
});
const [origSearchSettings, setOrigSearchSettings] = useState<SearchSettings>({
enabled: undefined,
reindex: undefined,
model_size: undefined,
});
const [origExploreSettings, setOrigExploreSettings] =
useState<ExploreSettings>({
enabled: undefined,
reindex: undefined,
model_size: undefined,
});
useEffect(() => {
if (config) {
if (searchSettings?.enabled == undefined) {
setSearchSettings({
if (ExploreSettings?.enabled == undefined) {
setExploreSettings({
enabled: config.semantic_search.enabled,
reindex: config.semantic_search.reindex,
model_size: config.semantic_search.model_size,
});
}
setOrigSearchSettings({
setOrigExploreSettings({
enabled: config.semantic_search.enabled,
reindex: config.semantic_search.reindex,
model_size: config.semantic_search.model_size,
@ -73,8 +76,8 @@ export default function SearchSettingsView({
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [config]);
const handleSearchConfigChange = (newConfig: Partial<SearchSettings>) => {
setSearchSettings((prevConfig) => ({ ...prevConfig, ...newConfig }));
const handleSearchConfigChange = (newConfig: Partial<ExploreSettings>) => {
setExploreSettings((prevConfig) => ({ ...prevConfig, ...newConfig }));
setUnsavedChanges(true);
setChangedValue(true);
};
@ -84,7 +87,7 @@ export default function SearchSettingsView({
axios
.put(
`config/set?semantic_search.enabled=${searchSettings.enabled ? "True" : "False"}&semantic_search.reindex=${searchSettings.reindex ? "True" : "False"}&semantic_search.model_size=${searchSettings.model_size}`,
`config/set?semantic_search.enabled=${ExploreSettings.enabled ? "True" : "False"}&semantic_search.reindex=${ExploreSettings.reindex ? "True" : "False"}&semantic_search.model_size=${ExploreSettings.model_size}`,
{
requires_restart: 0,
},
@ -113,16 +116,16 @@ export default function SearchSettingsView({
});
}, [
updateConfig,
searchSettings.enabled,
searchSettings.reindex,
searchSettings.model_size,
ExploreSettings.enabled,
ExploreSettings.reindex,
ExploreSettings.model_size,
]);
const onCancel = useCallback(() => {
setSearchSettings(origSearchSettings);
setExploreSettings(origExploreSettings);
setChangedValue(false);
removeMessage("search_settings", "search_settings");
}, [origSearchSettings, removeMessage]);
}, [origExploreSettings, removeMessage]);
useEffect(() => {
if (changedValue) {
@ -152,18 +155,16 @@ export default function SearchSettingsView({
<Toaster position="top-center" closeButton={true} />
<div className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto rounded-lg border-[1px] border-secondary-foreground bg-background_alt p-2 md:order-none md:mb-0 md:mr-2 md:mt-0">
<Heading as="h3" className="my-2">
Explore Settings
<Trans>ui.settingView.exploreSettings</Trans>
</Heading>
<Separator className="my-2 flex bg-secondary" />
<Heading as="h4" className="my-2">
Semantic Search
<Trans>ui.settingView.exploreSettings.semanticSearch</Trans>
</Heading>
<div className="max-w-6xl">
<div className="mb-5 mt-2 flex max-w-5xl flex-col gap-2 text-sm text-primary-variant">
<p>
Semantic Search in Frigate allows you to find tracked objects
within your review items using either the image itself, a
user-defined text description, or an automatically generated one.
<Trans>ui.settingView.exploreSettings.semanticSearch.desc</Trans>
</p>
<div className="flex items-center text-primary">
@ -173,7 +174,9 @@ export default function SearchSettingsView({
rel="noopener noreferrer"
className="inline"
>
Read the Documentation
<Trans>
ui.settingView.exploreSettings.semanticSearch.readTheDocumentation
</Trans>
<LuExternalLink className="ml-2 inline-flex size-3" />
</Link>
</div>
@ -185,14 +188,16 @@ export default function SearchSettingsView({
<Switch
id="enabled"
className="mr-3"
disabled={searchSettings.enabled === undefined}
checked={searchSettings.enabled === true}
disabled={ExploreSettings.enabled === undefined}
checked={ExploreSettings.enabled === true}
onCheckedChange={(isChecked) => {
handleSearchConfigChange({ enabled: isChecked });
}}
/>
<div className="space-y-0.5">
<Label htmlFor="enabled">Enabled</Label>
<Label htmlFor="enabled">
<Trans>ui.enabled</Trans>
</Label>
</div>
</div>
<div className="flex flex-col">
@ -200,44 +205,55 @@ export default function SearchSettingsView({
<Switch
id="reindex"
className="mr-3"
disabled={searchSettings.reindex === undefined}
checked={searchSettings.reindex === true}
disabled={ExploreSettings.reindex === undefined}
checked={ExploreSettings.reindex === true}
onCheckedChange={(isChecked) => {
handleSearchConfigChange({ reindex: isChecked });
}}
/>
<div className="space-y-0.5">
<Label htmlFor="reindex">Re-Index On Startup</Label>
<Label htmlFor="reindex">
<Trans>
ui.settingView.exploreSettings.semanticSearch.reindexOnStartup
</Trans>
</Label>
</div>
</div>
<div className="mt-3 text-sm text-muted-foreground">
Re-indexing will reprocess all thumbnails and descriptions (if
enabled) and apply the embeddings on each startup.{" "}
<em>Don't forget to disable the option after restarting!</em>
<Trans>
ui.settingView.exploreSettings.semanticSearch.reindexOnStartup.desc
</Trans>
</div>
</div>
<div className="mt-2 flex flex-col space-y-6">
<div className="space-y-0.5">
<div className="text-md">Model Size</div>
<div className="text-md">
<Trans>
ui.settingView.exploreSettings.semanticSearch.modelSize
</Trans>
</div>
<div className="space-y-1 text-sm text-muted-foreground">
<p>
The size of the model used for Semantic Search embeddings.
<Trans>
ui.settingView.exploreSettings.semanticSearch.modelSize.desc
</Trans>
</p>
<ul className="list-disc pl-5 text-sm">
<li>
Using <em>small</em> employs a quantized version of the
model that uses less RAM and runs faster on CPU with a very
negligible difference in embedding quality.
<Trans>
ui.settingView.exploreSettings.semanticSearch.modelSize.small.desc
</Trans>
</li>
<li>
Using <em>large</em> employs the full Jina model and will
automatically run on the GPU if applicable.
<Trans>
ui.settingView.exploreSettings.semanticSearch.modelSize.large.desc
</Trans>
</li>
</ul>
</div>
</div>
<Select
value={searchSettings.model_size}
value={ExploreSettings.model_size}
onValueChange={(value) =>
handleSearchConfigChange({
model_size: value as SearchModelSize,
@ -245,7 +261,10 @@ export default function SearchSettingsView({
}
>
<SelectTrigger className="w-20">
{searchSettings.model_size}
{t(
"ui.settingView.exploreSettings.semanticSearch.modelSize." +
ExploreSettings.model_size,
)}
</SelectTrigger>
<SelectContent>
<SelectGroup>
@ -255,7 +274,10 @@ export default function SearchSettingsView({
className="cursor-pointer"
value={size}
>
{size}
{t(
"ui.settingView.exploreSettings.semanticSearch.modelSize." +
size,
)}
</SelectItem>
))}
</SelectGroup>
@ -267,7 +289,7 @@ export default function SearchSettingsView({
<div className="flex w-full flex-row items-center gap-2 pt-2 md:w-[25%]">
<Button className="flex flex-1" aria-label="Reset" onClick={onCancel}>
Reset
<Trans>ui.reset</Trans>
</Button>
<Button
variant="select"
@ -279,10 +301,12 @@ export default function SearchSettingsView({
{isLoading ? (
<div className="flex flex-row items-center gap-2">
<ActivityIndicator />
<span>Saving...</span>
<span>
<Trans>ui.saving</Trans>
</span>
</div>
) : (
"Save"
t("ui.save")
)}
</Button>
</div>

97
web/src/views/settings/UiSettingsView.tsx
View File

@ -18,6 +18,8 @@ import {
SelectItem,
SelectTrigger,
} from "../../components/ui/select";
import { Trans } from "react-i18next";
import { t } from "i18next";
const PLAYBACK_RATE_DEFAULT = isSafari ? [0.5, 1, 2] : [0.5, 1, 2, 4, 8, 16];
const WEEK_STARTS_ON = ["Sunday", "Monday"];
@ -82,13 +84,13 @@ export default function UiSettingsView() {
<Toaster position="top-center" closeButton={true} />
<div className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto rounded-lg border-[1px] border-secondary-foreground bg-background_alt p-2 md:order-none md:mb-0 md:mr-2 md:mt-0">
<Heading as="h3" className="my-2">
General Settings
<Trans>ui.settingView.generalSettings</Trans>
</Heading>
<Separator className="my-2 flex bg-secondary" />
<Heading as="h4" className="my-2">
Live Dashboard
<Trans>ui.settingView.generalSettings.liveDashboard</Trans>
</Heading>
<div className="mt-2 space-y-6">
@ -100,18 +102,16 @@ export default function UiSettingsView() {
onCheckedChange={setAutoLive}
/>
<Label className="cursor-pointer" htmlFor="auto-live">
Automatic Live View
<Trans>
ui.settingView.generalSettings.automaticLiveView
</Trans>
</Label>
</div>
<div className="my-2 max-w-5xl text-sm text-muted-foreground">
<p>
Automatically switch to a camera's live view when activity is
detected. Disabling this option causes static camera images on
the your dashboards to only update once per minute.{" "}
<em>
This is a global setting but can be overridden on each
camera <strong>in camera groups only</strong>.
</em>
<Trans>
ui.settingView.generalSettings.automaticLiveView.desc
</Trans>
</p>
</div>
</div>
@ -123,14 +123,14 @@ export default function UiSettingsView() {
onCheckedChange={setAlertVideos}
/>
<Label className="cursor-pointer" htmlFor="images-only">
Play Alert Videos
<Trans>ui.settingView.generalSettings.playAlertVideos</Trans>
</Label>
</div>
<div className="my-2 max-w-5xl text-sm text-muted-foreground">
<p>
By default, recent alerts on the Live dashboard play as small
looping videos. Disable this option to only show a static
image of recent alerts on this device/browser.
<Trans>
ui.settingView.generalSettings.playAlertVideos.desc
</Trans>
</p>
</div>
</div>
@ -139,12 +139,14 @@ export default function UiSettingsView() {
<div className="my-3 flex w-full flex-col space-y-6">
<div className="mt-2 space-y-3">
<div className="space-y-0.5">
<div className="text-md">Stored Layouts</div>
<div className="my-2 max-w-5xl text-sm text-muted-foreground">
<div className="text-md">
<Trans>ui.settingView.generalSettings.storedLayouts</Trans>
</div>
<div className="my-2 text-sm text-muted-foreground">
<p>
The layout of cameras in a camera group can be
dragged/resized. The positions are stored in your browser's
local storage.
<Trans>
ui.settingView.generalSettings.storedLayouts.desc
</Trans>
</p>
</div>
</div>
@ -152,17 +154,24 @@ export default function UiSettingsView() {
aria-label="Clear all saved layouts"
onClick={clearStoredLayouts}
>
Clear All Layouts
<Trans>
ui.settingView.generalSettings.storedLayouts.clearAll
</Trans>
</Button>
</div>
<div className="mt-2 space-y-3">
<div className="space-y-0.5">
<div className="text-md">Camera Group Streaming Settings</div>
<div className="text-md">
<Trans>
ui.settingView.generalSettings.cameraGroupStreaming
</Trans>
</div>
<div className="my-2 max-w-5xl text-sm text-muted-foreground">
<p>
Streaming settings for each camera group are stored in your
browser's local storage.
<Trans>
ui.settingView.generalSettings.cameraGroupStreaming.desc
</Trans>
</p>
</div>
</div>
@ -170,21 +179,31 @@ export default function UiSettingsView() {
aria-label="Clear all group streaming settings"
onClick={clearStreamingSettings}
>
Clear All Streaming Settings
<Trans>
ui.settingView.generalSettings.cameraGroupStreaming.clearAll
</Trans>
</Button>
</div>
<Separator className="my-2 flex bg-secondary" />
<Heading as="h4" className="my-2">
Recordings Viewer
<Trans>ui.settingView.generalSettings.recordingsViewer</Trans>
</Heading>
<div className="mt-2 space-y-6">
<div className="space-y-0.5">
<div className="text-md">Default Playback Rate</div>
<div className="text-md">
<Trans>
ui.settingView.generalSettings.recordingsViewer.defaultPlaybackRate
</Trans>
</div>
<div className="my-2 text-sm text-muted-foreground">
<p>Default playback rate for recordings playback.</p>
<p>
<Trans>
ui.settingView.generalSettings.recordingsViewer.defaultPlaybackRate.desc
</Trans>
</p>
</div>
</div>
</div>
@ -212,14 +231,22 @@ export default function UiSettingsView() {
<Separator className="my-2 flex bg-secondary" />
<Heading as="h4" className="my-2">
Calendar
<Trans>ui.settingView.generalSettings.calendar</Trans>
</Heading>
<div className="mt-2 space-y-6">
<div className="space-y-0.5">
<div className="text-md">First Weekday</div>
<div className="text-md">
<Trans>
ui.settingView.generalSettings.calendar.firstWeekday
</Trans>
</div>
<div className="my-2 text-sm text-muted-foreground">
<p>The day that the weeks of the review calendar begin on.</p>
<p>
<Trans>
ui.settingView.generalSettings.calendar.firstWeekday.desc
</Trans>
</p>
</div>
</div>
</div>
@ -228,7 +255,10 @@ export default function UiSettingsView() {
onValueChange={(value) => setWeekStartsOn(parseInt(value))}
>
<SelectTrigger className="w-32">
{WEEK_STARTS_ON[weekStartsOn ?? 0]}
{t(
"ui.settingView.generalSettings.calendar.firstWeekday." +
WEEK_STARTS_ON[weekStartsOn ?? 0].toLowerCase(),
)}
</SelectTrigger>
<SelectContent>
<SelectGroup>
@ -238,7 +268,10 @@ export default function UiSettingsView() {
className="cursor-pointer"
value={index.toString()}
>
{day}
{t(
"ui.settingView.generalSettings.calendar.firstWeekday." +
day.toLowerCase(),
)}
</SelectItem>
))}
</SelectGroup>

13
web/src/views/system/CameraMetrics.tsx
View File

@ -12,6 +12,7 @@ import {
TooltipTrigger,
} from "@/components/ui/tooltip";
import useSWR from "swr";
import { Trans } from "react-i18next";
type CameraMetricsProps = {
lastUpdated: number;
@ -223,11 +224,15 @@ export default function CameraMetrics({
return (
<div className="scrollbar-container mt-4 flex size-full flex-col gap-3 overflow-y-auto">
<div className="text-sm font-medium text-muted-foreground">Overview</div>
<div className="text-sm font-medium text-muted-foreground">
<Trans>ui.system.cameras.overview</Trans>
</div>
<div className="grid grid-cols-1 md:grid-cols-3">
{statsHistory.length != 0 ? (
<div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
<div className="mb-5">Frames / Detections</div>
<div className="mb-5">
<Trans>ui.system.cameras.framesAndDetections</Trans>
</div>
<CameraLineGraph
graphId="overall-stats"
unit=""
@ -294,7 +299,9 @@ export default function CameraMetrics({
)}
{Object.keys(cameraFpsSeries).includes(camera.name) ? (
<div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
<div className="mb-5">Frames / Detections</div>
<div className="mb-5">
<Trans>ui.system.cameras.framesAndDetections</Trans>
</div>
<CameraLineGraph
graphId={`${camera.name}-dps`}
unit=""

43
web/src/views/system/GeneralMetrics.tsx
View File

@ -15,6 +15,7 @@ import GPUInfoDialog from "@/components/overlay/GPUInfoDialog";
import { Skeleton } from "@/components/ui/skeleton";
import { ThresholdBarGraph } from "@/components/graph/SystemGraph";
import { cn } from "@/lib/utils";
import { Trans } from "react-i18next";
type GeneralMetricsProps = {
lastUpdated: number;
@ -448,7 +449,7 @@ export default function GeneralMetrics({
<div className="scrollbar-container mt-4 flex size-full flex-col overflow-y-auto">
<div className="text-sm font-medium text-muted-foreground">
Detectors
<Trans>ui.system.general.detector</Trans>
</div>
<div
className={cn(
@ -458,7 +459,9 @@ export default function GeneralMetrics({
>
{statsHistory.length != 0 ? (
<div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
<div className="mb-5">Detector Inference Speed</div>
<div className="mb-5">
<Trans>ui.system.general.detectorInferenceSpeed</Trans>
</div>
{detInferenceTimeSeries.map((series) => (
<ThresholdBarGraph
key={series.name}
@ -496,7 +499,9 @@ export default function GeneralMetrics({
)}
{statsHistory.length != 0 ? (
<div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
<div className="mb-5">Detector CPU Usage</div>
<div className="mb-5">
<Trans>ui.system.general.detectorCpuUsage</Trans>
</div>
{detCpuSeries.map((series) => (
<ThresholdBarGraph
key={series.name}
@ -514,7 +519,9 @@ export default function GeneralMetrics({
)}
{statsHistory.length != 0 ? (
<div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
<div className="mb-5">Detector Memory Usage</div>
<div className="mb-5">
<Trans>ui.system.general.detectorMemoryUsage</Trans>
</div>
{detMemSeries.map((series) => (
<ThresholdBarGraph
key={series.name}
@ -545,7 +552,7 @@ export default function GeneralMetrics({
size="sm"
onClick={() => setShowVainfo(true)}
>
Hardware Info
<Trans>ui.system.general.hardwareInfo</Trans>
</Button>
)}
</div>
@ -557,7 +564,9 @@ export default function GeneralMetrics({
>
{statsHistory.length != 0 ? (
<div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
<div className="mb-5">GPU Usage</div>
<div className="mb-5">
<Trans>ui.system.general.gpuUsage</Trans>
</div>
{gpuSeries.map((series) => (
<ThresholdBarGraph
key={series.name}
@ -577,7 +586,9 @@ export default function GeneralMetrics({
<>
{gpuMemSeries && (
<div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
<div className="mb-5">GPU Memory</div>
<div className="mb-5">
<Trans>ui.system.general.gpuMemroy</Trans>
</div>
{gpuMemSeries.map((series) => (
<ThresholdBarGraph
key={series.name}
@ -599,7 +610,9 @@ export default function GeneralMetrics({
<>
{gpuEncSeries && gpuEncSeries?.length != 0 && (
<div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
<div className="mb-5">GPU Encoder</div>
<div className="mb-5">
<Trans>ui.system.general.gpuEncoder</Trans>
</div>
{gpuEncSeries.map((series) => (
<ThresholdBarGraph
key={series.name}
@ -621,7 +634,9 @@ export default function GeneralMetrics({
<>
{gpuDecSeries && gpuDecSeries?.length != 0 && (
<div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
<div className="mb-5">GPU Decoder</div>
<div className="mb-5">
<Trans>ui.system.general.gpuDecoder</Trans>
</div>
{gpuDecSeries.map((series) => (
<ThresholdBarGraph
key={series.name}
@ -644,12 +659,14 @@ export default function GeneralMetrics({
)}
<div className="mt-4 text-sm font-medium text-muted-foreground">
Other Processes
<Trans>ui.system.general.otherProcesses</Trans>
</div>
<div className="mt-4 grid grid-cols-1 gap-2 sm:grid-cols-2">
{statsHistory.length != 0 ? (
<div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
<div className="mb-5">Process CPU Usage</div>
<div className="mb-5">
<Trans>ui.system.general.processCpuUsage</Trans>
</div>
{otherProcessCpuSeries.map((series) => (
<ThresholdBarGraph
key={series.name}
@ -667,7 +684,9 @@ export default function GeneralMetrics({
)}
{statsHistory.length != 0 ? (
<div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
<div className="mb-5">Process Memory Usage</div>
<div className="mb-5">
<Trans>ui.system.general.processMemoryUsage</Trans>
</div>
{otherProcessMemSeries.map((series) => (
<ThresholdBarGraph
key={series.name}

13
web/src/views/system/StorageMetrics.tsx
View File

@ -9,6 +9,7 @@ import {
} from "@/components/ui/popover";
import useSWR from "swr";
import { LuAlertCircle } from "react-icons/lu";
import { Trans } from "react-i18next";
import { FrigateConfig } from "@/types/frigateConfig";
import { useTimezone } from "@/hooks/use-date-utils";
import { RecordingsSummary } from "@/types/review";
@ -75,11 +76,13 @@ export default function StorageMetrics({
return (
<div className="scrollbar-container mt-4 flex size-full flex-col overflow-y-auto">
<div className="text-sm font-medium text-muted-foreground">Overview</div>
<div className="text-sm font-medium text-muted-foreground">
<Trans>ui.system.storage.overview</Trans>
</div>
<div className="mt-4 grid grid-cols-1 gap-2 sm:grid-cols-3">
<div className="flex-col rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
<div className="mb-5 flex flex-row items-center justify-between">
Recordings
<Trans>ui.system.storage.recordings</Trans>
<Popover>
<PopoverTrigger asChild>
<button
@ -94,9 +97,7 @@ export default function StorageMetrics({
</PopoverTrigger>
<PopoverContent className="w-80">
<div className="space-y-2">
This value represents the total storage used by the recordings
in Frigate's database. Frigate does not track storage usage
for all files on your disk.
<Trans>ui.system.storage.recordings.tips</Trans>
</div>
</PopoverContent>
</Popover>
@ -135,7 +136,7 @@ export default function StorageMetrics({
</div>
</div>
<div className="mt-4 text-sm font-medium text-muted-foreground">
Camera Storage
<Trans>ui.system.storage.cameraStorage</Trans>
</div>
<div className="mt-4 bg-background_alt p-2.5 md:rounded-2xl">
<CombinedStorageGraph

0
web/tailwind.config.js → web/tailwind.config.cjs
View File