LogalDeveloper/owncast
0
Fork 0
Code Activity

Add pluralization support to Translation component (#4441)

Browse Source 
* Initial plan

* Add pluralization support to Translation component with comprehensive tests

Co-authored-by: gabek <414923+gabek@users.noreply.github.com>

* Javascript formatting autofixes

* Update web/tests/translation.test.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Update web/components/ui/Translation/Translation.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* fix: linter warning

* Simplify pluralization logic: use original key for plural, only _one for singular

Co-authored-by: gabek <414923+gabek@users.noreply.github.com>

* feat(i18n): fix support for nested namespace string and key extraction

* chore: update extracted translations

* fix(i18n): fix linter warnings in extraction script

* Update web/scripts/i18n-extract.js

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* feat(i18n): sort translation keys

* fix(i18n): fix linter warnings

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: gabek <414923+gabek@users.noreply.github.com>
Co-authored-by: Owncast <owncast@owncast.online>
Co-authored-by: Gabe Kangas <gabek@real-ity.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
This commit is contained in:
Copilot
2025-07-13 17:34:06 -07:00
committed by GitHub
co-authored by gabek Copilot copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Owncast Gabe Kangas
parent 1fd86fa190
commit 59b905649e
9 changed files with 392 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/components/ui/Translation/Translation.tsx
+25 -2
View File
@@ -8,6 +8,7 @@ export interface TranslationProps {
vars?: Record<string, any>;
className?: string;
defaultText?: string;
count?: number;
}
export const Translation: FC<TranslationProps> = ({
@@ -15,10 +16,32 @@ export const Translation: FC<TranslationProps> = ({
vars,
className,
defaultText,
count,
}) => {
const { t } = useTranslation();
let translatedText = t(translationKey, vars);
// Include count in vars for interpolation
const allVars = count !== undefined ? { ...vars, count } : vars;
let translatedText;
if (count !== undefined) {
if (count === 1) {
// For singular, try _one key first, fall back to original key
const singularKey = `${translationKey}_one`;
translatedText = t(singularKey, allVars);
// Fall back to original key if _one key doesn't exist
if (translatedText === singularKey) {
translatedText = t(translationKey, allVars);
}
} else {
// For plural, always use the original key (no _other suffix needed)
translatedText = t(translationKey, allVars);
}
} else {
translatedText = t(translationKey, allVars);
}
// Use fallback if translation is missing (returns the key itself)
if (translatedText === translationKey && defaultText) {
@@ -26,7 +49,7 @@ export const Translation: FC<TranslationProps> = ({
// Interpolate variables manually into defaultText
// eslint-disable-next-line no-restricted-syntax
for (const [k, v] of Object.entries(vars || {})) {
for (const [k, v] of Object.entries(allVars || {})) {
const regex = new RegExp(`{{\\s*${k}\\s*}}`, 'g');
translatedText = translatedText.replace(regex, String(v));
}