@arcblock/terminal 3.1.17 → 3.1.18

package/README.md

@@ -26,7 +26,7 @@ import { Player } from '@arcblock/terminal';
 import recordingData from './my-recording.json';
 
 export default function Demo() {
-  return <Player frames={recordingData.records} options={recordingData.config} autoPlay={true} loop={true} />;
+  return <Player frames={recordingData.records} options={recordingData.config} loop={true} />;
 }
 ```
 
@@ -36,8 +36,6 @@ export default function Demo() {
 | ------------ | ---------- | ------------ | -------------------------------- |
 | `frames`     | `Array`    | **required** | Array of terminal frames to play |
 | `options`    | `Object`   | **required** | Player configuration and theme   |
-| `autoPlay`   | `Boolean`  | `false`      | Auto-start playback when mounted |
-| `loop`       | `Boolean`  | `false`      | Loop playback infinitely         |
 | `onStart`    | `Function` | -            | Callback when playback starts    |
 | `onPause`    | `Function` | -            | Callback when playback pauses    |
 | `onComplete` | `Function` | -            | Callback when playback completes |

package/lib/Player.js

@@ -1,224 +1,206 @@
-import { jsxs as F, jsx as a } from "react/jsx-runtime";
-import { useRef as P, useState as _, useReducer as U, useEffect as q, useCallback as g } from "react";
-import o from "prop-types";
-import { useSize as Y } from "ahooks";
-import x from "lodash/isUndefined";
-import b from "lodash/noop";
-import X from "./Terminal.js";
-import { PlayerRoot as $ } from "./styles.js";
-import { defaultOptions as G, formatFrames as K, defaultState as Q, findFrameAt as M, getPlayerClass as V, getFrameClass as Z, formatTime as ee } from "./util.js";
-const me = 24;
-function te({ ...j }) {
-  const s = Object.assign({}, j);
-  x(s.onComplete) && (s.onComplete = b), x(s.onStart) && (s.onStart = b), x(s.onStop) && (s.onStop = b), x(s.onPause) && (s.onPause = b), x(s.onTick) && (s.onTick = b), x(s.onJump) && (s.onJump = b);
-  const e = Object.assign({}, G, s.options), { frames: c, totalDuration: w } = K(s.frames, e), D = {
+import { jsxs as k, jsx as a } from "react/jsx-runtime";
+import { useRef as S, useReducer as O, useCallback as y, useEffect as A } from "react";
+import c from "prop-types";
+import b from "lodash/isUndefined";
+import F from "lodash/noop";
+import I from "./Terminal.js";
+import { PlayerRoot as H } from "./styles.js";
+import { defaultOptions as Y, formatFrames as _, defaultState as U, findFrameAt as j, getPlayerClass as X, getFrameClass as $, formatTime as G } from "./util.js";
+const ae = 8;
+function K({ ...E }) {
+  const i = Object.assign({}, E);
+  b(i.onComplete) && (i.onComplete = F), b(i.onStart) && (i.onStart = F), b(i.onStop) && (i.onStop = F), b(i.onPause) && (i.onPause = F), b(i.onTick) && (i.onTick = F), b(i.onJump) && (i.onJump = F);
+  const e = Object.assign({}, Y, i.options), { frames: s, totalDuration: g } = _(i.frames, e), D = {
     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: e.theme || {}
-  }, E = (t, r) => {
-    switch (r.type) {
+    theme: e.enableTheme ? e.theme : {}
+  }, J = (r, t) => {
+    switch (t.type) {
       case "jump":
-        return { ...t, ...r.payload };
+        return { ...r, ...t.payload };
       case "start":
-        return { ...t, isStarted: !0, lastTickTime: Date.now() };
+        return { ...r, isStarted: !0, lastTickTime: Date.now() };
       case "play":
-        return { ...t, isPlaying: !0, lastTickTime: Date.now(), ...r.payload };
+        return { ...r, isPlaying: !0, lastTickTime: Date.now(), ...t.payload };
       case "pause":
-        return { ...t, isPlaying: !1, ...r.payload };
+        return { ...r, isPlaying: !1, ...t.payload };
       case "tickStart":
-        return { ...t, isRendering: !0, lastTickTime: Date.now(), ...r.payload };
+        return { ...r, isRendering: !0, lastTickTime: Date.now(), ...t.payload };
       case "tickEnd":
-        return { ...t, isRendering: !1, lastTickTime: Date.now(), ...r.payload };
+        return { ...r, isRendering: !1, lastTickTime: Date.now(), ...t.payload };
       case "reset":
-        return { ...t, currentFrame: -1, currentTime: 0, ...r.payload };
+        return { ...r, currentFrame: -1, currentTime: 0, ...t.payload };
       default:
-        return { ...t, lastTickTime: Date.now(), ...r.payload };
+        return { ...r, lastTickTime: Date.now(), ...t.payload };
     }
-  }, l = P(null), R = P(null), S = P(null), p = P(null), d = P(null), [z, J] = _(0), L = Y(document.body), [n, u] = U(E, Q), O = L?.width || 0;
-  q(() => {
-    if (l.current)
-      try {
-        const t = 8.03305785123967, r = S.current.getBoundingClientRect();
-        let i = r.x < 0 ? r.width + r.x : r.width;
-        if (S.current.parentNode) {
-          const T = S.current.parentNode.getBoundingClientRect();
-          r.width > T.width && (i = T.width);
-        }
-        e.controls && (i -= 12);
-        const f = Math.ceil(i / t), y = Math.min(Math.max(f, 40), e.cols);
-        l.current.resize(y, e.rows);
-      } catch {
-      }
-  }, [O, z]);
-  const k = g(
-    (t) => new Promise((r) => {
-      const i = c[t];
-      i && i.content && l.current ? (n.requireReset && l.current.reset(), l.current.write(i.content, () => {
-        r();
-      })) : r();
+  }, o = S(null), v = S(null), z = S(null), f = S(null), p = S(null), [n, u] = O(J, U), C = y(
+    (r) => new Promise((t) => {
+      const l = s[r];
+      l && l.content && o.current ? (n.requireReset && o.current.reset(), o.current.write(l.content, () => {
+        t();
+      })) : t();
     }),
-    [c, n.requireReset]
-  ), m = g(
-    (t) => {
-      typeof s[t] == "function" && s[t]({ state: n, frames: c, options: e });
+    [s, n.requireReset]
+  ), q = y(
+    (r) => {
+      const t = s[r];
+      t && t.content && o.current && (n.requireReset && o.current.reset(), o.current.write(t.content));
     },
-    [s, n, c, e]
-  ), C = g(
-    async (t) => {
-      if (!l.current) return;
-      l.current.reset();
-      const r = M(c, t);
-      if (r >= 0)
-        for (let i = 0; i <= r; i++)
-          await k(i);
+    [s, n.requireReset]
+  ), m = y(
+    (r) => {
+      typeof i[r] == "function" && i[r]({ state: n, frames: s, options: e });
     },
-    [c, k]
-  ), I = g(
-    (t) => {
-      if (!R.current || !l.current || !n.isStarted)
+    [i, n, s, e]
+  ), R = y(
+    (r) => {
+      if (!o.current) return;
+      o.current.reset();
+      const t = j(s, r);
+      if (t >= 0)
+        for (let l = 0; l <= t; l++)
+          q(l);
+    },
+    [s, q]
+  ), L = y(
+    (r) => {
+      if (!v.current || !o.current || !n.isStarted)
         return !1;
-      const r = R.current.getBoundingClientRect().width, i = t.nativeEvent.offsetX, f = Math.floor(w * i / r), y = M(c, f), T = n.isPlaying;
+      const t = v.current.getBoundingClientRect().width, l = r.nativeEvent.offsetX, h = Math.floor(g * l / t), T = j(s, h), x = n.isPlaying;
       return u({
         type: "jump",
         payload: {
-          currentTime: f,
-          currentFrame: y,
-          isPlaying: T
+          currentTime: h,
+          currentFrame: T,
+          isPlaying: x
           // Keep the same playing state
         }
-      }), d.current = null, C(f), m("onJump"), !1;
+      }), p.current = null, R(h), m("onJump"), !1;
     },
-    [n.isStarted, n.isPlaying, w, c, C, m]
-  ), N = g(() => (n.isStarted === !1 && (u({ type: "start" }), l.current && l.current.reset()), d.current = null, u({ type: "play", payload: { currentFrame: -1, currentTime: 0 } }), m("onStart"), !1), [n.isStarted, m]), W = g(() => (u({ type: "pause" }), m("onPause"), !1), [m]), H = g(() => (n.currentFrame >= c.length - 1 ? (u({ type: "reset", payload: { currentFrame: -1, currentTime: 0 } }), l.current && l.current.reset(), d.current = null, u({ type: "play", payload: { currentFrame: -1, currentTime: 0 } })) : (d.current = null, u({ type: "play" })), m("onPlay"), !1), [n.currentFrame, c.length, m]);
-  q(() => {
-    if (l.current) {
-      if (S.current)
-        try {
-          J(S.current.getBoundingClientRect().width);
-        } catch {
-        }
-      e.autoplay ? N() : C(Math.min(Math.abs(e.thumbnailTime), w));
-    }
+    [n.isStarted, n.isPlaying, g, s, R, m]
+  ), P = y(() => (n.isStarted === !1 && (o.current.resize(), u({ type: "start" }), o.current && o.current.reset()), p.current = null, u({ type: "play", payload: { currentFrame: -1, currentTime: 0 } }), m("onStart"), !1), [n.isStarted, m]), M = y(() => (u({ type: "pause" }), m("onPause"), !1), [m]);
+  A(() => {
+    o.current && (o.current.focus(), e.autoplay ? P() : R(Math.min(Math.abs(e.thumbnailTime), g)));
   }, []);
-  const v = P(n);
-  v.current = n;
-  const B = g(async () => {
-    const t = v.current;
-    if (!t.isPlaying || t.isRendering)
+  const w = S(n);
+  w.current = n;
+  const N = y(async () => {
+    const r = w.current;
+    if (!r.isPlaying || r.isRendering)
       return;
-    const r = performance.now();
-    if (!d.current) {
-      const h = t.currentFrame >= 0 && c[t.currentFrame]?.startTime || 0;
-      d.current = r - h;
+    const t = performance.now();
+    if (!p.current) {
+      const d = r.currentFrame >= 0 && s[r.currentFrame]?.startTime || 0;
+      p.current = t - d;
     }
-    const i = r - d.current, { currentFrame: f } = t, y = f + 1;
-    if (f >= c.length - 1) {
+    const l = t - p.current, { currentFrame: h } = r, T = h + 1;
+    if (h >= s.length - 1) {
       if (m("onComplete"), e.repeat) {
-        d.current = r, u({ type: "reset", payload: { currentTime: 0, currentFrame: -1 } });
+        p.current = t, u({ type: "reset", payload: { currentTime: 0, currentFrame: -1 } });
         return;
       }
-      const h = {
-        currentTime: w,
-        currentFrame: c.length - 1,
+      const d = {
+        currentTime: g,
+        currentFrame: s.length - 1,
         requireReset: !0,
         isStarted: !1
       };
-      u({ type: "pause", payload: h }), d.current = null;
+      u({ type: "pause", payload: d }), p.current = null;
       return;
     }
-    const T = c[y];
-    if (!T) {
-      n.isPlaying && (p.current = requestAnimationFrame(B));
+    const x = s[T];
+    if (!x) {
+      n.isPlaying && (f.current = requestAnimationFrame(N));
       return;
     }
-    const A = T.startTime || 0;
-    if (i >= A) {
+    const B = x.startTime || 0;
+    if (l >= B) {
       u({
         type: "tickStart",
         payload: {
-          currentTime: A,
-          currentFrame: y
+          currentTime: B,
+          currentFrame: T
         }
       });
       try {
-        await k(y);
-        const h = {
-          currentTime: A,
-          currentFrame: y
+        await C(T);
+        const d = {
+          currentTime: B,
+          currentFrame: T
         };
-        t.requireReset && (h.requireReset = !1), u({ type: "tickEnd", payload: h }), m("onTick");
-      } catch (h) {
-        console.error("Frame rendering error:", h);
+        r.requireReset && (d.requireReset = !1), u({ type: "tickEnd", payload: d }), m("onTick");
+      } catch (d) {
+        console.error("Frame rendering error:", d);
       }
     } else
-      u({ type: "tick", payload: { currentTime: i } });
-  }, [c, k, m, e.repeat, w]);
-  return q(() => {
-    let t = !0;
-    const r = async () => {
-      for (; t && v.current.isPlaying; )
-        await new Promise((i) => {
-          p.current = requestAnimationFrame(i);
-        }), t && v.current.isPlaying && await B();
+      u({ type: "tick", payload: { currentTime: l } });
+  }, [s, C, m, e.repeat, g]);
+  return A(() => {
+    let r = !0;
+    const t = async () => {
+      for (; r && w.current.isPlaying; )
+        await new Promise((l) => {
+          f.current = requestAnimationFrame(l);
+        }), r && w.current.isPlaying && await N();
     };
-    return n.isPlaying ? r() : (p.current && (cancelAnimationFrame(p.current), p.current = null), d.current = null), () => {
-      t = !1, p.current && (cancelAnimationFrame(p.current), p.current = null);
+    return n.isPlaying ? t() : (f.current && (cancelAnimationFrame(f.current), f.current = null), p.current = null), () => {
+      r = !1, f.current && (cancelAnimationFrame(f.current), f.current = null);
     };
-  }, [n.isPlaying, B]), 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__ */ F($, { className: V(e, n), ref: S, children: [
-    /* @__PURE__ */ a("div", { className: "cover", onClick: N }),
-    /* @__PURE__ */ a("div", { className: "start", onClick: N, children: /* @__PURE__ */ F("svg", { style: { enableBackground: "new 0 0 30 30" }, viewBox: "0 0 30 30", children: [
+  }, [n.isPlaying, N]), 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__ */ k(H, { className: X(e, n), ref: z, children: [
+    /* @__PURE__ */ a("div", { className: "cover", onClick: P }),
+    /* @__PURE__ */ a("div", { className: "start", onClick: P, children: /* @__PURE__ */ k("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__ */ F("div", { className: Z(e), style: e.frameBox.style || {}, children: [
-      /* @__PURE__ */ F("div", { className: "terminal-titlebar", children: [
-        /* @__PURE__ */ F("div", { className: "buttons", children: [
+    /* @__PURE__ */ a("div", { className: "terminal", children: /* @__PURE__ */ k("div", { className: $(e), style: e.frameBox.style || {}, children: [
+      /* @__PURE__ */ k("div", { className: "terminal-titlebar", children: [
+        /* @__PURE__ */ k("div", { className: "buttons", children: [
           /* @__PURE__ */ a("div", { className: "close-button" }),
           /* @__PURE__ */ a("div", { className: "minimize-button" }),
           /* @__PURE__ */ a("div", { className: "maximize-button" })
         ] }),
         /* @__PURE__ */ a("div", { className: "title", children: e.frameBox.title || "" })
       ] }),
-      /* @__PURE__ */ a("div", { className: "terminal-body", children: /* @__PURE__ */ a(X, { ref: l, options: D }) })
+      /* @__PURE__ */ a("div", { className: "terminal-body", children: /* @__PURE__ */ a(I, { ref: o, options: D }) })
     ] }) }),
-    /* @__PURE__ */ F("div", { className: "controller", children: [
-      n.isPlaying && /* @__PURE__ */ a("div", { className: "pause", onClick: W, title: "Pause", children: /* @__PURE__ */ a("span", { className: "icon" }) }),
-      !n.isPlaying && n.isStarted && /* @__PURE__ */ a("div", { className: "play", onClick: H, title: "Play", children: /* @__PURE__ */ a("span", { className: "icon" }) }),
-      !n.isPlaying && !n.isStarted && /* @__PURE__ */ a("div", { className: "play", onClick: N, title: "Start", children: /* @__PURE__ */ a("span", { className: "icon" }) }),
-      /* @__PURE__ */ a("div", { className: "timer", children: ee(n.currentTime) }),
-      /* @__PURE__ */ a("div", { className: "progressbar-wrapper", children: /* @__PURE__ */ a("div", { className: "progressbar", ref: R, onClick: I, children: /* @__PURE__ */ a("div", { className: "progress", style: { width: `${n.currentTime / w * 100}%` } }) }) })
+    /* @__PURE__ */ k("div", { className: "controller", children: [
+      n.isPlaying && /* @__PURE__ */ a("div", { className: "pause", onClick: M, title: "Pause", children: /* @__PURE__ */ a("span", { className: "icon" }) }),
+      !n.isPlaying && !n.isStarted && /* @__PURE__ */ a("div", { className: "play", onClick: P, title: "Start", children: /* @__PURE__ */ a("span", { className: "icon" }) }),
+      /* @__PURE__ */ a("div", { className: "timer", children: G(n.currentTime) }),
+      /* @__PURE__ */ a("div", { className: "progressbar-wrapper", children: /* @__PURE__ */ a("div", { className: "progressbar", ref: v, onClick: L, children: /* @__PURE__ */ a("div", { className: "progress", style: { width: `${n.currentTime / g * 100}%` } }) }) })
     ] })
   ] });
 }
-te.propTypes = {
-  frames: o.array.isRequired,
-  options: o.shape({
-    autoplay: o.bool,
-    repeat: o.bool,
-    controls: o.bool,
-    frameBox: o.object,
-    theme: o.object,
-    cols: o.number,
-    rows: o.number
+K.propTypes = {
+  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
   }).isRequired,
-  onComplete: o.func,
-  onStart: o.func,
-  onStop: o.func,
-  onPause: o.func,
-  onTick: o.func,
-  onJump: o.func
+  onComplete: c.func,
+  onStart: c.func,
+  onStop: c.func,
+  onPause: c.func,
+  onTick: c.func,
+  onJump: c.func
 };
 export {
-  me as PLAYER_FRAME_DELAY,
-  te as default
+  ae as PLAYER_FRAME_DELAY,
+  K as default
 };

package/lib/Terminal.js

@@ -1,22 +1,21 @@
 import { jsx as n } from "react/jsx-runtime";
-import m from "react";
+import h from "react";
 import i from "prop-types";
-import { Terminal as h } from "xterm";
-import { WebLinksAddon as a } from "xterm-addon-web-links";
-import { FitAddon as d } from "xterm-addon-fit";
-import p from "lodash/debounce";
+import { Terminal as m } from "@xterm/xterm";
+import { WebLinksAddon as a } from "@xterm/addon-web-links";
+import { FitAddon as d } from "@xterm/addon-fit";
+import l from "lodash/debounce";
 import s from "lodash/noop";
-import { TerminalRoot as f } from "./styles.js";
-class x extends m.Component {
+import { TerminalRoot as p } from "./styles.js";
+class u extends h.Component {
   xterm = null;
   container = null;
+  shouldTriggerFitWhenWrite = !1;
   componentDidMount() {
     const { value: t = "", options: e = {} } = this.props;
-    this.fitAddon = new d(), this.xterm = new h(e), this.xterm.loadAddon(new a()), this.xterm.loadAddon(this.fitAddon), this.xterm.open(this.container), this.xterm.onData(this.onData.bind(this)), this.xterm.onRender(this.onRender.bind(this)), t && this.xterm.write(t), setTimeout(() => {
-      this.xterm && this.fitAddon.fit();
-    }, 0), this.debounceFit = p(() => {
+    this.fitAddon = new d(), this.xterm = new m(e), this.xterm.loadAddon(new a()), this.xterm.loadAddon(this.fitAddon), this.xterm.open(this.container), this.xterm.onData(this.onData.bind(this)), this.xterm.onRender(this.onRender.bind(this)), t && this.xterm.write(t), this.debounceFit = l(() => {
       this.fitAddon.fit();
-    }, 600), window.addEventListener("resize", this.debounceFit);
+    }, 500), window.addEventListener("resize", this.debounceFit);
   }
   componentWillUnmount() {
     this.xterm && (this.xterm.dispose(), this.xterm = null), window.removeEventListener("resize", this.debounceFit);
@@ -31,7 +30,7 @@ class x extends m.Component {
     return this.xterm;
   }
   write(t, e) {
-    this.xterm && this.xterm.write(t, e);
+    this.xterm && (this.xterm.write(t, e), this.shouldTriggerFitWhenWrite && (this.debounceFit(), this.shouldTriggerFitWhenWrite = !1));
   }
   focus() {
     this.xterm && this.xterm.focus();
@@ -47,14 +46,20 @@ class x extends m.Component {
     const { onRender: e = s } = this.props;
     e(t);
   };
-  resize(t, e) {
-    this.xterm && this.xterm.resize(Math.round(t), Math.round(e));
+  resize() {
+    if (this.xterm) {
+      const { cols: t, rows: e } = this.props.options;
+      this.shouldTriggerFitWhenWrite = !0, setTimeout(() => {
+        this.xterm.resize(Math.round(t), Math.round(e)), this.shouldTriggerFitWhenWrite = !0;
+      }, 250);
+    }
   }
   setOption(t, e) {
-    this.xterm && this.xterm.setOption(t, e);
+    this.xterm && (this.xterm.options[t] = e);
   }
   getOption(t) {
-    this.xterm && this.xterm.setOption(t);
+    if (this.xterm)
+      return this.xterm.options[t];
   }
   refresh() {
     this.xterm && this.xterm.refresh(0, this.xterm.rows - 1);
@@ -62,7 +67,7 @@ class x extends m.Component {
   render() {
     const { className: t = "", style: e = {} } = this.props, r = ["react-xterm", t].filter(Boolean).join(" ");
     return /* @__PURE__ */ n(
-      f,
+      p,
       {
         ref: (o) => {
           this.container = o;
@@ -73,7 +78,7 @@ class x extends m.Component {
     );
   }
 }
-x.propTypes = {
+u.propTypes = {
   onData: i.func,
   onRender: i.func,
   options: i.object,
@@ -82,5 +87,5 @@ x.propTypes = {
   style: i.object
 };
 export {
-  x as default
+  u as default
 };