ZacharyZhang-NY
e74dafcd36
Three independently ugly bugs that all fed the same log flood:
* Electron's `WebFrameMain.send` writes every "Render frame was disposed"
to stderr via `console.error`. When the worker fans a second
agent-event past a reloading renderer, we produced thousands of
identical lines and stalled the main loop on stderr I/O. Added a
`mainFrame.detached` guard so the send is short-circuited before
Electron's own catch block fires, and installed a targeted filter in
`suppress-warnings.ts` (now actually imported from the entry point)
so the specific `console.error("Error sending from webFrameMain:"…)`
noise never reaches the terminal. Any other payload still surfaces.
* `dispatchAgentMessage` accepted the human-reader sentinel as a wake
target when an agent replied to `__board__` — `wakeAgentIfPossible`
then called `db.getAgent("__board__")`, threw, and the dispatcher
kept repeating on every send. Strip `HUMAN_SENDER_ID` at
`resolveMessageWakeTargets`, and keep a defense-in-depth guard in the
heartbeat so a stray caller (future automation fan-out) cannot
reintroduce the crash.
* Pi's skills loader rejects any SKILL.md whose frontmatter `name`
diverges from its parent directory. The four bundled `my-writing-style`
copies declared `name: writing-style-skill`, so every install emitted
a warning and dropped the skill. They also lived as orphan gitlinks
(mode 160000 without .gitmodules), and the global `*.md` gitignore
hid every other SKILL.md from version control. Fixed the frontmatter
to match the dir, converted the dangling submodules to plain trees,
and allowlisted `builtin-skills/**/*.md` so a fresh clone carries the
catalogue instead of silently losing it.
135 lines
3.2 KiB
Markdown
135 lines
3.2 KiB
Markdown
---
|
|
name: calculate-metadata
|
|
description: Dynamically set composition duration, dimensions, and props
|
|
metadata:
|
|
tags: calculateMetadata, duration, dimensions, props, dynamic
|
|
---
|
|
|
|
# Using calculateMetadata
|
|
|
|
Use `calculateMetadata` on a `<Composition>` to dynamically set duration, dimensions, and transform props before rendering.
|
|
|
|
```tsx
|
|
<Composition
|
|
id="MyComp"
|
|
component={MyComponent}
|
|
durationInFrames={300}
|
|
fps={30}
|
|
width={1920}
|
|
height={1080}
|
|
defaultProps={{ videoSrc: "https://remotion.media/video.mp4" }}
|
|
calculateMetadata={calculateMetadata}
|
|
/>
|
|
```
|
|
|
|
## Setting duration based on a video
|
|
|
|
Use the [`getVideoDuration`](./get-video-duration.md) and [`getVideoDimensions`](./get-video-dimensions.md) skills to get the video duration and dimensions:
|
|
|
|
```tsx
|
|
import { CalculateMetadataFunction } from "remotion";
|
|
import { getVideoDuration } from "./get-video-duration";
|
|
|
|
const calculateMetadata: CalculateMetadataFunction<Props> = async ({
|
|
props,
|
|
}) => {
|
|
const durationInSeconds = await getVideoDuration(props.videoSrc);
|
|
|
|
return {
|
|
durationInFrames: Math.ceil(durationInSeconds * 30),
|
|
};
|
|
};
|
|
```
|
|
|
|
## Matching dimensions of a video
|
|
|
|
Use the [`getVideoDimensions`](./get-video-dimensions.md) skill to get the video dimensions:
|
|
|
|
```tsx
|
|
import { CalculateMetadataFunction } from "remotion";
|
|
import { getVideoDuration } from "./get-video-duration";
|
|
import { getVideoDimensions } from "./get-video-dimensions";
|
|
|
|
const calculateMetadata: CalculateMetadataFunction<Props> = async ({
|
|
props,
|
|
}) => {
|
|
const dimensions = await getVideoDimensions(props.videoSrc);
|
|
|
|
return {
|
|
width: dimensions.width,
|
|
height: dimensions.height,
|
|
};
|
|
};
|
|
```
|
|
|
|
## Setting duration based on multiple videos
|
|
|
|
```tsx
|
|
const calculateMetadata: CalculateMetadataFunction<Props> = async ({
|
|
props,
|
|
}) => {
|
|
const metadataPromises = props.videos.map((video) =>
|
|
getVideoDuration(video.src),
|
|
);
|
|
const allMetadata = await Promise.all(metadataPromises);
|
|
|
|
const totalDuration = allMetadata.reduce(
|
|
(sum, durationInSeconds) => sum + durationInSeconds,
|
|
0,
|
|
);
|
|
|
|
return {
|
|
durationInFrames: Math.ceil(totalDuration * 30),
|
|
};
|
|
};
|
|
```
|
|
|
|
## Setting a default outName
|
|
|
|
Set the default output filename based on props:
|
|
|
|
```tsx
|
|
const calculateMetadata: CalculateMetadataFunction<Props> = async ({
|
|
props,
|
|
}) => {
|
|
return {
|
|
defaultOutName: `video-${props.id}.mp4`,
|
|
};
|
|
};
|
|
```
|
|
|
|
## Transforming props
|
|
|
|
Fetch data or transform props before rendering:
|
|
|
|
```tsx
|
|
const calculateMetadata: CalculateMetadataFunction<Props> = async ({
|
|
props,
|
|
abortSignal,
|
|
}) => {
|
|
const response = await fetch(props.dataUrl, { signal: abortSignal });
|
|
const data = await response.json();
|
|
|
|
return {
|
|
props: {
|
|
...props,
|
|
fetchedData: data,
|
|
},
|
|
};
|
|
};
|
|
```
|
|
|
|
The `abortSignal` cancels stale requests when props change in the Studio.
|
|
|
|
## Return value
|
|
|
|
All fields are optional. Returned values override the `<Composition>` props:
|
|
|
|
- `durationInFrames`: Number of frames
|
|
- `width`: Composition width in pixels
|
|
- `height`: Composition height in pixels
|
|
- `fps`: Frames per second
|
|
- `props`: Transformed props passed to the component
|
|
- `defaultOutName`: Default output filename
|
|
- `defaultCodec`: Default codec for rendering
|