Calculating the duration of a composition automatically

It is currently not supported to derive the duration of a composition be from the content. The reason for it are the following:

• Not all compositions are finite:
  Here is an example of a component of which it is impossible to calculate the duration of:

  tsxCopy

  import React from 'react';
  import {useCurrentFrame} from 'remotion';
  
  const InfiniteComposition: React.FC = () => {
    const frame = useCurrentFrame();
    return <div>{frame}</div>;
  };
  

• Timing props and <Series> can be dynamic too While it is true that many compositions use timing props or <Series> from which the duration could be derived in many cases, it is also not a bulletproof solution.

  It is valid to change the values of the from or durationInFrames props over time:

  tsxCopy

  import {AbsoluteFill, useCurrentFrame} from 'remotion';
  
  const ChangingDuration: React.FC = () => {
    const frame = useCurrentFrame();
  
    return (
      // This is fine!
      <AbsoluteFill from={frame} durationInFrames={30}>
        <div>Hello World!</div>
      </AbsoluteFill>
    );
  };
  

  A practical usecase of this is to change the speed of a video over time.

• Remotion is only aware of the current frame:
  Remotion does not see the component statically like we do as developers, instead it only renders it at a certain point in time. To reliably determine when a component stops rendering markup, Remotion would have to loop through all frames until the markup stops which could be an expensive operation.

In summary, the dynamicity of React does not allow for a simple solution of deriving the duration reliably. We foresee that if a heuristic is used to determine the duration and it gets it wrong, it will lead to hard to debug cases.

We suggest to calculate the duration using the dynamic duration method described here.