@arcblock/terminal 2.1.61

package/LICENSE

@@ -0,0 +1,13 @@
+Copyright 2018-2022 ArcBlock
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

package/README.md

@@ -0,0 +1,19 @@
+![@arcblock/terminal](https://www.arcblock.io/.netlify/functions/badge/?text=terminal)
+
+> Terminal Player is a react wrapper for `xterm` allowing you to easily render a terminal in the browser.
+
+## Usage
+
+```shell
+yarn add @arcblock/terminal
+```
+
+Then:
+
+```javascript
+import Terminal from '@arcblock/terminal';
+
+export default function Demo() {
+  return <Player frames={records} options={config} />;
+}
+```

package/lib/Player.js

@@ -0,0 +1,464 @@
+"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 _useWindowSize = _interopRequireDefault(require("react-use/lib/useWindowSize"));
+
+var _terminal = _interopRequireDefault(require("./terminal"));
+
+require("./player.css");
+
+var _util = require("./util");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+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,
+    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), {}, {
+          currentFrame: 0,
+          currentTime: 0
+        }, action.payload);
+
+      default:
+        return _objectSpread(_objectSpread({}, state), {}, {
+          lastTickTime: Date.now()
+        }, action.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 {
+    width
+  } = (0, _useWindowSize.default)();
+  const [state, dispatch] = (0, _react.useReducer)(stateReducer, _util.defaultState);
+  (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;
+        }
+      }
+
+      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();
+        }
+      });
+    }
+  }; // Emit a event
+
+
+  const emitEvent = name => {
+    if (typeof props[name] === 'function') {
+      props[name]({
+        state,
+        frames,
+        options
+      });
+    }
+  }; // 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)(async () => {
+    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';
+  }
+
+  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 = async () => {
+    if (state.currentFrame === frames.length - 1 && state.currentTime === totalDuration) {
+      dispatch({
+        type: 'reset'
+      });
+      terminal.current.reset();
+    }
+
+    emitEvent('onPlay');
+    return onStart();
+  };
+
+  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, "%")
+            }
+          })
+        })
+      })]
+    })]
+  });
+}
+
+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
+};
+
+const noop = () => {};
+
+Player.defaultProps = {
+  onComplete: noop,
+  onStart: noop,
+  onStop: noop,
+  onPause: noop,
+  onTick: noop,
+  onJump: noop
+};

package/lib/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _Player.default;
+  }
+});
+
+var _Player = _interopRequireDefault(require("./Player"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }