@intellectif/lk-react 14.1.0 → 15.0.0

package/dist/chunk-SRD4KVAP.cjs

@@ -0,0 +1,2332 @@
+'use client';
+'use strict';
+
+var chunkL7NE7PR4_cjs = require('./chunk-L7NE7PR4.cjs');
+var chunk4H3JTX74_cjs = require('./chunk-4H3JTX74.cjs');
+var chunkEKBEKDWO_cjs = require('./chunk-EKBEKDWO.cjs');
+var chunkXMJE34FY_cjs = require('./chunk-XMJE34FY.cjs');
+var chunkZH5WT2IE_cjs = require('./chunk-ZH5WT2IE.cjs');
+var chunk53YOZOGN_cjs = require('./chunk-53YOZOGN.cjs');
+var chunkZ6TVOAO5_cjs = require('./chunk-Z6TVOAO5.cjs');
+var lkCore = require('@intellectif/lk-core');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/InteractiveVideo/format.ts
+var SPEEDS = [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 2.5];
+function clock(value) {
+  const total = Number.isFinite(value) && value > 0 ? Math.floor(value) : 0;
+  const hours = Math.floor(total / 3600);
+  const minutes = Math.floor(total % 3600 / 60);
+  const secs = total % 60;
+  const pad = (n) => String(n).padStart(2, "0");
+  return hours > 0 ? `${hours}:${pad(minutes)}:${pad(secs)}` : `${minutes}:${pad(secs)}`;
+}
+function nudgeSpeed(current, direction) {
+  const at = SPEEDS.indexOf(current);
+  const from = at === -1 ? SPEEDS.indexOf(1) : at;
+  return SPEEDS[Math.min(SPEEDS.length - 1, Math.max(0, from + direction))];
+}
+function Icon({ children, filled = false }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      className: "lk-iv-icon",
+      viewBox: "0 0 24 24",
+      width: "20",
+      height: "20",
+      fill: filled ? "currentColor" : "none",
+      stroke: "currentColor",
+      strokeWidth: "1.8",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      focusable: "false",
+      children
+    }
+  );
+}
+var PlayIcon = () => /* @__PURE__ */ jsxRuntime.jsx(Icon, { filled: true, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 5.5v13a1 1 0 0 0 1.5.86l10.2-6.5a1 1 0 0 0 0-1.72L9.5 4.64A1 1 0 0 0 8 5.5Z" }) });
+var PauseIcon = () => /* @__PURE__ */ jsxRuntime.jsxs(Icon, { filled: true, children: [
+  /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "6.5", y: "5", width: "3.5", height: "14", rx: "1" }),
+  /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "14", y: "5", width: "3.5", height: "14", rx: "1" })
+] });
+var ReplayIcon = () => /* @__PURE__ */ jsxRuntime.jsxs(Icon, { children: [
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 12a8 8 0 1 0 2.4-5.7" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 4v4h4" })
+] });
+var BackIcon = () => /* @__PURE__ */ jsxRuntime.jsxs(Icon, { children: [
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M11 6.5 5.5 12l5.5 5.5" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18.5 6.5 13 12l5.5 5.5" })
+] });
+var ForwardIcon = () => /* @__PURE__ */ jsxRuntime.jsxs(Icon, { children: [
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m13 6.5 5.5 5.5-5.5 5.5" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5.5 6.5 11 12l-5.5 5.5" })
+] });
+var VolumeIcon = ({ level }) => /* @__PURE__ */ jsxRuntime.jsxs(Icon, { children: [
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 9.5v5h3.5L12 18.5v-13L7.5 9.5H4Z" }),
+  level === "muted" ? /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m16 9.5 5 5m0-5-5 5" }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15.5 9.5a3.5 3.5 0 0 1 0 5" }),
+    level === "high" ? /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 7a7 7 0 0 1 0 10" }) : null
+  ] })
+] });
+var CaptionsIcon = ({ on }) => /* @__PURE__ */ jsxRuntime.jsxs(Icon, { children: [
+  /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "5.5", width: "18", height: "13", rx: "2.5" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 10.5a2 2 0 1 0 0 3M16 10.5a2 2 0 1 0 0 3" }),
+  on ? null : /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m4 20 16-16" })
+] });
+var SettingsIcon = () => /* @__PURE__ */ jsxRuntime.jsxs(Icon, { children: [
+  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "3" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 3.5v2M12 18.5v2M20.5 12h-2M5.5 12h-2M18 6l-1.4 1.4M7.4 16.6 6 18M18 18l-1.4-1.4M7.4 7.4 6 6" })
+] });
+var ContentsIcon = () => /* @__PURE__ */ jsxRuntime.jsxs(Icon, { children: [
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 6.5h11M9 12h11M9 17.5h11" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4.5 6.5h.01M4.5 12h.01M4.5 17.5h.01" })
+] });
+var PictureInPictureIcon = () => /* @__PURE__ */ jsxRuntime.jsxs(Icon, { children: [
+  /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "5", width: "18", height: "14", rx: "2" }),
+  /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "12", y: "11.5", width: "6.5", height: "5", rx: "1" })
+] });
+var FullscreenIcon = ({ on }) => /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: on ? /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 4v3a2 2 0 0 1-2 2H4M20 9h-3a2 2 0 0 1-2-2V4M4 15h3a2 2 0 0 1 2 2v3M15 20v-3a2 2 0 0 1 2-2h3" }) : /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 9V6a2 2 0 0 1 2-2h3M15 4h3a2 2 0 0 1 2 2v3M20 15v3a2 2 0 0 1-2 2h-3M9 20H6a2 2 0 0 1-2-2v-3" }) });
+var CheckIcon = () => /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m5 12.5 4.5 4.5L19 7.5" }) });
+var ChevronIcon = ({ direction }) => /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: direction === "right" ? "m9.5 6 6 6-6 6" : "m14.5 6-6 6 6 6" }) });
+var CloseIcon = () => /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6.5 6.5 11 11m0-11-11 11" }) });
+var AlertIcon = () => /* @__PURE__ */ jsxRuntime.jsxs(Icon, { children: [
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 4 2.8 19.5h18.4L12 4Z" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 10v4M12 17h.01" })
+] });
+
+// src/components/InteractiveVideo/shortcuts.ts
+var SHORTCUT_KEYS = [
+  { action: "play-pause", keys: "Space / K" },
+  { action: "jump-10", keys: "J / L" },
+  { action: "jump-5", keys: "\u2190 / \u2192" },
+  { action: "jump-1", keys: "Shift + \u2190 / \u2192" },
+  { action: "frame", keys: ", / ." },
+  { action: "speed", keys: "< / >" },
+  { action: "percent", keys: "0 \u2013 9" },
+  { action: "start-end", keys: "Home / End" },
+  { action: "chapter", keys: "[ / ]" },
+  { action: "mute", keys: "M" },
+  { action: "captions", keys: "C" },
+  { action: "transcript", keys: "T" },
+  { action: "picture-in-picture", keys: "P" },
+  { action: "fullscreen", keys: "F" },
+  { action: "shortcut-list", keys: "?" }
+];
+var JUMP_SECONDS = 10;
+var FRAME_SECONDS = 1 / 30;
+function Menu({
+  label,
+  onClose,
+  children
+}) {
+  const ref = react.useRef(null);
+  react.useEffect(() => {
+    const items = ref.current?.querySelectorAll('[role^="menuitem"]');
+    const checked = ref.current?.querySelector('[aria-checked="true"]');
+    (checked ?? items?.[0])?.focus();
+  }, []);
+  const onKeyDown = (event) => {
+    const items = Array.from(
+      ref.current?.querySelectorAll('[role^="menuitem"]') ?? []
+    );
+    const at = items.indexOf(document.activeElement);
+    const move = (to) => {
+      event.preventDefault();
+      items[(to + items.length) % items.length]?.focus();
+    };
+    if (event.key === "ArrowDown") {
+      move(at + 1);
+    } else if (event.key === "ArrowUp") {
+      move(at - 1);
+    } else if (event.key === "Home") {
+      move(0);
+    } else if (event.key === "End") {
+      move(items.length - 1);
+    } else if (event.key === "Escape") {
+      event.preventDefault();
+      event.stopPropagation();
+      onClose();
+    }
+    event.stopPropagation();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: "lk-iv-menu", role: "menu", "aria-label": label, onKeyDown, children });
+}
+function SpeedMenu({
+  speed,
+  strings,
+  onChoose,
+  onClose
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Menu, { label: strings.media.speed, onClose, children: SPEEDS.map((rate) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      role: "menuitemradio",
+      "aria-checked": rate === speed,
+      className: "lk-iv-menu-item",
+      onClick: () => onChoose(rate),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: strings.videoSpeedValue(rate) }),
+        rate === speed ? /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, {}) : null
+      ]
+    },
+    rate
+  )) });
+}
+function SettingsMenu({
+  preferences,
+  tracks,
+  activeTrack,
+  captionsFailed,
+  strings,
+  onChange,
+  onShowShortcuts,
+  onClose
+}) {
+  const [page, setPage] = react.useState("main");
+  const captionsValue = !preferences.captions || activeTrack === void 0 ? strings.videoOff : activeTrack.label;
+  const back = /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      role: "menuitem",
+      className: "lk-iv-menu-item lk-iv-menu-back",
+      onClick: () => setPage("main"),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ChevronIcon, { direction: "left" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: page === "captions" ? strings.videoCaptionLanguage : strings.videoCaptionSize })
+      ]
+    }
+  );
+  if (page === "captions") {
+    return /* @__PURE__ */ jsxRuntime.jsxs(Menu, { label: strings.videoCaptionLanguage, onClose, children: [
+      back,
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          role: "menuitemradio",
+          "aria-checked": !preferences.captions,
+          className: "lk-iv-menu-item",
+          onClick: () => onChange({ captions: false }),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: strings.videoOff }),
+            !preferences.captions ? /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, {}) : null
+          ]
+        }
+      ),
+      tracks.map((track) => {
+        const on = preferences.captions && activeTrack === track;
+        return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { children: track.label }),
+              on ? /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, {}) : null
+            ]
+          },
+          `${track.kind}:${track.srclang}`
+        );
+      }),
+      captionsFailed ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "lk-iv-menu-note", role: "status", children: strings.videoCaptionsFailed }) : null
+    ] }, "captions");
+  }
+  if (page === "size") {
+    return /* @__PURE__ */ jsxRuntime.jsxs(Menu, { label: strings.videoCaptionSize, onClose, children: [
+      back,
+      ["small", "medium", "large"].map((size) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          role: "menuitemradio",
+          "aria-checked": preferences.captionSize === size,
+          className: "lk-iv-menu-item",
+          onClick: () => onChange({ captionSize: size }),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: strings.videoCaptionSizeValue(size) }),
+            preferences.captionSize === size ? /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, {}) : null
+          ]
+        },
+        size
+      ))
+    ] }, "size");
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(Menu, { label: strings.videoSettings, onClose, children: [
+    tracks.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          role: "menuitem",
+          className: "lk-iv-menu-item",
+          onClick: () => setPage("captions"),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: strings.videoCaptionLanguage }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "lk-iv-menu-value", children: [
+              captionsValue,
+              /* @__PURE__ */ jsxRuntime.jsx(ChevronIcon, { direction: "right" })
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          role: "menuitem",
+          className: "lk-iv-menu-item",
+          onClick: () => setPage("size"),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: strings.videoCaptionSize }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "lk-iv-menu-value", children: [
+              strings.videoCaptionSizeValue(preferences.captionSize),
+              /* @__PURE__ */ jsxRuntime.jsx(ChevronIcon, { direction: "right" })
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          role: "menuitemcheckbox",
+          "aria-checked": preferences.captionBackground,
+          className: "lk-iv-menu-item",
+          onClick: () => onChange({ captionBackground: !preferences.captionBackground }),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: strings.videoCaptionBackground }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lk-iv-menu-value", children: preferences.captionBackground ? strings.videoOn : strings.videoOff })
+          ]
+        }
+      )
+    ] }) : null,
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        role: "menuitemcheckbox",
+        "aria-checked": preferences.shortcuts,
+        className: "lk-iv-menu-item",
+        onClick: () => onChange({ shortcuts: !preferences.shortcuts }),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: strings.videoKeyboardShortcuts }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lk-iv-menu-value", children: preferences.shortcuts ? strings.videoOn : strings.videoOff })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", role: "menuitem", className: "lk-iv-menu-item", onClick: onShowShortcuts, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: strings.videoShortcutList }),
+      /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: "lk-iv-kbd", children: "?" })
+    ] })
+  ] }, "main");
+}
+function ShortcutSheet({ strings, onClose }) {
+  const closeRef = react.useRef(null);
+  react.useEffect(() => {
+    closeRef.current?.focus();
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "lk-iv-sheet",
+      role: "dialog",
+      "aria-modal": "false",
+      "aria-label": strings.videoKeyboardShortcuts,
+      onKeyDown: (event) => {
+        if (event.key === "Escape" || event.key === "?") {
+          event.preventDefault();
+          event.stopPropagation();
+          onClose();
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lk-iv-sheet-head", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "lk-iv-sheet-title", children: strings.videoKeyboardShortcuts }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              ref: closeRef,
+              type: "button",
+              className: "lk-iv-button",
+              "aria-label": strings.videoClose,
+              onClick: onClose,
+              children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, {})
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("dl", { className: "lk-iv-shortcuts", children: SHORTCUT_KEYS.map(({ action, keys }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lk-iv-shortcut", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("dt", { children: /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: "lk-iv-kbd", children: keys }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("dd", { children: strings.videoShortcut(action) })
+        ] }, action)) })
+      ]
+    }
+  );
+}
+function ContentsPanel({
+  idPrefix,
+  tab,
+  onTab,
+  chapters,
+  quizzes,
+  cues,
+  activeCue,
+  limit,
+  strings,
+  onSeek,
+  onOpenQuiz
+}) {
+  const [query, setQuery] = react.useState("");
+  const listRef = react.useRef(null);
+  const followUntil = react.useRef(0);
+  const hasTranscript = cues.length > 0;
+  const shownTab = hasTranscript ? tab : "contents";
+  const lines = react.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]);
+  react.useEffect(() => {
+    if (shownTab !== "transcript" || query.trim() !== "" || Date.now() < followUntil.current) {
+      return;
+    }
+    const active = listRef.current?.querySelector('[data-active="true"]');
+    if (active !== null && active !== void 0 && listRef.current !== null) {
+      const list = listRef.current;
+      const top = active.offsetTop - list.clientHeight / 3;
+      list.scrollTo?.({ top, behavior: "smooth" });
+    }
+  }, [activeCue, shownTab, query]);
+  const rows = [
+    ...chapters.map((chapter) => ({ kind: "chapter", at: chapter.at, chapter })),
+    ...quizzes.map((quiz) => ({ kind: "quiz", at: quiz.at, quiz }))
+  ].sort((a, b) => a.at - b.at || (a.kind === "chapter" ? -1 : 1));
+  const highlight = (text) => {
+    const trimmed = query.trim();
+    const at = trimmed === "" ? -1 : text.toLowerCase().indexOf(trimmed.toLowerCase());
+    if (at === -1) {
+      return text;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      text.slice(0, at),
+      /* @__PURE__ */ jsxRuntime.jsx("mark", { children: text.slice(at, at + trimmed.length) }),
+      text.slice(at + trimmed.length)
+    ] });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "lk-iv-panel", "aria-label": strings.videoPanel, children: [
+    hasTranscript ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lk-iv-tabs", role: "tablist", "aria-label": strings.videoPanel, children: ["contents", "transcript"].map((name) => /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        role: "tab",
+        id: `${idPrefix}-tab-${name}`,
+        "aria-controls": `${idPrefix}-tabpanel`,
+        "aria-selected": shownTab === name,
+        tabIndex: shownTab === name ? 0 : -1,
+        className: "lk-iv-tab",
+        onClick: () => onTab(name),
+        onKeyDown: (event) => {
+          if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+            event.preventDefault();
+            onTab(name === "contents" ? "transcript" : "contents");
+          }
+        },
+        children: name === "contents" ? strings.videoContents : strings.videoTranscript
+      },
+      name
+    )) }) : null,
+    shownTab === "contents" ? /* @__PURE__ */ jsxRuntime.jsx(
+      "ol",
+      {
+        className: "lk-iv-contents",
+        ...hasTranscript ? {
+          role: "tabpanel",
+          id: `${idPrefix}-tabpanel`,
+          "aria-labelledby": `${idPrefix}-tab-contents`
+        } : { "aria-label": strings.videoContents },
+        children: rows.map(
+          (row) => row.kind === "chapter" ? /* @__PURE__ */ jsxRuntime.jsx("li", { className: "lk-iv-contents-chapter", children: /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: "lk-iv-row", onClick: () => onSeek(row.chapter.at), children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lk-iv-row-time", children: clock(row.chapter.at) }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lk-iv-row-title", children: row.chapter.title })
+          ] }) }, `c-${row.at}`) : /* @__PURE__ */ jsxRuntime.jsx(
+            "li",
+            {
+              className: "lk-iv-contents-quiz",
+              "data-state": row.quiz.state,
+              children: /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: "lk-iv-row", onClick: () => onOpenQuiz(row.quiz.id), children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lk-iv-row-time", children: clock(row.quiz.at) }),
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "lk-iv-row-title", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      className: "lk-iv-marker-dot",
+                      "data-state": row.quiz.state,
+                      "aria-hidden": "true"
+                    }
+                  ),
+                  row.quiz.title,
+                  row.quiz.required ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                    " ",
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lk-iv-tag", children: strings.videoRequired })
+                  ] }) : null
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lk-iv-row-status", children: strings.videoQuizProgress(row.quiz.answered, row.quiz.total) })
+              ] })
+            },
+            `q-${row.quiz.id}`
+          )
+        )
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "lk-iv-transcript",
+        role: "tabpanel",
+        id: `${idPrefix}-tabpanel`,
+        "aria-labelledby": `${idPrefix}-tab-transcript`,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              id: `${idPrefix}-search`,
+              className: "lk-iv-search",
+              type: "search",
+              value: query,
+              placeholder: strings.videoTranscriptSearch,
+              "aria-label": strings.videoTranscriptSearch,
+              onChange: (event) => setQuery(event.target.value)
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              ref: listRef,
+              className: "lk-iv-lines",
+              onWheel: () => {
+                followUntil.current = Date.now() + 4e3;
+              },
+              onTouchMove: () => {
+                followUntil.current = Date.now() + 4e3;
+              },
+              children: lines.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "lk-iv-empty", children: strings.videoTranscriptNoMatch }) : lines.map(({ cue, index }) => /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  type: "button",
+                  className: "lk-iv-line",
+                  "data-active": index === activeCue || void 0,
+                  onClick: () => onSeek(cue.start),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lk-iv-row-time", children: clock(cue.start) }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { children: highlight(cue.text) })
+                  ]
+                },
+                `${cue.start}-${index}`
+              ))
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function EndScreen({
+  idPrefix,
+  renderMode,
+  quizzes,
+  answered,
+  total,
+  percent,
+  strings,
+  onOpenQuiz,
+  onWatchAgain,
+  onFinish
+}) {
+  const headingRef = react.useRef(null);
+  react.useEffect(() => {
+    headingRef.current?.focus();
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: "lk-iv-end", "aria-labelledby": `${idPrefix}-end-title`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lk-iv-end-card", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { id: `${idPrefix}-end-title`, ref: headingRef, tabIndex: -1, className: "lk-iv-end-title", children: strings.videoEnded }),
+    total > 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "lk-iv-end-summary", children: percent !== null && renderMode !== "exam" ? strings.videoEndScore(answered, total, percent) : strings.videoEndAnswered(answered, total) }) : null,
+    quizzes.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "lk-iv-end-list", children: quizzes.map((quiz) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        className: "lk-iv-row",
+        "data-state": quiz.state,
+        onClick: () => onOpenQuiz(quiz.id),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lk-iv-row-time", children: clock(quiz.at) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "lk-iv-row-title", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lk-iv-marker-dot", "data-state": quiz.state, "aria-hidden": "true" }),
+            quiz.title
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lk-iv-row-status", children: strings.videoQuizProgress(quiz.answered, quiz.total) })
+        ]
+      }
+    ) }, quiz.id)) }) : null,
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lk-iv-end-actions", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: "lk-iv-action", onClick: onWatchAgain, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ReplayIcon, {}),
+        strings.videoWatchAgain
+      ] }),
+      onFinish !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "lk-iv-action lk-iv-action-primary", onClick: onFinish, children: strings.videoFinish }) : null
+    ] })
+  ] }) });
+}
+
+// src/components/InteractiveVideo/prefs.ts
+var DEFAULT_PREFERENCES = {
+  speed: 1,
+  volume: 1,
+  muted: false,
+  captions: true,
+  captionLanguage: 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;
+  }
+  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)
+  };
+}
+function readPreferences() {
+  try {
+    const stored = globalThis.localStorage?.getItem(STORAGE_KEY);
+    return stored ? sanitizePreferences(JSON.parse(stored)) : DEFAULT_PREFERENCES;
+  } catch {
+    return DEFAULT_PREFERENCES;
+  }
+}
+function writePreferences(preferences) {
+  try {
+    globalThis.localStorage?.setItem(STORAGE_KEY, JSON.stringify(preferences));
+  } catch {
+  }
+}
+
+// src/components/InteractiveVideo/quiz-engine.ts
+function crossedQuiz(cues, previous, now, handled) {
+  let earliest;
+  for (const cue of cues) {
+    if (handled.has(cue.id) || !(previous < cue.at && cue.at <= now)) {
+      continue;
+    }
+    if (earliest === void 0 || cue.at < earliest.at) {
+      earliest = cue;
+    }
+  }
+  return earliest;
+}
+function quizzesAtEnd(cues, duration, handled) {
+  return cues.filter((cue) => !handled.has(cue.id) && cue.at >= duration - 0.05).sort((a, b) => a.at - b.at);
+}
+function limitSeek(timeline, from, to, furthest, finished) {
+  if (to <= from) {
+    return { at: to };
+  }
+  let at = to;
+  let hold;
+  if (timeline.navigation === "no-skip-ahead" && to > furthest) {
+    at = Math.max(from, furthest);
+    hold = { kind: "no-skip-ahead", furthest };
+  }
+  const blocking = timeline.cues.filter((cue) => cue.required === true && cue.at > from && cue.at <= to && !finished(cue.id)).sort((a, b) => a.at - b.at)[0];
+  if (blocking !== void 0 && blocking.at <= at) {
+    return { at: blocking.at, hold: { kind: "required", cue: blocking } };
+  }
+  return hold === void 0 ? { at } : { at, hold };
+}
+function limitResume(timeline, at, finished) {
+  const blocking = timeline.cues.filter((cue) => cue.required === true && cue.at < at && !finished(cue.id)).sort((a, b) => a.at - b.at)[0];
+  return blocking === void 0 ? at : Math.max(0, blocking.at - 0.25);
+}
+
+// src/components/InteractiveVideo/vtt.ts
+var MAX_VTT_LENGTH = 2e6;
+var MAX_CUES = 1e4;
+var BYTE_ORDER_MARK = String.fromCharCode(65279);
+var TIMESTAMP = /^(?:(\d+):)?([0-5]\d):([0-5]\d)\.(\d{3})$/;
+function seconds(stamp) {
+  const match = TIMESTAMP.exec(stamp.trim());
+  if (match === null) {
+    return void 0;
+  }
+  const [, hours = "0", minutes = "0", secs = "0", millis = "0"] = match;
+  return Number(hours) * 3600 + Number(minutes) * 60 + Number(secs) + Number(millis) / 1e3;
+}
+var ENTITIES = {
+  amp: "&",
+  lt: "<",
+  gt: ">",
+  quot: '"',
+  apos: "'",
+  // Built from code points: an escape can be rewritten as the raw, invisible
+  // character itself, by a formatter or an editor.
+  nbsp: String.fromCharCode(160),
+  lrm: String.fromCharCode(8206),
+  rlm: String.fromCharCode(8207)
+};
+function plainText(payload) {
+  return payload.replace(/<[^>]*>/g, "").replace(/&(#x?[0-9a-f]+|[a-z]+);/gi, (whole, name) => {
+    if (name.startsWith("#")) {
+      const code = name[1] === "x" || name[1] === "X" ? Number.parseInt(name.slice(2), 16) : Number.parseInt(name.slice(1), 10);
+      return Number.isFinite(code) && code > 0 && code <= 1114111 ? String.fromCodePoint(code) : whole;
+    }
+    return ENTITIES[name.toLowerCase()] ?? whole;
+  }).replace(/\s*\n\s*/g, " ").trim();
+}
+function parseWebVtt(input) {
+  if (typeof input !== "string") {
+    return [];
+  }
+  const raw = input.slice(0, MAX_VTT_LENGTH);
+  const text = (raw.startsWith(BYTE_ORDER_MARK) ? raw.slice(1) : raw).replace(/\r\n?/g, "\n");
+  if (!/^WEBVTT(?:[ \t].*)?(?:\n|$)/.test(text)) {
+    return [];
+  }
+  const cues = [];
+  for (const block of text.split(/\n{2,}/)) {
+    if (cues.length >= MAX_CUES) {
+      break;
+    }
+    const lines = block.split("\n");
+    const timingIndex = lines.findIndex((line) => line.includes("-->"));
+    if (timingIndex === -1) {
+      continue;
+    }
+    const [from = "", rest = ""] = lines[timingIndex].split("-->");
+    const start = seconds(from);
+    const end = seconds(rest.trim().split(/\s+/)[0] ?? "");
+    if (start === void 0 || end === void 0 || end <= start) {
+      continue;
+    }
+    const payload = plainText(lines.slice(timingIndex + 1).join("\n"));
+    if (payload === "") {
+      continue;
+    }
+    cues.push({ start, end, text: payload });
+  }
+  return cues.map((cue, index) => ({ cue, index })).sort((a, b) => a.cue.start - b.cue.start || a.index - b.index).map(({ cue }) => cue);
+}
+function cueIndexAt(cues, time) {
+  let low = 0;
+  let high = cues.length - 1;
+  let found = -1;
+  while (low <= high) {
+    const middle = low + high >> 1;
+    if (cues[middle].start <= time) {
+      found = middle;
+      low = middle + 1;
+    } else {
+      high = middle - 1;
+    }
+  }
+  for (let index = found; index >= 0 && index > found - 8; index -= 1) {
+    const cue = cues[index];
+    if (time < cue.end) {
+      return index;
+    }
+  }
+  return -1;
+}
+var BUBBLE_HALF = 120;
+var MARKER_REACH = 8;
+function Scrubber({
+  current,
+  duration,
+  buffered,
+  chapters,
+  markers,
+  cues,
+  previewLimit,
+  strings,
+  onSeek,
+  onScrubChange
+}) {
+  const trackRef = react.useRef(null);
+  const [hover, setHover] = react.useState(null);
+  const [dragging, setDragging] = react.useState(false);
+  const ready = duration > 0;
+  const percent = (value) => `${ready ? Math.min(100, Math.max(0, value / duration * 100)) : 0}%`;
+  const measure = react.useCallback(
+    (clientX) => {
+      const rect = trackRef.current?.getBoundingClientRect();
+      if (rect === void 0 || rect.width === 0 || !ready) {
+        return null;
+      }
+      const ratio = Math.min(1, Math.max(0, (clientX - rect.left) / rect.width));
+      return { x: ratio * rect.width, width: rect.width, time: ratio * duration };
+    },
+    [duration, ready]
+  );
+  const onPointerDown = (event) => {
+    const at = measure(event.clientX);
+    if (at === null) {
+      return;
+    }
+    event.currentTarget.setPointerCapture(event.pointerId);
+    setDragging(true);
+    onScrubChange(true);
+    setHover(at);
+    onSeek(at.time);
+  };
+  const onPointerMove = (event) => {
+    const at = measure(event.clientX);
+    if (at === null) {
+      return;
+    }
+    setHover(at);
+    if (dragging) {
+      onSeek(at.time);
+    }
+  };
+  const endDrag = (event) => {
+    if (!dragging) {
+      return;
+    }
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    }
+    setDragging(false);
+    onScrubChange(false);
+  };
+  const onKeyDown = (event) => {
+    if (!ready) {
+      return;
+    }
+    const step = event.shiftKey ? 1 : 5;
+    const moves = {
+      ArrowLeft: -step,
+      ArrowRight: step,
+      ArrowDown: -step,
+      ArrowUp: step,
+      PageDown: -30,
+      PageUp: 30
+    };
+    const move = moves[event.key];
+    if (move !== void 0) {
+      event.preventDefault();
+      event.stopPropagation();
+      onSeek(current + move);
+    } else if (event.key === "Home" || event.key === "End") {
+      event.preventDefault();
+      event.stopPropagation();
+      onSeek(event.key === "Home" ? 0 : duration);
+    }
+  };
+  const chapterAt = (time) => [...chapters].reverse().find((chapter) => chapter.at <= time);
+  const hoverCue = hover !== null && hover.time <= previewLimit ? cues[cueIndexAt(cues, hover.time)] : void 0;
+  const hoverMarker = hover === null ? void 0 : markers.find(
+    (marker) => Math.abs(marker.at / duration * hover.width - hover.x) <= MARKER_REACH
+  );
+  const hoverChapter = hover === null ? void 0 : chapterAt(hover.time);
+  const bubbleLeft = hover === null ? 0 : hover.width > BUBBLE_HALF * 2 ? Math.min(hover.width - BUBBLE_HALF, Math.max(BUBBLE_HALF, hover.x)) : hover.width / 2;
+  const currentChapter = chapterAt(current);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: trackRef,
+      className: "lk-iv-scrubber",
+      role: "slider",
+      tabIndex: ready ? 0 : -1,
+      "aria-label": strings.media.seek,
+      "aria-valuemin": 0,
+      "aria-valuemax": Math.round(duration),
+      "aria-valuenow": Math.round(current),
+      "aria-valuetext": currentChapter === void 0 ? strings.media.timeValue(clock(current), clock(duration)) : `${strings.media.timeValue(clock(current), clock(duration))}, ${currentChapter.title}`,
+      "data-dragging": dragging || void 0,
+      onPointerDown,
+      onPointerMove,
+      onPointerUp: endDrag,
+      onPointerCancel: endDrag,
+      onPointerLeave: () => {
+        if (!dragging) {
+          setHover(null);
+        }
+      },
+      onKeyDown,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lk-iv-scrubber-track", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lk-iv-scrubber-buffered", style: { width: percent(buffered) } }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lk-iv-scrubber-played", style: { width: percent(current) } }),
+          chapters.filter((chapter) => chapter.at > 0 && chapter.at < duration).map((chapter) => /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: "lk-iv-scrubber-gap",
+              style: { insetInlineStart: percent(chapter.at) }
+            },
+            `chapter-${chapter.at}`
+          ))
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "lk-iv-scrubber-thumb",
+            "aria-hidden": "true",
+            style: { insetInlineStart: percent(current) }
+          }
+        ),
+        markers.map((marker) => /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: "lk-iv-marker",
+            "data-state": marker.state,
+            "data-required": marker.required || void 0,
+            "aria-hidden": "true",
+            style: { insetInlineStart: percent(Math.min(marker.at, duration)) }
+          },
+          marker.id
+        )),
+        hover !== null ? /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: "lk-iv-bubble",
+            "aria-hidden": "true",
+            style: { insetInlineStart: `${bubbleLeft}px` },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "lk-iv-bubble-time", children: [
+                clock(hover.time),
+                hoverChapter !== void 0 ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "lk-iv-bubble-chapter", children: [
+                  " \xB7 ",
+                  hoverChapter.title
+                ] }) : null
+              ] }),
+              hoverMarker !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lk-iv-bubble-quiz", children: hoverMarker.label }) : null,
+              hoverCue !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lk-iv-bubble-caption", children: hoverCue.text }) : null
+            ]
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function contentKey(group) {
+  try {
+    return JSON.stringify([group.id, group.stimulus, group.items, group.timeline]);
+  } catch {
+    return String(group?.id);
+  }
+}
+function InteractiveVideo(props) {
+  const key = react.useMemo(() => contentKey(props.group), [props.group]);
+  return /* @__PURE__ */ jsxRuntime.jsx(Player, { ...props }, key);
+}
+function onNextFrame(run) {
+  if (typeof requestAnimationFrame === "function") {
+    const frame = requestAnimationFrame(run);
+    return () => cancelAnimationFrame(frame);
+  }
+  const timer = setTimeout(run, 33);
+  return () => clearTimeout(timer);
+}
+var playerCount = 0;
+var ITEM_TYPES = /* @__PURE__ */ new Set([
+  "multiple-choice",
+  "fill-in-the-blanks",
+  "gap-select",
+  "dictation",
+  "read-aloud"
+]);
+function Player(props) {
+  const {
+    renderMode = "practice",
+    onProgress,
+    onSubmit,
+    onActivityComplete,
+    onFinished,
+    onInteraction,
+    recordingBinding,
+    workletUrl,
+    captionsLoader,
+    label,
+    shuffleSeed,
+    locale,
+    theme,
+    sanitizeHtml
+  } = props;
+  const strings = chunkZ6TVOAO5_cjs.useLkStrings(props.strings);
+  const group = react.useRef(props.group).current;
+  const timeline = group.timeline ?? { cues: [] };
+  const media = group.stimulus.media;
+  const chapters = timeline.chapters ?? [];
+  const devError = react.useMemo(() => {
+    if (!chunk53YOZOGN_cjs.isDevelopment()) {
+      return null;
+    }
+    if (group.timeline === void 0) {
+      return new Error(
+        `InteractiveVideo "${group.id}" was given an item group with no timeline. Give it a timeline \u2014 a list of quizzes, each at a moment of the video \u2014 or render it with <ActivitySequence>.`
+      );
+    }
+    if (group.redacted === true) {
+      try {
+        lkCore.assertRedactedItemGroup(group);
+      } catch (error) {
+        return error;
+      }
+      return null;
+    }
+    const result = lkCore.validateItemGroup(group);
+    return result.success ? null : new lkCore.ActivitySchemaError("item-group", result.errors);
+  }, [group]);
+  const slots = react.useMemo(() => {
+    try {
+      return lkCore.flattenSequence([group]);
+    } catch {
+      return [];
+    }
+  }, [group]);
+  const cues = react.useMemo(
+    () => timeline.cues.filter(
+      (cue) => slots.some((slot) => slot.group?.cue?.id === cue.id && ITEM_TYPES.has(slot.activity.type))
+    ),
+    [timeline.cues, slots]
+  );
+  const slotsByCue = react.useMemo(() => {
+    const byCue = /* @__PURE__ */ new Map();
+    for (const slot of slots) {
+      const cueId = slot.group?.cue?.id;
+      if (cueId !== void 0 && ITEM_TYPES.has(slot.activity.type)) {
+        byCue.set(cueId, [...byCue.get(cueId) ?? [], slot]);
+      }
+    }
+    return byCue;
+  }, [slots]);
+  const [playerId] = react.useState(() => {
+    playerCount += 1;
+    return `lk-iv-${playerCount}`;
+  });
+  const [preferences, setPreferences] = react.useState(() => ({
+    ...DEFAULT_PREFERENCES,
+    ...props.preferences
+  }));
+  const preferenceOverride = react.useRef(props.preferences);
+  react.useEffect(() => {
+    setPreferences({ ...readPreferences(), ...preferenceOverride.current });
+  }, []);
+  const changePreferences = react.useCallback((change) => {
+    setPreferences((previous) => {
+      const next = { ...previous, ...change };
+      writePreferences(next);
+      return next;
+    });
+  }, []);
+  const [submitted] = react.useState(() => new Set(props.submittedSlotIds ?? []));
+  const [answered, setAnswered] = react.useState(() => {
+    const seeded = /* @__PURE__ */ new Set();
+    for (const slot of slots) {
+      if (submitted.has(slot.slotId) || props.outcomes !== void 0 && Object.hasOwn(props.outcomes, slot.slotId)) {
+        seeded.add(slot.slotId);
+      }
+    }
+    return seeded;
+  });
+  const answeredRef = react.useRef(answered);
+  answeredRef.current = answered;
+  const scores = react.useRef(/* @__PURE__ */ new Map());
+  const markAnswered = react.useCallback((slotId) => {
+    setAnswered((previous) => {
+      if (previous.has(slotId)) {
+        return previous;
+      }
+      const next = new Set(previous);
+      next.add(slotId);
+      answeredRef.current = next;
+      return next;
+    });
+  }, []);
+  const finished = react.useCallback(
+    (cueId) => (slotsByCue.get(cueId) ?? []).every((slot) => answeredRef.current.has(slot.slotId)),
+    [slotsByCue]
+  );
+  const shellRef = react.useRef(null);
+  const videoRef = react.useRef(null);
+  const playButtonRef = react.useRef(null);
+  const quizHeadingRef = react.useRef(null);
+  const [playing, setPlaying] = react.useState(false);
+  const [waiting, setWaiting] = react.useState(false);
+  const [errorCode, setErrorCode] = react.useState(null);
+  const [current, setCurrent] = react.useState(0);
+  const [duration, setDuration] = react.useState(0);
+  const [buffered, setBuffered] = react.useState(0);
+  const [scrubbing, setScrubbing] = react.useState(false);
+  const [ended, setEnded] = react.useState(false);
+  const [fullscreen, setFullscreen] = react.useState(false);
+  const [pictureInPicture, setPictureInPicture] = react.useState(false);
+  const [countdown, setCountdown] = react.useState(false);
+  const [menu, setMenu] = react.useState(null);
+  const [sheet, setSheet] = react.useState(false);
+  const [panelTab, setPanelTab] = react.useState("contents");
+  const [chromeShown, setChromeShown] = react.useState(true);
+  const [focusInChrome, setFocusInChrome] = react.useState(false);
+  const [announcement, setAnnouncement] = react.useState("");
+  const previousTime = react.useRef(0);
+  const furthest = react.useRef(0);
+  const [furthestShown, setFurthestShown] = react.useState(0);
+  const lastProgressAt = react.useRef(0);
+  const hideTimer = react.useRef(null);
+  const lastPointer = react.useRef("mouse");
+  const finishedOnce = react.useRef(false);
+  const [openQuiz, setOpenQuiz] = react.useState(null);
+  const openQuizRef = react.useRef(openQuiz);
+  openQuizRef.current = openQuiz;
+  const [mounted, setMounted] = react.useState(/* @__PURE__ */ new Set());
+  const handled = react.useRef(/* @__PURE__ */ new Set());
+  const announce = react.useCallback((text) => {
+    setAnnouncement("");
+    onNextFrame(() => setAnnouncement(text));
+  }, []);
+  const emit = react.useCallback(
+    (type, payload) => {
+      onInteraction?.({
+        type,
+        activityId: group.id,
+        timestamp: Date.now(),
+        ...payload !== void 0 ? { payload } : {}
+      });
+    },
+    [onInteraction, group.id]
+  );
+  const reportProgress = react.useCallback(
+    (force) => {
+      const video = videoRef.current;
+      if (onProgress === void 0 || video === null) {
+        return;
+      }
+      const now = Date.now();
+      if (!force && now - lastProgressAt.current < 5e3) {
+        return;
+      }
+      lastProgressAt.current = now;
+      onProgress({ progressVersion: "1.0", at: video.currentTime, furthest: furthest.current });
+    },
+    [onProgress]
+  );
+  const quizTitle = react.useCallback(
+    (cue) => cue.title ?? strings.videoQuiz,
+    [strings.videoQuiz]
+  );
+  const openAt = react.useCallback(
+    (cue) => {
+      const video = videoRef.current;
+      const quizSlots = slotsByCue.get(cue.id) ?? [];
+      if (video !== null) {
+        video.pause();
+        if (Math.abs(video.currentTime - cue.at) > 0.25 && cue.at <= (video.duration || cue.at)) {
+          video.currentTime = Math.min(cue.at, video.duration || cue.at);
+        }
+        previousTime.current = cue.at;
+        const webkit = video;
+        if (webkit.webkitDisplayingFullscreen) {
+          webkit.webkitExitFullscreen?.();
+        }
+        if (typeof document !== "undefined" && document.pictureInPictureElement === video) {
+          void document.exitPictureInPicture?.().catch(() => void 0);
+        }
+      }
+      const firstOpen = quizSlots.findIndex((slot) => !answeredRef.current.has(slot.slotId));
+      setMenu(null);
+      setSheet(false);
+      setEnded(false);
+      setMounted((previous) => previous.has(cue.id) ? previous : /* @__PURE__ */ new Set([...previous, cue.id]));
+      setOpenQuiz({ cueId: cue.id, step: firstOpen === -1 ? 0 : firstOpen });
+      announce(strings.videoQuizOpened(clock(cue.at), quizSlots.length));
+      emit("video-quiz-opened", { cueId: cue.id, at: cue.at });
+      reportProgress(true);
+    },
+    [slotsByCue, announce, strings, emit, reportProgress]
+  );
+  react.useEffect(() => {
+    if (openQuiz !== null) {
+      quizHeadingRef.current?.focus();
+    }
+  }, [openQuiz?.cueId, openQuiz]);
+  const closeQuiz = react.useCallback(
+    (how) => {
+      const open = openQuizRef.current;
+      if (open === null) {
+        return;
+      }
+      const cue = cues.find((candidate) => candidate.id === open.cueId);
+      setOpenQuiz(null);
+      const video = videoRef.current;
+      if (how === "rewatch" && cue !== void 0 && video !== null) {
+        const earlier = [...cues.map((c) => c.at), ...chapters.map((c) => c.at)].filter((at) => at < cue.at - 0.5).sort((a, b) => b - a)[0];
+        const to = earlier ?? 0;
+        video.currentTime = to;
+        previousTime.current = to;
+        setCurrent(to);
+      } else if (cue !== void 0) {
+        handled.current.add(cue.id);
+        emit(how === "skip" ? "video-quiz-skipped" : "video-quiz-closed", { cueId: cue.id });
+      }
+      playButtonRef.current?.focus();
+      if (video !== null && !(video.ended || duration > 0 && video.currentTime >= duration - 0.05)) {
+        void video.play().catch(() => setPlaying(false));
+      } else if (video !== null) {
+        const next = quizzesAtEnd(cues, duration, handled.current)[0];
+        if (next !== void 0) {
+          openAt(next);
+        } else {
+          setEnded(true);
+        }
+      }
+    },
+    [cues, chapters, emit, duration, openAt]
+  );
+  const onTick = react.useCallback(
+    (now) => {
+      const before = previousTime.current;
+      previousTime.current = now;
+      if (now > furthest.current) {
+        furthest.current = now;
+      }
+      if (openQuizRef.current !== null || scrubbing) {
+        return;
+      }
+      const crossed = crossedQuiz(cues, before, now, handled.current);
+      if (crossed !== void 0) {
+        openAt(crossed);
+      }
+    },
+    [cues, scrubbing, openAt]
+  );
+  react.useEffect(() => {
+    if (!playing || scrubbing) {
+      return;
+    }
+    let cancel = () => {
+    };
+    const tick = () => {
+      const video = videoRef.current;
+      if (video !== null) {
+        setCurrent(video.currentTime);
+        setBuffered(bufferedAhead(video));
+        onTick(video.currentTime);
+        if (furthest.current > furthestShown + 1) {
+          setFurthestShown(furthest.current);
+        }
+        reportProgress(false);
+      }
+      cancel = onNextFrame(tick);
+    };
+    cancel = onNextFrame(tick);
+    return () => cancel();
+  }, [playing, scrubbing, onTick, reportProgress, furthestShown]);
+  const seek = react.useCallback(
+    (to) => {
+      const video = videoRef.current;
+      if (video === null || duration <= 0) {
+        return;
+      }
+      const from = video.currentTime;
+      const target = Math.min(Math.max(0, to), duration);
+      const limited = renderMode === "review" ? { at: target } : limitSeek(timeline, from, target, furthest.current, finished);
+      video.currentTime = limited.at;
+      previousTime.current = limited.at;
+      setCurrent(limited.at);
+      setEnded(false);
+      emit("video-seeked", { from, to: limited.at, clamped: limited.hold !== void 0 });
+      if (limited.hold?.kind === "required") {
+        openAt(limited.hold.cue);
+        announce(strings.videoHeldAtQuiz(clock(limited.hold.cue.at)));
+      } else if (limited.hold?.kind === "no-skip-ahead") {
+        announce(strings.videoHeldAhead);
+      }
+      reportProgress(true);
+    },
+    [duration, renderMode, timeline, finished, emit, announce, strings, openAt, reportProgress]
+  );
+  const togglePlay = react.useCallback(() => {
+    const video = videoRef.current;
+    if (video === null) {
+      return;
+    }
+    if (ended) {
+      setEnded(false);
+      handled.current.clear();
+      video.currentTime = 0;
+      previousTime.current = -1;
+      void video.play().catch(() => setPlaying(false));
+      return;
+    }
+    if (video.paused) {
+      if (video.currentTime === 0 && previousTime.current <= 0) {
+        const atStart = crossedQuiz(cues, -1, 0, handled.current);
+        if (atStart !== void 0) {
+          previousTime.current = 0;
+          openAt(atStart);
+          return;
+        }
+      }
+      void video.play().catch(() => setPlaying(false));
+    } else {
+      video.pause();
+    }
+  }, [ended, cues, openAt]);
+  const tracks = react.useMemo(() => {
+    if (media?.tracks !== void 0 && media.tracks.length > 0) {
+      return media.tracks.filter(
+        (track) => track.kind === "captions" || track.kind === "subtitles"
+      );
+    }
+    return media?.captionsUrl !== void 0 ? [
+      {
+        kind: "captions",
+        src: media.captionsUrl,
+        srclang: locale ?? "en",
+        label: strings.videoCaptionLanguage
+      }
+    ] : [];
+  }, [media, locale, strings.videoCaptionLanguage]);
+  const activeTrack = tracks.find((track) => track.srclang === preferences.captionLanguage) ?? tracks.find((track) => track.default === true) ?? tracks[0];
+  const [captionCues, setCaptionCues] = react.useState([]);
+  const [captionsFailed, setCaptionsFailed] = react.useState(false);
+  const loaderRef = react.useRef(captionsLoader);
+  loaderRef.current = captionsLoader;
+  react.useEffect(() => {
+    if (activeTrack === void 0) {
+      setCaptionCues([]);
+      return;
+    }
+    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));
+      }
+      return response.text();
+    });
+    Promise.resolve(load).then((text) => {
+      if (live) {
+        const parsed = parseWebVtt(text);
+        setCaptionCues(parsed);
+        setCaptionsFailed(parsed.length === 0);
+      }
+    }).catch(() => {
+      if (live) {
+        setCaptionCues([]);
+        setCaptionsFailed(true);
+      }
+    });
+    return () => {
+      live = false;
+    };
+  }, [activeTrack]);
+  const hasCaptions = captionCues.length > 0;
+  const activeCueIndex = react.useMemo(() => cueIndexAt(captionCues, current), [captionCues, current]);
+  const spoilerLimit = timeline.navigation === "no-skip-ahead" && renderMode !== "review" ? Math.max(furthestShown, current) : Number.POSITIVE_INFINITY;
+  react.useEffect(() => {
+    const video = videoRef.current;
+    if (video !== null) {
+      video.playbackRate = preferences.speed;
+      video.volume = preferences.volume;
+      video.muted = preferences.muted;
+    }
+  }, [preferences.speed, preferences.volume, preferences.muted]);
+  react.useEffect(() => {
+    const onChange = () => setFullscreen(document.fullscreenElement === shellRef.current);
+    document.addEventListener("fullscreenchange", onChange);
+    return () => document.removeEventListener("fullscreenchange", onChange);
+  }, []);
+  react.useEffect(() => {
+    const video = videoRef.current;
+    if (video === null) {
+      return;
+    }
+    const enter = () => {
+      setPictureInPicture(true);
+      emit("video-pip-changed", { on: true });
+    };
+    const leave = () => {
+      setPictureInPicture(false);
+      emit("video-pip-changed", { on: false });
+    };
+    video.addEventListener("enterpictureinpicture", enter);
+    video.addEventListener("leavepictureinpicture", leave);
+    return () => {
+      video.removeEventListener("enterpictureinpicture", enter);
+      video.removeEventListener("leavepictureinpicture", leave);
+    };
+  }, [emit]);
+  react.useEffect(
+    () => () => {
+      if (hideTimer.current !== null) {
+        clearTimeout(hideTimer.current);
+      }
+    },
+    []
+  );
+  const revealChrome = react.useCallback(() => {
+    setChromeShown(true);
+    if (hideTimer.current !== null) {
+      clearTimeout(hideTimer.current);
+    }
+    hideTimer.current = setTimeout(() => setChromeShown(false), 2400);
+  }, []);
+  const toggleFullscreen = react.useCallback(() => {
+    const shell = shellRef.current;
+    const video = videoRef.current;
+    if (typeof document === "undefined" || shell === null) {
+      return;
+    }
+    if (document.fullscreenElement) {
+      void document.exitFullscreen().catch(() => void 0);
+    } else if (typeof shell.requestFullscreen === "function" && document.fullscreenEnabled !== false) {
+      void shell.requestFullscreen().catch(() => void 0);
+    } else {
+      video?.webkitEnterFullscreen?.();
+    }
+    emit("video-fullscreen-changed");
+  }, [emit]);
+  const pictureInPictureSupported = typeof document !== "undefined" && document.pictureInPictureEnabled === true;
+  const togglePictureInPicture = react.useCallback(() => {
+    const video = videoRef.current;
+    if (video === null) {
+      return;
+    }
+    if (document.pictureInPictureElement) {
+      void document.exitPictureInPicture().catch(() => void 0);
+    } else {
+      void video.requestPictureInPicture?.().catch(() => void 0);
+    }
+  }, []);
+  const jumpPoints = react.useMemo(
+    () => [.../* @__PURE__ */ new Set([...chapters.map((c) => c.at), ...cues.map((c) => c.at)])].sort((a, b) => a - b),
+    [chapters, cues]
+  );
+  const onKeyDown = (event) => {
+    if (openQuiz !== null || !preferences.shortcuts) {
+      return;
+    }
+    const target = event.target;
+    if (target.isContentEditable || ["INPUT", "TEXTAREA", "SELECT"].includes(target.tagName) || target.tagName === "BUTTON" && (event.key === " " || event.key === "Enter")) {
+      return;
+    }
+    if (event.ctrlKey || event.metaKey || event.altKey) {
+      return;
+    }
+    const video = videoRef.current;
+    const key = event.key;
+    const done = () => {
+      event.preventDefault();
+      revealChrome();
+    };
+    if (/^[0-9]$/.test(key)) {
+      done();
+      seek(Number(key) / 10 * duration);
+      return;
+    }
+    switch (key) {
+      case " ":
+      case "k":
+      case "K":
+        done();
+        togglePlay();
+        return;
+      case "j":
+      case "J":
+        done();
+        seek(current - JUMP_SECONDS);
+        return;
+      case "l":
+      case "L":
+        done();
+        seek(current + JUMP_SECONDS);
+        return;
+      case "ArrowLeft":
+        done();
+        seek(current - (event.shiftKey ? 1 : 5));
+        return;
+      case "ArrowRight":
+        done();
+        seek(current + (event.shiftKey ? 1 : 5));
+        return;
+      case "Home":
+        done();
+        seek(0);
+        return;
+      case "End":
+        done();
+        seek(duration);
+        return;
+      case ",":
+      case ".":
+        done();
+        video?.pause();
+        seek(current + (key === "," ? -FRAME_SECONDS : FRAME_SECONDS));
+        return;
+      case "<":
+      case ">":
+        done();
+        changePreferences({ speed: nudgeSpeed(preferences.speed, key === "<" ? -1 : 1) });
+        return;
+      case "[": {
+        done();
+        const previous = [...jumpPoints].reverse().find((at) => at < current - 1);
+        seek(previous ?? 0);
+        return;
+      }
+      case "]": {
+        done();
+        const next = jumpPoints.find((at) => at > current + 0.5);
+        if (next !== void 0) {
+          seek(next);
+        }
+        return;
+      }
+      case "m":
+      case "M":
+        done();
+        changePreferences({ muted: !preferences.muted });
+        return;
+      case "c":
+      case "C":
+        if (hasCaptions) {
+          done();
+          changePreferences({ captions: !preferences.captions });
+        }
+        return;
+      case "t":
+      case "T":
+        if (hasCaptions) {
+          done();
+          setPanelTab("transcript");
+          changePreferences({ panel: !(preferences.panel && panelTab === "transcript") });
+        }
+        return;
+      case "p":
+      case "P":
+        if (pictureInPictureSupported) {
+          done();
+          togglePictureInPicture();
+        }
+        return;
+      case "f":
+      case "F":
+        done();
+        toggleFullscreen();
+        return;
+      case "?":
+        done();
+        setSheet((open) => !open);
+        return;
+      default:
+        return;
+    }
+  };
+  const quizzes = cues.map((cue) => {
+    const quizSlots = slotsByCue.get(cue.id) ?? [];
+    const count = quizSlots.filter((slot) => answered.has(slot.slotId)).length;
+    return {
+      id: cue.id,
+      at: cue.at,
+      title: quizTitle(cue),
+      answered: count,
+      total: quizSlots.length,
+      // In review the attempt is over: nothing is required of the learner any
+      // more, in the list or on the bar.
+      required: cue.required === true && renderMode !== "review",
+      state: markerState(quizSlots, answered, renderMode, props.outcomes)
+    };
+  });
+  const markers = quizzes.map((quiz) => ({
+    id: quiz.id,
+    at: quiz.at,
+    label: `${quiz.title} \xB7 ${strings.videoQuizProgress(quiz.answered, quiz.total)}`,
+    state: quiz.state,
+    required: quiz.required
+  }));
+  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 percent = graded.length === 0 ? null : Math.round(graded.reduce((a, b) => a + b, 0) / graded.length * 100);
+  const summary = react.useCallback(() => {
+    return {
+      slots: slots.filter((slot) => slot.group?.cue !== void 0).map((slot) => {
+        const cueId = slot.group?.cue?.id;
+        return {
+          slotId: slot.slotId,
+          activityId: slot.activity.id,
+          cueId,
+          status: answeredRef.current.has(slot.slotId) ? "answered" : handled.current.has(cueId) ? "skipped" : "unreached"
+        };
+      })
+    };
+  }, [slots]);
+  const finish = react.useCallback(() => {
+    if (finishedOnce.current) {
+      return;
+    }
+    finishedOnce.current = true;
+    onFinished?.(summary());
+  }, [onFinished, summary]);
+  react.useEffect(() => {
+    if (ended && totalQuestions > 0 && answeredCount === totalQuestions && renderMode !== "review") {
+      finish();
+    }
+  }, [ended, totalQuestions, answeredCount, renderMode, finish]);
+  const slotBindings = react.useMemo(() => {
+    const bindings = /* @__PURE__ */ new Map();
+    if (recordingBinding === void 0) {
+      return bindings;
+    }
+    const { assess, playbackUrl } = recordingBinding;
+    for (const slot of slots) {
+      const place = {
+        slotId: slot.slotId,
+        index: slot.index,
+        activityId: slot.activity.id
+      };
+      bindings.set(slot.slotId, {
+        upload: (take) => recordingBinding.upload(take, place),
+        ...assess !== void 0 ? { assess: (ref) => assess.call(recordingBinding, ref, place) } : {},
+        ...playbackUrl !== void 0 ? { playbackUrl: (ref) => playbackUrl.call(recordingBinding, ref, place) } : {}
+      });
+    }
+    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 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;
+    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);
+      },
+      ...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__ */ jsxRuntime.jsx(
+          chunkL7NE7PR4_cjs.MultipleChoice,
+          {
+            data: activity,
+            ...common,
+            ...shuffleSeed !== void 0 ? { shuffleSeed } : {}
+          }
+        );
+        break;
+      case "fill-in-the-blanks":
+        question = /* @__PURE__ */ jsxRuntime.jsx(chunk4H3JTX74_cjs.FillInTheBlanks, { data: activity, ...common });
+        break;
+      case "gap-select":
+        question = /* @__PURE__ */ jsxRuntime.jsx(
+          chunkEKBEKDWO_cjs.GapSelect,
+          {
+            data: activity,
+            ...common,
+            ...shuffleSeed !== void 0 ? { shuffleSeed } : {}
+          }
+        );
+        break;
+      case "dictation":
+        question = /* @__PURE__ */ jsxRuntime.jsx(chunkXMJE34FY_cjs.Dictation, { data: activity, ...common });
+        break;
+      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__ */ jsxRuntime.jsx(
+          chunkZH5WT2IE_cjs.ReadAloud,
+          {
+            data: activity,
+            ...common,
+            ...binding !== void 0 ? { recordingBinding: binding } : {},
+            ...assessment !== void 0 ? { assessment } : {},
+            ...workletUrl !== void 0 ? { workletUrl } : {}
+          }
+        );
+        break;
+      }
+      default:
+        question = null;
+    }
+    return question;
+  };
+  const channels = react.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 channel;
+  };
+  if (devError !== null) {
+    throw devError;
+  }
+  const openCue = openQuiz === null ? void 0 : cues.find((cue) => cue.id === openQuiz.cueId);
+  const openSlots = openCue === void 0 ? [] : slotsByCue.get(openCue.id) ?? [];
+  const step = openQuiz?.step ?? 0;
+  const stepSlot = openSlots[step];
+  const stepAnswered = stepSlot !== void 0 && answered.has(stepSlot.slotId);
+  const lastStep = step >= openSlots.length - 1;
+  const required = openCue?.required === true && renderMode !== "review";
+  const canAdvance = !required || stepAnswered;
+  const goToStep = (next) => {
+    setOpenQuiz((open) => open === null ? open : { ...open, step: next });
+    const slot = openSlots[next];
+    if (slot !== void 0 && openCue !== void 0) {
+      announce(strings.videoQuestionProgress(next + 1, openSlots.length));
+      emit("video-quiz-question-shown", { cueId: openCue.id, slotId: slot.slotId });
+    }
+  };
+  const showCaption = preferences.captions && hasCaptions && activeCueIndex !== -1 && openQuiz === null && !ended && errorCode === null;
+  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 (
+    // biome-ignore lint/a11y/noStaticElementInteractions: the player's keyboard shortcuts, scoped to the player; each is also a button
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref: shellRef,
+        className: "lk-iv",
+        tabIndex: -1,
+        lang: locale,
+        style: theme,
+        "data-render-mode": renderMode,
+        "data-quiz-open": openQuiz !== null || void 0,
+        "data-fullscreen": fullscreen || void 0,
+        "data-chrome": chromeVisible ? "shown" : "hidden",
+        onKeyDown,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: "lk-iv-stage",
+              onPointerDown: (event) => {
+                lastPointer.current = event.pointerType;
+              },
+              onPointerMove: (event) => {
+                if (event.pointerType !== "touch") {
+                  revealChrome();
+                }
+              },
+              onPointerLeave: () => {
+                if (playing) {
+                  setChromeShown(false);
+                }
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "video",
+                  {
+                    ref: videoRef,
+                    className: "lk-iv-video",
+                    src: media?.url,
+                    ...media?.poster !== void 0 ? { poster: media.poster } : {},
+                    preload: "metadata",
+                    playsInline: true,
+                    "aria-label": group.title ?? media?.alt,
+                    onClick: () => {
+                      if (lastPointer.current === "touch" && !chromeVisible) {
+                        revealChrome();
+                        return;
+                      }
+                      togglePlay();
+                    },
+                    onDoubleClick: toggleFullscreen,
+                    onPlay: () => {
+                      setPlaying(true);
+                      setEnded(false);
+                      revealChrome();
+                      emit("video-played", { at: videoRef.current?.currentTime ?? 0 });
+                    },
+                    onPause: () => {
+                      setPlaying(false);
+                      emit("video-paused", { at: videoRef.current?.currentTime ?? 0 });
+                      reportProgress(true);
+                    },
+                    onWaiting: () => setWaiting(true),
+                    onPlaying: () => setWaiting(false),
+                    onProgress: (event) => setBuffered(bufferedAhead(event.currentTarget)),
+                    onTimeUpdate: (event) => {
+                      if (!playing && !scrubbing) {
+                        setCurrent(event.currentTarget.currentTime);
+                      }
+                    },
+                    onRateChange: (event) => emit("video-rate-changed", { rate: event.currentTarget.playbackRate }),
+                    onLoadedMetadata: (event) => {
+                      const video = event.currentTarget;
+                      const length = Number.isFinite(video.duration) ? video.duration : 0;
+                      setDuration(length);
+                      video.playbackRate = preferences.speed;
+                      video.volume = preferences.volume;
+                      video.muted = preferences.muted;
+                      const stored = lkCore.readMediaProgress(props.progress, length);
+                      if (stored !== null) {
+                        const at = renderMode === "review" ? stored.at : limitResume(timeline, stored.at, finished);
+                        furthest.current = Math.max(stored.furthest, at);
+                        setFurthestShown(furthest.current);
+                        video.currentTime = at;
+                        previousTime.current = at;
+                        setCurrent(at);
+                      }
+                    },
+                    onEnded: () => {
+                      setPlaying(false);
+                      setCurrent(duration);
+                      emit("video-ended");
+                      reportProgress(true);
+                      const atEnd = quizzesAtEnd(cues, duration, handled.current);
+                      const first = atEnd[0];
+                      if (first !== void 0) {
+                        openAt(first);
+                      } else {
+                        setEnded(true);
+                      }
+                    },
+                    onError: (event) => {
+                      setWaiting(false);
+                      setErrorCode(event.currentTarget.error?.code ?? 0);
+                    }
+                  }
+                ),
+                label !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lk-iv-label", children: label }) : null,
+                showCaption ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: "lk-iv-caption",
+                    "data-size": preferences.captionSize,
+                    "data-background": preferences.captionBackground || void 0,
+                    lang: activeTrack?.srclang,
+                    children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: captionCues[activeCueIndex]?.text })
+                  }
+                ) : null,
+                waiting && errorCode === null && openQuiz === null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lk-iv-spinner", "aria-hidden": "true" }) : null,
+                errorCode !== null ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lk-iv-error", role: "alert", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(AlertIcon, {}),
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { children: strings.videoError(errorCode) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: "lk-iv-action",
+                      onClick: () => {
+                        setErrorCode(null);
+                        videoRef.current?.load();
+                      },
+                      children: strings.videoTryAgain
+                    }
+                  )
+                ] }) : null,
+                !playing && !waiting && errorCode === null && openQuiz === null && !ended ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "lk-iv-big-play",
+                    "aria-label": strings.media.play,
+                    onClick: togglePlay,
+                    children: /* @__PURE__ */ jsxRuntime.jsx(PlayIcon, {})
+                  }
+                ) : null,
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    className: "lk-iv-chrome",
+                    inert: openQuiz !== null,
+                    onFocus: () => setFocusInChrome(true),
+                    onBlur: (event) => {
+                      if (!event.currentTarget.contains(event.relatedTarget)) {
+                        setFocusInChrome(false);
+                      }
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        Scrubber,
+                        {
+                          current,
+                          duration,
+                          buffered,
+                          chapters,
+                          markers,
+                          cues: captionCues,
+                          previewLimit: spoilerLimit,
+                          strings,
+                          onSeek: seek,
+                          onScrubChange: setScrubbing
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lk-iv-bar", children: [
+                        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lk-iv-bar-group", children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "button",
+                            {
+                              ref: playButtonRef,
+                              type: "button",
+                              className: "lk-iv-button",
+                              "aria-label": ended ? strings.videoReplay : playing ? strings.media.pause : strings.media.play,
+                              onClick: togglePlay,
+                              children: ended ? /* @__PURE__ */ jsxRuntime.jsx(ReplayIcon, {}) : playing ? /* @__PURE__ */ jsxRuntime.jsx(PauseIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(PlayIcon, {})
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "button",
+                            {
+                              type: "button",
+                              className: "lk-iv-button lk-iv-wide",
+                              "aria-label": strings.videoBack(JUMP_SECONDS),
+                              onClick: () => seek(current - JUMP_SECONDS),
+                              children: /* @__PURE__ */ jsxRuntime.jsx(BackIcon, {})
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "button",
+                            {
+                              type: "button",
+                              className: "lk-iv-button lk-iv-wide",
+                              "aria-label": strings.videoForward(JUMP_SECONDS),
+                              onClick: () => seek(current + JUMP_SECONDS),
+                              children: /* @__PURE__ */ jsxRuntime.jsx(ForwardIcon, {})
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lk-iv-volume", children: [
+                            /* @__PURE__ */ jsxRuntime.jsx(
+                              "button",
+                              {
+                                type: "button",
+                                className: "lk-iv-button",
+                                "aria-label": preferences.muted ? strings.media.unmute : strings.media.mute,
+                                "aria-pressed": preferences.muted,
+                                onClick: () => changePreferences({ muted: !preferences.muted }),
+                                children: /* @__PURE__ */ jsxRuntime.jsx(VolumeIcon, { level: volumeLevel })
+                              }
+                            ),
+                            /* @__PURE__ */ jsxRuntime.jsx(
+                              "input",
+                              {
+                                id: `${playerId}-volume`,
+                                className: "lk-iv-volume-slider",
+                                type: "range",
+                                min: 0,
+                                max: 1,
+                                step: 0.05,
+                                value: preferences.muted ? 0 : preferences.volume,
+                                "aria-label": strings.media.volume,
+                                onChange: (event) => changePreferences({ volume: Number(event.target.value), muted: false })
+                              }
+                            )
+                          ] }),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "button",
+                            {
+                              type: "button",
+                              className: "lk-iv-time",
+                              "aria-label": countdown ? strings.videoShowElapsed : strings.videoShowRemaining,
+                              onClick: () => setCountdown((on) => !on),
+                              children: /* @__PURE__ */ jsxRuntime.jsxs("span", { "aria-hidden": "true", children: [
+                                countdown ? `-${clock(Math.max(0, duration - current))}` : clock(current),
+                                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "lk-iv-time-total", children: [
+                                  " / ",
+                                  clock(duration)
+                                ] })
+                              ] })
+                            }
+                          )
+                        ] }),
+                        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lk-iv-bar-group", children: [
+                          quizzes.length > 0 || chapters.length > 0 || hasCaptions ? /* @__PURE__ */ jsxRuntime.jsx(
+                            "button",
+                            {
+                              type: "button",
+                              className: "lk-iv-button",
+                              "aria-label": strings.videoPanel,
+                              "aria-pressed": preferences.panel,
+                              onClick: () => changePreferences({ panel: !preferences.panel }),
+                              children: /* @__PURE__ */ jsxRuntime.jsx(ContentsIcon, {})
+                            }
+                          ) : null,
+                          hasCaptions ? /* @__PURE__ */ jsxRuntime.jsx(
+                            "button",
+                            {
+                              type: "button",
+                              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
+                                });
+                              },
+                              children: /* @__PURE__ */ jsxRuntime.jsx(CaptionsIcon, { on: preferences.captions })
+                            }
+                          ) : null,
+                          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lk-iv-menu-anchor", children: [
+                            /* @__PURE__ */ jsxRuntime.jsx(
+                              "button",
+                              {
+                                type: "button",
+                                className: "lk-iv-button lk-iv-speed",
+                                "aria-label": strings.media.speed,
+                                "aria-haspopup": "menu",
+                                "aria-expanded": menu === "speed",
+                                onClick: () => setMenu((open) => open === "speed" ? null : "speed"),
+                                children: /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: `${preferences.speed}\xD7` })
+                              }
+                            ),
+                            menu === "speed" ? /* @__PURE__ */ jsxRuntime.jsx(
+                              SpeedMenu,
+                              {
+                                speed: preferences.speed,
+                                strings,
+                                onChoose: (speed) => {
+                                  changePreferences({ speed });
+                                  setMenu(null);
+                                },
+                                onClose: () => setMenu(null)
+                              }
+                            ) : null
+                          ] }),
+                          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lk-iv-menu-anchor", children: [
+                            /* @__PURE__ */ jsxRuntime.jsx(
+                              "button",
+                              {
+                                type: "button",
+                                className: "lk-iv-button",
+                                "aria-label": strings.videoSettings,
+                                "aria-haspopup": "menu",
+                                "aria-expanded": menu === "settings",
+                                onClick: () => setMenu((open) => open === "settings" ? null : "settings"),
+                                children: /* @__PURE__ */ jsxRuntime.jsx(SettingsIcon, {})
+                              }
+                            ),
+                            menu === "settings" ? /* @__PURE__ */ jsxRuntime.jsx(
+                              SettingsMenu,
+                              {
+                                preferences,
+                                tracks,
+                                activeTrack,
+                                captionsFailed,
+                                strings,
+                                onChange: changePreferences,
+                                onShowShortcuts: () => {
+                                  setMenu(null);
+                                  setSheet(true);
+                                },
+                                onClose: () => setMenu(null)
+                              }
+                            ) : null
+                          ] }),
+                          pictureInPictureSupported ? /* @__PURE__ */ jsxRuntime.jsx(
+                            "button",
+                            {
+                              type: "button",
+                              className: "lk-iv-button lk-iv-wide",
+                              "aria-label": strings.videoPictureInPicture,
+                              "aria-pressed": pictureInPicture,
+                              onClick: togglePictureInPicture,
+                              children: /* @__PURE__ */ jsxRuntime.jsx(PictureInPictureIcon, {})
+                            }
+                          ) : null,
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "button",
+                            {
+                              type: "button",
+                              className: "lk-iv-button",
+                              "aria-label": fullscreen ? strings.videoExitFullscreen : strings.videoFullscreen,
+                              onClick: toggleFullscreen,
+                              children: /* @__PURE__ */ jsxRuntime.jsx(FullscreenIcon, { on: fullscreen })
+                            }
+                          )
+                        ] })
+                      ] })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    className: "lk-iv-quiz",
+                    role: "dialog",
+                    "aria-modal": "false",
+                    "aria-labelledby": `${playerId}-quiz-title`,
+                    hidden: openQuiz === null,
+                    onKeyDown: (event) => {
+                      if (event.key === "Escape" && !required && openQuiz !== null) {
+                        event.preventDefault();
+                        closeQuiz("skip");
+                      }
+                    },
+                    children: [
+                      openCue !== void 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lk-iv-quiz-head", children: [
+                        /* @__PURE__ */ jsxRuntime.jsxs(
+                          "h3",
+                          {
+                            id: `${playerId}-quiz-title`,
+                            ref: quizHeadingRef,
+                            tabIndex: -1,
+                            className: "lk-iv-quiz-title",
+                            children: [
+                              quizTitle(openCue),
+                              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "lk-iv-quiz-time", children: [
+                                " \xB7 ",
+                                clock(openCue.at)
+                              ] }),
+                              required ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                                " ",
+                                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lk-iv-tag", children: strings.videoRequired })
+                              ] }) : null
+                            ]
+                          }
+                        ),
+                        openSlots.length > 1 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lk-iv-steps", children: [
+                          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lk-iv-steps-label", children: strings.videoQuestionProgress(step + 1, openSlots.length) }),
+                          /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "lk-iv-steps-dots", children: openSlots.map((slot, index) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
+                            "button",
+                            {
+                              type: "button",
+                              className: "lk-iv-step",
+                              "data-current": index === step || void 0,
+                              "data-answered": answered.has(slot.slotId) || void 0,
+                              "aria-current": index === step ? "step" : void 0,
+                              "aria-label": strings.videoQuestionStep(
+                                index + 1,
+                                answered.has(slot.slotId)
+                              ),
+                              onClick: () => goToStep(index)
+                            }
+                          ) }, slot.slotId)) })
+                        ] }) : null
+                      ] }) : null,
+                      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                          QuestionPane,
+                          {
+                            hidden: !(openQuiz?.cueId === cue.id && step === index),
+                            channel: channelFor(slot.slotId),
+                            children: renderQuestion(slot, cue.id)
+                          },
+                          slot.slotId
+                        ))
+                      ) }),
+                      openCue !== void 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lk-iv-quiz-foot", children: [
+                        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lk-iv-quiz-foot-start", children: [
+                          /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: "lk-iv-link", onClick: () => closeQuiz("rewatch"), children: [
+                            /* @__PURE__ */ jsxRuntime.jsx(ReplayIcon, {}),
+                            strings.videoRewatch
+                          ] }),
+                          !required && !lastStep ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "lk-iv-link", onClick: () => closeQuiz("skip"), children: strings.videoSkipQuiz }) : null
+                        ] }),
+                        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lk-iv-quiz-foot-end", children: [
+                          renderMode === "exam" && stepAnswered ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lk-iv-saved", role: "status", children: strings.videoAnswerSaved }) : null,
+                          /* @__PURE__ */ jsxRuntime.jsxs(
+                            "button",
+                            {
+                              type: "button",
+                              className: stepAnswered || renderMode === "review" ? "lk-iv-action lk-iv-action-primary" : "lk-iv-action",
+                              "aria-disabled": !canAdvance || void 0,
+                              onClick: () => {
+                                if (!canAdvance) {
+                                  return;
+                                }
+                                if (lastStep) {
+                                  closeQuiz("continue");
+                                } else {
+                                  goToStep(step + 1);
+                                }
+                              },
+                              children: [
+                                lastStep ? strings.videoContinue : strings.videoNextQuestion,
+                                lastStep ? /* @__PURE__ */ jsxRuntime.jsx(PlayIcon, {}) : null
+                              ]
+                            }
+                          )
+                        ] })
+                      ] }) : null
+                    ]
+                  }
+                ),
+                ended && openQuiz === null ? /* @__PURE__ */ jsxRuntime.jsx(
+                  EndScreen,
+                  {
+                    idPrefix: playerId,
+                    renderMode,
+                    quizzes,
+                    answered: answeredCount,
+                    total: totalQuestions,
+                    percent,
+                    strings,
+                    onOpenQuiz: (id) => {
+                      const cue = cues.find((candidate) => candidate.id === id);
+                      if (cue !== void 0) {
+                        openAt(cue);
+                      }
+                    },
+                    onWatchAgain: togglePlay,
+                    onFinish: renderMode === "review" ? void 0 : finish
+                  }
+                ) : null,
+                sheet ? /* @__PURE__ */ jsxRuntime.jsx(
+                  ShortcutSheet,
+                  {
+                    strings,
+                    onClose: () => {
+                      setSheet(false);
+                      playButtonRef.current?.focus();
+                    }
+                  }
+                ) : null
+              ]
+            }
+          ),
+          preferences.panel ? /* @__PURE__ */ jsxRuntime.jsx(
+            ContentsPanel,
+            {
+              idPrefix: playerId,
+              tab: panelTab,
+              onTab: setPanelTab,
+              chapters,
+              quizzes,
+              cues: captionCues,
+              activeCue: activeCueIndex,
+              limit: spoilerLimit,
+              strings,
+              onSeek: seek,
+              onOpenQuiz: (id) => {
+                const cue = cues.find((candidate) => candidate.id === id);
+                if (cue === void 0) {
+                  return;
+                }
+                if (renderMode !== "review" && limitSeek(
+                  timeline,
+                  videoRef.current?.currentTime ?? 0,
+                  cue.at,
+                  furthest.current,
+                  finished
+                ).at < cue.at - 0.25) {
+                  seek(cue.at);
+                  return;
+                }
+                openAt(cue);
+              }
+            }
+          ) : null,
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lk-iv-live", "aria-live": "polite", "aria-atomic": "true", children: announcement })
+        ]
+      }
+    )
+  );
+}
+function QuestionPane({
+  hidden,
+  channel,
+  children
+}) {
+  const ref = react.useRef(null);
+  const captureGroup = channel.captureGroup;
+  react.useEffect(() => {
+    if (!hidden) {
+      return;
+    }
+    chunkZH5WT2IE_cjs.stopCaptureGroup(captureGroup);
+    for (const media of ref.current?.querySelectorAll("audio, video") ?? []) {
+      const element = media;
+      if (!element.paused) {
+        element.pause();
+      }
+    }
+  }, [hidden, captureGroup]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: "lk-iv-question", hidden, children: /* @__PURE__ */ jsxRuntime.jsx(chunkZH5WT2IE_cjs.SequenceSlotContext.Provider, { value: channel, children }) });
+}
+function bufferedAhead(video) {
+  const ranges = video.buffered;
+  if (ranges === void 0) {
+    return 0;
+  }
+  for (let index = 0; index < ranges.length; index += 1) {
+    if (ranges.start(index) <= video.currentTime && video.currentTime <= ranges.end(index)) {
+      return ranges.end(index);
+    }
+  }
+  return 0;
+}
+function markerState(quizSlots, answered, renderMode, outcomes) {
+  if (renderMode === "review" && outcomes !== void 0) {
+    const results = quizSlots.map(
+      (slot) => Object.hasOwn(outcomes, slot.slotId) ? outcomes[slot.slotId] : void 0
+    );
+    if (results.some((outcome) => outcome === void 0 || outcome.status === "deferred")) {
+      return "pending";
+    }
+    const scored = results.filter(
+      (outcome) => outcome?.status === "scored"
+    );
+    if (scored.length === results.length && scored.every((outcome) => outcome.passed)) {
+      return "correct";
+    }
+    return scored.some((outcome) => outcome.passed) ? "partial" : "incorrect";
+  }
+  const count = quizSlots.filter((slot) => answered.has(slot.slotId)).length;
+  if (count === quizSlots.length && count > 0) {
+    return "answered";
+  }
+  if (count > 0) {
+    return "open";
+  }
+  return "unreached";
+}
+function InteractiveVideo2(props) {
+  const strings = chunkZ6TVOAO5_cjs.useLkStrings(props.strings);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    chunk53YOZOGN_cjs.ActivityErrorBoundary,
+    {
+      ...props.group?.title !== void 0 ? { activityTitle: props.group.title } : {},
+      strings,
+      children: /* @__PURE__ */ jsxRuntime.jsx(InteractiveVideo, { ...props })
+    }
+  );
+}
+
+exports.InteractiveVideo = InteractiveVideo2;
+//# sourceMappingURL=chunk-SRD4KVAP.cjs.map
+//# sourceMappingURL=chunk-SRD4KVAP.cjs.map