@intellectif/lk-react 16.0.0 → 16.1.0

package/dist/{chunk-A2CPCOJA.cjs → chunk-WOYCT5M6.cjs}

@@ -1,13 +1,13 @@
 'use client';
 'use strict';
 
-var chunkDMCFARGP_cjs = require('./chunk-DMCFARGP.cjs');
-var chunkZA5QUQ2V_cjs = require('./chunk-ZA5QUQ2V.cjs');
-var chunkRJGCT35F_cjs = require('./chunk-RJGCT35F.cjs');
-var chunk2YZZL5FV_cjs = require('./chunk-2YZZL5FV.cjs');
-var chunk2WM2KSO7_cjs = require('./chunk-2WM2KSO7.cjs');
-var chunkP5FGJMMI_cjs = require('./chunk-P5FGJMMI.cjs');
-var chunkUISZWFI7_cjs = require('./chunk-UISZWFI7.cjs');
+var chunkZSY4VANQ_cjs = require('./chunk-ZSY4VANQ.cjs');
+var chunk2TFNDHJ5_cjs = require('./chunk-2TFNDHJ5.cjs');
+var chunkB6S5ADHR_cjs = require('./chunk-B6S5ADHR.cjs');
+var chunkRSQFGF5W_cjs = require('./chunk-RSQFGF5W.cjs');
+var chunkML6L4LJH_cjs = require('./chunk-ML6L4LJH.cjs');
+var chunk2S3MK4VX_cjs = require('./chunk-2S3MK4VX.cjs');
+var chunkMQAZJQRE_cjs = require('./chunk-MQAZJQRE.cjs');
 var lkCore = require('@intellectif/lk-core');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
@@ -702,8 +702,10 @@ function EndScreen({
   strings,
   onOpenQuiz,
   onWatchAgain,
+  pending,
   onFinish
 }) {
+  const pendingId = `${idPrefix}-end-pending`;
   const headingRef = react.useRef(null);
   react.useEffect(() => {
     headingRef.current?.focus();
@@ -728,12 +730,23 @@ function EndScreen({
         ]
       }
     ) }, quiz.id)) }) : null,
+    onFinish !== void 0 && pending ? /* @__PURE__ */ jsxRuntime.jsx("p", { id: pendingId, className: "lk-iv-end-pending", role: "status", children: strings.videoAnswerPending }) : 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
+      onFinish !== void 0 ? /* @__PURE__ */ jsxRuntime.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
     ] })
   ] }) });
 }
@@ -1205,13 +1218,13 @@ function Player(props) {
     theme,
     sanitizeHtml
   } = props;
-  const strings = chunkUISZWFI7_cjs.useLkStrings(props.strings);
+  const strings = chunkMQAZJQRE_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 (!chunkP5FGJMMI_cjs.isDevelopment()) {
+    if (!chunk2S3MK4VX_cjs.isDevelopment()) {
       return null;
     }
     if (group.timeline === void 0) {
@@ -1288,18 +1301,61 @@ function Player(props) {
   });
   const answeredRef = react.useRef(answered);
   answeredRef.current = answered;
-  const scores = react.useRef(/* @__PURE__ */ new Map());
-  const markAnswered = react.useCallback((slotId) => {
+  const setSlotAnswered = react.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] = react.useState(() => /* @__PURE__ */ new Map());
+  const setSlotScore = react.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] = react.useState(() => /* @__PURE__ */ new Set());
+  const pendingRef = react.useRef(pending);
+  const setPendingKey = react.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 = react.useRef(/* @__PURE__ */ new Map());
+  const alive = react.useRef(true);
+  react.useEffect(() => {
+    alive.current = true;
+    return () => {
+      alive.current = false;
+    };
+  }, []);
   const finished = react.useCallback(
     (cueId) => (slotsByCue.get(cueId) ?? []).every((slot) => answeredRef.current.has(slot.slotId)),
     [slotsByCue]
@@ -1308,6 +1364,7 @@ function Player(props) {
   const videoRef = react.useRef(null);
   const playButtonRef = react.useRef(null);
   const quizHeadingRef = react.useRef(null);
+  const [portalContainer, setPortalContainer] = react.useState(null);
   const [playing, setPlaying] = react.useState(false);
   const [waiting, setWaiting] = react.useState(false);
   const [errorCode, setErrorCode] = react.useState(null);
@@ -1557,9 +1614,9 @@ function Player(props) {
   const loaded = react.useRef(/* @__PURE__ */ new Map());
   const loadCues = react.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) => {
@@ -1888,7 +1945,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 = react.useCallback(() => {
     return {
@@ -1910,11 +1967,12 @@ function Player(props) {
     finishedOnce.current = true;
     onFinished?.(summary());
   }, [onFinished, summary]);
+  const answerPending = pending.size > 0;
   react.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 = react.useMemo(() => {
     const bindings = /* @__PURE__ */ new Map();
     if (recordingBinding === void 0) {
@@ -1935,70 +1993,172 @@ 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 = react.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 = react.useRef({ onSubmit, onActivityComplete, onInteraction, renderMode });
+  reportTo.current = { onSubmit, onActivityComplete, onInteraction, renderMode };
+  const calls = react.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 (chunk2S3MK4VX_cjs.isDevelopment() && !warned.has(call)) {
+        warned.add(call);
+        console.warn(
+          `InteractiveVideo: \`${call}()\` was called for question "${slotId}" in renderMode "review", where nothing is submittable. It was ignored.`
+        );
+      }
+      return true;
+    };
+    const next = {
+      submit: (response) => {
+        if (!alive.current || refused("submit")) {
+          return;
+        }
+        setSlotAnswered(slotId, true);
+        reportTo.current.onSubmit?.(response, place);
+      },
+      complete: (result) => {
+        if (!alive.current || refused("complete")) {
+          return;
+        }
+        setSlotAnswered(slotId, true);
+        setSlotScore(slotId, result.maxScore > 0 ? result.score / result.maxScore : void 0);
+        reportTo.current.onActivityComplete?.(result, place);
+      },
+      clear: () => {
+        if (!alive.current || refused("clear")) {
+          return;
+        }
+        setSlotAnswered(slotId, false);
+        setSlotScore(slotId, void 0);
+      },
+      setPending: (on) => {
+        if (!alive.current) {
+          return;
+        }
+        setPendingKey(`host:${slotId}`, on === true);
+      },
+      emit: (type, payload) => {
+        if (!alive.current) {
+          return;
+        }
+        reportTo.current.onInteraction?.({
+          type,
+          activityId: place.activityId,
+          timestamp: Date.now(),
+          ...payload !== void 0 ? { payload } : {}
+        });
+      }
     };
-    const restored = props.responses !== void 0 && Object.hasOwn(props.responses, slot.slotId) ? props.responses[slot.slotId] : void 0;
-    const outcome = props.outcomes !== void 0 && Object.hasOwn(props.outcomes, slot.slotId) ? props.outcomes[slot.slotId] : void 0;
+    calls.current.set(slotId, next);
+    return next;
+  };
+  const reportTake = (slotId, take, state) => {
+    if (!alive.current) {
+      return;
+    }
+    const latest = latestTakes.current.get(slotId);
+    if (latest !== void 0 && take < latest) {
+      return;
+    }
+    latestTakes.current.set(slotId, take);
+    setPendingKey(`take:${slotId}`, state === "in-flight");
+  };
+  const channels = react.useRef(/* @__PURE__ */ new Map());
+  const channelFor = (slotId) => {
+    let channel = channels.current.get(slotId);
+    if (channel === void 0) {
+      channel = {
+        captureGroup: `${playerId}::${slotId}`,
+        takeState: (take, state) => reportTake(slotId, take, state)
+      };
+      channels.current.set(slotId, channel);
+    }
+    return channel;
+  };
+  const seedsFor = (slotId) => ({
+    restored: props.responses !== void 0 && Object.hasOwn(props.responses, slotId) ? props.responses[slotId] : void 0,
+    outcome: props.outcomes !== void 0 && Object.hasOwn(props.outcomes, slotId) ? props.outcomes[slotId] : void 0
+  });
+  const questionFor = (slot, place, active) => {
+    const { restored, outcome } = seedsFor(slot.slotId);
+    return {
+      activity: slot.activity,
+      slot: place,
+      renderMode,
+      active,
+      ...locale !== void 0 ? { locale } : {},
+      ...restored !== void 0 ? { defaultValue: restored } : {},
+      defaultSubmitted: submitted.has(slot.slotId),
+      ...outcome !== void 0 ? { outcome } : {},
+      portalContainer,
+      ...callsFor(place)
+    };
+  };
+  const sdkQuestion = (slot, place) => {
+    const activity = slot.activity;
+    const { restored, outcome } = seedsFor(slot.slotId);
+    const reported = callsFor(place);
     const common = {
       renderMode,
       ...restored !== void 0 ? { defaultValue: restored } : {},
       ...submitted.has(slot.slotId) ? { defaultSubmitted: true } : {},
       ...outcome !== void 0 ? { outcome } : {},
-      onSubmit: (response) => {
-        markAnswered(slot.slotId);
-        onSubmit?.(response, place);
-      },
-      onComplete: (result) => {
-        markAnswered(slot.slotId);
-        if (result.maxScore > 0) {
-          scores.current.set(slot.slotId, result.score / result.maxScore);
-        }
-        onActivityComplete?.(result, place);
-      },
+      onSubmit: reported.submit,
+      onComplete: reported.complete,
       ...onInteraction !== void 0 ? { onInteraction } : {},
       ...sanitizeHtml !== void 0 ? { sanitizeHtml } : {},
       ...props.strings !== void 0 ? { strings: props.strings } : {},
       ...locale !== void 0 ? { locale } : {}
     };
-    let question;
     switch (activity.type) {
       case "multiple-choice":
-        question = /* @__PURE__ */ jsxRuntime.jsx(
-          chunkDMCFARGP_cjs.MultipleChoice,
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          chunkZSY4VANQ_cjs.MultipleChoice,
           {
             data: activity,
             ...common,
             ...shuffleSeed !== void 0 ? { shuffleSeed } : {}
           }
         );
-        break;
       case "fill-in-the-blanks":
-        question = /* @__PURE__ */ jsxRuntime.jsx(chunkZA5QUQ2V_cjs.FillInTheBlanks, { data: activity, ...common });
-        break;
+        return /* @__PURE__ */ jsxRuntime.jsx(chunk2TFNDHJ5_cjs.FillInTheBlanks, { data: activity, ...common });
       case "gap-select":
-        question = /* @__PURE__ */ jsxRuntime.jsx(
-          chunkRJGCT35F_cjs.GapSelect,
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          chunkB6S5ADHR_cjs.GapSelect,
           {
             data: activity,
             ...common,
             ...shuffleSeed !== void 0 ? { shuffleSeed } : {}
           }
         );
-        break;
       case "dictation":
-        question = /* @__PURE__ */ jsxRuntime.jsx(chunk2YZZL5FV_cjs.Dictation, { data: activity, ...common });
-        break;
+        return /* @__PURE__ */ jsxRuntime.jsx(chunkRSQFGF5W_cjs.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__ */ jsxRuntime.jsx(
-          chunk2WM2KSO7_cjs.ReadAloud,
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          chunkML6L4LJH_cjs.ReadAloud,
           {
             data: activity,
             ...common,
@@ -2007,21 +2167,10 @@ function Player(props) {
             ...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 null;
     }
-    return channel;
   };
   if (devError !== null) {
     throw devError;
@@ -2442,7 +2591,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");
                       }
@@ -2489,15 +2638,29 @@ function Player(props) {
                         ] }) : 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
-                        ))
+                        (cue) => (slotsByCue.get(cue.id) ?? []).map((slot, index) => {
+                          const shown = openQuiz?.cueId === cue.id && step === index;
+                          const place = places.get(slot.slotId);
+                          return /* @__PURE__ */ jsxRuntime.jsx(
+                            QuestionPane,
+                            {
+                              hidden: !shown,
+                              channel: channelFor(slot.slotId),
+                              children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "lk-iv-quiz-foot", children: [
                         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lk-iv-quiz-foot-start", children: [
@@ -2553,7 +2716,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__ */ jsxRuntime.jsx(
@@ -2604,12 +2774,43 @@ function Player(props) {
               }
             }
           ) : null,
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lk-iv-live", "aria-live": "polite", "aria-atomic": "true", children: announcement })
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lk-iv-live", "aria-live": "polite", "aria-atomic": "true", children: announcement }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { ref: setPortalContainer, className: "lk-iv-portal" })
         ]
       }
     )
   );
 }
+function SlotQuestion({
+  title,
+  strings,
+  ...content
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    chunk2S3MK4VX_cjs.ActivityErrorBoundary,
+    {
+      ...title !== void 0 ? { activityTitle: title } : {},
+      strings,
+      children: /* @__PURE__ */ jsxRuntime.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;
+  react.useEffect(() => {
+    if (!hosting) {
+      return;
+    }
+    return () => setHostPending(false);
+  }, [hosting, setHostPending]);
+  return hosting ? hosted : sdk();
+}
 function QuestionPane({
   hidden,
   channel,
@@ -2621,7 +2822,7 @@ function QuestionPane({
     if (!hidden) {
       return;
     }
-    chunk2WM2KSO7_cjs.stopCaptureGroup(captureGroup);
+    chunkML6L4LJH_cjs.stopCaptureGroup(captureGroup);
     for (const media of ref.current?.querySelectorAll("audio, video") ?? []) {
       const element = media;
       if (!element.paused) {
@@ -2629,7 +2830,7 @@ function QuestionPane({
       }
     }
   }, [hidden, captureGroup]);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: "lk-iv-question", hidden, children: /* @__PURE__ */ jsxRuntime.jsx(chunk2WM2KSO7_cjs.SequenceSlotContext.Provider, { value: channel, children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: "lk-iv-question", hidden, children: /* @__PURE__ */ jsxRuntime.jsx(chunkML6L4LJH_cjs.SequenceSlotContext.Provider, { value: channel, children }) });
 }
 function bufferedAhead(video) {
   const ranges = video.buffered;
@@ -2669,9 +2870,9 @@ function markerState(quizSlots, answered, renderMode, outcomes) {
   return "unreached";
 }
 function InteractiveVideo2(props) {
-  const strings = chunkUISZWFI7_cjs.useLkStrings(props.strings);
+  const strings = chunkMQAZJQRE_cjs.useLkStrings(props.strings);
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunkP5FGJMMI_cjs.ActivityErrorBoundary,
+    chunk2S3MK4VX_cjs.ActivityErrorBoundary,
     {
       ...props.group?.title !== void 0 ? { activityTitle: props.group.title } : {},
       strings,
@@ -2682,5 +2883,5 @@ function InteractiveVideo2(props) {
 
 exports.InteractiveVideo = InteractiveVideo2;
 exports.resolveCaptionTracks = resolveCaptionTracks;
-//# sourceMappingURL=chunk-A2CPCOJA.cjs.map
-//# sourceMappingURL=chunk-A2CPCOJA.cjs.map
+//# sourceMappingURL=chunk-WOYCT5M6.cjs.map
+//# sourceMappingURL=chunk-WOYCT5M6.cjs.map