remotion 4.0.325 → 4.0.327

package/dist/cjs/audio/Audio.d.ts

@@ -15,6 +15,7 @@ export declare const Audio: React.ForwardRefExoticComponent<Omit<import("./props
     delayRenderTimeoutInMilliseconds?: number;
     delayRenderRetries?: number;
     loopVolumeCurveBehavior?: import("./use-audio-frame.js").LoopVolumeCurveBehavior;
+    onError?: (err: Error) => void;
 } & RemotionMainAudioProps & {
     /**
      * @deprecated For internal use only

package/dist/cjs/audio/Audio.js

@@ -22,7 +22,7 @@ const shared_audio_tags_js_1 = require("./shared-audio-tags.js");
 const AudioRefForwardingFunction = (props, ref) => {
     var _a, _b, _c;
     const audioContext = (0, react_1.useContext)(shared_audio_tags_js_1.SharedAudioContext);
-    const { startFrom, endAt, trimBefore, trimAfter, name, stack, pauseWhenBuffering, showInTimeline, ...otherProps } = props;
+    const { startFrom, endAt, trimBefore, trimAfter, name, stack, pauseWhenBuffering, showInTimeline, onError: onRemotionError, ...otherProps } = props;
     const { loop, ...propsOtherThanLoop } = props;
     const { fps } = (0, use_video_config_js_1.useVideoConfig)();
     const environment = (0, get_remotion_environment_js_1.getRemotionEnvironment)();
@@ -38,13 +38,18 @@ const AudioRefForwardingFunction = (props, ref) => {
         // and this does not need to be a fatal error
         const errMessage = `Could not play audio with src ${preloadedSrc}: ${e.currentTarget.error}. See https://remotion.dev/docs/media-playback-error for help.`;
         if (loop) {
+            if (onRemotionError) {
+                onRemotionError(new Error(errMessage));
+                return;
+            }
             (0, cancel_render_js_1.cancelRender)(new Error(errMessage));
         }
         else {
+            onRemotionError === null || onRemotionError === void 0 ? void 0 : onRemotionError(new Error(errMessage));
             // eslint-disable-next-line no-console
             console.warn(errMessage);
         }
-    }, [loop, preloadedSrc]);
+    }, [loop, onRemotionError, preloadedSrc]);
     const onDuration = (0, react_1.useCallback)((src, durationInSeconds) => {
         setDurations({ type: 'got-duration', durationInSeconds, src });
     }, [setDurations]);
@@ -74,9 +79,9 @@ const AudioRefForwardingFunction = (props, ref) => {
     }
     (0, validate_media_props_js_1.validateMediaProps)(props, 'Audio');
     if (environment.isRendering) {
-        return ((0, jsx_runtime_1.jsx)(AudioForRendering_js_1.AudioForRendering, { onDuration: onDuration, ...props, ref: ref, onError: onError, _remotionInternalNeedsDurationCalculation: Boolean(loop) }));
+        return ((0, jsx_runtime_1.jsx)(AudioForRendering_js_1.AudioForRendering, { onDuration: onDuration, ...props, ref: ref, onNativeError: onError, _remotionInternalNeedsDurationCalculation: Boolean(loop) }));
     }
-    return ((0, jsx_runtime_1.jsx)(AudioForPreview_js_1.AudioForPreview, { _remotionInternalNativeLoopPassed: (_c = props._remotionInternalNativeLoopPassed) !== null && _c !== void 0 ? _c : false, _remotionInternalStack: stack !== null && stack !== void 0 ? stack : null, shouldPreMountAudioTags: audioContext !== null && audioContext.numberOfAudioTags > 0, ...props, ref: ref, onError: onError, onDuration: onDuration, 
+    return ((0, jsx_runtime_1.jsx)(AudioForPreview_js_1.AudioForPreview, { _remotionInternalNativeLoopPassed: (_c = props._remotionInternalNativeLoopPassed) !== null && _c !== void 0 ? _c : false, _remotionInternalStack: stack !== null && stack !== void 0 ? stack : null, shouldPreMountAudioTags: audioContext !== null && audioContext.numberOfAudioTags > 0, ...props, ref: ref, onNativeError: onError, onDuration: onDuration, 
         // Proposal: Make this default to true in v5
         pauseWhenBuffering: pauseWhenBuffering !== null && pauseWhenBuffering !== void 0 ? pauseWhenBuffering : false, _remotionInternalNeedsDurationCalculation: Boolean(loop), showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true }));
 };

package/dist/cjs/audio/AudioForPreview.d.ts

@@ -8,6 +8,7 @@ type AudioForPreviewProps = RemotionAudioProps & {
     readonly _remotionInternalStack: string | null;
     readonly showInTimeline: boolean;
     readonly stack?: string | undefined;
+    readonly onNativeError: React.ReactEventHandler<HTMLAudioElement>;
 };
 export declare const AudioForPreview: React.ForwardRefExoticComponent<Omit<AudioForPreviewProps, "ref"> & React.RefAttributes<HTMLAudioElement>>;
 export {};

package/dist/cjs/audio/AudioForPreview.js

@@ -23,7 +23,7 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
         throw new Error('Cannot change the behavior for pre-mounting audio tags dynamically.');
     }
     const logLevel = (0, log_level_context_js_1.useLogLevel)();
-    const { volume, muted, playbackRate, shouldPreMountAudioTags, src, onDuration, acceptableTimeShiftInSeconds, _remotionInternalNeedsDurationCalculation, _remotionInternalNativeLoopPassed, _remotionInternalStack, allowAmplificationDuringRender, name, pauseWhenBuffering, showInTimeline, loopVolumeCurveBehavior, stack, crossOrigin, delayRenderRetries, delayRenderTimeoutInMilliseconds, toneFrequency, useWebAudioApi, ...nativeProps } = props;
+    const { volume, muted, playbackRate, shouldPreMountAudioTags, src, onDuration, acceptableTimeShiftInSeconds, _remotionInternalNeedsDurationCalculation, _remotionInternalNativeLoopPassed, _remotionInternalStack, allowAmplificationDuringRender, name, pauseWhenBuffering, showInTimeline, loopVolumeCurveBehavior, stack, crossOrigin, delayRenderRetries, delayRenderTimeoutInMilliseconds, toneFrequency, useWebAudioApi, onError, onNativeError, ...nativeProps } = props;
     // Typecheck that we are not accidentially passing unrecognized props
     // to the DOM
     const _propsValid = true;

package/dist/cjs/audio/AudioForRendering.d.ts

@@ -1,7 +1,9 @@
 import type { ForwardRefExoticComponent, RefAttributes } from 'react';
+import React from 'react';
 import type { RemotionAudioProps } from './props.js';
 type AudioForRenderingProps = RemotionAudioProps & {
     readonly onDuration: (src: string, durationInSeconds: number) => void;
+    readonly onNativeError: React.ReactEventHandler<HTMLAudioElement>;
 };
 export declare const AudioForRendering: ForwardRefExoticComponent<AudioForRenderingProps & RefAttributes<HTMLAudioElement>>;
 export {};

package/dist/cjs/audio/AudioForRendering.js

@@ -14,7 +14,7 @@ const volume_prop_js_1 = require("../volume-prop.js");
 const use_audio_frame_js_1 = require("./use-audio-frame.js");
 const AudioForRenderingRefForwardingFunction = (props, ref) => {
     const audioRef = (0, react_1.useRef)(null);
-    const { volume: volumeProp, playbackRate, allowAmplificationDuringRender, onDuration, toneFrequency, _remotionInternalNeedsDurationCalculation, _remotionInternalNativeLoopPassed, acceptableTimeShiftInSeconds, name, onError, delayRenderRetries, delayRenderTimeoutInMilliseconds, loopVolumeCurveBehavior, pauseWhenBuffering, ...nativeProps } = props;
+    const { volume: volumeProp, playbackRate, allowAmplificationDuringRender, onDuration, toneFrequency, _remotionInternalNeedsDurationCalculation, _remotionInternalNativeLoopPassed, acceptableTimeShiftInSeconds, name, onNativeError, delayRenderRetries, delayRenderTimeoutInMilliseconds, loopVolumeCurveBehavior, pauseWhenBuffering, ...nativeProps } = props;
     const absoluteFrame = (0, timeline_position_state_js_1.useTimelinePosition)();
     const volumePropFrame = (0, use_audio_frame_js_1.useFrameForVolumeProp)(loopVolumeCurveBehavior !== null && loopVolumeCurveBehavior !== void 0 ? loopVolumeCurveBehavior : 'repeat');
     const frame = (0, use_current_frame_js_1.useCurrentFrame)();
@@ -126,6 +126,6 @@ const AudioForRenderingRefForwardingFunction = (props, ref) => {
     if (!needsToRenderAudioTag) {
         return null;
     }
-    return (0, jsx_runtime_1.jsx)("audio", { ref: audioRef, ...nativeProps });
+    return (0, jsx_runtime_1.jsx)("audio", { ref: audioRef, ...nativeProps, onError: onNativeError });
 };
 exports.AudioForRendering = (0, react_1.forwardRef)(AudioForRenderingRefForwardingFunction);

package/dist/cjs/audio/props.d.ts

@@ -18,7 +18,7 @@ export type RemotionMainAudioProps = {
      */
     trimAfter?: number;
 };
-export type NativeAudioProps = Omit<React.DetailedHTMLProps<React.AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>, 'autoPlay' | 'controls' | 'onEnded' | 'nonce' | 'onResize' | 'onResizeCapture'>;
+export type NativeAudioProps = Omit<React.DetailedHTMLProps<React.AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>, 'autoPlay' | 'controls' | 'onEnded' | 'nonce' | 'onResize' | 'onResizeCapture' | 'onError'>;
 export type RemotionAudioProps = NativeAudioProps & {
     name?: string;
     volume?: VolumeProp;
@@ -37,6 +37,7 @@ export type RemotionAudioProps = NativeAudioProps & {
     delayRenderTimeoutInMilliseconds?: number;
     delayRenderRetries?: number;
     loopVolumeCurveBehavior?: LoopVolumeCurveBehavior;
+    onError?: (err: Error) => void;
 };
 type IsNever<T> = [T] extends [never] ? true : false;
 export type IsExact<T, U> = (<G>() => G extends T ? 1 : 2) extends <G>() => G extends U ? 1 : 2 ? IsNever<Exclude<keyof T, keyof U>> extends true ? IsNever<Exclude<keyof U, keyof T>> extends true ? true : false : false : false;

package/dist/cjs/audio/shared-audio-tags.d.ts

@@ -1,6 +1,5 @@
-import type { ComponentType, LazyExoticComponent } from 'react';
+import type { AudioHTMLAttributes, ComponentType, LazyExoticComponent } from 'react';
 import React from 'react';
-import type { RemotionAudioProps } from './props.js';
 import type { SharedElementSourceNode } from './shared-element-source-node.js';
 /**
  * This functionality of Remotion will keep a certain amount
@@ -15,7 +14,7 @@ import type { SharedElementSourceNode } from './shared-element-source-node.js';
  */
 type AudioElem = {
     id: number;
-    props: RemotionAudioProps;
+    props: AudioHTMLAttributes<HTMLAudioElement>;
     el: React.RefObject<HTMLAudioElement | null>;
     audioId: string;
     mediaElementSourceNode: SharedElementSourceNode | null;
@@ -23,14 +22,14 @@ type AudioElem = {
 };
 type SharedContext = {
     registerAudio: (options: {
-        aud: RemotionAudioProps;
+        aud: AudioHTMLAttributes<HTMLAudioElement>;
         audioId: string;
         premounting: boolean;
     }) => AudioElem;
     unregisterAudio: (id: number) => void;
     updateAudio: (options: {
         id: number;
-        aud: RemotionAudioProps;
+        aud: AudioHTMLAttributes<HTMLAudioElement>;
         audioId: string;
         premounting: boolean;
     }) => void;
@@ -46,7 +45,7 @@ export declare const SharedAudioContextProvider: React.FC<{
     readonly audioLatencyHint: AudioContextLatencyCategory;
 }>;
 export declare const useSharedAudio: ({ aud, audioId, premounting, }: {
-    aud: RemotionAudioProps;
+    aud: AudioHTMLAttributes<HTMLAudioElement>;
     audioId: string;
     premounting: boolean;
 }) => AudioElem;

package/dist/cjs/internals.d.ts

@@ -50,12 +50,12 @@ export declare const Internals: {
     readonly getRemotionEnvironment: () => RemotionEnvironment;
     readonly SharedAudioContext: import("react").Context<{
         registerAudio: (options: {
-            aud: import("./index.js").RemotionAudioProps;
+            aud: import("react").AudioHTMLAttributes<HTMLAudioElement>;
             audioId: string;
             premounting: boolean;
         }) => {
             id: number;
-            props: import("./index.js").RemotionAudioProps;
+            props: import("react").AudioHTMLAttributes<HTMLAudioElement>;
             el: React.RefObject<HTMLAudioElement | null>;
             audioId: string;
             mediaElementSourceNode: import("./audio/shared-element-source-node.js").SharedElementSourceNode | null;
@@ -64,7 +64,7 @@ export declare const Internals: {
         unregisterAudio: (id: number) => void;
         updateAudio: (options: {
             id: number;
-            aud: import("./index.js").RemotionAudioProps;
+            aud: import("react").AudioHTMLAttributes<HTMLAudioElement>;
             audioId: string;
             premounting: boolean;
         }) => void;

package/dist/cjs/use-current-scale.js

@@ -46,7 +46,14 @@ const calculateScale = ({ canvasSize, compositionHeight, compositionWidth, previ
     const heightRatio = canvasSize.height / compositionHeight;
     const widthRatio = canvasSize.width / compositionWidth;
     const ratio = Math.min(heightRatio, widthRatio);
-    return previewSize === 'auto' ? ratio : Number(previewSize);
+    if (previewSize === 'auto') {
+        // Container may be 0x0 because it doesn't have any content yet.
+        if (ratio === 0) {
+            return 1;
+        }
+        return ratio;
+    }
+    return Number(previewSize);
 };
 exports.calculateScale = calculateScale;
 /*

package/dist/cjs/version.d.ts

@@ -3,4 +3,4 @@
  * @see [Documentation](https://remotion.dev/docs/version)
  * @returns {string} The current version of the remotion package
  */
-export declare const VERSION = "4.0.325";
+export declare const VERSION = "4.0.327";

package/dist/cjs/version.js

@@ -7,4 +7,4 @@ exports.VERSION = void 0;
  * @see [Documentation](https://remotion.dev/docs/version)
  * @returns {string} The current version of the remotion package
  */
-exports.VERSION = '4.0.325';
+exports.VERSION = '4.0.327';

package/dist/esm/index.mjs

@@ -104,7 +104,7 @@ function truthy(value) {
 }
 
 // src/version.ts
-var VERSION = "4.0.325";
+var VERSION = "4.0.327";
 
 // src/multiple-versions-warning.ts
 var checkMultipleRemotionVersions = () => {
@@ -4363,6 +4363,8 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     delayRenderTimeoutInMilliseconds,
     toneFrequency,
     useWebAudioApi,
+    onError,
+    onNativeError,
     ...nativeProps
   } = props;
   const _propsValid = true;
@@ -4514,7 +4516,7 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
     _remotionInternalNativeLoopPassed,
     acceptableTimeShiftInSeconds,
     name,
-    onError,
+    onNativeError,
     delayRenderRetries,
     delayRenderTimeoutInMilliseconds,
     loopVolumeCurveBehavior,
@@ -4622,7 +4624,8 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
   }
   return /* @__PURE__ */ jsx18("audio", {
     ref: audioRef,
-    ...nativeProps
+    ...nativeProps,
+    onError: onNativeError
   });
 };
 var AudioForRendering = forwardRef5(AudioForRenderingRefForwardingFunction);
@@ -4640,6 +4643,7 @@ var AudioRefForwardingFunction = (props, ref) => {
     stack,
     pauseWhenBuffering,
     showInTimeline,
+    onError: onRemotionError,
     ...otherProps
   } = props;
   const { loop, ...propsOtherThanLoop } = props;
@@ -4654,11 +4658,16 @@ var AudioRefForwardingFunction = (props, ref) => {
     console.log(e.currentTarget.error);
     const errMessage = `Could not play audio with src ${preloadedSrc}: ${e.currentTarget.error}. See https://remotion.dev/docs/media-playback-error for help.`;
     if (loop) {
+      if (onRemotionError) {
+        onRemotionError(new Error(errMessage));
+        return;
+      }
       cancelRender(new Error(errMessage));
     } else {
+      onRemotionError?.(new Error(errMessage));
       console.warn(errMessage);
     }
-  }, [loop, preloadedSrc]);
+  }, [loop, onRemotionError, preloadedSrc]);
   const onDuration = useCallback10((src, durationInSeconds) => {
     setDurations({ type: "got-duration", durationInSeconds, src });
   }, [setDurations]);
@@ -4715,7 +4724,7 @@ var AudioRefForwardingFunction = (props, ref) => {
       onDuration,
       ...props,
       ref,
-      onError,
+      onNativeError: onError,
       _remotionInternalNeedsDurationCalculation: Boolean(loop)
     });
   }
@@ -4725,7 +4734,7 @@ var AudioRefForwardingFunction = (props, ref) => {
     shouldPreMountAudioTags: audioContext !== null && audioContext.numberOfAudioTags > 0,
     ...props,
     ref,
-    onError,
+    onNativeError: onError,
     onDuration,
     pauseWhenBuffering: pauseWhenBuffering ?? false,
     _remotionInternalNeedsDurationCalculation: Boolean(loop),
@@ -5840,7 +5849,13 @@ var calculateScale = ({
   const heightRatio = canvasSize.height / compositionHeight;
   const widthRatio = canvasSize.width / compositionWidth;
   const ratio = Math.min(heightRatio, widthRatio);
-  return previewSize === "auto" ? ratio : Number(previewSize);
+  if (previewSize === "auto") {
+    if (ratio === 0) {
+      return 1;
+    }
+    return ratio;
+  }
+  return Number(previewSize);
 };
 var useCurrentScale = (options) => {
   const hasContext = React25.useContext(CurrentScaleContext);

package/dist/esm/version.mjs

@@ -1,5 +1,5 @@
 // src/version.ts
-var VERSION = "4.0.325";
+var VERSION = "4.0.327";
 export {
   VERSION
 };

package/package.json

@@ -3,7 +3,7 @@
     "url": "https://github.com/remotion-dev/remotion/tree/main/packages/core"
   },
   "name": "remotion",
-  "version": "4.0.325",
+  "version": "4.0.327",
   "description": "Make videos programmatically",
   "main": "dist/cjs/index.js",
   "types": "dist/cjs/index.d.ts",
@@ -28,7 +28,7 @@
     "webpack": "5.96.1",
     "zod": "3.22.3",
     "eslint": "9.19.0",
-    "@remotion/eslint-config-internal": "4.0.325"
+    "@remotion/eslint-config-internal": "4.0.327"
   },
   "keywords": [
     "remotion",