@arcblock/terminal 3.1.24 → 3.1.26

package/lib/Player.js

@@ -1,223 +1,233 @@
-import { jsxs as S, jsx as a } from "react/jsx-runtime";
-import { useRef as g, useReducer as H, useCallback as f, useEffect as q } from "react";
-import l from "prop-types";
-import F from "lodash/isUndefined";
+import { jsxs as g, jsx as t } from "react/jsx-runtime";
+import { useRef as h, useReducer as H, useCallback as d, useEffect as q } from "react";
+import c from "prop-types";
+import S from "lodash/isUndefined";
 import P from "lodash/noop";
 import Y from "./Terminal.js";
 import { PlayerRoot as _ } from "./styles.js";
-import { defaultOptions as U, formatFrames as X, defaultState as $, findFrameAt as D, getPlayerClass as G, getFrameClass as K, formatTime as Q } from "./util.js";
+import { defaultOptions as U, formatFrames as X, defaultState as $, findFrameAt as z, getPlayerClass as G, getFrameClass as K, formatTime as Q } from "./util.js";
 const se = 8;
-function V({ ...z }) {
-  const s = Object.assign({}, z);
-  F(s.onComplete) && (s.onComplete = P), F(s.onStart) && (s.onStart = P), F(s.onStop) && (s.onStop = P), F(s.onPause) && (s.onPause = P), F(s.onTick) && (s.onTick = P), F(s.onJump) && (s.onJump = P);
-  const r = Object.assign({}, U, s.options), { frames: c, totalDuration: h } = X(s.frames, r), J = {
-    cols: r.cols,
-    rows: r.rows,
-    cursorStyle: r.cursorStyle,
-    cursorBlink: r.cursorBlink ?? !0,
-    fontFamily: r.fontFamily,
-    fontSize: r.fontSize,
-    lineHeight: r.lineHeight,
-    letterSpacing: r.letterSpacing,
+function V({ ...J }) {
+  const s = Object.assign({}, J);
+  S(s.onComplete) && (s.onComplete = P), S(s.onStart) && (s.onStart = P), S(s.onStop) && (s.onStop = P), S(s.onPause) && (s.onPause = P), S(s.onTick) && (s.onTick = P), S(s.onJump) && (s.onJump = P);
+  const e = Object.assign({}, U, s.options), { frames: o, totalDuration: v } = X(s.frames, e), I = {
+    cols: e.cols,
+    rows: e.rows,
+    cursorStyle: e.cursorStyle,
+    cursorBlink: e.cursorBlink ?? !0,
+    fontFamily: e.fontFamily,
+    fontSize: e.fontSize,
+    lineHeight: e.lineHeight,
+    letterSpacing: e.letterSpacing,
     allowTransparency: !0,
     scrollback: 0,
-    theme: r.enableTheme ? r.theme : {}
-  }, I = (e, n) => {
-    switch (n.type) {
+    theme: e.enableTheme ? e.theme : {}
+  }, O = (r, a) => {
+    switch (a.type) {
       case "jump":
-        return { ...e, ...n.payload };
+        return { ...r, ...a.payload };
       case "start":
-        return { ...e, isStarted: !0, lastTickTime: Date.now() };
+        return { ...r, isStarted: !0, lastTickTime: Date.now() };
       case "play":
-        return { ...e, isPlaying: !0, lastTickTime: Date.now(), ...n.payload };
+        return { ...r, isPlaying: !0, lastTickTime: Date.now(), ...a.payload };
       case "pause":
-        return { ...e, isPlaying: !1, ...n.payload };
+        return { ...r, isPlaying: !1, ...a.payload };
       case "tickStart":
-        return { ...e, isRendering: !0, lastTickTime: Date.now(), ...n.payload };
+        return { ...r, isRendering: !0, lastTickTime: Date.now(), ...a.payload };
       case "tickEnd":
-        return { ...e, isRendering: !1, lastTickTime: Date.now(), ...n.payload };
+        return { ...r, isRendering: !1, lastTickTime: Date.now(), ...a.payload };
       case "reset":
-        return { ...e, currentFrame: -1, currentTime: 0, ...n.payload };
+        return { ...r, currentFrame: -1, currentTime: 0, ...a.payload };
       default:
-        return { ...e, lastTickTime: Date.now(), ...n.payload };
+        return { ...r, lastTickTime: Date.now(), ...a.payload };
     }
-  }, i = g(null), N = g(null), v = g(null), d = g(null), p = g(null), A = g(!1), [t, u] = H(I, $), j = f(
-    (e) => new Promise((n) => {
-      const o = c[e];
-      o && o.content && i.current ? (t.requireReset && i.current.reset(), i.current.write(o.content, () => {
-        n();
-      })) : n();
+  }, i = h(null), w = h(null), F = h(null), f = h(null), p = h(null), A = h(!1), [n, u] = H(O, $), j = d(
+    (r) => new Promise((a) => {
+      const l = o[r];
+      l && l.content && i.current ? (n.requireReset && i.current.reset(), i.current.write(l.content, () => {
+        a();
+      })) : a();
     }),
-    [c, t.requireReset]
-  ), E = f(
-    (e) => {
-      const n = c[e];
-      n && n.content && i.current && (t.requireReset && i.current.reset(), i.current.write(n.content));
+    [o, n.requireReset]
+  ), E = d(
+    (r) => {
+      const a = o[r];
+      a && a.content && i.current && (n.requireReset && i.current.reset(), i.current.write(a.content));
     },
-    [c, t.requireReset]
-  ), m = f(
-    (e) => {
-      typeof s[e] == "function" && s[e]({ state: t, frames: c, options: r });
+    [o, n.requireReset]
+  ), m = d(
+    (r) => {
+      typeof s[r] == "function" && s[r]({ state: n, frames: o, options: e });
     },
-    [s, t, c, r]
-  ), R = f(
-    (e) => {
+    [s, n, o, e]
+  ), R = d(
+    (r) => {
       if (!i.current) return;
       i.current.reset();
-      const n = D(c, e);
-      if (n >= 0)
-        for (let o = 0; o <= n; o++)
-          E(o);
+      const a = z(o, r);
+      if (a >= 0)
+        for (let l = 0; l <= a; l++)
+          E(l);
     },
-    [c, E]
-  ), M = f(
-    (e) => {
-      if (!N.current || !i.current || !t.isStarted)
+    [o, E]
+  ), L = d(
+    (r) => {
+      if (!w.current || !i.current || !n.isStarted)
         return !1;
-      const n = N.current.getBoundingClientRect().width, o = e.nativeEvent.offsetX, T = Math.floor(h * o / n), b = D(c, T), w = t.isPlaying;
+      const a = w.current.getBoundingClientRect().width, l = r.nativeEvent.offsetX, T = Math.floor(v * l / a), b = z(o, T), N = n.isPlaying;
       return u({
         type: "jump",
         payload: {
           currentTime: T,
           currentFrame: b,
-          isPlaying: w
+          isPlaying: N
           // Keep the same playing state
         }
       }), p.current = null, R(T), m("onJump"), !1;
     },
-    [t.isStarted, t.isPlaying, h, c, R, m]
-  ), O = f(() => (t.currentFrame >= c.length - 1 ? (i.current.resize(), u({ type: "reset", payload: { currentFrame: -1, currentTime: 0 } }), i.current && i.current.reset(), p.current = null, u({ type: "play", payload: { currentFrame: -1, currentTime: 0 } })) : (p.current = null, u({ type: "play" })), m("onPlay"), !1), [t.currentFrame, c.length, m]), k = f(() => (t.isStarted === !1 && (i.current.resize(), u({ type: "start" }), i.current && i.current.reset()), p.current = null, u({ type: "play", payload: { currentFrame: -1, currentTime: 0 } }), m("onStart"), !1), [t.isStarted, m]), L = f(() => (u({ type: "pause" }), m("onPause"), !1), [m]);
+    [n.isStarted, n.isPlaying, v, o, R, m]
+  ), M = d(() => (n.currentFrame >= o.length - 1 ? (i.current.resize(), u({ type: "reset", payload: { currentFrame: -1, currentTime: 0 } }), i.current && i.current.reset(), p.current = null, u({ type: "play", payload: { currentFrame: -1, currentTime: 0 } })) : (p.current = null, u({ type: "play" })), m("onPlay"), !1), [n.currentFrame, o.length, m]), k = d(() => (n.isStarted === !1 && (i.current.resize(), u({ type: "start" }), i.current && i.current.reset()), p.current = null, u({ type: "play", payload: { currentFrame: -1, currentTime: 0 } }), m("onStart"), !1), [n.isStarted, m]), D = d(() => (u({ type: "pause" }), m("onPause"), !1), [m]);
   q(() => {
-    if (!v.current || !r.autoplay || A.current)
+    if (!F.current || !e.autoplay || A.current)
       return;
-    const e = new IntersectionObserver(
-      (n) => {
-        const [o] = n;
-        o.isIntersecting && !t.isStarted && (k(), A.current = !0, e.unobserve(v.current), e.disconnect());
+    const r = new IntersectionObserver(
+      (a) => {
+        const [l] = a;
+        l.isIntersecting && !n.isStarted && (k(), A.current = !0, r.unobserve(F.current), r.disconnect());
       },
       {
-        threshold: 0.1,
-        // Trigger when 10% of the element is visible
-        rootMargin: "0px 0px 0px 0px"
-        // Add some margin to avoid triggering too early
+        threshold: e.autoplayThreshold,
+        // 可配置的可见度阈值
+        rootMargin: e.autoplayRootMargin
+        // 可配置的根边距
       }
     );
-    return e.observe(v.current), () => {
-      e.disconnect();
+    return r.observe(F.current), () => {
+      r.disconnect();
     };
-  }, [r.autoplay, t.isStarted, k]), q(() => {
-    i.current && (i.current.focus(), r.autoplay || R(Math.min(Math.abs(r.thumbnailTime), h)));
+  }, [e.autoplay, e.autoplayThreshold, e.autoplayRootMargin, n.isStarted, k]), q(() => {
+    i.current && (i.current.focus(), e.autoplay || R(Math.min(Math.abs(e.thumbnailTime), v)));
   }, []);
-  const x = g(t);
-  x.current = t;
-  const B = f(async () => {
-    const e = x.current;
-    if (!e.isPlaying || e.isRendering)
+  const x = h(n);
+  x.current = n;
+  const C = d(async () => {
+    const r = x.current;
+    if (!r.isPlaying || r.isRendering)
       return;
-    const n = performance.now();
+    const a = performance.now();
     if (!p.current) {
-      const y = e.currentFrame >= 0 && c[e.currentFrame]?.startTime || 0;
-      p.current = n - y;
+      const y = r.currentFrame >= 0 && o[r.currentFrame]?.startTime || 0;
+      p.current = a - y;
     }
-    const o = n - p.current, { currentFrame: T } = e, b = T + 1;
-    if (T >= c.length - 1) {
-      if (m("onComplete"), r.repeat) {
-        p.current = n, u({ type: "reset", payload: { currentTime: 0, currentFrame: -1 } });
+    const l = a - p.current, { currentFrame: T } = r, b = T + 1;
+    if (T >= o.length - 1) {
+      if (m("onComplete"), e.repeat) {
+        p.current = a, u({ type: "reset", payload: { currentTime: 0, currentFrame: -1 } });
         return;
       }
       const y = {
-        currentTime: h,
-        currentFrame: c.length - 1,
+        currentTime: v,
+        currentFrame: o.length - 1,
         requireReset: !0,
         isStarted: !1
       };
       u({ type: "pause", payload: y }), p.current = null;
       return;
     }
-    const w = c[b];
-    if (!w) {
-      t.isPlaying && (d.current = requestAnimationFrame(B));
+    const N = o[b];
+    if (!N) {
+      n.isPlaying && (f.current = requestAnimationFrame(C));
       return;
     }
-    const C = w.startTime || 0;
-    if (o >= C) {
+    const B = N.startTime || 0;
+    if (l >= B) {
       u({
         type: "tickStart",
         payload: {
-          currentTime: C,
+          currentTime: B,
           currentFrame: b
         }
       });
       try {
         await j(b);
         const y = {
-          currentTime: C,
+          currentTime: B,
           currentFrame: b
         };
-        e.requireReset && (y.requireReset = !1), u({ type: "tickEnd", payload: y }), m("onTick");
+        r.requireReset && (y.requireReset = !1), u({ type: "tickEnd", payload: y }), m("onTick");
       } catch (y) {
         console.error("Frame rendering error:", y);
       }
     } else
-      u({ type: "tick", payload: { currentTime: o } });
-  }, [c, j, m, r.repeat, h]);
+      u({ type: "tick", payload: { currentTime: l } });
+  }, [o, j, m, e.repeat, v]);
   return q(() => {
-    let e = !0;
-    const n = async () => {
-      for (; e && x.current.isPlaying; )
-        await new Promise((o) => {
-          d.current = requestAnimationFrame(o);
-        }), e && x.current.isPlaying && await B();
+    let r = !0;
+    const a = async () => {
+      for (; r && x.current.isPlaying; )
+        await new Promise((l) => {
+          f.current = requestAnimationFrame(l);
+        }), r && x.current.isPlaying && await C();
     };
-    return t.isPlaying ? n() : (d.current && (cancelAnimationFrame(d.current), d.current = null), p.current = null), () => {
-      e = !1, d.current && (cancelAnimationFrame(d.current), d.current = null);
+    return n.isPlaying ? a() : (f.current && (cancelAnimationFrame(f.current), f.current = null), p.current = null), () => {
+      r = !1, f.current && (cancelAnimationFrame(f.current), f.current = null);
     };
-  }, [t.isPlaying, B]), r.controls && (r.frameBox.title = null, r.frameBox.type = null, r.frameBox.style = {}, r.theme?.background === "transparent" ? r.frameBox.style.background = "black" : r.theme?.background && (r.frameBox.style.background = r.theme.background), r.frameBox.style.padding = "10px", r.frameBox.style.paddingBottom = "40px"), /* @__PURE__ */ S(_, { className: G(r, t), ref: v, children: [
-    /* @__PURE__ */ a("div", { className: "cover", onClick: k }),
-    /* @__PURE__ */ a("div", { className: "start", onClick: k, children: /* @__PURE__ */ S("svg", { style: { enableBackground: "new 0 0 30 30" }, viewBox: "0 0 30 30", children: [
-      /* @__PURE__ */ a("polygon", { points: "6.583,3.186 5,4.004 5,15 26,15 26.483,14.128 " }),
-      /* @__PURE__ */ a("polygon", { points: "6.583,26.814 5,25.996 5,15 26,15 26.483,15.872 " }),
-      /* @__PURE__ */ a("circle", { cx: "26", cy: "15", r: "1" }),
-      /* @__PURE__ */ a("circle", { cx: "6", cy: "4", r: "1" }),
-      /* @__PURE__ */ a("circle", { cx: "6", cy: "26", r: "1" })
-    ] }) }),
-    /* @__PURE__ */ a("div", { className: "terminal", children: /* @__PURE__ */ S("div", { className: K(r), style: r.frameBox.style || {}, children: [
-      /* @__PURE__ */ S("div", { className: "terminal-titlebar", children: [
-        /* @__PURE__ */ S("div", { className: "buttons", children: [
-          /* @__PURE__ */ a("div", { className: "close-button" }),
-          /* @__PURE__ */ a("div", { className: "minimize-button" }),
-          /* @__PURE__ */ a("div", { className: "maximize-button" })
+  }, [n.isPlaying, C]), e.controls && (e.frameBox.title = null, e.frameBox.type = null, e.frameBox.style = {}, e.theme?.background === "transparent" ? e.frameBox.style.background = "black" : e.theme?.background && (e.frameBox.style.background = e.theme.background), e.frameBox.style.padding = "10px", e.frameBox.style.paddingBottom = "40px"), /* @__PURE__ */ g(_, { className: G(e, n), ref: F, children: [
+    /* @__PURE__ */ t("div", { className: "cover", onClick: k }),
+    /* @__PURE__ */ t("div", { className: "start", onClick: k, children: /* @__PURE__ */ t("div", { className: "start-button", children: /* @__PURE__ */ g("svg", { viewBox: "0 0 30 30", children: [
+      /* @__PURE__ */ t("polygon", { points: "6.583,3.186 5,4.004 5,15 26,15 26.483,14.128 " }),
+      /* @__PURE__ */ t("polygon", { points: "6.583,26.814 5,25.996 5,15 26,15 26.483,15.872 " }),
+      /* @__PURE__ */ t("circle", { cx: "26", cy: "15", r: "1" }),
+      /* @__PURE__ */ t("circle", { cx: "6", cy: "4", r: "1" }),
+      /* @__PURE__ */ t("circle", { cx: "6", cy: "26", r: "1" })
+    ] }) }) }),
+    n.isPlaying && n.isStarted && /* @__PURE__ */ t("div", { className: "hover-overlay", onClick: D, children: /* @__PURE__ */ t("div", { className: "hover-pause-button", children: /* @__PURE__ */ t("span", { className: "pause-icon" }) }) }),
+    !n.isPlaying && n.isStarted && /* @__PURE__ */ t("div", { className: "pause-overlay", onClick: M, children: /* @__PURE__ */ t("div", { className: "overlay-play-button", children: /* @__PURE__ */ g("svg", { viewBox: "0 0 30 30", children: [
+      /* @__PURE__ */ t("polygon", { points: "6.583,3.186 5,4.004 5,15 26,15 26.483,14.128 " }),
+      /* @__PURE__ */ t("polygon", { points: "6.583,26.814 5,25.996 5,15 26,15 26.483,15.872 " }),
+      /* @__PURE__ */ t("circle", { cx: "26", cy: "15", r: "1" }),
+      /* @__PURE__ */ t("circle", { cx: "6", cy: "4", r: "1" }),
+      /* @__PURE__ */ t("circle", { cx: "6", cy: "26", r: "1" })
+    ] }) }) }),
+    /* @__PURE__ */ t("div", { className: "terminal", children: /* @__PURE__ */ g("div", { className: K(e), style: e.frameBox.style || {}, children: [
+      /* @__PURE__ */ g("div", { className: "terminal-titlebar", children: [
+        /* @__PURE__ */ g("div", { className: "buttons", children: [
+          /* @__PURE__ */ t("div", { className: "close-button" }),
+          /* @__PURE__ */ t("div", { className: "minimize-button" }),
+          /* @__PURE__ */ t("div", { className: "maximize-button" })
         ] }),
-        /* @__PURE__ */ a("div", { className: "title", children: r.frameBox.title || "" })
+        /* @__PURE__ */ t("div", { className: "title", children: e.frameBox.title || "" })
       ] }),
-      /* @__PURE__ */ a("div", { className: "terminal-body", children: /* @__PURE__ */ a(Y, { ref: i, options: J }) })
+      /* @__PURE__ */ t("div", { className: "terminal-body", children: /* @__PURE__ */ t(Y, { ref: i, options: I }) })
     ] }) }),
-    /* @__PURE__ */ S("div", { className: "controller", children: [
-      !t.isPlaying && t.isStarted && /* @__PURE__ */ a("div", { className: "play", onClick: O, title: "Play", children: /* @__PURE__ */ a("span", { className: "icon" }) }),
-      t.isPlaying && /* @__PURE__ */ a("div", { className: "pause", onClick: L, title: "Pause", children: /* @__PURE__ */ a("span", { className: "icon" }) }),
-      !t.isPlaying && !t.isStarted && /* @__PURE__ */ a("div", { className: "play", onClick: k, title: "Start", children: /* @__PURE__ */ a("span", { className: "icon" }) }),
-      /* @__PURE__ */ a("div", { className: "timer", children: Q(t.currentTime) }),
-      /* @__PURE__ */ a("div", { className: "progressbar-wrapper", children: /* @__PURE__ */ a("div", { className: "progressbar", ref: N, onClick: M, children: /* @__PURE__ */ a("div", { className: "progress", style: { width: `${t.currentTime / h * 100}%` } }) }) })
+    /* @__PURE__ */ g("div", { className: "controller", children: [
+      !n.isPlaying && n.isStarted && /* @__PURE__ */ t("div", { className: "play", onClick: M, title: "Play", children: /* @__PURE__ */ t("span", { className: "icon" }) }),
+      n.isPlaying && /* @__PURE__ */ t("div", { className: "pause", onClick: D, title: "Pause", children: /* @__PURE__ */ t("span", { className: "icon" }) }),
+      !n.isPlaying && !n.isStarted && /* @__PURE__ */ t("div", { className: "play", onClick: k, title: "Start", children: /* @__PURE__ */ t("span", { className: "icon" }) }),
+      /* @__PURE__ */ t("div", { className: "timer", children: Q(n.currentTime) }),
+      /* @__PURE__ */ t("div", { className: "progressbar-wrapper", children: /* @__PURE__ */ t("div", { className: "progressbar", ref: w, onClick: L, children: /* @__PURE__ */ t("div", { className: "progress", style: { width: `${n.currentTime / v * 100}%` } }) }) })
     ] })
   ] });
 }
 V.propTypes = {
-  frames: l.array.isRequired,
-  options: l.shape({
-    autoplay: l.bool,
-    repeat: l.bool,
-    controls: l.bool,
-    frameBox: l.object,
-    theme: l.object,
-    cols: l.number,
-    rows: l.number
+  frames: c.array.isRequired,
+  options: c.shape({
+    autoplay: c.bool,
+    repeat: c.bool,
+    controls: c.bool,
+    frameBox: c.object,
+    theme: c.object,
+    cols: c.number,
+    rows: c.number,
+    autoplayThreshold: c.number,
+    autoplayRootMargin: c.string
   }).isRequired,
-  onComplete: l.func,
-  onStart: l.func,
-  onStop: l.func,
-  onPause: l.func,
-  onTick: l.func,
-  onJump: l.func
+  onComplete: c.func,
+  onStart: c.func,
+  onStop: c.func,
+  onPause: c.func,
+  onTick: c.func,
+  onJump: c.func
 };
 export {
   se as PLAYER_FRAME_DELAY,