feat(player): add chapter markers overlay and improve player wrapper structure

Author: quanru

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

@@ -49,19 +49,68 @@
     border-top-right-radius: 4px;
     border-top-left-radius: 4px;
 
-    // Remotion Player renders as a div, not a canvas
-    > div {
+    // Player wrapper positions chapter markers relative to the player
+    .player-wrapper {
+      position: relative;
       width: 100%;
       max-width: 100%;
       max-height: 100%;
-      border: none;
+
+      > div:not(.chapter-markers) {
+        width: 100%;
+        max-width: 100%;
+        max-height: 100%;
+        border: none;
+      }
     }
 
     // Remove border/outline from Remotion control bar buttons
     button {
       border: none;
       outline: none;
     }
+
+    // Chapter markers overlaid on Remotion's seek bar
+    // Remotion seek bar layout (from player bottom):
+    //   paddingBottom=10 + VERTICAL_PADDING=4 → bar bottom at 14px
+    //   BAR_HEIGHT=5 → bar top at 19px, center at 16.5px
+    //   X_PADDING=12 on each side
+    .chapter-markers {
+      position: absolute;
+      bottom: 14px;
+      left: 12px;
+      right: 12px;
+      height: 5px;
+      pointer-events: none;
+      z-index: 1;
+
+      .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;
+        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;
+        }
+      }
+    }
   }
 
   // Custom controls rendered inside Remotion Player's control bar

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

@@ -349,6 +349,37 @@ export function Player(props?: {
     mouseOverSettingsIcon,
   ]);
 
+  // Compute chapter markers from step boundaries (each img/insight = new chapter)
+  const chapterMarkers = useMemo(() => {
+    if (!frameMap) return [];
+    const { scriptFrames, totalDurationInFrames, openingDurationInFrames } =
+      frameMap;
+    if (totalDurationInFrames === 0) return [];
+
+    const markers: { percent: number; title: string; frame: number }[] = [];
+    for (const sf of scriptFrames) {
+      if (
+        (sf.type !== 'img' && sf.type !== 'insight') ||
+        sf.durationInFrames === 0
+      )
+        continue;
+      const globalFrame = openingDurationInFrames + sf.startFrame;
+      const percent = (globalFrame / totalDurationInFrames) * 100;
+      if (percent > 1 && percent < 99) {
+        const parts = [sf.title, sf.subTitle].filter(Boolean);
+        markers.push({
+          percent,
+          title:
+            parts.length > 0
+              ? parts.join(': ')
+              : `Chapter ${markers.length + 1}`,
+          frame: globalFrame,
+        });
+      }
+    }
+    return markers;
+  }, [frameMap]);
+
   // If no scripts, show empty
   if (!scripts || scripts.length === 0 || !frameMap) {
     return <div className="player-container" />;
@@ -360,31 +391,51 @@ export function Player(props?: {
   return (
     <div className="player-container" data-fit-mode={props?.fitMode}>
       <div className="canvas-container">
-        <RemotionPlayer
-          ref={playerRef}
-          component={Composition}
-          inputProps={{
-            frameMap,
-            effects: effectsEnabled,
-            autoZoom,
-          }}
-          durationInFrames={Math.max(frameMap.totalDurationInFrames, 1)}
-          compositionWidth={compositionWidth}
-          compositionHeight={compositionHeight}
-          fps={frameMap.fps}
-          playbackRate={playbackSpeed}
-          controls
-          showVolumeControls={false}
-          renderPlayPauseButton={renderPlayPauseButton}
-          renderFullscreenButton={renderFullscreenButton}
-          renderCustomControls={renderCustomControls}
-          autoPlay
-          loop={false}
-          style={{
-            width: '100%',
-            aspectRatio: `${compositionWidth}/${compositionHeight}`,
-          }}
-        />
+        <div className="player-wrapper">
+          <RemotionPlayer
+            ref={playerRef}
+            component={Composition}
+            inputProps={{
+              frameMap,
+              effects: effectsEnabled,
+              autoZoom,
+            }}
+            durationInFrames={Math.max(frameMap.totalDurationInFrames, 1)}
+            compositionWidth={compositionWidth}
+            compositionHeight={compositionHeight}
+            fps={frameMap.fps}
+            playbackRate={playbackSpeed}
+            controls
+            showVolumeControls={false}
+            renderPlayPauseButton={renderPlayPauseButton}
+            renderFullscreenButton={renderFullscreenButton}
+            renderCustomControls={renderCustomControls}
+            autoPlay
+            loop={false}
+            style={{
+              width: '100%',
+              aspectRatio: `${compositionWidth}/${compositionHeight}`,
+              zIndex: 0,
+            }}
+          />
+
+          {/* Chapter markers overlay on Remotion's seek bar */}
+          {chapterMarkers.length > 0 && (
+            <div className="chapter-markers">
+              {chapterMarkers.map((marker) => (
+                <Tooltip key={marker.percent} title={marker.title}>
+                  <div
+                    className="chapter-marker"
+                    style={{ left: `${marker.percent}%` }}
+                    onClick={() => {
+                      playerRef.current?.seekTo(marker.frame);
+                    }}
+                  />
+                </Tooltip>
+              ))}
+            </div>
+          )}
+        </div>
       </div>
     </div>
   );