@arcblock/terminal 3.1.19 → 3.1.21

package/lib/Player.js

@@ -1,16 +1,16 @@
-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 = {
+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,
@@ -22,106 +22,106 @@ function K({ ...E }) {
     allowTransparency: !0,
     scrollback: 0,
     theme: e.enableTheme ? e.theme : {}
-  }, J = (r, t) => {
-    switch (t.type) {
+  }, z = (r, n) => {
+    switch (n.type) {
       case "jump":
-        return { ...r, ...t.payload };
+        return { ...r, ...n.payload };
       case "start":
         return { ...r, isStarted: !0, lastTickTime: Date.now() };
       case "play":
-        return { ...r, isPlaying: !0, lastTickTime: Date.now(), ...t.payload };
+        return { ...r, isPlaying: !0, lastTickTime: Date.now(), ...n.payload };
       case "pause":
-        return { ...r, isPlaying: !1, ...t.payload };
+        return { ...r, isPlaying: !1, ...n.payload };
       case "tickStart":
-        return { ...r, isRendering: !0, lastTickTime: Date.now(), ...t.payload };
+        return { ...r, isRendering: !0, lastTickTime: Date.now(), ...n.payload };
       case "tickEnd":
-        return { ...r, isRendering: !1, lastTickTime: Date.now(), ...t.payload };
+        return { ...r, isRendering: !1, lastTickTime: Date.now(), ...n.payload };
       case "reset":
-        return { ...r, currentFrame: -1, currentTime: 0, ...t.payload };
+        return { ...r, currentFrame: -1, currentTime: 0, ...n.payload };
       default:
-        return { ...r, lastTickTime: Date.now(), ...t.payload };
+        return { ...r, lastTickTime: Date.now(), ...n.payload };
     }
-  }, 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();
+  }, 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, () => {
+        n();
+      })) : n();
     }),
-    [s, n.requireReset]
-  ), q = y(
+    [c, t.requireReset]
+  ), q = f(
     (r) => {
-      const t = s[r];
-      t && t.content && o.current && (n.requireReset && o.current.reset(), o.current.write(t.content));
+      const n = c[r];
+      n && n.content && i.current && (t.requireReset && i.current.reset(), i.current.write(n.content));
     },
-    [s, n.requireReset]
-  ), m = y(
+    [c, t.requireReset]
+  ), m = f(
     (r) => {
-      typeof i[r] == "function" && i[r]({ state: n, frames: s, options: e });
+      typeof s[r] == "function" && s[r]({ state: t, frames: c, options: e });
     },
-    [i, n, s, e]
-  ), R = y(
+    [s, t, c, e]
+  ), N = f(
     (r) => {
-      if (!o.current) return;
-      o.current.reset();
-      const t = j(s, r);
-      if (t >= 0)
-        for (let l = 0; l <= t; l++)
+      if (!i.current) return;
+      i.current.reset();
+      const n = j(c, r);
+      if (n >= 0)
+        for (let l = 0; l <= n; l++)
           q(l);
     },
-    [s, q]
-  ), L = y(
+    [c, q]
+  ), L = f(
     (r) => {
-      if (!v.current || !o.current || !n.isStarted)
+      if (!x.current || !i.current || !t.isStarted)
         return !1;
-      const t = v.current.getBoundingClientRect().width, l = r.nativeEvent.offsetX, h = Math.floor(g * l / t), T = j(s, h), x = n.isPlaying;
+      const n = x.current.getBoundingClientRect().width, l = r.nativeEvent.offsetX, h = Math.floor(g * l / n), T = j(c, h), w = t.isPlaying;
       return u({
         type: "jump",
         payload: {
           currentTime: h,
           currentFrame: T,
-          isPlaying: x
+          isPlaying: w
           // Keep the same playing state
         }
-      }), p.current = null, R(h), m("onJump"), !1;
+      }), p.current = null, N(h), m("onJump"), !1;
     },
-    [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]);
+    [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(() => {
-    o.current && (o.current.focus(), e.autoplay ? P() : R(Math.min(Math.abs(e.thumbnailTime), g)));
+    i.current && (i.current.focus(), e.autoplay ? b() : N(Math.min(Math.abs(e.thumbnailTime), g)));
   }, []);
-  const w = S(n);
-  w.current = n;
-  const N = y(async () => {
-    const r = w.current;
+  const v = k(t);
+  v.current = t;
+  const R = f(async () => {
+    const r = v.current;
     if (!r.isPlaying || r.isRendering)
       return;
-    const t = performance.now();
+    const n = performance.now();
     if (!p.current) {
-      const d = r.currentFrame >= 0 && s[r.currentFrame]?.startTime || 0;
-      p.current = t - d;
+      const y = r.currentFrame >= 0 && c[r.currentFrame]?.startTime || 0;
+      p.current = n - y;
     }
-    const l = t - p.current, { currentFrame: h } = r, T = h + 1;
-    if (h >= s.length - 1) {
+    const l = n - p.current, { currentFrame: h } = r, T = h + 1;
+    if (h >= c.length - 1) {
       if (m("onComplete"), e.repeat) {
-        p.current = t, u({ type: "reset", payload: { currentTime: 0, currentFrame: -1 } });
+        p.current = n, u({ type: "reset", payload: { currentTime: 0, currentFrame: -1 } });
         return;
       }
-      const d = {
+      const y = {
         currentTime: g,
-        currentFrame: s.length - 1,
+        currentFrame: c.length - 1,
         requireReset: !0,
         isStarted: !1
       };
-      u({ type: "pause", payload: d }), p.current = null;
+      u({ type: "pause", payload: y }), p.current = null;
       return;
     }
-    const x = s[T];
-    if (!x) {
-      n.isPlaying && (f.current = requestAnimationFrame(N));
+    const w = c[T];
+    if (!w) {
+      t.isPlaying && (d.current = requestAnimationFrame(R));
       return;
     }
-    const B = x.startTime || 0;
+    const B = w.startTime || 0;
     if (l >= B) {
       u({
         type: "tickStart",
@@ -132,75 +132,76 @@ function K({ ...E }) {
       });
       try {
         await C(T);
-        const d = {
+        const y = {
           currentTime: B,
           currentFrame: T
         };
-        r.requireReset && (d.requireReset = !1), u({ type: "tickEnd", payload: d }), m("onTick");
-      } catch (d) {
-        console.error("Frame rendering error:", d);
+        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: l } });
-  }, [s, C, m, e.repeat, g]);
+  }, [c, C, m, e.repeat, g]);
   return A(() => {
     let r = !0;
-    const t = async () => {
-      for (; r && w.current.isPlaying; )
+    const n = async () => {
+      for (; r && v.current.isPlaying; )
         await new Promise((l) => {
-          f.current = requestAnimationFrame(l);
-        }), r && w.current.isPlaying && await N();
+          d.current = requestAnimationFrame(l);
+        }), r && v.current.isPlaying && await R();
     };
-    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);
+    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);
     };
-  }, [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: [
+  }, [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: [
       /* @__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__ */ 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: "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: "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(I, { ref: o, options: D }) })
+      /* @__PURE__ */ a("div", { className: "terminal-body", children: /* @__PURE__ */ a(H, { ref: i, options: D }) })
     ] }) }),
-    /* @__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}%` } }) }) })
+    /* @__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}%` } }) }) })
     ] })
   ] });
 }
-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
+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
   }).isRequired,
-  onComplete: c.func,
-  onStart: c.func,
-  onStop: c.func,
-  onPause: c.func,
-  onTick: c.func,
-  onJump: c.func
+  onComplete: o.func,
+  onStart: o.func,
+  onStop: o.func,
+  onPause: o.func,
+  onTick: o.func,
+  onJump: o.func
 };
 export {
-  ae as PLAYER_FRAME_DELAY,
-  K as default
+  ie as PLAYER_FRAME_DELAY,
+  Q as default
 };

package/lib/styles.js

@@ -69,8 +69,8 @@ const r = e.div({
   "& .start svg": {
     cursor: "pointer",
     fill: "#eaeaea",
-    width: 100,
-    height: 100,
+    width: 80,
+    height: 80,
     left: "50%",
     marginLeft: -65,
     marginTop: -65,
@@ -79,9 +79,9 @@ const r = e.div({
     zIndex: 20,
     filter: "drop-shadow(10px 10px 15px rgba(0, 0, 0, 0.4))",
     WebkitFilter: "drop-shadow(10px 10px 15px rgba(0, 0, 0, 0.4))",
-    opacity: 0.6,
+    opacity: 0.7,
     "&:hover": {
-      opacity: 0.8,
+      opacity: 0.9,
       transition: "all 0.3s ease"
     }
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/terminal",
-  "version": "3.1.19",
+  "version": "3.1.21",
   "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": "49860d0bd0bb548087dcc6f49892fd4a88729d98",
+  "gitHead": "dedb6d83f569480ca7840679ef32fb863d4042e1",
   "dependencies": {
-    "@arcblock/react-hooks": "3.1.19",
-    "@arcblock/ux": "3.1.19",
+    "@arcblock/react-hooks": "3.1.21",
+    "@arcblock/ux": "3.1.21",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "@xterm/addon-fit": "^0.10.0",

package/src/Player.jsx

@@ -187,6 +187,28 @@ export default function Player({ ...rawProps }) {
     [state.isStarted, state.isPlaying, totalDuration, frames, doJump, emitEvent]
   );
 
+  const onPlay = useCallback(() => {
+    if (state.currentFrame >= frames.length - 1) {
+      // 触发一下 resize，保证文字输出正常
+      terminal.current.resize();
+      // Reset to beginning if at the end
+      dispatch({ type: 'reset', payload: { currentFrame: -1, currentTime: 0 } });
+      if (terminal.current) {
+        terminal.current.reset();
+      }
+      startTimeRef.current = null;
+      // Start from beginning
+      dispatch({ type: 'play', payload: { currentFrame: -1, currentTime: 0 } });
+    } else {
+      // Continue from current position
+      startTimeRef.current = null; // Reset timing for accurate playback
+      dispatch({ type: 'play' });
+    }
+
+    emitEvent('onPlay');
+    return false;
+  }, [state.currentFrame, frames.length, emitEvent]);
+
   const onStart = useCallback(() => {
     if (state.isStarted === false) {
       // 触发一下 resize，保证文字输出正常
@@ -405,6 +427,11 @@ export default function Player({ ...rawProps }) {
         </div>
       </div>
       <div className="controller">
+        {!state.isPlaying && state.isStarted && (
+          <div className="play" onClick={onPlay} title="Play">
+            <span className="icon" />
+          </div>
+        )}
         {state.isPlaying && (
           <div className="pause" onClick={onPause} title="Pause">
             <span className="icon" />

package/src/styles.js

@@ -87,8 +87,8 @@ export const PlayerRoot = styled.div({
   '& .start svg': {
     cursor: 'pointer',
     fill: '#eaeaea',
-    width: 100,
-    height: 100,
+    width: 80,
+    height: 80,
     left: '50%',
     marginLeft: -65,
     marginTop: -65,
@@ -98,9 +98,9 @@ export const PlayerRoot = styled.div({
     zIndex: 20,
     filter: 'drop-shadow(10px 10px 15px rgba(0, 0, 0, 0.4))',
     WebkitFilter: 'drop-shadow(10px 10px 15px rgba(0, 0, 0, 0.4))',
-    opacity: 0.6,
+    opacity: 0.7,
     '&:hover': {
-      opacity: 0.8,
+      opacity: 0.9,
       transition: 'all 0.3s ease',
     },
   },