- {props.value?.display_name ?? NO_CAMERA} + {props.value?.display_name ?? t(NO_CAMERA)}
{showHiddenIndicator() && (
@@ -147,7 +149,7 @@ export function CameraSelectBase(props: {
onClick={openCameraWindow}
onPointerDown={(e) => e.stopPropagation()}
class="flex items-center justify-center px-2 py-1 rounded-full bg-gray-6 text-gray-11 hover:bg-gray-7 transition-colors"
- title="Show camera preview"
+ title={t("Show camera preview")}
>
+
- Recording Modes
+
+ {t("Recording Modes")}
+
@@ -105,10 +109,10 @@ export default function ModeInfoPanel(props: ModeInfoPanelProps) {
isSelected() ? "text-blue-11" : "text-gray-12",
)}
>
- {option.title}
+ {t(option.titleKey)}
- {option.description} + {t(option.descriptionKey)}
{rawOptions.captureSystemAudio - ? "Record System Audio" - : "No System Audio"} + ? t("Record System Audio") + : t("No System Audio")}
-
+
-
-
+
void; label: string }) {
}
export default function TargetMenuGrid(props: TargetMenuGridProps) {
+ const { t } = useI18n();
const items = createMemo(() => props.targets ?? []);
const skeletonItems = createMemo(() =>
Array.from({ length: props.skeletonCount ?? DEFAULT_SKELETON_COUNT }),
@@ -178,11 +180,13 @@ export default function TargetMenuGrid(props: TargetMenuGridProps) {
return (
(props: {
value: T | null;
@@ -10,6 +11,7 @@ export default function TargetSelectInfoPill(props: {
ComponentProps<"button"> & { variant: "blue" | "red" }
>;
}) {
+ const { t } = useI18n();
return (
(props: {
}}
>
{!props.permissionGranted
- ? "Request Permission"
+ ? t("Request Permission")
: props.value !== null
- ? "On"
- : "Off"}
+ ? t("On")
+ : t("Off")}
);
}
diff --git a/apps/desktop/src/routes/(window-chrome)/new-main/index.tsx b/apps/desktop/src/routes/(window-chrome)/new-main/index.tsx
index c3496b4c99..0fe6cff494 100644
--- a/apps/desktop/src/routes/(window-chrome)/new-main/index.tsx
+++ b/apps/desktop/src/routes/(window-chrome)/new-main/index.tsx
@@ -33,6 +33,7 @@ import { Transition } from "solid-transition-group";
import Mode from "~/components/Mode";
import { RecoveryToast } from "~/components/RecoveryToast";
import Tooltip from "~/components/Tooltip";
+import { useI18n } from "~/i18n";
import { Input } from "~/routes/editor/ui";
import { authStore } from "~/store";
import { createSignInMutation } from "~/utils/auth";
@@ -174,31 +175,32 @@ type SharedTargetMenuProps = {
};
function TargetMenuPanel(props: TargetMenuPanelProps & SharedTargetMenuProps) {
+ const { t } = useI18n();
const [search, setSearch] = createSignal("");
const trimmedSearch = createMemo(() => search().trim());
const normalizedQuery = createMemo(() => trimmedSearch().toLowerCase());
const placeholder =
props.variant === "display"
- ? "Search displays"
+ ? t("Search displays")
: props.variant === "window"
- ? "Search windows"
+ ? t("Search windows")
: props.variant === "recording"
- ? "Search recordings"
- : "Search screenshots";
+ ? t("Search recordings")
+ : t("Search screenshots");
const noResultsMessage =
props.variant === "display"
- ? "No matching displays"
+ ? t("No matching displays")
: props.variant === "window"
- ? "No matching windows"
+ ? t("No matching windows")
: props.variant === "recording"
- ? "No matching recordings"
- : "No matching screenshots";
+ ? t("No matching recordings")
+ : t("No matching screenshots");
const handleImport = async () => {
const result = await dialog.open({
filters: [
{
- name: "Video Files",
+ name: t("Video Files"),
extensions: ["mp4", "mov", "avi", "mkv", "webm", "wmv", "m4v", "flv"],
},
],
@@ -213,8 +215,10 @@ function TargetMenuPanel(props: TargetMenuPanelProps & SharedTargetMenuProps) {
} catch (e) {
console.error("Failed to import video:", e);
await dialog.message(
- `Failed to import video: ${e instanceof Error ? e.message : String(e)}`,
- { title: "Import Error", kind: "error" },
+ t("Failed to import video: {error}", {
+ error: e instanceof Error ? e.message : String(e),
+ }),
+ { title: t("Import Error"), kind: "error" },
);
}
}
@@ -287,7 +291,7 @@ function TargetMenuPanel(props: TargetMenuPanelProps & SharedTargetMenuProps) {
focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-9 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-1"
>
{props.emptyMessage ??
(props.variant === "display"
- ? "No displays found"
- : "No windows found")}
+ ? t("No displays found")
+ : t("No windows found"))}
);
};
@@ -377,7 +383,7 @@ export default function TargetMenuGrid(props: TargetMenuGridProps) {
{(onViewAll) => (
@@ -319,7 +323,7 @@ function TargetMenuPanel(props: TargetMenuPanelProps & SharedTargetMenuProps) {
onClick={handleImport}
>
@@ -392,7 +396,9 @@ export default function () {
}
let hasChecked = false;
-function createUpdateCheck() {
+function createUpdateCheck(
+ t: (key: string, vars?: Record toggleTargetMode("window")}
- name="Window"
+ name={t("Window")}
class="flex-1 rounded-none focus-visible:ring-0 focus-visible:ring-offset-0"
/>
- Settings}>
+ {t("Settings")}}>
- Screenshots}>
+ {t("Screenshots")}}>
- Recordings}>
+ {t("Recordings")}}>
)}
@@ -120,10 +122,10 @@ export default function Settings(props: RouteSectionProps) {
variant={auth.data ? "gray" : "dark"}
class="w-full"
>
- Sign Out
+ {t("Sign Out")}
) : (
-
- New
+ {t("New")}
- Version {entry.version} -{" "}
+ {t("Version {version}", { version: entry.version })} -{" "}
{new Date(entry.publishedAt).toLocaleDateString()}
- Experimental Features + {t("Experimental Features")}
- These features are still in development and may not work as - expected. + {t( + "These features are still in development and may not work as expected.", + )}
-
handleChange("custom_cursor_capture2", value)
@@ -64,8 +69,10 @@ function Inner(props: { initialStore: GeneralSettingsStore | null }) {
/>
{type() !== "windows" && (
handleChange("enableNativeCameraPreview", value)
@@ -73,8 +80,10 @@ function Inner(props: { initialStore: GeneralSettingsStore | null }) {
/>
)}
{
handleChange("autoZoomOnClicks", value);
diff --git a/apps/desktop/src/routes/(window-chrome)/settings/feedback.tsx b/apps/desktop/src/routes/(window-chrome)/settings/feedback.tsx
index dde7ede637..e3061883ae 100644
--- a/apps/desktop/src/routes/(window-chrome)/settings/feedback.tsx
+++ b/apps/desktop/src/routes/(window-chrome)/settings/feedback.tsx
@@ -5,6 +5,7 @@ import { type as ostype } from "@tauri-apps/plugin-os";
import { createResource, createSignal, For, Show } from "solid-js";
import toast from "solid-toast";
+import { useI18n } from "~/i18n";
import { commands, type SystemDiagnostics } from "~/utils/tauri";
import { apiClient, protectedHeaders } from "~/utils/web-api";
@@ -28,6 +29,7 @@ async function fetchDiagnostics(): Promise {
}
export default function FeedbackTab() {
+ const { t } = useI18n();
const [feedback, setFeedback] = createSignal("");
const [uploadingLogs, setUploadingLogs] = createSignal(false);
const [diagnostics] = createResource(fetchDiagnostics);
@@ -39,9 +41,9 @@ export default function FeedbackTab() {
setUploadingLogs(true);
try {
await commands.uploadLogs();
- toast.success("Logs uploaded successfully");
+ toast.success(t("Logs uploaded successfully"));
} catch (error) {
- toast.error("Failed to upload logs");
+ toast.error(t("Failed to upload logs"));
console.error("Failed to upload logs:", error);
} finally {
setUploadingLogs(false);
@@ -53,10 +55,13 @@ export default function FeedbackTab() {
- Loading system information...
+ {t("Loading system information...")}
}
>
@@ -167,7 +176,7 @@ export default function FeedbackTab() {
{(ver) => (
0}>
diff --git a/apps/desktop/src/routes/(window-chrome)/settings/general.tsx b/apps/desktop/src/routes/(window-chrome)/settings/general.tsx
index 4ba8d8c8a5..3717c1e9f6 100644
--- a/apps/desktop/src/routes/(window-chrome)/settings/general.tsx
+++ b/apps/desktop/src/routes/(window-chrome)/settings/general.tsx
@@ -24,6 +24,7 @@ import { createStore, reconcile } from "solid-js/store";
import themePreviewAuto from "~/assets/theme-previews/auto.jpg";
import themePreviewDark from "~/assets/theme-previews/dark.jpg";
import themePreviewLight from "~/assets/theme-previews/light.jpg";
+import { type Locale, localeOptions, useI18n } from "~/i18n";
import { Input } from "~/routes/editor/ui";
import { authStore, generalSettingsStore } from "~/store";
import {
@@ -41,8 +42,8 @@ import IconLucidePlus from "~icons/lucide/plus";
import IconLucideX from "~icons/lucide/x";
import { SettingItem, ToggleSettingItem } from "./Setting";
-const getExclusionPrimaryLabel = (entry: WindowExclusion) =>
- entry.ownerName ?? entry.windowTitle ?? entry.bundleIdentifier ?? "Unknown";
+const getExclusionPrimaryLabel = (entry: WindowExclusion, fallback: string) =>
+ entry.ownerName ?? entry.windowTitle ?? entry.bundleIdentifier ?? fallback;
const getExclusionSecondaryLabel = (entry: WindowExclusion) => {
if (entry.ownerName && entry.windowTitle) {
@@ -128,18 +129,19 @@ function AppearanceSection(props: {
currentTheme: AppTheme;
onThemeChange: (theme: AppTheme) => void;
}) {
+ const { t } = useI18n();
const options = [
{
id: "system",
- name: "System",
+ name: t("System"),
},
{
id: "light",
- name: "Light",
+ name: t("Light"),
},
{
id: "dark",
- name: "Dark",
+ name: t("Dark"),
},
] satisfies { id: AppTheme; name: string }[];
@@ -152,14 +154,16 @@ function AppearanceSection(props: {
return (
Recording Features
+{t("Recording Features")}
-
Send Feedback
++ {t("Send Feedback")} +
- Help us improve Cap by submitting feedback or reporting bugs. - We'll get right on it. + {t( + "Help us improve Cap by submitting feedback or reporting bugs. We'll get right on it.", + )}
- Join the Community + {t("Join the Community")}
- Have questions, want to share ideas, or just hang out? Join the - Cap Discord community. + {t( + "Have questions, want to share ideas, or just hang out? Join the Cap Discord community.", + )}
- Debug Information + {t("Debug Information")}
- Upload your logs to help us diagnose issues with Cap. No personal - information is included. + {t( + "Upload your logs to help us diagnose issues with Cap. No personal information is included.", + )}
- System Information + {t("System Information")}
- Operating System + {t("Operating System")}
{ver().displayName} @@ -177,7 +186,9 @@ export default function FeedbackTab() {
-
@@ -195,7 +208,7 @@ export default function FeedbackTab() {
Capture Support
++ {t("Capture Support")} +
- Screen Capture:{" "}
- {captureSupported ? "Supported" : "Not Supported"}
+ {t("Screen Capture")}:{" "}
+ {captureSupported
+ ? t("Supported")
+ : t("Not Supported")}
- Available Encoders + {t("Available Encoders")}
-
General Settings
++ {t("General Settings")} +
e.preventDefault()}
>
-
{(theme) => (
@@ -179,7 +183,9 @@ function AppearanceSection(props: {
props.currentTheme !== theme.id,
},
)}
- aria-label={`Select theme: ${theme.name}`}
+ aria-label={t("Select theme: {theme}", {
+ theme: theme.name,
+ })}
>
@@ -188,7 +194,9 @@ function AppearanceSection(props: {
class="animate-in fade-in duration-300"
draggable={false}
src={preview}
- alt={`Preview of ${theme.name} theme`}
+ alt={t("Preview of {theme} theme", {
+ theme: theme.name,
+ })}
/>
)}
@@ -213,6 +221,7 @@ function AppearanceSection(props: {
}
function Inner(props: { initialStore: GeneralSettingsStore | null }) {
+ const { t, locale, setLocale } = useI18n();
const [settings, setSettings] = createStore(
deriveInitialSettings(props.initialStore),
);
@@ -245,6 +254,11 @@ function Inner(props: { initialStore: GeneralSettingsStore | null }) {
const ostype: OsType = type();
const excludedWindows = createMemo(() => settings.excludedWindows ?? []);
+ const languageOptions = () =>
+ localeOptions.map((option) => ({
+ text: t(option.label),
+ value: option.value,
+ }));
const matchesExclusion = (
exclusion: WindowExclusion,
@@ -351,7 +365,8 @@ function Inner(props: { initialStore: GeneralSettingsStore | null }) {
| MainWindowRecordingStartBehaviour
| PostStudioRecordingBehaviour
| PostDeletionBehaviour
- | number,
+ | number
+ | Locale,
>(props: {
label: string;
description: string;
@@ -403,18 +418,31 @@ function Inner(props: { initialStore: GeneralSettingsStore | null }) {
generalSettingsStore.set({ theme: newTheme });
}}
/>
+
+ setLocale(value)}
+ options={languageOptions()}
+ />
+
{ostype === "macos" && (
-
+
handleChange("hideDockIcon", !v)}
/>
{
if (value) {
@@ -445,10 +473,12 @@ function Inner(props: { initialStore: GeneralSettingsStore | null }) {
)}
-
+
handleChange("instantModeMaxResolution", value)
@@ -459,98 +489,113 @@ function Inner(props: { initialStore: GeneralSettingsStore | null }) {
}))}
/>
handleChange("recordingCountdown", value)}
options={[
- { text: "Off", value: 0 },
- { text: "3 seconds", value: 3 },
- { text: "5 seconds", value: 5 },
- { text: "10 seconds", value: 10 },
+ { text: t("Off"), value: 0 },
+ { text: t("3 seconds"), value: 3 },
+ { text: t("5 seconds"), value: 5 },
+ { text: t("10 seconds"), value: 10 },
]}
/>
handleChange("mainWindowRecordingStartBehaviour", value)
}
options={[
- { text: "Close", value: "close" },
- { text: "Minimise", value: "minimise" },
+ { text: t("Close"), value: "close" },
+ { text: t("Minimise"), value: "minimise" },
]}
/>
handleChange("postStudioRecordingBehaviour", value)
}
options={[
- { text: "Open editor", value: "openEditor" },
+ { text: t("Open editor"), value: "openEditor" },
{
- text: "Show in overlay",
+ text: t("Show in overlay"),
value: "showOverlay",
},
]}
/>
handleChange("postDeletionBehaviour", value)}
options={[
- { text: "Do Nothing", value: "doNothing" },
+ { text: t("Do Nothing"), value: "doNothing" },
{
- text: "Reopen Recording Window",
+ text: t("Reopen Recording Window"),
value: "reopenRecordingWindow",
},
]}
/>
handleChange("deleteInstantRecordingsAfterUpload", v)
}
/>
handleChange("crashRecoveryRecording", value)}
/>
handleChange("maxFps", value)}
options={MAX_FPS_OPTIONS.map((option) => ({
- text: option.label,
+ text:
+ option.value === 60
+ ? t("60 FPS (Recommended)")
+ : option.label,
value: option.value,
}))}
/>
{(settings.maxFps ?? 60) > 60 && (
handleChange("disableAutoOpenLinks", !v)}
/>
@@ -582,7 +627,10 @@ function Inner(props: { initialStore: GeneralSettingsStore | null }) {
if (
!(await confirm(
- `Are you sure you want to change the server URL to '${origin}'? You will need to sign in again.`,
+ t(
+ "Are you sure you want to change the server URL to '{origin}'? You will need to sign in again.",
+ { origin },
+ ),
))
)
return;
@@ -616,15 +664,18 @@ function ServerURLSetting(props: {
value: string;
onChange: (v: string) => void;
}) {
+ const { t } = useI18n();
const [value, setValue] = createWritableMemo(() => props.value);
return (
Appearance
+{t("Appearance")}
- ⚠️ Higher framerates may cause frame drops or increased CPU usage - on some systems. + ⚠️{" "} + {t( + "Higher framerates may cause frame drops or increased CPU usage on some systems.", + )}
)}
-
@@ -652,6 +703,7 @@ function DefaultProjectNameCard(props: {
value: string | null;
onChange: (name: string | null) => Promise;
}) {
+ const { t } = useI18n();
const MOMENT_EXAMPLE_TEMPLATE = "{moment:DDDD, MMMM D, YYYY h:mm A}";
const macos = type() === "macos";
const today = new Date();
@@ -715,7 +767,7 @@ function DefaultProjectNameCard(props: {
return (
Self host
+{t("Self host")}
props.onChange(value())}
>
- Update
+ {t("Update")}