Added translations to the audio latency test dialog (#212)

* Added translations to the audio latency test dialog

* feat: add the `{key}` placeholder

---------

Co-authored-by: apoint123 <108002475+apoint123@users.noreply.github.com>

Author: BajekekButLost

locales/en-US/translation.json

@@ -333,6 +333,25 @@
 			"workerError": "Error processing audio"
 		}
 	},
+	"latencyTestDialog": {
+		"title": "Timing Offset Latency Test",
+		"description": "Choose your preferred BPM, then press the {key} key on each beep to measure the audio and input latency.",
+		"latencyDisplay": {
+			"fastest": "Fastest",
+			"current": {
+				"none": "Not Measured",
+				"fast": "Early",
+				"slow": "Late",
+				"perfect": "Perfect"
+			},
+			"slowest": "Slowest"
+		},
+		"bpmInputLabel": "Tempo (BPM)",
+		"button": {
+			"start": "Start",
+			"stop": "Stop"
+		}
+	},
 	"lrclib": {
 		"searchError": "Search failed, please check network or try again later",
 		"importError": "Error occurred while importing lyrics",

locales/zh-CN/translation.json

@@ -197,8 +197,7 @@
 			"rubySegment": "注音分词",
 			"advancedSegment": "高级分词...",
 			"syncLineTimestamps": "同步行时间戳",
-			"perWordRomanization": 
-			{
+			"perWordRomanization": {
 				"index": "逐字音译",
 				"check": "检查逐字音译一致性",
 				"distribute": "自动分配罗马音...",
@@ -332,6 +331,25 @@
 			"workerError": "处理音频时出错"
 		}
 	},
+	"latencyTestDialog": {
+		"title": "打轴延迟测试",
+		"description": "请选择自己喜欢的 BPM，并在每个蜂鸣声响起时按下 {key} 键，以测量音频/输入延迟差",
+		"latencyDisplay": {
+			"fastest": "最快延迟",
+			"current": {
+				"none": "未测量",
+				"fast": "快",
+				"slow": "慢",
+				"perfect": "完美"
+			},
+			"slowest": "最慢延迟"
+		},
+		"bpmInputLabel": "节拍 BPM",
+		"button": {
+			"start": "开始",
+			"stop": "结束"
+		}
+	},
 	"lrclib": {
 		"searchError": "搜索失败，请检查网络或稍后重试",
 		"importError": "导入歌词时发生错误",

src/modules/audio/modals/LatencyTest.tsx

@@ -1,6 +1,8 @@
 import { Button, Dialog, Flex, Text, TextField } from "@radix-ui/themes";
 import { useAtom, useAtomValue } from "jotai";
 import { memo, useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { KeyBinding } from "$/components/KeyBinding";
 import { audioEngine } from "$/modules/audio/audio-engine";
 import {
 	latencyTestBPMAtom,
@@ -41,6 +43,7 @@ export const LatencyTestDialog = memo(() => {
 	const hitOffsetsRef = useRef<number[]>([]);
 	const visualizerRef = useRef<HTMLCanvasElement>(null);
 	const beepDuration = 1000 / (latencyBPM / 60);
+	const { t } = useTranslation();
 
 	useEffect(() => {
 		if (!start || !dialogOpen) {
@@ -199,11 +202,18 @@ export const LatencyTestDialog = memo(() => {
 	return (
 		<Dialog.Root open={dialogOpen} onOpenChange={setDialogOpen}>
 			<Dialog.Content>
-				<Dialog.Title>打轴延迟测试</Dialog.Title>
+				<Dialog.Title>
+					{t("latencyTestDialog.title", "打轴延迟测试")}
+				</Dialog.Title>
 				<Flex direction="column" gap="2">
 					<Text>
-						请选择自己喜欢的
-						BPM，并在每个蜂鸣声响起时按下打轴按键，以测量音频/输入延迟差
+						{t(
+							"latencyTestDialog.description",
+							"请选择自己喜欢的 BPM，并在每个蜂鸣声响起时按下 {key} 键，以测量音频/输入延迟差",
+							{
+								key: <KeyBinding kbdAtom={keySyncNextAtom} />,
+							},
+						)}
 					</Text>
 
 					<Flex
@@ -225,7 +235,9 @@ export const LatencyTestDialog = memo(() => {
 						}}
 					>
 						<Text>
-							{hitOffset === null ? "最快延迟" : `${hitOffset.max}ms`}
+							{hitOffset === null
+								? t("latencyTestDialog.latencyDisplay.fastest", "最快延迟")
+								: `${hitOffset.max}ms`}
 						</Text>
 
 						<Text
@@ -240,16 +252,23 @@ export const LatencyTestDialog = memo(() => {
 							}
 						>
 							{hitOffset === null
-								? "未测量"
+								? t("latencyTestDialog.latencyDisplay.current.none", "未测量")
 								: hitOffset.cur > 0
-									? `快 ${hitOffset.cur}ms`
+									? t("latencyTestDialog.latencyDisplay.current.fast", "快") +
+										` ${hitOffset.cur}ms`
 									: hitOffset.cur < 0
-										? `慢 ${hitOffset.cur}ms`
-										: "完美 0ms"}
+										? t("latencyTestDialog.latencyDisplay.current.slow", "慢") +
+											` ${hitOffset.cur}ms`
+										: t(
+												"latencyTestDialog.latencyDisplay.current.perfect",
+												"完美",
+											) + " 0ms"}
 						</Text>
 
 						<Text>
-							{hitOffset === null ? "最慢延迟" : `${-hitOffset.min}ms`}
+							{hitOffset === null
+								? t("latencyTestDialog.latencyDisplay.slowest", "最慢延迟")
+								: `${-hitOffset.min}ms`}
 						</Text>
 					</Flex>
 
@@ -267,7 +286,7 @@ export const LatencyTestDialog = memo(() => {
 
 					<Text as="label" size="2">
 						<Flex direction="column" gap="2">
-							节拍 BPM
+							{t("latencyTestDialog.bpmInputLabel", "节拍 BPM")}
 							<TextField.Root
 								type="number"
 								min={60}
@@ -280,7 +299,9 @@ export const LatencyTestDialog = memo(() => {
 
 					<Flex gap="2">
 						<Button onClick={() => setStart((v) => !v)}>
-							{start ? "结束" : "开始"}
+							{start
+								? t("latencyTestDialog.button.stop", "结束")
+								: t("latencyTestDialog.button.start", "开始")}
 						</Button>
 					</Flex>
 				</Flex>