@arcblock/terminal 3.1.20 → 3.1.22

package/lib/Player.js

@@ -1,114 +1,132 @@
-import { jsxs as F, jsx as a } from "react/jsx-runtime";
-import { useRef as k, useReducer as I, useCallback as f, useEffect as A } from "react";
-import o from "prop-types";
-import P from "lodash/isUndefined";
-import S from "lodash/noop";
-import H from "./Terminal.js";
-import { PlayerRoot as Y } from "./styles.js";
-import { defaultOptions as _, formatFrames as U, defaultState as X, findFrameAt as j, getPlayerClass as $, getFrameClass as G, formatTime as K } from "./util.js";
-const ie = 8;
-function Q({ ...E }) {
-  const s = Object.assign({}, E);
-  P(s.onComplete) && (s.onComplete = S), P(s.onStart) && (s.onStart = S), P(s.onStop) && (s.onStop = S), P(s.onPause) && (s.onPause = S), P(s.onTick) && (s.onTick = S), P(s.onJump) && (s.onJump = S);
-  const e = Object.assign({}, _, s.options), { frames: c, totalDuration: g } = U(s.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,
+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 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";
+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,
     allowTransparency: !0,
     scrollback: 0,
-    theme: e.enableTheme ? e.theme : {}
-  }, z = (r, n) => {
+    theme: r.enableTheme ? r.theme : {}
+  }, I = (e, n) => {
     switch (n.type) {
       case "jump":
-        return { ...r, ...n.payload };
+        return { ...e, ...n.payload };
       case "start":
-        return { ...r, isStarted: !0, lastTickTime: Date.now() };
+        return { ...e, isStarted: !0, lastTickTime: Date.now() };
       case "play":
-        return { ...r, isPlaying: !0, lastTickTime: Date.now(), ...n.payload };
+        return { ...e, isPlaying: !0, lastTickTime: Date.now(), ...n.payload };
       case "pause":
-        return { ...r, isPlaying: !1, ...n.payload };
+        return { ...e, isPlaying: !1, ...n.payload };
       case "tickStart":
-        return { ...r, isRendering: !0, lastTickTime: Date.now(), ...n.payload };
+        return { ...e, isRendering: !0, lastTickTime: Date.now(), ...n.payload };
       case "tickEnd":
-        return { ...r, isRendering: !1, lastTickTime: Date.now(), ...n.payload };
+        return { ...e, isRendering: !1, lastTickTime: Date.now(), ...n.payload };
       case "reset":
-        return { ...r, currentFrame: -1, currentTime: 0, ...n.payload };
+        return { ...e, currentFrame: -1, currentTime: 0, ...n.payload };
       default:
-        return { ...r, lastTickTime: Date.now(), ...n.payload };
+        return { ...e, lastTickTime: Date.now(), ...n.payload };
     }
-  }, i = k(null), x = k(null), J = k(null), d = k(null), p = k(null), [t, u] = I(z, X), C = f(
-    (r) => new Promise((n) => {
-      const l = c[r];
-      l && l.content && i.current ? (t.requireReset && i.current.reset(), i.current.write(l.content, () => {
+  }, 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();
     }),
     [c, t.requireReset]
-  ), q = f(
-    (r) => {
-      const n = c[r];
+  ), E = f(
+    (e) => {
+      const n = c[e];
       n && n.content && i.current && (t.requireReset && i.current.reset(), i.current.write(n.content));
     },
     [c, t.requireReset]
   ), m = f(
-    (r) => {
-      typeof s[r] == "function" && s[r]({ state: t, frames: c, options: e });
+    (e) => {
+      typeof s[e] == "function" && s[e]({ state: t, frames: c, options: r });
     },
-    [s, t, c, e]
-  ), N = f(
-    (r) => {
+    [s, t, c, r]
+  ), R = f(
+    (e) => {
       if (!i.current) return;
       i.current.reset();
-      const n = j(c, r);
+      const n = D(c, e);
       if (n >= 0)
-        for (let l = 0; l <= n; l++)
-          q(l);
+        for (let o = 0; o <= n; o++)
+          E(o);
     },
-    [c, q]
-  ), L = f(
-    (r) => {
-      if (!x.current || !i.current || !t.isStarted)
+    [c, E]
+  ), M = f(
+    (e) => {
+      if (!N.current || !i.current || !t.isStarted)
         return !1;
-      const n = x.current.getBoundingClientRect().width, l = r.nativeEvent.offsetX, h = Math.floor(g * l / n), T = j(c, h), w = t.isPlaying;
+      const n = N.current.getBoundingClientRect().width, o = e.nativeEvent.offsetX, T = Math.floor(h * o / n), b = D(c, T), w = t.isPlaying;
       return u({
         type: "jump",
         payload: {
-          currentTime: h,
-          currentFrame: T,
+          currentTime: T,
+          currentFrame: b,
           isPlaying: w
           // Keep the same playing state
         }
-      }), p.current = null, N(h), m("onJump"), !1;
+      }), p.current = null, R(T), m("onJump"), !1;
     },
-    [t.isStarted, t.isPlaying, g, c, N, m]
-  ), M = 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]), b = 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]), O = f(() => (u({ type: "pause" }), m("onPause"), !1), [m]);
-  A(() => {
-    i.current && (i.current.focus(), e.autoplay ? b() : N(Math.min(Math.abs(e.thumbnailTime), g)));
+    [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]);
+  q(() => {
+    if (!v.current || !r.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());
+      },
+      {
+        threshold: 0.1,
+        // Trigger when 10% of the element is visible
+        rootMargin: "0px 0px 0px 0px"
+        // Add some margin to avoid triggering too early
+      }
+    );
+    return e.observe(v.current), () => {
+      e.disconnect();
+    };
+  }, [r.autoplay, t.isStarted, k]), q(() => {
+    i.current && (i.current.focus(), r.autoplay || R(Math.min(Math.abs(r.thumbnailTime), h)));
   }, []);
-  const v = k(t);
-  v.current = t;
-  const R = f(async () => {
-    const r = v.current;
-    if (!r.isPlaying || r.isRendering)
+  const x = g(t);
+  x.current = t;
+  const B = f(async () => {
+    const e = x.current;
+    if (!e.isPlaying || e.isRendering)
       return;
     const n = performance.now();
     if (!p.current) {
-      const y = r.currentFrame >= 0 && c[r.currentFrame]?.startTime || 0;
+      const y = e.currentFrame >= 0 && c[e.currentFrame]?.startTime || 0;
       p.current = n - y;
     }
-    const l = n - p.current, { currentFrame: h } = r, T = h + 1;
-    if (h >= c.length - 1) {
-      if (m("onComplete"), e.repeat) {
+    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 } });
         return;
       }
       const y = {
-        currentTime: g,
+        currentTime: h,
         currentFrame: c.length - 1,
         requireReset: !0,
         isStarted: !1
@@ -116,92 +134,92 @@ function Q({ ...E }) {
       u({ type: "pause", payload: y }), p.current = null;
       return;
     }
-    const w = c[T];
+    const w = c[b];
     if (!w) {
-      t.isPlaying && (d.current = requestAnimationFrame(R));
+      t.isPlaying && (d.current = requestAnimationFrame(B));
       return;
     }
-    const B = w.startTime || 0;
-    if (l >= B) {
+    const C = w.startTime || 0;
+    if (o >= C) {
       u({
         type: "tickStart",
         payload: {
-          currentTime: B,
-          currentFrame: T
+          currentTime: C,
+          currentFrame: b
         }
       });
       try {
-        await C(T);
+        await j(b);
         const y = {
-          currentTime: B,
-          currentFrame: T
+          currentTime: C,
+          currentFrame: b
         };
-        r.requireReset && (y.requireReset = !1), u({ type: "tickEnd", payload: y }), m("onTick");
+        e.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: l } });
-  }, [c, C, m, e.repeat, g]);
-  return A(() => {
-    let r = !0;
+      u({ type: "tick", payload: { currentTime: o } });
+  }, [c, j, m, r.repeat, h]);
+  return q(() => {
+    let e = !0;
     const n = async () => {
-      for (; r && v.current.isPlaying; )
-        await new Promise((l) => {
-          d.current = requestAnimationFrame(l);
-        }), r && v.current.isPlaying && await R();
+      for (; e && x.current.isPlaying; )
+        await new Promise((o) => {
+          d.current = requestAnimationFrame(o);
+        }), e && x.current.isPlaying && await B();
     };
     return t.isPlaying ? n() : (d.current && (cancelAnimationFrame(d.current), d.current = null), p.current = null), () => {
-      r = !1, d.current && (cancelAnimationFrame(d.current), d.current = null);
+      e = !1, d.current && (cancelAnimationFrame(d.current), d.current = null);
     };
-  }, [t.isPlaying, R]), 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(Y, { className: $(e, t), ref: J, children: [
-    /* @__PURE__ */ a("div", { className: "cover", onClick: b }),
-    /* @__PURE__ */ a("div", { className: "start", onClick: b, children: /* @__PURE__ */ F("svg", { style: { enableBackground: "new 0 0 30 30" }, viewBox: "0 0 30 30", children: [
+  }, [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__ */ F("div", { className: G(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__ */ 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" })
         ] }),
-        /* @__PURE__ */ a("div", { className: "title", children: e.frameBox.title || "" })
+        /* @__PURE__ */ a("div", { className: "title", children: r.frameBox.title || "" })
       ] }),
-      /* @__PURE__ */ a("div", { className: "terminal-body", children: /* @__PURE__ */ a(H, { ref: i, options: D }) })
+      /* @__PURE__ */ a("div", { className: "terminal-body", children: /* @__PURE__ */ a(Y, { ref: i, options: J }) })
     ] }) }),
-    /* @__PURE__ */ F("div", { className: "controller", children: [
-      !t.isPlaying && t.isStarted && /* @__PURE__ */ a("div", { className: "play", onClick: M, title: "Play", children: /* @__PURE__ */ a("span", { className: "icon" }) }),
-      t.isPlaying && /* @__PURE__ */ a("div", { className: "pause", onClick: O, title: "Pause", children: /* @__PURE__ */ a("span", { className: "icon" }) }),
-      !t.isPlaying && !t.isStarted && /* @__PURE__ */ a("div", { className: "play", onClick: b, title: "Start", children: /* @__PURE__ */ a("span", { className: "icon" }) }),
-      /* @__PURE__ */ a("div", { className: "timer", children: K(t.currentTime) }),
-      /* @__PURE__ */ a("div", { className: "progressbar-wrapper", children: /* @__PURE__ */ a("div", { className: "progressbar", ref: x, onClick: L, children: /* @__PURE__ */ a("div", { className: "progress", style: { width: `${t.currentTime / g * 100}%` } }) }) })
+    /* @__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}%` } }) }) })
     ] })
   ] });
 }
-Q.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
+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
   }).isRequired,
-  onComplete: o.func,
-  onStart: o.func,
-  onStop: o.func,
-  onPause: o.func,
-  onTick: o.func,
-  onJump: o.func
+  onComplete: l.func,
+  onStart: l.func,
+  onStop: l.func,
+  onPause: l.func,
+  onTick: l.func,
+  onJump: l.func
 };
 export {
-  ie as PLAYER_FRAME_DELAY,
-  Q as default
+  se as PLAYER_FRAME_DELAY,
+  V as default
 };

package/lib/Terminal.js

@@ -1,19 +1,21 @@
 import { jsx as n } from "react/jsx-runtime";
 import h from "react";
-import i from "prop-types";
+import r from "prop-types";
 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 p } from "./styles.js";
-class u extends h.Component {
+import p from "lodash/debounce";
+import o from "lodash/noop";
+import { TerminalRoot as f } from "./styles.js";
+class l extends h.Component {
   xterm = null;
   container = null;
   shouldTriggerFitWhenWrite = !1;
   componentDidMount() {
     const { value: t = "", options: e = {} } = this.props;
-    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 = 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), setTimeout(() => {
+      this.xterm && this.fitAddon.fit();
+    }, 0), this.debounceFit = p(() => {
       this.fitAddon.fit();
     }, 500), window.addEventListener("resize", this.debounceFit);
   }
@@ -21,8 +23,8 @@ class u extends h.Component {
     this.xterm && (this.xterm.dispose(), this.xterm = null), window.removeEventListener("resize", this.debounceFit);
   }
   shouldComponentUpdate(t) {
-    const { value: e = "" } = t, { value: r = "" } = this.props;
-    return t.hasOwnProperty("value") && e !== r && this.xterm && (this.xterm.clear(), setTimeout(() => {
+    const { value: e = "" } = t, { value: i = "" } = this.props;
+    return t.hasOwnProperty("value") && e !== i && this.xterm && (this.xterm.clear(), setTimeout(() => {
       this.xterm.write(e);
     }, 0)), !1;
   }
@@ -39,20 +41,18 @@ class u extends h.Component {
     this.xterm && this.xterm.reset();
   }
   onData = (t) => {
-    const { onData: e = s } = this.props;
+    const { onData: e = o } = this.props;
     e(t);
   };
   onRender = (t) => {
-    const { onRender: e = s } = this.props;
+    const { onRender: e = o } = this.props;
     e(t);
   };
-  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);
-    }
+  resize(t, e) {
+    this.xterm && (this.shouldTriggerFitWhenWrite = !0, setTimeout(() => {
+      const i = Math.round(t ?? this.props.options.cols), s = Math.round(e ?? this.props.options.rows);
+      typeof i == "number" && typeof s == "number" && this.xterm.resize(i, s), this.shouldTriggerFitWhenWrite = !0;
+    }, 250));
   }
   setOption(t, e) {
     this.xterm && (this.xterm.options[t] = e);
@@ -65,27 +65,27 @@ class u extends h.Component {
     this.xterm && this.xterm.refresh(0, this.xterm.rows - 1);
   }
   render() {
-    const { className: t = "", style: e = {} } = this.props, r = ["react-xterm", t].filter(Boolean).join(" ");
+    const { className: t = "", style: e = {} } = this.props, i = ["react-xterm", t].filter(Boolean).join(" ");
     return /* @__PURE__ */ n(
-      p,
+      f,
       {
-        ref: (o) => {
-          this.container = o;
+        ref: (s) => {
+          this.container = s;
         },
-        className: r,
+        className: i,
         style: e
       }
     );
   }
 }
-u.propTypes = {
-  onData: i.func,
-  onRender: i.func,
-  options: i.object,
-  value: i.string,
-  className: i.string,
-  style: i.object
+l.propTypes = {
+  onData: r.func,
+  onRender: r.func,
+  options: r.object,
+  value: r.string,
+  className: r.string,
+  style: r.object
 };
 export {
-  u as default
+  l as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/terminal",
-  "version": "3.1.20",
+  "version": "3.1.22",
   "description": "A react wrapper for xterm allowing you to easily render a terminal in the browser",
   "keywords": [
     "react",
@@ -40,10 +40,10 @@
   "peerDependencies": {
     "react": "^19.0.0"
   },
-  "gitHead": "acb1c932b5f600dc38e44aa2b4491a943562b81e",
+  "gitHead": "11d0b4fb6ae868d94d232e4e120ee6b25497ee21",
   "dependencies": {
-    "@arcblock/react-hooks": "3.1.20",
-    "@arcblock/ux": "3.1.20",
+    "@arcblock/react-hooks": "3.1.22",
+    "@arcblock/ux": "3.1.22",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "@xterm/addon-fit": "^0.10.0",

package/src/Player.jsx

@@ -85,6 +85,7 @@ export default function Player({ ...rawProps }) {
   const container = useRef(null);
   const animationRef = useRef(null);
   const startTimeRef = useRef(null);
+  const autoPlayRef = useRef(false);
   const [state, dispatch] = useReducer(stateReducer, defaultState);
 
   // Render a frame with Promise-based approach
@@ -234,6 +235,38 @@ export default function Player({ ...rawProps }) {
     return false;
   }, [emitEvent]);
 
+  // Intersection Observer for viewport detection
+  useEffect(() => {
+    if (!container.current || !options.autoplay || autoPlayRef.current) {
+      return;
+    }
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const [entry] = entries;
+        if (entry.isIntersecting && !state.isStarted) {
+          // 根据视野范围自动开始播放
+          onStart();
+          autoPlayRef.current = true;
+          // 播放后，断开 observer，避免触发多次
+          observer.unobserve(container.current);
+          observer.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
+      }
+    );
+
+    observer.observe(container.current);
+
+    // eslint-disable-next-line consistent-return
+    return () => {
+      observer.disconnect();
+    };
+  }, [options.autoplay, state.isStarted, onStart]);
+
   // Render thumbnailTime
   useEffect(() => {
     if (!terminal.current) {
@@ -243,9 +276,7 @@ export default function Player({ ...rawProps }) {
     // Focus terminal to ensure cursor is visible
     terminal.current.focus();
 
-    if (options.autoplay) {
-      onStart();
-    } else {
+    if (!options.autoplay) {
       doJump(Math.min(Math.abs(options.thumbnailTime), totalDuration));
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/src/Player.stories.jsx

@@ -3,6 +3,7 @@ export { default as AutoPlay } from './demo/autoplay';
 export { default as Loop } from './demo/loop';
 export { default as AutoPlayLoop } from './demo/autoplay-loop';
 export { default as RecordingGuide } from './demo/recording-guide';
+export { default as BlockletLogTerminal } from './demo/blocklet-log-terminal';
 
 export default {
   title: 'Data Display/Terminal/Player',

package/src/Terminal.jsx

@@ -33,6 +33,12 @@ export default class Terminal extends React.Component {
       this.xterm.write(value);
     }
 
+    setTimeout(() => {
+      if (this.xterm) {
+        this.fitAddon.fit();
+      }
+    }, 0);
+
     this.debounceFit = debounce(() => {
       this.fitAddon.fit();
     }, 500);
@@ -100,12 +106,15 @@ export default class Terminal extends React.Component {
     onRender(data);
   };
 
-  resize() {
+  resize(_cols, _rows) {
     if (this.xterm) {
-      const { cols, rows } = this.props.options;
       this.shouldTriggerFitWhenWrite = true;
       setTimeout(() => {
-        this.xterm.resize(Math.round(cols), Math.round(rows));
+        const cols = Math.round(_cols ?? this.props.options.cols);
+        const rows = Math.round(_rows ?? this.props.options.rows);
+        if (typeof cols === 'number' && typeof rows === 'number') {
+          this.xterm.resize(cols, rows);
+        }
         this.shouldTriggerFitWhenWrite = true;
       }, 250);
     }