From 388e80ce8d6c0a74e64b5d3687976239054e9a57 Mon Sep 17 00:00:00 2001
From: Nick Mowen <nickmowen213@gmail.com>
Date: Sat, 27 Aug 2022 10:49:57 -0600
Subject: [PATCH] Add recording translations

---
 web/public/locales/en/translation.json | 3 +++
 web/src/routes/Recording.jsx           | 8 ++++----
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/web/public/locales/en/translation.json b/web/public/locales/en/translation.json
index 52b932197..8ef89a6a7 100644
--- a/web/public/locales/en/translation.json
+++ b/web/public/locales/en/translation.json
@@ -10,6 +10,9 @@
     "events": "Events",
     "github": "GitHub",
     "light": "Light",
+    "title_no_recordings": "No Recordings Found",
+    "desc_no_recordings": "Make sure you have enabled the record role in your configuration for the {camera} camera.",
+    "recordings": "Recordings",
     "restart_frigate": "Restart Frigate",
     "restart_in_progress": "Restart in progress",
     "style_guide": "Style Guide",
diff --git a/web/src/routes/Recording.jsx b/web/src/routes/Recording.jsx
index a35531fe9..a5c8815ae 100644
--- a/web/src/routes/Recording.jsx
+++ b/web/src/routes/Recording.jsx
@@ -112,10 +112,10 @@ export default function Recording({ camera, date, hour = '00', minute = '00', se
   if (recordingsSummary.length === 0) {
     return (
       <div className="space-y-4">
-        <Heading>{camera} Recordings</Heading>
+        <Heading>{camera} {t('recordings')}</Heading>
         <div class="bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4" role="alert">
-          <p class="font-bold">No Recordings Found</p>
-          <p>Make sure you have enabled the record role in your configuration for the {camera} camera.</p>
+          <p class="font-bold">{t('title_no_recordings')}</p>
+          <p>{t('desc_no_recordings').replace('{camera}', camera)}</p>
         </div>
       </div>
     );
@@ -123,7 +123,7 @@ export default function Recording({ camera, date, hour = '00', minute = '00', se
 
   return (
     <div className="space-y-4 p-2 px-4">
-      <Heading>{camera.replaceAll('_', ' ')} Recordings</Heading>
+      <Heading>{camera.replaceAll('_', ' ')} {t('recordings')}</Heading>
 
       <VideoPlayer
         onReady={(player) => {