Skip to content

feat(video): translated subtitles control on shared-video reader (v1.5)#1155

Open
mircealungu wants to merge 1 commit into
masterfrom
feat/translated-subtitles
Open

feat(video): translated subtitles control on shared-video reader (v1.5)#1155
mircealungu wants to merge 1 commit into
masterfrom
feat/translated-subtitles

Conversation

@mircealungu
Copy link
Copy Markdown
Member

v1.5 of share-to-video (web side) — adds the in-place subtitle translation control to VideoPlayer.js. When the video's caption language differs from the learner's learned_language, the reader offers to translate captions to the learner's language at their CEFR level. The interactive reader (tap-to-translate, bookmarks, time-synced highlight) keeps working because timings and per-caption context_identifier are unchanged across the swap — only the rendered text and tokenisation differ.

Pairs with zeeguu/api PR #647 which adds the caption_translation_set model, the LLM service, the POST/GET /video/<id>/translate_captions endpoints, and the /user_video?caption_set_id= extension. Both are scoped so they can be reviewed and reverted independently of the in-flight v1 work (zeeguu/api#635).

Changes

  • New src/videos/TranslateCaptionsControl.js — encapsulates the offer banner, the translating-spinner state, the ~2 s polling loop, the error/retry branch, and a persistent Original/Translated pill switcher once a set is ready. Per-video preference is stored in localStorage and restored on next visit by calling the (idempotent) translate endpoint.
  • src/api/userVideos.js — three new Zeeguu_API methods (requestCaptionTranslation, pollCaptionTranslationStatus, getVideoInfoWithCaptionSet).
  • src/videos/VideoPlayer.js — imports UserContext for learned_language/learned_cefr_level, renders the control above the player only when source and target languages differ, and on track change refetches videoInfo with the right caption_set_id while resetting lastCaptionIdRef so the currently displayed (stale-text) caption re-renders immediately rather than waiting for the next caption boundary.

How to try locally

  1. Pull the api branch, run the migration (tools/migrations/26-05-31-a--add_caption_translation.sql), restart the api.
  2. Pull this branch + npm run dev (or equivalent).
  3. Open an existing English-captioned video as a Danish learner. The banner appears above the player — click "Translate subtitles", watch the polling, then verify the swap.

Out of scope (captured for later)

TTS dubbing in the learner's language: see docs/future-work/dubbed-audio-from-shared-video.md. Translated subtitles alone capture most of the UX win and avoid the derivative-work copyright question entirely.

🤖 Generated with Claude Code

When the video the learner is watching has captions in a different language than what they're
learning, the VideoPlayer now offers to translate the subtitles in-place. The interactive
reader (tap-to-translate, bookmarks, time-synced highlight) keeps working because timings and
the per-caption context_identifier are unchanged across the swap — only the rendered text and
its tokenisation differ.

- New TranslateCaptionsControl: encapsulates the offer banner, the translating-spinner state,
  the polling loop (~2 s), the error/retry branch, and a persistent Original/Translated pill
  switcher once a set is ready. Per-video preference is stored in localStorage and restored
  on next visit by calling the (idempotent) translate endpoint.
- Three new Zeeguu_API methods on userVideos.js:
  - requestCaptionTranslation(videoId, lang, cefr, …)  — _postJSON wrapper.
  - pollCaptionTranslationStatus(videoId, setId, …).
  - getVideoInfoWithCaptionSet(videoId, setId, …).
- VideoPlayer integration: imports UserContext for learned_language/learned_cefr_level,
  renders the control above the player only when source and target languages differ, and on
  track change refetches videoInfo with the right caption_set_id while resetting
  lastCaptionIdRef so the currently displayed (stale-text) caption re-renders immediately
  instead of waiting for the next caption boundary.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@netlify
Copy link
Copy Markdown

netlify Bot commented May 31, 2026

Deploy Preview for voluble-nougat-015dd1 ready!

Name Link
🔨 Latest commit 369753d
🔍 Latest deploy log https://app.netlify.com/projects/voluble-nougat-015dd1/deploys/6a1c8794d176940008cab15d
😎 Deploy Preview https://deploy-preview-1155--voluble-nougat-015dd1.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant