remotion: Add effectsOutputSize to all effect-capable components

packages/core/src/HtmlInCanvas.tsx

@@ -8,7 +8,7 @@ import React, {
 	useRef,
 } from 'react';
 import type {SequenceControls} from './CompositionManager.js';
-import type {EffectsProp} from './effects/effect-types.js';
+import type {EffectsProp, EffectsOutputSize} from './effects/effect-types.js';
 import {runEffectChain} from './effects/run-effect-chain.js';
 import {useEffectChainState} from './effects/use-effect-chain-state.js';
 import {
@@ -450,6 +450,7 @@ export type HtmlInCanvasProps = Omit<InteractiveBaseProps, 'children'> &
 		readonly width: number;
 		readonly height: number;
 		readonly effects?: EffectsProp;
+		readonly effectsOutputSize?: EffectsOutputSize;
 		readonly children: React.ReactNode;
 		readonly onPaint?: HtmlInCanvasOnPaint;
 		readonly onInit?: HtmlInCanvasOnInit;
@@ -473,6 +474,7 @@ type HtmlInCanvasContentProps = {
 	readonly width: number;
 	readonly height: number;
 	readonly effects: EffectsProp;
+	readonly effectsOutputSize: EffectsOutputSize | null;
 	readonly children: React.ReactNode;
 	readonly canvasSiblings: React.ReactNode | null;
 	readonly onPaint: HtmlInCanvasOnPaint | undefined;
@@ -491,6 +493,7 @@ const HtmlInCanvasContent = forwardRef<
 			width,
 			height,
 			effects,
+			effectsOutputSize,
 			children,
 			canvasSiblings,
 			onPaint,
@@ -586,7 +589,7 @@ const HtmlInCanvasContent = forwardRef<
 			[ref, paintTargetMode],
 		);
 
-		const chainState = useEffectChainState();
+		const chainState = useEffectChainState(effectsOutputSize);
 
 		const memoizedEffects = useMemoizedEffects({
 			effects,
@@ -1026,6 +1029,7 @@ const HtmlInCanvasInner = forwardRef<
 			width,
 			height,
 			effects = [],
+			effectsOutputSize,
 			children,
 			onPaint,
 			onInit,
@@ -1121,6 +1125,7 @@ const HtmlInCanvasInner = forwardRef<
 						width={width}
 						height={height}
 						effects={effects}
+						effectsOutputSize={effectsOutputSize ?? null}
 						onPaint={onPaint}
 						onInit={onInit}
 						pixelDensity={pixelDensity}

packages/core/src/Img.tsx

@@ -14,7 +14,7 @@ import type {
 	CanvasImageProps,
 } from './canvas-image/props.js';
 import type {SequenceControls} from './CompositionManager.js';
-import type {EffectsProp} from './effects/effect-types.js';
+import type {EffectsProp, EffectsOutputSize} from './effects/effect-types.js';
 import {addSequenceStackTraces} from './enable-sequence-stack-traces.js';
 import {Freeze} from './freeze.js';
 import {getCrossOriginValue} from './get-cross-origin-value.js';
@@ -68,6 +68,7 @@ export type ImgProps = NativeImgProps & {
 	readonly onImageError?: (error: Error) => void;
 	readonly src: string;
 	readonly effects?: EffectsProp;
+	readonly effectsOutputSize?: EffectsOutputSize;
 	readonly showInTimeline?: boolean;
 	readonly name?: string;
 } & Omit<InteractiveBaseProps, 'playbackRate'> &
@@ -90,6 +91,7 @@ type ImgContentProps = Omit<
 	| 'durationInFrames'
 	| 'freeze'
 	| 'effects'
+	| 'effectsOutputSize'
 	| 'premountFor'
 	| 'postmountFor'
 	| 'styleWhilePremounted'
@@ -353,7 +355,7 @@ const ImgContent: React.FC<ImgContentProps> = ({
 	);
 };
 
-type NativeImgInnerProps = Omit<ImgProps, 'effects'> & {
+type NativeImgInnerProps = Omit<ImgProps, 'effects' | 'effectsOutputSize'> & {
 	readonly controls: SequenceControls | undefined;
 };
 
@@ -557,6 +559,7 @@ const ImgInner: React.FC<
 	}
 > = ({
 	effects = [],
+	effectsOutputSize,
 	ref,
 	hidden,
 	name,
@@ -648,6 +651,7 @@ const ImgInner: React.FC<
 			height={canvasHeight}
 			fit={canvasFit}
 			effects={effects}
+			effectsOutputSize={effectsOutputSize}
 			className={className}
 			style={style}
 			cropLeft={cropLeft}

packages/core/src/animated-image/AnimatedImage.tsx

@@ -8,7 +8,7 @@ import {
 	useState,
 } from 'react';
 import type {SequenceControls} from '../CompositionManager.js';
-import type {EffectsProp} from '../effects/effect-types.js';
+import type {EffectsProp, EffectsOutputSize} from '../effects/effect-types.js';
 import {
 	useMemoizedEffectDefinitions,
 	useMemoizedEffects,
@@ -87,6 +87,7 @@ const getCanvasPropsFromSequenceProps = (
 
 type AnimatedImageContentProps = RemotionAnimatedImageProps & {
 	readonly effects: EffectsProp;
+	readonly effectsOutputSize: EffectsOutputSize | null;
 	readonly controls: SequenceControls | undefined;
 };
 
@@ -105,6 +106,7 @@ const AnimatedImageContent = forwardRef<
 			fit = 'fill',
 			requestInit,
 			effects,
+			effectsOutputSize,
 			controls,
 			...props
 		},
@@ -280,6 +282,8 @@ const AnimatedImageContent = forwardRef<
 			width,
 			height,
 			cancelRender,
+			effectsOutputSize?.width,
+			effectsOutputSize?.height,
 		]);
 
 		return (
@@ -289,6 +293,7 @@ const AnimatedImageContent = forwardRef<
 				height={height}
 				fit={fit}
 				effects={memoizedEffects}
+				effectsOutputSize={effectsOutputSize ?? null}
 				{...props}
 			/>
 		);
@@ -320,6 +325,7 @@ const AnimatedImageInner = ({
 	cropBottom,
 	requestInit,
 	effects = [],
+	effectsOutputSize,
 	controls,
 	ref,
 	...sequenceProps
@@ -409,6 +415,7 @@ const AnimatedImageInner = ({
 						{...animatedImageProps}
 						ref={actualRef}
 						effects={effects}
+						effectsOutputSize={effectsOutputSize ?? null}
 						controls={controls}
 					/>
 				</SequenceContent>

packages/core/src/animated-image/canvas.tsx

@@ -1,6 +1,9 @@
 import React, {useCallback, useImperativeHandle, useMemo, useRef} from 'react';
 import {calculateImageFit} from '../calculate-image-fit.js';
-import type {EffectDefinitionAndStack} from '../effects/effect-types.js';
+import type {
+	EffectDefinitionAndStack,
+	EffectsOutputSize,
+} from '../effects/effect-types.js';
 import {runEffectChain} from '../effects/run-effect-chain.js';
 import {useEffectChainState} from '../effects/use-effect-chain-state.js';
 import type {AnimatedImageCanvasProps, AnimatedImageFillMode} from './props';
@@ -15,6 +18,7 @@ type Props = {
 
 	readonly style?: React.CSSProperties;
 	readonly effects: EffectDefinitionAndStack<unknown>[];
+	readonly effectsOutputSize: EffectsOutputSize | null;
 } & AnimatedImageCanvasProps;
 
 export type AnimatedImageCanvasRef = {
@@ -26,9 +30,12 @@ export type AnimatedImageCanvasRef = {
 const CanvasRefForwardingFunction: React.ForwardRefRenderFunction<
 	AnimatedImageCanvasRef,
 	Props
-> = ({width, height, fit, className, style, effects, ...props}, ref) => {
+> = (
+	{width, height, fit, className, style, effects, effectsOutputSize, ...props},
+	ref,
+) => {
 	const canvasRef = useRef<HTMLCanvasElement>(null);
-	const chainState = useEffectChainState();
+	const chainState = useEffectChainState(effectsOutputSize);
 
 	const sourceCanvas = useMemo(() => {
 		if (typeof document === 'undefined') {

packages/core/src/animated-image/props.ts

@@ -1,5 +1,5 @@
 import type {ImageFit} from '../calculate-image-fit.js';
-import type {EffectsProp} from '../effects/effect-types.js';
+import type {EffectsProp, EffectsOutputSize} from '../effects/effect-types.js';
 import type {
 	InteractiveBaseProps,
 	InteractiveCropProps,
@@ -33,6 +33,7 @@ export type AnimatedImageProps = InteractiveBaseProps &
 	InteractivePremountProps &
 	RemotionAnimatedImageProps & {
 		readonly effects?: EffectsProp;
+		readonly effectsOutputSize?: EffectsOutputSize;
 	};
 
 export type AnimatedImageFillMode = ImageFit;

packages/core/src/canvas-image/CanvasImage.tsx

@@ -10,7 +10,7 @@ import {
 } from 'react';
 import {calculateImageFit} from '../calculate-image-fit.js';
 import type {SequenceControls} from '../CompositionManager.js';
-import type {EffectsProp} from '../effects/effect-types.js';
+import type {EffectsProp, EffectsOutputSize} from '../effects/effect-types.js';
 import {runEffectChain} from '../effects/run-effect-chain.js';
 import {useEffectChainState} from '../effects/use-effect-chain-state.js';
 import {
@@ -203,6 +203,7 @@ type CanvasImageContentProps = Pick<
 	| 'width'
 > & {
 	readonly effects: EffectsProp;
+	readonly effectsOutputSize: EffectsOutputSize | null;
 	readonly controls: SequenceControls | undefined;
 } & CanvasImageCanvasProps;
 
@@ -218,6 +219,7 @@ const CanvasImageContent = forwardRef<
 			height,
 			fit = 'fill',
 			effects,
+			effectsOutputSize,
 			controls,
 			onError,
 			className,
@@ -238,7 +240,7 @@ const CanvasImageContent = forwardRef<
 		);
 		const [loadedImage, setLoadedImage] = useState<LoadedImage | null>(null);
 		const actualSrc = usePreload(src);
-		const chainState = useEffectChainState();
+		const chainState = useEffectChainState(effectsOutputSize);
 		const memoizedEffects = useMemoizedEffects({
 			effects,
 			overrideId: controls?.overrideId ?? null,
@@ -529,6 +531,7 @@ const CanvasImageInner = forwardRef<
 			height,
 			fit,
 			effects = [],
+			effectsOutputSize,
 			className,
 			style,
 			id,
@@ -645,6 +648,7 @@ const CanvasImageInner = forwardRef<
 							height={height}
 							fit={fit}
 							effects={effects}
+							effectsOutputSize={effectsOutputSize ?? null}
 							controls={controls}
 							className={className}
 							style={croppedStyle ?? undefined}

packages/core/src/canvas-image/props.ts

@@ -1,6 +1,6 @@
 import type React from 'react';
 import type {ImageFit} from '../calculate-image-fit.js';
-import type {EffectsProp} from '../effects/effect-types.js';
+import type {EffectsProp, EffectsOutputSize} from '../effects/effect-types.js';
 import type {
 	InteractiveBaseProps,
 	InteractiveCropProps,
@@ -24,6 +24,7 @@ export type CanvasImageProps = CanvasImageSequenceProps &
 		readonly height?: number;
 		readonly fit?: ImageFit;
 		readonly effects?: EffectsProp;
+		readonly effectsOutputSize?: EffectsOutputSize;
 		readonly className?: string;
 		readonly style?: React.CSSProperties;
 		readonly id?: string;

packages/core/src/effects/Solid.tsx

@@ -33,7 +33,7 @@ import {useDelayRender} from '../use-delay-render.js';
 import {usePremounting} from '../use-premounting.js';
 import type {VideoConfigValues} from '../video-config.js';
 import {withInteractivitySchema} from '../with-interactivity-schema.js';
-import type {EffectsProp} from './effect-types.js';
+import type {EffectsProp, EffectsOutputSize} from './effect-types.js';
 import {runEffectChain} from './run-effect-chain.js';
 import {useEffectChainState} from './use-effect-chain-state.js';
 import {
@@ -49,6 +49,7 @@ type MandatoryProps = {
 type OptionalProps = {
 	readonly color: string | undefined;
 	readonly effects: EffectsProp;
+	readonly effectsOutputSize: EffectsOutputSize | null;
 	readonly className: string | undefined;
 	readonly style: React.CSSProperties | undefined;
 	readonly pixelDensity: number | undefined;
@@ -131,6 +132,7 @@ const SolidInner: React.FC<
 	width,
 	height,
 	effects = [],
+	effectsOutputSize = null,
 	className,
 	style,
 	pixelDensity,
@@ -165,7 +167,7 @@ const SolidInner: React.FC<
 		return canvas;
 	}, []);
 
-	const chainState = useEffectChainState();
+	const chainState = useEffectChainState(effectsOutputSize);
 
 	const canvasRef = useCallback(
 		(canvas: HTMLCanvasElement | null) => {
@@ -271,6 +273,7 @@ const SolidOuter = forwardRef<
 	(
 		{
 			effects = [],
+			effectsOutputSize = null,
 			controls,
 			color,
 			height,
@@ -375,6 +378,7 @@ const SolidOuter = forwardRef<
 							className={className}
 							style={croppedStyle ?? undefined}
 							effects={effects}
+							effectsOutputSize={effectsOutputSize}
 							pixelDensity={pixelDensity}
 						/>
 					</SequenceContent>

packages/core/src/effects/effect-types.ts

@@ -84,3 +84,8 @@ export type EffectsProp = ReadonlyArray<EffectDescriptor<unknown>>;
 export type EffectFactory<P> = {} extends P
 	? (params?: P & {readonly disabled?: boolean}) => EffectDescriptor<unknown>
 	: (params: P & {readonly disabled?: boolean}) => EffectDescriptor<unknown>;
+
+export type EffectsOutputSize = {
+	readonly width: number;
+	readonly height: number;
+};

packages/core/src/effects/index.ts

@@ -7,6 +7,7 @@ export type {
 	EffectDefinitionAndStack,
 	EffectDescriptor,
 	EffectsProp,
+	EffectsOutputSize,
 	EffectDefinition,
 	EffectFactory,
 } from './effect-types.js';