refactor: consolidate English translations (#6640)

packages/widgets/src/media-transcoding/health-check-status.tsx

@@ -15,6 +15,7 @@ interface HealthCheckStatusProps {
 export function HealthCheckStatus(props: HealthCheckStatusProps) {
   const colorScheme = useColorScheme();
   const t = useI18n("widget.mediaTranscoding.healthCheck");
+  const tCommon = useI18n("widget.mediaTranscoding.panel.common");
 
   const indicatorColor = props.statistics.failedHealthCheckCount
     ? "red"
@@ -25,7 +26,7 @@ export function HealthCheckStatus(props: HealthCheckStatusProps) {
   return (
     <Popover position="bottom" width={250} shadow="sm" withArrow>
       <Popover.Target>
-        <ActionIcon className={actionTargetClasses.root} variant="subtle" size="sm" aria-label={t("title")}>
+        <ActionIcon className={actionTargetClasses.root} variant="subtle" size="sm" aria-label={tCommon("healthCheck")}>
           <Indicator color={textColor(indicatorColor, colorScheme)} size={6} display="flex">
             <IconHeartbeat size="var(--mantine-font-size-md)" />
           </Indicator>
@@ -39,7 +40,7 @@ export function HealthCheckStatus(props: HealthCheckStatusProps) {
         <Stack gap="sm" align="center">
           <Group gap="xs">
             <IconHeartbeat size="var(--mantine-font-size-lg)" />
-            <Text size="sm">{t("title")}</Text>
+            <Text size="sm">{tCommon("healthCheck")}</Text>
           </Group>
           <Divider
             style={{

packages/widgets/src/media-transcoding/panels/queue.panel.tsx

@@ -26,11 +26,12 @@ export function QueuePanel(props: QueuePanelProps) {
   const { queue } = props;
 
   const t = useI18n("widget.mediaTranscoding.panel.queue");
+  const tCommon = useI18n("widget.mediaTranscoding.panel.common");
 
   if (queue.array.length === 0) {
     return (
       <Center style={{ flex: "1" }}>
-        <Title order={6}>{t("empty")}</Title>
+        <Title order={6}>{tCommon("empty")}</Title>
       </Center>
     );
   }
@@ -42,7 +43,7 @@ export function QueuePanel(props: QueuePanelProps) {
           <TableTr>
             <TableTh ta="start" py={4}>
               <Text size="xs" fw="bold">
-                {t("table.file")}
+                {tCommon("file")}
               </Text>
             </TableTh>
             <TableTh ta="start" py={4}>
@@ -58,11 +59,11 @@ export function QueuePanel(props: QueuePanelProps) {
               <TableTd py={2}>
                 <Group gap={4} wrap="nowrap">
                   {item.type === "transcode" ? (
-                    <Tooltip label={t("table.transcode")}>
+                    <Tooltip label={tCommon("transcode")}>
                       <IconTransform size="var(--mantine-font-size-xs)" style={{ flexShrink: 0 }} />
                     </Tooltip>
                   ) : (
-                    <Tooltip label={t("table.healthCheck")}>
+                    <Tooltip label={tCommon("healthCheck")}>
                       <IconHeartbeat size="var(--mantine-font-size-xs)" style={{ flexShrink: 0 }} />
                     </Tooltip>
                   )}

packages/widgets/src/media-transcoding/panels/statistics.panel.tsx

@@ -16,6 +16,7 @@ interface StatisticsPanelProps {
 
 export function StatisticsPanel(props: StatisticsPanelProps) {
   const t = useI18n("widget.mediaTranscoding.panel.statistics");
+  const tCommon = useI18n("widget.mediaTranscoding.panel.common");
 
   const allLibs = props.statistics;
 
@@ -23,7 +24,7 @@ export function StatisticsPanel(props: StatisticsPanelProps) {
   if (!(allLibs.totalFileCount > 0)) {
     return (
       <Center style={{ flex: "1" }}>
-        <Title order={6}>{t("empty")}</Title>
+        <Title order={6}>{tCommon("empty")}</Title>
       </Center>
     );
   }
@@ -31,10 +32,14 @@ export function StatisticsPanel(props: StatisticsPanelProps) {
   return (
     <ScrollArea h="100%">
       <Group wrap="wrap" justify="center" p={4} w="100%" gap="xs">
-        <StatisticItem icon={IconTransform} label={t("transcodesCount")} value={props.statistics.totalTranscodeCount} />
+        <StatisticItem
+          icon={IconTransform}
+          label={tCommon("transcodes")}
+          value={props.statistics.totalTranscodeCount}
+        />
         <StatisticItem
           icon={IconHeartbeat}
-          label={t("healthChecksCount")}
+          label={tCommon("healthChecks")}
           value={props.statistics.totalHealthCheckCount}
         />
         <StatisticItem icon={IconFileDescription} label={t("filesCount")} value={props.statistics.totalFileCount} />
@@ -45,8 +50,8 @@ export function StatisticsPanel(props: StatisticsPanelProps) {
         />
       </Group>
       <Group justify="center" wrap="wrap" grow>
-        <StatisticRingProgress items={allLibs.transcodeStatus} label={t("transcodes")} />
-        <StatisticRingProgress items={allLibs.healthCheckStatus} label={t("healthChecks")} />
+        <StatisticRingProgress items={allLibs.transcodeStatus} label={tCommon("transcodes")} />
+        <StatisticRingProgress items={allLibs.healthCheckStatus} label={tCommon("healthChecks")} />
         <StatisticRingProgress items={allLibs.videoCodecs} label={t("videoCodecs")} />
         <StatisticRingProgress items={allLibs.videoContainers} label={t("videoContainers")} />
         <StatisticRingProgress items={allLibs.videoResolutions} label={t("videoResolutions")} />

packages/widgets/src/media-transcoding/panels/workers.panel.tsx

@@ -25,11 +25,12 @@ interface WorkersPanelProps {
 
 export function WorkersPanel(props: WorkersPanelProps) {
   const t = useI18n("widget.mediaTranscoding.panel.workers");
+  const tCommon = useI18n("widget.mediaTranscoding.panel.common");
 
   if (props.workers.length === 0) {
     return (
       <Center style={{ flex: "1" }}>
-        <Title order={6}>{t("empty")}</Title>
+        <Title order={6}>{tCommon("empty")}</Title>
       </Center>
     );
   }
@@ -41,7 +42,7 @@ export function WorkersPanel(props: WorkersPanelProps) {
           <TableTr>
             <TableTh ta="start" py={4}>
               <Text size="xs" fw="bold">
-                {t("table.file")}
+                {tCommon("file")}
               </Text>
             </TableTh>
             <TableTh ta="start" py={4} w={50}>
@@ -65,11 +66,11 @@ export function WorkersPanel(props: WorkersPanelProps) {
                   <Group gap="xs" wrap="nowrap">
                     <div>
                       {worker.jobType === "transcode" ? (
-                        <Tooltip label={t("table.transcode")}>
+                        <Tooltip label={tCommon("transcode")}>
                           <IconTransform size="var(--mantine-font-size-sm)" style={{ flexShrink: 0 }} />
                         </Tooltip>
                       ) : (
-                        <Tooltip label={t("table.healthCheck")}>
+                        <Tooltip label={tCommon("healthCheck")}>
                           <IconHeartbeat size="var(--mantine-font-size-sm)" style={{ flexShrink: 0 }} />
                         </Tooltip>
                       )}