将进度条改为全局

packages/templates/src/Root.tsx

@@ -1,11 +1,12 @@
 import React from "react";
-import { Composition, Sequence, AbsoluteFill, Audio, staticFile, Img } from "remotion";
+import { Composition, Sequence, AbsoluteFill, Audio, staticFile, Img, useCurrentFrame, interpolate } from "remotion";
 import type { TemplateType, AspectRatio } from "@pipeline/shared";
 import type { WordTimestamp } from "@pipeline/shared";
 import NewsScene from "./news/index";
 import KnowledgeScene from "./knowledge/index";
 import OpinionScene from "./opinion/index";
 import MarketingScene from "./marketing/index";
+import { THEMES } from "./base/theme/colors";
 
 export interface RemotionScene {
   id: string;
@@ -127,6 +128,7 @@ const TemplateComposition: React.FC<RemotionProps> = (props) => {
           </Sequence>
         );
       })}
+      <GlobalProgressBar totalFrames={totalFrames} color={THEMES[props.template].primary} />
     </AbsoluteFill>
   );
 };
@@ -228,7 +230,36 @@ const OutroScene: React.FC<{
   );
 };
 
-import { useCurrentFrame, interpolate } from "remotion";
+const GlobalProgressBar: React.FC<{
+  totalFrames: number;
+  color: string;
+}> = ({ totalFrames, color }) => {
+  const frame = useCurrentFrame();
+  const progress = interpolate(frame, [0, totalFrames], [0, 100], {
+    extrapolateRight: "clamp",
+  });
+
+  return (
+    <div
+      style={{
+        position: "absolute",
+        bottom: 0,
+        left: 0,
+        width: "100%",
+        height: 4,
+        backgroundColor: "rgba(255,255,255,0.1)",
+      }}
+    >
+      <div
+        style={{
+          width: `${progress}%`,
+          height: "100%",
+          backgroundColor: color,
+        }}
+      />
+    </div>
+  );
+};
 
 const defaultProps: RemotionProps = {
   scenes: [

packages/templates/src/knowledge/index.tsx

@@ -11,7 +11,6 @@ import { THEMES } from "../base/theme/colors";
 import { Background } from "../base/components/background";
 import { SubtitleBar } from "../base/components/subtitle-bar";
 import { AnimatedText } from "../base/components/animated-text";
-import { ProgressBar } from "../base/components/progress-bar";
 import { Watermark } from "../base/components/watermark";
 import { StepIndicator } from "./components/step-indicator";
 import { KeyPointCard } from "./components/key-point-card";
@@ -115,7 +114,6 @@ const KnowledgeScene: React.FC<KnowledgeSceneProps> = ({
         <SubtitleBar wordTimestamps={scene.wordTimestamps} />
       )}
 
-      <ProgressBar totalFrames={totalFrames} color={colors.primaryLight} />
       <Watermark />
     </AbsoluteFill>
   );

packages/templates/src/marketing/index.tsx

@@ -11,7 +11,6 @@ import { THEMES } from "../base/theme/colors";
 import { Background } from "../base/components/background";
 import { SubtitleBar } from "../base/components/subtitle-bar";
 import { AnimatedText } from "../base/components/animated-text";
-import { ProgressBar } from "../base/components/progress-bar";
 import { Watermark } from "../base/components/watermark";
 import { ProductShowcase } from "./components/product-showcase";
 import { CTAOverlay } from "./components/cta-overlay";
@@ -131,7 +130,6 @@ const MarketingScene: React.FC<MarketingSceneProps> = ({
         <SubtitleBar wordTimestamps={scene.wordTimestamps} />
       )}
 
-      <ProgressBar totalFrames={totalFrames} color={colors.accent} />
       <Watermark />
     </AbsoluteFill>
   );

packages/templates/src/news/index.tsx

@@ -12,7 +12,6 @@ import { THEMES } from "../base/theme/colors";
 import { Background } from "../base/components/background";
 import { SubtitleBar } from "../base/components/subtitle-bar";
 import { LowerThird } from "../base/components/lower-third";
-import { ProgressBar } from "../base/components/progress-bar";
 import { Watermark } from "../base/components/watermark";
 import { HeadlineCard } from "./components/headline-card";
 import { NewsTicker } from "./components/news-ticker";
@@ -177,8 +176,6 @@ const NewsScene: React.FC<NewsSceneProps> = ({
         headlines={scene.keyframes.map((kf) => kf.content)}
       />
 
-      {/* Progress bar */}
-      <ProgressBar totalFrames={totalFrames} color={colors.accent} />
       <Watermark />
     </AbsoluteFill>
   );

packages/templates/src/opinion/index.tsx

@@ -11,7 +11,6 @@ import { THEMES } from "../base/theme/colors";
 import { Background } from "../base/components/background";
 import { SubtitleBar } from "../base/components/subtitle-bar";
 import { AnimatedText } from "../base/components/animated-text";
-import { ProgressBar } from "../base/components/progress-bar";
 import { Watermark } from "../base/components/watermark";
 import { QuoteBlock } from "./components/quote-block";
 
@@ -126,7 +125,6 @@ const OpinionScene: React.FC<OpinionSceneProps> = ({
         <SubtitleBar wordTimestamps={scene.wordTimestamps} />
       )}
 
-      <ProgressBar totalFrames={totalFrames} color={colors.primaryLight} />
       <Watermark />
     </AbsoluteFill>
   );