remotion 4.0.493 → 4.0.494

package/dist/cjs/HtmlInCanvas.js

@@ -12,7 +12,6 @@ const interactivity_schema_js_1 = require("./interactivity-schema.js");
 const Sequence_js_1 = require("./Sequence.js");
 const use_delay_render_js_1 = require("./use-delay-render.js");
 const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
-const use_video_config_js_1 = require("./use-video-config.js");
 const with_interactivity_schema_js_1 = require("./with-interactivity-schema.js");
 // Memoize the support check across the session — neither the platform
 // capability nor the chrome://flags toggle can change between calls.
@@ -357,8 +356,6 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
 });
 HtmlInCanvasContent.displayName = 'HtmlInCanvasContent';
 const HtmlInCanvasInner = (0, react_1.forwardRef)(({ width, height, effects = [], children, onPaint, onInit, pixelDensity, controls, style, durationInFrames, name, ...sequenceProps }, ref) => {
-    const { durationInFrames: videoDuration } = (0, use_video_config_js_1.useVideoConfig)();
-    const resolvedDuration = durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : videoDuration;
     const memoizedEffectDefinitions = (0, use_memoized_effects_js_1.useMemoizedEffectDefinitions)(effects);
     const actualRef = (0, react_1.useRef)(null);
     const setCanvasRef = (0, react_1.useCallback)((node) => {
@@ -370,7 +367,7 @@ const HtmlInCanvasInner = (0, react_1.forwardRef)(({ width, height, effects = []
             ref.current = node;
         }
     }, [ref]);
-    return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { durationInFrames: resolvedDuration, name: name !== null && name !== void 0 ? name : '<HtmlInCanvas>', _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/remotion/html-in-canvas", controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, outlineRef: actualRef, layout: "none", ...sequenceProps, children: jsx_runtime_1.jsx(HtmlInCanvasContent, { ref: setCanvasRef, width: width, height: height, effects: effects, onPaint: onPaint, onInit: onInit, pixelDensity: pixelDensity, controls: controls, style: style, children: children }) }));
+    return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { durationInFrames: durationInFrames, name: name !== null && name !== void 0 ? name : '<HtmlInCanvas>', _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/remotion/html-in-canvas", controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, outlineRef: actualRef, layout: "none", ...sequenceProps, children: jsx_runtime_1.jsx(HtmlInCanvasContent, { ref: setCanvasRef, width: width, height: height, effects: effects, onPaint: onPaint, onInit: onInit, pixelDensity: pixelDensity, controls: controls, style: style, children: children }) }));
 });
 HtmlInCanvasInner.displayName = 'HtmlInCanvas';
 exports.htmlInCanvasSchema = {

package/dist/cjs/Sequence.js

@@ -363,7 +363,7 @@ const PremountedPostmountedSequenceRefForwardingFunction = (props, ref) => {
         var _a;
         return {
             ...passedStyle,
-            opacity: premountingActive || postmountingActive ? 0 : 1,
+            opacity: premountingActive || postmountingActive ? 0 : passedStyle === null || passedStyle === void 0 ? void 0 : passedStyle.opacity,
             pointerEvents: premountingActive || postmountingActive
                 ? 'none'
                 : ((_a = passedStyle === null || passedStyle === void 0 ? void 0 : passedStyle.pointerEvents) !== null && _a !== void 0 ? _a : undefined),

package/dist/cjs/animated-image/AnimatedImage.js

@@ -14,6 +14,7 @@ const use_video_config_js_1 = require("../use-video-config.js");
 const with_interactivity_schema_js_1 = require("../with-interactivity-schema.js");
 const canvas_1 = require("./canvas");
 const decode_image_js_1 = require("./decode-image.js");
+const get_current_time_js_1 = require("./get-current-time.js");
 const request_init_1 = require("./request-init");
 const resolve_image_source_1 = require("./resolve-image-source");
 const animatedImageSchema = {
@@ -55,7 +56,7 @@ const AnimatedImageContent = (0, react_1.forwardRef)(({ src, width, height, onEr
     const [decodeHandle] = (0, react_1.useState)(() => delayRender(`Rendering <AnimatedImage/> with src="${resolvedSrc}"`));
     const frame = (0, use_current_frame_js_1.useCurrentFrame)();
     const { fps } = (0, use_video_config_js_1.useVideoConfig)();
-    const currentTime = frame / playbackRate / fps;
+    const currentTime = (0, get_current_time_js_1.getCurrentTime)({ frame, playbackRate, fps });
     const currentTimeRef = (0, react_1.useRef)(currentTime);
     currentTimeRef.current = currentTime;
     const requestInitKey = (0, request_init_1.serializeRequestInit)(requestInit);
@@ -168,8 +169,6 @@ const AnimatedImageContent = (0, react_1.forwardRef)(({ src, width, height, onEr
 });
 AnimatedImageContent.displayName = 'AnimatedImageContent';
 const AnimatedImageInner = ({ src, width, height, onError, fit, playbackRate, loopBehavior, id, className, style, durationInFrames, requestInit, effects = [], controls, ref, ...sequenceProps }) => {
-    const { durationInFrames: videoDuration } = (0, use_video_config_js_1.useVideoConfig)();
-    const resolvedDuration = durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : videoDuration;
     const actualRef = (0, react_1.useRef)(null);
     const memoizedEffectDefinitions = (0, use_memoized_effects_js_1.useMemoizedEffectDefinitions)(effects);
     (0, react_1.useImperativeHandle)(ref, () => {
@@ -190,7 +189,7 @@ const AnimatedImageInner = ({ src, width, height, onError, fit, playbackRate, lo
         requestInit,
         ...canvasProps,
     };
-    return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", durationInFrames: resolvedDuration, name: "<AnimatedImage>", _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/animatedimage", controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, ...sequenceProps, outlineRef: actualRef, children: jsx_runtime_1.jsx(AnimatedImageContent, { ...animatedImageProps, ref: actualRef, effects: effects, controls: controls }) }));
+    return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", durationInFrames: durationInFrames, name: "<AnimatedImage>", _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/animatedimage", controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, ...sequenceProps, outlineRef: actualRef, children: jsx_runtime_1.jsx(AnimatedImageContent, { ...animatedImageProps, ref: actualRef, effects: effects, controls: controls }) }));
 };
 exports.AnimatedImage = (0, with_interactivity_schema_js_1.withInteractivitySchema)({
     Component: AnimatedImageInner,

package/dist/cjs/animated-image/get-current-time.d.ts

@@ -0,0 +1,5 @@
+export declare const getCurrentTime: ({ frame, playbackRate, fps, }: {
+    frame: number;
+    playbackRate: number;
+    fps: number;
+}) => number;

package/dist/cjs/animated-image/get-current-time.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCurrentTime = void 0;
+const getCurrentTime = ({ frame, playbackRate, fps, }) => {
+    return (frame * playbackRate) / fps;
+};
+exports.getCurrentTime = getCurrentTime;

package/dist/cjs/use-schema.d.ts

@@ -25,6 +25,12 @@ export type VideoConfigNumericExpression = {
     multiplicand: number;
     factorPosition: 'left' | 'right';
     value: number;
+} | {
+    type: 'video-config-subtraction';
+    identifier: string;
+    minuend: number;
+    subtrahend: number;
+    value: number;
 };
 export type CanUpdateSequencePropStatusLinearEasing = {
     type: 'linear';

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.493";
+export declare const VERSION = "4.0.494";

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.493';
+exports.VERSION = '4.0.494';

package/dist/esm/index.mjs

@@ -1310,7 +1310,7 @@ var getSingleChildComponent = (children) => {
 };
 
 // src/version.ts
-var VERSION = "4.0.493";
+var VERSION = "4.0.494";
 
 // src/multiple-versions-warning.ts
 var checkMultipleRemotionVersions = () => {
@@ -4795,7 +4795,7 @@ var PremountedPostmountedSequenceRefForwardingFunction = (props, ref) => {
   const style = useMemo14(() => {
     return {
       ...passedStyle,
-      opacity: premountingActive || postmountingActive ? 0 : 1,
+      opacity: premountingActive || postmountingActive ? 0 : passedStyle?.opacity,
       pointerEvents: premountingActive || postmountingActive ? "none" : passedStyle?.pointerEvents ?? undefined,
       ...premountingActive ? styleWhilePremounted : {},
       ...postmountingActive ? styleWhilePostmounted : {}
@@ -5405,6 +5405,15 @@ var decodeImage = async ({
   };
 };
 
+// src/animated-image/get-current-time.ts
+var getCurrentTime = ({
+  frame,
+  playbackRate,
+  fps
+}) => {
+  return frame * playbackRate / fps;
+};
+
 // src/animated-image/request-init.ts
 var serializeRequestInit = (requestInit) => {
   if (!requestInit) {
@@ -5478,7 +5487,7 @@ var AnimatedImageContent = forwardRef4(({
   const [decodeHandle] = useState6(() => delayRender2(`Rendering <AnimatedImage/> with src="${resolvedSrc}"`));
   const frame = useCurrentFrame();
   const { fps } = useVideoConfig();
-  const currentTime = frame / playbackRate / fps;
+  const currentTime = getCurrentTime({ frame, playbackRate, fps });
   const currentTimeRef = useRef9(currentTime);
   currentTimeRef.current = currentTime;
   const requestInitKey = serializeRequestInit(requestInit);
@@ -5606,8 +5615,6 @@ var AnimatedImageInner = ({
   ref,
   ...sequenceProps
 }) => {
-  const { durationInFrames: videoDuration } = useVideoConfig();
-  const resolvedDuration = durationInFrames ?? videoDuration;
   const actualRef = useRef9(null);
   const memoizedEffectDefinitions = useMemoizedEffectDefinitions(effects);
   useImperativeHandle2(ref, () => {
@@ -5630,7 +5637,7 @@ var AnimatedImageInner = ({
   };
   return /* @__PURE__ */ jsx14(Sequence, {
     layout: "none",
-    durationInFrames: resolvedDuration,
+    durationInFrames,
     name: "<AnimatedImage>",
     _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/animatedimage",
     controls,
@@ -9468,8 +9475,6 @@ var HtmlInCanvasInner = forwardRef9(({
   name,
   ...sequenceProps
 }, ref) => {
-  const { durationInFrames: videoDuration } = useVideoConfig();
-  const resolvedDuration = durationInFrames ?? videoDuration;
   const memoizedEffectDefinitions = useMemoizedEffectDefinitions(effects);
   const actualRef = useRef22(null);
   const setCanvasRef = useCallback16((node) => {
@@ -9481,7 +9486,7 @@ var HtmlInCanvasInner = forwardRef9(({
     }
   }, [ref]);
   return /* @__PURE__ */ jsx25(Sequence, {
-    durationInFrames: resolvedDuration,
+    durationInFrames,
     name: name ?? "<HtmlInCanvas>",
     _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/remotion/html-in-canvas",
     controls,

package/dist/esm/version.mjs

@@ -1,5 +1,5 @@
 // src/version.ts
-var VERSION = "4.0.493";
+var VERSION = "4.0.494";
 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.493",
+	"version": "4.0.494",
 	"description": "Make videos programmatically",
 	"main": "dist/cjs/index.js",
 	"types": "dist/cjs/index.d.ts",
@@ -35,7 +35,7 @@
 		"react-dom": "19.2.3",
 		"webpack": "5.105.0",
 		"zod": "4.3.6",
-		"@remotion/eslint-config-internal": "4.0.493",
+		"@remotion/eslint-config-internal": "4.0.494",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},