Use translations

web/public/locales/en/common.json

@@ -131,6 +131,8 @@
     "close": "Close",
     "copy": "Copy",
     "copiedToClipboard": "Copied to clipboard",
+    "shareTimestamp": "Share Timestamp",
+    "shareTimestampUrl": "Share Timestamp URL",
     "back": "Back",
     "history": "History",
     "fullscreen": "Fullscreen",

web/public/locales/en/components/dialog.json

@@ -99,6 +99,14 @@
     }
   },
   "recording": {
+    "shareTimestamp": {
+      "title": "Share Review Timestamp",
+      "description": "Share the current player position or choose a custom timestamp.",
+      "current": "Current Player Timestamp",
+      "custom": "Custom Timestamp",
+      "customDescription": "Pick a specific point in time to share.",
+      "shareTitle": "Frigate Review Timestamp: {{camera}}"
+    },
     "confirmDelete": {
       "title": "Confirm Delete",
       "desc": {

web/src/components/overlay/ActionsDropdown.tsx

@@ -18,7 +18,7 @@ export default function ActionsDropdown({
   onDebugReplayClick,
   onExportClick,
   onShareTimestampClick,
-}: ActionsDropdownProps) {
+}: Readonly<ActionsDropdownProps>) {
   const { t } = useTranslation(["components/dialog", "views/replay", "common"]);
 
   return (
@@ -40,7 +40,7 @@ export default function ActionsDropdown({
           {t("menu.export", { ns: "common" })}
         </DropdownMenuItem>
         <DropdownMenuItem onClick={onShareTimestampClick}>
-          Share Timestamp
+          {t("button.shareTimestamp", { ns: "common" })}
         </DropdownMenuItem>
         <DropdownMenuItem onClick={onDebugReplayClick}>
           {t("title", { ns: "views/replay" })}

web/src/components/overlay/MobileReviewSettingsDrawer.tsx

@@ -104,6 +104,7 @@ export default function MobileReviewSettingsDrawer({
     "views/recording",
     "components/dialog",
     "views/replay",
+    "common",
   ]);
   const navigate = useNavigate();
   const [drawerMode, setDrawerMode] = useState<DrawerMode>("none");
@@ -283,14 +284,14 @@ export default function MobileReviewSettingsDrawer({
         {features.includes("share-timestamp") && (
           <Button
             className="flex w-full items-center justify-center gap-2"
-            aria-label="Share timestamp"
+            aria-label={t("button.shareTimestamp", { ns: "common" })}
             onClick={() => {
               setDrawerMode("none");
               onShareTimestampClick();
             }}
           >
             <LuShare2 className="size-5 rounded-md bg-secondary-foreground stroke-secondary p-1" />
-            Share Timestamp
+            {t("button.shareTimestamp", { ns: "common" })}
           </Button>
         )}
         {features.includes("calendar") && (

web/src/components/overlay/ShareTimestampDialog.tsx

@@ -111,8 +111,8 @@ function ShareTimestampContent({
   customTimestamp,
   setCustomTimestamp,
   onShareTimestamp,
-}: ShareTimestampContentProps) {
-  const { t } = useTranslation(["common"]);
+}: Readonly<ShareTimestampContentProps>) {
+  const { t } = useTranslation(["common", "components/dialog"]);
   const { data: config } = useSWR<FrigateConfig>("config");
   const currentTimestampLabel = useFormattedTimestamp(
     currentTime,
@@ -127,9 +127,13 @@ function ShareTimestampContent({
   return (
     <div className="w-full">
       <div className="space-y-1">
-        <div className="text-sm font-medium">Share Review Timestamp</div>
+        <div className="text-sm font-medium">
+          {t("recording.shareTimestamp.title", { ns: "components/dialog" })}
+        </div>
         <div className="text-sm text-muted-foreground">
-          Share the current player position or choose a custom timestamp.
+          {t("recording.shareTimestamp.description", {
+            ns: "components/dialog",
+          })}
         </div>
       </div>
 
@@ -145,7 +149,9 @@ function ShareTimestampContent({
             <RadioGroupItem id="share-current" value="current" />
             <Label className="cursor-pointer space-y-1" htmlFor="share-current">
               <div className="text-sm font-medium">
-                Current Player Timestamp
+                {t("recording.shareTimestamp.current", {
+                  ns: "components/dialog",
+                })}
               </div>
               <div className="text-sm text-muted-foreground">
                 {currentTimestampLabel}
@@ -158,9 +164,15 @@ function ShareTimestampContent({
           <div className="flex items-start gap-2">
             <RadioGroupItem id="share-custom" value="custom" />
             <Label className="cursor-pointer space-y-1" htmlFor="share-custom">
-              <div className="text-sm font-medium">Custom Timestamp</div>
+              <div className="text-sm font-medium">
+                {t("recording.shareTimestamp.custom", {
+                  ns: "components/dialog",
+                })}
+              </div>
               <div className="text-sm text-muted-foreground">
-                Pick a specific point in time to share.
+                {t("recording.shareTimestamp.customDescription", {
+                  ns: "components/dialog",
+                })}
               </div>
             </Label>
           </div>
@@ -168,7 +180,9 @@ function ShareTimestampContent({
             <CustomTimestampSelector
               timestamp={customTimestamp}
               setTimestamp={setCustomTimestamp}
-              label="Custom Timestamp"
+              label={t("recording.shareTimestamp.custom", {
+                ns: "components/dialog",
+              })}
             />
           )}
         </div>
@@ -180,7 +194,7 @@ function ShareTimestampContent({
           variant="select"
           onClick={() => onShareTimestamp(Math.floor(selectedTimestamp))}
         >
-          <span>Share Timestamp Link</span>
+          <span>{t("button.shareTimestampUrl", { ns: "common" })}</span>
           <LuShare2 className="size-4" />
         </Button>
       </div>
@@ -198,7 +212,7 @@ function CustomTimestampSelector({
   timestamp,
   setTimestamp,
   label,
-}: CustomTimestampSelectorProps) {
+}: Readonly<CustomTimestampSelectorProps>) {
   const { t } = useTranslation(["common"]);
   const { data: config } = useSWR<FrigateConfig>("config");
 
@@ -310,9 +324,9 @@ function CustomTimestampSelector({
                   : nextClock.split(":");
                 const nextTimestamp = new Date(displayTimestamp * 1000);
                 nextTimestamp.setHours(
-                  parseInt(hour),
-                  parseInt(minute),
-                  parseInt(second ?? "0"),
+                  Number.parseInt(hour),
+                  Number.parseInt(minute),
+                  Number.parseInt(second ?? "0"),
                   0,
                 );
                 setFromDisplayDate(nextTimestamp);

web/src/views/recording/RecordingView.tsx

@@ -107,7 +107,7 @@ export function RecordingView({
   updateFilter,
   refreshData,
 }: RecordingViewProps) {
-  const { t } = useTranslation(["views/events"]);
+  const { t } = useTranslation(["views/events", "components/dialog"]);
   const { data: config } = useSWR<FrigateConfig>("config");
   const navigate = useNavigate();
   const location = useLocation();
@@ -344,9 +344,15 @@ export function RecordingView({
         config?.ui.timezone,
       );
 
-      shareOrCopy(reviewUrl, `Frigate Review Timestamp: ${mainCamera}`);
+      shareOrCopy(
+        reviewUrl,
+        t("recording.shareTimestamp.shareTitle", {
+          ns: "components/dialog",
+          camera: mainCamera,
+        }),
+      );
     },
-    [location.pathname, mainCamera, config?.ui.timezone],
+    [location.pathname, mainCamera, config?.ui.timezone, t],
   );
 
   useEffect(() => {