Chapter 5: calculateMetadata()

Core Idea

calculateMetadata is a prop that gets passed to <Composition> and takes a callback function which may transform metadata.

Key Concepts

• Usage / API
• Compatibility
• See also

Code Examples

// @filename: MyComp.tsx
export type MyComponentProps = {
  text: string;
  duration: number;
};

export const MyComponent: React.FC<MyComponentProps> = ({text}) => {
  return <div>{text}</div>;
};

// @filename: Vid.tsx

const calculateMetadata: CalculateMetadataFunction<MyComponentProps> = ({props, defaultProps, abortSignal, isRendering}) => {
  return {
    // Change the metadata
    durationInFrames: props.duration,
    // or transform some props
    props,
    // or add per-composition default codec
    defaultCodec: 'h264',
    // or add per-composition default video image format
    defaultVideoImageFormat: 'png',
    // or add per-composition default pixel format
    defaultPixelFormat: 'yuv420p',
    // or add per-composition default ProRes profile
    defaultProResProfile: 'hq',
    // or add per-composition default audio sample rate
    defaultSampleRate: 44100,
  };
};

export const Root: React.FC = () => {
  return (
    <Composition
      id="MyComp"
      component={MyComponent}
      durationInFrames={300}
      fps={30}
      width={1920}
      height={1080}
      defaultProps={{
        text: 'Hello World',
        duration: 1,
      }}
      calculateMetadata={calculateMetadata}
    />
  );
};

• What it demonstrates: Usage pattern for calculateMetadata() from the official docs.

Key Takeaways

1. Understand usage / api when working with calculateMetadata().
2. Understand compatibility when working with calculateMetadata().
3. Understand see also when working with calculateMetadata().

Connects To

• Absolute Fill: related page in the Fundamentals & Core Concepts section.
• Animating Properties: related page in the Fundamentals & Core Concepts section.
• Animation Math: related page in the Fundamentals & Core Concepts section.