@arcblock/terminal 2.13.70 → 3.0.1

package/lib/Player.js

@@ -1,418 +1,158 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = Player;
-var _react = require("react");
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _useInterval = _interopRequireDefault(require("@arcblock/react-hooks/lib/useInterval"));
-var _ahooks = require("ahooks");
-var _noop = _interopRequireDefault(require("lodash/noop"));
-var _Terminal = _interopRequireDefault(require("./Terminal"));
-require("./player.css");
-var _util = require("./util");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /* eslint-disable react/no-unused-prop-types */
-function Player(props) {
-  const options = Object.assign({}, _util.defaultOptions, props.options);
-  const {
-    frames,
-    totalDuration
-  } = (0, _util.formatFrames)(props.frames, options);
-  const terminalOptions = {
-    cols: options.cols,
-    rows: options.rows,
-    cursorStyle: options.cursorStyle,
-    fontFamily: options.fontFamily,
-    fontSize: options.fontSize,
-    lineHeight: options.lineHeight,
-    letterSpacing: options.letterSpacing,
-    allowTransparency: true,
+import { jsxs as f, jsx as n } from "react/jsx-runtime";
+import { useRef as S, useState as O, useReducer as W, useEffect as b } from "react";
+import l from "prop-types";
+import H from "@arcblock/react-hooks/lib/useInterval";
+import { useSize as I } from "ahooks";
+import y from "lodash/isUndefined";
+import h from "lodash/noop";
+import A from "./Terminal.js";
+/* empty css           */
+import { defaultOptions as U, formatFrames as L, defaultState as X, isFrameAt as F, findFrameAt as P, getPlayerClass as _, getFrameClass as $, formatTime as G } from "./util.js";
+function K(C) {
+  const i = Object.assign({}, C);
+  y(i.onComplete) && (i.onComplete = h), y(i.onStart) && (i.onStart = h), y(i.onStop) && (i.onStop = h), y(i.onPause) && (i.onPause = h), y(i.onTick) && (i.onTick = h), y(i.onJump) && (i.onJump = h);
+  const t = Object.assign({}, U, i.options), { frames: u, totalDuration: m } = L(i.frames, t), R = {
+    cols: t.cols,
+    rows: t.rows,
+    cursorStyle: t.cursorStyle,
+    fontFamily: t.fontFamily,
+    fontSize: t.fontSize,
+    lineHeight: t.lineHeight,
+    letterSpacing: t.letterSpacing,
+    allowTransparency: !0,
     scrollback: 0
     // theme: options.theme,
-  };
-  const stateReducer = (state, action) => {
-    // console.log(`dispatch.${action.type}`, action.payload);
-    switch (action.type) {
-      case 'jump':
-        return _objectSpread(_objectSpread({}, state), {}, {
-          isPlaying: false
-        }, action.payload);
-      case 'start':
-        return _objectSpread(_objectSpread({}, state), {}, {
-          isStarted: true,
-          lastTickTime: Date.now()
-        });
-      case 'play':
-        return _objectSpread(_objectSpread({}, state), {}, {
-          isPlaying: true,
-          lastTickTime: Date.now()
-        }, action.payload);
-      case 'pause':
-        return _objectSpread(_objectSpread({}, state), {}, {
-          isPlaying: false
-        }, action.payload);
-      case 'tickStart':
-        return _objectSpread(_objectSpread({}, state), {}, {
-          isRendering: true,
-          lastTickTime: Date.now()
-        }, action.payload);
-      case 'tickEnd':
-        return _objectSpread(_objectSpread({}, state), {}, {
-          isRendering: false,
-          lastTickTime: Date.now()
-        }, action.payload);
-      case 'reset':
-        return _objectSpread(_objectSpread({}, state), {}, {
+  }, B = (a, e) => {
+    switch (e.type) {
+      case "jump":
+        return { ...a, isPlaying: !1, ...e.payload };
+      case "start":
+        return { ...a, isStarted: !0, lastTickTime: Date.now() };
+      case "play":
+        return {
+          ...a,
+          isPlaying: !0,
+          lastTickTime: Date.now(),
+          ...e.payload
+        };
+      case "pause":
+        return { ...a, isPlaying: !1, ...e.payload };
+      case "tickStart":
+        return {
+          ...a,
+          isRendering: !0,
+          lastTickTime: Date.now(),
+          ...e.payload
+        };
+      case "tickEnd":
+        return {
+          ...a,
+          isRendering: !1,
+          lastTickTime: Date.now(),
+          ...e.payload
+        };
+      case "reset":
+        return {
+          ...a,
           currentFrame: 0,
-          currentTime: 0
-        }, action.payload);
+          currentTime: 0,
+          ...e.payload
+        };
       default:
-        return _objectSpread(_objectSpread({}, state), {}, {
-          lastTickTime: Date.now()
-        }, action.payload);
+        return { ...a, lastTickTime: Date.now(), ...e.payload };
     }
-  };
-  const terminal = (0, _react.useRef)(null);
-  const progress = (0, _react.useRef)(null);
-  const container = (0, _react.useRef)(null);
-  const [maxWidth, setMaxWidth] = (0, _react.useState)(0);
-  const size = (0, _ahooks.useSize)(document.body);
-  const [state, dispatch] = (0, _react.useReducer)(stateReducer, _util.defaultState);
-  const width = (size === null || size === void 0 ? void 0 : size.width) || 0;
-  (0, _react.useEffect)(() => {
-    if (!terminal.current) {
-      return;
-    }
-    try {
-      const COLUMN_WIDTH = 972 / 121;
-      const child = container.current.getBoundingClientRect();
-      let containerWidth = child.x < 0 ? child.width + child.x : child.width;
-      if (container.current.parentNode) {
-        const parent = container.current.parentNode.getBoundingClientRect();
-        if (child.width > parent.width) {
-          containerWidth = parent.width;
+  }, o = S(null), k = S(null), d = S(null), [D, M] = O(0), v = I(document.body), [r, c] = W(B, X), j = (v == null ? void 0 : v.width) || 0;
+  b(() => {
+    if (o.current)
+      try {
+        const a = 8.03305785123967, e = d.current.getBoundingClientRect();
+        let s = e.x < 0 ? e.width + e.x : e.width;
+        if (d.current.parentNode) {
+          const x = d.current.parentNode.getBoundingClientRect();
+          e.width > x.width && (s = x.width);
         }
+        t.controls && (s -= 12);
+        const T = Math.ceil(s / a), E = Math.min(Math.max(T, 40), t.cols);
+        o.current.resize(E, t.rows);
+      } catch {
       }
-      if (options.controls) {
-        containerWidth -= 12;
-      }
-      const colContainer = Math.ceil(containerWidth / COLUMN_WIDTH);
-      const cols = Math.min(Math.max(colContainer, 40), options.cols);
-      terminal.current.resize(cols, options.rows);
-    } catch (err) {
-      // Do nothing
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [width, maxWidth]);
-
-  // console.log('main.render', state, { totalFrame: frames.length, totalDuration });
-  // Render a frame
-  const renderFrame = (frameIndex, done) => {
-    const frame = frames[frameIndex];
-    if (frame.content) {
-      if (state.requireReset) {
-        terminal.current.reset();
-      }
-      terminal.current.write(frame.content, () => {
-        if (typeof done === 'function') {
-          done();
+  }, [j, D]);
+  const w = (a, e) => {
+    const s = u[a];
+    s.content && (r.requireReset && o.current.reset(), o.current.write(s.content, () => {
+      typeof e == "function" && e();
+    }));
+  }, p = (a) => {
+    typeof i[a] == "function" && i[a]({ state: r, frames: u, options: t });
+  }, N = (a) => {
+    o.current.reset();
+    const e = P(u, a);
+    for (let s = 0; s < e; s++)
+      w(s);
+  }, q = (a) => {
+    if (!k.current || !o.current || !r.isStarted)
+      return !1;
+    const e = k.current.getBoundingClientRect().width, s = a.nativeEvent.offsetX, T = Math.floor(m * s / e);
+    return c({ type: "jump", payload: { currentTime: T } }), N(T), p("onJump"), !1;
+  }, g = () => (r.isStarted === !1 && (c({ type: "start" }), o.current.reset()), c({ type: "play" }), p("onStart"), !1), J = () => (c({ type: "pause" }), p("onPause"), !1), z = () => (r.currentFrame === u.length - 1 && r.currentTime === m && (c({ type: "reset" }), o.current.reset()), p("onPlay"), g());
+  return b(() => {
+    if (o.current) {
+      if (d.current)
+        try {
+          M(d.current.getBoundingClientRect().width);
+        } catch {
         }
-      });
-    }
-  };
-
-  // Emit a event
-  const emitEvent = name => {
-    if (typeof props[name] === 'function') {
-      props[name]({
-        state,
-        frames,
-        options
-      });
-    }
-  };
-  const doJump = time => {
-    terminal.current.reset();
-    const toFrameIndex = (0, _util.findFrameAt)(frames, time);
-    for (let i = 0; i < toFrameIndex; i++) {
-      renderFrame(i);
-    }
-  };
-  const onJump = e => {
-    if (!progress.current || !terminal.current || !state.isStarted) {
-      return false;
-    }
-    const length = progress.current.getBoundingClientRect().width;
-    const position = e.nativeEvent.offsetX;
-    // console.log('onJump', { length, position, e });
-
-    const currentTime = Math.floor(totalDuration * position / length);
-    dispatch({
-      type: 'jump',
-      payload: {
-        currentTime
-      }
-    });
-    doJump(currentTime);
-    emitEvent('onJump');
-    return false;
-  };
-  const onStart = () => {
-    if (state.isStarted === false) {
-      dispatch({
-        type: 'start'
-      });
-      terminal.current.reset();
-    }
-    dispatch({
-      type: 'play'
-    });
-    emitEvent('onStart');
-    return false;
-  };
-  const onPause = () => {
-    dispatch({
-      type: 'pause'
-    });
-    emitEvent('onPause');
-    return false;
-  };
-  const onPlay = () => {
-    if (state.currentFrame === frames.length - 1 && state.currentTime === totalDuration) {
-      dispatch({
-        type: 'reset'
-      });
-      terminal.current.reset();
-    }
-    emitEvent('onPlay');
-    return onStart();
-  };
-
-  // Render thumbnailTime
-  (0, _react.useEffect)(() => {
-    if (!terminal.current) {
-      return;
-    }
-    if (container.current) {
-      try {
-        setMaxWidth(container.current.getBoundingClientRect().width);
-      } catch (e) {
-        // Do nothing
-      }
-    }
-    if (options.autoplay) {
-      onStart();
-    } else {
-      doJump(Math.min(Math.abs(options.thumbnailTime), totalDuration));
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  // Tick intervals
-  (0, _useInterval.default)(() => {
-    if (state.isRendering) {
-      return false;
-    }
-    const tickDelay = Date.now() - state.lastTickTime;
-    const newState = {};
-    if (state.currentTime < totalDuration) {
-      newState.currentTime = state.currentTime + tickDelay;
-    }
-    if (state.currentTime > totalDuration) {
-      newState.currentTime = totalDuration;
-    }
-    const alreadyRendered = (0, _util.isFrameAt)(frames, newState.currentTime, state.currentFrame);
-    if (state.currentFrame !== -1 && alreadyRendered) {
-      return dispatch({
-        type: 'tick',
-        payload: newState
-      });
-    }
-
-    // Reached the end
-    if (state.currentFrame === frames.length - 1) {
-      emitEvent('onComplete');
-      if (options.repeat) {
-        // console.log('tick.restart', newState, state);
-        return dispatch({
-          type: 'reset',
-          payload: newState
-        });
-      }
-
-      // console.log('tick.end', newState, state);
-      newState.currentTime = 0;
-      newState.currentFrame = 0;
-      newState.requireReset = true;
-      newState.isStarted = false;
-      return dispatch({
-        type: 'pause',
-        payload: newState
-      });
-    }
-
-    // Check if current time belongs to the next frame's duration
-    if ((0, _util.isFrameAt)(newState.currentTime, state.currentFrame + 1)) {
-      newState.currentFrame = state.currentFrame + 1;
-    } else {
-      newState.currentFrame = (0, _util.findFrameAt)(frames, newState.currentTime);
-    }
-
-    // console.log('tick.tick', newState, state);
-    dispatch({
-      type: 'tickStart',
-      payload: newState
-    });
-    return renderFrame(newState.currentFrame, () => {
-      if (state.requireReset) {
-        newState.requireReset = false;
-      }
-      dispatch({
-        type: 'tickEnd',
-        payload: newState
-      });
-      return emitEvent('onTick');
-    });
-  }, state.isPlaying ? 8 : null);
-
-  // If controls are enabled, we need to disable frameBox
-  if (options.controls) {
-    options.frameBox.title = null;
-    options.frameBox.type = null;
-    options.frameBox.style = {};
-    if (options.theme.background === 'transparent') {
-      options.frameBox.style.background = 'black';
-    } else {
-      options.frameBox.style.background = options.theme.background;
-    }
-    options.frameBox.style.padding = '10px';
-    options.frameBox.style.paddingBottom = '40px';
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: (0, _util.getPlayerClass)(options, state),
-    ref: container,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "cover",
-      onClick: onStart
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "start",
-      onClick: onStart,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
-        style: {
-          enableBackground: 'new 0 0 30 30'
-        },
-        viewBox: "0 0 30 30",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("polygon", {
-          points: "6.583,3.186 5,4.004 5,15 26,15 26.483,14.128 "
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("polygon", {
-          points: "6.583,26.814 5,25.996 5,15 26,15 26.483,15.872 "
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
-          cx: "26",
-          cy: "15",
-          r: "1"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
-          cx: "6",
-          cy: "4",
-          r: "1"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
-          cx: "6",
-          cy: "26",
-          r: "1"
-        })]
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "terminal",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: (0, _util.getFrameClass)(options),
-        style: options.frameBox.style || {},
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: "terminal-titlebar",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: "buttons",
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: "close-button"
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: "minimize-button"
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: "maximize-button"
-            })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "title",
-            children: options.frameBox.title || ''
-          })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "terminal-body",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Terminal.default, {
-            ref: terminal,
-            options: terminalOptions
-          })
-        })]
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "controller",
-      children: [state.isPlaying && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "pause",
-        onClick: onPause,
-        title: "Pause",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          className: "icon"
-        })
-      }), !state.isPlaying && state.isStarted && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "play",
-        onClick: onPlay,
-        title: "Play",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          className: "icon"
-        })
-      }), !state.isPlaying && !state.isStarted && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "play",
-        onClick: onStart,
-        title: "Start",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          className: "icon"
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "timer",
-        children: (0, _util.formatTime)(state.currentTime)
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "progressbar-wrapper",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "progressbar",
-          ref: progress,
-          onClick: onJump,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "progress",
-            style: {
-              width: "".concat(state.currentTime / totalDuration * 100, "%")
-            }
-          })
-        })
-      })]
-    })]
-  });
+      t.autoplay ? g() : N(Math.min(Math.abs(t.thumbnailTime), m));
+    }
+  }, []), H(
+    () => {
+      if (r.isRendering)
+        return !1;
+      const a = Date.now() - r.lastTickTime, e = {};
+      r.currentTime < m && (e.currentTime = r.currentTime + a), r.currentTime > m && (e.currentTime = m);
+      const s = F(u, e.currentTime, r.currentFrame);
+      return r.currentFrame !== -1 && s ? c({ type: "tick", payload: e }) : r.currentFrame === u.length - 1 ? (p("onComplete"), t.repeat ? c({ type: "reset", payload: e }) : (e.currentTime = 0, e.currentFrame = 0, e.requireReset = !0, e.isStarted = !1, c({ type: "pause", payload: e }))) : (F(e.currentTime, r.currentFrame + 1) ? e.currentFrame = r.currentFrame + 1 : e.currentFrame = P(u, e.currentTime), c({ type: "tickStart", payload: e }), w(e.currentFrame, () => (r.requireReset && (e.requireReset = !1), c({ type: "tickEnd", payload: e }), p("onTick"))));
+    },
+    r.isPlaying ? 8 : null
+  ), t.controls && (t.frameBox.title = null, t.frameBox.type = null, t.frameBox.style = {}, t.theme.background === "transparent" ? t.frameBox.style.background = "black" : t.frameBox.style.background = t.theme.background, t.frameBox.style.padding = "10px", t.frameBox.style.paddingBottom = "40px"), /* @__PURE__ */ f("div", { className: _(t, r), ref: d, children: [
+    /* @__PURE__ */ n("div", { className: "cover", onClick: g }),
+    /* @__PURE__ */ n("div", { className: "start", onClick: g, children: /* @__PURE__ */ f("svg", { style: { enableBackground: "new 0 0 30 30" }, viewBox: "0 0 30 30", children: [
+      /* @__PURE__ */ n("polygon", { points: "6.583,3.186 5,4.004 5,15 26,15 26.483,14.128 " }),
+      /* @__PURE__ */ n("polygon", { points: "6.583,26.814 5,25.996 5,15 26,15 26.483,15.872 " }),
+      /* @__PURE__ */ n("circle", { cx: "26", cy: "15", r: "1" }),
+      /* @__PURE__ */ n("circle", { cx: "6", cy: "4", r: "1" }),
+      /* @__PURE__ */ n("circle", { cx: "6", cy: "26", r: "1" })
+    ] }) }),
+    /* @__PURE__ */ n("div", { className: "terminal", children: /* @__PURE__ */ f("div", { className: $(t), style: t.frameBox.style || {}, children: [
+      /* @__PURE__ */ f("div", { className: "terminal-titlebar", children: [
+        /* @__PURE__ */ f("div", { className: "buttons", children: [
+          /* @__PURE__ */ n("div", { className: "close-button" }),
+          /* @__PURE__ */ n("div", { className: "minimize-button" }),
+          /* @__PURE__ */ n("div", { className: "maximize-button" })
+        ] }),
+        /* @__PURE__ */ n("div", { className: "title", children: t.frameBox.title || "" })
+      ] }),
+      /* @__PURE__ */ n("div", { className: "terminal-body", children: /* @__PURE__ */ n(A, { ref: o, options: R }) })
+    ] }) }),
+    /* @__PURE__ */ f("div", { className: "controller", children: [
+      r.isPlaying && /* @__PURE__ */ n("div", { className: "pause", onClick: J, title: "Pause", children: /* @__PURE__ */ n("span", { className: "icon" }) }),
+      !r.isPlaying && r.isStarted && /* @__PURE__ */ n("div", { className: "play", onClick: z, title: "Play", children: /* @__PURE__ */ n("span", { className: "icon" }) }),
+      !r.isPlaying && !r.isStarted && /* @__PURE__ */ n("div", { className: "play", onClick: g, title: "Start", children: /* @__PURE__ */ n("span", { className: "icon" }) }),
+      /* @__PURE__ */ n("div", { className: "timer", children: G(r.currentTime) }),
+      /* @__PURE__ */ n("div", { className: "progressbar-wrapper", children: /* @__PURE__ */ n("div", { className: "progressbar", ref: k, onClick: q, children: /* @__PURE__ */ n("div", { className: "progress", style: { width: `${r.currentTime / m * 100}%` } }) }) })
+    ] })
+  ] });
 }
-Player.propTypes = {
-  frames: _propTypes.default.array.isRequired,
-  options: _propTypes.default.object.isRequired,
-  onComplete: _propTypes.default.func,
-  onStart: _propTypes.default.func,
-  onStop: _propTypes.default.func,
-  onPause: _propTypes.default.func,
-  onTick: _propTypes.default.func,
-  onJump: _propTypes.default.func
+K.propTypes = {
+  frames: l.array.isRequired,
+  options: l.object.isRequired,
+  onComplete: l.func,
+  onStart: l.func,
+  onStop: l.func,
+  onPause: l.func,
+  onTick: l.func,
+  onJump: l.func
+};
+export {
+  K as default
 };
-Player.defaultProps = {
-  onComplete: _noop.default,
-  onStart: _noop.default,
-  onStop: _noop.default,
-  onPause: _noop.default,
-  onTick: _noop.default,
-  onJump: _noop.default
-};