Fix athletes eye default duration

Author: cursoragent

packages/template-athletes-eye/README.md

@@ -27,6 +27,10 @@ videoSrc: staticFile("activity.mp4"),
 gpxSrc: staticFile("activity.gpx"),
 ```
 
+The bundled demo video is capped to 30 seconds so the Studio timeline stays
+responsive. Your own video uses its full media duration by default. To cap a
+long activity video, add `durationInSeconds` to the default props.
+
 The GPX file should contain a track with latitude, longitude, elevation and time values.
 
 ## Render

packages/template-athletes-eye/src/AthletesEye.tsx

@@ -21,6 +21,7 @@ export const athletesEyeSchema = z.object({
   videoSrc: z.string(),
   gpxSrc: z.string(),
   accentColor: z.string(),
+  durationInSeconds: z.number().positive().optional(),
 });
 
 export type AthletesEyeProps = z.infer<typeof athletesEyeSchema>;

packages/template-athletes-eye/src/Root.tsx

@@ -3,23 +3,35 @@ import { Composition, staticFile } from "remotion";
 import { AthletesEye, athletesEyeSchema } from "./AthletesEye";
 
 const FPS = 30;
+const DEFAULT_VIDEO_SRC = "https://remotion.media/BigBuckBunny.mp4";
+const DEFAULT_DEMO_DURATION_IN_SECONDS = 30;
 
 export const RemotionRoot: React.FC = () => {
   return (
     <Composition
       calculateMetadata={async ({ props }) => {
         const metadata = await getVideoMetadata(props.videoSrc);
+        const durationInSeconds =
+          props.durationInSeconds ??
+          (props.videoSrc === DEFAULT_VIDEO_SRC
+            ? DEFAULT_DEMO_DURATION_IN_SECONDS
+            : metadata.durationInSeconds);
 
         return {
-          durationInFrames: Math.floor(metadata.durationInSeconds * FPS),
+          durationInFrames: Math.max(
+            1,
+            Math.floor(
+              Math.min(durationInSeconds, metadata.durationInSeconds) * FPS,
+            ),
+          ),
           fps: FPS,
         };
       }}
       component={AthletesEye}
       defaultProps={{
         accentColor: "#20e3b2",
         gpxSrc: staticFile("sample.gpx"),
-        videoSrc: "https://remotion.media/BigBuckBunny.mp4",
+        videoSrc: DEFAULT_VIDEO_SRC,
       }}
       fps={FPS}
       height={1920}