@camstack/ui-library 1.2.290 → 1.2.292

package/dist/{PrivacyMaskSettings-BmRdUrPp.js → PrivacyMaskSettings-BlkbESYj.js}

@@ -1,6 +1,6 @@
 import { n as Hexagon, t as MicOff } from "./mic-off-C2VTYr91.js";
-import { Ht as Mic, TEXT_HINT, V as Square, WidgetPanel, isAbsentProvider, jn as EyeOff, k as Trash2, useDeviceProxy, usePlayerOverlayLayer, useSystem } from "./index.js";
-import { MaskShapeCanvas } from "./MaskShapeCanvas-DI4BY7W2.js";
+import { Ht as Mic, TEXT_HINT, UiTrans, V as Square, WidgetPanel, isAbsentProvider, jn as EyeOff, k as Trash2, useDeviceProxy, usePlayerOverlayLayer, useSystem, useUiText } from "./index.js";
+import { MaskShapeCanvas } from "./MaskShapeCanvas-C9cJlxvG.js";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/composites/cap-settings/privacy-mask-audio.ts
@@ -53,6 +53,7 @@ function regionsEqual(a, b) {
 	return true;
 }
 function PrivacyMaskSettings({ deviceId }) {
+	const t = useUiText();
 	const dev = useDeviceProxy(useSystem().trpcClient, deviceId);
 	const [options, setOptions] = useState(null);
 	const [unsupported, setUnsupported] = useState(false);
@@ -144,8 +145,8 @@ function PrivacyMaskSettings({ deviceId }) {
 		id: r.id,
 		shape: r.shape,
 		enabled: r.enabled,
-		label: `Zone ${String(r.id)}`
-	})) : [], [draft]);
+		label: t("uiLibrary.privacyMaskSettings.zoneN", "Zone {{id}}", { id: r.id })
+	})) : [], [draft, t]);
 	const onShapeChange = useCallback((id, shape) => {
 		const next = toPrivacyMaskShape(shape);
 		if (!next) return;
@@ -290,35 +291,27 @@ function PrivacyMaskSettings({ deviceId }) {
 	const ready = !unsupported && !noShapes && !unreadable && options !== null && draft !== null;
 	if (!dev) return null;
 	return /* @__PURE__ */ jsx(WidgetPanel, {
-		title: "Privacy Mask",
+		title: t("uiLibrary.privacyMaskSettings.title", "Privacy Mask"),
 		icon: /* @__PURE__ */ jsx(EyeOff, { className: "h-3.5 w-3.5 text-foreground-subtle" }),
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "flex flex-col gap-3",
 			children: [unsupported || noShapes ? /* @__PURE__ */ jsx("p", {
 				className: `${TEXT_HINT} leading-relaxed`,
-				children: "This camera doesn't support an on-board privacy mask."
+				children: t("uiLibrary.privacyMaskSettings.unsupported", "This camera doesn't support an on-board privacy mask.")
 			}) : unreadable ? /* @__PURE__ */ jsx("p", {
 				className: `${TEXT_HINT} leading-relaxed`,
-				children: "This camera hasn't answered, so what it currently masks is unknown — the editor stays closed rather than showing an empty frame you could save over. A battery camera answers once it wakes; otherwise check that it is reachable."
+				children: t("uiLibrary.privacyMaskSettings.unreadable", "This camera hasn't answered, so what it currently masks is unknown — the editor stays closed rather than showing an empty frame you could save over. A battery camera answers once it wakes; otherwise check that it is reachable.")
 			}) : !ready ? /* @__PURE__ */ jsx("p", {
 				className: `${TEXT_HINT} leading-relaxed`,
-				children: "Loading the camera's privacy mask…"
+				children: t("uiLibrary.privacyMaskSettings.loading", "Loading the camera's privacy mask…")
 			}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
-				/* @__PURE__ */ jsxs("p", {
+				/* @__PURE__ */ jsx("p", {
 					className: `${TEXT_HINT} leading-relaxed`,
-					children: [
-						"Toggle ",
-						/* @__PURE__ */ jsx("strong", {
-							className: "text-foreground",
-							children: "Edit mask"
-						}),
-						" to draw blanked-out zones on the live frame, then ",
-						/* @__PURE__ */ jsx("strong", {
-							className: "text-foreground",
-							children: "Save"
-						}),
-						" to push them to the camera. Drag a rectangle to move, its corner to resize; drag polygon vertices, click an edge midpoint to add one, or right-click a vertex to remove it."
-					]
+					children: /* @__PURE__ */ jsx(UiTrans, {
+						uiKey: "uiLibrary.privacyMaskSettings.help",
+						fallback: "Toggle <0>Edit mask</0> to draw blanked-out zones on the live frame, then <1>Save</1> to push them to the camera. Drag a rectangle to move, its corner to resize; drag polygon vertices, click an edge midpoint to add one, or right-click a vertex to remove it.",
+						components: [/* @__PURE__ */ jsx("strong", { className: "text-foreground" }, "edit"), /* @__PURE__ */ jsx("strong", { className: "text-foreground" }, "save")]
+					})
 				}),
 				/* @__PURE__ */ jsxs("div", {
 					className: "flex items-center gap-2 flex-wrap",
@@ -329,7 +322,7 @@ function PrivacyMaskSettings({ deviceId }) {
 							disabled: saving,
 							"aria-pressed": editing,
 							className: editing ? BTN_PRIMARY : BTN_NEUTRAL,
-							children: editing ? "Done editing" : "Edit mask"
+							children: editing ? t("uiLibrary.privacyMaskSettings.doneEditing", "Done editing") : t("uiLibrary.privacyMaskSettings.editMask", "Edit mask")
 						}),
 						/* @__PURE__ */ jsx("button", {
 							type: "button",
@@ -337,7 +330,7 @@ function PrivacyMaskSettings({ deviceId }) {
 							disabled: saving,
 							"aria-pressed": draft.enabled,
 							className: draft.enabled ? BTN_PRIMARY : BTN_NEUTRAL,
-							children: draft.enabled ? "Mask on" : "Mask off"
+							children: draft.enabled ? t("uiLibrary.privacyMaskSettings.maskOn", "Mask on") : t("uiLibrary.privacyMaskSettings.maskOff", "Mask off")
 						}),
 						supportsRect && /* @__PURE__ */ jsx("button", {
 							type: "button",
@@ -345,8 +338,8 @@ function PrivacyMaskSettings({ deviceId }) {
 							disabled: saving || atCapacity,
 							"aria-pressed": drawingKind === "rect",
 							className: drawingKind === "rect" ? BTN_PRIMARY : BTN_NEUTRAL,
-							title: atCapacity ? "Maximum zones reached" : "Add a rectangle zone",
-							children: "+ Rect"
+							title: atCapacity ? t("uiLibrary.privacyMaskSettings.maxZones", "Maximum zones reached") : t("uiLibrary.privacyMaskSettings.addRect", "Add a rectangle zone"),
+							children: t("uiLibrary.privacyMaskSettings.rectButton", "+ Rect")
 						}),
 						supportsPolygon && /* @__PURE__ */ jsx("button", {
 							type: "button",
@@ -354,17 +347,15 @@ function PrivacyMaskSettings({ deviceId }) {
 							disabled: saving || atCapacity,
 							"aria-pressed": drawingKind === "polygon",
 							className: drawingKind === "polygon" ? BTN_PRIMARY : BTN_NEUTRAL,
-							title: atCapacity ? "Maximum zones reached" : "Add a polygon zone",
-							children: "+ Polygon"
+							title: atCapacity ? t("uiLibrary.privacyMaskSettings.maxZones", "Maximum zones reached") : t("uiLibrary.privacyMaskSettings.addPolygon", "Add a polygon zone"),
+							children: t("uiLibrary.privacyMaskSettings.polygonButton", "+ Polygon")
 						}),
-						/* @__PURE__ */ jsxs("span", {
+						/* @__PURE__ */ jsx("span", {
 							className: `${TEXT_HINT} ml-1 tabular-nums`,
-							children: [
-								activeCount,
-								" / ",
-								maxRegions,
-								" zones"
-							]
+							children: t("uiLibrary.privacyMaskSettings.zoneCount", "{{active}} / {{max}} zones", {
+								active: activeCount,
+								max: maxRegions
+							})
 						}),
 						/* @__PURE__ */ jsx("span", { className: "flex-1" }),
 						/* @__PURE__ */ jsx("button", {
@@ -372,14 +363,14 @@ function PrivacyMaskSettings({ deviceId }) {
 							onClick: revert,
 							disabled: saving || !dirty,
 							className: "rounded-md border border-border bg-surface px-2 py-1 text-[11px] text-foreground-subtle hover:bg-surface-hover disabled:opacity-40 transition-colors",
-							children: "Revert"
+							children: t("uiLibrary.privacyMaskSettings.revert", "Revert")
 						}),
 						/* @__PURE__ */ jsx("button", {
 							type: "button",
 							onClick: () => void save(),
 							disabled: saving || !dirty,
 							className: BTN_PRIMARY,
-							children: saving ? "Saving…" : "Save"
+							children: saving ? t("uiLibrary.privacyMaskSettings.saving", "Saving…") : t("uiLibrary.privacyMaskSettings.save", "Save")
 						})
 					]
 				}),
@@ -397,7 +388,7 @@ function PrivacyMaskSettings({ deviceId }) {
 								className: "flex flex-1 items-center gap-2 text-left text-[11px] font-medium text-foreground-subtle hover:text-foreground disabled:opacity-40 transition-colors",
 								children: [
 									/* @__PURE__ */ jsx(ShapeIcon, { className: "h-3.5 w-3.5 shrink-0" }),
-									/* @__PURE__ */ jsxs("span", { children: ["Zone ", r.id] }),
+									/* @__PURE__ */ jsx("span", { children: t("uiLibrary.privacyMaskSettings.zoneN", "Zone {{id}}", { id: r.id }) }),
 									/* @__PURE__ */ jsx("span", {
 										className: "text-foreground-faint capitalize",
 										children: r.shape.kind
@@ -407,8 +398,8 @@ function PrivacyMaskSettings({ deviceId }) {
 								type: "button",
 								onClick: () => deleteRegion(r.id),
 								disabled: saving,
-								"aria-label": `Delete zone ${String(r.id)}`,
-								title: "Delete zone",
+								"aria-label": t("uiLibrary.privacyMaskSettings.deleteZoneN", "Delete zone {{id}}", { id: r.id }),
+								title: t("uiLibrary.privacyMaskSettings.deleteZone", "Delete zone"),
 								className: "inline-flex h-6 w-6 items-center justify-center rounded border border-border bg-surface text-foreground-subtle hover:border-red-400/40 hover:bg-red-500/10 hover:text-red-400 disabled:opacity-40 transition-colors",
 								children: /* @__PURE__ */ jsx(Trash2, { className: "h-3.5 w-3.5" })
 							})]
@@ -424,15 +415,15 @@ function PrivacyMaskSettings({ deviceId }) {
 					"aria-checked": microphone.on === true,
 					disabled: !microphone.available || pendingAudio !== null,
 					onClick: () => void toggleMicrophone(),
-					title: microphone.on === null ? "Microphone — state unknown; the camera did not answer." : microphone.on ? `The camera is capturing sound. Turning it off: ${microphone.costWhenOff}` : `The camera is silent. ${microphone.costWhenOff}`,
+					title: microphone.on === null ? t("uiLibrary.privacyMaskSettings.micTitleUnknown", "Microphone — state unknown; the camera did not answer.") : microphone.on ? t("uiLibrary.privacyMaskSettings.micTitleOn", "The camera is capturing sound. Turning it off: {{cost}}", { cost: microphone.costWhenOff }) : t("uiLibrary.privacyMaskSettings.micTitleOff", "The camera is silent. {{cost}}", { cost: microphone.costWhenOff }),
 					className: microphone.on === false || microphone.on === null ? BTN_NEUTRAL : BTN_PRIMARY,
 					children: /* @__PURE__ */ jsxs("span", {
 						className: "inline-flex items-center gap-1.5",
-						children: [microphone.on === false ? /* @__PURE__ */ jsx(MicOff, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(Mic, { className: "h-3.5 w-3.5" }), microphone.on === null ? "Microphone unknown" : microphone.on ? "Microphone on" : "Microphone off"]
+						children: [microphone.on === false ? /* @__PURE__ */ jsx(MicOff, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(Mic, { className: "h-3.5 w-3.5" }), microphone.on === null ? t("uiLibrary.privacyMaskSettings.micUnknown", "Microphone unknown") : microphone.on ? t("uiLibrary.privacyMaskSettings.micOn", "Microphone on") : t("uiLibrary.privacyMaskSettings.micOff", "Microphone off")]
 					})
 				}), /* @__PURE__ */ jsx("p", {
 					className: `text-[10px] text-foreground-subtle flex-1 leading-relaxed`,
-					children: audioFailure !== null ? `Write failed: ${audioFailure}` : microphone.on === null ? "The camera did not report its microphone, so this state is unknown." : microphone.costWhenOff
+					children: audioFailure !== null ? t("uiLibrary.privacyMaskSettings.writeFailed", "Write failed: {{reason}}", { reason: audioFailure }) : microphone.on === null ? t("uiLibrary.privacyMaskSettings.micNotReported", "The camera did not report its microphone, so this state is unknown.") : microphone.costWhenOff
 				})]
 			})]
 		})