remotion 4.0.442 → 4.0.443

package/dist/cjs/Composition.js

@@ -28,7 +28,7 @@ const Fallback = () => {
     return null;
 };
 const InnerComposition = ({ width, height, fps, durationInFrames, id, defaultProps, schema, ...compProps }) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     const compManager = (0, react_1.useContext)(CompositionManagerContext_js_1.CompositionSetters);
     const { registerComposition, unregisterComposition } = compManager;
     const video = (0, use_video_js_1.useVideo)();
@@ -52,6 +52,7 @@ const InnerComposition = ({ width, height, fps, durationInFrames, id, defaultPro
         throw new Error('<Composition> mounted inside another composition. See https://remotion.dev/docs/wrong-composition-mount for help.');
     }
     const { folderName, parentName } = (0, react_1.useContext)(Folder_js_1.FolderContext);
+    const stack = (_b = compProps.stack) !== null && _b !== void 0 ? _b : null;
     (0, react_1.useEffect)(() => {
         var _a;
         // Ensure it's a URL safe id
@@ -73,6 +74,7 @@ const InnerComposition = ({ width, height, fps, durationInFrames, id, defaultPro
             parentFolderName: parentName,
             schema: schema !== null && schema !== void 0 ? schema : null,
             calculateMetadata: (_a = compProps.calculateMetadata) !== null && _a !== void 0 ? _a : null,
+            stack,
         });
         return () => {
             unregisterComposition(id);
@@ -90,6 +92,7 @@ const InnerComposition = ({ width, height, fps, durationInFrames, id, defaultPro
         parentName,
         schema,
         compProps.calculateMetadata,
+        stack,
         registerComposition,
         unregisterComposition,
     ]);
@@ -104,7 +107,7 @@ const InnerComposition = ({ width, height, fps, durationInFrames, id, defaultPro
                 resolved.type !== 'success-and-refreshing')) {
             return null;
         }
-        return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(CanUseRemotionHooks_js_1.CanUseRemotionHooksProvider, { children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(loading_indicator_js_1.Loading, {}), children: (0, jsx_runtime_1.jsx)(Comp, { ...((_b = resolved.result.props) !== null && _b !== void 0 ? _b : {}) }) }) }), (0, portal_node_js_1.portalNode)());
+        return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(CanUseRemotionHooks_js_1.CanUseRemotionHooksProvider, { children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(loading_indicator_js_1.Loading, {}), children: (0, jsx_runtime_1.jsx)(Comp, { ...((_c = resolved.result.props) !== null && _c !== void 0 ? _c : {}) }) }) }), (0, portal_node_js_1.portalNode)());
     }
     if (environment.isRendering &&
         video &&
@@ -116,7 +119,7 @@ const InnerComposition = ({ width, height, fps, durationInFrames, id, defaultPro
                 resolved.type !== 'success-and-refreshing')) {
             return null;
         }
-        return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(CanUseRemotionHooks_js_1.CanUseRemotionHooksProvider, { children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(Fallback, {}), children: (0, jsx_runtime_1.jsx)(Comp, { ...((_c = resolved.result.props) !== null && _c !== void 0 ? _c : {}) }) }) }), (0, portal_node_js_1.portalNode)());
+        return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(CanUseRemotionHooks_js_1.CanUseRemotionHooksProvider, { children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(Fallback, {}), children: (0, jsx_runtime_1.jsx)(Comp, { ...((_d = resolved.result.props) !== null && _d !== void 0 ? _d : {}) }) }) }), (0, portal_node_js_1.portalNode)());
     }
     return null;
 };

package/dist/cjs/CompositionManager.d.ts

@@ -18,6 +18,7 @@ export type TComposition<Schema extends AnyZodObject, Props extends Record<strin
     nonce: NonceHistory;
     schema: Schema | null;
     calculateMetadata: CalculateMetadataFunction<InferProps<Schema, Props>> | null;
+    stack: string | null;
 } & PropsIfHasProps<Schema, Props>;
 export type AnyComposition = TComposition<AnyZodObject, Record<string, unknown>>;
 export type TCompMetadataWithCalcFunction<Schema extends AnyZodObject, Props extends Record<string, unknown>> = Pick<TComposition<Schema, Props>, 'id' | 'height' | 'width' | 'fps' | 'durationInFrames' | 'defaultProps' | 'calculateMetadata'>;

package/dist/cjs/Img.d.ts

@@ -14,5 +14,18 @@ export type ImgProps = NativeImgProps & {
      */
     readonly stack?: string;
 };
-export declare const Img: React.ForwardRefExoticComponent<Omit<ImgProps, "ref"> & React.RefAttributes<HTMLImageElement>>;
+export declare const Img: React.ComponentType<NativeImgProps & {
+    readonly maxRetries?: number;
+    readonly pauseWhenLoading?: boolean;
+    readonly delayRenderRetries?: number;
+    readonly delayRenderTimeoutInMilliseconds?: number;
+    readonly onImageFrame?: (imageElement: HTMLImageElement) => void;
+    readonly src: string;
+    readonly showInTimeline?: boolean;
+    readonly name?: string;
+    /**
+     * @deprecated For internal use only
+     */
+    readonly stack?: string;
+}>;
 export {};

package/dist/cjs/Img.js

@@ -11,10 +11,41 @@ const use_buffer_state_js_1 = require("./use-buffer-state.js");
 const use_delay_render_js_1 = require("./use-delay-render.js");
 const use_media_in_timeline_js_1 = require("./use-media-in-timeline.js");
 const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
+const wrap_in_schema_js_1 = require("./wrap-in-schema.js");
 function exponentialBackoff(errorCount) {
     return 1000 * 2 ** (errorCount - 1);
 }
-const ImgRefForwarding = ({ onError, maxRetries = 2, src, pauseWhenLoading, delayRenderRetries, delayRenderTimeoutInMilliseconds, onImageFrame, crossOrigin, showInTimeline, name, stack, ...props }, ref) => {
+const imgSchema = {
+    'style.translate': {
+        type: 'translate',
+        step: 1,
+        default: '0px 0px',
+        description: 'Position',
+    },
+    'style.scale': {
+        type: 'number',
+        min: 0.05,
+        max: 100,
+        step: 0.01,
+        default: 1,
+        description: 'Scale',
+    },
+    'style.rotate': {
+        type: 'rotation',
+        step: 1,
+        default: '0deg',
+        description: 'Rotation',
+    },
+    'style.opacity': {
+        type: 'number',
+        min: 0,
+        max: 1,
+        step: 0.01,
+        default: 1,
+        description: 'Opacity',
+    },
+};
+const ImgInner = ({ onError, maxRetries = 2, src, pauseWhenLoading, delayRenderRetries, delayRenderTimeoutInMilliseconds, onImageFrame, crossOrigin, showInTimeline, name, stack, ref, controls, ...props }) => {
     var _a, _b;
     const imageRef = (0, react_1.useRef)(null);
     const errors = (0, react_1.useRef)({});
@@ -40,6 +71,7 @@ const ImgRefForwarding = ({ onError, maxRetries = 2, src, pauseWhenLoading, dela
         premountDisplay: (_a = sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.premountDisplay) !== null && _a !== void 0 ? _a : null,
         postmountDisplay: (_b = sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.postmountDisplay) !== null && _b !== void 0 ? _b : null,
         loopDisplay: undefined,
+        controls: controls !== null && controls !== void 0 ? controls : null,
     });
     const actualSrc = (0, prefetch_js_1.usePreload)(src);
     const retryIn = (0, react_1.useCallback)((timeout) => {
@@ -188,5 +220,5 @@ const ImgRefForwarding = ({ onError, maxRetries = 2, src, pauseWhenLoading, dela
  * @description Works just like a regular HTML img tag. When you use the <Img> tag, Remotion will ensure that the image is loaded before rendering the frame.
  * @see [Documentation](https://remotion.dev/docs/img)
  */
-exports.Img = (0, react_1.forwardRef)(ImgRefForwarding);
+exports.Img = (0, wrap_in_schema_js_1.wrapInSchema)(ImgInner, imgSchema);
 (0, enable_sequence_stack_traces_js_1.addSequenceStackTraces)(exports.Img);

package/dist/cjs/index.js

@@ -18,6 +18,7 @@ exports.Config = exports.Experimental = exports.watchStaticFile = exports.Video
 require("./_check-rsc.js");
 require("./asset-types.js");
 const Clipper_js_1 = require("./Clipper.js");
+const Composition_js_1 = require("./Composition.js");
 const enable_sequence_stack_traces_js_1 = require("./enable-sequence-stack-traces.js");
 const is_player_js_1 = require("./is-player.js");
 const multiple_versions_warning_js_1 = require("./multiple-versions-warning.js");
@@ -33,8 +34,8 @@ Object.defineProperty(exports, "Audio", { enumerable: true, get: function () { r
 Object.defineProperty(exports, "Html5Audio", { enumerable: true, get: function () { return index_js_1.Html5Audio; } });
 var cancel_render_js_1 = require("./cancel-render.js");
 Object.defineProperty(exports, "cancelRender", { enumerable: true, get: function () { return cancel_render_js_1.cancelRender; } });
-var Composition_js_1 = require("./Composition.js");
-Object.defineProperty(exports, "Composition", { enumerable: true, get: function () { return Composition_js_1.Composition; } });
+var Composition_js_2 = require("./Composition.js");
+Object.defineProperty(exports, "Composition", { enumerable: true, get: function () { return Composition_js_2.Composition; } });
 var input_props_js_1 = require("./config/input-props.js");
 Object.defineProperty(exports, "getInputProps", { enumerable: true, get: function () { return input_props_js_1.getInputProps; } });
 var delay_render_js_1 = require("./delay-render.js");
@@ -130,3 +131,4 @@ exports.Config = new Proxy(proxyObj, {
 });
 Sequence_js_1.Sequence.displayName = 'Sequence';
 (0, enable_sequence_stack_traces_js_1.addSequenceStackTraces)(Sequence_js_1.Sequence);
+(0, enable_sequence_stack_traces_js_1.addSequenceStackTraces)(Composition_js_1.Composition);

package/dist/cjs/series/index.d.ts

@@ -1,18 +1,13 @@
 import type { FC, PropsWithChildren } from 'react';
 import React from 'react';
 import type { LayoutAndStyle, SequenceProps } from '../Sequence.js';
-import { ENABLE_V5_BREAKING_CHANGES } from '../v5-flag.js';
 type SeriesSequenceProps = PropsWithChildren<{
     readonly durationInFrames: number;
     readonly offset?: number;
     readonly className?: string;
 } & Pick<SequenceProps, 'layout' | 'name'> & LayoutAndStyle>;
 declare const SeriesSequence: React.ForwardRefExoticComponent<SeriesSequenceProps & React.RefAttributes<HTMLDivElement>>;
-type V4Props = {
-    children: React.ReactNode;
-};
-type V5Props = SequenceProps;
-type SeriesProps = true extends typeof ENABLE_V5_BREAKING_CHANGES ? V5Props : V4Props;
+type SeriesProps = SequenceProps;
 /**
  * @description with this component, you can easily stitch together scenes that should play sequentially after another.
  * @see [Documentation](https://www.remotion.dev/docs/series)

package/dist/cjs/series/index.js

@@ -5,7 +5,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const enable_sequence_stack_traces_js_1 = require("../enable-sequence-stack-traces.js");
 const Sequence_js_1 = require("../Sequence.js");
-const v5_flag_js_1 = require("../v5-flag.js");
 const validate_duration_in_frames_js_1 = require("../validation/validate-duration-in-frames.js");
 const flatten_children_js_1 = require("./flatten-children.js");
 const is_inside_series_js_1 = require("./is-inside-series.js");
@@ -64,11 +63,9 @@ const Series = (props) => {
             return ((0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { name: name || '<Series.Sequence>', from: currentStartFrame, durationInFrames: durationInFramesProp, ...passedProps, ref: castedChild.ref, children: child }));
         });
     }, [props.children]);
-    if (v5_flag_js_1.ENABLE_V5_BREAKING_CHANGES) {
-        return ((0, jsx_runtime_1.jsx)(is_inside_series_js_1.IsInsideSeriesContainer, { children: (0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { ...props, children: childrenValue }) }));
-    }
-    return (0, jsx_runtime_1.jsx)(is_inside_series_js_1.IsInsideSeriesContainer, { children: childrenValue });
+    return ((0, jsx_runtime_1.jsx)(is_inside_series_js_1.IsInsideSeriesContainer, { children: (0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { layout: "none", name: "<Series>", ...props, children: childrenValue }) }));
 };
 exports.Series = Series;
 Series.Sequence = SeriesSequence;
+(0, enable_sequence_stack_traces_js_1.addSequenceStackTraces)(Series);
 (0, enable_sequence_stack_traces_js_1.addSequenceStackTraces)(SeriesSequence);

package/dist/cjs/use-media-in-timeline.d.ts

@@ -1,4 +1,4 @@
-import type { LoopDisplay } from './CompositionManager.js';
+import type { LoopDisplay, SequenceControls } from './CompositionManager.js';
 import type { VolumeProp } from './volume-prop.js';
 export declare const useBasicMediaInTimeline: ({ volume, mediaVolume, mediaType, src, displayName, trimBefore, trimAfter, playbackRate, }: {
     volume: VolumeProp | undefined;
@@ -18,7 +18,7 @@ export declare const useBasicMediaInTimeline: ({ volume, mediaVolume, mediaType,
     isStudio: boolean;
     finalDisplayName: string;
 };
-export declare const useImageInTimeline: ({ src, displayName, id, stack, showInTimeline, premountDisplay, postmountDisplay, loopDisplay, }: {
+export declare const useImageInTimeline: ({ src, displayName, id, stack, showInTimeline, premountDisplay, postmountDisplay, loopDisplay, controls, }: {
     src: string | undefined;
     displayName: string | null;
     id: string;
@@ -27,6 +27,7 @@ export declare const useImageInTimeline: ({ src, displayName, id, stack, showInT
     premountDisplay: number | null;
     postmountDisplay: number | null;
     loopDisplay: LoopDisplay | undefined;
+    controls: SequenceControls | null;
 }) => void;
 export declare const useMediaInTimeline: ({ volume, mediaVolume, src, mediaType, playbackRate, displayName, id, stack, showInTimeline, premountDisplay, postmountDisplay, loopDisplay, }: {
     volume: VolumeProp | undefined;

package/dist/cjs/use-media-in-timeline.js

@@ -73,7 +73,7 @@ const useBasicMediaInTimeline = ({ volume, mediaVolume, mediaType, src, displayN
     };
 };
 exports.useBasicMediaInTimeline = useBasicMediaInTimeline;
-const useImageInTimeline = ({ src, displayName, id, stack, showInTimeline, premountDisplay, postmountDisplay, loopDisplay, }) => {
+const useImageInTimeline = ({ src, displayName, id, stack, showInTimeline, premountDisplay, postmountDisplay, loopDisplay, controls, }) => {
     const parentSequence = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
     const { registerSequence, unregisterSequence } = (0, react_1.useContext)(SequenceManager_js_1.SequenceManager);
     const { duration, nonce, rootId, isStudio, finalDisplayName } = (0, exports.useBasicMediaInTimeline)({
@@ -112,7 +112,7 @@ const useImageInTimeline = ({ src, displayName, id, stack, showInTimeline, premo
             stack,
             premountDisplay,
             postmountDisplay,
-            controls: null,
+            controls,
         });
         return () => {
             unregisterSequence(id);
@@ -133,6 +133,7 @@ const useImageInTimeline = ({ src, displayName, id, stack, showInTimeline, premo
         loopDisplay,
         rootId,
         finalDisplayName,
+        controls,
     ]);
 };
 exports.useImageInTimeline = useImageInTimeline;

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

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.442';
+exports.VERSION = '4.0.443';