@intellectif/lk-react 15.0.0 → 16.1.0

package/dist/{chunk-2HAEQDHQ.js → chunk-DVOPHC2Q.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-3UXRX4KU.js';
+import { FillInTheBlanks } from './chunk-VC2MPB2Y.js';
+import { GapSelect } from './chunk-5QHVYOME.js';
+import { Dictation } from './chunk-IQI5I2X5.js';
+import { stopCaptureGroup, SequenceSlotContext, ReadAloud } from './chunk-GUPBIEUA.js';
+import { ActivityErrorBoundary, isDevelopment } from './chunk-DKZWUIQD.js';
+import { useLkStrings } from './chunk-KSAINXRG.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}`
@@ -543,8 +700,10 @@ function EndScreen({
   strings,
   onOpenQuiz,
   onWatchAgain,
+  pending,
   onFinish
 }) {
+  const pendingId = `${idPrefix}-end-pending`;
   const headingRef = useRef(null);
   useEffect(() => {
     headingRef.current?.focus();
@@ -569,12 +728,23 @@ function EndScreen({
         ]
       }
     ) }, quiz.id)) }) : null,
+    onFinish !== void 0 && pending ? /* @__PURE__ */ jsx("p", { id: pendingId, className: "lk-iv-end-pending", role: "status", children: strings.videoAnswerPending }) : null,
     /* @__PURE__ */ jsxs("div", { className: "lk-iv-end-actions", children: [
       /* @__PURE__ */ jsxs("button", { type: "button", className: "lk-iv-action", onClick: onWatchAgain, children: [
         /* @__PURE__ */ jsx(ReplayIcon, {}),
         strings.videoWatchAgain
       ] }),
-      onFinish !== void 0 ? /* @__PURE__ */ jsx("button", { type: "button", className: "lk-iv-action lk-iv-action-primary", onClick: onFinish, children: strings.videoFinish }) : null
+      onFinish !== void 0 ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "lk-iv-action lk-iv-action-primary",
+          "aria-disabled": pending || void 0,
+          "aria-describedby": pending ? pendingId : void 0,
+          onClick: onFinish,
+          children: strings.videoFinish
+        }
+      ) : null
     ] })
   ] }) });
 }
@@ -586,45 +756,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 +1142,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 +1268,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();
@@ -1048,18 +1299,61 @@ function Player(props) {
   });
   const answeredRef = useRef(answered);
   answeredRef.current = answered;
-  const scores = useRef(/* @__PURE__ */ new Map());
-  const markAnswered = useCallback((slotId) => {
+  const setSlotAnswered = useCallback((slotId, on) => {
     setAnswered((previous) => {
-      if (previous.has(slotId)) {
+      if (previous.has(slotId) === on) {
         return previous;
       }
       const next = new Set(previous);
-      next.add(slotId);
+      if (on) {
+        next.add(slotId);
+      } else {
+        next.delete(slotId);
+      }
       answeredRef.current = next;
       return next;
     });
   }, []);
+  const [scores, setScores] = useState(() => /* @__PURE__ */ new Map());
+  const setSlotScore = useCallback((slotId, score) => {
+    setScores((previous) => {
+      if (previous.get(slotId) === score) {
+        return previous;
+      }
+      const next = new Map(previous);
+      if (score === void 0) {
+        next.delete(slotId);
+      } else {
+        next.set(slotId, score);
+      }
+      return next;
+    });
+  }, []);
+  const [pending, setPendingState] = useState(() => /* @__PURE__ */ new Set());
+  const pendingRef = useRef(pending);
+  const setPendingKey = useCallback((key, on) => {
+    setPendingState((previous) => {
+      if (previous.has(key) === on) {
+        return previous;
+      }
+      const next = new Set(previous);
+      if (on) {
+        next.add(key);
+      } else {
+        next.delete(key);
+      }
+      pendingRef.current = next;
+      return next;
+    });
+  }, []);
+  const latestTakes = useRef(/* @__PURE__ */ new Map());
+  const alive = useRef(true);
+  useEffect(() => {
+    alive.current = true;
+    return () => {
+      alive.current = false;
+    };
+  }, []);
   const finished = useCallback(
     (cueId) => (slotsByCue.get(cueId) ?? []).every((slot) => answeredRef.current.has(slot.slotId)),
     [slotsByCue]
@@ -1068,6 +1362,7 @@ function Player(props) {
   const videoRef = useRef(null);
   const playButtonRef = useRef(null);
   const quizHeadingRef = useRef(null);
+  const [portalContainer, setPortalContainer] = useState(null);
   const [playing, setPlaying] = useState(false);
   const [waiting, setWaiting] = useState(false);
   const [errorCode, setErrorCode] = useState(null);
@@ -1304,43 +1599,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 pending2 = loading.current.get(key);
+    if (pending2 !== void 0) {
+      return pending2;
     }
-    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 +1883,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") });
@@ -1564,7 +1943,7 @@ function Player(props) {
   }));
   const totalQuestions = quizzes.reduce((sum, quiz) => sum + quiz.total, 0);
   const answeredCount = quizzes.reduce((sum, quiz) => sum + quiz.answered, 0);
-  const graded = [...scores.current.values()];
+  const graded = [...scores.values()];
   const percent = graded.length === 0 ? null : Math.round(graded.reduce((a, b) => a + b, 0) / graded.length * 100);
   const summary = useCallback(() => {
     return {
@@ -1586,11 +1965,12 @@ function Player(props) {
     finishedOnce.current = true;
     onFinished?.(summary());
   }, [onFinished, summary]);
+  const answerPending = pending.size > 0;
   useEffect(() => {
-    if (ended && totalQuestions > 0 && answeredCount === totalQuestions && renderMode !== "review") {
+    if (ended && !answerPending && totalQuestions > 0 && answeredCount === totalQuestions && renderMode !== "review") {
       finish();
     }
-  }, [ended, totalQuestions, answeredCount, renderMode, finish]);
+  }, [ended, answerPending, totalQuestions, answeredCount, renderMode, finish]);
   const slotBindings = useMemo(() => {
     const bindings = /* @__PURE__ */ new Map();
     if (recordingBinding === void 0) {
@@ -1611,41 +1991,147 @@ function Player(props) {
     }
     return bindings;
   }, [slots, recordingBinding]);
-  const renderQuestion = (slot, cueId) => {
-    const activity = slot.activity;
-    const place = {
-      slotId: slot.slotId,
-      index: slot.index,
-      activityId: activity.id,
-      cueId
+  const places = useMemo(() => {
+    const byId = /* @__PURE__ */ new Map();
+    for (const [cueId, cueSlots] of slotsByCue) {
+      for (const slot of cueSlots) {
+        byId.set(slot.slotId, {
+          slotId: slot.slotId,
+          index: slot.index,
+          activityId: slot.activity.id,
+          cueId
+        });
+      }
+    }
+    return byId;
+  }, [slotsByCue]);
+  const reportTo = useRef({ onSubmit, onActivityComplete, onInteraction, renderMode });
+  reportTo.current = { onSubmit, onActivityComplete, onInteraction, renderMode };
+  const calls = useRef(/* @__PURE__ */ new Map());
+  const callsFor = (place) => {
+    const made = calls.current.get(place.slotId);
+    if (made !== void 0) {
+      return made;
+    }
+    const { slotId } = place;
+    const warned = /* @__PURE__ */ new Set();
+    const refused = (call) => {
+      if (reportTo.current.renderMode !== "review") {
+        return false;
+      }
+      if (isDevelopment() && !warned.has(call)) {
+        warned.add(call);
+        console.warn(
+          `InteractiveVideo: \`${call}()\` was called for question "${slotId}" in renderMode "review", where nothing is submittable. It was ignored.`
+        );
+      }
+      return true;
+    };
+    const next = {
+      submit: (response) => {
+        if (!alive.current || refused("submit")) {
+          return;
+        }
+        setSlotAnswered(slotId, true);
+        reportTo.current.onSubmit?.(response, place);
+      },
+      complete: (result) => {
+        if (!alive.current || refused("complete")) {
+          return;
+        }
+        setSlotAnswered(slotId, true);
+        setSlotScore(slotId, result.maxScore > 0 ? result.score / result.maxScore : void 0);
+        reportTo.current.onActivityComplete?.(result, place);
+      },
+      clear: () => {
+        if (!alive.current || refused("clear")) {
+          return;
+        }
+        setSlotAnswered(slotId, false);
+        setSlotScore(slotId, void 0);
+      },
+      setPending: (on) => {
+        if (!alive.current) {
+          return;
+        }
+        setPendingKey(`host:${slotId}`, on === true);
+      },
+      emit: (type, payload) => {
+        if (!alive.current) {
+          return;
+        }
+        reportTo.current.onInteraction?.({
+          type,
+          activityId: place.activityId,
+          timestamp: Date.now(),
+          ...payload !== void 0 ? { payload } : {}
+        });
+      }
     };
-    const restored = props.responses !== void 0 && Object.hasOwn(props.responses, slot.slotId) ? props.responses[slot.slotId] : void 0;
-    const outcome = props.outcomes !== void 0 && Object.hasOwn(props.outcomes, slot.slotId) ? props.outcomes[slot.slotId] : void 0;
+    calls.current.set(slotId, next);
+    return next;
+  };
+  const reportTake = (slotId, take, state) => {
+    if (!alive.current) {
+      return;
+    }
+    const latest = latestTakes.current.get(slotId);
+    if (latest !== void 0 && take < latest) {
+      return;
+    }
+    latestTakes.current.set(slotId, take);
+    setPendingKey(`take:${slotId}`, state === "in-flight");
+  };
+  const channels = useRef(/* @__PURE__ */ new Map());
+  const channelFor = (slotId) => {
+    let channel = channels.current.get(slotId);
+    if (channel === void 0) {
+      channel = {
+        captureGroup: `${playerId}::${slotId}`,
+        takeState: (take, state) => reportTake(slotId, take, state)
+      };
+      channels.current.set(slotId, channel);
+    }
+    return channel;
+  };
+  const seedsFor = (slotId) => ({
+    restored: props.responses !== void 0 && Object.hasOwn(props.responses, slotId) ? props.responses[slotId] : void 0,
+    outcome: props.outcomes !== void 0 && Object.hasOwn(props.outcomes, slotId) ? props.outcomes[slotId] : void 0
+  });
+  const questionFor = (slot, place, active) => {
+    const { restored, outcome } = seedsFor(slot.slotId);
+    return {
+      activity: slot.activity,
+      slot: place,
+      renderMode,
+      active,
+      ...locale !== void 0 ? { locale } : {},
+      ...restored !== void 0 ? { defaultValue: restored } : {},
+      defaultSubmitted: submitted.has(slot.slotId),
+      ...outcome !== void 0 ? { outcome } : {},
+      portalContainer,
+      ...callsFor(place)
+    };
+  };
+  const sdkQuestion = (slot, place) => {
+    const activity = slot.activity;
+    const { restored, outcome } = seedsFor(slot.slotId);
+    const reported = callsFor(place);
     const common = {
       renderMode,
       ...restored !== void 0 ? { defaultValue: restored } : {},
       ...submitted.has(slot.slotId) ? { defaultSubmitted: true } : {},
       ...outcome !== void 0 ? { outcome } : {},
-      onSubmit: (response) => {
-        markAnswered(slot.slotId);
-        onSubmit?.(response, place);
-      },
-      onComplete: (result) => {
-        markAnswered(slot.slotId);
-        if (result.maxScore > 0) {
-          scores.current.set(slot.slotId, result.score / result.maxScore);
-        }
-        onActivityComplete?.(result, place);
-      },
+      onSubmit: reported.submit,
+      onComplete: reported.complete,
       ...onInteraction !== void 0 ? { onInteraction } : {},
       ...sanitizeHtml !== void 0 ? { sanitizeHtml } : {},
       ...props.strings !== void 0 ? { strings: props.strings } : {},
       ...locale !== void 0 ? { locale } : {}
     };
-    let question;
     switch (activity.type) {
       case "multiple-choice":
-        question = /* @__PURE__ */ jsx(
+        return /* @__PURE__ */ jsx(
           MultipleChoice,
           {
             data: activity,
@@ -1653,12 +2139,10 @@ function Player(props) {
             ...shuffleSeed !== void 0 ? { shuffleSeed } : {}
           }
         );
-        break;
       case "fill-in-the-blanks":
-        question = /* @__PURE__ */ jsx(FillInTheBlanks, { data: activity, ...common });
-        break;
+        return /* @__PURE__ */ jsx(FillInTheBlanks, { data: activity, ...common });
       case "gap-select":
-        question = /* @__PURE__ */ jsx(
+        return /* @__PURE__ */ jsx(
           GapSelect,
           {
             data: activity,
@@ -1666,14 +2150,12 @@ function Player(props) {
             ...shuffleSeed !== void 0 ? { shuffleSeed } : {}
           }
         );
-        break;
       case "dictation":
-        question = /* @__PURE__ */ jsx(Dictation, { data: activity, ...common });
-        break;
+        return /* @__PURE__ */ jsx(Dictation, { data: activity, ...common });
       case "read-aloud": {
         const binding = slotBindings.get(slot.slotId);
         const assessment = props.assessments !== void 0 && Object.hasOwn(props.assessments, slot.slotId) ? props.assessments[slot.slotId] : void 0;
-        question = /* @__PURE__ */ jsx(
+        return /* @__PURE__ */ jsx(
           ReadAloud,
           {
             data: activity,
@@ -1683,21 +2165,10 @@ function Player(props) {
             ...workletUrl !== void 0 ? { workletUrl } : {}
           }
         );
-        break;
       }
       default:
-        question = null;
-    }
-    return question;
-  };
-  const channels = useRef(/* @__PURE__ */ new Map());
-  const channelFor = (slotId) => {
-    let channel = channels.current.get(slotId);
-    if (channel === void 0) {
-      channel = { captureGroup: `${playerId}::${slotId}`, takeState: () => void 0 };
-      channels.current.set(slotId, channel);
+        return null;
     }
-    return channel;
   };
   if (devError !== null) {
     throw devError;
@@ -1718,7 +2189,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 +2303,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 +2388,7 @@ function Player(props) {
                           buffered,
                           chapters,
                           markers,
-                          cues: captionCues,
+                          cues: primaryCues,
                           previewLimit: spoilerLimit,
                           strings,
                           onSeek: seek,
@@ -1972,7 +2473,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 +2491,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 +2539,11 @@ function Player(props) {
                               {
                                 preferences,
                                 tracks,
-                                activeTrack,
+                                primaryTrack,
+                                secondaryTrack,
                                 captionsFailed,
+                                onCaptionTrack: chooseCaptionTrack,
+                                onSecondaryTrack: chooseSecondaryTrack,
                                 strings,
                                 onChange: changePreferences,
                                 onShowShortcuts: () => {
@@ -2090,7 +2589,7 @@ function Player(props) {
                     "aria-labelledby": `${playerId}-quiz-title`,
                     hidden: openQuiz === null,
                     onKeyDown: (event) => {
-                      if (event.key === "Escape" && !required && openQuiz !== null) {
+                      if (event.key === "Escape" && !event.defaultPrevented && !required && openQuiz !== null) {
                         event.preventDefault();
                         closeQuiz("skip");
                       }
@@ -2137,15 +2636,29 @@ function Player(props) {
                         ] }) : null
                       ] }) : null,
                       /* @__PURE__ */ jsx("div", { className: "lk-iv-quiz-body", children: cues.filter((cue) => mounted.has(cue.id)).map(
-                        (cue) => (slotsByCue.get(cue.id) ?? []).map((slot, index) => /* @__PURE__ */ jsx(
-                          QuestionPane,
-                          {
-                            hidden: !(openQuiz?.cueId === cue.id && step === index),
-                            channel: channelFor(slot.slotId),
-                            children: renderQuestion(slot, cue.id)
-                          },
-                          slot.slotId
-                        ))
+                        (cue) => (slotsByCue.get(cue.id) ?? []).map((slot, index) => {
+                          const shown = openQuiz?.cueId === cue.id && step === index;
+                          const place = places.get(slot.slotId);
+                          return /* @__PURE__ */ jsx(
+                            QuestionPane,
+                            {
+                              hidden: !shown,
+                              channel: channelFor(slot.slotId),
+                              children: /* @__PURE__ */ jsx(
+                                SlotQuestion,
+                                {
+                                  title: slot.activity.title,
+                                  strings,
+                                  render: props.renderQuestion,
+                                  question: props.renderQuestion === void 0 ? void 0 : questionFor(slot, place, shown),
+                                  sdk: () => sdkQuestion(slot, place),
+                                  setHostPending: callsFor(place).setPending
+                                }
+                              )
+                            },
+                            slot.slotId
+                          );
+                        })
                       ) }),
                       openCue !== void 0 ? /* @__PURE__ */ jsxs("div", { className: "lk-iv-quiz-foot", children: [
                         /* @__PURE__ */ jsxs("div", { className: "lk-iv-quiz-foot-start", children: [
@@ -2201,7 +2714,14 @@ function Player(props) {
                       }
                     },
                     onWatchAgain: togglePlay,
-                    onFinish: renderMode === "review" ? void 0 : finish
+                    pending: answerPending,
+                    onFinish: renderMode === "review" ? void 0 : () => {
+                      if (pendingRef.current.size > 0) {
+                        announce(strings.videoAnswerPending);
+                        return;
+                      }
+                      finish();
+                    }
                   }
                 ) : null,
                 sheet ? /* @__PURE__ */ jsx(
@@ -2225,7 +2745,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,
@@ -2249,12 +2772,43 @@ function Player(props) {
               }
             }
           ) : null,
-          /* @__PURE__ */ jsx("div", { className: "lk-iv-live", "aria-live": "polite", "aria-atomic": "true", children: announcement })
+          /* @__PURE__ */ jsx("div", { className: "lk-iv-live", "aria-live": "polite", "aria-atomic": "true", children: announcement }),
+          /* @__PURE__ */ jsx("div", { ref: setPortalContainer, className: "lk-iv-portal" })
         ]
       }
     )
   );
 }
+function SlotQuestion({
+  title,
+  strings,
+  ...content
+}) {
+  return /* @__PURE__ */ jsx(
+    ActivityErrorBoundary,
+    {
+      ...title !== void 0 ? { activityTitle: title } : {},
+      strings,
+      children: /* @__PURE__ */ jsx(SlotContent, { ...content })
+    }
+  );
+}
+function SlotContent({
+  render,
+  question,
+  sdk,
+  setHostPending
+}) {
+  const hosted = render !== void 0 && question !== void 0 ? render(question) : void 0;
+  const hosting = hosted !== void 0;
+  useEffect(() => {
+    if (!hosting) {
+      return;
+    }
+    return () => setHostPending(false);
+  }, [hosting, setHostPending]);
+  return hosting ? hosted : sdk();
+}
 function QuestionPane({
   hidden,
   channel,
@@ -2325,6 +2879,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-DVOPHC2Q.js.map
+//# sourceMappingURL=chunk-DVOPHC2Q.js.map