2426 lines
72 KiB
JavaScript
2426 lines
72 KiB
JavaScript
var ct = Object.defineProperty;
|
|
var at = (t, r, e) => r in t ? ct(t, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[r] = e;
|
|
var Ae = (t, r, e) => at(t, typeof r != "symbol" ? r + "" : r, e);
|
|
import { jsxs as f, jsx as l } from "react/jsx-runtime";
|
|
import { Component as ot, useState as q, useEffect as y, useRef as O } from "react";
|
|
function fe(t) {
|
|
return t === "mobile-portrait" ? "horizontal" : "vertical";
|
|
}
|
|
function nt({
|
|
baselineIndex: t,
|
|
dragDistance: r,
|
|
totalCandidates: e,
|
|
dragSpan: i
|
|
}) {
|
|
if (e <= 1)
|
|
return 0;
|
|
const c = Math.max(i, 120), a = c * 0.25, n = Math.abs(r), u = Math.sign(r), s = n < a ? 0 : u * (1 + Math.floor((n - a) / c)), d = t + s;
|
|
return Math.min(e - 1, Math.max(0, d));
|
|
}
|
|
function ut(t, r) {
|
|
return !!(t && r && t !== r);
|
|
}
|
|
function dt({
|
|
candidates: t,
|
|
displayMode: r,
|
|
activeGlitchSlide: e,
|
|
isInspecting: i,
|
|
isDragging: c,
|
|
viewportMode: a
|
|
}) {
|
|
if (t.length <= 1)
|
|
return null;
|
|
const n = t.findIndex(
|
|
(u) => u.id === e.id
|
|
);
|
|
return /* @__PURE__ */ f(
|
|
"div",
|
|
{
|
|
className: `carousel-hud ${i ? "carousel-hud--inspect" : ""}`,
|
|
"aria-live": "polite",
|
|
children: [
|
|
/* @__PURE__ */ l("div", { className: "carousel-hud__track", "aria-label": "Glitch slide candidates", children: t.map((u, s) => /* @__PURE__ */ l(
|
|
"span",
|
|
{
|
|
className: `carousel-hud__dot ${u.id === e.id ? "carousel-hud__dot--active" : ""}`,
|
|
title: `${u.id} (${Math.round(u.score * 100)} score)`,
|
|
children: s + 1
|
|
},
|
|
u.id
|
|
)) }),
|
|
i ? /* @__PURE__ */ f("div", { className: "carousel-hud__detail", children: [
|
|
/* @__PURE__ */ f("div", { className: "carousel-hud__header", children: [
|
|
/* @__PURE__ */ l("span", { children: r === "fullscreen" ? "Fullscreen" : "Square" }),
|
|
/* @__PURE__ */ l("span", { children: c ? "Browsing alternates" : "Inspecting" })
|
|
] }),
|
|
e.authorName ? /* @__PURE__ */ f("p", { className: "carousel-hud__author", children: [
|
|
"By ",
|
|
e.authorName
|
|
] }) : null,
|
|
/* @__PURE__ */ f("div", { className: "carousel-hud__footer", children: [
|
|
/* @__PURE__ */ l("strong", { children: e.id }),
|
|
/* @__PURE__ */ f("span", { children: [
|
|
n + 1,
|
|
"/",
|
|
t.length
|
|
] })
|
|
] })
|
|
] }) : null
|
|
]
|
|
}
|
|
);
|
|
}
|
|
function pt({
|
|
pauseMode: t,
|
|
pendingVote: r,
|
|
onResume: e,
|
|
onPause: i
|
|
}) {
|
|
const c = t === "playing", a = c ? "Pause playback" : r ? "Resume playback and record vote" : "Resume playback";
|
|
return /* @__PURE__ */ l("div", { className: "resume-control", children: /* @__PURE__ */ l(
|
|
"button",
|
|
{
|
|
type: "button",
|
|
className: "resume-control__button",
|
|
"aria-label": a,
|
|
title: a,
|
|
onClick: c ? i : e,
|
|
children: /* @__PURE__ */ l(
|
|
"span",
|
|
{
|
|
className: `resume-control__icon ${c ? "resume-control__icon--pause" : "resume-control__icon--play"}`,
|
|
"aria-hidden": "true"
|
|
}
|
|
)
|
|
}
|
|
) });
|
|
}
|
|
const Re = /* @__PURE__ */ new Map(), Ir = {
|
|
ChartSingle: () => Promise.resolve().then(() => Bt),
|
|
DefinitionCard: () => Promise.resolve().then(() => Yt),
|
|
EquationFocus: () => Promise.resolve().then(() => Xt),
|
|
FullscreenSplit: () => Promise.resolve().then(() => Zt),
|
|
FullscreenVideo: () => Promise.resolve().then(() => Ct),
|
|
FullscreenVideoCenterCaption: () => Promise.resolve().then(() => er),
|
|
FullscreenVideoTitle: () => Promise.resolve().then(() => lr),
|
|
GlitchComponentFrame: () => Promise.resolve().then(() => nr),
|
|
ProcessFlow: () => Promise.resolve().then(() => pr),
|
|
QuoteImage: () => Promise.resolve().then(() => fr),
|
|
SquareVideo: () => Promise.resolve().then(() => Sr),
|
|
SquareYellow: () => Promise.resolve().then(() => br)
|
|
};
|
|
function Je(t, r) {
|
|
const e = Re.get(r);
|
|
if (e)
|
|
return e;
|
|
const i = t[r];
|
|
if (!i)
|
|
return Promise.reject(new Error(`Unknown slide component: ${r}`));
|
|
const c = i();
|
|
return Re.set(r, c), c;
|
|
}
|
|
async function je(t, r) {
|
|
const e = /* @__PURE__ */ new Set();
|
|
r.forEach((i) => {
|
|
i.glitchSlides.forEach((c) => {
|
|
e.add(c.componentKey);
|
|
});
|
|
}), await Promise.allSettled(
|
|
[...e].map(
|
|
(i) => Je(t, i)
|
|
)
|
|
);
|
|
}
|
|
class mt extends ot {
|
|
constructor() {
|
|
super(...arguments);
|
|
Ae(this, "state", {
|
|
hasError: !1
|
|
});
|
|
}
|
|
static getDerivedStateFromError() {
|
|
return {
|
|
hasError: !0
|
|
};
|
|
}
|
|
componentDidCatch(e, i) {
|
|
console.error("Slide runtime crashed", e, i);
|
|
}
|
|
componentDidUpdate(e) {
|
|
e.children !== this.props.children && this.state.hasError && this.setState({ hasError: !1 });
|
|
}
|
|
render() {
|
|
return this.state.hasError ? this.props.fallback : this.props.children;
|
|
}
|
|
}
|
|
function te({ reason: t }) {
|
|
return /* @__PURE__ */ f("article", { className: "fallback-slide", children: [
|
|
/* @__PURE__ */ l("p", { className: "eyebrow", children: "Fallback slide" }),
|
|
/* @__PURE__ */ l("h3", { children: "Component unavailable" }),
|
|
/* @__PURE__ */ l("p", { children: "The player kept running even though this candidate could not render." }),
|
|
t ? /* @__PURE__ */ l("code", { children: t }) : null
|
|
] });
|
|
}
|
|
function he({
|
|
lectureId: t,
|
|
slide: r,
|
|
glitchSlide: e,
|
|
slideRegistry: i,
|
|
paused: c,
|
|
onMediaLoadingChange: a
|
|
}) {
|
|
const [n, u] = q(null), [s, d] = q(null);
|
|
y(() => {
|
|
let v = !1;
|
|
return d(null), u(null), Je(i, e.componentKey).then((S) => {
|
|
v || (d(null), u(() => S.default));
|
|
}).catch((S) => {
|
|
v || (u(null), d(
|
|
S instanceof Error ? S.message : "Failed to load slide component."
|
|
));
|
|
}), () => {
|
|
v = !0;
|
|
};
|
|
}, [e.componentKey, i]);
|
|
const P = {
|
|
lectureId: t,
|
|
slideId: r.id,
|
|
glitchSlideId: e.id,
|
|
displayMode: r.displayMode,
|
|
props: e.props,
|
|
latexString: e.latexString,
|
|
paused: c,
|
|
onMediaLoadingChange: a
|
|
};
|
|
return /* @__PURE__ */ l(mt, { fallback: /* @__PURE__ */ l(te, { reason: s }), children: n ? /* @__PURE__ */ l(n, { ...P }) : s ? /* @__PURE__ */ l(te, { reason: s }) : /* @__PURE__ */ l(te, { reason: "Loading candidate module..." }) });
|
|
}
|
|
function ft({
|
|
lectureId: t,
|
|
slide: r,
|
|
glitchSlide: e,
|
|
candidates: i,
|
|
slideRegistry: c,
|
|
paused: a,
|
|
isInspecting: n,
|
|
isSettling: u,
|
|
viewportMode: s,
|
|
dragBaselineGlitchSlideId: d,
|
|
dragOffsetPx: P,
|
|
onMediaLoadingChange: v
|
|
}) {
|
|
const S = fe(s), b = i.findIndex(
|
|
(E) => E.id === e.id
|
|
), N = i.findIndex(
|
|
(E) => E.id === d
|
|
), _ = i.length > 1, A = n && N !== -1 ? N : Math.max(b, 0), j = n ? P : 0, V = S === "horizontal" ? `translate3d(calc(${-A * 100}% + ${j}px), 0, 0)` : `translate3d(0, calc(${-A * 100}% + ${j}px), 0)`;
|
|
return /* @__PURE__ */ l(
|
|
"div",
|
|
{
|
|
className: `slide-host slide-host--${r.displayMode} ${n ? "slide-host--inspect" : ""}`,
|
|
"data-testid": `slide-host-${r.displayMode}`,
|
|
children: _ ? /* @__PURE__ */ l("div", { className: "slide-host__viewport", children: /* @__PURE__ */ l(
|
|
"div",
|
|
{
|
|
className: `slide-host__track slide-host__track--${S} ${u ? "slide-host__track--settling" : ""}`,
|
|
style: { transform: V },
|
|
children: i.map((E) => /* @__PURE__ */ l(
|
|
"div",
|
|
{
|
|
className: `slide-host__item ${E.id === e.id ? "slide-host__item--active" : ""}`,
|
|
children: /* @__PURE__ */ l(
|
|
he,
|
|
{
|
|
lectureId: t,
|
|
slide: r,
|
|
glitchSlide: E,
|
|
slideRegistry: c,
|
|
paused: a || E.id !== e.id,
|
|
onMediaLoadingChange: E.id === e.id ? v : void 0
|
|
}
|
|
)
|
|
},
|
|
E.id
|
|
))
|
|
}
|
|
) }) : /* @__PURE__ */ l(
|
|
he,
|
|
{
|
|
lectureId: t,
|
|
slide: r,
|
|
glitchSlide: e,
|
|
slideRegistry: c,
|
|
paused: a,
|
|
onMediaLoadingChange: v
|
|
}
|
|
)
|
|
}
|
|
);
|
|
}
|
|
function Ue(t, r) {
|
|
return Math.min(r, Math.max(0, t));
|
|
}
|
|
function ht(t, r) {
|
|
for (const e of t)
|
|
if (r >= e.startTimeSec && r < e.startTimeSec + e.durationSec)
|
|
return e;
|
|
return t[t.length - 1] ?? null;
|
|
}
|
|
function St(t, r) {
|
|
const e = t.findIndex((i) => i.id === r);
|
|
return e === -1 ? null : t[e + 1] ?? null;
|
|
}
|
|
function yt(t, r) {
|
|
return Math.min(
|
|
t.durationSec,
|
|
Math.max(0, r - t.startTimeSec)
|
|
);
|
|
}
|
|
function bt(t, r, e) {
|
|
var a;
|
|
const i = t.findIndex((n) => n.id === r);
|
|
if (i === -1)
|
|
return e;
|
|
const c = t[i];
|
|
return c.endTimeSec != null ? c.endTimeSec : ((a = t[i + 1]) == null ? void 0 : a.startTimeSec) ?? e;
|
|
}
|
|
function Se(t, r, e) {
|
|
for (const i of t) {
|
|
if (i.startTimeSec == null)
|
|
continue;
|
|
const c = bt(t, i.id, e);
|
|
if (r >= i.startTimeSec && r < c)
|
|
return i;
|
|
}
|
|
return null;
|
|
}
|
|
function ve(t, r) {
|
|
const e = t.glitchSlides.filter(
|
|
(c) => c.orientation === r
|
|
);
|
|
if (e.length > 0)
|
|
return e;
|
|
const i = t.glitchSlides.filter(
|
|
(c) => !c.orientation || c.orientation === "any"
|
|
);
|
|
return i.length > 0 ? i : t.glitchSlides;
|
|
}
|
|
function _e(t, r, e) {
|
|
const i = ve(t, r);
|
|
if (e) {
|
|
const a = i.find(
|
|
(n) => n.id === e
|
|
);
|
|
if (a)
|
|
return a;
|
|
}
|
|
return [...i].sort(
|
|
(a, n) => n.score - a.score
|
|
)[0];
|
|
}
|
|
function vt(t, r, e, i) {
|
|
const c = Se(t, r, e), a = c ? t.findIndex((n) => n.id === c.id) : -1;
|
|
return t.slice(a + 1, a + 1 + i);
|
|
}
|
|
function Ke(t, r) {
|
|
try {
|
|
const e = t.play();
|
|
e && typeof e.catch == "function" && e.catch(() => {
|
|
r();
|
|
});
|
|
} catch {
|
|
r();
|
|
}
|
|
}
|
|
function _t({
|
|
segment: t,
|
|
nextSegment: r,
|
|
globalTimeSec: e,
|
|
lectureDurationSec: i,
|
|
pauseMode: c,
|
|
viewportMode: a,
|
|
onGlobalTimeChange: n,
|
|
onSegmentError: u,
|
|
onAutoplayBlocked: s,
|
|
onTogglePlayback: d
|
|
}) {
|
|
const P = O(null), v = O(0), S = t ? yt(t, e) : 0;
|
|
return y(() => {
|
|
const b = P.current;
|
|
if (!b || !t)
|
|
return;
|
|
Math.abs(b.currentTime - S) > 0.45 && (b.currentTime = S, v.current = S);
|
|
}, [S, t == null ? void 0 : t.id]), y(() => {
|
|
const b = P.current;
|
|
if (b) {
|
|
if (c === "playing") {
|
|
Ke(b, s);
|
|
return;
|
|
}
|
|
b.pause();
|
|
}
|
|
}, [s, c, t == null ? void 0 : t.id]), t ? /* @__PURE__ */ f("div", { className: `video-stage video-stage--${a}`, children: [
|
|
/* @__PURE__ */ f(
|
|
"div",
|
|
{
|
|
className: "video-stage__window",
|
|
role: "button",
|
|
tabIndex: 0,
|
|
"aria-label": c === "playing" ? "Pause video" : "Resume video",
|
|
onClick: d,
|
|
onKeyDown: (b) => {
|
|
(b.key === " " || b.key === "Enter") && (b.preventDefault(), d());
|
|
},
|
|
children: [
|
|
/* @__PURE__ */ l(
|
|
"video",
|
|
{
|
|
ref: P,
|
|
className: "video-stage__video",
|
|
preload: "auto",
|
|
autoPlay: !0,
|
|
muted: !0,
|
|
playsInline: !0,
|
|
controls: !1,
|
|
poster: t.poster,
|
|
src: t.src,
|
|
onLoadedMetadata: (b) => {
|
|
const N = b.currentTarget;
|
|
N.currentTime = S, v.current = S, c === "playing" && Ke(N, s);
|
|
},
|
|
onTimeUpdate: (b) => {
|
|
const N = b.currentTarget, _ = Math.min(N.currentTime, t.durationSec);
|
|
v.current = _, n(t.startTimeSec + _), _ >= t.durationSec - 0.08 && t.startTimeSec + t.durationSec < i && n(t.startTimeSec + t.durationSec);
|
|
},
|
|
onEnded: () => {
|
|
n(t.startTimeSec + t.durationSec);
|
|
},
|
|
onError: () => {
|
|
u(`Failed to load ${t.id}. Retry by resuming playback.`);
|
|
}
|
|
},
|
|
t.id
|
|
),
|
|
/* @__PURE__ */ f("div", { className: "video-stage__meta", children: [
|
|
/* @__PURE__ */ l("span", { children: t.id }),
|
|
/* @__PURE__ */ f("span", { children: [
|
|
Math.min(v.current, t.durationSec).toFixed(1),
|
|
" /",
|
|
" ",
|
|
t.durationSec.toFixed(1),
|
|
"s"
|
|
] })
|
|
] })
|
|
]
|
|
}
|
|
),
|
|
/* @__PURE__ */ f("div", { className: "video-stage__next", children: [
|
|
/* @__PURE__ */ l("span", { children: "Up next" }),
|
|
/* @__PURE__ */ l("strong", { children: (r == null ? void 0 : r.id) ?? "End of lecture" })
|
|
] })
|
|
] }) : /* @__PURE__ */ l("div", { className: `video-stage video-stage--${a}`, children: /* @__PURE__ */ f("div", { className: "video-stage__placeholder", children: [
|
|
/* @__PURE__ */ l("p", { className: "eyebrow", children: "Video pending" }),
|
|
/* @__PURE__ */ l("p", { children: "No active segment is available at this lecture time." })
|
|
] }) });
|
|
}
|
|
function B(t, r) {
|
|
console.log("[player-event]", r), t == null || t(r);
|
|
}
|
|
const ze = /* @__PURE__ */ new Set();
|
|
function ye(t) {
|
|
if (typeof document > "u" || ze.has(t.id))
|
|
return;
|
|
const r = document.createElement("video");
|
|
r.preload = "metadata", r.src = t.src, ze.add(t.id);
|
|
}
|
|
function xt(t) {
|
|
t.forEach((r) => {
|
|
ye(r);
|
|
});
|
|
}
|
|
function qr() {
|
|
return typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID() : `sess-${Math.random().toString(36).slice(2, 10)}`;
|
|
}
|
|
function Be(t) {
|
|
var e;
|
|
if (typeof navigator > "u")
|
|
return {
|
|
viewportMode: t,
|
|
userAgent: "server",
|
|
platform: "server"
|
|
};
|
|
const r = navigator;
|
|
return {
|
|
viewportMode: t,
|
|
userAgent: navigator.userAgent,
|
|
platform: ((e = r.userAgentData) == null ? void 0 : e.platform) ?? navigator.platform
|
|
};
|
|
}
|
|
const wt = 220, Nt = 1600;
|
|
function me(t, r) {
|
|
return `${t}:${r}`;
|
|
}
|
|
function He(t, r) {
|
|
return t <= 900 ? r >= t ? "mobile-portrait" : "mobile-landscape" : "desktop";
|
|
}
|
|
function Ye(t, r, e) {
|
|
const i = Qe(
|
|
t,
|
|
r,
|
|
e
|
|
);
|
|
return !i || i.startTimeSec == null ? 0 : i.startTimeSec;
|
|
}
|
|
function Qe(t, r, e) {
|
|
return r ? t.slides.find((i) => i.id === r) ?? null : typeof e == "number" && e >= 0 && e < t.slides.length ? t.slides[e] : null;
|
|
}
|
|
function Xe({
|
|
presentation: t,
|
|
slideRegistry: r,
|
|
mode: e = "playback",
|
|
targetSlideId: i,
|
|
targetSlideIndex: c,
|
|
onEvent: a,
|
|
onVoteCommit: n,
|
|
initialSessionId: u
|
|
}) {
|
|
const s = t, [d, P] = q(
|
|
() => Ye(s, i, c)
|
|
), [v, S] = q(
|
|
e === "slide-preview"
|
|
), [b, N] = q({}), [_, A] = q(null), [j, V] = q(!1), [E, re] = q(null), [le, xe] = q(!1), [$, Q] = q(!1), [Ze, ie] = q(!1), [we, Me] = q(null), [D, Ce] = q(
|
|
() => typeof window > "u" || typeof document > "u" ? "desktop" : He(
|
|
document.documentElement.clientWidth,
|
|
document.documentElement.clientHeight
|
|
)
|
|
), [Ne] = q(
|
|
() => u ?? `sess-${Math.random().toString(36).slice(2, 10)}`
|
|
), [U, g] = q({
|
|
isScrubbing: !1,
|
|
previewTimeSec: 0,
|
|
resumeWasManuallyPaused: !1
|
|
}), [h, Y] = q({
|
|
pointerId: null,
|
|
startX: 0,
|
|
startY: 0,
|
|
dragSpan: 320,
|
|
dragOffsetPx: 0,
|
|
isSettling: !1,
|
|
resumeWasManuallyPaused: !1,
|
|
baselineGlitchSlideId: null,
|
|
previewGlitchSlideId: null
|
|
}), [Le, Pe] = q(!0), Ie = O(null), se = O(null), ce = O(null), qe = O(!1), k = O(null), W = O(null), G = ht(s.segments, d), Z = G ? St(s.segments, G.id) : null, p = (e === "slide-preview" ? Qe(s, i, c) : null) ?? Se(s.slides, d, s.durationSec), K = p ? ve(p, D) : [], et = p ? b[me(p.id, D)] : void 0, I = p ? _e(p, D, et) : null, x = (p ? K.find(
|
|
(o) => o.id === h.previewGlitchSlideId
|
|
) ?? null : null) ?? I, J = v ? "full-paused" : U.isScrubbing || $ || h.isSettling || Ze ? "soft-paused" : "playing", ae = U.isScrubbing ? U.previewTimeSec : d, oe = Se(
|
|
s.slides,
|
|
ae,
|
|
s.durationSec
|
|
), Te = $ || h.isSettling, tt = v || U.isScrubbing || $ || h.isSettling || Le, rt = (p == null ? void 0 : p.displayMode) === "fullscreen", Fe = (p == null ? void 0 : p.displayMode) === "square" && x && (x.componentKey === "SquareYellow" || x.componentKey === "SquareVideo") && typeof x.props.header == "string" ? x.props.header : null;
|
|
p && b[me(p.id, D)], y(() => {
|
|
const o = Ie.current;
|
|
if (!o || typeof ResizeObserver > "u")
|
|
return;
|
|
const m = new ResizeObserver((w) => {
|
|
const z = w[0];
|
|
z && Ce(
|
|
He(z.contentRect.width, z.contentRect.height)
|
|
);
|
|
});
|
|
return m.observe(o), () => {
|
|
m.disconnect();
|
|
};
|
|
}, []), y(() => {
|
|
const o = Ye(
|
|
s,
|
|
i,
|
|
c
|
|
);
|
|
P(o), S(e === "slide-preview"), V(!1), re(null), A(null), ie(!1);
|
|
}, [s.id, s.slides, e, i, c]), y(() => {
|
|
ie(!1);
|
|
}, [p == null ? void 0 : p.id, x == null ? void 0 : x.id]), y(() => {
|
|
B(a, {
|
|
type: "lecture_loaded",
|
|
lectureId: s.id
|
|
});
|
|
}, [s.id, a]), y(() => {
|
|
G && (ye(G), Z && ye(Z));
|
|
}, [G, Z]), y(() => {
|
|
xt(s.segments.slice(0, 2));
|
|
}, [s.segments]), y(() => {
|
|
if (!p)
|
|
return;
|
|
je(r, [p]);
|
|
const o = vt(
|
|
s.slides,
|
|
d,
|
|
s.durationSec,
|
|
2
|
|
);
|
|
je(r, o);
|
|
}, [p, d, s.durationSec, s.slides, r]), y(() => {
|
|
if (!G) {
|
|
se.current = null;
|
|
return;
|
|
}
|
|
se.current !== G.id && (se.current = G.id, B(a, {
|
|
type: "segment_changed",
|
|
lectureId: s.id,
|
|
segmentId: G.id,
|
|
atSec: Number(d.toFixed(2))
|
|
}));
|
|
}, [G, d, s.id, a]), y(() => {
|
|
const o = p && x ? `${p.id}:${x.id}` : null;
|
|
if (!o) {
|
|
ce.current = null;
|
|
return;
|
|
}
|
|
ce.current !== o && (p && x && B(a, {
|
|
type: "slide_activated",
|
|
lectureId: s.id,
|
|
slideId: p.id,
|
|
glitchSlideId: x.id,
|
|
atSec: Number(d.toFixed(2))
|
|
}), ce.current = o);
|
|
}, [x, p, d, s.id, a]), y(() => {
|
|
Y((o) => ({
|
|
...o,
|
|
dragOffsetPx: 0,
|
|
isSettling: !1,
|
|
baselineGlitchSlideId: (I == null ? void 0 : I.id) ?? null,
|
|
previewGlitchSlideId: null
|
|
})), Q(!1);
|
|
}, [p == null ? void 0 : p.id]), y(() => {
|
|
h.pointerId !== null || h.isSettling || $ || Y((o) => ({
|
|
...o,
|
|
baselineGlitchSlideId: (I == null ? void 0 : I.id) ?? null,
|
|
previewGlitchSlideId: null
|
|
}));
|
|
}, [
|
|
I == null ? void 0 : I.id,
|
|
h.pointerId,
|
|
h.isSettling,
|
|
$
|
|
]), y(() => {
|
|
const o = (m) => {
|
|
if (m.key !== " " && m.key.toLowerCase() !== "k")
|
|
return;
|
|
const w = document.activeElement;
|
|
w && ["INPUT", "TEXTAREA", "BUTTON"].includes(w.tagName) || (m.preventDefault(), J === "playing" ? S(!0) : de());
|
|
};
|
|
return window.addEventListener("keydown", o), () => {
|
|
window.removeEventListener("keydown", o);
|
|
};
|
|
}, [J, _, p, x, d]), y(() => () => {
|
|
k.current !== null && window.clearTimeout(k.current), W.current !== null && window.clearTimeout(W.current);
|
|
}, []);
|
|
function H() {
|
|
Pe(!0), W.current !== null && (window.clearTimeout(W.current), W.current = null), !(v || U.isScrubbing || $ || h.isSettling) && (W.current = window.setTimeout(() => {
|
|
Pe(!1), W.current = null;
|
|
}, Nt));
|
|
}
|
|
y(() => {
|
|
H();
|
|
}, [v, U.isScrubbing, $, h.isSettling]);
|
|
function ne(o) {
|
|
P(Ue(o, s.durationSec));
|
|
}
|
|
function $e() {
|
|
H(), V(!1), S(!0), g({
|
|
isScrubbing: !0,
|
|
previewTimeSec: d,
|
|
resumeWasManuallyPaused: v
|
|
});
|
|
}
|
|
function lt(o) {
|
|
const m = Ue(Number(o), s.durationSec);
|
|
g((w) => ({
|
|
...w,
|
|
previewTimeSec: m
|
|
})), ne(m);
|
|
}
|
|
function M() {
|
|
g((o) => ({
|
|
...o,
|
|
isScrubbing: !1
|
|
}));
|
|
}
|
|
function De(o) {
|
|
H(), V(!1), S(!0), k.current !== null && (window.clearTimeout(k.current), k.current = null), Q(!1), g((m) => ({
|
|
...m,
|
|
isScrubbing: !1,
|
|
previewTimeSec: o
|
|
})), Y((m) => ({
|
|
...m,
|
|
pointerId: null,
|
|
dragOffsetPx: 0,
|
|
isSettling: !1,
|
|
previewGlitchSlideId: null
|
|
})), ne(o);
|
|
}
|
|
function X() {
|
|
k.current !== null && (window.clearTimeout(k.current), k.current = null), Y((o) => ({
|
|
...o,
|
|
pointerId: null,
|
|
dragOffsetPx: 0,
|
|
isSettling: !1,
|
|
previewGlitchSlideId: null
|
|
})), Q(!1);
|
|
}
|
|
function Oe(o, m) {
|
|
k.current !== null && window.clearTimeout(k.current), Q(!1), Y((w) => ({
|
|
...w,
|
|
pointerId: null,
|
|
dragOffsetPx: o,
|
|
isSettling: !0
|
|
})), k.current = window.setTimeout(() => {
|
|
k.current = null, m();
|
|
}, wt);
|
|
}
|
|
function it(o) {
|
|
if (!p || !I)
|
|
return;
|
|
H(), V(!1);
|
|
const m = o.currentTarget.getBoundingClientRect();
|
|
typeof o.currentTarget.setPointerCapture == "function" && o.currentTarget.setPointerCapture(o.pointerId);
|
|
const w = fe(D);
|
|
Y({
|
|
pointerId: o.pointerId,
|
|
startX: o.clientX,
|
|
startY: o.clientY,
|
|
dragSpan: Math.max(w === "horizontal" ? m.width : m.height, 240),
|
|
dragOffsetPx: 0,
|
|
isSettling: !1,
|
|
resumeWasManuallyPaused: v,
|
|
baselineGlitchSlideId: I.id,
|
|
previewGlitchSlideId: null
|
|
});
|
|
}
|
|
function st(o) {
|
|
if (!p || h.pointerId !== o.pointerId)
|
|
return;
|
|
const m = fe(D), w = o.clientX - h.startX, z = o.clientY - h.startY, R = m === "horizontal" ? w : z;
|
|
if (!$ && Math.abs(R) < 24)
|
|
return;
|
|
H(), $ || (Q(!0), h.resumeWasManuallyPaused || B(a, {
|
|
type: "soft_pause_started",
|
|
lectureId: s.id,
|
|
slideId: p.id,
|
|
atSec: Number(d.toFixed(2))
|
|
}));
|
|
const T = K.findIndex(
|
|
(pe) => pe.id === h.baselineGlitchSlideId
|
|
), C = Math.min(
|
|
Math.max(
|
|
R,
|
|
-(K.length - 1 - Math.max(T, 0)) * h.dragSpan
|
|
),
|
|
Math.max(T, 0) * h.dragSpan
|
|
), L = nt({
|
|
baselineIndex: T === -1 ? 0 : T,
|
|
dragDistance: -C,
|
|
totalCandidates: K.length,
|
|
dragSpan: h.dragSpan
|
|
}), F = K[L];
|
|
F && F.id !== h.previewGlitchSlideId && F.id !== h.baselineGlitchSlideId && B(a, {
|
|
type: "glitch_slide_changed",
|
|
lectureId: s.id,
|
|
slideId: p.id,
|
|
from: h.previewGlitchSlideId ?? h.baselineGlitchSlideId ?? F.id,
|
|
to: F.id,
|
|
atSec: Number(d.toFixed(2))
|
|
}), Y((pe) => ({
|
|
...pe,
|
|
dragOffsetPx: C,
|
|
previewGlitchSlideId: (F == null ? void 0 : F.id) ?? null
|
|
}));
|
|
}
|
|
function ue(o) {
|
|
if (!p || h.pointerId !== o) {
|
|
X();
|
|
return;
|
|
}
|
|
const m = h.previewGlitchSlideId ?? h.baselineGlitchSlideId ?? (I == null ? void 0 : I.id) ?? null, w = h.baselineGlitchSlideId ?? (I == null ? void 0 : I.id) ?? null, z = ut(
|
|
w,
|
|
m
|
|
);
|
|
if (!$) {
|
|
if (p.displayMode === "fullscreen") {
|
|
X(), ke();
|
|
return;
|
|
}
|
|
X();
|
|
return;
|
|
}
|
|
if (!z) {
|
|
const R = h.resumeWasManuallyPaused;
|
|
Oe(0, () => {
|
|
R || B(a, {
|
|
type: "soft_pause_ended",
|
|
lectureId: s.id,
|
|
slideId: p.id,
|
|
atSec: Number(d.toFixed(2))
|
|
}), R || A(null), X();
|
|
});
|
|
return;
|
|
}
|
|
if (w && m) {
|
|
N((F) => ({
|
|
...F,
|
|
[me(p.id, D)]: m
|
|
}));
|
|
const R = K.findIndex(
|
|
(F) => F.id === w
|
|
), T = K.findIndex(
|
|
(F) => F.id === m
|
|
), C = R === -1 || T === -1 ? 0 : (R - T) * h.dragSpan, L = h.resumeWasManuallyPaused;
|
|
Oe(C, () => {
|
|
L || B(a, {
|
|
type: "soft_pause_ended",
|
|
lectureId: s.id,
|
|
slideId: p.id,
|
|
atSec: Number(d.toFixed(2))
|
|
}), L || A(null), X();
|
|
});
|
|
}
|
|
}
|
|
async function de() {
|
|
if (V(!1), _) {
|
|
const o = {
|
|
lectureId: _.lectureId,
|
|
slideId: _.slideId,
|
|
previousGlitchSlideId: _.previousGlitchSlideId,
|
|
selectedGlitchSlideId: _.selectedGlitchSlideId,
|
|
sessionId: Ne,
|
|
timestamp: (/* @__PURE__ */ new Date()).toISOString(),
|
|
deviceContext: Be(D)
|
|
};
|
|
await (n == null ? void 0 : n(o)), B(a, {
|
|
type: "vote_committed",
|
|
lectureId: o.lectureId,
|
|
slideId: o.slideId,
|
|
selectedGlitchSlideId: o.selectedGlitchSlideId,
|
|
previousGlitchSlideId: o.previousGlitchSlideId,
|
|
atSec: Number(d.toFixed(2))
|
|
}), A(null);
|
|
}
|
|
S(!1);
|
|
}
|
|
async function Ee(o) {
|
|
if (!p || !x || le)
|
|
return;
|
|
xe(!0), re(o);
|
|
const m = {
|
|
lectureId: s.id,
|
|
slideId: p.id,
|
|
previousGlitchSlideId: x.id,
|
|
selectedGlitchSlideId: x.id,
|
|
voteDirection: o,
|
|
sessionId: Ne,
|
|
timestamp: (/* @__PURE__ */ new Date()).toISOString(),
|
|
deviceContext: Be(D)
|
|
};
|
|
try {
|
|
await (n == null ? void 0 : n(m)), B(a, {
|
|
type: "vote_committed",
|
|
lectureId: m.lectureId,
|
|
slideId: m.slideId,
|
|
selectedGlitchSlideId: m.selectedGlitchSlideId,
|
|
previousGlitchSlideId: m.previousGlitchSlideId,
|
|
voteDirection: o,
|
|
atSec: Number(d.toFixed(2))
|
|
});
|
|
} finally {
|
|
xe(!1);
|
|
}
|
|
}
|
|
function ke() {
|
|
if (H(), J === "playing") {
|
|
S(!0), re(null), V(!0);
|
|
return;
|
|
}
|
|
v && de();
|
|
}
|
|
function Ve(o) {
|
|
return !j || !p || !x || p.displayMode !== o ? null : /* @__PURE__ */ l(
|
|
"div",
|
|
{
|
|
className: `lecture-player__vote-overlay lecture-player__vote-overlay--${o}`,
|
|
role: "dialog",
|
|
"aria-label": "Vote on slide",
|
|
onClick: (m) => m.stopPropagation(),
|
|
children: /* @__PURE__ */ f("div", { className: "lecture-player__vote-panel", children: [
|
|
/* @__PURE__ */ l("p", { className: "lecture-player__vote-label", children: "Rate This Slide" }),
|
|
/* @__PURE__ */ f("div", { className: "lecture-player__vote-actions", children: [
|
|
/* @__PURE__ */ l(
|
|
"button",
|
|
{
|
|
type: "button",
|
|
className: `lecture-player__vote-button ${E === "up" ? "lecture-player__vote-button--active" : ""}`,
|
|
onClick: (m) => {
|
|
m.stopPropagation(), Ee("up");
|
|
},
|
|
disabled: le,
|
|
children: "Upvote"
|
|
}
|
|
),
|
|
/* @__PURE__ */ l(
|
|
"button",
|
|
{
|
|
type: "button",
|
|
className: `lecture-player__vote-button ${E === "down" ? "lecture-player__vote-button--active" : ""}`,
|
|
onClick: (m) => {
|
|
m.stopPropagation(), Ee("down");
|
|
},
|
|
disabled: le,
|
|
children: "Downvote"
|
|
}
|
|
)
|
|
] })
|
|
] })
|
|
}
|
|
);
|
|
}
|
|
function Ge(o) {
|
|
return !p || !x ? o === "fullscreen" ? null : /* @__PURE__ */ f("div", { className: "lecture-player__empty", children: [
|
|
/* @__PURE__ */ l("p", { className: "eyebrow", children: "No slide available" }),
|
|
/* @__PURE__ */ l("p", { children: "Enroll at glitch.university, and help make this slide!." })
|
|
] }) : p.displayMode !== o ? o === "fullscreen" ? null : /* @__PURE__ */ l(
|
|
"div",
|
|
{
|
|
className: "lecture-player__empty lecture-player__empty--muted",
|
|
"aria-hidden": "true"
|
|
}
|
|
) : /* @__PURE__ */ f(
|
|
"div",
|
|
{
|
|
className: "lecture-player__gesture-layer",
|
|
onPointerDown: it,
|
|
onPointerMove: st,
|
|
onPointerUp: (m) => ue(m.pointerId),
|
|
onPointerCancel: (m) => ue(m.pointerId),
|
|
onPointerLeave: (m) => {
|
|
$ && ue(m.pointerId);
|
|
},
|
|
children: [
|
|
/* @__PURE__ */ l(
|
|
ft,
|
|
{
|
|
lectureId: s.id,
|
|
slide: p,
|
|
glitchSlide: x,
|
|
candidates: K,
|
|
slideRegistry: r,
|
|
paused: J !== "playing",
|
|
isInspecting: Te,
|
|
isSettling: h.isSettling,
|
|
viewportMode: D,
|
|
dragBaselineGlitchSlideId: h.baselineGlitchSlideId,
|
|
dragOffsetPx: h.dragOffsetPx,
|
|
onMediaLoadingChange: ie
|
|
}
|
|
),
|
|
/* @__PURE__ */ l(
|
|
dt,
|
|
{
|
|
candidates: K,
|
|
displayMode: p.displayMode,
|
|
activeGlitchSlide: x,
|
|
isInspecting: Te,
|
|
isDragging: $,
|
|
viewportMode: D
|
|
}
|
|
)
|
|
]
|
|
}
|
|
);
|
|
}
|
|
return /* @__PURE__ */ l(
|
|
"div",
|
|
{
|
|
ref: Ie,
|
|
className: `lecture-player lecture-player--${D} ${(p == null ? void 0 : p.displayMode) === "fullscreen" ? "lecture-player--fullscreen" : ""}`,
|
|
"data-testid": "lecture-player",
|
|
children: /* @__PURE__ */ l("div", { className: "lecture-player__stage", children: /* @__PURE__ */ f(
|
|
"div",
|
|
{
|
|
className: "lecture-player__stage-frame",
|
|
onPointerMove: () => {
|
|
!$ && !U.isScrubbing && H();
|
|
},
|
|
onPointerDown: () => H(),
|
|
children: [
|
|
/* @__PURE__ */ l(
|
|
_t,
|
|
{
|
|
segment: G,
|
|
nextSegment: Z,
|
|
globalTimeSec: d,
|
|
lectureDurationSec: s.durationSec,
|
|
pauseMode: J,
|
|
viewportMode: D,
|
|
onTogglePlayback: ke,
|
|
onAutoplayBlocked: () => {
|
|
qe.current || (qe.current = !0, S(!0));
|
|
},
|
|
onSegmentError: (o) => Me(o),
|
|
onGlobalTimeChange: ne
|
|
}
|
|
),
|
|
Fe ? /* @__PURE__ */ l("div", { className: "lecture-player__square-header", "aria-live": "polite", children: Fe }) : null,
|
|
/* @__PURE__ */ f("div", { className: "lecture-player__slide-shell", children: [
|
|
Ge("square"),
|
|
Ve("square")
|
|
] }),
|
|
rt ? /* @__PURE__ */ f("div", { className: "lecture-player__fullscreen-layer", children: [
|
|
Ge("fullscreen"),
|
|
Ve("fullscreen")
|
|
] }) : null,
|
|
J !== "playing" ? /* @__PURE__ */ l("div", { className: "lecture-player__overlay-control", children: /* @__PURE__ */ l(
|
|
pt,
|
|
{
|
|
pauseMode: J,
|
|
pendingVote: _,
|
|
onResume: () => {
|
|
de();
|
|
},
|
|
onPause: () => S(!0)
|
|
}
|
|
) }) : null,
|
|
tt ? /* @__PURE__ */ f(
|
|
"div",
|
|
{
|
|
className: "lecture-player__scrubber",
|
|
style: {
|
|
"--scrub-progress": `${s.durationSec > 0 ? ae / s.durationSec * 100 : 0}%`
|
|
},
|
|
children: [
|
|
/* @__PURE__ */ l("div", { className: "lecture-player__scrubber-markers", "aria-label": "Slide markers", children: s.slides.map((o, m) => {
|
|
const w = o.startTimeSec;
|
|
if (w == null)
|
|
return null;
|
|
const z = s.durationSec > 0 ? w / s.durationSec * 100 : 0, R = (oe == null ? void 0 : oe.id) === o.id;
|
|
return /* @__PURE__ */ l(
|
|
"button",
|
|
{
|
|
type: "button",
|
|
className: `lecture-player__scrubber-marker ${R ? "lecture-player__scrubber-marker--active" : ""}`,
|
|
style: {
|
|
"--marker-progress": `${z}%`
|
|
},
|
|
"aria-label": `S${m + 1}`,
|
|
onPointerDown: (T) => {
|
|
T.preventDefault(), T.stopPropagation(), De(w);
|
|
},
|
|
onPointerUp: (T) => {
|
|
T.preventDefault(), T.stopPropagation();
|
|
},
|
|
onClick: (T) => {
|
|
T.preventDefault(), T.stopPropagation(), De(w);
|
|
},
|
|
children: /* @__PURE__ */ f("span", { className: "lecture-player__scrubber-marker-label", children: [
|
|
"S",
|
|
m + 1
|
|
] })
|
|
},
|
|
o.id
|
|
);
|
|
}) }),
|
|
/* @__PURE__ */ l(
|
|
"input",
|
|
{
|
|
type: "range",
|
|
min: 0,
|
|
max: s.durationSec,
|
|
step: 0.01,
|
|
value: ae,
|
|
className: "lecture-player__scrubber-input",
|
|
"aria-label": "Lecture timeline",
|
|
onPointerDown: (o) => {
|
|
o.stopPropagation(), $e();
|
|
},
|
|
onChange: (o) => lt(o.currentTarget.value),
|
|
onPointerUp: () => M(),
|
|
onPointerCancel: () => M(),
|
|
onBlur: () => {
|
|
U.isScrubbing && M();
|
|
},
|
|
onKeyDown: () => {
|
|
U.isScrubbing || $e();
|
|
},
|
|
onKeyUp: () => M()
|
|
}
|
|
)
|
|
]
|
|
}
|
|
) : null,
|
|
we ? /* @__PURE__ */ f("div", { className: "lecture-player__alert lecture-player__alert--overlay", role: "alert", children: [
|
|
/* @__PURE__ */ l("strong", { children: "Segment error:" }),
|
|
" ",
|
|
we
|
|
] }) : null
|
|
]
|
|
}
|
|
) })
|
|
}
|
|
);
|
|
}
|
|
const Tr = Xe, Fr = Xe;
|
|
function Pt({
|
|
presentationId: t,
|
|
slide: r,
|
|
slideRegistry: e,
|
|
viewportMode: i = "desktop",
|
|
preferredGlitchSlideId: c,
|
|
paused: a = !0,
|
|
className: n
|
|
}) {
|
|
const u = ve(r, i), s = _e(
|
|
r,
|
|
i,
|
|
c
|
|
);
|
|
return !s || u.length === 0 ? /* @__PURE__ */ l(
|
|
"div",
|
|
{
|
|
className: [
|
|
"glitch-slide-renderer",
|
|
`glitch-slide-renderer--${i}`,
|
|
n
|
|
].filter(Boolean).join(" "),
|
|
children: /* @__PURE__ */ l("div", { className: `slide-host slide-host--${r.displayMode}`, children: /* @__PURE__ */ l(te, { reason: "No compatible slide variant available." }) })
|
|
}
|
|
) : /* @__PURE__ */ l(
|
|
"div",
|
|
{
|
|
className: [
|
|
"glitch-slide-renderer",
|
|
`glitch-slide-renderer--${i}`,
|
|
`lecture-player--${i}`,
|
|
n
|
|
].filter(Boolean).join(" "),
|
|
"data-testid": `glitch-slide-renderer-${r.displayMode}`,
|
|
children: /* @__PURE__ */ l("div", { className: `slide-host slide-host--${r.displayMode}`, children: /* @__PURE__ */ l(
|
|
he,
|
|
{
|
|
lectureId: t,
|
|
slide: r,
|
|
glitchSlide: s,
|
|
slideRegistry: e,
|
|
paused: a
|
|
}
|
|
) })
|
|
}
|
|
);
|
|
}
|
|
function $r({
|
|
presentationId: t,
|
|
slide: r,
|
|
slideRegistry: e,
|
|
viewportMode: i = "desktop",
|
|
preferredGlitchSlideId: c,
|
|
className: a,
|
|
showSquareHeader: n = !0
|
|
}) {
|
|
const u = _e(
|
|
r,
|
|
i,
|
|
c
|
|
), s = n && r.displayMode === "square" && (u == null ? void 0 : u.componentKey) === "SquareYellow" && typeof u.props.header == "string" ? String(u.props.header) : null;
|
|
return /* @__PURE__ */ f(
|
|
"div",
|
|
{
|
|
className: [
|
|
"glitch-slide-thumbnail",
|
|
`glitch-slide-thumbnail--${r.displayMode}`,
|
|
`glitch-slide-thumbnail--${i}`,
|
|
a
|
|
].filter(Boolean).join(" "),
|
|
children: [
|
|
s ? /* @__PURE__ */ l("div", { className: "glitch-slide-thumbnail__header", children: s }) : null,
|
|
/* @__PURE__ */ l("div", { className: "glitch-slide-thumbnail__surface", children: /* @__PURE__ */ l(
|
|
Pt,
|
|
{
|
|
presentationId: t,
|
|
slide: r,
|
|
slideRegistry: e,
|
|
viewportMode: i,
|
|
preferredGlitchSlideId: c,
|
|
paused: !0
|
|
}
|
|
) })
|
|
]
|
|
}
|
|
);
|
|
}
|
|
var Dr = [
|
|
"SquareYellow",
|
|
"SquareVideo",
|
|
"FullscreenSplit",
|
|
"FullscreenVideo",
|
|
"FullscreenVideoTitle",
|
|
"FullscreenVideoCenterCaption",
|
|
"EquationFocus",
|
|
"QuoteImage",
|
|
"ChartSingle",
|
|
"ProcessFlow",
|
|
"DefinitionCard",
|
|
"GlitchComponentFrame"
|
|
], Or = {
|
|
SquareYellow: {
|
|
template: "SquareYellow",
|
|
description: "One image plus one short header.",
|
|
fields: {
|
|
header: { targetMin: 8, targetMax: 24, hardMax: 32 },
|
|
imageAlt: { targetMin: 12, targetMax: 60, hardMax: 100 }
|
|
}
|
|
},
|
|
SquareVideo: {
|
|
template: "SquareVideo",
|
|
description: "One video plus one short header.",
|
|
fields: {
|
|
header: { targetMin: 8, targetMax: 24, hardMax: 32 },
|
|
videoSrc: {
|
|
targetMin: 12,
|
|
targetMax: 160,
|
|
hardMax: 300,
|
|
notes: "Prefer a stable hosted or CDN video URL."
|
|
}
|
|
}
|
|
},
|
|
FullscreenSplit: {
|
|
template: "FullscreenSplit",
|
|
description: "One image, one short text block.",
|
|
fields: {
|
|
eyebrow: { targetMin: 6, targetMax: 14, hardMax: 24 },
|
|
title: { targetMin: 12, targetMax: 34, hardMax: 44 },
|
|
body: { targetMin: 12, targetMax: 42, hardMax: 56 }
|
|
}
|
|
},
|
|
FullscreenVideo: {
|
|
template: "FullscreenVideo",
|
|
description: "Full-bleed video with optional short overlay text.",
|
|
fields: {
|
|
header: { targetMin: 6, targetMax: 20, hardMax: 28 },
|
|
videoSrc: {
|
|
targetMin: 12,
|
|
targetMax: 160,
|
|
hardMax: 300,
|
|
notes: "Prefer a stable hosted or CDN video URL."
|
|
},
|
|
caption: { targetMin: 12, targetMax: 42, hardMax: 56 }
|
|
}
|
|
},
|
|
FullscreenVideoTitle: {
|
|
template: "FullscreenVideoTitle",
|
|
description: "Full-bleed video with one large overlaid title.",
|
|
fields: {
|
|
title: { targetMin: 12, targetMax: 26, hardMax: 36 },
|
|
videoSrc: {
|
|
targetMin: 12,
|
|
targetMax: 160,
|
|
hardMax: 300,
|
|
notes: "Prefer a stable hosted or CDN video URL."
|
|
}
|
|
}
|
|
},
|
|
FullscreenVideoCenterCaption: {
|
|
template: "FullscreenVideoCenterCaption",
|
|
description: "Full-bleed video with one oversized centered caption.",
|
|
fields: {
|
|
caption: { targetMin: 12, targetMax: 30, hardMax: 42 },
|
|
videoSrc: {
|
|
targetMin: 12,
|
|
targetMax: 160,
|
|
hardMax: 300,
|
|
notes: "Prefer a stable hosted or CDN video URL."
|
|
}
|
|
}
|
|
},
|
|
EquationFocus: {
|
|
template: "EquationFocus",
|
|
description: "One display equation plus one short annotation.",
|
|
fields: {
|
|
header: { targetMin: 6, targetMax: 20, hardMax: 28 },
|
|
title: { targetMin: 12, targetMax: 32, hardMax: 48 },
|
|
latexString: {
|
|
targetMin: 8,
|
|
targetMax: 60,
|
|
hardMax: 120,
|
|
notes: "One expression only."
|
|
},
|
|
annotation: { targetMin: 12, targetMax: 42, hardMax: 56 }
|
|
}
|
|
},
|
|
QuoteImage: {
|
|
template: "QuoteImage",
|
|
description: "One quote plus one image.",
|
|
fields: {
|
|
quote: { targetMin: 18, targetMax: 50, hardMax: 72 },
|
|
attribution: { targetMin: 4, targetMax: 18, hardMax: 24 }
|
|
}
|
|
},
|
|
ChartSingle: {
|
|
template: "ChartSingle",
|
|
description: "One chart and one short framing line.",
|
|
fields: {
|
|
header: { targetMin: 6, targetMax: 20, hardMax: 28 },
|
|
title: { targetMin: 12, targetMax: 30, hardMax: 40 },
|
|
body: { targetMin: 12, targetMax: 36, hardMax: 48 },
|
|
pointLabel: { targetMin: 4, targetMax: 10, hardMax: 14 }
|
|
}
|
|
},
|
|
ProcessFlow: {
|
|
template: "ProcessFlow",
|
|
description: "Short pipeline with 3-5 steps.",
|
|
fields: {
|
|
title: { targetMin: 12, targetMax: 34, hardMax: 44 },
|
|
step: { targetMin: 8, targetMax: 22, hardMax: 30 }
|
|
}
|
|
},
|
|
DefinitionCard: {
|
|
template: "DefinitionCard",
|
|
description: "One term, one definition, one concrete example.",
|
|
fields: {
|
|
header: { targetMin: 6, targetMax: 20, hardMax: 28 },
|
|
term: { targetMin: 6, targetMax: 22, hardMax: 28 },
|
|
definition: { targetMin: 18, targetMax: 50, hardMax: 65 },
|
|
example: { targetMin: 12, targetMax: 40, hardMax: 52 }
|
|
}
|
|
},
|
|
GlitchComponentFrame: {
|
|
template: "GlitchComponentFrame",
|
|
description: "Interactive hosted component plus one short framing line.",
|
|
fields: {
|
|
header: { targetMin: 6, targetMax: 20, hardMax: 28 },
|
|
componentId: { targetMin: 4, targetMax: 24, hardMax: 40 },
|
|
componentUrl: {
|
|
targetMin: 12,
|
|
targetMax: 160,
|
|
hardMax: 300,
|
|
notes: "Prefer a stable hosted component URL."
|
|
},
|
|
caption: { targetMin: 12, targetMax: 42, hardMax: 56 }
|
|
}
|
|
}
|
|
}, It = {
|
|
header: "",
|
|
imageSrc: "",
|
|
imageAlt: ""
|
|
}, qt = {
|
|
header: "",
|
|
videoSrc: "",
|
|
posterSrc: ""
|
|
}, Tt = {
|
|
eyebrow: "",
|
|
title: "",
|
|
body: "",
|
|
imageSrc: "",
|
|
imageAlt: "",
|
|
imagePosition: "left"
|
|
}, Ft = {
|
|
header: "",
|
|
videoSrc: "",
|
|
posterSrc: "",
|
|
caption: ""
|
|
}, $t = {
|
|
title: "No need to be discrete",
|
|
videoSrc: "",
|
|
posterSrc: ""
|
|
}, Dt = {
|
|
caption: "",
|
|
videoSrc: "",
|
|
posterSrc: ""
|
|
}, Ot = {
|
|
header: "",
|
|
eyebrow: "",
|
|
title: "",
|
|
annotation: ""
|
|
}, Et = {
|
|
eyebrow: "",
|
|
quote: "",
|
|
attribution: "",
|
|
imageSrc: "",
|
|
imageAlt: "",
|
|
imagePosition: "left"
|
|
}, kt = {
|
|
header: "",
|
|
eyebrow: "",
|
|
title: "",
|
|
body: "",
|
|
points: []
|
|
}, Vt = {
|
|
eyebrow: "",
|
|
title: "",
|
|
steps: []
|
|
}, Gt = {
|
|
header: "",
|
|
eyebrow: "",
|
|
term: "",
|
|
definition: "",
|
|
example: ""
|
|
}, At = {
|
|
header: "",
|
|
componentId: "",
|
|
componentUrl: "",
|
|
caption: ""
|
|
}, ge = {
|
|
SquareYellow: {
|
|
componentKey: "SquareYellow",
|
|
label: "Square image + header",
|
|
description: "Square image with a short external header.",
|
|
displayMode: "square",
|
|
fields: [
|
|
{
|
|
name: "header",
|
|
type: "text",
|
|
label: "Header",
|
|
placeholder: "Short headline",
|
|
required: !0
|
|
},
|
|
{
|
|
name: "imageSrc",
|
|
type: "image",
|
|
label: "Image",
|
|
placeholder: "https://...",
|
|
required: !0
|
|
},
|
|
{
|
|
name: "imageAlt",
|
|
type: "text",
|
|
label: "Alt text",
|
|
placeholder: "Describe the image",
|
|
required: !0
|
|
}
|
|
]
|
|
},
|
|
SquareVideo: {
|
|
componentKey: "SquareVideo",
|
|
label: "Square video + header",
|
|
description: "Square video inside a framed square slide with a short header.",
|
|
displayMode: "square",
|
|
fields: [
|
|
{
|
|
name: "header",
|
|
type: "text",
|
|
label: "Header",
|
|
placeholder: "Short headline",
|
|
required: !0
|
|
},
|
|
{
|
|
name: "videoSrc",
|
|
type: "video",
|
|
label: "Video",
|
|
placeholder: "https://...",
|
|
required: !0
|
|
},
|
|
{
|
|
name: "posterSrc",
|
|
type: "image",
|
|
label: "Poster image",
|
|
placeholder: "https://..."
|
|
}
|
|
]
|
|
},
|
|
FullscreenSplit: {
|
|
componentKey: "FullscreenSplit",
|
|
label: "Fullscreen split",
|
|
description: "Two-panel fullscreen slide with image and text.",
|
|
displayMode: "fullscreen",
|
|
fields: [
|
|
{
|
|
name: "header",
|
|
type: "text",
|
|
label: "Header",
|
|
placeholder: "Short header"
|
|
},
|
|
{
|
|
name: "title",
|
|
type: "text",
|
|
label: "Title",
|
|
placeholder: "Main title",
|
|
required: !0
|
|
},
|
|
{
|
|
name: "body",
|
|
type: "textarea",
|
|
label: "Body",
|
|
placeholder: "Short supporting text",
|
|
required: !0
|
|
},
|
|
{
|
|
name: "imageSrc",
|
|
type: "image",
|
|
label: "Image",
|
|
placeholder: "https://...",
|
|
required: !0
|
|
},
|
|
{
|
|
name: "imageAlt",
|
|
type: "text",
|
|
label: "Alt text",
|
|
placeholder: "Describe the image",
|
|
required: !0
|
|
},
|
|
{
|
|
name: "imagePosition",
|
|
type: "text",
|
|
label: "Image position",
|
|
placeholder: "left or right"
|
|
}
|
|
]
|
|
},
|
|
FullscreenVideo: {
|
|
componentKey: "FullscreenVideo",
|
|
label: "Fullscreen video",
|
|
description: "Full-bleed video slide with optional overlay text.",
|
|
displayMode: "fullscreen",
|
|
fields: [
|
|
{
|
|
name: "header",
|
|
type: "text",
|
|
label: "Header",
|
|
placeholder: "Short header"
|
|
},
|
|
{
|
|
name: "videoSrc",
|
|
type: "video",
|
|
label: "Video",
|
|
placeholder: "https://...",
|
|
required: !0
|
|
},
|
|
{
|
|
name: "posterSrc",
|
|
type: "image",
|
|
label: "Poster image",
|
|
placeholder: "https://..."
|
|
},
|
|
{
|
|
name: "caption",
|
|
type: "textarea",
|
|
label: "Caption",
|
|
placeholder: "Short framing note"
|
|
}
|
|
]
|
|
},
|
|
FullscreenVideoTitle: {
|
|
componentKey: "FullscreenVideoTitle",
|
|
label: "Fullscreen video + title",
|
|
description: "Full-bleed video with one oversized overlaid title.",
|
|
displayMode: "fullscreen",
|
|
fields: [
|
|
{
|
|
name: "title",
|
|
type: "text",
|
|
label: "Title",
|
|
placeholder: "No need to be discrete"
|
|
},
|
|
{
|
|
name: "videoSrc",
|
|
type: "video",
|
|
label: "Video",
|
|
placeholder: "https://...",
|
|
required: !0
|
|
},
|
|
{
|
|
name: "posterSrc",
|
|
type: "image",
|
|
label: "Poster image",
|
|
placeholder: "https://..."
|
|
}
|
|
]
|
|
},
|
|
FullscreenVideoCenterCaption: {
|
|
componentKey: "FullscreenVideoCenterCaption",
|
|
label: "Fullscreen video + centered caption",
|
|
description: "Full-bleed video with one oversized centered caption.",
|
|
displayMode: "fullscreen",
|
|
fields: [
|
|
{
|
|
name: "caption",
|
|
type: "text",
|
|
label: "Caption",
|
|
placeholder: "Short centered statement"
|
|
},
|
|
{
|
|
name: "videoSrc",
|
|
type: "video",
|
|
label: "Video",
|
|
placeholder: "https://...",
|
|
required: !0
|
|
},
|
|
{
|
|
name: "posterSrc",
|
|
type: "image",
|
|
label: "Poster image",
|
|
placeholder: "https://..."
|
|
}
|
|
]
|
|
},
|
|
EquationFocus: {
|
|
componentKey: "EquationFocus",
|
|
label: "Equation focus",
|
|
description: "One display equation with a short annotation.",
|
|
displayMode: "fullscreen",
|
|
supportedDisplayModes: ["square", "fullscreen"],
|
|
fields: [
|
|
{
|
|
name: "header",
|
|
type: "text",
|
|
label: "Header",
|
|
placeholder: "Short header"
|
|
},
|
|
{
|
|
name: "title",
|
|
type: "text",
|
|
label: "Title",
|
|
placeholder: "What does the equation show?",
|
|
required: !0
|
|
},
|
|
{
|
|
name: "latexString",
|
|
type: "latex",
|
|
label: "LaTeX equation",
|
|
placeholder: "\\bar{x} = \\frac{1}{N}\\sum_{i=0}^{N} x_i",
|
|
required: !0
|
|
},
|
|
{
|
|
name: "annotation",
|
|
type: "textarea",
|
|
label: "Annotation",
|
|
placeholder: "One short explanation"
|
|
}
|
|
]
|
|
},
|
|
QuoteImage: {
|
|
componentKey: "QuoteImage",
|
|
label: "Quote + image",
|
|
description: "Strong quote paired with one image.",
|
|
displayMode: "fullscreen",
|
|
fields: [
|
|
{
|
|
name: "eyebrow",
|
|
type: "text",
|
|
label: "Eyebrow",
|
|
placeholder: "Optional eyebrow"
|
|
},
|
|
{
|
|
name: "quote",
|
|
type: "textarea",
|
|
label: "Quote",
|
|
placeholder: "Short quote",
|
|
required: !0
|
|
},
|
|
{
|
|
name: "attribution",
|
|
type: "text",
|
|
label: "Attribution",
|
|
placeholder: "Person or source"
|
|
},
|
|
{
|
|
name: "imageSrc",
|
|
type: "image",
|
|
label: "Image",
|
|
placeholder: "https://...",
|
|
required: !0
|
|
},
|
|
{
|
|
name: "imageAlt",
|
|
type: "text",
|
|
label: "Alt text",
|
|
placeholder: "Describe the image",
|
|
required: !0
|
|
},
|
|
{
|
|
name: "imagePosition",
|
|
type: "text",
|
|
label: "Image position",
|
|
placeholder: "left or right"
|
|
}
|
|
]
|
|
},
|
|
ChartSingle: {
|
|
componentKey: "ChartSingle",
|
|
label: "Single chart",
|
|
description: "One compact chart with a short framing line.",
|
|
displayMode: "fullscreen",
|
|
fields: [
|
|
{
|
|
name: "header",
|
|
type: "text",
|
|
label: "Header",
|
|
placeholder: "Short header"
|
|
},
|
|
{
|
|
name: "title",
|
|
type: "text",
|
|
label: "Title",
|
|
placeholder: "Chart title",
|
|
required: !0
|
|
},
|
|
{
|
|
name: "body",
|
|
type: "textarea",
|
|
label: "Body",
|
|
placeholder: "Short interpretation"
|
|
},
|
|
{
|
|
name: "points",
|
|
type: "lines",
|
|
label: "Data points",
|
|
placeholder: "Label: value",
|
|
description: "One point per line. Format each line as label: value."
|
|
}
|
|
]
|
|
},
|
|
ProcessFlow: {
|
|
componentKey: "ProcessFlow",
|
|
label: "Process flow",
|
|
description: "Short pipeline with 3 to 5 steps.",
|
|
displayMode: "fullscreen",
|
|
fields: [
|
|
{
|
|
name: "eyebrow",
|
|
type: "text",
|
|
label: "Eyebrow",
|
|
placeholder: "Optional eyebrow"
|
|
},
|
|
{
|
|
name: "title",
|
|
type: "text",
|
|
label: "Title",
|
|
placeholder: "Process title",
|
|
required: !0
|
|
},
|
|
{
|
|
name: "steps",
|
|
type: "lines",
|
|
label: "Steps",
|
|
placeholder: "One step per line",
|
|
required: !0
|
|
}
|
|
]
|
|
},
|
|
DefinitionCard: {
|
|
componentKey: "DefinitionCard",
|
|
label: "Definition card",
|
|
description: "Term, definition, and optional example.",
|
|
displayMode: "fullscreen",
|
|
fields: [
|
|
{
|
|
name: "header",
|
|
type: "text",
|
|
label: "Header",
|
|
placeholder: "Short header"
|
|
},
|
|
{
|
|
name: "term",
|
|
type: "text",
|
|
label: "Term",
|
|
placeholder: "Key term",
|
|
required: !0
|
|
},
|
|
{
|
|
name: "definition",
|
|
type: "textarea",
|
|
label: "Definition",
|
|
placeholder: "Short definition",
|
|
required: !0
|
|
},
|
|
{
|
|
name: "example",
|
|
type: "textarea",
|
|
label: "Example",
|
|
placeholder: "Optional example"
|
|
}
|
|
]
|
|
},
|
|
GlitchComponentFrame: {
|
|
componentKey: "GlitchComponentFrame",
|
|
label: "Interactive Glitch component",
|
|
description: "Hosted Glitch component embedded inside the slide surface.",
|
|
displayMode: "fullscreen",
|
|
fields: [
|
|
{
|
|
name: "header",
|
|
type: "text",
|
|
label: "Header",
|
|
placeholder: "Short header"
|
|
},
|
|
{
|
|
name: "componentId",
|
|
type: "text",
|
|
label: "Component id",
|
|
placeholder: "lightlane",
|
|
required: !0
|
|
},
|
|
{
|
|
name: "componentUrl",
|
|
type: "text",
|
|
label: "Component URL",
|
|
placeholder: "Optional hosted URL",
|
|
description: "Optional URL for iframe-hosted components. Leave empty for known local component ids."
|
|
},
|
|
{
|
|
name: "caption",
|
|
type: "textarea",
|
|
label: "Caption",
|
|
placeholder: "Short framing note"
|
|
}
|
|
]
|
|
}
|
|
}, Rt = Object.values(ge), be = Rt.flatMap(function(t) {
|
|
var r, e = (r = t.supportedDisplayModes) !== null && r !== void 0 ? r : [t.displayMode];
|
|
return e.map(function(i) {
|
|
return {
|
|
componentKey: t.componentKey,
|
|
label: t.label,
|
|
description: t.description,
|
|
displayMode: i,
|
|
fields: t.fields
|
|
};
|
|
});
|
|
}), jt = {
|
|
square: be.filter(function(t) {
|
|
return t.displayMode === "square";
|
|
}),
|
|
fullscreen: be.filter(function(t) {
|
|
return t.displayMode === "fullscreen";
|
|
})
|
|
}, Ut = {
|
|
SquareYellow: {
|
|
props: It
|
|
},
|
|
SquareVideo: {
|
|
props: qt
|
|
},
|
|
FullscreenSplit: {
|
|
props: Tt
|
|
},
|
|
FullscreenVideo: {
|
|
props: Ft
|
|
},
|
|
FullscreenVideoTitle: {
|
|
props: $t
|
|
},
|
|
FullscreenVideoCenterCaption: {
|
|
props: Dt
|
|
},
|
|
EquationFocus: {
|
|
props: Ot,
|
|
latexString: ""
|
|
},
|
|
QuoteImage: {
|
|
props: Et
|
|
},
|
|
ChartSingle: {
|
|
props: kt
|
|
},
|
|
ProcessFlow: {
|
|
props: Vt
|
|
},
|
|
DefinitionCard: {
|
|
props: Gt
|
|
},
|
|
GlitchComponentFrame: {
|
|
props: At
|
|
}
|
|
};
|
|
function Er(t) {
|
|
return ge[t];
|
|
}
|
|
function kr(t) {
|
|
return t ? jt[t] : be;
|
|
}
|
|
function Vr(t) {
|
|
return Ut[t];
|
|
}
|
|
function Kt(t) {
|
|
if (!Array.isArray(t) || t.length === 0)
|
|
return [
|
|
{ label: "Security", value: 72, color: "#111" },
|
|
{ label: "Trust", value: 58, color: "rgba(17, 17, 17, 0.72)" },
|
|
{ label: "Growth", value: 44, color: "rgba(17, 17, 17, 0.52)" }
|
|
];
|
|
const r = [];
|
|
return t.forEach((e, i) => {
|
|
if (!e || typeof e != "object")
|
|
return;
|
|
const c = e, a = Number(c.value);
|
|
r.push({
|
|
label: String(c.label ?? `Series ${i + 1}`),
|
|
value: Number.isFinite(a) ? Math.max(0, a) : 0,
|
|
color: typeof c.color == "string" ? c.color : void 0
|
|
});
|
|
}), r.length > 0 ? r : [
|
|
{ label: "Security", value: 72, color: "#111" },
|
|
{ label: "Trust", value: 58, color: "rgba(17, 17, 17, 0.72)" },
|
|
{ label: "Growth", value: 44, color: "rgba(17, 17, 17, 0.52)" }
|
|
];
|
|
}
|
|
function zt({ props: t, paused: r }) {
|
|
const e = t, i = String(e.header ?? e.eyebrow ?? "Chart single"), c = String(e.title ?? "One chart, one comparison"), a = String(e.body ?? "Use one chart for one contrast."), n = Kt(e.points), u = Math.max(...n.map((s) => s.value), 1);
|
|
return /* @__PURE__ */ l("article", { className: `chart-single ${r ? "chart-single--paused" : ""}`, children: /* @__PURE__ */ f("div", { className: "chart-single__content", children: [
|
|
/* @__PURE__ */ f("div", { className: "chart-single__copy", children: [
|
|
/* @__PURE__ */ l("p", { className: "chart-single__eyebrow", children: i }),
|
|
/* @__PURE__ */ l("h2", { className: "chart-single__title", children: c }),
|
|
/* @__PURE__ */ l("p", { className: "chart-single__body", children: a })
|
|
] }),
|
|
/* @__PURE__ */ l("div", { className: "chart-single__plot", role: "img", "aria-label": c, children: n.map((s) => /* @__PURE__ */ f("div", { className: "chart-single__row", children: [
|
|
/* @__PURE__ */ l("span", { className: "chart-single__label", children: s.label }),
|
|
/* @__PURE__ */ l("div", { className: "chart-single__bar-track", children: /* @__PURE__ */ l(
|
|
"div",
|
|
{
|
|
className: "chart-single__bar-fill",
|
|
style: {
|
|
width: `${s.value / u * 100}%`,
|
|
background: s.color ?? "#111"
|
|
}
|
|
}
|
|
) }),
|
|
/* @__PURE__ */ l("span", { className: "chart-single__value", children: s.value })
|
|
] }, s.label)) })
|
|
] }) });
|
|
}
|
|
const Bt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
__proto__: null,
|
|
default: zt
|
|
}, Symbol.toStringTag, { value: "Module" }));
|
|
function Ht({ props: t, paused: r }) {
|
|
const e = t, i = String(e.header ?? e.eyebrow ?? "Definition"), c = String(e.term ?? "Crystallization"), a = String(
|
|
e.definition ?? "An interactive talk becomes a fixed video."
|
|
), n = String(
|
|
e.example ?? "Same source. Cleaner final cut."
|
|
);
|
|
return /* @__PURE__ */ l(
|
|
"article",
|
|
{
|
|
className: `definition-card ${r ? "definition-card--paused" : ""}`,
|
|
children: /* @__PURE__ */ f("div", { className: "definition-card__content", children: [
|
|
/* @__PURE__ */ l("p", { className: "definition-card__eyebrow", children: i }),
|
|
/* @__PURE__ */ l("h2", { className: "definition-card__term", children: c }),
|
|
/* @__PURE__ */ l("p", { className: "definition-card__definition", children: a }),
|
|
/* @__PURE__ */ l("p", { className: "definition-card__example", children: n })
|
|
] })
|
|
}
|
|
);
|
|
}
|
|
const Yt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
__proto__: null,
|
|
default: Ht
|
|
}, Symbol.toStringTag, { value: "Module" })), We = "glitch-player-mathjax", Wt = "https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js";
|
|
let ee = null;
|
|
function Jt() {
|
|
var t;
|
|
return typeof window > "u" || typeof document > "u" || (t = window.MathJax) != null && t.typesetPromise ? Promise.resolve() : ee || (ee = new Promise((r, e) => {
|
|
var n;
|
|
window.MathJax = window.MathJax ?? {};
|
|
const i = document.getElementById(
|
|
We
|
|
), c = () => {
|
|
var s, d;
|
|
i && (i.dataset.loaded = "true");
|
|
const u = (d = (s = window.MathJax) == null ? void 0 : s.startup) == null ? void 0 : d.promise;
|
|
if (u) {
|
|
u.then(() => r()).catch(e);
|
|
return;
|
|
}
|
|
r();
|
|
};
|
|
if (i) {
|
|
if (i.dataset.loaded === "true" || (n = window.MathJax) != null && n.typesetPromise) {
|
|
c();
|
|
return;
|
|
}
|
|
i.addEventListener("load", c, { once: !0 }), i.addEventListener(
|
|
"error",
|
|
() => e(new Error("Failed to load MathJax.")),
|
|
{ once: !0 }
|
|
);
|
|
return;
|
|
}
|
|
const a = document.createElement("script");
|
|
a.id = We, a.async = !0, a.src = Wt, a.addEventListener(
|
|
"load",
|
|
() => {
|
|
a.dataset.loaded = "true", c();
|
|
},
|
|
{ once: !0 }
|
|
), a.addEventListener(
|
|
"error",
|
|
() => e(new Error("Failed to load MathJax.")),
|
|
{ once: !0 }
|
|
), document.head.appendChild(a);
|
|
}), ee);
|
|
}
|
|
function Qt({
|
|
props: t,
|
|
latexString: r,
|
|
displayMode: e,
|
|
paused: i
|
|
}) {
|
|
const c = t, a = String(c.header ?? c.eyebrow ?? "Equation focus"), n = String(c.title ?? "Definition of the mean"), u = String(
|
|
c.annotation ?? "The mean is the total of all observations divided by the number of observations."
|
|
), s = O(null), [d, P] = q(
|
|
"loading"
|
|
);
|
|
return y(() => {
|
|
const v = s.current, S = r ?? String.raw`\bar{x} = \frac{1}{N}\sum_{i=0}^{N} x_i`;
|
|
if (!v)
|
|
return;
|
|
let b = !1;
|
|
return P("loading"), Jt().then(async () => {
|
|
var _, A, j, V;
|
|
if (b || !s.current)
|
|
return;
|
|
const N = s.current;
|
|
N.textContent = `\\[${S}\\]`, (A = (_ = window.MathJax) == null ? void 0 : _.typesetClear) == null || A.call(_, [N]), await ((V = (j = window.MathJax) == null ? void 0 : j.typesetPromise) == null ? void 0 : V.call(j, [N])), b || P("ready");
|
|
}).catch(() => {
|
|
!b && s.current && (s.current.textContent = S, P("error"));
|
|
}), () => {
|
|
var N, _;
|
|
b = !0, s.current && ((_ = (N = window.MathJax) == null ? void 0 : N.typesetClear) == null || _.call(N, [s.current]));
|
|
};
|
|
}, [r]), /* @__PURE__ */ l(
|
|
"article",
|
|
{
|
|
className: `equation-focus equation-focus--${e} ${i ? "equation-focus--paused" : ""}`,
|
|
children: /* @__PURE__ */ f("div", { className: "equation-focus__content", children: [
|
|
/* @__PURE__ */ l("p", { className: "equation-focus__eyebrow", children: a }),
|
|
/* @__PURE__ */ l("h2", { className: "equation-focus__title", children: n }),
|
|
/* @__PURE__ */ l("div", { className: "equation-focus__equation-frame", children: /* @__PURE__ */ l(
|
|
"div",
|
|
{
|
|
ref: s,
|
|
className: `equation-focus__equation equation-focus__equation--mathjax ${d === "loading" ? "equation-focus__equation--loading" : ""} ${d === "error" ? "equation-focus__equation--error" : ""}`,
|
|
"aria-live": "polite"
|
|
}
|
|
) }),
|
|
/* @__PURE__ */ l("p", { className: "equation-focus__annotation", children: u })
|
|
] })
|
|
}
|
|
);
|
|
}
|
|
const Xt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
__proto__: null,
|
|
default: Qt
|
|
}, Symbol.toStringTag, { value: "Module" }));
|
|
function gt({ props: t, paused: r }) {
|
|
const e = t, i = String(e.eyebrow ?? "Fullscreen split"), c = String(e.title ?? "One image. One idea."), a = String(e.body ?? "Fullscreen keeps the seam invisible."), n = String(
|
|
e.imageSrc ?? "https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=1200&q=80"
|
|
), u = String(e.imageAlt ?? c), s = e.imagePosition === "right" ? "right" : "left";
|
|
return /* @__PURE__ */ f(
|
|
"article",
|
|
{
|
|
className: `fullscreen-split ${r ? "fullscreen-split--paused" : ""} fullscreen-split--image-${s}`,
|
|
children: [
|
|
/* @__PURE__ */ l("div", { className: "fullscreen-split__panel fullscreen-split__panel--image", children: /* @__PURE__ */ l("img", { className: "fullscreen-split__image", src: n, alt: u }) }),
|
|
/* @__PURE__ */ l("div", { className: "fullscreen-split__panel fullscreen-split__panel--text", children: /* @__PURE__ */ f("div", { className: "fullscreen-split__text", children: [
|
|
/* @__PURE__ */ l("p", { className: "fullscreen-split__eyebrow", children: i }),
|
|
/* @__PURE__ */ l("h2", { className: "fullscreen-split__title", children: c }),
|
|
/* @__PURE__ */ l("p", { className: "fullscreen-split__body", children: a })
|
|
] }) })
|
|
]
|
|
}
|
|
);
|
|
}
|
|
const Zt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
__proto__: null,
|
|
default: gt
|
|
}, Symbol.toStringTag, { value: "Module" }));
|
|
function Mt({
|
|
props: t,
|
|
paused: r,
|
|
onMediaLoadingChange: e
|
|
}) {
|
|
const i = t, c = String(i.header ?? "").trim(), a = String(i.caption ?? "").trim(), n = String(i.videoSrc ?? "").trim(), u = String(i.posterSrc ?? "").trim(), s = O(null);
|
|
return y(() => {
|
|
const d = s.current;
|
|
if (!d)
|
|
return;
|
|
if (r) {
|
|
d.pause();
|
|
return;
|
|
}
|
|
const P = d.play();
|
|
P && typeof P.catch == "function" && P.catch(() => {
|
|
});
|
|
}, [r, n]), y(() => {
|
|
if (!n) {
|
|
e == null || e(!1);
|
|
return;
|
|
}
|
|
return e == null || e(!0), () => {
|
|
e == null || e(!1);
|
|
const d = s.current;
|
|
d && (d.pause(), d.currentTime = 0);
|
|
};
|
|
}, [e, n]), /* @__PURE__ */ f(
|
|
"article",
|
|
{
|
|
className: `fullscreen-video ${r ? "fullscreen-video--paused" : ""}`,
|
|
children: [
|
|
/* @__PURE__ */ l(
|
|
"video",
|
|
{
|
|
ref: s,
|
|
className: "fullscreen-video__media",
|
|
src: n,
|
|
poster: u || void 0,
|
|
autoPlay: !0,
|
|
playsInline: !0,
|
|
preload: "metadata",
|
|
controls: !1,
|
|
onLoadedData: () => e == null ? void 0 : e(!1),
|
|
onCanPlay: () => e == null ? void 0 : e(!1),
|
|
onPlaying: () => e == null ? void 0 : e(!1),
|
|
onLoadStart: () => e == null ? void 0 : e(!0),
|
|
onWaiting: () => e == null ? void 0 : e(!0),
|
|
onStalled: () => e == null ? void 0 : e(!0),
|
|
onSuspend: () => e == null ? void 0 : e(!1),
|
|
onEnded: () => e == null ? void 0 : e(!1),
|
|
onError: () => e == null ? void 0 : e(!1)
|
|
}
|
|
),
|
|
c ? /* @__PURE__ */ l("div", { className: "fullscreen-video__chrome", children: /* @__PURE__ */ l("p", { className: "fullscreen-video__header", children: c }) }) : null,
|
|
a ? /* @__PURE__ */ l("p", { className: "fullscreen-video__caption", children: a }) : null
|
|
]
|
|
}
|
|
);
|
|
}
|
|
const Ct = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
__proto__: null,
|
|
default: Mt
|
|
}, Symbol.toStringTag, { value: "Module" }));
|
|
function Lt({
|
|
props: t,
|
|
paused: r,
|
|
onMediaLoadingChange: e
|
|
}) {
|
|
const i = t, c = String(i.caption ?? "").trim(), a = String(i.videoSrc ?? "").trim(), n = String(i.posterSrc ?? "").trim(), u = O(null);
|
|
return y(() => {
|
|
const s = u.current;
|
|
if (!s)
|
|
return;
|
|
if (r) {
|
|
s.pause();
|
|
return;
|
|
}
|
|
const d = s.play();
|
|
d && typeof d.catch == "function" && d.catch(() => {
|
|
});
|
|
}, [r, a]), y(() => {
|
|
if (!a) {
|
|
e == null || e(!1);
|
|
return;
|
|
}
|
|
return e == null || e(!0), () => {
|
|
e == null || e(!1);
|
|
const s = u.current;
|
|
s && (s.pause(), s.currentTime = 0);
|
|
};
|
|
}, [e, a]), /* @__PURE__ */ f(
|
|
"article",
|
|
{
|
|
className: `fullscreen-video-center-caption ${r ? "fullscreen-video-center-caption--paused" : ""}`,
|
|
children: [
|
|
/* @__PURE__ */ l(
|
|
"video",
|
|
{
|
|
ref: u,
|
|
className: "fullscreen-video-center-caption__media",
|
|
src: a,
|
|
poster: n || void 0,
|
|
autoPlay: !0,
|
|
playsInline: !0,
|
|
preload: "metadata",
|
|
controls: !1,
|
|
onLoadedData: () => e == null ? void 0 : e(!1),
|
|
onCanPlay: () => e == null ? void 0 : e(!1),
|
|
onPlaying: () => e == null ? void 0 : e(!1),
|
|
onLoadStart: () => e == null ? void 0 : e(!0),
|
|
onWaiting: () => e == null ? void 0 : e(!0),
|
|
onStalled: () => e == null ? void 0 : e(!0),
|
|
onSuspend: () => e == null ? void 0 : e(!1),
|
|
onEnded: () => e == null ? void 0 : e(!1),
|
|
onError: () => e == null ? void 0 : e(!1)
|
|
}
|
|
),
|
|
c ? /* @__PURE__ */ l("div", { className: "fullscreen-video-center-caption__overlay", children: /* @__PURE__ */ l("p", { className: "fullscreen-video-center-caption__caption", children: c }) }) : null
|
|
]
|
|
}
|
|
);
|
|
}
|
|
const er = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
__proto__: null,
|
|
default: Lt
|
|
}, Symbol.toStringTag, { value: "Module" })), tr = "No need to be discrete";
|
|
function rr({
|
|
props: t,
|
|
paused: r,
|
|
onMediaLoadingChange: e
|
|
}) {
|
|
const i = t, c = String(i.title ?? "").trim() || tr, a = String(i.videoSrc ?? "").trim(), n = String(i.posterSrc ?? "").trim(), u = O(null);
|
|
return y(() => {
|
|
const s = u.current;
|
|
if (!s)
|
|
return;
|
|
if (r) {
|
|
s.pause();
|
|
return;
|
|
}
|
|
const d = s.play();
|
|
d && typeof d.catch == "function" && d.catch(() => {
|
|
});
|
|
}, [r, a]), y(() => {
|
|
if (!a) {
|
|
e == null || e(!1);
|
|
return;
|
|
}
|
|
return e == null || e(!0), () => {
|
|
e == null || e(!1);
|
|
const s = u.current;
|
|
s && (s.pause(), s.currentTime = 0);
|
|
};
|
|
}, [e, a]), /* @__PURE__ */ f(
|
|
"article",
|
|
{
|
|
className: `fullscreen-video-title ${r ? "fullscreen-video-title--paused" : ""}`,
|
|
children: [
|
|
/* @__PURE__ */ l(
|
|
"video",
|
|
{
|
|
ref: u,
|
|
className: "fullscreen-video-title__media",
|
|
src: a,
|
|
poster: n || void 0,
|
|
autoPlay: !0,
|
|
playsInline: !0,
|
|
preload: "metadata",
|
|
controls: !1,
|
|
onLoadedData: () => e == null ? void 0 : e(!1),
|
|
onCanPlay: () => e == null ? void 0 : e(!1),
|
|
onPlaying: () => e == null ? void 0 : e(!1),
|
|
onLoadStart: () => e == null ? void 0 : e(!0),
|
|
onWaiting: () => e == null ? void 0 : e(!0),
|
|
onStalled: () => e == null ? void 0 : e(!0),
|
|
onSuspend: () => e == null ? void 0 : e(!1),
|
|
onEnded: () => e == null ? void 0 : e(!1),
|
|
onError: () => e == null ? void 0 : e(!1)
|
|
}
|
|
),
|
|
/* @__PURE__ */ l("div", { className: "fullscreen-video-title__overlay", children: /* @__PURE__ */ l("h2", { className: "fullscreen-video-title__title", children: c }) })
|
|
]
|
|
}
|
|
);
|
|
}
|
|
const lr = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
__proto__: null,
|
|
default: rr
|
|
}, Symbol.toStringTag, { value: "Module" }));
|
|
function ir(t) {
|
|
return t.replace(/\/+$/, "");
|
|
}
|
|
function sr() {
|
|
return ir(
|
|
"/glitch"
|
|
);
|
|
}
|
|
function cr(t) {
|
|
return `glitch_${t.replace(/-/g, "_")}`;
|
|
}
|
|
function ar(t, r) {
|
|
const e = r == null ? void 0 : r.trim();
|
|
if (e)
|
|
return e;
|
|
const i = sr(), c = cr(t);
|
|
return `${i}/${c}/index.html`;
|
|
}
|
|
function or({
|
|
props: t,
|
|
displayMode: r,
|
|
paused: e
|
|
}) {
|
|
const i = t, c = String(i.header ?? "Interactive component"), a = String(i.componentId ?? "glitch-component"), n = ar(
|
|
a,
|
|
String(i.componentUrl ?? "").trim()
|
|
), u = String(
|
|
i.caption ?? "Explore the model directly inside the slide."
|
|
);
|
|
return /* @__PURE__ */ f(
|
|
"article",
|
|
{
|
|
className: `glitch-component-frame glitch-component-frame--${r} ${e ? "glitch-component-frame--paused" : ""}`,
|
|
children: [
|
|
/* @__PURE__ */ f("div", { className: "glitch-component-frame__chrome", children: [
|
|
/* @__PURE__ */ l("p", { className: "glitch-component-frame__eyebrow", children: c }),
|
|
/* @__PURE__ */ l("p", { className: "glitch-component-frame__id", children: a })
|
|
] }),
|
|
/* @__PURE__ */ l("div", { className: "glitch-component-frame__viewport", children: /* @__PURE__ */ l(
|
|
"iframe",
|
|
{
|
|
className: "glitch-component-frame__iframe",
|
|
src: n,
|
|
title: c || a,
|
|
loading: "lazy",
|
|
allow: "fullscreen; autoplay; xr-spatial-tracking",
|
|
sandbox: "allow-scripts allow-same-origin allow-pointer-lock allow-popups allow-forms"
|
|
}
|
|
) }),
|
|
/* @__PURE__ */ l("p", { className: "glitch-component-frame__caption", children: u })
|
|
]
|
|
}
|
|
);
|
|
}
|
|
const nr = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
__proto__: null,
|
|
default: or
|
|
}, Symbol.toStringTag, { value: "Module" }));
|
|
function ur(t) {
|
|
return !Array.isArray(t) || t.length === 0 ? [
|
|
"Record talking-head segments",
|
|
"Align transcript to timeline",
|
|
"Generate slide variants",
|
|
"Play, compare, and refine"
|
|
] : t.map((r) => String(r));
|
|
}
|
|
function dr({ props: t, paused: r }) {
|
|
const e = t, i = String(e.eyebrow ?? "Process flow"), c = String(e.title ?? "How it becomes a video"), a = ur(e.steps);
|
|
return /* @__PURE__ */ l("article", { className: `process-flow ${r ? "process-flow--paused" : ""}`, children: /* @__PURE__ */ f("div", { className: "process-flow__content", children: [
|
|
/* @__PURE__ */ l("p", { className: "process-flow__eyebrow", children: i }),
|
|
/* @__PURE__ */ l("h2", { className: "process-flow__title", children: c }),
|
|
/* @__PURE__ */ l("div", { className: "process-flow__steps", children: a.map((n, u) => /* @__PURE__ */ f("div", { className: "process-flow__step", children: [
|
|
/* @__PURE__ */ l("span", { className: "process-flow__index", children: u + 1 }),
|
|
/* @__PURE__ */ l("p", { className: "process-flow__label", children: n })
|
|
] }, `${u}-${n}`)) })
|
|
] }) });
|
|
}
|
|
const pr = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
__proto__: null,
|
|
default: dr
|
|
}, Symbol.toStringTag, { value: "Module" }));
|
|
function mr({ props: t, paused: r }) {
|
|
const e = t, i = String(e.eyebrow ?? "Quote image"), c = String(
|
|
e.quote ?? "Good explanation makes hard ideas feel graspable."
|
|
), a = String(e.attribution ?? "Glitch University"), n = String(
|
|
e.imageSrc ?? "https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=1200&q=80"
|
|
), u = String(e.imageAlt ?? c), s = e.imagePosition === "right" ? "right" : "left";
|
|
return /* @__PURE__ */ f(
|
|
"article",
|
|
{
|
|
className: `quote-image ${r ? "quote-image--paused" : ""} quote-image--image-${s}`,
|
|
children: [
|
|
/* @__PURE__ */ l("div", { className: "quote-image__panel quote-image__panel--image", children: /* @__PURE__ */ l("img", { className: "quote-image__image", src: n, alt: u }) }),
|
|
/* @__PURE__ */ l("div", { className: "quote-image__panel quote-image__panel--quote", children: /* @__PURE__ */ f("div", { className: "quote-image__content", children: [
|
|
/* @__PURE__ */ l("p", { className: "quote-image__eyebrow", children: i }),
|
|
/* @__PURE__ */ f("blockquote", { className: "quote-image__quote", children: [
|
|
'"',
|
|
c,
|
|
'"'
|
|
] }),
|
|
/* @__PURE__ */ l("p", { className: "quote-image__attribution", children: a })
|
|
] }) })
|
|
]
|
|
}
|
|
);
|
|
}
|
|
const fr = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
__proto__: null,
|
|
default: mr
|
|
}, Symbol.toStringTag, { value: "Module" }));
|
|
function hr({
|
|
props: t,
|
|
paused: r,
|
|
onMediaLoadingChange: e
|
|
}) {
|
|
const i = t, c = String(i.videoSrc ?? "").trim(), a = String(i.posterSrc ?? "").trim(), n = O(null);
|
|
return y(() => {
|
|
const u = n.current;
|
|
if (!u)
|
|
return;
|
|
if (r) {
|
|
u.pause();
|
|
return;
|
|
}
|
|
const s = u.play();
|
|
s && typeof s.catch == "function" && s.catch(() => {
|
|
});
|
|
}, [r, c]), y(() => {
|
|
if (!c) {
|
|
e == null || e(!1);
|
|
return;
|
|
}
|
|
return e == null || e(!0), () => {
|
|
e == null || e(!1);
|
|
const u = n.current;
|
|
u && (u.pause(), u.currentTime = 0);
|
|
};
|
|
}, [e, c]), /* @__PURE__ */ l(
|
|
"article",
|
|
{
|
|
className: `square-video ${r ? "square-video--paused" : ""}`,
|
|
children: /* @__PURE__ */ l("div", { className: "square-video__frame", children: /* @__PURE__ */ l(
|
|
"video",
|
|
{
|
|
ref: n,
|
|
className: "square-video__media",
|
|
src: c,
|
|
poster: a || void 0,
|
|
autoPlay: !0,
|
|
preload: "metadata",
|
|
playsInline: !0,
|
|
controls: !1,
|
|
onLoadedData: () => e == null ? void 0 : e(!1),
|
|
onCanPlay: () => e == null ? void 0 : e(!1),
|
|
onPlaying: () => e == null ? void 0 : e(!1),
|
|
onLoadStart: () => e == null ? void 0 : e(!0),
|
|
onWaiting: () => e == null ? void 0 : e(!0),
|
|
onStalled: () => e == null ? void 0 : e(!0),
|
|
onSuspend: () => e == null ? void 0 : e(!1),
|
|
onEnded: () => e == null ? void 0 : e(!1),
|
|
onError: () => e == null ? void 0 : e(!1)
|
|
}
|
|
) })
|
|
}
|
|
);
|
|
}
|
|
const Sr = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
__proto__: null,
|
|
default: hr
|
|
}, Symbol.toStringTag, { value: "Module" }));
|
|
function yr({ props: t, paused: r }) {
|
|
const e = t, i = String(e.header ?? "Square yellow"), c = String(
|
|
e.imageSrc ?? "https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=1200&q=80"
|
|
), a = String(e.imageAlt ?? i);
|
|
return /* @__PURE__ */ l(
|
|
"article",
|
|
{
|
|
className: `square-slide square-slide--yellow ${r ? "square-slide--paused" : ""}`,
|
|
children: /* @__PURE__ */ l("div", { className: "square-slide__image-frame", children: /* @__PURE__ */ l("img", { className: "square-slide__image", src: c, alt: a }) })
|
|
}
|
|
);
|
|
}
|
|
const br = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
__proto__: null,
|
|
default: yr
|
|
}, Symbol.toStringTag, { value: "Module" }));
|
|
export {
|
|
Xe as GlitchPlayer,
|
|
Pt as GlitchSlideRenderer,
|
|
$r as GlitchSlideThumbnail,
|
|
Fr as LecturePlayer,
|
|
Tr as PresentationPlayer,
|
|
Be as createDeviceContext,
|
|
qr as createSessionId,
|
|
Ir as defaultSlideRegistry,
|
|
kr as getSlideTemplateAvailability,
|
|
Er as getSlideTemplateDefinition,
|
|
Vr as getSlideTemplateDraft,
|
|
jt as slideTemplateAvailabilityByDisplayMode,
|
|
be as slideTemplateAvailabilityList,
|
|
Or as slideTemplateBudgets,
|
|
Rt as slideTemplateDefinitionList,
|
|
ge as slideTemplateDefinitions,
|
|
Ut as slideTemplateDrafts,
|
|
Dr as slideTemplateKeys
|
|
};
|