markdown-flow-ui 0.1.108 → 0.1.109

package/dist/components/Slide/Slide.es.js

@@ -1,478 +1,546 @@
-import { j as t } from "../../_virtual/jsx-runtime.es.js";
-import { memo as Xt, useRef as g, useMemo as c, useState as m, useCallback as r, useEffect as a } from "react";
-import { isSandboxInteractionMessage as Jt } from "../../lib/sandboxInteraction.es.js";
-import { cn as G } from "../../lib/utils.es.js";
-import Qt from "../ui/loading-overlay-card.es.js";
-import Zt from "../ContentRender/ContentRender.es.js";
-import dt from "../ContentRender/IframeSandbox.es.js";
+import { j as n } from "../../_virtual/jsx-runtime.es.js";
+import { memo as dn, useRef as v, useMemo as i, useState as f, useCallback as r, useEffect as c } from "react";
+import { isSandboxInteractionMessage as fn } from "../../lib/sandboxInteraction.es.js";
+import { cn as X } from "../../lib/utils.es.js";
+import mn from "../ui/loading-overlay-card.es.js";
+import pn from "../ContentRender/ContentRender.es.js";
+import xt from "../ContentRender/IframeSandbox.es.js";
 import "../ui/inputGroup/input-group.es.js";
-import { getInteractionDefaultValues as en, getInteractionDefaultSelectedValues as tn } from "../../lib/interaction-defaults.es.js";
-import { isMobileDevice as nn, isLandscapeViewport as ft, subscribeMobileDeviceChange as rn } from "../../lib/mobileDevice.es.js";
-import on from "./Player.es.js";
-import { DEFAULT_SLIDE_PLAYER_TEXTS as ln } from "./constants.es.js";
-import sn from "./SlideFullscreenHint.es.js";
-import cn from "./useSlide.es.js";
-import an from "./useWakePlayerFromIframe.es.js";
-import { DEFAULT_MOBILE_VIEW_MODE as ve, resolveMobileViewModeState as un } from "./utils/mobileScreenMode.es.js";
-import { shouldPresentInteractionOverlay as dn } from "./utils/interactionPlayback.es.js";
-import { getPlaybackSequenceTransition as fn } from "./utils/playbackSequence.es.js";
-import { resolvePlayerCustomActionElement as mn, getPlayerCustomActionCount as pn } from "./utils/playerCustomActions.es.js";
-import { shouldUseAutoAdvanceToggle as hn } from "./utils/playerToggleMode.es.js";
+import { getInteractionDefaultValues as hn, getInteractionDefaultSelectedValues as vn } from "../../lib/interaction-defaults.es.js";
+import { isMobileDevice as yn, isLandscapeViewport as wt, subscribeMobileDeviceChange as bn } from "../../lib/mobileDevice.es.js";
+import gn from "./Player.es.js";
+import Sn from "./SubtitleOverlay.es.js";
+import { DEFAULT_SLIDE_PLAYER_TEXTS as xn } from "./constants.es.js";
+import wn from "./SlideFullscreenHint.es.js";
+import In from "./useSlide.es.js";
+import An from "./useWakePlayerFromIframe.es.js";
+import { DEFAULT_MOBILE_VIEW_MODE as Se, resolveMobileViewModeState as _n } from "./utils/mobileScreenMode.es.js";
+import { shouldPresentInteractionOverlay as En } from "./utils/interactionPlayback.es.js";
+import { getPlaybackSequenceTransition as Tn } from "./utils/playbackSequence.es.js";
+import { resolvePlayerCustomActionElement as Pn, getPlayerCustomActionCount as Cn } from "./utils/playerCustomActions.es.js";
+import { createPlaybackTimeStore as Rn } from "./utils/playbackTimeStore.es.js";
+import { shouldUseAutoAdvanceToggle as Fn } from "./utils/playerToggleMode.es.js";
 /* empty css             */
-import vn from "../../markdown-flow-ui/node_modules/.pnpm/lucide-react@0.525.0_react@19.0.1/node_modules/lucide-react/dist/esm/icons/chevron-left.es.js";
-const gn = 2e3, mt = Xt(
+import Mn from "../../markdown-flow-ui/node_modules/.pnpm/lucide-react@0.525.0_react@19.0.1/node_modules/lucide-react/dist/esm/icons/chevron-left.es.js";
+const On = 2e3, Bn = 300, Nn = 160, kn = 16, It = dn(
   ({
-    content: k,
-    title: L,
-    defaultButtonText: y,
-    defaultInputText: Y,
-    defaultSelectedValues: x,
-    confirmButtonText: V,
-    copyButtonText: X,
-    copiedButtonText: ge,
-    onSend: ye,
-    readonly: K = !1
-  }) => /* @__PURE__ */ t.jsxs("div", { className: "slide-player__interaction-card", children: [
-    /* @__PURE__ */ t.jsx("div", { className: "slide-player__interaction-header", children: /* @__PURE__ */ t.jsx("p", { className: "slide-player__interaction-title", children: L }) }),
-    /* @__PURE__ */ t.jsx("div", { className: "slide-player__interaction-body", children: /* @__PURE__ */ t.jsx(
-      Zt,
+    content: L,
+    title: j,
+    defaultButtonText: g,
+    defaultInputText: J,
+    defaultSelectedValues: S,
+    confirmButtonText: K,
+    copyButtonText: Q,
+    copiedButtonText: xe,
+    onSend: we,
+    readonly: V = !1
+  }) => /* @__PURE__ */ n.jsxs("div", { className: "slide-player__interaction-card", children: [
+    /* @__PURE__ */ n.jsx("div", { className: "slide-player__interaction-header", children: /* @__PURE__ */ n.jsx("p", { className: "slide-player__interaction-title", children: j }) }),
+    /* @__PURE__ */ n.jsx("div", { className: "slide-player__interaction-body", children: /* @__PURE__ */ n.jsx(
+      pn,
       {
-        content: k,
-        defaultButtonText: y,
-        defaultInputText: Y,
-        defaultSelectedValues: x,
-        confirmButtonText: V,
-        copyButtonText: X,
-        copiedButtonText: ge,
-        onSend: ye,
-        readonly: K,
+        content: L,
+        defaultButtonText: g,
+        defaultInputText: J,
+        defaultSelectedValues: S,
+        confirmButtonText: K,
+        copyButtonText: Q,
+        copiedButtonText: xe,
+        onSend: we,
+        readonly: V,
         enableTypewriter: !1,
         sandboxMode: "content"
       }
-    ) }),
-    /* @__PURE__ */ t.jsx("div", { className: "slide-player__interaction-arrow" })
+    ) })
   ] })
 );
-mt.displayName = "InteractionOverlayCard";
-const yn = (k, L) => k.length === L.length && k.every((y, Y) => {
-  const x = L[Y];
-  return y.sequence_number === x?.sequence_number && y.type === x?.type && y.content === x?.content;
-}), Dn = ({
-  elementList: k = [],
-  showPlayer: L = !0,
-  playerAlwaysVisible: y = !1,
-  playerClassName: Y,
-  fullscreenHeader: x,
-  playerCustomActions: V,
-  playerCustomActionPauseOnActive: X = !0,
-  bufferingText: ge = "Buffering...",
-  interactionTitle: ye,
-  interactionTexts: K,
-  playerTexts: Be,
-  playerAutoHideDelay: xe = 3e3,
-  markerAutoAdvanceDelay: je = gn,
-  interactionDefaultValueOptions: ne,
-  onSend: Ne,
-  onPlayerVisibilityChange: be,
-  onMobileViewModeChange: ke,
-  onStepChange: Le,
-  enableIframeScaling: pt = !0,
-  className: ht,
-  onPointerDown: Ve,
-  ...vt
+It.displayName = "InteractionOverlayCard";
+const Ln = (L, j) => L.length === j.length && L.every((g, J) => {
+  const S = j[J];
+  return g.sequence_number === S?.sequence_number && g.type === S?.type && g.content === S?.content;
+}), ur = ({
+  elementList: L = [],
+  showPlayer: j = !0,
+  playerAlwaysVisible: g = !1,
+  playerClassName: J,
+  fullscreenHeader: S,
+  playerCustomActions: K,
+  playerCustomActionPauseOnActive: Q = !0,
+  bufferingText: xe = "Buffering...",
+  interactionTitle: we,
+  interactionTexts: V,
+  playerTexts: Ve,
+  playerAutoHideDelay: Ie = 3e3,
+  markerAutoAdvanceDelay: qe = On,
+  interactionDefaultValueOptions: ie,
+  onSend: He,
+  onPlayerVisibilityChange: Ae,
+  onMobileViewModeChange: De,
+  onStepChange: Ue,
+  enableIframeScaling: At = !0,
+  className: _t,
+  onPointerDown: ze,
+  ...Et
 }) => {
-  const re = g(null), Ke = g(null), Se = g(null), qe = g(null), J = g(null), Q = g(null), Z = g(null), Oe = g([]), oe = g(!1), q = g(null), He = g(null), {
-    currentElementList: E,
-    stepElementLists: De,
-    slideElementList: O,
-    currentIndex: d,
-    audioList: h,
-    currentAudioSequenceIndexes: le,
-    currentStepHasSpeakableElement: b,
-    currentInteractionElement: u,
-    canGoPrev: gt,
-    canGoNext: P,
-    handlePrev: Ue,
-    handleNext: T
-  } = cn(k), ee = c(() => {
-    if (!(d < 0))
-      return O[d];
-  }, [d, O]), yt = O.filter(
+  const ce = v(null), $e = v(null), _e = v(null), We = v(null), Z = v(null), ee = v(null), te = v(null), ne = v(null), Ye = v(null), Ge = v([]), ae = v(!1), q = v(null), Xe = v(null), {
+    currentElementList: C,
+    stepElementLists: Je,
+    slideElementList: H,
+    currentIndex: m,
+    audioList: p,
+    currentAudioSequenceIndexes: ue,
+    currentStepHasSpeakableElement: x,
+    currentInteractionElement: d,
+    canGoPrev: Tt,
+    canGoNext: R,
+    handlePrev: Qe,
+    handleNext: M
+  } = In(L), re = i(() => {
+    if (!(m < 0))
+      return H[m];
+  }, [m, H]), Pt = H.filter(
     (e) => e.is_renderable !== !1
-  ).length === 1, I = L && (O.length > 0 || h.length > 0 || !!u), A = c(
-    () => le.map((e) => h[e]?.audioKey).filter((e) => !!e),
-    [h, le]
-  ), [$e, se] = m(!0), [ie, te] = m(!1), [we, We] = m(!0), [v, H] = m(null), [xt, S] = m(!1), [F, ze] = m(!1), [Ie, Ae] = m(!1), [o, ce] = m(), [ae, ue] = m(!1), [bt, St] = m(!1), _ = c(() => nn(), []), [de, _e] = m(
-    ve
-  ), [Ge, Ee] = m(!1), [Pe, Ye] = m(
-    () => _ ? ft() : !1
-  ), [wt, fe] = m(!1), {
-    effectiveMobileViewMode: C,
-    isImmersiveMobileFullscreen: D,
-    isNativeMobileFullscreen: Xe,
-    shouldRotateFullscreenViewport: It
-  } = c(
-    () => un({
-      hasManualMobileViewMode: Ge,
-      isMobileDevice: _,
-      mobileViewMode: de
+  ).length === 1, w = j && (H.length > 0 || p.length > 0 || !!d), _ = i(
+    () => ue.map((e) => p[e]?.audioKey).filter((e) => !!e),
+    [p, ue]
+  ), [Ze, de] = f(!0), [fe, oe] = f(!1), [Ee, et] = f(!0), [b, D] = f(null), [Ct, I] = f(!1), [O, tt] = f(!1), [Rt, Te] = f(!1), [nt, Ft] = f(!0), [Pe, Ce] = f(!1), [o, Re] = f(), [me, pe] = f(!1), [
+    Mt,
+    le
+  ] = f(0), [Ot, Bt] = f(!1), E = i(() => yn(), []), [he, Fe] = f(
+    Se
+  ), [rt, Me] = f(!1), [Oe, ot] = f(
+    () => E ? wt() : !1
+  ), [Nt, ve] = f(!1), U = i(() => Rn(), []), {
+    effectiveMobileViewMode: B,
+    isImmersiveMobileFullscreen: z,
+    isNativeMobileFullscreen: lt,
+    shouldRotateFullscreenViewport: kt
+  } = i(
+    () => _n({
+      hasManualMobileViewMode: rt,
+      isMobileDevice: E,
+      mobileViewMode: he
     }),
     [
-      Ge,
-      _,
-      Pe,
-      de
+      rt,
+      E,
+      Oe,
+      he
     ]
-  ), Je = g(C), R = I && (y || $e), At = D && R, _t = D && R, Et = D || Xe, Pt = Be?.fullscreenHintText ?? ln.fullscreenHintText, Mt = r(
+  ), st = v(B), T = w && (g || Ze), Lt = z && T, jt = z && T, Kt = z || lt, Vt = Ve?.fullscreenHintText ?? xn.fullscreenHintText, qt = r(
     (e) => {
-      Ee(!0), _e(e);
+      Me(!0), Fe(e);
     },
     []
-  ), Qe = r(() => {
-    Ee(!1), _e(ve);
-  }, []), Tt = r(() => {
-    Qe(), x?.onBack?.();
-  }, [x, Qe]), Ft = r(() => {
-    fe(!1);
-  }, []), Ze = r((e) => {
-    Ae(e);
-  }, []), et = r(() => {
-    Ae((e) => !e);
-  }, []), { mountedStepStates: Ct, currentMountedStateIndex: Rt } = c(() => {
-    const e = [], n = /* @__PURE__ */ new Map();
-    return De.forEach((s, f) => {
-      const l = e.findIndex(
-        (i) => yn(
-          i.elementList,
-          s
+  ), it = r(() => {
+    Me(!1), Fe(Se);
+  }, []), Ht = r(() => {
+    it(), S?.onBack?.();
+  }, [S, it]), Dt = r(() => {
+    ve(!1);
+  }, []), ct = r((e) => {
+    Ce(e);
+  }, []), at = r(() => {
+    Ce((e) => !e);
+  }, []), { mountedStepStates: Ut, currentMountedStateIndex: zt } = i(() => {
+    const e = [], t = /* @__PURE__ */ new Map();
+    return Je.forEach((l, u) => {
+      const s = e.findIndex(
+        (a) => Ln(
+          a.elementList,
+          l
         )
       );
-      if (l >= 0) {
-        e[l]?.sourceStepIndexes.push(f), n.set(f, l);
+      if (s >= 0) {
+        e[s]?.sourceStepIndexes.push(u), t.set(u, s);
         return;
       }
       e.push({
-        elementList: s,
-        sourceStepIndexes: [f]
-      }), n.set(f, e.length - 1);
+        elementList: l,
+        sourceStepIndexes: [u]
+      }), t.set(u, e.length - 1);
     }), {
       mountedStepStates: e,
-      currentMountedStateIndex: d >= 0 ? n.get(d) ?? -1 : -1
+      currentMountedStateIndex: m >= 0 ? t.get(m) ?? -1 : -1
     };
-  }, [d, De]), tt = c(() => String(d), [d]), B = c(() => v ? h.findIndex(
-    (e) => (e.audioKey ?? "") === v
-  ) : -1, [h, v]), me = c(
-    () => A[0] ?? "none",
-    [A]
-  ), Me = c(
+  }, [m, Je]), ut = i(() => String(m), [m]), h = i(() => b ? p.findIndex(
+    (e) => (e.audioKey ?? "") === b
+  ) : -1, [p, b]), Be = i(
+    () => h >= 0 ? p[h] : void 0,
+    [p, h]
+  ), $t = Be?.element?.subtitle_cues ?? [], ye = i(
+    () => _[0] ?? "none",
+    [_]
+  ), Ne = i(
     () => ({
-      currentElement: mn({
-        currentAudioIndex: B,
-        currentAudioSequenceIndexes: le,
-        audioList: h,
+      currentElement: Pn({
+        currentAudioIndex: h,
+        currentAudioSequenceIndexes: ue,
+        audioList: p,
         currentInteractionElement: o,
-        currentStepElement: ee
+        currentStepElement: re
       }),
-      currentIndex: d,
-      currentStepElement: ee,
-      isActive: Ie,
-      setActive: Ze,
-      toggleActive: et
+      currentIndex: m,
+      currentStepElement: re,
+      isActive: Pe,
+      setActive: ct,
+      toggleActive: at
     }),
     [
       o,
+      p,
       h,
-      B,
-      le,
-      d,
-      ee,
-      Ie,
-      Ze,
-      et
+      ue,
+      m,
+      re,
+      Pe,
+      ct,
+      at
     ]
-  ), Te = c(
-    () => pn(
-      V,
-      Me
+  ), ke = i(
+    () => Cn(
+      K,
+      Ne
     ),
-    [Me, V]
-  ), Bt = c(
+    [Ne, K]
+  ), Wt = i(
     () => ({
-      "--slide-player-custom-action-count": String(Te),
+      "--slide-player-custom-action-count": String(ke),
       "--slide-player-mobile-control-count": String(
-        Te + 4
+        ke + 4
       )
     }),
-    [Te]
-  ), nt = A.length > 0, rt = c(() => u ? `${u.sequence_number ?? "none"}:${String(
-    u.content ?? ""
-  )}` : "none", [u]), Fe = c(
-    () => [tt, rt].join("|"),
-    [rt, tt]
-  ), ot = !!c(() => !me || me === "none" ? "" : h.find(
-    (n) => n.audioKey === me
-  )?.audioUrl?.trim() ?? "", [h, me]), j = X && !!V && Ie, Ce = c(
-    () => hn({
-      canGoNext: P,
-      currentAudioIndex: B,
-      currentStepHasSpeakableElement: b,
-      hasInteraction: !!u
+    [ke]
+  ), dt = _.length > 0, ft = i(() => d ? `${d.sequence_number ?? "none"}:${String(
+    d.content ?? ""
+  )}` : "none", [d]), se = i(
+    () => [ut, ft].join("|"),
+    [ft, ut]
+  ), Yt = i(
+    () => [
+      se,
+      Be?.audioKey ?? "none",
+      String(h)
+    ].join("|"),
+    [h, Be?.audioKey, se]
+  ), mt = !!i(() => !ye || ye === "none" ? "" : p.find(
+    (t) => t.audioKey === ye
+  )?.audioUrl?.trim() ?? "", [p, ye]), N = Q && !!K && Pe, Le = i(
+    () => Fn({
+      canGoNext: R,
+      currentAudioIndex: h,
+      currentStepHasSpeakableElement: x,
+      hasInteraction: !!d
     }),
     [
-      P,
-      B,
-      u,
-      b
+      R,
+      h,
+      d,
+      x
     ]
-  ), N = r(() => {
-    J.current !== null && (window.clearTimeout(J.current), J.current = null);
-  }, []), M = r(() => {
+  ), k = r(() => {
     Z.current !== null && (window.clearTimeout(Z.current), Z.current = null);
-  }, []), U = r(() => {
-    Q.current !== null && (window.clearTimeout(Q.current), Q.current = null);
+  }, []), F = r(() => {
+    te.current !== null && (window.clearTimeout(te.current), te.current = null);
+  }, []), P = r(() => {
+    ne.current !== null && (window.clearTimeout(ne.current), ne.current = null);
   }, []), $ = r(() => {
-    U(), M(), H(null), S(!1), ze(!1), ce(void 0), ue(!1);
-  }, [U, M]), W = r(() => {
-    const e = A[0];
-    return e ? (H(e), !0) : !1;
-  }, [A]), pe = r(() => {
-    M(), ue(!1), !W() && P && T();
+    ee.current !== null && (window.clearTimeout(ee.current), ee.current = null);
+  }, []), W = r(() => {
+    $(), F(), P(), D(null), U.reset(), I(!1), tt(!1), Te(!1), Re(void 0), pe(!1), le(0);
   }, [
+    $,
+    F,
+    P,
+    U
+  ]), Y = r(() => {
+    const e = _[0];
+    return e ? (D(e), !0) : !1;
+  }, [_]), be = r(() => {
+    F(), P(), pe(!1), le(0), !Y() && R && M();
+  }, [
+    R,
+    F,
     P,
     M,
-    T,
-    W
-  ]), p = r(
-    (e = ie) => {
-      I && (se(!0), N(), !(y || !e || xe <= 0) && (J.current = window.setTimeout(() => {
-        se(!1), J.current = null;
-      }, xe)));
+    Y
+  ]), pt = r(
+    (e) => {
+      if (P(), !e)
+        return;
+      const t = () => {
+        ne.current = null, le(
+          Nn
+        ), pe(!0), q.current = null;
+      };
+      ne.current = window.setTimeout(
+        t,
+        Bn
+      );
+    },
+    [P]
+  ), y = r(
+    (e = fe) => {
+      w && (de(!0), k(), !(g || !e || Ie <= 0) && (Z.current = window.setTimeout(() => {
+        de(!1), Z.current = null;
+      }, Ie)));
     },
     [
-      N,
-      ie,
-      y,
-      xe,
-      I
+      k,
+      fe,
+      g,
+      Ie,
+      w
     ]
-  ), Re = !!(u?.readonly || u?.user_input?.trim()), z = !!u && !Re;
-  a(() => {
-    We(!0), X && Ae(!1);
-  }, [d, X]), a(() => () => {
-    U(), N(), M();
+  ), je = !!(d?.readonly || d?.user_input?.trim()), G = !!d && !je;
+  c(() => {
+    et(!0), Q && Ce(!1);
+  }, [m, Q]), c(() => () => {
+    $(), k(), F(), P();
   }, [
-    U,
-    M,
-    N
-  ]), a(() => (be?.(R), () => {
-    be?.(!1);
-  }), [be, R]), a(() => {
-    _ || de === ve || (Ee(!1), _e(ve));
-  }, [_, de]), a(() => {
-    if (!_) {
-      Ye(!1);
+    $,
+    F,
+    P,
+    k
+  ]), c(() => (Ae?.(T), () => {
+    Ae?.(!1);
+  }), [Ae, T]), c(() => {
+    E || he === Se || (Me(!1), Fe(Se));
+  }, [E, he]), c(() => {
+    if (!E) {
+      ot(!1);
       return;
     }
     const e = () => {
-      Ye(ft());
+      ot(wt());
     };
-    return e(), rn(e);
-  }, [_]), a(() => {
-    ke?.(C);
-  }, [C, ke]), a(() => {
-    const s = Je.current !== "fullscreen" && C === "fullscreen" && !Pe;
-    if (Je.current = C, !_) {
-      fe(!1);
+    return e(), bn(e);
+  }, [E]), c(() => {
+    De?.(B);
+  }, [B, De]), c(() => {
+    const l = st.current !== "fullscreen" && B === "fullscreen" && !Oe;
+    if (st.current = B, !E) {
+      ve(!1);
       return;
     }
-    if (s) {
-      fe(!0);
+    if (l) {
+      ve(!0);
       return;
     }
-    C !== "fullscreen" && fe(!1);
-  }, [C, _, Pe]), a(() => {
-    Le?.(ee, d);
-  }, [d, ee, Le]), a(() => {
-    if (!I) {
-      N(), se(!1);
+    B !== "fullscreen" && ve(!1);
+  }, [B, E, Oe]), c(() => {
+    Ue?.(re, m);
+  }, [m, re, Ue]), c(() => {
+    if (!w) {
+      k(), de(!1);
       return;
     }
-    if (y) {
-      N(), se(!0);
+    if (g) {
+      k(), de(!0);
       return;
     }
-    ie || p(!0);
+    fe || y(!0);
   }, [
-    N,
-    ie,
-    y,
-    I,
-    p
-  ]), a(() => {
+    k,
+    fe,
+    g,
+    w,
+    y
+  ]), c(() => {
     if (typeof window > "u")
       return;
-    const e = (n) => {
-      n.origin === window.location.origin && Jt(n.data) && n.data.eventType === "click" && I && (te(!0), p(!0));
+    const e = (t) => {
+      t.origin === window.location.origin && fn(t.data) && t.data.eventType === "click" && w && (oe(!0), y(!0));
     };
     return window.addEventListener("message", e), () => {
       window.removeEventListener("message", e);
     };
-  }, [I, p]), an({
-    sectionRef: re,
-    enabled: I,
+  }, [w, y]), An({
+    sectionRef: ce,
+    enabled: w,
     onWake: () => {
-      te(!0), p(!0);
+      oe(!0), y(!0);
     }
-  }), a(() => {
-    const { hasPlaybackContextChanged: e, shouldInitializeAudioSequence: n } = fn({
-      previousResetKey: He.current,
-      nextResetKey: Fe,
-      currentAudioKey: v,
-      hasCompletedCurrentStepAudio: F
+  }), c(() => {
+    const { hasPlaybackContextChanged: e, shouldInitializeAudioSequence: t } = Tn({
+      previousResetKey: Xe.current,
+      nextResetKey: se,
+      currentAudioKey: b,
+      hasCompletedCurrentStepAudio: O
     });
-    He.current = Fe;
-    const s = q.current === d && !!u, f = dn({
-      hasInteraction: !!u,
-      shouldBlockPlaybackForInteraction: z,
-      shouldOpenInteractionOverlayAfterAudio: s,
+    Xe.current = se;
+    const l = q.current === m && !!d, u = En({
+      hasInteraction: !!d,
+      shouldBlockPlaybackForInteraction: G,
+      shouldOpenInteractionOverlayAfterAudio: l,
       hasPlaybackContextChanged: e,
-      hasResolvedCurrentInteraction: Re,
-      currentStepHasSpeakableElement: b
+      hasResolvedCurrentInteraction: je,
+      currentStepHasSpeakableElement: x
     });
-    if (e && $(), !(E.length === 0 && !u) && !j) {
-      if (f) {
-        ce(u), ue(!0), q.current = null;
+    if (e && W(), !(C.length === 0 && !d) && !N) {
+      if (d && Re(d), u) {
+        pt(d);
         return;
       }
-      if (u && (ce(u), q.current = null), !!n && !W()) {
-        if (b) {
-          S(!0);
+      if (P(), q.current = null, !!t && !Y()) {
+        if (x) {
+          I(!0);
           return;
         }
-        if (P && !(Ce && !we))
-          return Q.current = window.setTimeout(() => {
-            Q.current = null, T();
-          }, je), () => {
-            U();
+        if (R && !(Le && !Ee))
+          return ee.current = window.setTimeout(() => {
+            ee.current = null, M();
+          }, qe), () => {
+            $();
           };
       }
     }
   }, [
-    P,
-    U,
-    E.length,
-    u,
-    v,
-    Fe,
+    R,
+    $,
+    C.length,
+    d,
     b,
+    se,
+    x,
+    qe,
+    M,
+    O,
+    Ee,
     je,
-    T,
-    F,
-    we,
-    Re,
-    z,
-    $,
+    G,
+    P,
     W,
-    j,
-    Ce
-  ]), a(() => {
-    if (j || !b || z) {
-      S(!1);
+    pt,
+    Y,
+    N,
+    Le
+  ]), c(() => {
+    if (N || !x || G) {
+      I(!1);
       return;
     }
-    if (F) {
-      S(!1);
+    if (O) {
+      I(!1);
       return;
     }
-    if (nt) {
-      S(!1);
+    if (dt) {
+      I(!1);
       return;
     }
-    S(!0);
+    I(!0);
   }, [
-    nt,
-    b,
-    F,
-    j,
-    z
-  ]), a(() => {
-    v || A.length === 0 || j || !b || z || F || W();
+    dt,
+    x,
+    O,
+    N,
+    G
+  ]), c(() => {
+    b || _.length === 0 || N || !x || G || O || Y();
   }, [
-    v,
-    A,
     b,
-    F,
-    j,
-    z,
-    W
-  ]), a(() => {
-    !v || B >= 0 || H(null);
-  }, [B, v]);
-  const lt = c(() => {
+    _,
+    x,
+    O,
+    N,
+    G,
+    Y
+  ]), c(() => {
+    !b || h >= 0 || D(null);
+  }, [h, b]), c(() => {
+    h >= 0 || U.reset();
+  }, [h, U]), c(() => {
+    Te(!1);
+  }, [Yt]);
+  const ht = i(() => {
     if (!o)
       return {};
     const e = !!o.user_input?.trim();
-    return en(
+    return hn(
       typeof o.content == "string" ? o.content : void 0,
       o.user_input,
-      e ? void 0 : ne
+      e ? void 0 : ie
     );
-  }, [o, ne]), jt = c(() => {
+  }, [o, ie]), Gt = i(() => {
     if (!o)
       return;
     const e = !!o.user_input?.trim();
-    return tn(
+    return vn(
       typeof o.content == "string" ? o.content : void 0,
       o.user_input,
-      e ? void 0 : ne
+      e ? void 0 : ie
     );
-  }, [o, ne]), st = !!o?.user_input?.trim(), it = !!o?.readonly || st, ct = it || st, Nt = r(
+  }, [o, ie]), vt = !!o?.user_input?.trim(), yt = !!o?.readonly || vt, bt = yt || vt, Ke = !!o && me, Xt = r(
     (e) => {
-      const s = [
+      const l = [
         ...e.selectedValues ?? [],
         e.inputText?.trim() ?? "",
         e.buttonText?.trim() ?? ""
       ].filter(Boolean).join(", ");
-      ce((f) => !f || !s ? f : {
-        ...f,
-        user_input: s
-      }), Ne?.(e, o), pe();
+      Re((u) => !u || !l ? u : {
+        ...u,
+        user_input: l
+      }), He?.(e, o), be();
     },
-    [o, pe, Ne]
+    [o, be, He]
   );
-  a(() => {
+  c(() => {
     const e = () => {
-      St(document.fullscreenElement === re.current);
+      Bt(document.fullscreenElement === ce.current);
     };
     return e(), document.addEventListener("fullscreenchange", e), () => {
       document.removeEventListener("fullscreenchange", e);
     };
-  }, []), a(() => {
-    if (M(), !(!ae || !ct))
-      return Z.current = window.setTimeout(() => {
-        Z.current = null, pe();
+  }, []), c(() => {
+    if (!Ke) {
+      le(0);
+      return;
+    }
+    const e = Ye.current;
+    if (!e)
+      return;
+    const t = () => {
+      const u = Math.ceil(
+        e.getBoundingClientRect().height
+      );
+      le(
+        u + kn
+      );
+    };
+    if (t(), typeof ResizeObserver > "u")
+      return;
+    const l = new ResizeObserver(() => {
+      t();
+    });
+    return l.observe(e), () => {
+      l.disconnect();
+    };
+  }, [Ke]), c(() => {
+    if (F(), !(!me || !bt))
+      return te.current = window.setTimeout(() => {
+        te.current = null, be();
       }, 2e3), () => {
-        M();
+        F();
       };
   }, [
-    M,
-    pe,
-    ae,
-    ct
+    F,
+    be,
+    me,
+    bt
   ]);
-  const kt = (e, n = {}) => e ? e.type === "slot" ? /* @__PURE__ */ t.jsx(t.Fragment, { children: e.content }) : e.type === "html" ? /* @__PURE__ */ t.jsx(
-    dt,
+  const Jt = (e, t = {}) => e ? e.type === "slot" ? /* @__PURE__ */ n.jsx(n.Fragment, { children: e.content }) : e.type === "html" ? /* @__PURE__ */ n.jsx(
+    xt,
     {
       className: "content-render-iframe",
       hideFullScreen: !0,
       mode: "blackboard",
-      replaceRootScreenHeightWithFull: n.replaceRootScreenHeightWithFull,
+      replaceRootScreenHeightWithFull: t.replaceRootScreenHeightWithFull,
       type: "sandbox",
       content: e.content,
-      enableScaling: pt
+      enableScaling: At
     }
-  ) : /* @__PURE__ */ t.jsx(
-    dt,
+  ) : /* @__PURE__ */ n.jsx(
+    xt,
     {
       className: "content-render-iframe",
       hideFullScreen: !0,
@@ -480,36 +548,36 @@ const yn = (k, L) => k.length === L.length && k.every((y, Y) => {
       type: "markdown",
       content: e.content
     }
-  ) : null, Lt = (e = [], n = !1) => {
+  ) : null, Qt = (e = [], t = !1) => {
     if (e.length === 0)
       return null;
-    const s = e.filter(
-      (l) => l.is_renderable !== !1
-    ).length, f = e.reduce(
-      (l, i, w) => i.is_renderable !== !1 ? w : l,
+    const l = e.filter(
+      (s) => s.is_renderable !== !1
+    ).length, u = e.reduce(
+      (s, a, A) => a.is_renderable !== !1 ? A : s,
       -1
     );
-    return /* @__PURE__ */ t.jsx("div", { className: "slide-stage__content flex w-full flex-col gap-4", children: e.map((l, i) => {
-      const w = l.type === "html" && l.is_renderable === !1;
-      return /* @__PURE__ */ t.jsx(
+    return /* @__PURE__ */ n.jsx("div", { className: "slide-stage__content flex w-full flex-col gap-4", children: e.map((s, a) => {
+      const A = s.type === "html" && s.is_renderable === !1;
+      return /* @__PURE__ */ n.jsx(
         "div",
         {
-          ref: n && i === f ? qe : null,
-          "aria-hidden": w || void 0,
-          className: G(
+          ref: t && a === u ? We : null,
+          "aria-hidden": A || void 0,
+          className: X(
             "w-full shrink-0",
-            s === 1 && l.is_renderable !== !1 && "slide-element--single",
-            w ? "pointer-events-none fixed left-[-200vw] top-0 -z-10 h-[100dvh] w-[100vw] overflow-hidden opacity-0" : l.is_renderable === !1 && "hidden"
+            l === 1 && s.is_renderable !== !1 && "slide-element--single",
+            A ? "pointer-events-none fixed left-[-200vw] top-0 -z-10 h-[100dvh] w-[100vw] overflow-hidden opacity-0" : s.is_renderable === !1 && "hidden"
           ),
-          children: kt(l, {
-            replaceRootScreenHeightWithFull: s === 1 && l.type === "html" && l.is_renderable !== !1
+          children: Jt(s, {
+            replaceRootScreenHeightWithFull: l === 1 && s.type === "html" && s.is_renderable !== !1
           })
         },
-        l.sequence_number ?? `${l.type}-${i}`
+        s.sequence_number ?? `${s.type}-${a}`
       );
     }) });
-  }, Vt = r(() => {
-    const e = re.current;
+  }, Zt = r(() => {
+    const e = ce.current;
     if (e) {
       if (document.fullscreenElement === e) {
         document.exitFullscreen().catch(() => {
@@ -519,253 +587,273 @@ const yn = (k, L) => k.length === L.length && k.every((y, Y) => {
       e.requestFullscreen?.().catch(() => {
       });
     }
-  }, []), at = r(() => {
-    const e = Se.current;
+  }, []), gt = r(() => {
+    const e = _e.current;
     e && e.scrollTo({
       top: e.scrollHeight,
       behavior: "smooth"
     });
-  }, []), Kt = r(() => {
-    oe.current = !0, q.current = null, te(!0), S(!1), p(!0), $(), Ue();
-  }, [Ue, $, p]), qt = r(() => {
-    oe.current = !0, q.current = null, te(!0), S(!1), p(!0), $(), T();
-  }, [T, $, p]), Ot = r(
+  }, []), en = r(() => {
+    ae.current = !0, q.current = null, oe(!0), I(!1), y(!0), W(), Qe();
+  }, [Qe, W, y]), tn = r(() => {
+    ae.current = !0, q.current = null, oe(!0), I(!1), y(!0), W(), M();
+  }, [M, W, y]), nn = r(
     (e) => {
-      if (!b || F) {
-        S(!1);
+      if (!x || O) {
+        I(!1);
         return;
       }
-      S(e);
+      I(e);
     },
-    [b, F]
-  ), Ht = r(
+    [x, O]
+  ), rn = r(
     (e) => {
-      const n = h[e]?.audioKey;
-      if (!n || !v || n !== v)
+      const t = p[e]?.audioKey;
+      if (!t || !b || t !== b)
         return;
-      const s = A.findIndex(
-        (i) => i === n
+      const l = _.findIndex(
+        (a) => a === t
       );
-      if (s < 0) {
-        H(null);
+      if (l < 0) {
+        D(null);
         return;
       }
-      const f = s + 1, l = A[f];
-      if (l) {
-        H(l);
+      const u = l + 1, s = _[u];
+      if (s) {
+        D(s);
         return;
       }
-      if (H(null), ze(!0), S(!1), P) {
-        const i = d + 1, w = O[i];
-        ot && w?.type === "interaction" && (q.current = i), T();
+      if (D(null), tt(!0), I(!1), R) {
+        const a = m + 1, A = H[a];
+        mt && A?.type === "interaction" && (q.current = a), M();
       }
     },
     [
-      h,
-      P,
-      d,
-      v,
-      A,
-      T,
-      ot,
-      O
+      p,
+      R,
+      m,
+      b,
+      _,
+      M,
+      mt,
+      H
     ]
-  ), Dt = r(() => {
-    o && ue((e) => !e);
-  }, [o]), ut = r(
+  ), on = r(() => {
+    o && pe((e) => !e);
+  }, [o]), St = r(
     (e) => {
-      e.stopPropagation(), R && p(!0);
+      e.stopPropagation(), T && y(!0);
     },
-    [$e, p]
-  ), Ut = r(
+    [Ze, y]
+  ), ln = r(
     (e) => {
-      Ve?.(e);
+      ze?.(e);
     },
-    [Ve]
-  ), $t = r(() => {
-    te(!0), p(!0);
-  }, [p]), Wt = !!o && ae, he = c(
-    () => E.map(
-      (e, n) => `${e.sequence_number ?? `${e.type}-${n}`}:${String(e.is_new ?? "")}`
+    [ze]
+  ), sn = r(() => {
+    oe(!0), y(!0);
+  }, [y]), ge = i(
+    () => C.map(
+      (e, t) => `${e.sequence_number ?? `${e.type}-${t}`}:${String(e.is_new ?? "")}`
     ),
-    [E]
+    [C]
   );
-  return a(() => {
-    const e = Oe.current, f = (e.length > 0 && e.length < he.length && e.every((i, w) => i === he[w]) ? E.slice(e.length) : []).some(
-      (i) => i.is_new === !1
+  return c(() => {
+    const e = Ge.current, u = (e.length > 0 && e.length < ge.length && e.every((a, A) => a === ge[A]) ? C.slice(e.length) : []).some(
+      (a) => a.is_new === !1
     );
-    if (Oe.current = he, !f)
+    if (Ge.current = ge, !u)
       return;
-    const l = window.requestAnimationFrame(() => {
-      const i = Se.current, w = qe.current;
-      if (!i || !w)
+    const s = window.requestAnimationFrame(() => {
+      const a = _e.current, A = We.current;
+      if (!a || !A)
         return;
-      const zt = i.getBoundingClientRect(), Gt = w.getBoundingClientRect(), Yt = i.scrollTop + (Gt.top - zt.top);
-      i.scrollTo({
-        top: Math.max(Yt, 0),
+      const cn = a.getBoundingClientRect(), an = A.getBoundingClientRect(), un = a.scrollTop + (an.top - cn.top);
+      a.scrollTo({
+        top: Math.max(un, 0),
         behavior: "smooth"
       });
     });
     return () => {
-      window.cancelAnimationFrame(l);
+      window.cancelAnimationFrame(s);
     };
-  }, [E, he]), a(() => {
-    if (!oe.current || (oe.current = !1, E.length === 0))
+  }, [C, ge]), c(() => {
+    if (!ae.current || (ae.current = !1, C.length === 0))
       return;
     const e = window.requestAnimationFrame(() => {
-      at();
+      gt();
     });
     return () => {
       window.cancelAnimationFrame(e);
     };
-  }, [E, at]), /* @__PURE__ */ t.jsxs(
+  }, [C, gt]), /* @__PURE__ */ n.jsxs(
     "section",
     {
-      ref: re,
-      className: G(
+      ref: ce,
+      className: X(
         "relative h-full w-full",
-        _ && "slide--mobile-device",
-        D && "slide--mobile-landscape",
-        Xe && "slide--mobile-landscape-native",
-        ht
+        E && "slide--mobile-device",
+        z && "slide--mobile-landscape",
+        lt && "slide--mobile-landscape-native",
+        _t
       ),
-      onClick: $t,
-      onPointerDown: Ut,
-      ...vt,
+      onClick: sn,
+      onPointerDown: ln,
+      ...Et,
       children: [
-        Et ? /* @__PURE__ */ t.jsx(
+        Kt ? /* @__PURE__ */ n.jsx(
           "div",
           {
             "aria-hidden": "true",
             className: "pointer-events-none fixed left-0 top-0 z-[9999] h-[100vh] max-h-[100vh] w-[100vw]"
           }
         ) : null,
-        /* @__PURE__ */ t.jsxs(
+        /* @__PURE__ */ n.jsxs(
           "div",
           {
-            ref: Ke,
-            className: G(
+            ref: $e,
+            className: X(
               "slide__viewport relative h-full min-h-0 w-full",
-              D && "slide__viewport--mobile-landscape",
-              D && !It && "slide__viewport--mobile-landscape-native"
+              z && "slide__viewport--mobile-landscape",
+              z && !kt && "slide__viewport--mobile-landscape-native"
             ),
             children: [
-              At ? /* @__PURE__ */ t.jsxs("div", { className: "slide-landscape-header", children: [
-                /* @__PURE__ */ t.jsx(
+              Lt ? /* @__PURE__ */ n.jsxs("div", { className: "slide-landscape-header", children: [
+                /* @__PURE__ */ n.jsx(
                   "button",
                   {
-                    "aria-label": x?.backAriaLabel ?? "Back",
+                    "aria-label": S?.backAriaLabel ?? "Back",
                     className: "slide-landscape-header__back",
-                    onClick: Tt,
+                    onClick: Ht,
                     type: "button",
-                    children: /* @__PURE__ */ t.jsx(vn, { className: "h-6 w-6 text-white", strokeWidth: 2.25 })
+                    children: /* @__PURE__ */ n.jsx(Mn, { className: "h-6 w-6 text-white", strokeWidth: 2.25 })
                   }
                 ),
-                x?.content ? /* @__PURE__ */ t.jsx("div", { className: "min-w-0 flex-1 overflow-hidden", children: x.content }) : null
+                S?.content ? /* @__PURE__ */ n.jsx("div", { className: "min-w-0 flex-1 overflow-hidden", children: S.content }) : null
               ] }) : null,
-              /* @__PURE__ */ t.jsx(
+              /* @__PURE__ */ n.jsx(
                 "div",
                 {
-                  className: G(
+                  className: X(
                     "h-full min-h-0 w-full",
-                    _t && "slide__viewport-content--with-header",
-                    yt ? "slide-content--single" : "grid gap-4"
+                    jt && "slide__viewport-content--with-header",
+                    Pt ? "slide-content--single" : "grid gap-4"
                   ),
-                  children: E.length > 0 ? /* @__PURE__ */ t.jsx("div", { className: "slide-stage", children: /* @__PURE__ */ t.jsx("div", { ref: Se, className: "slide-stage__layer w-full", children: Ct.map(
-                    (e, n) => {
-                      const s = n === Rt;
-                      return /* @__PURE__ */ t.jsx(
+                  children: C.length > 0 ? /* @__PURE__ */ n.jsx("div", { className: "slide-stage", children: /* @__PURE__ */ n.jsx("div", { ref: _e, className: "slide-stage__layer w-full", children: Ut.map(
+                    (e, t) => {
+                      const l = t === zt;
+                      return /* @__PURE__ */ n.jsx(
                         "div",
                         {
-                          "aria-hidden": !s || void 0,
+                          "aria-hidden": !l || void 0,
                           className: "w-full h-full",
-                          style: { display: s ? void 0 : "none" },
-                          children: Lt(
+                          style: { display: l ? void 0 : "none" },
+                          children: Qt(
                             e.elementList,
-                            s
+                            l
                           )
                         },
-                        e.sourceStepIndexes[0] ?? n
+                        e.sourceStepIndexes[0] ?? t
                       );
                     }
                   ) }) }) : null
                 }
               ),
-              xt ? /* @__PURE__ */ t.jsx(
-                Qt,
+              Ct ? /* @__PURE__ */ n.jsx(
+                mn,
                 {
-                  message: ge,
+                  message: xe,
                   className: "absolute left-1/2 top-1/2 z-[3] -translate-x-1/2 -translate-y-1/2"
                 }
               ) : null,
-              /* @__PURE__ */ t.jsx(
-                sn,
+              /* @__PURE__ */ n.jsx(
+                wn,
+                {
+                  onClose: Dt,
+                  open: Nt,
+                  text: Vt
+                }
+              ),
+              /* @__PURE__ */ n.jsx(
+                Sn,
                 {
-                  onClose: Ft,
-                  open: wt,
-                  text: Pt
+                  extraBottomOffset: Mt,
+                  hasPlayerGap: T,
+                  isEnabled: nt && Rt,
+                  isPlayerHidden: w && !T,
+                  playbackTimeStore: U,
+                  subtitleCues: $t
                 }
               ),
-              Wt ? /* @__PURE__ */ t.jsx(
+              Ke ? /* @__PURE__ */ n.jsx(
                 "div",
                 {
-                  className: G(
+                  ref: Ye,
+                  className: X(
                     "slide-interaction-overlay",
-                    R && I ? "slide-interaction-overlay--with-player" : "slide-interaction-overlay--standalone"
+                    T && w ? "slide-interaction-overlay--with-player" : "slide-interaction-overlay--standalone"
                   ),
-                  onClick: ut,
-                  onPointerDown: ut,
-                  style: Bt,
-                  children: /* @__PURE__ */ t.jsx(
-                    mt,
+                  onClick: St,
+                  onPointerDown: St,
+                  style: Wt,
+                  children: /* @__PURE__ */ n.jsx(
+                    It,
                     {
                       content: String(o?.content ?? ""),
-                      defaultButtonText: lt.buttonText ?? "",
-                      defaultInputText: lt.inputText ?? "",
-                      defaultSelectedValues: jt,
-                      confirmButtonText: K?.confirmButtonText,
-                      copyButtonText: K?.copyButtonText,
-                      copiedButtonText: K?.copiedButtonText,
-                      onSend: Nt,
-                      readonly: it,
-                      title: K?.title ?? ye ?? "Submit the content below to continue."
+                      defaultButtonText: ht.buttonText ?? "",
+                      defaultInputText: ht.inputText ?? "",
+                      defaultSelectedValues: Gt,
+                      confirmButtonText: V?.confirmButtonText,
+                      copyButtonText: V?.copyButtonText,
+                      copiedButtonText: V?.copiedButtonText,
+                      onSend: Xt,
+                      readonly: yt,
+                      title: V?.title ?? we ?? "Submit the content below to continue."
                     }
                   )
                 }
               ) : null,
-              I ? /* @__PURE__ */ t.jsx(
-                on,
+              w ? /* @__PURE__ */ n.jsx(
+                gn,
                 {
-                  audioList: h,
-                  className: G(
+                  audioList: p,
+                  className: X(
                     "absolute left-1/2 bottom-6 z-[2] -translate-x-1/2",
-                    Y,
-                    !R && "pointer-events-none opacity-0"
+                    J,
+                    !T && "pointer-events-none opacity-0"
                   ),
-                  currentAudioIndex: B,
+                  currentAudioIndex: h,
                   defaultPlaying: !0,
-                  isPlaybackPaused: j,
-                  isAutoAdvanceEnabled: we,
+                  isPlaybackPaused: N,
+                  isAutoAdvanceEnabled: Ee,
                   hasInteraction: !!o,
-                  isInteractionOpen: ae,
-                  onAutoAdvanceToggle: We,
-                  onLoadingChange: Ot,
-                  nextDisabled: !P,
-                  onEnded: Ht,
-                  onFullscreen: Vt,
-                  isFullscreen: bt,
-                  mobileViewMode: C,
-                  settingsPortalContainer: Ke.current,
-                  onMobileViewModeChange: Mt,
-                  onInteractionToggle: Dt,
-                  onNext: qt,
-                  onPrev: Kt,
-                  prevDisabled: !gt,
-                  showControls: R,
-                  texts: Be,
-                  customActionContext: Me,
-                  customActions: V,
-                  useAutoAdvanceToggle: Ce
+                  isInteractionOpen: me,
+                  isSubtitleEnabled: nt,
+                  onAutoAdvanceToggle: et,
+                  onLoadingChange: nn,
+                  onPlaybackStarted: () => {
+                    Te(!0);
+                  },
+                  onPlaybackTimeChange: U.setTime,
+                  onSubtitleToggle: () => {
+                    Ft((e) => !e);
+                  },
+                  nextDisabled: !R,
+                  onEnded: rn,
+                  onFullscreen: Zt,
+                  isFullscreen: Ot,
+                  mobileViewMode: B,
+                  settingsPortalContainer: $e.current,
+                  onMobileViewModeChange: qt,
+                  onInteractionToggle: on,
+                  onNext: tn,
+                  onPrev: en,
+                  prevDisabled: !Tt,
+                  showControls: T,
+                  texts: Ve,
+                  customActionContext: Ne,
+                  customActions: K,
+                  useAutoAdvanceToggle: Le
                 }
               ) : null
             ]
@@ -776,6 +864,6 @@ const yn = (k, L) => k.length === L.length && k.every((y, Y) => {
   );
 };
 export {
-  Dn as default
+  ur as default
 };
 //# sourceMappingURL=Slide.es.js.map