@remotion/renderer 4.0.127 → 4.0.128

package/dist/get-extra-frames-to-capture.d.ts

@@ -1,5 +1,6 @@
 type ReturnType = {
-    extraFramesToCaptureAssets: number[];
+    extraFramesToCaptureAssetsFrontend: number[];
+    extraFramesToCaptureAssetsBackend: number[];
     trimLeftOffset: number;
     trimRightOffset: number;
     chunkLengthInSeconds: number;

package/dist/get-extra-frames-to-capture.js

@@ -12,7 +12,8 @@ const getExtraFramesToCapture = ({ compositionStart, realFrameRange, fps, forSea
     // If the feature is disabled, don't capture extra frames.
     if (!forSeamlessAacConcatenation) {
         return {
-            extraFramesToCaptureAssets: [],
+            extraFramesToCaptureAssetsBackend: [],
+            extraFramesToCaptureAssetsFrontend: [],
             chunkLengthInSeconds: (realFrameRange[1] - realFrameRange[0] + 1) / fps,
             trimLeftOffset: 0,
             trimRightOffset: 0,
@@ -51,10 +52,8 @@ const getExtraFramesToCapture = ({ compositionStart, realFrameRange, fps, forSea
     const trimRightOffset = (aacAdjustedRightEnd * fps - Math.ceil(aacAdjustedRightEnd * fps)) / fps;
     const chunkLengthInSeconds = aacAdjustedRightEnd - aacAdjustedLeftEnd;
     return {
-        extraFramesToCaptureAssets: [
-            ...extraFramesToCaptureAudioOnlyFrontend,
-            ...extraFramesToCaptureAudioOnlyBackend,
-        ],
+        extraFramesToCaptureAssetsFrontend: extraFramesToCaptureAudioOnlyFrontend,
+        extraFramesToCaptureAssetsBackend: extraFramesToCaptureAudioOnlyBackend,
         chunkLengthInSeconds,
         trimLeftOffset,
         trimRightOffset,

package/dist/index.d.ts

@@ -1,3 +1,5 @@
+/// <reference types="node" />
+/// <reference types="node" />
 import execa from 'execa';
 import { HeadlessBrowser } from './browser/Browser';
 import { SymbolicateableError } from './error-handling/symbolicateable-error';

package/dist/port-config.d.ts

@@ -1,3 +1,7 @@
+/// <reference types="node" />
+/// <reference types="node" />
+/// <reference types="node" />
+/// <reference types="node" />
 import type { NetworkInterfaceInfo } from 'os';
 import os from 'os';
 type PortConfig = {

package/dist/render-frames.js

@@ -48,7 +48,7 @@ const innerRenderFrames = async ({ onFrameUpdate, outputDir, onStart, serialized
     }
     const downloadPromises = [];
     const realFrameRange = (0, get_frame_to_render_1.getRealFrameRange)(composition.durationInFrames, frameRange);
-    const { extraFramesToCaptureAssets, chunkLengthInSeconds, trimLeftOffset, trimRightOffset, } = (0, get_extra_frames_to_capture_1.getExtraFramesToCapture)({
+    const { extraFramesToCaptureAssetsBackend, extraFramesToCaptureAssetsFrontend, chunkLengthInSeconds, trimLeftOffset, trimRightOffset, } = (0, get_extra_frames_to_capture_1.getExtraFramesToCapture)({
         fps: composition.fps,
         compositionStart,
         realFrameRange,
@@ -306,7 +306,12 @@ const innerRenderFrames = async ({ onFrameUpdate, outputDir, onStart, serialized
             });
         }
     };
-    const extraFrames = Promise.all(extraFramesToCaptureAssets.map((frame) => {
+    // Render the extra frames at the beginning of the video first,
+    // then the regular frames, then the extra frames at the end of the video.
+    // While the order technically doesn't matter, components such as <Video> are
+    // not always frame perfect and give a flicker.
+    // We reduce the chance of flicker by rendering the frames in order.
+    await Promise.all(extraFramesToCaptureAssetsFrontend.map((frame) => {
         return renderFrameAndRetryTargetClose({
             frame,
             index: null,
@@ -315,7 +320,7 @@ const innerRenderFrames = async ({ onFrameUpdate, outputDir, onStart, serialized
             assetsOnly: true,
         });
     }));
-    const mainFrames = Promise.all(framesToRender.map((frame, index) => {
+    await Promise.all(framesToRender.map((frame, index) => {
         return renderFrameAndRetryTargetClose({
             frame,
             index,
@@ -324,28 +329,32 @@ const innerRenderFrames = async ({ onFrameUpdate, outputDir, onStart, serialized
             assetsOnly: false,
         });
     }));
-    const happyPath = Promise.all([extraFrames, mainFrames]).then(() => {
-        const firstFrameIndex = countType === 'from-zero' ? 0 : framesToRender[0];
-        const returnValue = {
-            assetsInfo: {
-                assets: assets.sort((a, b) => {
-                    return a.frame - b.frame;
-                }),
-                imageSequenceName: node_path_1.default.join(frameDir, `element-%0${filePadLength}d.${imageFormat}`),
-                firstFrameIndex,
-                downloadMap,
-                trimLeftOffset,
-                trimRightOffset,
-                chunkLengthInSeconds,
-                forSeamlessAacConcatenation,
-            },
-            frameCount: framesToRender.length,
-        };
-        return returnValue;
-    });
-    const result = await happyPath;
+    await Promise.all(extraFramesToCaptureAssetsBackend.map((frame) => {
+        return renderFrameAndRetryTargetClose({
+            frame,
+            index: null,
+            retriesLeft: MAX_RETRIES_PER_FRAME,
+            attempt: 1,
+            assetsOnly: true,
+        });
+    }));
+    const firstFrameIndex = countType === 'from-zero' ? 0 : framesToRender[0];
     await Promise.all(downloadPromises);
-    return result;
+    return {
+        assetsInfo: {
+            assets: assets.sort((a, b) => {
+                return a.frame - b.frame;
+            }),
+            imageSequenceName: node_path_1.default.join(frameDir, `element-%0${filePadLength}d.${imageFormat}`),
+            firstFrameIndex,
+            downloadMap,
+            trimLeftOffset,
+            trimRightOffset,
+            chunkLengthInSeconds,
+            forSeamlessAacConcatenation,
+        },
+        frameCount: framesToRender.length,
+    };
 };
 const internalRenderFramesRaw = ({ browserExecutable, cancelSignal, chromiumOptions, composition, concurrency, envVariables, everyNthFrame, frameRange, imageFormat, indent, jpegQuality, muted, onBrowserLog, onDownload, onFrameBuffer, onFrameUpdate, onStart, outputDir, port, puppeteerInstance, scale, server, timeoutInMilliseconds, logLevel, webpackBundleOrServeUrl, serializedInputPropsWithCustomSchema, serializedResolvedPropsWithCustomSchema, offthreadVideoCacheSizeInBytes, parallelEncodingEnabled, binariesDirectory, forSeamlessAacConcatenation, compositionStart, }) => {
     (0, validate_1.validateDimension)(composition.height, 'height', 'in the `config` object passed to `renderFrames()`');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/renderer",
-  "version": "4.0.127",
+  "version": "4.0.128",
   "description": "Renderer for Remotion",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -18,7 +18,7 @@
     "extract-zip": "2.0.1",
     "source-map": "^0.8.0-beta.0",
     "ws": "8.7.0",
-    "remotion": "4.0.127"
+    "remotion": "4.0.128"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
@@ -40,13 +40,13 @@
     "vitest": "0.31.1"
   },
   "optionalDependencies": {
-    "@remotion/compositor-darwin-arm64": "4.0.127",
-    "@remotion/compositor-darwin-x64": "4.0.127",
-    "@remotion/compositor-linux-arm64-musl": "4.0.127",
-    "@remotion/compositor-linux-arm64-gnu": "4.0.127",
-    "@remotion/compositor-linux-x64-gnu": "4.0.127",
-    "@remotion/compositor-linux-x64-musl": "4.0.127",
-    "@remotion/compositor-win32-x64-msvc": "4.0.127"
+    "@remotion/compositor-darwin-x64": "4.0.128",
+    "@remotion/compositor-darwin-arm64": "4.0.128",
+    "@remotion/compositor-linux-arm64-gnu": "4.0.128",
+    "@remotion/compositor-linux-x64-gnu": "4.0.128",
+    "@remotion/compositor-linux-arm64-musl": "4.0.128",
+    "@remotion/compositor-linux-x64-musl": "4.0.128",
+    "@remotion/compositor-win32-x64-msvc": "4.0.128"
   },
   "keywords": [
     "remotion",