Rendering Taking around 1 hour on GCP Cloud for 19 second Video.

[muneebable]

This is my main REMOTION Logic. I checked with CLI Command and it tokk around 4 minutes, and I think it is still long for 19 second render. but when i do the request with Node its just keep rendreing.

Can anyone point me in the right direction, how can i find the pain point?

//--- Main Remotion Component Logic --- 
const MainVideoComponent: React.FC<VideoProps> = ({ videoData, frameList, isCurrentUserPremium }) => {
    const { fps, durationInFrames: compositionDuration } = useVideoConfig();
    const currentFrame = useCurrentFrame();

    // --- Extract data ---
    const teaserSettings = videoData.teaserSettings;
    const introImages = videoData.images ?? [];
    const introImageCount = introImages.length;
    const subtitleSettings = videoData.subtitleSettings;
    const showSubtitles = subtitleSettings?.showSubtitles ?? true;
    const showEmojis = subtitleSettings?.showEmojis ?? true;

    // --- Calculate Intro Duration --- 
    const DURATION_PER_INTRO_IMAGE_FPS = 1 * fps;
    const calculatedIntroDuration = Math.min(
        introImageCount * DURATION_PER_INTRO_IMAGE_FPS,
        compositionDuration
    );
    const shouldRenderIntro = introImageCount > 0 && teaserSettings?.showTeaser && calculatedIntroDuration > 0;
    const mainSequenceStartFrame = shouldRenderIntro ? calculatedIntroDuration : 0;

    // --- Calculate Content Duration --- 
    const contentEndTime = frameList.length > 0 ? frameList[frameList.length - 1].end : 0;
    const contentDurationFrames = Math.ceil(contentEndTime * fps);

    return (
        <AbsoluteFill style={{ backgroundColor: 'black' }}>
            {/* --- Intro Sequence --- */}
            {shouldRenderIntro && (
                <Sequence from={0} durationInFrames={calculatedIntroDuration}>
                    <IntroSequence images={introImages} teaserSettings={teaserSettings} />
                </Sequence>
            )}

            {/* --- Main Content Sequence --- */}
            <Sequence from={mainSequenceStartFrame} durationInFrames={contentDurationFrames + fps}>
                <AbsoluteFill>
                    {frameList.map((sceneFrame, index) => {
                        const relativeStartFrame = Math.max(0, Math.round(sceneFrame.time * fps));
                        const durationInFrames = Math.max(1, Math.round(sceneFrame.duration * fps));
                        const absoluteImageStartFrame = mainSequenceStartFrame + relativeStartFrame;

                        if (isNaN(relativeStartFrame) || isNaN(durationInFrames)) {
                            console.error(`[NaN Detected] Skipping frame ${index}.`);
                            return null;
                        }

                        const scale = interpolate(
                          currentFrame,
                          // Interpolate based on absolute frame position in the overall composition
                          [absoluteImageStartFrame, absoluteImageStartFrame + durationInFrames / 2, absoluteImageStartFrame + durationInFrames],
                          index % 2 === 0 ? [1, 1.05, 1] : [1.05, 1, 1.05], // Subtle zoom/pan
                          {
                              extrapolateLeft: 'clamp',
                              extrapolateRight: 'clamp',
                          }
                      );

                        return (
                            <Sequence key={sceneFrame.id} from={relativeStartFrame} durationInFrames={durationInFrames}>
                                <AbsoluteFill>
                                    <Img
                                        src={sceneFrame.image}
                                        alt={`Scene ${sceneFrame.id}`}
                                        onError={(e) => {
                                          console.error(`Failed to load image: ${sceneFrame.image}`);
                                        }}
                                        style={{
                                            width: '100%',
                                            height: '100%',
                                            objectFit: 'cover',
                                            transform: `scale(${scale})`,
                                        }}
                                    />
                                </AbsoluteFill>
                            </Sequence>
                        );
                    })}
                    {/* --- Render Subtitles --- */}
                    {showSubtitles && videoData?.captions && (
                        <ProjectSubtitleRenderer
                            captions={videoData.captions}
                            subtitlePresetId={subtitleSettings?.presetId ?? 1}
                            styleOverrides={subtitleSettings}
                            showSubtitles={showSubtitles}
                            showEmojis={showEmojis}
                        />
                    )}
                    {/* Audio */}
                    {videoData?.AudioUrl && <Audio src={videoData.AudioUrl} />}
                    {/* Watermark */}
                    {!isCurrentUserPremium && <Watermark />}
                </AbsoluteFill>
            </Sequence>
        </AbsoluteFill>
    );
};

// RENDER VIDEO WITH CLOUD RUN
      const renderResult = await step.run("render-video-cloudrun", async () => {
        console.log(`[Inngest] Starting Remotion render for download ${renderId} on service ${serviceName}`);
        // Cast to 'any' to bypass strict type check for the 'type' property
        return await renderMediaOnCloudrun({
          serviceName,
          region: 'us-east1',
          serveUrl: process.env.REMOTION_GCP_SERVE_URL as string,
          composition: 'MainExportVideo',
          codec: 'h264',
          inputProps: {
            videoData: videoData,
            frameList: frameList,
            isCurrentUserPremium: isPremium,
          },
        } as any);
      });

`