@arcblock/terminal 2.1.61

package/src/player.css

@@ -0,0 +1,378 @@
+.terminal-player,
+.terminal {
+  display: inline-block;
+}
+
+.terminal .xterm .xterm-viewport {
+  overflow-y: hidden !important;
+}
+
+.terminal-frame {
+  position: relative;
+}
+
+/*//// [ Reset ] ////*/
+
+.terminal div {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  font-weight: inherit;
+  font-style: inherit;
+  font-size: 100%;
+  font-family: inherit;
+  vertical-align: baseline;
+}
+
+/*//// [ Window ] ////*/
+
+.terminal-frame.terminal-window {
+  -moz-border-radius: 6px;
+  -webkit-border-radius: 6px;
+  border-radius: 6px;
+  border: 1px solid #b3b3b3;
+  box-shadow: 0px 0px 18px #b3b3b3;
+  margin: 18px;
+  overflow: hidden;
+}
+
+.terminal-frame.terminal-window .terminal-titlebar {
+  -moz-border-top-left-radius: 6px;
+  -moz-border-top-right-radius: 6px;
+  -webkit-border-top-left-radius: 6px;
+  -webkit-border-top-right-radius: 6px;
+  background: #e8e8e8;
+  border-bottom: 1px solid #b1aeb1;
+  border-top-left-radius: 6px;
+  border-top-right-radius: 6px;
+  border-top: 1px solid #f3f1f3;
+  color: #3b4247;
+  font-family: Arial, sans-serif;
+  font-size: 14px;
+  height: 22px;
+  line-height: 22px;
+  position: relative;
+  text-align: center;
+  width: 100%;
+}
+
+.terminal-frame.terminal-window .terminal-titlebar .buttons {
+  left: 8px;
+  line-height: 0px;
+  position: absolute;
+  top: 3.5px;
+}
+
+.terminal-frame.terminal-window .terminal-titlebar .close-button {
+  -moz-border-radius: 50%;
+  -webkit-border-radius: 50%;
+  background: #ff5c5c;
+  border-radius: 50%;
+  border: 1px solid #e33e41;
+  display: inline-block;
+  height: 12px;
+  width: 12px;
+}
+
+.terminal-frame.terminal-window .terminal-titlebar .minimize-button {
+  -moz-border-radius: 50%;
+  -webkit-border-radius: 50%;
+  background: #ffbd4c;
+  border-radius: 50%;
+  border: 1px solid #e09e3e;
+  display: inline-block;
+  height: 12px;
+  margin-left: 4px;
+  width: 12px;
+}
+
+.terminal-frame.terminal-window .terminal-titlebar .maximize-button {
+  -moz-border-radius: 50%;
+  -webkit-border-radius: 50%;
+  background: #00ca56;
+  border-radius: 50%;
+  border: 1px solid #14ae46;
+  display: inline-block;
+  height: 12px;
+  margin-left: 4px;
+  width: 12px;
+}
+
+.terminal-frame.terminal-window .terminal-body {
+  background-color: #1d1d1d;
+  padding: 10px;
+}
+
+/*//// [ Floating ] ////*/
+
+.terminal-frame.terminal-floating {
+  -moz-border-radius: 6px;
+  -webkit-border-radius: 6px;
+  background-color: #1d1d1d;
+  border-radius: 6px;
+  box-shadow: 0px 0px 18px #b3b3b3;
+  margin: 18px;
+  overflow: hidden;
+}
+
+.terminal-frame.terminal-floating .terminal-titlebar {
+  color: white;
+  font-family: Arial, sans-serif;
+  font-size: 14px;
+  height: 34px;
+  line-height: 34px;
+  position: relative;
+  text-align: center;
+  width: 100%;
+}
+
+.terminal-frame.terminal-floating .terminal-titlebar .buttons {
+  left: 13px;
+  line-height: 0px;
+  position: absolute;
+  top: 9px;
+}
+
+.terminal-frame.terminal-floating .terminal-titlebar .close-button {
+  -moz-border-radius: 50%;
+  -webkit-border-radius: 50%;
+  background: #ff5c5c;
+  border-radius: 50%;
+  display: inline-block;
+  height: 15px;
+  width: 15px;
+}
+
+.terminal-frame.terminal-floating .terminal-titlebar .minimize-button {
+  -moz-border-radius: 50%;
+  -webkit-border-radius: 50%;
+  background: #ffbd4c;
+  border-radius: 50%;
+  display: inline-block;
+  height: 15px;
+  line-height: 10px;
+  margin-left: 4px;
+  width: 15px;
+}
+
+.terminal-frame.terminal-floating .terminal-titlebar .maximize-button {
+  -moz-border-radius: 50%;
+  -webkit-border-radius: 50%;
+  background: #00ca56;
+  border-radius: 50%;
+  display: inline-block;
+  height: 15px;
+  line-height: 10px;
+  margin-left: 4px;
+  width: 15px;
+}
+
+.terminal-frame.terminal-floating .terminal-body {
+  padding: 20px;
+}
+
+/*//// [ Solid ] ////*/
+
+.terminal-frame.terminal-solid {
+  -moz-border-radius: 6px;
+  -webkit-border-radius: 6px;
+  background-color: #1d1d1d;
+  border-radius: 6px;
+  box-shadow: 0px 0px 18px #b3b3b3;
+  margin: 18px;
+  overflow: hidden;
+}
+
+.terminal-frame.terminal-solid .terminal-titlebar {
+  color: white;
+  font-family: Arial, sans-serif;
+  font-size: 14px;
+  position: relative;
+  text-align: center;
+  width: 100%;
+}
+
+.terminal-frame.terminal-solid .terminal-titlebar .title {
+  margin: 15px 15px 15px;
+}
+
+.terminal-frame.terminal-solid .terminal-titlebar .title:empty {
+  display: none;
+}
+
+.terminal-frame.terminal-solid .terminal-titlebar .buttons {
+  display: none;
+}
+
+.terminal-frame.terminal-solid .terminal-body {
+  padding: 20px;
+}
+
+/*//// [ Player ] ////*/
+
+.terminal-player {
+  position: relative;
+  font-size: 0;
+}
+
+.terminal-player .controller {
+  background: #45484d;
+  bottom: 0px;
+  display: none;
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 12px;
+  height: 40px;
+  position: absolute;
+  width: 100%;
+  z-index: 20;
+  background: #222222;
+  transition: height ease 200ms;
+  -webkit-transition: height ease 200ms;
+  -moz-transition: height ease 200ms;
+  -o-transition: height ease 200ms;
+}
+
+.terminal-player.controls .controller {
+  display: block;
+}
+
+.terminal-player.playing .controller {
+  height: 0px;
+  overflow: hidden;
+}
+
+.terminal-player.playing:hover .controller {
+  height: 40px;
+  overflow: hidden;
+}
+
+.terminal-player .play,
+.terminal-player .pause {
+  fill: #cacaca;
+  float: left;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  width: 40px;
+}
+
+.terminal-player .play .icon,
+.terminal-player .pause .icon {
+  border-color: transparent transparent transparent #cacaca;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: inline-block;
+  height: 15px;
+}
+
+.terminal-player .pause .icon {
+  border-style: double;
+  border-width: 0px 0px 0px 12px;
+  margin-top: 11px;
+}
+
+.terminal-player .play .icon {
+  border-style: solid;
+  border-width: 8px 0px 8px 13px;
+  margin-top: 10px;
+}
+
+.terminal-player .pause {
+  display: none;
+}
+
+.terminal-player.playing .play {
+  display: none;
+}
+
+.terminal-player.playing .pause {
+  display: inline-block;
+}
+
+.terminal-player .timer {
+  color: #cacaca;
+  float: right;
+  line-height: 40px;
+  padding: 0 10px;
+}
+
+.terminal-player .progressbar-wrapper {
+  height: 40px;
+  line-height: 38px;
+  overflow: hidden;
+}
+
+.terminal-player .progressbar {
+  background-color: #424242;
+  display: inline-block;
+  height: 7px;
+  overflow: hidden;
+  width: 100%;
+  border-radius: 10px;
+  -moz-border-radius: 10px;
+  -webkit-border-radius: 10px;
+}
+
+.terminal-player.started .progressbar {
+  cursor: pointer;
+}
+
+.terminal-player .progress {
+  background-color: #cacaca;
+  height: 7px;
+  position: relative;
+  width: 0%;
+}
+
+.terminal-player .cover {
+  cursor: pointer;
+  height: 100%;
+  position: absolute;
+  width: 100%;
+  z-index: 10;
+}
+
+.terminal-player .start svg {
+  cursor: pointer;
+  fill: #eaeaea;
+  height: 130px;
+  left: 50%;
+  margin-left: -65px;
+  margin-top: -65px;
+  position: absolute;
+  top: 50%;
+  width: 130px;
+  z-index: 20;
+  filter: drop-shadow(10px 10px 15px rgba(0, 0, 0, 0.4));
+  -webkit-filter: drop-shadow(10px 10px 15px rgba(0, 0, 0, 0.4));
+}
+
+.terminal-player.small .start svg {
+  height: 60px;
+  margin-left: -30px;
+  margin-top: -30px;
+  width: 60px;
+}
+
+.terminal-player.framed .start svg {
+  transform: translate(0px, 8px);
+  -webkit-transform: translate(0px, 8px);
+  -moz-transform: translate(0px, 8px);
+  -o-transform: translate(0px, 8px);
+  -ms-transform: translate(0px, 8px);
+}
+
+.terminal-player .cover:hover + .start svg,
+.terminal-player .start:hover svg {
+  fill: white;
+}
+
+.terminal-player.started .cover,
+.terminal-player.started .start {
+  display: none;
+}
+
+.terminal-player .terminal-watermark {
+  z-index: 99999;
+}

package/src/terminal.js

@@ -0,0 +1,151 @@
+/* eslint-disable react/no-unused-class-component-methods */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Terminal as XTerm } from 'xterm';
+import { WebLinksAddon } from 'xterm-addon-web-links';
+import { FitAddon } from 'xterm-addon-fit';
+import { debounce } from 'lodash';
+
+import './xterm.css';
+
+export default class Terminal extends React.Component {
+  xterm = null;
+
+  container = null;
+
+  componentDidMount() {
+    const { value, options } = this.props;
+    this.fitAddon = new FitAddon();
+
+    this.xterm = new XTerm(options);
+    this.xterm.loadAddon(new WebLinksAddon());
+    this.xterm.loadAddon(this.fitAddon);
+
+    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();
+      }
+    }, 0);
+
+    this.debounceFit = debounce(() => {
+      this.fitAddon.fit();
+    }, 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) {
+      if (this.xterm) {
+        this.xterm.clear();
+        setTimeout(() => {
+          this.xterm.write(nextProps.value);
+        }, 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();
+    }
+  }
+
+  onData = (data) => {
+    if (this.props.onData) {
+      this.props.onData(data);
+    }
+  };
+
+  onRender = (data) => {
+    if (this.props.onRender) {
+      this.props.onRender(data);
+    }
+  };
+
+  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 (
+      // eslint-disable-next-line no-return-assign
+      <div ref={(ref) => (this.container = ref)} className={className} style={this.props.style} />
+    );
+  }
+}
+
+Terminal.propTypes = {
+  onData: PropTypes.func,
+  onRender: PropTypes.func,
+  options: PropTypes.object,
+  value: PropTypes.string,
+  className: PropTypes.string,
+  style: PropTypes.object,
+};
+
+const noop = () => {};
+Terminal.defaultProps = {
+  onData: noop,
+  onRender: noop,
+  options: {},
+  value: '',
+  className: '',
+  style: {},
+};

package/src/util.js

@@ -0,0 +1,167 @@
+/**
+ * Adjust the delays of the frames, considering to the options
+ *
+ * - frameDelay
+ *   - Delay between frames in ms
+ *   - If the value is `auto` use the actual recording delays
+ *
+ * - maxIdleTime
+ *   - Maximum delay between frames in ms
+ *   - Ignored if the `frameDelay` isn't set to `auto`
+ *   - Set to `auto` to prevnt limiting the max idle time
+ *
+ * - speedFactor
+ *   - Multiply the frames delays by this factor
+ */
+export const formatFrames = (frames, options) => {
+  frames.forEach((x) => {
+    let { delay } = 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
+    x.delay = delay;
+  });
+
+  // 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
+    x.duration = duration;
+    x.startTime = currentTime;
+    x.endTime = currentTime + duration;
+
+    currentTime += 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
+ */
+export 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
+  if (frame.startTime <= time && time <= frame.endTime) {
+    return frames.length - 1;
+  }
+
+  return -1;
+};
+
+/**
+ * Check if the time belongs to the frame's duration
+ *
+ * @param  {Number} time
+ * @param  {Number} frameIndex
+ * @return {Number}
+ */
+export 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;
+};
+
+export const formatTime = (time) => {
+  let minutes = Math.floor(time / 60000);
+  let seconds = parseInt((time - minutes * 60000) / 1000, 10);
+
+  if (minutes < 10) {
+    minutes = `0${minutes}`;
+  }
+  if (seconds < 10) {
+    seconds = `0${seconds}`;
+  }
+
+  return `${minutes}:${seconds}`;
+};
+
+export 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(' ');
+};
+
+export const getFrameClass = (options) => {
+  const frameClass = ['terminal-frame'];
+  if (options.frameBox.type) {
+    frameClass.push(`terminal-${options.frameBox.type}`);
+  }
+
+  return frameClass.join(' ');
+};
+
+export const defaultState = {
+  isPlaying: false,
+  isStarted: false,
+  isRendering: false,
+  requireReset: false,
+  currentFrame: -1,
+  currentTime: 0,
+  lastTickTime: null,
+};
+
+export const defaultOptions = {
+  realTiming: false,
+  speedFactor: 1.0,
+  controls: true,
+  repeat: false,
+  autoplay: false,
+  thumbnailTime: 999999,
+  frameBox: {},
+};