@arcblock/ux 1.16.0 → 1.16.4

package/src/Terminal/Player.js

@@ -0,0 +1,364 @@
+/* eslint-disable react/no-unused-prop-types */
+import React, { useReducer, useState, useRef, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import useInterval from '@arcblock/react-hooks/lib/useInterval';
+import useWindowSize from 'react-use/lib/useWindowSize';
+
+import Terminal from './index';
+
+import './player.css';
+
+import {
+  formatFrames,
+  formatTime,
+  findFrameAt,
+  isFrameAt,
+  getFrameClass,
+  getPlayerClass,
+  defaultOptions,
+  defaultState,
+} from './util';
+
+export default function Player(props) {
+  const options = Object.assign({}, defaultOptions, props.options);
+  const { frames, totalDuration } = 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 { ...state, isPlaying: false, ...action.payload };
+      case 'start':
+        return { ...state, isStarted: true, lastTickTime: Date.now() };
+      case 'play':
+        return {
+          ...state,
+          isPlaying: true,
+          lastTickTime: Date.now(),
+          ...action.payload,
+        };
+      case 'pause':
+        return { ...state, isPlaying: false, ...action.payload };
+      case 'tickStart':
+        return {
+          ...state,
+          isRendering: true,
+          lastTickTime: Date.now(),
+          ...action.payload,
+        };
+      case 'tickEnd':
+        return {
+          ...state,
+          isRendering: false,
+          lastTickTime: Date.now(),
+          ...action.payload,
+        };
+      case 'reset':
+        return {
+          ...state,
+          currentFrame: 0,
+          currentTime: 0,
+          ...action.payload,
+        };
+      default:
+        return { ...state, lastTickTime: Date.now(), ...action.payload };
+    }
+  };
+
+  const terminal = useRef(null);
+  const progress = useRef(null);
+  const container = useRef(null);
+  const [maxWidth, setMaxWidth] = useState(0);
+  const { width } = useWindowSize();
+  const [state, dispatch] = useReducer(stateReducer, defaultState);
+
+  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
+    }
+  }, [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
+  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));
+    }
+  }, []);
+
+  // Tick intervals
+  useInterval(
+    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 = 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 (isFrameAt(newState.currentTime, state.currentFrame + 1)) {
+        newState.currentFrame = state.currentFrame + 1;
+      } else {
+        newState.currentFrame = 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 = 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 (
+    <div className={getPlayerClass(options, state)} ref={container}>
+      <div className="cover" onClick={onStart} />
+      <div className="start" onClick={onStart}>
+        <svg style={{ enableBackground: 'new 0 0 30 30' }} viewBox="0 0 30 30">
+          <polygon points="6.583,3.186 5,4.004 5,15 26,15 26.483,14.128 " />
+          <polygon points="6.583,26.814 5,25.996 5,15 26,15 26.483,15.872 " />
+          <circle cx="26" cy="15" r="1" />
+          <circle cx="6" cy="4" r="1" />
+          <circle cx="6" cy="26" r="1" />
+        </svg>
+      </div>
+      <div className="terminal">
+        <div className={getFrameClass(options)} style={options.frameBox.style || {}}>
+          <div className="terminal-titlebar">
+            <div className="buttons">
+              <div className="close-button" />
+              <div className="minimize-button" />
+              <div className="maximize-button" />
+            </div>
+            <div className="title">{options.frameBox.title || ''}</div>
+          </div>
+          <div className="terminal-body">
+            <Terminal ref={terminal} options={terminalOptions} />
+          </div>
+        </div>
+      </div>
+      <div className="controller">
+        {state.isPlaying && (
+          <div className="pause" onClick={onPause} title="Pause">
+            <span className="icon" />
+          </div>
+        )}
+        {!state.isPlaying && state.isStarted && (
+          <div className="play" onClick={onPlay} title="Play">
+            <span className="icon" />
+          </div>
+        )}
+        {!state.isPlaying && !state.isStarted && (
+          <div className="play" onClick={onStart} title="Start">
+            <span className="icon" />
+          </div>
+        )}
+        <div className="timer">{formatTime(state.currentTime)}</div>
+        <div className="progressbar-wrapper">
+          <div className="progressbar" ref={progress} onClick={onJump}>
+            <div
+              className="progress"
+              style={{ width: `${(state.currentTime / totalDuration) * 100}%` }}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+Player.propTypes = {
+  frames: PropTypes.array.isRequired,
+  options: PropTypes.object.isRequired,
+  onComplete: PropTypes.func,
+  onStart: PropTypes.func,
+  onStop: PropTypes.func,
+  onPause: PropTypes.func,
+  onTick: PropTypes.func,
+  onJump: PropTypes.func,
+};
+
+const noop = () => {};
+Player.defaultProps = {
+  onComplete: noop,
+  onStart: noop,
+  onStop: noop,
+  onPause: noop,
+  onTick: noop,
+  onJump: noop,
+};

package/src/Terminal/index.js

@@ -0,0 +1,150 @@
+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: {},
+};