feat(player): update styles for chapter markers and seek bar, enhance tooltip design

Author: quanru

packages/visualizer/src/component/player/index.less

@@ -32,7 +32,7 @@
     background: #fff;
 
     .canvas-container {
-      background-color: #f2f4f7;
+      background-color: #000;
     }
   }
 
@@ -45,7 +45,7 @@
     align-items: center;
     overflow: hidden;
     position: relative;
-    background-color: #fff;
+    background-color: #000;
     border-top-right-radius: 4px;
     border-top-left-radius: 4px;
 
@@ -62,6 +62,7 @@
         max-height: 100%;
         border: none;
       }
+
     }
 
     // Remove border/outline from Remotion control bar buttons
@@ -83,34 +84,31 @@
       height: 5px;
       pointer-events: none;
       z-index: 1;
+      transition: opacity 0.3s;
 
       .chapter-marker {
         position: absolute;
-        top: 50%;
-        width: 3px;
-        height: 12px;
-        background: rgba(255, 255, 255, 0.9);
-        transform: translate(-50%, -50%);
-        border-radius: 1.5px;
+        top: 0;
+        width: 2px;
+        height: 100%;
+        background: #fff;
+        transform: translateX(-50%);
         pointer-events: auto;
         cursor: pointer;
 
         // Larger hit area for easier hovering/clicking
         &::before {
           content: '';
           position: absolute;
-          top: -6px;
-          left: -6px;
-          right: -6px;
-          bottom: -6px;
-        }
-
-        &:hover {
-          background: #fff;
-          height: 16px;
+          top: -8px;
+          left: -8px;
+          right: -8px;
+          bottom: -8px;
         }
       }
     }
+
+    // Remotion seek bar styles are overridden via JS in useEffect (see index.tsx)
   }
 
   // Custom controls rendered inside Remotion Player's control bar
@@ -149,6 +147,22 @@
   }
 }
 
+// Chapter marker tooltip
+.chapter-tooltip {
+  .ant-tooltip-inner {
+    background: rgba(80, 80, 80, 0.85);
+    backdrop-filter: blur(8px);
+    border-radius: 16px;
+    padding: 6px 12px;
+    font-size: 12px;
+    max-width: 360px;
+  }
+
+  .ant-tooltip-arrow::before {
+    background: rgba(80, 80, 80, 0.85);
+  }
+}
+
 // Dark mode styles
 [data-theme='dark'] {
   .player-container {
@@ -160,12 +174,12 @@
       border-color: #292929;
 
       .canvas-container {
-        background-color: #141414;
+        background-color: #000;
       }
     }
 
     .canvas-container {
-      background-color: #1f1f1f;
+      background-color: #000;
     }
 
   }

packages/visualizer/src/component/player/index.tsx

@@ -96,6 +96,93 @@ export function Player(props?: {
 
   const playerRef = useRef<PlayerRef>(null);
   const lastTaskIdRef = useRef<string | null>(null);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const markerHoverIntervalRef = useRef<ReturnType<typeof setInterval> | null>(
+    null,
+  );
+
+  // Override Remotion Player seek bar styles via DOM
+  useEffect(() => {
+    const node = (playerRef.current as any)?.getContainerNode?.();
+    if (!node) return;
+
+    const applySeekBarStyles = () => {
+      // Find seek bar container (has cursor: pointer and touch-action: none)
+      const seekBarContainer = node.querySelector(
+        '[style*="touch-action"]',
+      ) as HTMLElement | null;
+      if (!seekBarContainer) return;
+
+      // Bar background: first child of seek bar container
+      const barBg = seekBarContainer.firstElementChild as HTMLElement | null;
+      if (barBg) {
+        barBg.style.setProperty(
+          'background-color',
+          'rgba(255, 255, 255, 0.3)',
+          'important',
+        );
+      }
+
+      // Fill bar: last child of bar background
+      const fillBar = barBg?.lastElementChild as HTMLElement | null;
+      if (fillBar) {
+        fillBar.style.setProperty(
+          'background-color',
+          'rgba(43, 131, 255, 1)',
+          'important',
+        );
+      }
+
+      // Knob: last child of seek bar container
+      const knob = seekBarContainer.lastElementChild as HTMLElement | null;
+      if (knob && knob !== barBg) {
+        knob.style.setProperty('opacity', '1', 'important');
+        knob.style.setProperty('background-color', '#fff', 'important');
+        knob.style.setProperty('box-shadow', 'none', 'important');
+        knob.style.setProperty('width', '8px', 'important');
+        knob.style.setProperty('height', '16px', 'important');
+        knob.style.setProperty('border-radius', '10px', 'important');
+        // Vertically center: bar center at 6.5px from container top, knob height 16
+        knob.style.setProperty('top', '-1.5px', 'important');
+      }
+
+      // Sync chapter markers visibility with control bar
+      const controlBar = node.querySelector(
+        '[style*="transition"]',
+      ) as HTMLElement | null;
+      const markersEl = wrapperRef.current?.querySelector(
+        '.chapter-markers',
+      ) as HTMLElement | null;
+      if (controlBar && markersEl) {
+        markersEl.style.opacity = window.getComputedStyle(controlBar).opacity;
+      }
+    };
+
+    // Apply initially and observe for re-renders
+    const timer = setInterval(applySeekBarStyles, 300);
+    applySeekBarStyles();
+    return () => clearInterval(timer);
+  }, [frameMap]);
+
+  // Continuously dispatch mousemove on Remotion Player root to keep controls visible
+  // Remotion uses mouseenter/mouseleave/mousemove to track hover state,
+  // and hides controls after a timeout with no mouse activity
+  const onMarkerMouseEnter = useCallback(() => {
+    const node = (playerRef.current as any)?.getContainerNode?.();
+    if (!node) return;
+    const dispatchMove = () => {
+      node.dispatchEvent(new MouseEvent('mouseenter', { bubbles: false }));
+      node.dispatchEvent(new MouseEvent('mousemove', { bubbles: true }));
+    };
+    dispatchMove();
+    markerHoverIntervalRef.current = setInterval(dispatchMove, 200);
+  }, []);
+  const onMarkerMouseLeave = useCallback(() => {
+    if (markerHoverIntervalRef.current) {
+      clearInterval(markerHoverIntervalRef.current);
+      markerHoverIntervalRef.current = null;
+    }
+  }, []);
 
   // Track frame for taskId callback
   useEffect(() => {
@@ -391,7 +478,7 @@ export function Player(props?: {
   return (
     <div className="player-container" data-fit-mode={props?.fitMode}>
       <div className="canvas-container">
-        <div className="player-wrapper">
+        <div className="player-wrapper" ref={wrapperRef}>
           <RemotionPlayer
             ref={playerRef}
             component={Composition}
@@ -423,10 +510,16 @@ export function Player(props?: {
           {chapterMarkers.length > 0 && (
             <div className="chapter-markers">
               {chapterMarkers.map((marker) => (
-                <Tooltip key={marker.percent} title={marker.title}>
+                <Tooltip
+                  key={marker.percent}
+                  title={marker.title}
+                  overlayClassName="chapter-tooltip"
+                >
                   <div
                     className="chapter-marker"
                     style={{ left: `${marker.percent}%` }}
+                    onMouseEnter={onMarkerMouseEnter}
+                    onMouseLeave={onMarkerMouseLeave}
                     onClick={() => {
                       playerRef.current?.seekTo(marker.frame);
                     }}