Files
rm-circle-team-router/qa/captions-e2e.mjs
T
martbost b3385ca3f8 Captions: translated subtitles for the training videos, no re-render, no re-voicing
Manson asked whether the training videos could be in other languages. A real dub
means re-rendering every video per language: translated Romance-language speech runs
15-25% longer than English and these are slide videos with fixed beat timings, so
swapped audio drifts off what is on screen. That turns 15 files into 75 and makes
every future lesson edit a five-way job. Captions keep ONE video and add small text
tracks beside it, so editing a lesson re-captions that lesson only.

tools/captions.mjs: ffmpeg pulls the audio, ElevenLabs Scribe transcribes with word
timings (the same STT we already use to verify voiceovers), words are grouped into
SENTENCES, and only then translated. Translating cue-by-cue is why most auto-captions
read badly at cue boundaries. Translation goes through our own /api/public/translate,
so every phrase caches forever in translations.json and costs once across the site.
The STT response is cached on disk because it costs money; never pay for it twice.

Language choice is evidence, not instinct. The translation cache shows real member
demand: Italian and French far ahead, then Spanish, then GERMAN - which beats
Portuguese by more than double, the opposite of what we assumed. Proof of concept is
Italian on the 5-minute overview.

Captions are deliberately NOT on by default. An English reader does not want them
forced over the picture; someone who already switched the site to Italian almost
certainly does. public/vtt-lang.js shows the track matching their 🌐 choice and
leaves the player's CC button to do the rest.

Two bugs this caught in my own code, both found by reading the output:
- the line wrapper truncated each cue to two lines and SILENTLY DELETED the overflow,
  so "the whole plan fits in one sentence" shipped as "fits in" then "sentence". It
  now chunks by the real wrapped line count and never drops a word.
- a one or two word tail ("sentence." alone on screen) folds back into the previous
  cue.
The suite asserts all 780 transcript words survive into the English track.

Also: .vtt had no Content-Type mapping, so it served as octet-stream and browsers
silently ignore such a track. qa/captions-e2e.mjs (12 assertions) reads the parsed
cues back out of the player rather than trusting the markup, which is the only way to
catch that class of failure. profiles-unit 28 and gate-e2e 33 still green.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-09-17 06:06:34 -05:00

64 lines
3.4 KiB
JavaScript

// Proves the caption tracks actually load and follow the member's chosen language.
// A .vtt served with the wrong Content-Type is silently ignored by the browser, so
// checking the markup is not enough: this reads the parsed cues back out of the player.
//
// Run: LOCAL=http://127.0.0.1:3399 node qa/captions-e2e.mjs
import { pathToFileURL } from 'node:url';
const PW = 'D:/Projects/MarketingAgent/qa-tester/node_modules/playwright';
const { chromium } = (await import(pathToFileURL(PW + '/index.js').href)).default;
const B = process.env.LOCAL || 'http://127.0.0.1:3399';
const ok = [], bad = [];
const t = (n, c, extra) => { (c ? ok : bad).push(n + (c || !extra ? '' : ' -> ' + extra)); };
const browser = await chromium.launch();
const VTT = '/captions/rmc-team-overview-f8856dc743';
// 1. the files are served as real VTT, not octet-stream (the silent killer)
for (const lang of ['en', 'it']) {
const r = await fetch(B + VTT + '.' + lang + '.vtt');
const ct = r.headers.get('content-type') || '';
const body = await r.text();
t('serves ' + lang + '.vtt as text/vtt', r.ok && /text\/vtt/.test(ct), r.status + ' ' + ct);
t(lang + '.vtt starts with WEBVTT', body.startsWith('WEBVTT'), body.slice(0, 20));
t(lang + '.vtt has cues with timings', (body.match(/-->/g) || []).length > 50, String((body.match(/-->/g) || []).length));
}
const load = async (lang) => {
const ctx = await browser.newContext({ viewport: { width: 1280, height: 900 } });
if (lang) await ctx.addInitScript(l => { try { localStorage.setItem('rmc.lang', l); } catch (e) {} }, lang);
const p = await ctx.newPage();
await p.goto(B + '/training', { waitUntil: 'domcontentloaded' });
await p.waitForTimeout(2500);
return { ctx, p };
};
const readTracks = p => p.evaluate(() => {
const v = document.querySelector('video[src*="rmc-team-overview"]');
if (!v) return null;
return Array.from(v.textTracks).map(tr => ({ lang: tr.language, mode: tr.mode, cues: tr.cues ? tr.cues.length : 0,
first: tr.cues && tr.cues[0] ? tr.cues[0].text : '' }));
});
// 2. an English member: tracks available, nothing forced on screen
let { ctx, p } = await load(null);
let tracks = await readTracks(p);
t('the overview player has caption tracks', !!tracks && tracks.length === 2, JSON.stringify(tracks));
t('no captions forced on for an English member', !!tracks && tracks.every(x => x.mode !== 'showing'), JSON.stringify(tracks && tracks.map(x => x.mode)));
await ctx.close();
// 3. a member who chose Italian: the Italian track is showing, with real parsed cues
({ ctx, p } = await load('it'));
// the browser only parses a track once it is enabled, so read after the matcher runs
await p.waitForTimeout(1500);
tracks = await readTracks(p);
const it = (tracks || []).find(x => x.lang === 'it');
const en = (tracks || []).find(x => x.lang === 'en');
t('Italian track is the one showing', !!it && it.mode === 'showing', JSON.stringify(tracks && tracks.map(x => x.lang + ':' + x.mode)));
t('English track is not also showing', !!en && en.mode !== 'showing', en && en.mode);
t('the Italian cues actually parsed', !!it && it.cues > 50, it && String(it.cues));
t('and they are Italian, not English passthrough', !!it && /parte|reclutano|squadra|team/i.test(it.first) && !/^Most team builds fail/.test(it.first), it && it.first);
await ctx.close();
console.log('PASS ' + ok.length);
for (const b of bad) console.log('FAIL ' + b);
await browser.close();
process.exit(bad.length ? 1 : 0);