AletheiaFact / AletheiaFact/aletheia
i18n: Support dynamic translation for Lottie animation text layers
- Ngôn ngữ chính
- TypeScript
- Star
- 55
- Fork
- 20
- Merge trung bình
- 2 ngày 6 giờ
- Pull request đã merge (30 ngày)
- 2
Mô tả
### 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.
Hướng dẫn đóng góp
Chưa lập chỉ mục được hướng dẫn đóng góp cho kho mã nguồn này
Đánh giá
Issue này chưa được đánh giá.