AletheiaFact / AletheiaFact/aletheia

i18n: Support dynamic translation for Lottie animation text layers

オープン
#2,211 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る
tech-debt
主要言語
TypeScript
スター
55
フォーク
20
平均マージ
2日 6時間
マージ済み PR(30日)
2

説明

### 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.

Image

### 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.

コントリビューションガイド

このリポジトリのコントリビューションガイドは索引されていません

評価

この issue はまだ評価されていません。

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。