remotion - npm Package Compare versions

Comparing version 1.4.0-alpha.84243ade to 1.4.0-alpha.a42341a0

dist/Composition.js

@@ -45,3 +45,3 @@ "use strict";
         if (!id.match(/^([a-zA-Z0-9-])+$/g)) {
-            throw new Error(`Composition id can only contain a-z, A-Z, 0-9 and -. You passed ${name}`);
+            throw new Error(`Composition id can only contain a-z, A-Z, 0-9 and -. You passed ${id}`);
         }
@@ -48,0 +48,0 @@ registerComposition({

dist/config/index.d.ts

@@ -0,5 +1,6 @@
+import { Codec } from './codec';
 import { Concurrency } from './concurrency';
+import { ImageFormat } from './image-format';
 import { WebpackConfiguration, WebpackOverrideFn } from './override-webpack';
 import { PixelFormat } from './pixel-format';
-import { OutputFormat } from './render-mode';
 export declare const Config: {
@@ -27,2 +28,7 @@ readonly Bundling: {
         readonly setQuality: (q: number | undefined) => void;
+        /**
+         * Decide in which image format to render. Can be either 'jpeg' or 'png'.
+         * PNG is slower, but supports transparency.
+         */
+        readonly setImageFormat: (format: "png" | "jpeg") => void;
     };
@@ -40,11 +46,26 @@ readonly Output: {
          */
-        readonly setPixelFormat: (format: "yuv420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le") => void;
+        readonly setPixelFormat: (format: "yuv420p" | "yuva420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le") => void;
         /**
-         * Specify what kind of output you, want, either 'mp4' or 'png-sequence'.
-         * Default: 'mp4'
+         * @deprecated Use setCodec() and setImageSequence() instead.
+         * Specify what kind of output you, either `mp4` or `png-sequence`.
          */
-        readonly setOutputFormat: (newRenderMode: "png-sequence" | "mp4") => void;
+        readonly setOutputFormat: (newLegacyFormat: "mp4" | "png-sequence") => void;
+        /**
+         * Specify the codec for stitching the frames into a video.
+         * Can be `h264` (default), `h265`, `vp8` or `vp9`
+         */
+        readonly setCodec: (newCodec: import("./codec").CodecOrUndefined) => void;
+        /**
+         * Set the Constant Rate Factor to pass to FFMPEG.
+         * Lower values mean better quality, but be aware that the ranges of
+         * possible values greatly differs between codecs.
+         */
+        readonly setCrf: (newCrf: number | undefined) => void;
+        /**
+         * Set to true if don't want a video but an image sequence as the output.
+         */
+        readonly setImageSequence: (newImageSequence: boolean) => void;
     };
 };
-export type { PixelFormat, Concurrency, OutputFormat, WebpackConfiguration, WebpackOverrideFn, };
+export type { PixelFormat, Concurrency, WebpackConfiguration, WebpackOverrideFn, ImageFormat, Codec, };
 //# sourceMappingURL=index.d.ts.map

dist/config/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Config = void 0;
+const codec_1 = require("./codec");
 const concurrency_1 = require("./concurrency");
+const crf_1 = require("./crf");
+const image_format_1 = require("./image-format");
+const image_sequence_1 = require("./image-sequence");
 const override_webpack_1 = require("./override-webpack");
@@ -9,3 +13,2 @@ const overwrite_1 = require("./overwrite");
 const quality_1 = require("./quality");
-const render_mode_1 = require("./render-mode");
 exports.Config = {
@@ -33,2 +36,7 @@ Bundling: {
         setQuality: quality_1.setQuality,
+        /**
+         * Decide in which image format to render. Can be either 'jpeg' or 'png'.
+         * PNG is slower, but supports transparency.
+         */
+        setImageFormat: image_format_1.setImageFormat,
     },
@@ -48,8 +56,23 @@ Output: {
         /**
-         * Specify what kind of output you, want, either 'mp4' or 'png-sequence'.
-         * Default: 'mp4'
+         * @deprecated Use setCodec() and setImageSequence() instead.
+         * Specify what kind of output you, either `mp4` or `png-sequence`.
          */
-        setOutputFormat: render_mode_1.setOutputFormat,
+        setOutputFormat: codec_1.setOutputFormat,
+        /**
+         * Specify the codec for stitching the frames into a video.
+         * Can be `h264` (default), `h265`, `vp8` or `vp9`
+         */
+        setCodec: codec_1.setCodec,
+        /**
+         * Set the Constant Rate Factor to pass to FFMPEG.
+         * Lower values mean better quality, but be aware that the ranges of
+         * possible values greatly differs between codecs.
+         */
+        setCrf: crf_1.setCrf,
+        /**
+         * Set to true if don't want a video but an image sequence as the output.
+         */
+        setImageSequence: image_sequence_1.setImageSequence,
     },
 };
 //# sourceMappingURL=index.js.map

dist/config/pixel-format.d.ts

@@ -1,6 +0,9 @@
-declare const validOptions: readonly ["yuv420p", "yuv422p", "yuv444p", "yuv420p10le", "yuv422p10le", "yuv444p10le"];
+import { Codec } from './codec';
+declare const validOptions: readonly ["yuv420p", "yuva420p", "yuv422p", "yuv444p", "yuv420p10le", "yuv422p10le", "yuv444p10le"];
 export declare type PixelFormat = typeof validOptions[number];
+export declare const DEFAULT_PIXEL_FORMAT: PixelFormat;
 export declare const setPixelFormat: (format: PixelFormat) => void;
-export declare const getPixelFormat: () => "yuv420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le";
+export declare const getPixelFormat: () => "yuv420p" | "yuva420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le";
+export declare const validateSelectedPixelFormatAndCodecCombination: (pixelFormat: PixelFormat, codec: Codec) => void;
 export {};
 //# sourceMappingURL=pixel-format.d.ts.map

dist/config/pixel-format.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getPixelFormat = exports.setPixelFormat = void 0;
+exports.validateSelectedPixelFormatAndCodecCombination = exports.getPixelFormat = exports.setPixelFormat = exports.DEFAULT_PIXEL_FORMAT = void 0;
 const validOptions = [
     'yuv420p',
+    'yuva420p',
     'yuv422p',
@@ -12,6 +13,7 @@ 'yuv444p',
 ];
-let currentPixelFormat = 'yuv420p';
+exports.DEFAULT_PIXEL_FORMAT = 'yuv420p';
+let currentPixelFormat = exports.DEFAULT_PIXEL_FORMAT;
 const setPixelFormat = (format) => {
     if (!validOptions.includes(format)) {
-        throw new Error(`Value ${format} is not valid as a pixel format.`);
+        throw new TypeError(`Value ${format} is not valid as a pixel format.`);
     }
@@ -25,2 +27,11 @@ currentPixelFormat = format;
 exports.getPixelFormat = getPixelFormat;
+const validateSelectedPixelFormatAndCodecCombination = (pixelFormat, codec) => {
+    if (pixelFormat !== 'yuva420p') {
+        return;
+    }
+    if (codec !== 'vp8' && codec !== 'vp9') {
+        throw new TypeError("Pixel format was set to 'yuva420p' but codec is not 'vp8' or 'vp8'. To render videos with alpha channel, you must choose a codec that supports it.");
+    }
+};
+exports.validateSelectedPixelFormatAndCodecCombination = validateSelectedPixelFormatAndCodecCombination;
 //# sourceMappingURL=pixel-format.js.map

dist/config/render-mode.d.ts

@@ -1,6 +0,6 @@
-declare const validRenderModes: readonly ["png-sequence", "mp4"];
+declare const validRenderModes: readonly ["png", "mp4", "h264", "h265", "vp8", "vp9"];
 export declare type OutputFormat = typeof validRenderModes[number];
-export declare const getFormat: () => OutputFormat;
+export declare const getOutputFormat: () => OutputFormat;
 export declare const setOutputFormat: (newRenderMode: OutputFormat) => void;
 export {};
 //# sourceMappingURL=render-mode.d.ts.map

dist/config/render-mode.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.setOutputFormat = exports.getFormat = void 0;
-const validRenderModes = ['png-sequence', 'mp4'];
+exports.setOutputFormat = exports.getOutputFormat = void 0;
+const validRenderModes = ['png', 'mp4', 'h264', 'h265', 'vp8', 'vp9'];
 let format = 'mp4';
-const getFormat = () => {
+const getOutputFormat = () => {
     return format;
 };
-exports.getFormat = getFormat;
+exports.getOutputFormat = getOutputFormat;
 const setOutputFormat = (newRenderMode) => {
@@ -11,0 +11,0 @@ if (!validRenderModes.includes(newRenderMode)) {

dist/internals.d.ts

@@ -16,10 +16,24 @@ /// <reference types="react" />
     getIsEvaluation: () => boolean;
-    getPixelFormat: () => "yuv420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le";
+    getPixelFormat: () => "yuv420p" | "yuva420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le";
     getConcurrency: () => number | null;
     getShouldOverwrite: () => boolean;
-    getFormat: () => "png-sequence" | "mp4";
+    getOutputCodecOrUndefined: () => import("./config/codec").CodecOrUndefined;
     getWebpackOverrideFn: () => WebpackOverrideFn;
     getQuality: () => number | undefined;
+    getShouldOutputImageSequence: () => boolean;
+    validateSelectedCrfAndCodecCombination: (crf: number, codec: "h264" | "h265" | "vp8" | "vp9") => void;
+    getFinalOutputCodec: ({ codec: inputCodec, fileExtension, emitWarning, }: {
+        codec: import("./config/codec").CodecOrUndefined;
+        fileExtension: string | null;
+        emitWarning: boolean;
+    }) => "h264" | "h265" | "vp8" | "vp9";
+    DEFAULT_CODEC: "h264" | "h265" | "vp8" | "vp9";
+    DEFAULT_PIXEL_FORMAT: "yuv420p" | "yuva420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le";
+    getDefaultCrfForCodec: (codec: "h264" | "h265" | "vp8" | "vp9") => number;
+    getActualCrf: (codec: "h264" | "h265" | "vp8" | "vp9") => number;
+    getUserPreferredImageFormat: () => "png" | "jpeg" | undefined;
+    validateSelectedPixelFormatAndImageFormatCombination: (pixelFormat: "yuv420p" | "yuva420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le", imageFormat: "png" | "jpeg") => void;
+    validateSelectedPixelFormatAndCodecCombination: (pixelFormat: "yuv420p" | "yuva420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le", codec: "h264" | "h265" | "vp8" | "vp9") => void;
 };
 export type { TComposition, Timeline, TCompMetadata, TSequence, WebpackOverrideFn, };
 //# sourceMappingURL=internals.d.ts.map

dist/internals.js

@@ -24,3 +24,7 @@ "use strict";
 const CompositionManager_1 = require("./CompositionManager");
+const codec_1 = require("./config/codec");
 const concurrency_1 = require("./config/concurrency");
+const crf_1 = require("./config/crf");
+const image_format_1 = require("./config/image-format");
+const image_sequence_1 = require("./config/image-sequence");
 const override_webpack_1 = require("./config/override-webpack");
@@ -30,3 +34,2 @@ const overwrite_1 = require("./config/overwrite");
 const quality_1 = require("./config/quality");
-const render_mode_1 = require("./config/render-mode");
 const perf = __importStar(require("./perf"));
@@ -53,6 +56,16 @@ const register_root_1 = require("./register-root");
     getShouldOverwrite: overwrite_1.getShouldOverwrite,
-    getFormat: render_mode_1.getFormat,
+    getOutputCodecOrUndefined: codec_1.getOutputCodecOrUndefined,
     getWebpackOverrideFn: override_webpack_1.getWebpackOverrideFn,
     getQuality: quality_1.getQuality,
+    getShouldOutputImageSequence: image_sequence_1.getShouldOutputImageSequence,
+    validateSelectedCrfAndCodecCombination: crf_1.validateSelectedCrfAndCodecCombination,
+    getFinalOutputCodec: codec_1.getFinalOutputCodec,
+    DEFAULT_CODEC: codec_1.DEFAULT_CODEC,
+    DEFAULT_PIXEL_FORMAT: pixel_format_1.DEFAULT_PIXEL_FORMAT,
+    getDefaultCrfForCodec: crf_1.getDefaultCrfForCodec,
+    getActualCrf: crf_1.getActualCrf,
+    getUserPreferredImageFormat: image_format_1.getUserPreferredImageFormat,
+    validateSelectedPixelFormatAndImageFormatCombination: image_format_1.validateSelectedPixelFormatAndImageFormatCombination,
+    validateSelectedPixelFormatAndCodecCombination: pixel_format_1.validateSelectedPixelFormatAndCodecCombination,
 };
 //# sourceMappingURL=internals.js.map

dist/use-video-config.js

@@ -6,5 +6,9 @@ "use strict";
 const useVideoConfig = () => {
-    return use_unsafe_video_config_1.useUnsafeVideoConfig();
+    const videoConfig = use_unsafe_video_config_1.useUnsafeVideoConfig();
+    if (!videoConfig) {
+        throw new Error('No video config found. You are probably calling useVideoConfig() from a component which has not been registered as a <Composition />. See https://www.remotion.dev/docs/the-fundamentals#defining-compositions for more information.');
+    }
+    return videoConfig;
 };
 exports.useVideoConfig = useVideoConfig;
 //# sourceMappingURL=use-video-config.js.map

dist/video/VideoForRendering.js

@@ -10,8 +10,3 @@ "use strict";
 const VideoForRendering = (props) => {
-    const [metadataLoaded, setMetadataLoaded] = react_1.useState(false);
-    const [currentFrameSet, setCurrentFrameSet] = react_1.useState(false);
-    const [handle] = react_1.useState(() => {
-        return ready_manager_1.delayRender();
-    });
-    const currentFrame = use_frame_1.useCurrentFrame();
+    const frame = use_frame_1.useCurrentFrame();
     const videoConfig = use_unsafe_video_config_1.useUnsafeVideoConfig();
@@ -22,10 +17,14 @@ const videoRef = react_1.useRef(null);
     }
-    const frameInSeconds = react_1.useMemo(() => currentFrame / videoConfig.fps, [
-        currentFrame,
-        videoConfig.fps,
-    ]);
-    const setFrame = react_1.useCallback(() => {
+    react_1.useEffect(() => {
         if (!videoRef.current) {
             return;
         }
+        const frameInSeconds = frame / videoConfig.fps;
+        const handle = ready_manager_1.delayRender();
+        if (videoRef.current.currentTime === frameInSeconds) {
+            videoRef.current.addEventListener('loadeddata', () => {
+                ready_manager_1.continueRender(handle);
+            }, { once: true });
+            return;
+        }
         videoRef.current.currentTime = frameInSeconds;
@@ -35,46 +34,3 @@ videoRef.current.addEventListener('seeked', () => {
         }, { once: true });
-        setInterval(() => {
-            setCurrentFrameSet(true);
-        }, 0);
-    }, [frameInSeconds, handle]);
-    const onMetadataLoad = react_1.useCallback(() => {
-        setMetadataLoaded(true);
-    }, []);
-    react_1.useEffect(() => {
-        if (metadataLoaded) {
-            setFrame();
-        }
-    }, [metadataLoaded, currentFrameSet, setFrame]);
-    react_1.useEffect(() => {
-        if (!videoRef.current) {
-            return;
-        }
-        if (metadataLoaded) {
-            setFrame();
-            return;
-        }
-        const { current } = videoRef;
-        current.addEventListener('loadedmetadata', onMetadataLoad);
-        return () => {
-            current.removeEventListener('loadedmetadata', onMetadataLoad);
-        };
-    }, [currentFrame, metadataLoaded, onMetadataLoad, setFrame, videoConfig.fps]);
-    const onSetReadyState = react_1.useCallback(() => {
-        if (!videoRef.current) {
-            throw Error('No video ref');
-        }
-        if (videoRef.current.readyState === 4) {
-            setFrame();
-        }
-    }, [setFrame]);
-    react_1.useEffect(() => {
-        if (!videoRef.current) {
-            return;
-        }
-        const { current } = videoRef;
-        current.addEventListener('loadeddata', onSetReadyState);
-        return () => {
-            current.removeEventListener('loadeddata', onSetReadyState);
-        };
-    });
+    }, [frame, videoConfig.fps]);
     return jsx_runtime_1.jsx("video", Object.assign({ ref: videoRef }, props), void 0);
@@ -81,0 +37,0 @@ };

package.json

 {
 	"name": "remotion",
-	"version": "1.4.0-alpha.84243ade",
+	"version": "1.4.0-alpha.a42341a0",
 	"description": "Render videos in React",
 	"main": "dist/index.js",
 	"scripts": {
-		"test": "eslint 'src' --ext ts,tsx && jest",
+		"test": "eslint src --ext ts,tsx && jest",
 		"build": "tsc -d",
@@ -9,0 +9,0 @@ "prerelease": "cp ../../README.md ."

No alert changes

Improved metrics

Total package byte prevSize

171410

increased by12.14%

Number of package files

210

increased by8.25%

Lines of code

2132

increased by12.63%

No dependency changes