@arcblock/terminal 3.1.25 → 3.1.27

package/src/Player.jsx

@@ -254,8 +254,8 @@ export default function Player({ ...rawProps }) {
         }
       },
       {
-        threshold: 0.1, // Trigger when 10% of the element is visible
-        rootMargin: '0px 0px 0px 0px', // Add some margin to avoid triggering too early
+        threshold: options.autoplayThreshold, // 可配置的可见度阈值
+        rootMargin: options.autoplayRootMargin, // 可配置的根边距
       }
     );
 
@@ -265,7 +265,7 @@ export default function Player({ ...rawProps }) {
     return () => {
       observer.disconnect();
     };
-  }, [options.autoplay, state.isStarted, onStart]);
+  }, [options.autoplay, options.autoplayThreshold, options.autoplayRootMargin, state.isStarted, onStart]);
 
   // Render thumbnailTime
   useEffect(() => {
@@ -434,14 +434,40 @@ export default function Player({ ...rawProps }) {
     <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">
-          <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 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">
@@ -494,6 +520,8 @@ Player.propTypes = {
     theme: PropTypes.object,
     cols: PropTypes.number,
     rows: PropTypes.number,
+    autoplayThreshold: PropTypes.number,
+    autoplayRootMargin: PropTypes.string,
   }).isRequired,
   onComplete: PropTypes.func,
   onStart: PropTypes.func,

package/src/styles.js

@@ -1,124 +1,365 @@
 import styled from '@emotion/styled';
 
-// Terminal Player Root with camelCase styles
-export const PlayerRoot = styled.div({
-  // Base styles for .terminal-player
-  display: 'block',
-  position: 'relative',
-  overflow: 'hidden',
-
-  // Player controls
-  '& .controller': {
-    background: '#45484d', // Original first background value
-    backgroundColor: '#222222', // Override background (matches original CSS)
-    bottom: '0px',
-    display: 'none',
-    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,
-    },
-  },
+// Color constants for consistent theming
+const COLORS = {
+  BLACK_OVERLAY_LIGHT: 'rgba(0, 0, 0, 0.3)', // Light overlay for paused state
+  BLACK_OVERLAY_MEDIUM: 'rgba(0, 0, 0, 0.7)', // Button backgrounds
+  BLACK_OVERLAY_DARK: 'rgba(0, 0, 0, 0.8)', // Hover state for buttons
+  BLACK_DROP_SHADOW: 'rgba(0, 0, 0, 0.4)', // Drop shadow effect
+  BLACK_SOLID: '#000', // Solid black for composition view
+};
 
-  '& .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',
-    width: 80,
-    height: 80,
-    left: '50%',
-    marginLeft: -65,
-    marginTop: -65,
-    position: 'absolute',
-    top: '50%',
-
-    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))',
-    opacity: 0.7,
-    '&:hover': {
-      opacity: 0.9,
-      transition: 'all 0.3s ease',
-    },
-  },
-
-  '&.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)',
-  },
-
-  '&.started .cover, &.started .start': { display: 'none' },
-
-  '& .terminal-watermark': { zIndex: 99999 },
-});
+// Terminal Player Root with camelCase styles
+export const PlayerRoot = styled.div`
+  /* Base styles */
+  display: block;
+  position: relative;
+  overflow: hidden;
+
+  /* Player controls */
+  .controller {
+    background: #45484d;
+    background-color: #222222;
+    bottom: 0px;
+    display: none;
+    font-size: 12px;
+    height: 40px;
+    position: absolute;
+    width: 100%;
+    z-index: 20;
+    transition: height ease 200ms;
+    -webkit-transition: height ease 200ms;
+    -moz-transition: height ease 200ms;
+    -o-transition: height ease 200ms;
+  }
+
+  &.controls .controller {
+    display: block;
+  }
+  &.playing .controller {
+    height: 0;
+    overflow: hidden;
+  }
+  &.playing:hover .controller {
+    height: 40px;
+    overflow: hidden;
+  }
+
+  /* Play/Pause buttons in controller */
+  .play,
+  .pause {
+    fill: #cacaca;
+    float: left;
+    height: 40px;
+    line-height: 40px;
+    text-align: center;
+    width: 40px;
+
+    .icon {
+      border-color: transparent transparent transparent #cacaca;
+      box-sizing: border-box;
+      cursor: pointer;
+      display: inline-block;
+      height: 15px;
+    }
+  }
+
+  .pause {
+    display: none;
+    .icon {
+      border-style: double;
+      border-width: 0px 0px 0px 12px;
+      margin-top: 11px;
+    }
+  }
+
+  .play .icon {
+    border-style: solid;
+    border-width: 8px 0px 8px 13px;
+    margin-top: 10px;
+  }
+
+  &.playing .play {
+    display: none;
+  }
+  &.playing .pause {
+    display: inline-block;
+  }
+
+  /* Timer */
+  .timer {
+    color: #cacaca;
+    float: right;
+    line-height: 40px;
+    padding: 0 10px;
+  }
+
+  /* Progress bar */
+  .progressbar-wrapper {
+    height: 40px;
+    line-height: 38px;
+    overflow: hidden;
+  }
+
+  .progressbar {
+    background-color: #424242;
+    display: inline-block;
+    height: 7px;
+    overflow: hidden;
+    width: 100%;
+    border-radius: 10px;
+    -moz-border-radius: 10px;
+    -webkit-border-radius: 10px;
+  }
+
+  &.started .progressbar {
+    cursor: pointer;
+  }
+
+  .progress {
+    background-color: #cacaca;
+    height: 7px;
+    position: relative;
+    width: 0%;
+  }
+
+  /* Cover */
+  .cover {
+    cursor: pointer;
+    height: 100%;
+    position: absolute;
+    width: 100%;
+    z-index: 10;
+  }
+
+  /* Start button */
+  .start-button {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 80px;
+    height: 80px;
+    background-color: ${COLORS.BLACK_OVERLAY_MEDIUM};
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    filter: drop-shadow(10px 10px 15px ${COLORS.BLACK_DROP_SHADOW});
+    -webkit-filter: drop-shadow(10px 10px 15px ${COLORS.BLACK_DROP_SHADOW});
+    transition: all 0.3s ease;
+    cursor: pointer;
+    z-index: 20;
+
+    &:hover {
+      background-color: ${COLORS.BLACK_OVERLAY_DARK};
+      transform: translate(-50%, -50%) scale(1.05);
+    }
+
+    svg {
+      fill: #eaeaea;
+      width: 40px;
+      height: 40px;
+      pointer-events: none;
+    }
+  }
+
+  &.small .start-button {
+    width: 60px;
+    height: 60px;
+    svg {
+      width: 30px;
+      height: 30px;
+    }
+  }
+
+  /* Position adjustments for different layouts */
+  &.controls .start-button {
+    transform: translate(-50%, -50%) translate(0px, -20px);
+    &:hover {
+      transform: translate(-50%, -50%) translate(0px, -20px) scale(1.05);
+    }
+  }
+
+  &.framed .start-button {
+    transform: translate(-50%, -50%) translate(0px, 8px);
+    &:hover {
+      transform: translate(-50%, -50%) translate(0px, 8px) scale(1.05);
+    }
+  }
+
+  &.framed.controls .start-button {
+    transform: translate(-50%, -50%) translate(0px, -12px);
+    &:hover {
+      transform: translate(-50%, -50%) translate(0px, -12px) scale(1.05);
+    }
+  }
+
+  &.started .cover,
+  &.started .start {
+    display: none;
+  }
+
+  /* Hover overlay for playing state */
+  .hover-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 15;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    cursor: pointer;
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  /* Hover pause button */
+  .hover-pause-button {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 80px;
+    height: 80px;
+    background-color: ${COLORS.BLACK_OVERLAY_MEDIUM};
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    filter: drop-shadow(10px 10px 15px ${COLORS.BLACK_DROP_SHADOW});
+    -webkit-filter: drop-shadow(10px 10px 15px ${COLORS.BLACK_DROP_SHADOW});
+    transition: all 0.3s ease;
+    cursor: pointer;
+
+    &:hover {
+      background-color: ${COLORS.BLACK_OVERLAY_MEDIUM};
+      transform: translate(-50%, -50%) scale(1.05);
+    }
+  }
+
+  &.small .hover-pause-button {
+    width: 60px;
+    height: 60px;
+    &:hover {
+      background-color: ${COLORS.BLACK_OVERLAY_MEDIUM};
+      transform: translate(-50%, -50%);
+    }
+  }
+
+  /* Position adjustments for hover pause button */
+  &.controls .hover-pause-button {
+    transform: translate(-50%, -50%) translate(0px, -20px);
+    &:hover {
+      transform: translate(-50%, -50%) translate(0px, -20px) scale(1.05);
+    }
+  }
+
+  &.framed .hover-pause-button {
+    transform: translate(-50%, -50%) translate(0px, 8px);
+    &:hover {
+      transform: translate(-50%, -50%) translate(0px, 8px) scale(1.05);
+    }
+  }
+
+  &.framed.controls .hover-pause-button {
+    transform: translate(-50%, -50%) translate(0px, -12px);
+    &:hover {
+      transform: translate(-50%, -50%) translate(0px, -12px) scale(1.05);
+    }
+  }
+
+  .pause-icon {
+    display: inline-block;
+    border-style: double;
+    border-width: 0px 0px 0px 24px;
+    border-color: transparent transparent transparent #ffffff;
+    height: 32px;
+    box-sizing: border-box;
+  }
+
+  &.small .pause-icon {
+    border-width: 0px 0px 0px 18px;
+    height: 24px;
+  }
+
+  /* Pause overlay */
+  .pause-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 15;
+    background-color: ${COLORS.BLACK_OVERLAY_LIGHT};
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    outline: none;
+    border: none;
+
+    &:focus {
+      outline: none;
+    }
+    &:active {
+      background-color: ${COLORS.BLACK_OVERLAY_LIGHT};
+    }
+  }
+
+  /* Position adjustments for pause overlay */
+  &.controls .pause-overlay {
+    transform: translateY(-20px);
+  }
+  &.framed.controls .pause-overlay {
+    transform: translateY(-12px);
+  }
+
+  /* Overlay play button */
+  .overlay-play-button {
+    position: relative;
+    width: 80px;
+    height: 80px;
+    background-color: ${COLORS.BLACK_OVERLAY_MEDIUM};
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    filter: drop-shadow(10px 10px 15px ${COLORS.BLACK_DROP_SHADOW});
+    -webkit-filter: drop-shadow(10px 10px 15px ${COLORS.BLACK_DROP_SHADOW});
+    transition: all 0.3s ease;
+    cursor: pointer;
+    transform: none;
+
+    &:hover {
+      background-color: ${COLORS.BLACK_OVERLAY_DARK};
+      transform: scale(1.05);
+    }
+
+    svg {
+      fill: #eaeaea;
+      width: 40px;
+      height: 40px;
+      pointer-events: none;
+    }
+  }
+
+  &.small .overlay-play-button {
+    width: 60px;
+    height: 60px;
+    svg {
+      width: 30px;
+      height: 30px;
+    }
+  }
+
+  /* Terminal watermark */
+  .terminal-watermark {
+    z-index: 99999;
+  }
+`;
 
 // Terminal Root with camelCase xterm styles
 export const TerminalRoot = styled.div({
@@ -138,7 +379,6 @@ export const TerminalRoot = styled.div({
   '& .xterm .xterm-helpers': {
     position: 'absolute',
     top: 0,
-    // The z-index of the helpers must be higher than the canvases in order for IMEs to appear on top
     zIndex: 5,
   },
 
@@ -146,7 +386,6 @@ export const TerminalRoot = styled.div({
     padding: 0,
     border: 0,
     margin: 0,
-    // Move textarea out of the screen to the far left, so that the cursor is not visible
     position: 'absolute',
     opacity: 0,
     left: '-9999em',
@@ -154,15 +393,13 @@ export const TerminalRoot = styled.div({
     width: 0,
     height: 0,
     zIndex: -5,
-    // Prevent wrapping so the IME appears against the textarea at the correct position
     whiteSpace: 'nowrap',
     overflow: 'hidden',
     resize: 'none',
   },
 
   '& .xterm .composition-view': {
-    // TODO: Composition position got messed up somewhere
-    background: '#000',
+    background: COLORS.BLACK_SOLID,
     color: '#FFF',
     display: 'none',
     position: 'absolute',
@@ -175,7 +412,6 @@ export const TerminalRoot = styled.div({
   },
 
   '& .xterm .xterm-viewport': {
-    // On OS X this is required in order for the scroll bar to appear fully opaque
     backgroundColor: 'transparent !important',
     overflowY: 'scroll',
     cursor: 'default',
@@ -184,15 +420,13 @@ export const TerminalRoot = styled.div({
     left: 0,
     top: 0,
     bottom: 0,
-    // scrollbarWidth: 'none',
     '&::-webkit-scrollbar': {
-      width: 8 /* 滚动条宽度 */,
-      backgroundColor: 'transparent' /* 滚动条背景 */,
+      width: '8px',
+      backgroundColor: 'transparent',
     },
-
     '&::-webkit-scrollbar-thumb': {
-      background: '#888' /* 滚动条滑块颜色 */,
-      borderRadius: 4 /* 滑块圆角 */,
+      background: '#aaa',
+      borderRadius: '4px',
     },
   },
 
@@ -220,7 +454,6 @@ export const TerminalRoot = styled.div({
   },
 
   '& .xterm.enable-mouse-events': {
-    // When mouse events are enabled (eg. tmux), revert to the standard pointer cursor
     cursor: 'default',
   },
 
@@ -229,7 +462,6 @@ export const TerminalRoot = styled.div({
   },
 
   '& .xterm.column-select.focus': {
-    // Column selection mode
     cursor: 'crosshair',
   },
 
@@ -262,8 +494,6 @@ export const TerminalRoot = styled.div({
   },
 
   '& .xterm-dim': {
-    // Dim should not apply to background, so the opacity of the foreground color is applied
-    // explicitly in the generated class and reset to 1 here
     opacity: '1 !important',
   },
 
@@ -274,9 +504,7 @@ export const TerminalRoot = styled.div({
   '& .xterm-underline-4': { textDecoration: 'dotted underline' },
   '& .xterm-underline-5': { textDecoration: 'dashed underline' },
 
-  '& .xterm-overline': {
-    textDecoration: 'overline',
-  },
+  '& .xterm-overline': { textDecoration: 'overline' },
 
   '& .xterm-overline.xterm-underline-1': { textDecoration: 'overline underline' },
   '& .xterm-overline.xterm-underline-2': { textDecoration: 'overline double underline' },
@@ -284,9 +512,7 @@ export const TerminalRoot = styled.div({
   '& .xterm-overline.xterm-underline-4': { textDecoration: 'overline dotted underline' },
   '& .xterm-overline.xterm-underline-5': { textDecoration: 'overline dashed underline' },
 
-  '& .xterm-strikethrough': {
-    textDecoration: 'line-through',
-  },
+  '& .xterm-strikethrough': { textDecoration: 'line-through' },
 
   // Decoration styles
   '& .xterm-screen .xterm-decoration-container .xterm-decoration': {

package/src/util.js

@@ -164,4 +164,7 @@ export const defaultOptions = {
   autoplay: false,
   thumbnailTime: 999999,
   frameBox: {},
+  // IntersectionObserver 配置
+  autoplayThreshold: 0.5, // 元素50%可见时才自动播放
+  autoplayRootMargin: '-10% 0px -10% 0px', // 上下留10%边距，确保元素充分进入视口
 };