@intellectif/lk-react 16.0.0 → 16.1.0

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

@@ -1,11 +1,11 @@
 'use client';
-import { MultipleChoice } from './chunk-4X7NFEDB.js';
-import { FillInTheBlanks } from './chunk-4AQ4SWJ3.js';
-import { GapSelect } from './chunk-UYRQEIB7.js';
-import { Dictation } from './chunk-T33AJYLW.js';
-import { stopCaptureGroup, SequenceSlotContext, ReadAloud } from './chunk-W32ND3ZR.js';
-import { ActivityErrorBoundary, isDevelopment } from './chunk-ICAYWVNF.js';
-import { useLkStrings } from './chunk-QIA5FAAW.js';
+import { MultipleChoice } from './chunk-3UXRX4KU.js';
+import { FillInTheBlanks } from './chunk-VC2MPB2Y.js';
+import { GapSelect } from './chunk-5QHVYOME.js';
+import { Dictation } from './chunk-IQI5I2X5.js';
+import { stopCaptureGroup, SequenceSlotContext, ReadAloud } from './chunk-GUPBIEUA.js';
+import { ActivityErrorBoundary, isDevelopment } from './chunk-DKZWUIQD.js';
+import { useLkStrings } from './chunk-KSAINXRG.js';
 import { assertRedactedItemGroup, validateItemGroup, ActivitySchemaError, flattenSequence, readMediaProgress } from '@intellectif/lk-core';
 import { useMemo, useRef, useState, useEffect, useCallback } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -700,8 +700,10 @@ function EndScreen({
   strings,
   onOpenQuiz,
   onWatchAgain,
+  pending,
   onFinish
 }) {
+  const pendingId = `${idPrefix}-end-pending`;
   const headingRef = useRef(null);
   useEffect(() => {
     headingRef.current?.focus();
@@ -726,12 +728,23 @@ function EndScreen({
         ]
       }
     ) }, quiz.id)) }) : null,
+    onFinish !== void 0 && pending ? /* @__PURE__ */ jsx("p", { id: pendingId, className: "lk-iv-end-pending", role: "status", children: strings.videoAnswerPending }) : null,
     /* @__PURE__ */ jsxs("div", { className: "lk-iv-end-actions", children: [
       /* @__PURE__ */ jsxs("button", { type: "button", className: "lk-iv-action", onClick: onWatchAgain, children: [
         /* @__PURE__ */ jsx(ReplayIcon, {}),
         strings.videoWatchAgain
       ] }),
-      onFinish !== void 0 ? /* @__PURE__ */ jsx("button", { type: "button", className: "lk-iv-action lk-iv-action-primary", onClick: onFinish, children: strings.videoFinish }) : null
+      onFinish !== void 0 ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "lk-iv-action lk-iv-action-primary",
+          "aria-disabled": pending || void 0,
+          "aria-describedby": pending ? pendingId : void 0,
+          onClick: onFinish,
+          children: strings.videoFinish
+        }
+      ) : null
     ] })
   ] }) });
 }
@@ -1286,18 +1299,61 @@ function Player(props) {
   });
   const answeredRef = useRef(answered);
   answeredRef.current = answered;
-  const scores = useRef(/* @__PURE__ */ new Map());
-  const markAnswered = useCallback((slotId) => {
+  const setSlotAnswered = useCallback((slotId, on) => {
     setAnswered((previous) => {
-      if (previous.has(slotId)) {
+      if (previous.has(slotId) === on) {
         return previous;
       }
       const next = new Set(previous);
-      next.add(slotId);
+      if (on) {
+        next.add(slotId);
+      } else {
+        next.delete(slotId);
+      }
       answeredRef.current = next;
       return next;
     });
   }, []);
+  const [scores, setScores] = useState(() => /* @__PURE__ */ new Map());
+  const setSlotScore = useCallback((slotId, score) => {
+    setScores((previous) => {
+      if (previous.get(slotId) === score) {
+        return previous;
+      }
+      const next = new Map(previous);
+      if (score === void 0) {
+        next.delete(slotId);
+      } else {
+        next.set(slotId, score);
+      }
+      return next;
+    });
+  }, []);
+  const [pending, setPendingState] = useState(() => /* @__PURE__ */ new Set());
+  const pendingRef = useRef(pending);
+  const setPendingKey = useCallback((key, on) => {
+    setPendingState((previous) => {
+      if (previous.has(key) === on) {
+        return previous;
+      }
+      const next = new Set(previous);
+      if (on) {
+        next.add(key);
+      } else {
+        next.delete(key);
+      }
+      pendingRef.current = next;
+      return next;
+    });
+  }, []);
+  const latestTakes = useRef(/* @__PURE__ */ new Map());
+  const alive = useRef(true);
+  useEffect(() => {
+    alive.current = true;
+    return () => {
+      alive.current = false;
+    };
+  }, []);
   const finished = useCallback(
     (cueId) => (slotsByCue.get(cueId) ?? []).every((slot) => answeredRef.current.has(slot.slotId)),
     [slotsByCue]
@@ -1306,6 +1362,7 @@ function Player(props) {
   const videoRef = useRef(null);
   const playButtonRef = useRef(null);
   const quizHeadingRef = useRef(null);
+  const [portalContainer, setPortalContainer] = useState(null);
   const [playing, setPlaying] = useState(false);
   const [waiting, setWaiting] = useState(false);
   const [errorCode, setErrorCode] = useState(null);
@@ -1555,9 +1612,9 @@ function Player(props) {
   const loaded = useRef(/* @__PURE__ */ new Map());
   const loadCues = useCallback((track) => {
     const key = trackKey(track);
-    const pending = loading.current.get(key);
-    if (pending !== void 0) {
-      return pending;
+    const pending2 = loading.current.get(key);
+    if (pending2 !== void 0) {
+      return pending2;
     }
     const request = Promise.resolve().then(
       () => loaderRef.current ? loaderRef.current(track) : fetch(track.src, { credentials: "same-origin" }).then((response) => {
@@ -1886,7 +1943,7 @@ function Player(props) {
   }));
   const totalQuestions = quizzes.reduce((sum, quiz) => sum + quiz.total, 0);
   const answeredCount = quizzes.reduce((sum, quiz) => sum + quiz.answered, 0);
-  const graded = [...scores.current.values()];
+  const graded = [...scores.values()];
   const percent = graded.length === 0 ? null : Math.round(graded.reduce((a, b) => a + b, 0) / graded.length * 100);
   const summary = useCallback(() => {
     return {
@@ -1908,11 +1965,12 @@ function Player(props) {
     finishedOnce.current = true;
     onFinished?.(summary());
   }, [onFinished, summary]);
+  const answerPending = pending.size > 0;
   useEffect(() => {
-    if (ended && totalQuestions > 0 && answeredCount === totalQuestions && renderMode !== "review") {
+    if (ended && !answerPending && totalQuestions > 0 && answeredCount === totalQuestions && renderMode !== "review") {
       finish();
     }
-  }, [ended, totalQuestions, answeredCount, renderMode, finish]);
+  }, [ended, answerPending, totalQuestions, answeredCount, renderMode, finish]);
   const slotBindings = useMemo(() => {
     const bindings = /* @__PURE__ */ new Map();
     if (recordingBinding === void 0) {
@@ -1933,41 +1991,147 @@ function Player(props) {
     }
     return bindings;
   }, [slots, recordingBinding]);
-  const renderQuestion = (slot, cueId) => {
-    const activity = slot.activity;
-    const place = {
-      slotId: slot.slotId,
-      index: slot.index,
-      activityId: activity.id,
-      cueId
+  const places = useMemo(() => {
+    const byId = /* @__PURE__ */ new Map();
+    for (const [cueId, cueSlots] of slotsByCue) {
+      for (const slot of cueSlots) {
+        byId.set(slot.slotId, {
+          slotId: slot.slotId,
+          index: slot.index,
+          activityId: slot.activity.id,
+          cueId
+        });
+      }
+    }
+    return byId;
+  }, [slotsByCue]);
+  const reportTo = useRef({ onSubmit, onActivityComplete, onInteraction, renderMode });
+  reportTo.current = { onSubmit, onActivityComplete, onInteraction, renderMode };
+  const calls = useRef(/* @__PURE__ */ new Map());
+  const callsFor = (place) => {
+    const made = calls.current.get(place.slotId);
+    if (made !== void 0) {
+      return made;
+    }
+    const { slotId } = place;
+    const warned = /* @__PURE__ */ new Set();
+    const refused = (call) => {
+      if (reportTo.current.renderMode !== "review") {
+        return false;
+      }
+      if (isDevelopment() && !warned.has(call)) {
+        warned.add(call);
+        console.warn(
+          `InteractiveVideo: \`${call}()\` was called for question "${slotId}" in renderMode "review", where nothing is submittable. It was ignored.`
+        );
+      }
+      return true;
+    };
+    const next = {
+      submit: (response) => {
+        if (!alive.current || refused("submit")) {
+          return;
+        }
+        setSlotAnswered(slotId, true);
+        reportTo.current.onSubmit?.(response, place);
+      },
+      complete: (result) => {
+        if (!alive.current || refused("complete")) {
+          return;
+        }
+        setSlotAnswered(slotId, true);
+        setSlotScore(slotId, result.maxScore > 0 ? result.score / result.maxScore : void 0);
+        reportTo.current.onActivityComplete?.(result, place);
+      },
+      clear: () => {
+        if (!alive.current || refused("clear")) {
+          return;
+        }
+        setSlotAnswered(slotId, false);
+        setSlotScore(slotId, void 0);
+      },
+      setPending: (on) => {
+        if (!alive.current) {
+          return;
+        }
+        setPendingKey(`host:${slotId}`, on === true);
+      },
+      emit: (type, payload) => {
+        if (!alive.current) {
+          return;
+        }
+        reportTo.current.onInteraction?.({
+          type,
+          activityId: place.activityId,
+          timestamp: Date.now(),
+          ...payload !== void 0 ? { payload } : {}
+        });
+      }
+    };
+    calls.current.set(slotId, next);
+    return next;
+  };
+  const reportTake = (slotId, take, state) => {
+    if (!alive.current) {
+      return;
+    }
+    const latest = latestTakes.current.get(slotId);
+    if (latest !== void 0 && take < latest) {
+      return;
+    }
+    latestTakes.current.set(slotId, take);
+    setPendingKey(`take:${slotId}`, state === "in-flight");
+  };
+  const channels = useRef(/* @__PURE__ */ new Map());
+  const channelFor = (slotId) => {
+    let channel = channels.current.get(slotId);
+    if (channel === void 0) {
+      channel = {
+        captureGroup: `${playerId}::${slotId}`,
+        takeState: (take, state) => reportTake(slotId, take, state)
+      };
+      channels.current.set(slotId, channel);
+    }
+    return channel;
+  };
+  const seedsFor = (slotId) => ({
+    restored: props.responses !== void 0 && Object.hasOwn(props.responses, slotId) ? props.responses[slotId] : void 0,
+    outcome: props.outcomes !== void 0 && Object.hasOwn(props.outcomes, slotId) ? props.outcomes[slotId] : void 0
+  });
+  const questionFor = (slot, place, active) => {
+    const { restored, outcome } = seedsFor(slot.slotId);
+    return {
+      activity: slot.activity,
+      slot: place,
+      renderMode,
+      active,
+      ...locale !== void 0 ? { locale } : {},
+      ...restored !== void 0 ? { defaultValue: restored } : {},
+      defaultSubmitted: submitted.has(slot.slotId),
+      ...outcome !== void 0 ? { outcome } : {},
+      portalContainer,
+      ...callsFor(place)
     };
-    const 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 sdkQuestion = (slot, place) => {
+    const activity = slot.activity;
+    const { restored, outcome } = seedsFor(slot.slotId);
+    const reported = callsFor(place);
     const common = {
       renderMode,
       ...restored !== void 0 ? { defaultValue: restored } : {},
       ...submitted.has(slot.slotId) ? { defaultSubmitted: true } : {},
       ...outcome !== void 0 ? { outcome } : {},
-      onSubmit: (response) => {
-        markAnswered(slot.slotId);
-        onSubmit?.(response, place);
-      },
-      onComplete: (result) => {
-        markAnswered(slot.slotId);
-        if (result.maxScore > 0) {
-          scores.current.set(slot.slotId, result.score / result.maxScore);
-        }
-        onActivityComplete?.(result, place);
-      },
+      onSubmit: reported.submit,
+      onComplete: reported.complete,
       ...onInteraction !== void 0 ? { onInteraction } : {},
       ...sanitizeHtml !== void 0 ? { sanitizeHtml } : {},
       ...props.strings !== void 0 ? { strings: props.strings } : {},
       ...locale !== void 0 ? { locale } : {}
     };
-    let question;
     switch (activity.type) {
       case "multiple-choice":
-        question = /* @__PURE__ */ jsx(
+        return /* @__PURE__ */ jsx(
           MultipleChoice,
           {
             data: activity,
@@ -1975,12 +2139,10 @@ function Player(props) {
             ...shuffleSeed !== void 0 ? { shuffleSeed } : {}
           }
         );
-        break;
       case "fill-in-the-blanks":
-        question = /* @__PURE__ */ jsx(FillInTheBlanks, { data: activity, ...common });
-        break;
+        return /* @__PURE__ */ jsx(FillInTheBlanks, { data: activity, ...common });
       case "gap-select":
-        question = /* @__PURE__ */ jsx(
+        return /* @__PURE__ */ jsx(
           GapSelect,
           {
             data: activity,
@@ -1988,14 +2150,12 @@ function Player(props) {
             ...shuffleSeed !== void 0 ? { shuffleSeed } : {}
           }
         );
-        break;
       case "dictation":
-        question = /* @__PURE__ */ jsx(Dictation, { data: activity, ...common });
-        break;
+        return /* @__PURE__ */ jsx(Dictation, { data: activity, ...common });
       case "read-aloud": {
         const binding = slotBindings.get(slot.slotId);
         const assessment = props.assessments !== void 0 && Object.hasOwn(props.assessments, slot.slotId) ? props.assessments[slot.slotId] : void 0;
-        question = /* @__PURE__ */ jsx(
+        return /* @__PURE__ */ jsx(
           ReadAloud,
           {
             data: activity,
@@ -2005,21 +2165,10 @@ function Player(props) {
             ...workletUrl !== void 0 ? { workletUrl } : {}
           }
         );
-        break;
       }
       default:
-        question = null;
-    }
-    return question;
-  };
-  const channels = useRef(/* @__PURE__ */ new Map());
-  const channelFor = (slotId) => {
-    let channel = channels.current.get(slotId);
-    if (channel === void 0) {
-      channel = { captureGroup: `${playerId}::${slotId}`, takeState: () => void 0 };
-      channels.current.set(slotId, channel);
+        return null;
     }
-    return channel;
   };
   if (devError !== null) {
     throw devError;
@@ -2440,7 +2589,7 @@ function Player(props) {
                     "aria-labelledby": `${playerId}-quiz-title`,
                     hidden: openQuiz === null,
                     onKeyDown: (event) => {
-                      if (event.key === "Escape" && !required && openQuiz !== null) {
+                      if (event.key === "Escape" && !event.defaultPrevented && !required && openQuiz !== null) {
                         event.preventDefault();
                         closeQuiz("skip");
                       }
@@ -2487,15 +2636,29 @@ function Player(props) {
                         ] }) : null
                       ] }) : null,
                       /* @__PURE__ */ jsx("div", { className: "lk-iv-quiz-body", children: cues.filter((cue) => mounted.has(cue.id)).map(
-                        (cue) => (slotsByCue.get(cue.id) ?? []).map((slot, index) => /* @__PURE__ */ jsx(
-                          QuestionPane,
-                          {
-                            hidden: !(openQuiz?.cueId === cue.id && step === index),
-                            channel: channelFor(slot.slotId),
-                            children: renderQuestion(slot, cue.id)
-                          },
-                          slot.slotId
-                        ))
+                        (cue) => (slotsByCue.get(cue.id) ?? []).map((slot, index) => {
+                          const shown = openQuiz?.cueId === cue.id && step === index;
+                          const place = places.get(slot.slotId);
+                          return /* @__PURE__ */ jsx(
+                            QuestionPane,
+                            {
+                              hidden: !shown,
+                              channel: channelFor(slot.slotId),
+                              children: /* @__PURE__ */ jsx(
+                                SlotQuestion,
+                                {
+                                  title: slot.activity.title,
+                                  strings,
+                                  render: props.renderQuestion,
+                                  question: props.renderQuestion === void 0 ? void 0 : questionFor(slot, place, shown),
+                                  sdk: () => sdkQuestion(slot, place),
+                                  setHostPending: callsFor(place).setPending
+                                }
+                              )
+                            },
+                            slot.slotId
+                          );
+                        })
                       ) }),
                       openCue !== void 0 ? /* @__PURE__ */ jsxs("div", { className: "lk-iv-quiz-foot", children: [
                         /* @__PURE__ */ jsxs("div", { className: "lk-iv-quiz-foot-start", children: [
@@ -2551,7 +2714,14 @@ function Player(props) {
                       }
                     },
                     onWatchAgain: togglePlay,
-                    onFinish: renderMode === "review" ? void 0 : finish
+                    pending: answerPending,
+                    onFinish: renderMode === "review" ? void 0 : () => {
+                      if (pendingRef.current.size > 0) {
+                        announce(strings.videoAnswerPending);
+                        return;
+                      }
+                      finish();
+                    }
                   }
                 ) : null,
                 sheet ? /* @__PURE__ */ jsx(
@@ -2602,12 +2772,43 @@ function Player(props) {
               }
             }
           ) : null,
-          /* @__PURE__ */ jsx("div", { className: "lk-iv-live", "aria-live": "polite", "aria-atomic": "true", children: announcement })
+          /* @__PURE__ */ jsx("div", { className: "lk-iv-live", "aria-live": "polite", "aria-atomic": "true", children: announcement }),
+          /* @__PURE__ */ jsx("div", { ref: setPortalContainer, className: "lk-iv-portal" })
         ]
       }
     )
   );
 }
+function SlotQuestion({
+  title,
+  strings,
+  ...content
+}) {
+  return /* @__PURE__ */ jsx(
+    ActivityErrorBoundary,
+    {
+      ...title !== void 0 ? { activityTitle: title } : {},
+      strings,
+      children: /* @__PURE__ */ jsx(SlotContent, { ...content })
+    }
+  );
+}
+function SlotContent({
+  render,
+  question,
+  sdk,
+  setHostPending
+}) {
+  const hosted = render !== void 0 && question !== void 0 ? render(question) : void 0;
+  const hosting = hosted !== void 0;
+  useEffect(() => {
+    if (!hosting) {
+      return;
+    }
+    return () => setHostPending(false);
+  }, [hosting, setHostPending]);
+  return hosting ? hosted : sdk();
+}
 function QuestionPane({
   hidden,
   channel,
@@ -2679,5 +2880,5 @@ function InteractiveVideo2(props) {
 }
 
 export { InteractiveVideo2 as InteractiveVideo, resolveCaptionTracks };
-//# sourceMappingURL=chunk-3IHVDQRC.js.map
-//# sourceMappingURL=chunk-3IHVDQRC.js.map
+//# sourceMappingURL=chunk-DVOPHC2Q.js.map
+//# sourceMappingURL=chunk-DVOPHC2Q.js.map