03 Async Metadata

1// T4 case 03 — calculateMetadata returns a Promise.
2//
3// Should be detected by lint_source.py as blocker r2hf/async-metadata.
4// The skill should refuse to translate.
5//
6// Why this is a blocker: HF needs the composition's duration, dimensions,
7// and props known up-front to produce HTML and seed the timeline. Async
8// metadata fetched from a server at render time has no equivalent in HF —
9// the metadata would need to be resolved at build time before the HTML is
10// authored.
11
12import React from "react";
13import { AbsoluteFill, useCurrentFrame } from "remotion";
14
15interface Props {
16  text: string;
17}
18
19export const AsyncMetadataDriven: React.FC<Props> = ({ text }) => {
20  const frame = useCurrentFrame();
21  return (
22    <AbsoluteFill>
23      <div>
24        {text} · frame {frame}
25      </div>
26    </AbsoluteFill>
27  );
28};
29
30export const calculateMetadata = async ({ props }: { props: Props }) => {
31  const response = await fetch(
32    `https://api.example.com/duration?text=${encodeURIComponent(props.text)}`,
33  );
34  const { durationInFrames } = await response.json();
35  return {
36    durationInFrames,
37    fps: 30,
38  };
39};