@arcblock/terminal 3.1.8 → 3.1.9

package/lib/styles.js

@@ -0,0 +1,299 @@
+import e from "@emotion/styled";
+const t = e.div({
+  // Base styles for .terminal-player
+  display: "inline-block",
+  position: "relative",
+  fontSize: 0,
+  // Terminal styles
+  "& .terminal": { display: "inline-block" },
+  "& .terminal .xterm .xterm-viewport": { overflowY: "hidden !important" },
+  // Terminal frame
+  "& .terminal-frame": { position: "relative" },
+  // Reset styles for terminal divs
+  "& .terminal div": {
+    margin: 0,
+    padding: 0,
+    border: 0,
+    outline: 0,
+    fontWeight: "inherit",
+    fontStyle: "inherit",
+    fontSize: "100%",
+    fontFamily: "inherit",
+    verticalAlign: "baseline"
+  },
+  // Window theme
+  "&.terminal-window .terminal-frame": {
+    borderRadius: 6,
+    border: "1px solid #b3b3b3",
+    boxShadow: "0px 0px 18px #b3b3b3",
+    margin: 18,
+    overflow: "hidden",
+    "& .terminal-titlebar": {
+      background: "#e8e8e8",
+      borderBottom: "1px solid #b1aeb1",
+      borderTop: "1px solid #f3f1f3",
+      borderTopLeftRadius: 6,
+      borderTopRightRadius: 6,
+      color: "#3b4247",
+      fontFamily: "Arial, sans-serif",
+      fontSize: 14,
+      height: 22,
+      lineHeight: "22px",
+      position: "relative",
+      textAlign: "center",
+      width: "100%",
+      "& .buttons": { left: 8, lineHeight: "0px", position: "absolute", top: 3.5 },
+      "& .close-button": {
+        background: "#ff5c5c",
+        borderRadius: "50%",
+        border: "1px solid #e33e41",
+        display: "inline-block",
+        height: 12,
+        width: 12
+      },
+      "& .minimize-button": {
+        background: "#ffbd4c",
+        borderRadius: "50%",
+        border: "1px solid #e09e3e",
+        display: "inline-block",
+        height: 12,
+        marginLeft: 4,
+        width: 12
+      },
+      "& .maximize-button": {
+        background: "#00ca56",
+        borderRadius: "50%",
+        border: "1px solid #14ae46",
+        display: "inline-block",
+        height: 12,
+        marginLeft: 4,
+        width: 12
+      }
+    },
+    "& .terminal-body": { backgroundColor: "#1d1d1d", padding: 10 }
+  },
+  // Floating theme
+  "&.terminal-floating .terminal-frame": {
+    backgroundColor: "#1d1d1d",
+    borderRadius: 6,
+    boxShadow: "0px 0px 18px #b3b3b3",
+    margin: 18,
+    overflow: "hidden",
+    "& .terminal-titlebar": {
+      color: "white",
+      fontFamily: "Arial, sans-serif",
+      fontSize: 14,
+      height: 34,
+      lineHeight: "34px",
+      position: "relative",
+      textAlign: "center",
+      width: "100%",
+      "& .buttons": { left: 13, lineHeight: "0px", position: "absolute", top: 9 },
+      "& .close-button": { background: "#ff5c5c", borderRadius: "50%", display: "inline-block", height: 15, width: 15 },
+      "& .minimize-button": {
+        background: "#ffbd4c",
+        borderRadius: "50%",
+        display: "inline-block",
+        height: 15,
+        lineHeight: "10px",
+        marginLeft: 4,
+        width: 15
+      },
+      "& .maximize-button": {
+        background: "#00ca56",
+        borderRadius: "50%",
+        display: "inline-block",
+        height: 15,
+        lineHeight: "10px",
+        marginLeft: 4,
+        width: 15
+      }
+    },
+    "& .terminal-body": { padding: 20 }
+  },
+  // Solid theme
+  "&.terminal-solid .terminal-frame": {
+    backgroundColor: "#1d1d1d",
+    borderRadius: 6,
+    boxShadow: "0px 0px 18px #b3b3b3",
+    margin: 18,
+    overflow: "hidden",
+    "& .terminal-titlebar": {
+      color: "white",
+      fontFamily: "Arial, sans-serif",
+      fontSize: 14,
+      position: "relative",
+      textAlign: "center",
+      width: "100%",
+      "& .title": {
+        margin: "15px 15px 15px",
+        "&:empty": { display: "none" }
+      },
+      "& .buttons": { display: "none" }
+    },
+    "& .terminal-body": { padding: 20 }
+  },
+  // Player controls
+  "& .controller": {
+    background: "#45484d",
+    // Original first background value
+    backgroundColor: "#222222",
+    // Override background (matches original CSS)
+    bottom: "0px",
+    display: "none",
+    fontFamily: "Helvetica, Arial, sans-serif",
+    fontSize: 12,
+    height: 40,
+    position: "absolute",
+    width: "100%",
+    zIndex: 20,
+    transition: "height ease 200ms",
+    WebkitTransition: "height ease 200ms",
+    MozTransition: "height ease 200ms",
+    OTransition: "height ease 200ms"
+  },
+  "&.controls .controller": { display: "block" },
+  "&.playing .controller": { height: 0, overflow: "hidden" },
+  "&.playing:hover .controller": { height: 40, overflow: "hidden" },
+  // Play/Pause buttons
+  "& .play, & .pause": {
+    fill: "#cacaca",
+    float: "left",
+    height: 40,
+    lineHeight: "40px",
+    textAlign: "center",
+    width: 40,
+    "& .icon": {
+      borderColor: "transparent transparent transparent #cacaca",
+      boxSizing: "border-box",
+      cursor: "pointer",
+      display: "inline-block",
+      height: 15
+    }
+  },
+  "& .pause": {
+    display: "none",
+    "& .icon": { borderStyle: "double", borderWidth: "0px 0px 0px 12px", marginTop: 11 }
+  },
+  "& .play .icon": { borderStyle: "solid", borderWidth: "8px 0px 8px 13px", marginTop: 10 },
+  "&.playing .play": { display: "none" },
+  "&.playing .pause": { display: "inline-block" },
+  // Timer
+  "& .timer": { color: "#cacaca", float: "right", lineHeight: "40px", padding: "0 10px" },
+  // Progress bar
+  "& .progressbar-wrapper": { height: 40, lineHeight: "38px", overflow: "hidden" },
+  "& .progressbar": {
+    backgroundColor: "#424242",
+    display: "inline-block",
+    height: 7,
+    overflow: "hidden",
+    width: "100%",
+    borderRadius: 10,
+    MozBorderRadius: 10,
+    WebkitBorderRadius: 10
+  },
+  "&.started .progressbar": { cursor: "pointer" },
+  "& .progress": { backgroundColor: "#cacaca", height: 7, position: "relative", width: "0%" },
+  // Cover and start button
+  "& .cover": { cursor: "pointer", height: "100%", position: "absolute", width: "100%", zIndex: 10 },
+  "& .start svg": {
+    cursor: "pointer",
+    fill: "#eaeaea",
+    height: 130,
+    left: "50%",
+    marginLeft: -65,
+    marginTop: -65,
+    position: "absolute",
+    top: "50%",
+    width: 130,
+    zIndex: 20,
+    filter: "drop-shadow(10px 10px 15px rgba(0, 0, 0, 0.4))",
+    WebkitFilter: "drop-shadow(10px 10px 15px rgba(0, 0, 0, 0.4))"
+  },
+  "&.small .start svg": { height: 60, marginLeft: -30, marginTop: -30, width: 60 },
+  "&.framed .start svg": {
+    transform: "translate(0px, 8px)",
+    WebkitTransform: "translate(0px, 8px)",
+    MozTransform: "translate(0px, 8px)",
+    OTransform: "translate(0px, 8px)",
+    MsTransform: "translate(0px, 8px)"
+  },
+  "& .cover:hover + .start svg, & .start:hover svg": { fill: "white" },
+  "&.started .cover, &.started .start": { display: "none" },
+  "& .terminal-watermark": { zIndex: 99999 }
+}), o = e.div({
+  // Xterm base styles
+  "& .xterm": {
+    fontFeatureSettings: "'liga' 0",
+    position: "relative",
+    userSelect: "none",
+    MsUserSelect: "none",
+    WebkitUserSelect: "none",
+    cursor: "text",
+    "&.focus, &:focus": { outline: "none" },
+    "&.enable-mouse-events": { cursor: "default" },
+    "&.xterm-cursor-pointer": { cursor: "pointer" },
+    "&.column-select.focus": { cursor: "crosshair" }
+  },
+  "& .xterm .xterm-helpers": { position: "absolute", top: 0, zIndex: 5 },
+  "& .xterm .xterm-helper-textarea": {
+    position: "absolute",
+    opacity: 0,
+    left: "-9999em",
+    top: 0,
+    width: 0,
+    height: 0,
+    zIndex: -5,
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    resize: "none"
+  },
+  "& .xterm .composition-view": {
+    background: "#000",
+    color: "#fff",
+    display: "none",
+    position: "absolute",
+    whiteSpace: "nowrap",
+    zIndex: 1,
+    "&.active": { display: "block" }
+  },
+  "& .xterm .xterm-viewport": {
+    backgroundColor: "#000",
+    overflowY: "scroll",
+    cursor: "default",
+    position: "absolute",
+    right: 0,
+    left: 0,
+    top: 0,
+    bottom: 0
+  },
+  "& .xterm .xterm-screen": {
+    position: "relative",
+    "& canvas": { position: "absolute", left: 0, top: 0 }
+  },
+  "& .xterm .xterm-scroll-area": { visibility: "hidden" },
+  "& .xterm-char-measure-element": {
+    display: "inline-block",
+    visibility: "hidden",
+    position: "absolute",
+    top: 0,
+    left: "-9999em",
+    lineHeight: "normal"
+  },
+  "& .xterm .xterm-accessibility, & .xterm .xterm-message": {
+    position: "absolute",
+    left: 0,
+    top: 0,
+    bottom: 0,
+    right: 0,
+    zIndex: 10,
+    color: "transparent"
+  },
+  "& .xterm .live-region": { position: "absolute", left: "-9999px", width: 1, height: 1, overflow: "hidden" },
+  "& .xterm-dim": { opacity: 0.5 },
+  "& .xterm-underline": { textDecoration: "underline" }
+});
+export {
+  t as PlayerRoot,
+  o as TerminalRoot
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/terminal",
-  "version": "3.1.8",
+  "version": "3.1.9",
   "description": "A react wrapper for xterm allowing you to easily render a terminal in the browser",
   "keywords": [
     "react",
@@ -40,10 +40,10 @@
   "peerDependencies": {
     "react": "^19.0.0"
   },
-  "gitHead": "bb291c7f0f1afa39ca3dc07471c63b118a377cbe",
+  "gitHead": "8f16cf31161be5de93a62c7a8128dc040a0a7559",
   "dependencies": {
-    "@arcblock/react-hooks": "3.1.8",
-    "@arcblock/ux": "3.1.8",
+    "@arcblock/react-hooks": "3.1.9",
+    "@arcblock/ux": "3.1.9",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "ahooks": "^3.8.5",

package/src/Player.jsx

@@ -1,14 +1,13 @@
 /* eslint-disable react/no-unused-prop-types */
 import { useReducer, useState, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import useInterval from '@arcblock/react-hooks/lib/useInterval';
-import { useSize } from 'ahooks';
+import { useSize, useInterval } from 'ahooks';
 import isUndefined from 'lodash/isUndefined';
 import noop from 'lodash/noop';
 
 import Terminal from './Terminal';
 
-import './player.css';
+import { PlayerRoot } from './styles';
 
 import {
   formatFrames,
@@ -21,6 +20,8 @@ import {
   defaultState,
 } from './util';
 
+export const PLAYER_FRAME_DELAY = 8;
+
 export default function Player({ ...rawProps }) {
   const props = Object.assign({}, rawProps);
   if (isUndefined(props.onComplete)) {
@@ -55,7 +56,7 @@ export default function Player({ ...rawProps }) {
     letterSpacing: options.letterSpacing,
     allowTransparency: true,
     scrollback: 0,
-    // theme: options.theme,
+    theme: options.theme || {},
   };
 
   const stateReducer = (state, action) => {
@@ -66,35 +67,15 @@ export default function Player({ ...rawProps }) {
       case 'start':
         return { ...state, isStarted: true, lastTickTime: Date.now() };
       case 'play':
-        return {
-          ...state,
-          isPlaying: true,
-          lastTickTime: Date.now(),
-          ...action.payload,
-        };
+        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,
-        };
+        return { ...state, isRendering: true, lastTickTime: Date.now(), ...action.payload };
       case 'tickEnd':
-        return {
-          ...state,
-          isRendering: false,
-          lastTickTime: Date.now(),
-          ...action.payload,
-        };
+        return { ...state, isRendering: false, lastTickTime: Date.now(), ...action.payload };
       case 'reset':
-        return {
-          ...state,
-          currentFrame: 0,
-          currentTime: 0,
-          ...action.payload,
-        };
+        return { ...state, currentFrame: 0, currentTime: 0, ...action.payload };
       default:
         return { ...state, lastTickTime: Date.now(), ...action.payload };
     }
@@ -141,7 +122,7 @@ export default function Player({ ...rawProps }) {
   // Render a frame
   const renderFrame = (frameIndex, done) => {
     const frame = frames[frameIndex];
-    if (frame.content) {
+    if (frame && frame.content) {
       if (state.requireReset) {
         terminal.current.reset();
       }
@@ -275,7 +256,11 @@ export default function Player({ ...rawProps }) {
       }
 
       // Check if current time belongs to the next frame's duration
-      if (isFrameAt(newState.currentTime, state.currentFrame + 1)) {
+      if (
+        newState?.currentTime != null &&
+        state?.currentFrame != null &&
+        isFrameAt(newState.currentTime, state.currentFrame + 1)
+      ) {
         newState.currentFrame = state.currentFrame + 1;
       } else {
         newState.currentFrame = findFrameAt(frames, newState.currentTime);
@@ -291,7 +276,7 @@ export default function Player({ ...rawProps }) {
         return emitEvent('onTick');
       });
     },
-    state.isPlaying ? 8 : null
+    state.isPlaying ? PLAYER_FRAME_DELAY : null
   );
 
   // If controls are enabled, we need to disable frameBox
@@ -300,9 +285,9 @@ export default function Player({ ...rawProps }) {
     options.frameBox.type = null;
     options.frameBox.style = {};
 
-    if (options.theme.background === 'transparent') {
+    if (options.theme?.background === 'transparent') {
       options.frameBox.style.background = 'black';
-    } else {
+    } else if (options.theme?.background) {
       options.frameBox.style.background = options.theme.background;
     }
 
@@ -311,7 +296,7 @@ export default function Player({ ...rawProps }) {
   }
 
   return (
-    <div className={getPlayerClass(options, state)} ref={container}>
+    <PlayerRoot 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">
@@ -360,13 +345,21 @@ export default function Player({ ...rawProps }) {
           </div>
         </div>
       </div>
-    </div>
+    </PlayerRoot>
   );
 }
 
 Player.propTypes = {
   frames: PropTypes.array.isRequired,
-  options: PropTypes.object.isRequired,
+  options: PropTypes.shape({
+    autoplay: PropTypes.bool,
+    repeat: PropTypes.bool,
+    controls: PropTypes.bool,
+    frameBox: PropTypes.object,
+    theme: PropTypes.object,
+    cols: PropTypes.number,
+    rows: PropTypes.number,
+  }).isRequired,
   onComplete: PropTypes.func,
   onStart: PropTypes.func,
   onStop: PropTypes.func,

package/src/Player.stories.jsx

@@ -1,4 +1,8 @@
 export { default as Player } from './demo/player';
+export { default as AutoPlay } from './demo/autoplay';
+export { default as Loop } from './demo/loop';
+export { default as AutoPlayLoop } from './demo/autoplay-loop';
+export { default as RecordingGuide } from './demo/recording-guide';
 
 export default {
   title: 'Data Display/Terminal/Player',

package/src/Terminal.jsx

@@ -7,8 +7,7 @@ import { WebLinksAddon } from 'xterm-addon-web-links';
 import { FitAddon } from 'xterm-addon-fit';
 import debounce from 'lodash/debounce';
 import noop from 'lodash/noop';
-
-import './xterm.css';
+import { TerminalRoot } from './styles';
 
 export default class Terminal extends React.Component {
   xterm = null;
@@ -129,8 +128,13 @@ export default class Terminal extends React.Component {
     const { className = '', style = {} } = this.props;
     const combinedClassName = ['react-xterm', className].filter(Boolean).join(' ');
     return (
-      // eslint-disable-next-line no-return-assign
-      <div ref={(ref) => (this.container = ref)} className={combinedClassName} style={style} />
+      <TerminalRoot
+        ref={(ref) => {
+          this.container = ref;
+        }}
+        className={combinedClassName}
+        style={style}
+      />
     );
   }
 }