Bug Report 🐛

The full reproduction based on the starter template can be found here. Relevant code:

      <Composition
        // You can take the "id" to render a video:
        // npx remotion render src/index.ts <id> out/video.mp4
        id="HelloWorld"
        component={HelloWorld}
        calculateMetadata={async (options) => {
            console.log(`CALCULATE METADATA, ${JSON.stringify(options.props, null,2)}`)

            if(options.props.size === 'big') {
                return {
                    width: 1920,
                    height: 1080
                }
            }

            if(options.props.size === 'small') {
                return {
                    width: 1366,
                    height: 768
                }
            }

            return {
            //     No override
                width: 720,
                height: 560
            }
        }}
        durationInFrames={150}
        fps={30}
        width={1280}
        height={720}
        // You can override these props for each render:
        // https://www.remotion.dev/docs/parametrized-rendering
        schema={myCompSchema}
        defaultProps={{
          size: 'small',
          titleText: "Welcome to Remotion",
          titleColor: "#000000",
          logoColor1: "#91EAE4",
          logoColor2: "#86A8E7",
        }}
      />

and render.ts


import {
    BrowserLog,
    renderFrames,
    selectComposition,
} from "@remotion/renderer"
import { bundle } from "@remotion/bundler"

const render = "HelloWorld"

async function main() {

    const bundleLocation = await bundle({
        entryPoint: "./src/index.ts",
    })

    const composition = await selectComposition({
        serveUrl: bundleLocation,
        id: render,
    })

    await renderFrames({
        composition,
        serveUrl: bundleLocation,
        inputProps: {
            size: 'big', // <- does not take effect
            titleText: "Welcome to Remotion",
            titleColor: "#000000",
            logoColor1: "#91EAE4",
            logoColor2: "#86A8E7",
        },
        scale: 1,
        logLevel: "verbose",
        imageFormat: "jpeg",
        jpegQuality: 100,
        onStart,
        onFrameUpdate,
        onBrowserLog,
        outputDir: "out/frames",
        frameRange: 10,
    })
}

main().catch(console.error).then(console.log)

//

function onStart() {
    console.log("Starting rendering...")
}

function onFrameUpdate(
    framesRendered: number,
    frame: number,
    timeToRenderInMilliseconds: number,
) {
    console.log(`${framesRendered} frames rendered.`)
    console.log(`Frame ${frame} was just rendered.`)
    console.log(`It took ${timeToRenderInMilliseconds}ms to render that frame.`)
}

function onBrowserLog(info: BrowserLog) {
    console.log(`${info.type}: ${info.text}`)
    console.log(
        info.stackTrace
            .map((stack) => {
                return `  ${stack.url}:${stack.lineNumber}:${stack.columnNumber}`
            })
            .join("\n"),
    )
}

Logs after running npm run render

/opt/homebrew/bin/npm run render

> my-video@1.0.0 render
> ts-node src/render.ts

Created directory for temporary files /var/folders/gt/cmsds4xx6kqct56zhll03_rm0000gn/T/remotion-v4-0-177-assetslz0fstcwf1
 openBrowser()  Opening browser: gl = undefined, executable = /opt/homebrew/bin/chromium, enableMultiProcessOnLinux = true
 compositor  Starting Rust process. Max video cache size: 1720MB, max concurrency = 4
Starting rendering...
1 frames rendered.
Frame 10 was just rendered.
It took 121.455375ms to render that frame.
undefined

Process finished with exit code 0

Initially I tried creating a repro example, because the output of the renderMedia did not have any effect on the size of the image. So the issues I have encountered when I am running npm run render:

1) The CALCULATE METADATA is never printed in the log, even though everything is configured 2) The image size of the output image is 1366x768, which means that the "small" from the defaultProps took effect. But it should be 1920x1080, "big" is passed into the props

On the other hand, with npm render-cli command I am getting the proper size and the proper logs, it seems:

{
    "render-cli": "remotion render HelloWorld --props '{\"size\": \"big\"}' --sequence --frames=1 --log=verbose",
}

remotion-dev / remotion

`calculateMetadata` does not work properly when rendering #4029

Bug Report 🐛