AletheiaFact / AletheiaFact/aletheia
i18n: Support dynamic translation for Lottie animation text layers
- Vorherrschende Sprache
- TypeScript
- Sterne
- 55
- Forks
- 20
- Ø Merge
- 2 T. 6 Std.
- Gemergte PRs (30 T.)
- 2
Beschreibung
### Background Information:
The `ReviewedImage` component renders animations through the `generateLottie` function. Currently, these animations display labels like "Trustworthy" or "Misleading" based on hardcoded strings within the Lottie JSON files. Even though the project uses `next-i18next`, the text inside these animations remains in English because it is part of the animation's internal data structure, which is currently not connected to the application's translation context.
### How:
The proposed approach is to bridge the gap between the `next-i18next` hook and the animation generation logic:
* **Localization Mapping:** Centralize the classification labels in the translation files (e.g., `common.json`) using the existing Enum keys.
* **Dynamic Injection:** Update the `ReviewedImage` component to retrieve the translated string using the `useTranslation` hook.
* **Layer Manipulation:** Pass this translated string into the animation generation flow. The logic should attempt to intercept the Lottie JSON object and look for specific "Text Layers" (usually identified by a specific type in the JSON structure) to overwrite their content before the animation is initialized by the player.
* **Reactive Updates:** Ensure that the animation is flagged to re-render or re-generate whenever the translation function changes (due to a language switch).
### Expected Behavior:
The text displayed inside the Lottie animation should reflect the language selected by the user in the application, ensuring a fully localized experience.
Beitragsleitfaden
Für dieses Repository ist kein Beitragsleitfaden indexiert
Bewertung
Dieses Issue wurde noch nicht bewertet.