@arcblock/terminal 2.5.57 → 2.5.59

package/lib/Player.js

@@ -4,31 +4,20 @@ 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 _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } /* eslint-disable react/no-unused-prop-types */
 function Player(props) {
   const options = Object.assign({}, _util.defaultOptions, props.options);
   const {
@@ -44,8 +33,8 @@ function Player(props) {
     lineHeight: options.lineHeight,
     letterSpacing: options.letterSpacing,
     allowTransparency: true,
-    scrollback: 0 // theme: options.theme,
-
+    scrollback: 0
+    // theme: options.theme,
   };
 
   const stateReducer = (state, action) => {
@@ -55,49 +44,41 @@ function Player(props) {
         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);
@@ -110,50 +91,45 @@ function Player(props) {
     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
+    } catch (err) {
+      // Do nothing
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [width, maxWidth]);
 
-  }, [width, maxWidth]); // console.log('main.render', state, { totalFrame: frames.length, totalDuration });
+  // 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
-
+  };
 
+  // Emit a event
   const emitEvent = name => {
     if (typeof props[name] === 'function') {
       props[name]({
@@ -162,67 +138,61 @@ function Player(props) {
         options
       });
     }
-  }; // Render thumbnailTime
-
+  };
 
+  // Render thumbnailTime
   (0, _react.useEffect)(() => {
     if (!terminal.current) {
       return;
     }
-
     if (container.current) {
       try {
         setMaxWidth(container.current.getBoundingClientRect().width);
-      } catch (e) {// Do nothing
+      } 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
+    }
+    // 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
-
+    }
 
+    // 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);
-
+      }
 
+      // console.log('tick.end', newState, state);
       newState.currentTime = 0;
       newState.currentFrame = 0;
       newState.requireReset = true;
@@ -231,16 +201,16 @@ function Player(props) {
         type: 'pause',
         payload: newState
       });
-    } // Check if current time belongs to the next frame's duration
-
+    }
 
+    // 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);
-
+    }
 
+    // console.log('tick.tick', newState, state);
     dispatch({
       type: 'tickStart',
       payload: newState
@@ -249,46 +219,41 @@ function Player(props) {
       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
+  }, 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 position = e.nativeEvent.offsetX;
+    // console.log('onJump', { length, position, e });
 
     const currentTime = Math.floor(totalDuration * position / length);
     dispatch({
@@ -301,7 +266,6 @@ function Player(props) {
     emitEvent('onJump');
     return false;
   };
-
   const onStart = () => {
     if (state.isStarted === false) {
       dispatch({
@@ -309,14 +273,12 @@ function Player(props) {
       });
       terminal.current.reset();
     }
-
     dispatch({
       type: 'play'
     });
     emitEvent('onStart');
     return false;
   };
-
   const onPause = () => {
     dispatch({
       type: 'pause'
@@ -324,7 +286,6 @@ function Player(props) {
     emitEvent('onPause');
     return false;
   };
-
   const onPlay = () => {
     if (state.currentFrame === frames.length - 1 && state.currentTime === totalDuration) {
       dispatch({
@@ -332,11 +293,9 @@ function Player(props) {
       });
       terminal.current.reset();
     }
-
     emitEvent('onPlay');
     return onStart();
   };
-
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: (0, _util.getPlayerClass)(options, state),
     ref: container,
@@ -440,7 +399,6 @@ function Player(props) {
     })]
   });
 }
-
 Player.propTypes = {
   frames: _propTypes.default.array.isRequired,
   options: _propTypes.default.object.isRequired,
@@ -451,9 +409,7 @@ Player.propTypes = {
   onTick: _propTypes.default.func,
   onJump: _propTypes.default.func
 };
-
 const noop = () => {};
-
 Player.defaultProps = {
   onComplete: noop,
   onStart: noop,

package/lib/Terminal.js

@@ -4,48 +4,34 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _xterm = require("xterm");
-
 var _xtermAddonWebLinks = require("xterm-addon-web-links");
-
 var _xtermAddonFit = require("xterm-addon-fit");
-
 var _lodash = require("lodash");
-
 require("./xterm.css");
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-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 _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } /* eslint-disable react/no-unused-class-component-methods */
 class Terminal extends _react.default.Component {
   constructor() {
     super(...arguments);
-
     _defineProperty(this, "xterm", null);
-
     _defineProperty(this, "container", null);
-
     _defineProperty(this, "onData", data => {
       if (this.props.onData) {
         this.props.onData(data);
       }
     });
-
     _defineProperty(this, "onRender", data => {
       if (this.props.onRender) {
         this.props.onRender(data);
       }
     });
   }
-
   componentDidMount() {
     const {
       value,
@@ -58,11 +44,9 @@ class Terminal extends _react.default.Component {
     this.xterm.open(this.container);
     this.xterm.onData(this.onData.bind(this));
     this.xterm.onRender(this.onRender.bind(this));
-
     if (value) {
       this.xterm.write(value);
     }
-
     setTimeout(() => {
       if (this.xterm) {
         this.fitAddon.fit();
@@ -73,16 +57,13 @@ class Terminal extends _react.default.Component {
     }, 600);
     window.addEventListener('resize', this.debounceFit);
   }
-
   componentWillUnmount() {
     if (this.xterm) {
       this.xterm.dispose();
       this.xterm = null;
     }
-
     window.removeEventListener('resize', this.debounceFit);
   }
-
   shouldComponentUpdate(nextProps) {
     // eslint-disable-next-line no-prototype-builtins
     if (nextProps.hasOwnProperty('value') && nextProps.value !== this.props.value) {
@@ -93,56 +74,46 @@ class Terminal extends _react.default.Component {
         }, 0);
       }
     }
-
     return false;
   }
-
   getXTerm() {
     return this.xterm;
   }
-
   write(data, cb) {
     if (this.xterm) {
       this.xterm.write(data, cb);
     }
   }
-
   focus() {
     if (this.xterm) {
       this.xterm.focus();
     }
   }
-
   reset() {
     if (this.xterm) {
       this.xterm.reset();
     }
   }
-
   resize(cols, rows) {
     if (this.xterm) {
       this.xterm.resize(Math.round(cols), Math.round(rows));
     }
   }
-
   setOption(key, value) {
     if (this.xterm) {
       this.xterm.setOption(key, value);
     }
   }
-
   getOption(key) {
     if (this.xterm) {
       this.xterm.setOption(key);
     }
   }
-
   refresh() {
     if (this.xterm) {
       this.xterm.refresh(0, this.xterm.rows - 1);
     }
   }
-
   render() {
     const className = ['react-xterm', this.props.className].filter(Boolean).join(' ');
     return (
@@ -155,9 +126,7 @@ class Terminal extends _react.default.Component {
       })
     );
   }
-
 }
-
 exports.default = Terminal;
 Terminal.propTypes = {
   onData: _propTypes.default.func,
@@ -167,9 +136,7 @@ Terminal.propTypes = {
   className: _propTypes.default.string,
   style: _propTypes.default.object
 };
-
 const noop = () => {};
-
 Terminal.defaultProps = {
   onData: noop,
   onRender: noop,

package/lib/index.js

@@ -15,9 +15,6 @@ Object.defineProperty(exports, "TerminalPlayer", {
     return _Player.default;
   }
 });
-
 var _Terminal = _interopRequireDefault(require("./Terminal"));
-
 var _Player = _interopRequireDefault(require("./Player"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/util.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.isFrameAt = exports.getPlayerClass = exports.getFrameClass = exports.formatTime = exports.formatFrames = exports.findFrameAt = exports.defaultState = exports.defaultOptions = void 0;
-
 /**
  * Adjust the delays of the frames, considering to the options
  *
@@ -24,70 +23,70 @@ const formatFrames = (frames, options) => {
   frames.forEach(x => {
     let {
       delay
-    } = x; // Adjust the delay according to the options
+    } = x;
 
+    // Adjust the delay according to the options
     if (options.frameDelay !== 'auto') {
       delay = options.frameDelay;
     } else if (options.maxIdleTime !== 'auto' && delay > options.maxIdleTime) {
       delay = options.maxIdleTime;
-    } // Apply speedFactor
-
+    }
 
-    delay *= options.speedFactor; // Set the adjusted delay
+    // Apply speedFactor
+    delay *= options.speedFactor;
 
+    // Set the adjusted delay
     x.delay = delay;
-  }); // Calculate and set the duration, startTime, and endTime for each frame
+  });
 
+  // Calculate and set the duration, startTime, and endTime for each frame
   let currentTime = 0;
   const framesCount = frames.length;
   frames.forEach((x, index) => {
     // Set the duration (the delay of the next frame)
     // The % is used to take the delay of the first frame
     // as the duration of the last frame
-    const duration = frames[(index + 1) % framesCount].delay; // Set timing values for the current frame
+    const duration = frames[(index + 1) % framesCount].delay;
 
+    // Set timing values for the current frame
     x.duration = duration;
     x.startTime = currentTime;
     x.endTime = currentTime + duration;
     currentTime += duration;
-  }); // Total duration
+  });
 
+  // Total duration
   const totalDuration = frames.reduce((sum, x) => sum + x.delay, 0);
   return {
     frames,
     totalDuration
   };
 };
+
 /**
  * Get the frame's index at a specific time
  */
-
-
 exports.formatFrames = formatFrames;
-
 const findFrameAt = (frames, time, fromIndex) => {
   let frame = null;
-
   if (typeof fromIndex === 'undefined') {
     // eslint-disable-next-line no-param-reassign
     fromIndex = 0;
   }
-
   for (let i = fromIndex; i < frames.length; i++) {
     frame = frames[i];
-
     if (frame.startTime <= time && time < frame.endTime) {
       return i;
     }
-  } // The endTime of the final frame belongs to it
-
+  }
 
+  // The endTime of the final frame belongs to it
   if (frame.startTime <= time && time <= frame.endTime) {
     return frames.length - 1;
   }
-
   return -1;
 };
+
 /**
  * Check if the time belongs to the frame's duration
  *
@@ -95,81 +94,57 @@ const findFrameAt = (frames, time, fromIndex) => {
  * @param  {Number} frameIndex
  * @return {Number}
  */
-
-
 exports.findFrameAt = findFrameAt;
-
 const isFrameAt = (frames, time, frameIndex) => {
   const frame = frames[frameIndex];
-
   if (typeof frame === 'undefined') {
     return false;
   }
-
   if (frame.startTime <= time && time < frame.endTime) {
     return true;
   }
-
   return false;
 };
-
 exports.isFrameAt = isFrameAt;
-
 const formatTime = time => {
   let minutes = Math.floor(time / 60000);
   let seconds = parseInt((time - minutes * 60000) / 1000, 10);
-
   if (minutes < 10) {
     minutes = "0".concat(minutes);
   }
-
   if (seconds < 10) {
     seconds = "0".concat(seconds);
   }
-
   return "".concat(minutes, ":").concat(seconds);
 };
-
 exports.formatTime = formatTime;
-
 const getPlayerClass = (options, state) => {
   const playerClass = ['terminal-player'];
-
   if (options.controls) {
     playerClass.push('controls');
   }
-
   if (options.frameBox.type) {
     playerClass.push('framed');
   }
-
   if (options.rows < 10) {
     playerClass.push('small');
   }
-
   if (state.isStarted) {
     playerClass.push('started');
   }
-
   if (state.isPlaying) {
     playerClass.push('playing');
   }
-
   return playerClass.filter(Boolean).join(' ');
 };
-
 exports.getPlayerClass = getPlayerClass;
-
 const getFrameClass = options => {
   const frameClass = ['terminal-frame'];
-
   if (options.frameBox.type) {
     frameClass.push("terminal-".concat(options.frameBox.type));
   }
-
   return frameClass.join(' ');
 };
-
 exports.getFrameClass = getFrameClass;
 const defaultState = {
   isPlaying: false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/terminal",
-  "version": "2.5.57",
+  "version": "2.5.59",
   "description": "A react wrapper for xterm allowing you to easily render a terminal in the browser",
   "keywords": [
     "react",
@@ -46,10 +46,10 @@
   "peerDependencies": {
     "react": ">=18.1.0"
   },
-  "gitHead": "9f8e3807e5776e3601245b193a124981f0d83ca8",
+  "gitHead": "f50c420e5f06ae108d59636cfdcfde88d1e10f4c",
   "dependencies": {
-    "@arcblock/react-hooks": "^2.5.57",
-    "@arcblock/ux": "^2.5.57",
+    "@arcblock/react-hooks": "^2.5.59",
+    "@arcblock/ux": "^2.5.59",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
     "core-js": "^3.25.5",