aboutsummaryrefslogtreecommitdiffstats
path: root/src/features
diff options
context:
space:
mode:
Diffstat (limited to 'src/features')
-rw-r--r--src/features/messages.js148
1 files changed, 143 insertions, 5 deletions
diff --git a/src/features/messages.js b/src/features/messages.js
index 2097a5a..8596f23 100644
--- a/src/features/messages.js
+++ b/src/features/messages.js
@@ -43,7 +43,8 @@ import { hexToBytes, bytesToHex } from '@noble/hashes/utils';
import { sha256 } from '@noble/hashes/sha256';
import { base64urlnopad } from '@scure/base';
import { t, getLang } from '../i18n.js';
-import { inLanguage, isMachinePost } from '../lang-guess.js';
+import { inLanguage, isMachinePost, guessLang } from '../lang-guess.js';
+import { translatePieces } from '../translate-split.js';
import { animateZap, warmZapSound } from '../zap-animation.js';
import { SIGNER_SILENT } from '../dm.js';
import { cacheStorage, onCacheReady, cacheIsReady } from '../cache-store.js';
@@ -4049,6 +4050,126 @@ export function messagesFeature(ctx) {
}
}
+ // ---- translation ----------------------------------------------------------
+ // A post in a language other than the app's is shown in the app's, the way
+ // Amethyst does it: "Translated from Spanish · Show original". The
+ // browser's own on-device translator does it when it has the language pair
+ // ready (desktop Chrome); otherwise the registrar's LibreTranslate, cached
+ // there by text. Automatic for posts we can tell are foreign (a Settings
+ // switch); Translate in ⋯ for the ones the guess misses.
+ const TRANSLATE_API = 'https://names.coinos.io/translate';
+ const TRANSLATE_KEEP = 300;
+ const AUTO_TRANSLATE_KEY = 'coinos-auto-translate';
+ const autoTranslateOn = () => { try { return localStorage.getItem(AUTO_TRANSLATE_KEY) !== '0'; } catch { return true; } };
+ const translations = new Map(); // key -> { text, source } (done) — remembered
+ const translating = new Map(); // key -> 'loading' | 'fail'
+ const transOriginal = new Set(); // keys the reader flipped back to the original
+ const transAsked = new Set(); // keys the reader asked for by hand (shown even with auto off)
+ const loadTranslations = () => mergeStored(translations, 'coinos-translations');
+ loadTranslations();
+ let transFlush = null;
+ const saveTranslations = () => {
+ if (transFlush) return;
+ transFlush = setTimeout(() => {
+ transFlush = null;
+ try { cacheStorage.setItem('coinos-translations', JSON.stringify([...translations].slice(-TRANSLATE_KEEP))); } catch {}
+ }, 1000);
+ };
+ // LibreTranslate has no Swahili, Marathi, Tamil or Telugu models: readers
+ // in those get no offer rather than one that always fails
+ const TRANSLATE_NO = new Set(['sw', 'mr', 'ta', 'te']);
+ const canTranslateTo = (lang) => !!lang && !TRANSLATE_NO.has(lang);
+ const transKey = (ev) => ev.id + '|' + getLang() + '|' + (editOf(ev)?.at || 0);
+ const translatable = (ev) => !!ev && !ev.pending && (ev.kind === 1 || ev.kind === COMMENT);
+ // foreign as far as the cheap guess can tell (a script, or a clear other
+ // language); unknown is never translated unasked
+ const looksForeign = (ev) => translatable(ev) && canTranslateTo(getLang()) && !inLanguage(noteText(ev), getLang());
+ const langName = (code) => { try { return new Intl.DisplayNames([getLang()], { type: 'language' }).of(code) || code; } catch { return code; } };
+ // the translation to SHOW for this post now, or null
+ function shownTranslation(ev) {
+ if (!translatable(ev)) return null;
+ const k = transKey(ev);
+ if (transOriginal.has(k)) return null;
+ const tr = translations.get(k);
+ if (!tr) return null;
+ return transAsked.has(k) || (autoTranslateOn() && looksForeign(ev)) ? tr : null;
+ }
+ const browserTranslators = new Map(); // 'es>en' -> Promise(translator | null)
+ async function browserTranslate(text, from, to) {
+ const T = typeof self !== 'undefined' ? self.Translator : null;
+ if (!T || !from || from === to) return null;
+ const pair = from + '>' + to;
+ if (!browserTranslators.has(pair)) {
+ browserTranslators.set(pair, (async () => {
+ // only a pair already on the device: a download needs a user gesture
+ // and minutes; the registrar answers in a second meanwhile
+ if ((await T.availability({ sourceLanguage: from, targetLanguage: to })) !== 'available') return null;
+ return T.create({ sourceLanguage: from, targetLanguage: to });
+ })().catch(() => null));
+ }
+ const tr = await browserTranslators.get(pair);
+ if (!tr) return null;
+ return translatePieces(text, (qs) => Promise.all(qs.map((q) => tr.translate(q))));
+ }
+ async function translateNote(ev, { asked = false } = {}) {
+ const k = transKey(ev);
+ if (asked) { transAsked.add(k); transOriginal.delete(k); }
+ if (translations.has(k) || translating.get(k) === 'loading') { scheduleRepaint(); return; }
+ if (!asked && translating.get(k) === 'fail') return;
+ translating.set(k, 'loading');
+ scheduleRepaint();
+ const text = noteText(ev);
+ const to = getLang();
+ try {
+ let out = null;
+ const guess = guessLang(text);
+ try { const t2 = await browserTranslate(text, guess, to); if (t2) out = { text: t2, source: guess }; } catch {}
+ if (!out) {
+ const r = await fetch(TRANSLATE_API, {
+ method: 'POST', headers: { 'content-type': 'application/json' },
+ body: JSON.stringify({ text, target: to }), signal: AbortSignal.timeout(20_000),
+ });
+ const j = await r.json().catch(() => ({}));
+ if (!r.ok) throw new Error(j.error || 'translate ' + r.status);
+ out = { text: String(j.text || ''), source: j.source || null };
+ }
+ // already in the reader's language after all: nothing to show, and
+ // nothing to offer again
+ if (!out.text || out.source === to || out.text.trim() === text.trim()) {
+ translating.set(k, 'same');
+ if (asked) toast(t('translateSame'));
+ } else {
+ translations.set(k, out);
+ translating.delete(k);
+ saveTranslations();
+ }
+ } catch {
+ translating.set(k, 'fail');
+ if (asked) toast(t('translateFailed'));
+ }
+ scheduleRepaint();
+ }
+ // Under the post's words: where it was translated from, and the way back —
+ // or, for a post that reads foreign with auto off, the offer.
+ function translateLine(ev) {
+ if (!translatable(ev)) return null;
+ const k = transKey(ev);
+ const tr = shownTranslation(ev);
+ const state = translating.get(k);
+ const btn = (label, onClick) => h('button', { type: 'button', class: 'note-translate-btn', onClick: (e) => { e.stopPropagation(); onClick(); } }, label);
+ if (tr) {
+ return h('div', { class: 'note-translate small faint' },
+ h('span', {}, tr.source ? t('translatedFrom', { lang: langName(tr.source) }) : t('translated')), ' · ',
+ btn(t('translateShowOriginal'), () => { transOriginal.add(k); transAsked.delete(k); render(); }));
+ }
+ if (state === 'loading' && (transAsked.has(k) || (autoTranslateOn() && looksForeign(ev)))) {
+ return h('div', { class: 'note-translate small faint' }, t('translating'));
+ }
+ if (!looksForeign(ev) || state === 'same') return null;
+ if (autoTranslateOn() && !transOriginal.has(k) && state !== 'fail') { translateNote(ev); return null; }
+ return h('div', { class: 'note-translate small faint' }, btn(t('translateBtn'), () => translateNote(ev, { asked: true })));
+ }
+
// Where an event about a note goes. A zap receipt is money and has its own
// bookkeeping (see below); a like and a boost are just tallies of who.
function noteEvent(ev) {
@@ -7373,7 +7494,7 @@ export function messagesFeature(ctx) {
h('div', { class: 'note-text', style: 'white-space:pre-wrap;overflow-wrap:anywhere' },
// one level deep only: a quote of a quote of a quote is a rabbit
// hole, and the inner one stays a link you can follow
- ...noteBody(noteText(ev), depth + 1, noteEmojiTags(ev))),
+ ...noteBody(shownTranslation(ev)?.text ?? noteText(ev), depth + 1, noteEmojiTags(ev))),
ev.kind === POLL ? pollBox(ev, { interactive: false }) : null);
}
@@ -8874,6 +8995,17 @@ export function messagesFeature(ctx) {
h('div', { class: 'small faint' }, t('videoLargeHelp', { mb: Math.round(videoBudget() / 1e6) })));
}
+ function translateCard() {
+ if (!canTranslateTo(getLang())) return null;
+ return h('div', { class: 'card col translate-card', style: 'gap:8px' },
+ h('h3', {}, t('translateTitle')),
+ h('label', { class: 'row gap6', style: 'align-items:center;cursor:pointer' },
+ h('input', { type: 'checkbox', class: 'auto-translate', checked: autoTranslateOn(), style: 'width:18px;height:18px;accent-color:var(--accent);margin:0',
+ onChange: (e) => { try { localStorage.setItem(AUTO_TRANSLATE_KEY, e.target.checked ? '1' : '0'); } catch {} render(); } }),
+ h('span', {}, t('translateAutoToggle', { lang: langName(getLang()) }))),
+ h('div', { class: 'small faint' }, t('translateHelp')));
+ }
+
function moderationCard() {
const m = mutesNow();
const e = ui.modEdit || (ui.modEdit = { word: '' });
@@ -8997,6 +9129,11 @@ export function messagesFeature(ctx) {
typeof navigator !== 'undefined' && navigator.share
? item('\u2197', t('postShare'), () => { navigator.share({ url: noteLink(ev) }).catch(() => {}); })
: null,
+ translatable(ev) && canTranslateTo(getLang())
+ ? shownTranslation(ev)
+ ? item('\u{1F310}', t('translateShowOriginal'), () => { const k = transKey(ev); transOriginal.add(k); transAsked.delete(k); render(); })
+ : item('\u{1F310}', t('translateBtn'), () => translateNote(ev, { asked: true }))
+ : null,
canEdit(ev) ? item('\u270e', t('postEdit'), () => { ui.postEdit = { ev, text: noteText(ev) }; render(); }) : null,
mine && !ev.pending ? item('\u{1F5D1}', t('postDelete'), () => { ui.postDeleteAsk = ev; render(); }, true) : null,
mine || !myPubkeys().length ? null : item('\u2630', t('listAddTo'), () => { ui.listPick = ev.pubkey; render(); }),
@@ -9204,7 +9341,8 @@ export function messagesFeature(ctx) {
}, '\u22ef')),
foreign
? h('div', { class: 'note-text small muted', style: 'white-space:pre-wrap;overflow-wrap:anywhere' }, (ev.kind === 64 ? '\u265f ' : '') + altText)
- : h('div', { class: 'note-text', style: 'white-space:pre-wrap;overflow-wrap:anywhere' }, ...(ev.kind === ARTICLE ? (open ? [articleCard(ev)] : articleBody(ev)) : noteBody(noteText(ev), 0, noteEmojiTags(ev)))),
+ : h('div', { class: 'note-text', style: 'white-space:pre-wrap;overflow-wrap:anywhere' }, ...(ev.kind === ARTICLE ? (open ? [articleCard(ev)] : articleBody(ev)) : noteBody(shownTranslation(ev)?.text ?? noteText(ev), 0, noteEmojiTags(ev)))),
+ foreign || pending ? null : translateLine(ev),
ev.kind === POLL ? pollBox(ev) : null,
pending ? null : noteActions(pk, ev, { canZap }),
!pending && whoOpen(ev.id) ? whoPanel(ev) : null));
@@ -13279,7 +13417,7 @@ export function messagesFeature(ctx) {
if (!cacheIsReady()) onCacheReady(() => {
profBlob = null; facelessBlob = null; relayLists = null; packMembers = null; reportsCache = null; baseline = null;
profilesWarmed = false; warmProfiles();
- loadHubCache(); loadVideoDims(); loadVideoInfo(); loadPreviews();
+ loadHubCache(); loadVideoDims(); loadVideoInfo(); loadPreviews(); loadTranslations();
scheduleRepaint();
});
@@ -13288,7 +13426,7 @@ export function messagesFeature(ctx) {
// group-chat state is device state in IndexedDB: it goes with the account
wipeCache(bases) { import('../marmot-store.js').then((m) => { for (const b of bases) m.wipeMarmot(b); }).catch(() => {}); },
forgetAll() { wipeMediaIndex(); mediaIdx.clear(); try { caches.delete(VIDEO_THUMB_CACHE); } catch {} },
- nostrSettingsCards() { return [relaysCard(), followHistoryCard(), moderationCard(), videosCard()]; },
+ nostrSettingsCards() { return [relaysCard(), followHistoryCard(), moderationCard(), translateCard(), videosCard()]; },
// The app came back after being backgrounded. A phone freezes a hidden
// tab: the relay sockets are cut and every post made in the meantime is
// simply missing, which is why the feed used to sit there looking stale
generated by cgit v1.2.3 (git 2.51.0) at 2026-10-15 07:46:25 +0000