@intellectif/lk-react 15.0.0 → 16.0.0

package/dist/{chunk-2HAEQDHQ.js → chunk-3IHVDQRC.js}

@@ -1,11 +1,11 @@
 'use client';
-import { MultipleChoice } from './chunk-RT5FTHUU.js';
-import { FillInTheBlanks } from './chunk-IE5ZNCWN.js';
-import { GapSelect } from './chunk-CE6OGJE6.js';
-import { Dictation } from './chunk-33BQNWAQ.js';
-import { stopCaptureGroup, SequenceSlotContext, ReadAloud } from './chunk-QEB6O6GU.js';
-import { ActivityErrorBoundary, isDevelopment } from './chunk-ZJMTHPHY.js';
-import { useLkStrings } from './chunk-52GXJNQ3.js';
+import { MultipleChoice } from './chunk-4X7NFEDB.js';
+import { FillInTheBlanks } from './chunk-4AQ4SWJ3.js';
+import { GapSelect } from './chunk-UYRQEIB7.js';
+import { Dictation } from './chunk-T33AJYLW.js';
+import { stopCaptureGroup, SequenceSlotContext, ReadAloud } from './chunk-W32ND3ZR.js';
+import { ActivityErrorBoundary, isDevelopment } from './chunk-ICAYWVNF.js';
+import { useLkStrings } from './chunk-QIA5FAAW.js';
 import { assertRedactedItemGroup, validateItemGroup, ActivitySchemaError, flattenSequence, readMediaProgress } from '@intellectif/lk-core';
 import { useMemo, useRef, useState, useEffect, useCallback } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -107,6 +107,7 @@ var SHORTCUT_KEYS = [
   { action: "chapter", keys: "[ / ]" },
   { action: "mute", keys: "M" },
   { action: "captions", keys: "C" },
+  { action: "secondary-captions", keys: "Shift + C" },
   { action: "transcript", keys: "T" },
   { action: "picture-in-picture", keys: "P" },
   { action: "fullscreen", keys: "F" },
@@ -114,17 +115,87 @@ var SHORTCUT_KEYS = [
 ];
 var JUMP_SECONDS = 10;
 var FRAME_SECONDS = 1 / 30;
+
+// src/components/InteractiveVideo/tracks.ts
+var primarySubtag = (tag) => (tag.split("-")[0] ?? tag).toLowerCase();
+function preferCaptions(tracks) {
+  return tracks.find((track) => track.kind === "captions") ?? tracks[0];
+}
+function matchLanguage(tracks, language) {
+  const wanted = language.toLowerCase();
+  const exact = tracks.filter((track) => track.srclang.toLowerCase() === wanted);
+  if (exact.length > 0) {
+    return preferCaptions(exact);
+  }
+  const family = primarySubtag(wanted);
+  return preferCaptions(tracks.filter((track) => primarySubtag(track.srclang) === family));
+}
+function drawable(tracks) {
+  return tracks.filter((track) => track.kind === "captions" || track.kind === "subtitles");
+}
+function secondaryCandidates(tracks, primary) {
+  const taken = primary?.srclang.toLowerCase();
+  return drawable(tracks).filter((track) => track.srclang.toLowerCase() !== taken);
+}
+function resolveCaptionTracks(tracks, preferences) {
+  const usable = drawable(tracks);
+  if (usable.length === 0) {
+    return {};
+  }
+  const primary = (preferences.captionLanguage === null ? void 0 : matchLanguage(usable, preferences.captionLanguage)) ?? usable.find((track) => track.default === true) ?? usable[0];
+  const second = preferences.secondaryCaptionLanguage;
+  const secondary = second === null ? void 0 : matchLanguage(secondaryCandidates(usable, primary), second);
+  return secondary === void 0 ? { primary } : { primary, secondary };
+}
+var overlap = (a, b) => Math.min(a.end, b.end) - Math.max(a.start, b.start);
+var LOOKBACK = 8;
+function pairSecondaryCues(primary, secondary) {
+  const rows = primary.map(() => []);
+  for (const cue of secondary) {
+    let low = 0;
+    let high = primary.length;
+    while (low < high) {
+      const middle = low + high >> 1;
+      if (primary[middle].start < cue.end) {
+        low = middle + 1;
+      } else {
+        high = middle;
+      }
+    }
+    let best = -1;
+    let bestShare = 0;
+    let misses = 0;
+    for (let index = low - 1; index >= 0 && misses <= LOOKBACK; index -= 1) {
+      const share = overlap(primary[index], cue);
+      if (share > 0) {
+        misses = 0;
+        if (share >= bestShare) {
+          best = index;
+          bestShare = share;
+        }
+      } else {
+        misses += 1;
+      }
+    }
+    if (best !== -1) {
+      rows[best].push(cue);
+    }
+  }
+  return rows;
+}
 function Menu({
   label,
   onClose,
-  children
+  children,
+  returnTo
 }) {
   const ref = useRef(null);
   useEffect(() => {
     const items = ref.current?.querySelectorAll('[role^="menuitem"]');
+    const back = returnTo === void 0 ? null : ref.current?.querySelector(`[data-menu-key="${returnTo}"]`);
     const checked = ref.current?.querySelector('[aria-checked="true"]');
-    (checked ?? items?.[0])?.focus();
-  }, []);
+    (back ?? checked ?? items?.[0])?.focus();
+  }, [returnTo]);
   const onKeyDown = (event) => {
     const items = Array.from(
       ref.current?.querySelectorAll('[role^="menuitem"]') ?? []
@@ -176,66 +247,136 @@ function SpeedMenu({
 function SettingsMenu({
   preferences,
   tracks,
-  activeTrack,
+  primaryTrack,
+  secondaryTrack,
   captionsFailed,
   strings,
   onChange,
+  onCaptionTrack,
+  onSecondaryTrack,
   onShowShortcuts,
   onClose
 }) {
   const [page, setPage] = useState("main");
-  const captionsValue = !preferences.captions || activeTrack === void 0 ? strings.videoOff : activeTrack.label;
+  const [returnTo, setReturnTo] = useState(void 0);
+  const open = (next) => {
+    setReturnTo(void 0);
+    setPage(next);
+  };
+  const leave = () => {
+    setReturnTo(page);
+    setPage(page === "second" ? "captions" : "main");
+  };
+  const captionsValue = !preferences.captions || primaryTrack === void 0 ? strings.videoOff : secondaryTrack === void 0 ? primaryTrack.label : strings.videoCaptionPair(primaryTrack.label, secondaryTrack.label);
+  const partners = secondaryCandidates(tracks, primaryTrack);
+  const failedNotes = /* @__PURE__ */ jsxs(Fragment, { children: [
+    captionsFailed.primary && page === "captions" ? /* @__PURE__ */ jsx("p", { className: "lk-iv-menu-note", role: "status", children: strings.videoCaptionsFailed }) : null,
+    captionsFailed.secondary ? /* @__PURE__ */ jsx("p", { className: "lk-iv-menu-note", role: "status", children: strings.videoSecondaryCaptionsFailed }) : null
+  ] });
   const back = /* @__PURE__ */ jsxs(
     "button",
     {
       type: "button",
       role: "menuitem",
       className: "lk-iv-menu-item lk-iv-menu-back",
-      onClick: () => setPage("main"),
+      onClick: leave,
       children: [
         /* @__PURE__ */ jsx(ChevronIcon, { direction: "left" }),
-        /* @__PURE__ */ jsx("span", { children: page === "captions" ? strings.videoCaptionLanguage : strings.videoCaptionSize })
+        /* @__PURE__ */ jsx("span", { children: page === "captions" ? strings.videoCaptionLanguage : page === "second" ? strings.videoSecondCaptionLanguage : strings.videoCaptionSize })
       ]
     }
   );
+  const trackRadio = (track, on, choose) => /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      role: "menuitemradio",
+      "aria-checked": on,
+      className: "lk-iv-menu-item",
+      lang: track.srclang,
+      onClick: choose,
+      children: [
+        /* @__PURE__ */ jsx("span", { dir: "auto", children: track.label }),
+        on ? /* @__PURE__ */ jsx(CheckIcon, {}) : null
+      ]
+    },
+    `${track.kind}:${track.srclang}`
+  );
   if (page === "captions") {
-    return /* @__PURE__ */ jsxs(Menu, { label: strings.videoCaptionLanguage, onClose, children: [
+    return /* @__PURE__ */ jsxs(
+      Menu,
+      {
+        label: strings.videoCaptionLanguage,
+        onClose,
+        returnTo,
+        children: [
+          back,
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              role: "menuitemradio",
+              "aria-checked": !preferences.captions,
+              className: "lk-iv-menu-item",
+              onClick: () => onChange({ captions: false }),
+              children: [
+                /* @__PURE__ */ jsx("span", { children: strings.videoOff }),
+                !preferences.captions ? /* @__PURE__ */ jsx(CheckIcon, {}) : null
+              ]
+            }
+          ),
+          tracks.map(
+            (track) => trackRadio(
+              track,
+              preferences.captions && primaryTrack === track,
+              () => onCaptionTrack(track)
+            )
+          ),
+          partners.length > 0 ? /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              role: "menuitem",
+              className: "lk-iv-menu-item",
+              "data-menu-key": "second",
+              onClick: () => open("second"),
+              children: [
+                /* @__PURE__ */ jsx("span", { children: strings.videoSecondCaptionLanguage }),
+                /* @__PURE__ */ jsxs("span", { className: "lk-iv-menu-value", children: [
+                  /* @__PURE__ */ jsx("span", { dir: "auto", lang: secondaryTrack?.srclang, children: secondaryTrack === void 0 ? strings.videoOff : secondaryTrack.label }),
+                  /* @__PURE__ */ jsx(ChevronIcon, { direction: "right" })
+                ] })
+              ]
+            }
+          ) : null,
+          failedNotes
+        ]
+      },
+      "captions"
+    );
+  }
+  if (page === "second") {
+    return /* @__PURE__ */ jsxs(Menu, { label: strings.videoSecondCaptionLanguage, onClose, children: [
       back,
       /* @__PURE__ */ jsxs(
         "button",
         {
           type: "button",
           role: "menuitemradio",
-          "aria-checked": !preferences.captions,
+          "aria-checked": secondaryTrack === void 0,
           className: "lk-iv-menu-item",
-          onClick: () => onChange({ captions: false }),
+          onClick: () => onSecondaryTrack(null),
           children: [
             /* @__PURE__ */ jsx("span", { children: strings.videoOff }),
-            !preferences.captions ? /* @__PURE__ */ jsx(CheckIcon, {}) : null
+            secondaryTrack === void 0 ? /* @__PURE__ */ jsx(CheckIcon, {}) : null
           ]
         }
       ),
-      tracks.map((track) => {
-        const on = preferences.captions && activeTrack === track;
-        return /* @__PURE__ */ jsxs(
-          "button",
-          {
-            type: "button",
-            role: "menuitemradio",
-            "aria-checked": on,
-            className: "lk-iv-menu-item",
-            lang: track.srclang,
-            onClick: () => onChange({ captions: true, captionLanguage: track.srclang }),
-            children: [
-              /* @__PURE__ */ jsx("span", { children: track.label }),
-              on ? /* @__PURE__ */ jsx(CheckIcon, {}) : null
-            ]
-          },
-          `${track.kind}:${track.srclang}`
-        );
-      }),
-      captionsFailed ? /* @__PURE__ */ jsx("p", { className: "lk-iv-menu-note", role: "status", children: strings.videoCaptionsFailed }) : null
-    ] }, "captions");
+      partners.map(
+        (track) => trackRadio(track, secondaryTrack === track, () => onSecondaryTrack(track))
+      ),
+      failedNotes
+    ] }, "second");
   }
   if (page === "size") {
     return /* @__PURE__ */ jsxs(Menu, { label: strings.videoCaptionSize, onClose, children: [
@@ -257,7 +398,7 @@ function SettingsMenu({
       ))
     ] }, "size");
   }
-  return /* @__PURE__ */ jsxs(Menu, { label: strings.videoSettings, onClose, children: [
+  return /* @__PURE__ */ jsxs(Menu, { label: strings.videoSettings, onClose, returnTo, children: [
     tracks.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsxs(
         "button",
@@ -265,11 +406,12 @@ function SettingsMenu({
           type: "button",
           role: "menuitem",
           className: "lk-iv-menu-item",
-          onClick: () => setPage("captions"),
+          "data-menu-key": "captions",
+          onClick: () => open("captions"),
           children: [
             /* @__PURE__ */ jsx("span", { children: strings.videoCaptionLanguage }),
             /* @__PURE__ */ jsxs("span", { className: "lk-iv-menu-value", children: [
-              captionsValue,
+              /* @__PURE__ */ jsx("span", { dir: "auto", children: captionsValue }),
               /* @__PURE__ */ jsx(ChevronIcon, { direction: "right" })
             ] })
           ]
@@ -281,7 +423,8 @@ function SettingsMenu({
           type: "button",
           role: "menuitem",
           className: "lk-iv-menu-item",
-          onClick: () => setPage("size"),
+          "data-menu-key": "size",
+          onClick: () => open("size"),
           children: [
             /* @__PURE__ */ jsx("span", { children: strings.videoCaptionSize }),
             /* @__PURE__ */ jsxs("span", { className: "lk-iv-menu-value", children: [
@@ -375,6 +518,9 @@ function ContentsPanel({
   chapters,
   quizzes,
   cues,
+  primaryLanguage,
+  secondaryCues,
+  secondaryLanguage,
   activeCue,
   limit,
   strings,
@@ -386,10 +532,18 @@ function ContentsPanel({
   const followUntil = useRef(0);
   const hasTranscript = cues.length > 0;
   const shownTab = hasTranscript ? tab : "contents";
+  const paired = useMemo(() => pairSecondaryCues(cues, secondaryCues), [cues, secondaryCues]);
   const lines = useMemo(() => {
     const trimmed = query.trim().toLowerCase();
-    return cues.map((cue, index) => ({ cue, index })).filter(({ cue }) => cue.start <= limit).filter(({ cue }) => trimmed === "" || cue.text.toLowerCase().includes(trimmed));
-  }, [cues, limit, query]);
+    return cues.map((cue, index) => ({
+      cue,
+      index,
+      // The spoiler limit holds for the second language as for the first.
+      second: (paired[index] ?? []).filter((line) => line.start <= limit).map((line) => line.text).join(" ")
+    })).filter(({ cue }) => cue.start <= limit).filter(
+      ({ cue, second }) => trimmed === "" || cue.text.toLowerCase().includes(trimmed) || second.toLowerCase().includes(trimmed)
+    );
+  }, [cues, paired, limit, query]);
   useEffect(() => {
     if (shownTab !== "transcript" || query.trim() !== "" || Date.now() < followUntil.current) {
       return;
@@ -512,7 +666,7 @@ function ContentsPanel({
               onTouchMove: () => {
                 followUntil.current = Date.now() + 4e3;
               },
-              children: lines.length === 0 ? /* @__PURE__ */ jsx("p", { className: "lk-iv-empty", children: strings.videoTranscriptNoMatch }) : lines.map(({ cue, index }) => /* @__PURE__ */ jsxs(
+              children: lines.length === 0 ? /* @__PURE__ */ jsx("p", { className: "lk-iv-empty", children: strings.videoTranscriptNoMatch }) : lines.map(({ cue, index, second }) => /* @__PURE__ */ jsxs(
                 "button",
                 {
                   type: "button",
@@ -521,7 +675,10 @@ function ContentsPanel({
                   onClick: () => onSeek(cue.start),
                   children: [
                     /* @__PURE__ */ jsx("span", { className: "lk-iv-row-time", children: clock(cue.start) }),
-                    /* @__PURE__ */ jsx("span", { children: highlight(cue.text) })
+                    secondaryCues.length === 0 ? /* @__PURE__ */ jsx("span", { lang: primaryLanguage, dir: "auto", children: highlight(cue.text) }) : /* @__PURE__ */ jsxs("span", { className: "lk-iv-line-text", children: [
+                      /* @__PURE__ */ jsx("span", { lang: primaryLanguage, dir: "auto", children: highlight(cue.text) }),
+                      second === "" ? null : /* @__PURE__ */ jsx("span", { className: "lk-iv-line-secondary", lang: secondaryLanguage, dir: "auto", children: highlight(second) })
+                    ] })
                   ]
                 },
                 `${cue.start}-${index}`
@@ -586,45 +743,73 @@ var DEFAULT_PREFERENCES = {
   muted: false,
   captions: true,
   captionLanguage: null,
+  secondaryCaptionLanguage: null,
   captionSize: "medium",
   captionBackground: true,
   panel: false,
   shortcuts: true
 };
 var STORAGE_KEY = "lk.video.v1";
-function sanitizePreferences(raw) {
-  if (typeof raw !== "object" || raw === null) {
-    return DEFAULT_PREFERENCES;
+var LANGUAGE_TAG = /^[A-Za-z]{2,3}(-[A-Za-z0-9]{2,8})*$/;
+var BOOLEAN_FIELDS = ["muted", "captions", "captionBackground", "panel", "shortcuts"];
+var LANGUAGE_FIELDS = ["captionLanguage", "secondaryCaptionLanguage"];
+function sanitizePartialPreferences(raw) {
+  if (typeof raw !== "object" || raw === null || Array.isArray(raw)) {
+    return {};
   }
   const value = raw;
-  const bool = (input, fallback) => typeof input === "boolean" ? input : fallback;
-  const speed = SPEEDS.includes(value.speed) ? value.speed : DEFAULT_PREFERENCES.speed;
-  const volume = typeof value.volume === "number" && Number.isFinite(value.volume) ? Math.min(1, Math.max(0, value.volume)) : DEFAULT_PREFERENCES.volume;
-  const size = value.captionSize === "small" || value.captionSize === "medium" || value.captionSize === "large" ? value.captionSize : DEFAULT_PREFERENCES.captionSize;
-  const language = typeof value.captionLanguage === "string" && /^[A-Za-z]{2,3}(-[A-Za-z0-9]{2,8})*$/.test(value.captionLanguage) ? value.captionLanguage : null;
-  return {
-    speed,
-    volume,
-    muted: bool(value.muted, DEFAULT_PREFERENCES.muted),
-    captions: bool(value.captions, DEFAULT_PREFERENCES.captions),
-    captionLanguage: language,
-    captionSize: size,
-    captionBackground: bool(value.captionBackground, DEFAULT_PREFERENCES.captionBackground),
-    panel: bool(value.panel, DEFAULT_PREFERENCES.panel),
-    shortcuts: bool(value.shortcuts, DEFAULT_PREFERENCES.shortcuts)
-  };
+  const has = (key) => Object.hasOwn(value, key);
+  const out = {};
+  if (has("speed") && SPEEDS.includes(value.speed)) {
+    out.speed = value.speed;
+  }
+  if (has("volume") && typeof value.volume === "number" && Number.isFinite(value.volume)) {
+    out.volume = Math.min(1, Math.max(0, value.volume));
+  }
+  for (const field of BOOLEAN_FIELDS) {
+    if (has(field) && typeof value[field] === "boolean") {
+      out[field] = value[field];
+    }
+  }
+  for (const field of LANGUAGE_FIELDS) {
+    const tag = value[field];
+    if (has(field) && (tag === null || typeof tag === "string" && LANGUAGE_TAG.test(tag))) {
+      out[field] = tag;
+    }
+  }
+  if (has("captionSize") && (value.captionSize === "small" || value.captionSize === "medium" || value.captionSize === "large")) {
+    out.captionSize = value.captionSize;
+  }
+  return out;
+}
+function normalised(preferences) {
+  const { captionLanguage: first, secondaryCaptionLanguage: second } = preferences;
+  return first !== null && second !== null && first.toLowerCase() === second.toLowerCase() ? { ...preferences, secondaryCaptionLanguage: null } : preferences;
+}
+function resolvePreferences(layers) {
+  return normalised({
+    ...DEFAULT_PREFERENCES,
+    ...sanitizePartialPreferences(layers.defaults),
+    ...sanitizePartialPreferences(layers.stored),
+    ...sanitizePartialPreferences(layers.force),
+    ...sanitizePartialPreferences(layers.chosen)
+  });
 }
-function readPreferences() {
+function applyPreferenceChange(previous, change) {
+  return normalised({ ...previous, ...sanitizePartialPreferences(change) });
+}
+function readStoredPreferences() {
   try {
     const stored = globalThis.localStorage?.getItem(STORAGE_KEY);
-    return stored ? sanitizePreferences(JSON.parse(stored)) : DEFAULT_PREFERENCES;
+    return stored ? sanitizePartialPreferences(JSON.parse(stored)) : {};
   } catch {
-    return DEFAULT_PREFERENCES;
+    return {};
   }
 }
-function writePreferences(preferences) {
+function rememberPreferences(change) {
   try {
-    globalThis.localStorage?.setItem(STORAGE_KEY, JSON.stringify(preferences));
+    const next = { ...readStoredPreferences(), ...sanitizePartialPreferences(change) };
+    globalThis.localStorage?.setItem(STORAGE_KEY, JSON.stringify(next));
   } catch {
   }
 }
@@ -944,6 +1129,55 @@ function onNextFrame(run) {
   const timer = setTimeout(run, 33);
   return () => clearTimeout(timer);
 }
+function trackKey(track) {
+  return `${track.kind}:${track.srclang}:${track.src}`;
+}
+var NO_CUES = [];
+function useCaptionLine(track, load, peek) {
+  const key = track === void 0 ? void 0 : trackKey(track);
+  const [line, setLine] = useState({
+    cues: NO_CUES,
+    failed: false
+  });
+  const trackRef = useRef(track);
+  trackRef.current = track;
+  useEffect(() => {
+    const wanted = trackRef.current;
+    if (key === void 0 || wanted === void 0) {
+      return;
+    }
+    let live = true;
+    load(wanted).then(
+      (cues) => {
+        if (live) {
+          setLine({ key, cues, failed: false });
+        }
+      },
+      () => {
+        if (live) {
+          setLine({ key, cues: NO_CUES, failed: true });
+        }
+      }
+    );
+    return () => {
+      live = false;
+    };
+  }, [key, load]);
+  if (key === void 0) {
+    return { cues: NO_CUES, failed: false };
+  }
+  if (line.key === key) {
+    return line;
+  }
+  return { cues: peek(key) ?? NO_CUES, failed: false };
+}
+function captionsShown(tracks, preferences) {
+  if (!preferences.captions) {
+    return { srclang: null, secondary: null };
+  }
+  const shown = resolveCaptionTracks(tracks, preferences);
+  return { srclang: shown.primary?.srclang ?? null, secondary: shown.secondary?.srclang ?? null };
+}
 var playerCount = 0;
 var ITEM_TYPES = /* @__PURE__ */ new Set([
   "multiple-choice",
@@ -1021,21 +1255,25 @@ function Player(props) {
     playerCount += 1;
     return `lk-iv-${playerCount}`;
   });
-  const [preferences, setPreferences] = useState(() => ({
-    ...DEFAULT_PREFERENCES,
-    ...props.preferences
-  }));
-  const preferenceOverride = useRef(props.preferences);
+  const forced = useRef(props.preferences).current;
+  const defaultsKey = JSON.stringify(props.defaultPreferences ?? null);
+  const defaults = useMemo(() => JSON.parse(defaultsKey), [defaultsKey]);
+  const chosen = useRef({});
+  const [preferences, setPreferences] = useState(
+    () => resolvePreferences({ force: forced, defaults: props.defaultPreferences })
+  );
+  const preferencesRef = useRef(preferences);
+  preferencesRef.current = preferences;
   useEffect(() => {
-    setPreferences({ ...readPreferences(), ...preferenceOverride.current });
-  }, []);
-  const changePreferences = useCallback((change) => {
-    setPreferences((previous) => {
-      const next = { ...previous, ...change };
-      writePreferences(next);
-      return next;
-    });
-  }, []);
+    setPreferences(
+      resolvePreferences({
+        force: forced,
+        stored: readStoredPreferences(),
+        defaults,
+        chosen: chosen.current
+      })
+    );
+  }, [forced, defaults]);
   const [submitted] = useState(() => new Set(props.submittedSlotIds ?? []));
   const [answered, setAnswered] = useState(() => {
     const seeded = /* @__PURE__ */ new Set();
@@ -1304,43 +1542,124 @@ function Player(props) {
       }
     ] : [];
   }, [media, locale, strings.videoCaptionLanguage]);
-  const activeTrack = tracks.find((track) => track.srclang === preferences.captionLanguage) ?? tracks.find((track) => track.default === true) ?? tracks[0];
-  const [captionCues, setCaptionCues] = useState([]);
-  const [captionsFailed, setCaptionsFailed] = useState(false);
+  const { primary: primaryTrack, secondary: secondaryTrack } = useMemo(
+    () => resolveCaptionTracks(tracks, {
+      captionLanguage: preferences.captionLanguage,
+      secondaryCaptionLanguage: preferences.secondaryCaptionLanguage
+    }),
+    [tracks, preferences.captionLanguage, preferences.secondaryCaptionLanguage]
+  );
   const loaderRef = useRef(captionsLoader);
   loaderRef.current = captionsLoader;
-  useEffect(() => {
-    if (activeTrack === void 0) {
-      setCaptionCues([]);
-      return;
+  const loading = useRef(/* @__PURE__ */ new Map());
+  const loaded = useRef(/* @__PURE__ */ new Map());
+  const loadCues = useCallback((track) => {
+    const key = trackKey(track);
+    const pending = loading.current.get(key);
+    if (pending !== void 0) {
+      return pending;
     }
-    let live = true;
-    setCaptionsFailed(false);
-    const load = loaderRef.current ? loaderRef.current(activeTrack) : fetch(activeTrack.src, { credentials: "same-origin" }).then((response) => {
-      if (!response.ok) {
-        throw new Error(String(response.status));
+    const request = Promise.resolve().then(
+      () => loaderRef.current ? loaderRef.current(track) : fetch(track.src, { credentials: "same-origin" }).then((response) => {
+        if (!response.ok) {
+          throw new Error(String(response.status));
+        }
+        return response.text();
+      })
+    ).then((text) => {
+      const parsed = parseWebVtt(text);
+      if (parsed.length === 0) {
+        throw new Error("The caption file held no cues.");
       }
-      return response.text();
+      loaded.current.set(key, parsed);
+      return parsed;
     });
-    Promise.resolve(load).then((text) => {
-      if (live) {
-        const parsed = parseWebVtt(text);
-        setCaptionCues(parsed);
-        setCaptionsFailed(parsed.length === 0);
+    loading.current.set(key, request);
+    request.catch(() => {
+      loading.current.delete(key);
+    });
+    return request;
+  }, []);
+  const peekCues = useCallback((key) => loaded.current.get(key), []);
+  const primaryLine = useCaptionLine(primaryTrack, loadCues, peekCues);
+  const secondaryLine = useCaptionLine(secondaryTrack, loadCues, peekCues);
+  const primaryCues = primaryLine.cues;
+  const secondaryCues = secondaryLine.cues;
+  const captionsFailed = { primary: primaryLine.failed, secondary: secondaryLine.failed };
+  const hasCaptions = primaryCues.length > 0 || secondaryCues.length > 0;
+  const hasTranscript = primaryCues.length > 0;
+  const activeCueIndex = useMemo(() => cueIndexAt(primaryCues, current), [primaryCues, current]);
+  const secondaryCueIndex = useMemo(
+    () => cueIndexAt(secondaryCues, current),
+    [secondaryCues, current]
+  );
+  const spoilerLimit = timeline.navigation === "no-skip-ahead" && renderMode !== "review" ? Math.max(furthestShown, current) : Number.POSITIVE_INFINITY;
+  const onPreferencesChangeRef = useRef(props.onPreferencesChange);
+  onPreferencesChangeRef.current = props.onPreferencesChange;
+  const tracksRef = useRef(tracks);
+  tracksRef.current = tracks;
+  const lastSecondary = useRef(null);
+  const changePreferences = useCallback(
+    (change) => {
+      const previous = preferencesRef.current;
+      const next = applyPreferenceChange(previous, change);
+      if (previous.secondaryCaptionLanguage !== null) {
+        lastSecondary.current = previous.secondaryCaptionLanguage;
       }
-    }).catch(() => {
-      if (live) {
-        setCaptionCues([]);
-        setCaptionsFailed(true);
+      chosen.current = { ...chosen.current, ...change };
+      preferencesRef.current = next;
+      setPreferences(next);
+      rememberPreferences(change);
+      onPreferencesChangeRef.current?.(next, change);
+      const before = captionsShown(tracksRef.current, previous);
+      const after = captionsShown(tracksRef.current, next);
+      if (before.srclang !== after.srclang || before.secondary !== after.secondary) {
+        emit("video-captions-changed", after);
       }
+    },
+    [emit]
+  );
+  const chooseCaptionTrack = (track) => {
+    const swaps = primaryTrack !== void 0 && secondaryTrack !== void 0 && track.srclang.toLowerCase() === secondaryTrack.srclang.toLowerCase();
+    changePreferences({
+      captions: true,
+      captionLanguage: track.srclang,
+      ...swaps ? { secondaryCaptionLanguage: primaryTrack.srclang } : {}
     });
-    return () => {
-      live = false;
-    };
-  }, [activeTrack]);
-  const hasCaptions = captionCues.length > 0;
-  const activeCueIndex = useMemo(() => cueIndexAt(captionCues, current), [captionCues, current]);
-  const spoilerLimit = timeline.navigation === "no-skip-ahead" && renderMode !== "review" ? Math.max(furthestShown, current) : Number.POSITIVE_INFINITY;
+  };
+  const chooseSecondaryTrack = (track) => {
+    changePreferences(
+      track === null ? { secondaryCaptionLanguage: null } : { secondaryCaptionLanguage: track.srclang, captions: true }
+    );
+  };
+  const toggleSecondary = () => {
+    if (secondaryTrack !== void 0) {
+      changePreferences(
+        preferences.captions ? { secondaryCaptionLanguage: null } : { captions: true }
+      );
+      return;
+    }
+    const wanted = [
+      lastSecondary.current,
+      preferences.secondaryCaptionLanguage,
+      sanitizePartialPreferences(defaults).secondaryCaptionLanguage ?? null,
+      secondaryCandidates(tracks, primaryTrack)[0]?.srclang ?? null
+    ];
+    for (const language of wanted) {
+      if (language === null) {
+        continue;
+      }
+      const { secondary } = resolveCaptionTracks(tracks, {
+        captionLanguage: preferences.captionLanguage,
+        secondaryCaptionLanguage: language
+      });
+      if (secondary !== void 0) {
+        changePreferences({ secondaryCaptionLanguage: secondary.srclang, captions: true });
+        return;
+      }
+    }
+    announce(strings.videoNoSecondLanguage);
+  };
   useEffect(() => {
     const video = videoRef.current;
     if (video !== null) {
@@ -1507,14 +1826,17 @@ function Player(props) {
         return;
       case "c":
       case "C":
-        if (hasCaptions) {
+        if (event.shiftKey) {
+          done();
+          toggleSecondary();
+        } else if (hasCaptions) {
           done();
           changePreferences({ captions: !preferences.captions });
         }
         return;
       case "t":
       case "T":
-        if (hasCaptions) {
+        if (hasTranscript) {
           done();
           setPanelTab("transcript");
           changePreferences({ panel: !(preferences.panel && panelTab === "transcript") });
@@ -1718,7 +2040,9 @@ function Player(props) {
       emit("video-quiz-question-shown", { cueId: openCue.id, slotId: slot.slotId });
     }
   };
-  const showCaption = preferences.captions && hasCaptions && activeCueIndex !== -1 && openQuiz === null && !ended && errorCode === null;
+  const captionsHidden = !preferences.captions || openQuiz !== null || ended || errorCode !== null;
+  const primaryText = captionsHidden ? void 0 : primaryCues[activeCueIndex]?.text;
+  const secondaryText = captionsHidden ? void 0 : secondaryCues[secondaryCueIndex]?.text;
   const chromeVisible = !playing || chromeShown || menu !== null || scrubbing || focusInChrome || sheet || openQuiz !== null;
   const volumeLevel = preferences.muted || preferences.volume === 0 ? "muted" : preferences.volume < 0.5 ? "low" : "high";
   return (
@@ -1830,15 +2154,43 @@ function Player(props) {
                   }
                 ),
                 label !== void 0 ? /* @__PURE__ */ jsx("span", { className: "lk-iv-label", children: label }) : null,
-                showCaption ? /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: "lk-iv-caption",
-                    "data-size": preferences.captionSize,
-                    "data-background": preferences.captionBackground || void 0,
-                    lang: activeTrack?.srclang,
-                    children: /* @__PURE__ */ jsx("span", { children: captionCues[activeCueIndex]?.text })
-                  }
+                primaryText !== void 0 || secondaryText !== void 0 ? (
+                  // The lines keep `.lk-iv-caption`, `data-size` and `data-background`
+                  // as well, so a stylesheet written against 15.x still matches them.
+                  /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      className: "lk-iv-captions",
+                      "data-size": preferences.captionSize,
+                      "data-background": preferences.captionBackground || void 0,
+                      children: [
+                        primaryText !== void 0 ? /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            className: "lk-iv-caption",
+                            "data-role": "primary",
+                            "data-size": preferences.captionSize,
+                            "data-background": preferences.captionBackground || void 0,
+                            lang: primaryTrack?.srclang,
+                            dir: "auto",
+                            children: /* @__PURE__ */ jsx("span", { children: primaryText })
+                          }
+                        ) : null,
+                        secondaryText !== void 0 ? /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            className: "lk-iv-caption",
+                            "data-role": "secondary",
+                            "data-size": preferences.captionSize,
+                            "data-background": preferences.captionBackground || void 0,
+                            lang: secondaryTrack?.srclang,
+                            dir: "auto",
+                            children: /* @__PURE__ */ jsx("span", { children: secondaryText })
+                          }
+                        ) : null
+                      ]
+                    }
+                  )
                 ) : null,
                 waiting && errorCode === null && openQuiz === null ? /* @__PURE__ */ jsx("span", { className: "lk-iv-spinner", "aria-hidden": "true" }) : null,
                 errorCode !== null ? /* @__PURE__ */ jsxs("div", { className: "lk-iv-error", role: "alert", children: [
@@ -1887,7 +2239,7 @@ function Player(props) {
                           buffered,
                           chapters,
                           markers,
-                          cues: captionCues,
+                          cues: primaryCues,
                           previewLimit: spoilerLimit,
                           strings,
                           onSeek: seek,
@@ -1972,7 +2324,7 @@ function Player(props) {
                           )
                         ] }),
                         /* @__PURE__ */ jsxs("div", { className: "lk-iv-bar-group", children: [
-                          quizzes.length > 0 || chapters.length > 0 || hasCaptions ? /* @__PURE__ */ jsx(
+                          quizzes.length > 0 || chapters.length > 0 || hasTranscript ? /* @__PURE__ */ jsx(
                             "button",
                             {
                               type: "button",
@@ -1990,12 +2342,7 @@ function Player(props) {
                               className: "lk-iv-button",
                               "aria-label": preferences.captions ? strings.videoCaptionsHide : strings.videoCaptionsShow,
                               "aria-pressed": preferences.captions,
-                              onClick: () => {
-                                changePreferences({ captions: !preferences.captions });
-                                emit("video-captions-changed", {
-                                  srclang: preferences.captions ? null : activeTrack?.srclang ?? null
-                                });
-                              },
+                              onClick: () => changePreferences({ captions: !preferences.captions }),
                               children: /* @__PURE__ */ jsx(CaptionsIcon, { on: preferences.captions })
                             }
                           ) : null,
@@ -2043,8 +2390,11 @@ function Player(props) {
                               {
                                 preferences,
                                 tracks,
-                                activeTrack,
+                                primaryTrack,
+                                secondaryTrack,
                                 captionsFailed,
+                                onCaptionTrack: chooseCaptionTrack,
+                                onSecondaryTrack: chooseSecondaryTrack,
                                 strings,
                                 onChange: changePreferences,
                                 onShowShortcuts: () => {
@@ -2225,7 +2575,10 @@ function Player(props) {
               onTab: setPanelTab,
               chapters,
               quizzes,
-              cues: captionCues,
+              cues: primaryCues,
+              primaryLanguage: primaryTrack?.srclang,
+              secondaryCues: secondaryTrack === void 0 ? NO_CUES : secondaryCues,
+              secondaryLanguage: secondaryTrack?.srclang,
               activeCue: activeCueIndex,
               limit: spoilerLimit,
               strings,
@@ -2325,6 +2678,6 @@ function InteractiveVideo2(props) {
   );
 }
 
-export { InteractiveVideo2 as InteractiveVideo };
-//# sourceMappingURL=chunk-2HAEQDHQ.js.map
-//# sourceMappingURL=chunk-2HAEQDHQ.js.map
+export { InteractiveVideo2 as InteractiveVideo, resolveCaptionTracks };
+//# sourceMappingURL=chunk-3IHVDQRC.js.map
+//# sourceMappingURL=chunk-3IHVDQRC.js.map