@arcblock/terminal 3.4.15 → 3.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/terminal",
-  "version": "3.4.15",
+  "version": "3.5.0",
   "description": "A react wrapper for xterm allowing you to easily render a terminal in the browser",
   "keywords": [
     "react",
@@ -30,6 +30,9 @@
   "bugs": {
     "url": "https://github.com/ArcBlock/ux/issues"
   },
+  "files": [
+    "lib"
+  ],
   "publishConfig": {
     "access": "public"
   },
@@ -40,10 +43,10 @@
   "peerDependencies": {
     "react": "^19.0.0"
   },
-  "gitHead": "73039d82d507d9ec5408d8cfc67d9efeffae3e74",
+  "gitHead": "1cfc816004525cf1b352ec2b64d459f4769f0237",
   "dependencies": {
-    "@arcblock/react-hooks": "3.4.15",
-    "@arcblock/ux": "3.4.15",
+    "@arcblock/react-hooks": "3.5.0",
+    "@arcblock/ux": "3.5.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "@xterm/addon-fit": "^0.10.0",

package/src/Player.jsx

@@ -1,532 +0,0 @@
-/* eslint-disable react/no-unused-prop-types, no-console */
-import { useReducer, useRef, useEffect, useCallback } from 'react';
-import PropTypes from 'prop-types';
-import isUndefined from 'lodash/isUndefined';
-import noop from 'lodash/noop';
-
-import Terminal from './Terminal';
-
-import { PlayerRoot } from './styles';
-
-import {
-  formatFrames,
-  formatTime,
-  findFrameAt,
-  getFrameClass,
-  getPlayerClass,
-  defaultOptions,
-  defaultState,
-} from './util';
-
-export const PLAYER_FRAME_DELAY = 8;
-
-export default function Player({ ...rawProps }) {
-  const props = Object.assign({}, rawProps);
-  if (isUndefined(props.onComplete)) {
-    props.onComplete = noop;
-  }
-  if (isUndefined(props.onStart)) {
-    props.onStart = noop;
-  }
-  if (isUndefined(props.onStop)) {
-    props.onStop = noop;
-  }
-  if (isUndefined(props.onPause)) {
-    props.onPause = noop;
-  }
-  if (isUndefined(props.onTick)) {
-    props.onTick = noop;
-  }
-  if (isUndefined(props.onJump)) {
-    props.onJump = noop;
-  }
-
-  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,
-    cursorBlink: options.cursorBlink ?? true,
-    fontFamily: options.fontFamily,
-    fontSize: options.fontSize,
-    lineHeight: options.lineHeight,
-    letterSpacing: options.letterSpacing,
-    allowTransparency: true,
-    scrollback: 0,
-    theme: options.enableTheme ? options.theme : {},
-  };
-
-  const stateReducer = (state, action) => {
-    // console.log(`dispatch.${action.type}`, action.payload);
-    switch (action.type) {
-      case 'jump':
-        return { ...state, ...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: -1, 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 animationRef = useRef(null);
-  const startTimeRef = useRef(null);
-  const autoPlayRef = useRef(false);
-  const [state, dispatch] = useReducer(stateReducer, defaultState);
-
-  // Render a frame with Promise-based approach
-  const renderFrame = useCallback(
-    (frameIndex) => {
-      return new Promise((resolve) => {
-        const frame = frames[frameIndex];
-        if (frame && frame.content && terminal.current) {
-          if (state.requireReset) {
-            terminal.current.reset();
-          }
-
-          terminal.current.write(frame.content, () => {
-            resolve();
-          });
-        } else {
-          resolve();
-        }
-      });
-    },
-    [frames, state.requireReset]
-  );
-
-  // Render a frame synchronously for jump operations (no delay)
-  const renderFrameSync = useCallback(
-    (frameIndex) => {
-      const frame = frames[frameIndex];
-      if (frame && frame.content && terminal.current) {
-        if (state.requireReset) {
-          terminal.current.reset();
-        }
-        // Use synchronous write without callback for instant rendering
-        terminal.current.write(frame.content);
-      }
-    },
-    [frames, state.requireReset]
-  );
-
-  // Emit a event
-  const emitEvent = useCallback(
-    (name) => {
-      if (typeof props[name] === 'function') {
-        props[name]({ state, frames, options });
-      }
-    },
-    [props, state, frames, options]
-  );
-
-  const doJump = useCallback(
-    (time) => {
-      if (!terminal.current) return;
-
-      terminal.current.reset();
-      const toFrameIndex = findFrameAt(frames, time);
-
-      if (toFrameIndex >= 0) {
-        // Render all frames up to the target frame synchronously for instant jump
-        for (let i = 0; i <= toFrameIndex; i++) {
-          renderFrameSync(i);
-        }
-      }
-    },
-    [frames, renderFrameSync]
-  );
-
-  const onJump = useCallback(
-    (e) => {
-      if (!progress.current || !terminal.current || !state.isStarted) {
-        return false;
-      }
-
-      const length = progress.current.getBoundingClientRect().width;
-      const position = e.nativeEvent.offsetX;
-
-      const currentTime = Math.floor((totalDuration * position) / length);
-      const targetFrameIndex = findFrameAt(frames, currentTime);
-
-      // Preserve the current playing state
-      const isCurrentlyPlaying = state.isPlaying;
-
-      // Update state to reflect the jump while preserving play state
-      dispatch({
-        type: 'jump',
-        payload: {
-          currentTime,
-          currentFrame: targetFrameIndex,
-          isPlaying: isCurrentlyPlaying, // Keep the same playing state
-        },
-      });
-
-      // Reset the timing for accurate playback after jump
-      startTimeRef.current = null;
-
-      // Perform the jump
-      doJump(currentTime);
-      emitEvent('onJump');
-
-      return false;
-    },
-    [state.isStarted, state.isPlaying, totalDuration, frames, doJump, emitEvent]
-  );
-
-  const onPlay = useCallback(() => {
-    if (state.currentFrame >= frames.length - 1) {
-      // 触发一下 resize，保证文字输出正常
-      terminal.current.resize();
-      // Reset to beginning if at the end
-      dispatch({ type: 'reset', payload: { currentFrame: -1, currentTime: 0 } });
-      if (terminal.current) {
-        terminal.current.reset();
-      }
-      startTimeRef.current = null;
-      // Start from beginning
-      dispatch({ type: 'play', payload: { currentFrame: -1, currentTime: 0 } });
-    } else {
-      // Continue from current position
-      startTimeRef.current = null; // Reset timing for accurate playback
-      dispatch({ type: 'play' });
-    }
-
-    emitEvent('onPlay');
-    return false;
-  }, [state.currentFrame, frames.length, emitEvent]);
-
-  const onStart = useCallback(() => {
-    if (state.isStarted === false) {
-      // 触发一下 resize，保证文字输出正常
-      terminal.current.resize();
-
-      dispatch({ type: 'start' });
-      if (terminal.current) {
-        terminal.current.reset();
-      }
-    }
-
-    // Reset start time and frame for accurate timing
-    startTimeRef.current = null;
-    dispatch({ type: 'play', payload: { currentFrame: -1, currentTime: 0 } });
-    emitEvent('onStart');
-
-    return false;
-  }, [state.isStarted, emitEvent]);
-
-  const onPause = useCallback(() => {
-    dispatch({ type: 'pause' });
-    emitEvent('onPause');
-    return false;
-  }, [emitEvent]);
-
-  // Intersection Observer for viewport detection
-  useEffect(() => {
-    if (!container.current || !options.autoplay || autoPlayRef.current) {
-      return;
-    }
-
-    const observer = new IntersectionObserver(
-      (entries) => {
-        const [entry] = entries;
-        if (entry.isIntersecting && !state.isStarted) {
-          // 根据视野范围自动开始播放
-          onStart();
-          autoPlayRef.current = true;
-          // 播放后，断开 observer，避免触发多次
-          observer.unobserve(container.current);
-          observer.disconnect();
-        }
-      },
-      {
-        threshold: options.autoplayThreshold, // 可配置的可见度阈值
-        rootMargin: options.autoplayRootMargin, // 可配置的根边距
-      }
-    );
-
-    observer.observe(container.current);
-
-    // eslint-disable-next-line consistent-return
-    return () => {
-      observer.disconnect();
-    };
-  }, [options.autoplay, options.autoplayThreshold, options.autoplayRootMargin, state.isStarted, onStart]);
-
-  // Render thumbnailTime
-  useEffect(() => {
-    if (!terminal.current) {
-      return;
-    }
-
-    // Focus terminal to ensure cursor is visible
-    terminal.current.focus();
-
-    if (!options.autoplay) {
-      doJump(Math.min(Math.abs(options.thumbnailTime), totalDuration));
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  // Use ref to store the latest state and avoid recreating the loop function
-  const stateRef = useRef(state);
-  stateRef.current = state;
-
-  // Animation loop - frame-based sequential rendering
-  const animationLoop = useCallback(async () => {
-    const currentState = stateRef.current;
-
-    if (!currentState.isPlaying || currentState.isRendering) {
-      return;
-    }
-
-    const now = performance.now();
-    if (!startTimeRef.current) {
-      // Calculate start time based on current frame position
-      const currentFrameTime = currentState.currentFrame >= 0 ? frames[currentState.currentFrame]?.startTime || 0 : 0;
-      startTimeRef.current = now - currentFrameTime;
-    }
-
-    const elapsed = now - startTimeRef.current;
-
-    // Check if it's time to render the next frame
-    const { currentFrame } = currentState;
-    const nextFrameIndex = currentFrame + 1;
-
-    // If we've rendered all frames, we're done
-    if (currentFrame >= frames.length - 1) {
-      emitEvent('onComplete');
-
-      if (options.repeat) {
-        // Reset for repeat
-        startTimeRef.current = now;
-        dispatch({ type: 'reset', payload: { currentTime: 0, currentFrame: -1 } });
-        return;
-      }
-      // Stop playing
-      const endState = {
-        currentTime: totalDuration,
-        currentFrame: frames.length - 1,
-        requireReset: true,
-        isStarted: false,
-      };
-      dispatch({ type: 'pause', payload: endState });
-      startTimeRef.current = null;
-      return;
-    }
-
-    // Calculate when the next frame should be rendered
-    const nextFrame = frames[nextFrameIndex];
-    if (!nextFrame) {
-      // No more frames, schedule next animation frame
-      if (state.isPlaying) {
-        animationRef.current = requestAnimationFrame(animationLoop);
-      }
-      return;
-    }
-
-    // Check if enough time has passed for the next frame
-    const frameStartTime = nextFrame.startTime || 0;
-    if (elapsed >= frameStartTime) {
-      // Time to render the next frame
-      dispatch({
-        type: 'tickStart',
-        payload: {
-          currentTime: frameStartTime,
-          currentFrame: nextFrameIndex,
-        },
-      });
-
-      try {
-        await renderFrame(nextFrameIndex);
-
-        const finalState = {
-          currentTime: frameStartTime,
-          currentFrame: nextFrameIndex,
-        };
-        if (currentState.requireReset) {
-          finalState.requireReset = false;
-        }
-
-        dispatch({ type: 'tickEnd', payload: finalState });
-        emitEvent('onTick');
-      } catch (error) {
-        console.error('Frame rendering error:', error);
-      }
-    } else {
-      // Just update time without rendering
-      dispatch({ type: 'tick', payload: { currentTime: elapsed } });
-    }
-
-    // Don't schedule here - let useEffect handle it
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [frames, renderFrame, emitEvent, options.repeat, totalDuration]);
-
-  // Start/stop animation loop based on playing state
-  useEffect(() => {
-    let isActive = true;
-
-    const runAnimationLoop = async () => {
-      // eslint-disable-next-line no-await-in-loop
-      while (isActive && stateRef.current.isPlaying) {
-        // eslint-disable-next-line no-await-in-loop
-        await new Promise((resolve) => {
-          animationRef.current = requestAnimationFrame(resolve);
-        });
-
-        if (isActive && stateRef.current.isPlaying) {
-          // eslint-disable-next-line no-await-in-loop
-          await animationLoop();
-        }
-      }
-    };
-
-    if (state.isPlaying) {
-      runAnimationLoop();
-    } else {
-      if (animationRef.current) {
-        cancelAnimationFrame(animationRef.current);
-        animationRef.current = null;
-      }
-      startTimeRef.current = null;
-    }
-
-    return () => {
-      isActive = false;
-      if (animationRef.current) {
-        cancelAnimationFrame(animationRef.current);
-        animationRef.current = null;
-      }
-    };
-  }, [state.isPlaying, animationLoop]);
-
-  // 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 if (options.theme?.background) {
-      options.frameBox.style.background = options.theme.background;
-    }
-
-    options.frameBox.style.padding = '10px';
-    options.frameBox.style.paddingBottom = '40px';
-  }
-
-  return (
-    <PlayerRoot className={getPlayerClass(options, state)} ref={container}>
-      <div className="cover" onClick={onStart} />
-      <div className="start" onClick={onStart}>
-        <div className="start-button">
-          <svg 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>
-
-      {/* Hover overlay for playing state */}
-      {state.isPlaying && state.isStarted && (
-        <div className="hover-overlay" onClick={onPause}>
-          <div className="hover-pause-button">
-            <span className="pause-icon" />
-          </div>
-        </div>
-      )}
-
-      {/* Overlay for paused state */}
-      {!state.isPlaying && state.isStarted && (
-        <div className="pause-overlay" onClick={onPlay}>
-          <div className="overlay-play-button">
-            <svg 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>
-      )}
-      <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 && state.isStarted && (
-          <div className="play" onClick={onPlay} title="Play">
-            <span className="icon" />
-          </div>
-        )}
-        {state.isPlaying && (
-          <div className="pause" onClick={onPause} title="Pause">
-            <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>
-    </PlayerRoot>
-  );
-}
-
-Player.propTypes = {
-  frames: PropTypes.array.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,
-    autoplayThreshold: PropTypes.number,
-    autoplayRootMargin: PropTypes.string,
-  }).isRequired,
-  onComplete: PropTypes.func,
-  onStart: PropTypes.func,
-  onStop: PropTypes.func,
-  onPause: PropTypes.func,
-  onTick: PropTypes.func,
-  onJump: PropTypes.func,
-};

package/src/Player.stories.jsx

@@ -1,19 +0,0 @@
-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 as BlockletLogTerminal } from './demo/blocklet-log-terminal';
-
-export default {
-  title: 'Data Display/Terminal/Player',
-
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'Terminal Player is a react wrapper for `xterm` allowing you to easily render a terminal in the browser.',
-      },
-    },
-  },
-};