remotion - npm Package Compare versions

Comparing version 4.0.177 to 4.0.178

dist/cjs/Composition.js

@@ -15,2 +15,3 @@ "use strict";
 const get_remotion_environment_js_1 = require("./get-remotion-environment.js");
+const input_props_serialization_js_1 = require("./input-props-serialization.js");
 const is_player_js_1 = require("./is-player.js");
@@ -82,3 +83,3 @@ const loading_indicator_js_1 = require("./loading-indicator.js");
             component: lazy,
-            defaultProps: defaultProps,
+            defaultProps: (0, input_props_serialization_js_1.serializeThenDeserializeInStudio)((defaultProps !== null && defaultProps !== void 0 ? defaultProps : {})),
             nonce,
@@ -85,0 +86,0 @@ parentFolderName: parentName,

dist/cjs/input-props-serialization.d.ts

@@ -16,1 +16,2 @@ export type SerializedJSONWithCustomFields = {
 export declare const deserializeJSONWithCustomFields: <T = Record<string, unknown>>(data: string) => T;
+export declare const serializeThenDeserializeInStudio: (props: Record<string, unknown>) => Record<string, unknown>;

dist/cjs/input-props-serialization.js

 "use strict";
 // Must keep this file in sync with the one in packages/lambda/src/shared/serialize-props.ts!
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.deserializeJSONWithCustomFields = exports.serializeJSONWithDate = exports.FILE_TOKEN = exports.DATE_TOKEN = void 0;
+exports.serializeThenDeserializeInStudio = exports.deserializeJSONWithCustomFields = exports.serializeJSONWithDate = exports.FILE_TOKEN = exports.DATE_TOKEN = void 0;
+const get_remotion_environment_js_1 = require("./get-remotion-environment.js");
 const static_file_js_1 = require("./static-file.js");
@@ -13,25 +14,31 @@ exports.DATE_TOKEN = 'remotion-date:';
     let setUsed = false;
-    const serializedString = JSON.stringify(data, function (key, value) {
-        const item = this[key];
-        if (item instanceof Date) {
-            customDateUsed = true;
-            return `${exports.DATE_TOKEN}${item.toISOString()}`;
-        }
-        if (item instanceof Map) {
-            mapUsed = true;
+    try {
+        const serializedString = JSON.stringify(data, function (key, value) {
+            const item = this[key];
+            if (item instanceof Date) {
+                customDateUsed = true;
+                return `${exports.DATE_TOKEN}${item.toISOString()}`;
+            }
+            if (item instanceof Map) {
+                mapUsed = true;
+                return value;
+            }
+            if (item instanceof Set) {
+                setUsed = true;
+                return value;
+            }
+            if (typeof item === 'string' &&
+                staticBase !== null &&
+                item.startsWith(staticBase)) {
+                customFileUsed = true;
+                return `${exports.FILE_TOKEN}${item.replace(staticBase + '/', '')}`;
+            }
             return value;
-        }
-        if (item instanceof Set) {
-            setUsed = true;
-            return value;
-        }
-        if (typeof item === 'string' &&
-            staticBase !== null &&
-            item.startsWith(staticBase)) {
-            customFileUsed = true;
-            return `${exports.FILE_TOKEN}${item.replace(staticBase + '/', '')}`;
-        }
-        return value;
-    }, indent);
-    return { serializedString, customDateUsed, customFileUsed, mapUsed, setUsed };
+        }, indent);
+        return { serializedString, customDateUsed, customFileUsed, mapUsed, setUsed };
+    }
+    catch (err) {
+        throw new Error('Could not serialize the passed input props to JSON: ' +
+            err.message);
+    }
 };
@@ -51,1 +58,14 @@ exports.serializeJSONWithDate = serializeJSONWithDate;
 exports.deserializeJSONWithCustomFields = deserializeJSONWithCustomFields;
+const serializeThenDeserializeInStudio = (props) => {
+    // Serializing once in the Studio, to catch potential serialization errors before
+    // you only get them during rendering
+    if ((0, get_remotion_environment_js_1.getRemotionEnvironment)().isStudio) {
+        return (0, exports.deserializeJSONWithCustomFields)((0, exports.serializeJSONWithDate)({
+            data: props,
+            indent: 2,
+            staticBase: window.remotion_staticBase,
+        }).serializedString);
+    }
+    return props;
+};
+exports.serializeThenDeserializeInStudio = serializeThenDeserializeInStudio;

dist/cjs/resolve-video-config.d.ts

@@ -5,3 +5,3 @@ import type { AnyZodObject } from 'zod';
 import type { VideoConfig } from './video-config.js';
-export declare const resolveVideoConfig: ({ calculateMetadata, signal, defaultProps, originalProps, compositionId, compositionDurationInFrames, compositionFps, compositionHeight, compositionWidth, }: {
+type ResolveVideoConfigParams = {
     compositionId: string;
@@ -16,2 +16,11 @@ compositionWidth: number | null;
     originalProps: Record<string, unknown>;
-}) => VideoConfig | Promise<VideoConfig>;
+};
+export declare const resolveVideoConfig: ({ calculateMetadata, signal, defaultProps, originalProps, compositionId, compositionDurationInFrames, compositionFps, compositionHeight, compositionWidth, }: ResolveVideoConfigParams) => VideoConfig | Promise<VideoConfig>;
+export declare const resolveVideoConfigOrCatch: (params: ResolveVideoConfigParams) => {
+    type: 'success';
+    result: VideoConfig | Promise<VideoConfig>;
+} | {
+    type: 'error';
+    error: Error;
+};
+export {};

dist/cjs/resolve-video-config.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.resolveVideoConfig = void 0;
+exports.resolveVideoConfigOrCatch = exports.resolveVideoConfig = void 0;
+const input_props_serialization_js_1 = require("./input-props-serialization.js");
 const validate_default_codec_js_1 = require("./validation/validate-default-codec.js");
@@ -56,4 +57,4 @@ const validate_dimensions_js_1 = require("./validation/validate-dimensions.js");
                 id: compositionId,
-                defaultProps,
-                props: (_a = c.props) !== null && _a !== void 0 ? _a : originalProps,
+                defaultProps: (0, input_props_serialization_js_1.serializeThenDeserializeInStudio)(defaultProps),
+                props: (0, input_props_serialization_js_1.serializeThenDeserializeInStudio)((_a = c.props) !== null && _a !== void 0 ? _a : originalProps),
                 defaultCodec: defaultCodec !== null && defaultCodec !== void 0 ? defaultCodec : null,
@@ -75,4 +76,4 @@ };
             id: compositionId,
-            defaultProps: defaultProps !== null && defaultProps !== void 0 ? defaultProps : {},
-            props: originalProps,
+            defaultProps: (0, input_props_serialization_js_1.serializeThenDeserializeInStudio)(defaultProps !== null && defaultProps !== void 0 ? defaultProps : {}),
+            props: (0, input_props_serialization_js_1.serializeThenDeserializeInStudio)(originalProps),
             defaultCodec: null,
@@ -84,4 +85,4 @@ };
         id: compositionId,
-        defaultProps: defaultProps !== null && defaultProps !== void 0 ? defaultProps : {},
-        props: (_a = calculatedProm.props) !== null && _a !== void 0 ? _a : originalProps,
+        defaultProps: (0, input_props_serialization_js_1.serializeThenDeserializeInStudio)(defaultProps !== null && defaultProps !== void 0 ? defaultProps : {}),
+        props: (0, input_props_serialization_js_1.serializeThenDeserializeInStudio)((_a = calculatedProm.props) !== null && _a !== void 0 ? _a : originalProps),
         defaultCodec: (_b = calculatedProm.defaultCodec) !== null && _b !== void 0 ? _b : null,
@@ -91,1 +92,17 @@ };
 exports.resolveVideoConfig = resolveVideoConfig;
+const resolveVideoConfigOrCatch = (params) => {
+    try {
+        const promiseOrReturnValue = (0, exports.resolveVideoConfig)(params);
+        return {
+            type: 'success',
+            result: promiseOrReturnValue,
+        };
+    }
+    catch (err) {
+        return {
+            type: 'error',
+            error: err,
+        };
+    }
+};
+exports.resolveVideoConfigOrCatch = resolveVideoConfigOrCatch;

dist/cjs/ResolveCompositionConfig.js

@@ -59,3 +59,3 @@ "use strict";
         const { signal } = controller;
-        const promOrNot = (0, resolve_video_config_js_1.resolveVideoConfig)({
+        const result = (0, resolve_video_config_js_1.resolveVideoConfigOrCatch)({
             compositionId,
@@ -71,2 +71,13 @@ calculateMetadata,
         });
+        if (result.type === 'error') {
+            setResolvedConfigs((r) => ({
+                ...r,
+                [compositionId]: {
+                    type: 'error',
+                    error: result.error,
+                },
+            }));
+            return controller;
+        }
+        const promOrNot = result.result;
         if (typeof promOrNot === 'object' && 'then' in promOrNot) {
@@ -73,0 +84,0 @@ setResolvedConfigs((r) => {

dist/cjs/use-lazy-component.js

@@ -31,3 +31,4 @@ "use strict";
     const lazy = (0, react_1.useMemo)(() => {
-        if ('lazyComponent' in compProps) {
+        if ('lazyComponent' in compProps &&
+            typeof compProps.lazyComponent !== 'undefined') {
             return react_1.default.lazy(compProps.lazyComponent);
@@ -34,0 +35,0 @@ }

dist/cjs/version.d.ts

@@ -6,2 +6,2 @@ /**
  */
-export declare const VERSION = "4.0.177";
+export declare const VERSION = "4.0.178";

dist/cjs/version.js

@@ -10,2 +10,2 @@ "use strict";
  */
-exports.VERSION = '4.0.177';
+exports.VERSION = '4.0.178';

dist/cjs/video/OffthreadVideoForRendering.js

@@ -105,5 +105,5 @@ "use strict";
     }, [toneMapped, currentTime, src, transparent]);
-    const onErr = (0, react_1.useCallback)((e) => {
+    const onErr = (0, react_1.useCallback)(() => {
         if (onError) {
-            onError === null || onError === void 0 ? void 0 : onError(e);
+            onError === null || onError === void 0 ? void 0 : onError(new Error('Failed to load image with src ' + actualSrc));
         }
@@ -110,0 +110,0 @@ else {

dist/cjs/video/props.d.ts

@@ -13,3 +13,3 @@ import type React from 'react';
 };
-export type RemotionVideoProps = Omit<React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, 'autoPlay' | 'controls' | 'onEnded' | 'nonce'> & {
+export type RemotionVideoProps = Omit<React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, 'autoPlay' | 'controls' | 'onEnded' | 'nonce' | 'onError'> & {
     name?: string;
@@ -26,2 +26,3 @@ volume?: VolumeProp;
     delayRenderRetries?: number;
+    onError?: (err: Error) => void;
 };
@@ -43,3 +44,3 @@ type DeprecatedOffthreadVideoProps = {
     muted?: boolean;
-    onError?: React.ReactEventHandler<HTMLVideoElement | HTMLImageElement>;
+    onError?: (err: Error) => void;
     acceptableTimeShiftInSeconds?: number;
@@ -53,2 +54,3 @@ allowAmplificationDuringRender?: boolean;
     delayRenderTimeoutInMilliseconds?: number;
+    delayRenderRetries?: number;
     /**
@@ -55,0 +57,0 @@ * @deprecated For internal use only

dist/cjs/video/Video.d.ts

@@ -7,3 +7,3 @@ import React from 'react';
  */
-export declare const Video: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, "nonce" | "onEnded" | "autoPlay" | "controls"> & {
+export declare const Video: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, "nonce" | "onError" | "onEnded" | "autoPlay" | "controls"> & {
     name?: string | undefined;
@@ -20,2 +20,3 @@ volume?: import("../volume-prop.js").VolumeProp | undefined;
     delayRenderRetries?: number | undefined;
+    onError?: ((err: Error) => void) | undefined;
 } & RemotionMainVideoProps & {
@@ -22,0 +23,0 @@ /**

dist/cjs/video/VideoForPreview.js

@@ -22,3 +22,3 @@ "use strict";
     // @ts-expect-error
-    acceptableTimeShift, acceptableTimeShiftInSeconds, toneFrequency, name, _remotionInternalNativeLoopPassed, _remotionInternalStack, _remotionDebugSeeking, style, pauseWhenBuffering, showInTimeline, loopVolumeCurveBehavior, ...nativeProps } = props;
+    acceptableTimeShift, acceptableTimeShiftInSeconds, toneFrequency, name, _remotionInternalNativeLoopPassed, _remotionInternalStack, _remotionDebugSeeking, style, pauseWhenBuffering, showInTimeline, loopVolumeCurveBehavior, onError, ...nativeProps } = props;
     const volumePropFrame = (0, use_audio_frame_js_1.useFrameForVolumeProp)(loopVolumeCurveBehavior !== null && loopVolumeCurveBehavior !== void 0 ? loopVolumeCurveBehavior : 'repeat');
@@ -87,7 +87,9 @@ const { fps, durationInFrames } = (0, use_video_config_js_1.useVideoConfig)();
             var _a;
-            if (current === null || current === void 0 ? void 0 : current.error) {
+            if (current.error) {
                 // eslint-disable-next-line no-console
                 console.error('Error occurred in video', current === null || current === void 0 ? void 0 : current.error);
                 // If user is handling the error, we don't cause an unhandled exception
-                if (props.onError) {
+                if (onError) {
+                    const err = new Error(`Code ${current.error.code}: ${current.error.message}`);
+                    onError(err);
                     return;
@@ -98,3 +100,9 @@ }
             else {
-                throw new Error('The browser threw an error');
+                // If user is handling the error, we don't cause an unhandled exception
+                if (onError) {
+                    const err = new Error(`The browser threw an error while playing the video ${src}`);
+                    onError(err);
+                    return;
+                }
+                throw new Error('The browser threw an error while playing the video');
             }
@@ -106,3 +114,3 @@ };
         };
-    }, [props.onError, src]);
+    }, [onError, src]);
     const currentOnDurationCallback = (0, react_1.useRef)();
@@ -109,0 +117,0 @@ currentOnDurationCallback.current = onDuration;

dist/cjs/video/VideoForRendering.d.ts

 import type { ForwardRefExoticComponent, RefAttributes } from 'react';
 import React from 'react';
-export declare const VideoForRendering: ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, "nonce" | "onEnded" | "autoPlay" | "controls"> & {
+export declare const VideoForRendering: ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, "nonce" | "onError" | "onEnded" | "autoPlay" | "controls"> & {
     name?: string | undefined;
@@ -15,4 +15,5 @@ volume?: import("../volume-prop.js").VolumeProp | undefined;
     delayRenderRetries?: number | undefined;
+    onError?: ((err: Error) => void) | undefined;
 } & {
     readonly onDuration: (src: string, durationInSeconds: number) => void;
 } & RefAttributes<HTMLVideoElement>>;

dist/cjs/video/VideoForRendering.js

@@ -206,4 +206,4 @@ "use strict";
     }
-    return (0, jsx_runtime_1.jsx)("video", { ref: videoRef, ...props, onError: onError });
+    return (0, jsx_runtime_1.jsx)("video", { ref: videoRef, ...props });
 };
 exports.VideoForRendering = (0, react_1.forwardRef)(VideoForRenderingForwardFunction);

package.json

 {
+  "repository": {
+    "url": "https://github.com/remotion-dev/remotion/tree/main/packages/core"
+  },
   "name": "remotion",
-  "version": "4.0.177",
-  "description": "Render videos in React",
+  "version": "4.0.178",
+  "description": "Make videos programmatically",
   "main": "dist/cjs/index.js",
   "types": "dist/cjs/index.d.ts",
   "module": "dist/esm/index.mjs",
-  "repository": {
-    "url": "https://github.com/remotion-dev/remotion"
-  },
   "bugs": {
@@ -21,14 +21,6 @@ "url": "https://github.com/remotion-dev/remotion/issues"
   "devDependencies": {
-    "@jonny/eslint-config": "3.0.281",
     "@testing-library/react": "14.0.0",
     "@happy-dom/global-registrator": "14.5.1",
     "happy-dom": "14.5.1",
-    "@types/node": "18.14.6",
-    "@types/react": "18.3.1",
-    "@types/react-dom": "18.3.0",
-    "eslint": "8.56.0",
-    "eslint-plugin-require-extensions": "^0.1.2",
     "jsdom": "21.1.0",
-    "prettier": "3.2.5",
-    "prettier-plugin-organize-imports": "3.2.4",
     "react": "18.3.1",
@@ -81,2 +73,3 @@ "react-dom": "18.3.1",
   },
+  "homepage": "https://www.remotion.dev/docs/remotion",
   "scripts": {
@@ -83,0 +76,0 @@ "formatting": "prettier src --check",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1232372

increased by0.49%

Dev dependency count

9

decreased by-47.06%

Lines of code

26309

increased by0.58%

Number of low quality alerts

0

decreased by-100%

No dependency changes