remotion 4.0.506 → 4.0.507

package/README.md

@@ -48,6 +48,7 @@ Remotion is extensively documented over more than 1000 pages.
   - [Prompts](https://www.remotion.dev/prompts)
   - [Templates](https://remotion.dev/templates)
 - Components
+  - [Elements](https://remotion.dev/elements)
   - [Effects](https://remotion.dev/effects)
   - [Shapes](https://remotion.dev/docs/shapes)
   - [Transitions](https://remotion.dev/transitions)

package/dist/cjs/Interactive.d.ts

@@ -296,6 +296,11 @@ export declare const Interactive: {
         };
     };
     svgPaintSchema: {
+        readonly color: {
+            readonly type: "color";
+            readonly default: undefined;
+            readonly description: "Current color";
+        };
         readonly stroke: {
             readonly type: "color";
             readonly default: "none";
@@ -316,6 +321,11 @@ export declare const Interactive: {
         };
     };
     svgStrokeSchema: {
+        readonly color: {
+            readonly type: "color";
+            readonly default: undefined;
+            readonly description: "Current color";
+        };
         readonly stroke: {
             readonly type: "color";
             readonly default: "none";

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

@@ -1,6 +1,7 @@
 import React, { type AudioHTMLAttributes } from 'react';
 import type { SharedElementSourceNode } from './shared-element-source-node.js';
 import type { RemotionAudioContextState } from './use-audio-context.js';
+import { type AudioContextResumeResult } from './wait-until-actually-resumed.js';
 /**
  * This functionality of Remotion will keep a certain amount
  * of <audio> tags pre-mounted and by default filled with an empty audio track.
@@ -58,7 +59,7 @@ type SharedAudioContextValue = {
     scheduleAudioNode: (options: ScheduleAudioNodeOptions) => ScheduleAudioNodeResult;
     resume: () => Promise<void>;
     suspend: () => Promise<void>;
-    getIsResumingAudioContext: () => Promise<void> | null;
+    getIsResumingAudioContext: () => Promise<AudioContextResumeResult> | null;
     unscheduleAudioNode: (node: AudioBufferSourceNode) => void;
 };
 type SharedAudioTagsContextValue = {

package/dist/cjs/audio/shared-audio-tags.js

@@ -105,6 +105,7 @@ const SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled,
     });
     const audioContextIsPlayingEventually = (0, react_1.useRef)(false);
     const isResuming = (0, react_1.useRef)(null);
+    const nextResumeAttemptId = (0, react_1.useRef)(0);
     const audioSyncAnchor = (0, react_1.useMemo)(() => ({ value: 0 }), []);
     const audioSyncAnchorListeners = (0, react_1.useRef)([]);
     const audioSyncAnchorEmitter = (0, react_1.useMemo)(() => {
@@ -203,24 +204,39 @@ const SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled,
         });
         nodesToResume.current.clear();
         const resumePromise = ctxAndGain.resume();
-        isResuming.current = new Promise((resolve) => {
-            (0, wait_until_actually_resumed_js_1.waitUntilActuallyResumed)(ctxAndGain.audioContext, logLevel).then(resolve);
+        const abortController = new AbortController();
+        const resumeAttemptId = nextResumeAttemptId.current++;
+        const waitPromise = new Promise((resolve) => {
+            (0, wait_until_actually_resumed_js_1.waitUntilActuallyResumed)(ctxAndGain.audioContext, logLevel, abortController.signal).then(resolve);
             resumePromise.catch((err) => {
-                log_js_1.Log.warn({ logLevel, tag: 'audio' }, 'AudioContext resume rejected, continuing without audio sync', err);
-                resolve();
+                log_js_1.Log.warn({ logLevel, tag: 'audio' }, 'AudioContext resume rejected, muting playback and continuing without audio', err);
+                abortController.abort();
+                resolve('failed');
             });
         }).finally(() => {
-            isResuming.current = null;
+            var _a;
+            if (((_a = isResuming.current) === null || _a === void 0 ? void 0 : _a.id) === resumeAttemptId) {
+                isResuming.current = null;
+            }
         });
+        isResuming.current = {
+            abortController,
+            id: resumeAttemptId,
+            promise: waitPromise,
+        };
         return resumePromise.catch(() => {
             // Already logged above; swallow to avoid unhandled rejection
             // since callers (e.g. use-playback.ts) do not await this.
         });
     }, [ctxAndGain, logLevel]);
     const getIsResumingAudioContext = (0, react_1.useCallback)(() => {
-        return isResuming.current;
+        var _a;
+        var _b;
+        return (_b = (_a = isResuming.current) === null || _a === void 0 ? void 0 : _a.promise) !== null && _b !== void 0 ? _b : null;
     }, []);
     const suspend = (0, react_1.useCallback)(() => {
+        var _a;
+        (_a = isResuming.current) === null || _a === void 0 ? void 0 : _a.abortController.abort();
         if (!ctxAndGain) {
             return Promise.resolve();
         }

package/dist/cjs/audio/wait-until-actually-resumed.d.ts

@@ -1 +1,2 @@
-export declare const waitUntilActuallyResumed: (audioContext: AudioContext, logLevel: "error" | "info" | "trace" | "verbose" | "warn") => Promise<void>;
+export type AudioContextResumeResult = 'resumed' | 'cancelled' | 'failed';
+export declare const waitUntilActuallyResumed: (audioContext: AudioContext, logLevel: "error" | "info" | "trace" | "verbose" | "warn", signal: AbortSignal) => Promise<AudioContextResumeResult>;

package/dist/cjs/audio/wait-until-actually-resumed.js

@@ -2,15 +2,36 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.waitUntilActuallyResumed = void 0;
 const log_js_1 = require("../log.js");
-const waitUntilActuallyResumed = (audioContext, logLevel) => {
+const RESUME_WAIT_TIMEOUT = 1000;
+const waitUntilActuallyResumed = (audioContext, logLevel, signal) => {
     return new Promise((resolve) => {
         const startCurrentTime = audioContext.currentTime;
         const start = audioContext.getOutputTimestamp();
         const startOutputPerformanceTime = start.performanceTime;
         const startWallClock = performance.now();
+        let animationFrame = null;
+        let timeout = null;
+        let settled = false;
+        let onAbort = () => undefined;
+        const finish = (result) => {
+            if (settled) {
+                return;
+            }
+            settled = true;
+            if (animationFrame !== null) {
+                cancelAnimationFrame(animationFrame);
+            }
+            if (timeout !== null) {
+                clearTimeout(timeout);
+            }
+            signal.removeEventListener('abort', onAbort);
+            resolve(result);
+        };
+        onAbort = () => finish('cancelled');
         const check = () => {
             var _a;
             var _b;
+            animationFrame = null;
             const { currentTime } = audioContext;
             const outputTimestamp = audioContext.getOutputTimestamp();
             const elapsedWallClock = performance.now() - startWallClock;
@@ -20,12 +41,21 @@ const waitUntilActuallyResumed = (audioContext, logLevel) => {
                 outputTimestamp.contextTime !== undefined &&
                 outputTimestamp.contextTime > startCurrentTime) {
                 log_js_1.Log.verbose({ logLevel, tag: 'audio' }, `waitUntilActuallyResumed: getOutputTimestamp.performanceTime advanced from ${startOutputPerformanceTime.toFixed(6)} to ${outputTimestamp.performanceTime.toFixed(6)} after ${elapsedWallClock.toFixed(1)}ms. currentTime=${currentTime.toFixed(6)} (advanced by ${(currentTime - startCurrentTime).toFixed(6)}), getOutputTimestamp.performanceTime=${(_b = (_a = outputTimestamp.performanceTime) === null || _a === void 0 ? void 0 : _a.toFixed(1)) !== null && _b !== void 0 ? _b : 'undefined'}`);
-                resolve();
+                finish('resumed');
                 return;
             }
-            requestAnimationFrame(check);
+            animationFrame = requestAnimationFrame(check);
         };
-        requestAnimationFrame(check);
+        if (signal.aborted) {
+            finish('cancelled');
+            return;
+        }
+        signal.addEventListener('abort', onAbort, { once: true });
+        timeout = setTimeout(() => {
+            log_js_1.Log.warn({ logLevel, tag: 'audio' }, 'WARNING: You enabled autoPlay on an unmuted <Player /> and the browser did not allow the video to be started. Remotion muted the <Player /> so it can play. To properly handle this, either set the `muted` prop or remove the `autoPlay` prop');
+            finish('failed');
+        }, RESUME_WAIT_TIMEOUT);
+        animationFrame = requestAnimationFrame(check);
     });
 };
 exports.waitUntilActuallyResumed = waitUntilActuallyResumed;

package/dist/cjs/buffering.js

@@ -41,8 +41,14 @@ const playback_logging_1 = require("./playback-logging");
 const use_remotion_environment_1 = require("./use-remotion-environment");
 const useBufferManager = (logLevel, mountTime) => {
     const [blocks, setBlocks] = (0, react_1.useState)([]);
-    const [onBufferingCallbacks, setOnBufferingCallbacks] = (0, react_1.useState)([]);
-    const [onResumeCallbacks, setOnResumeCallbacks] = (0, react_1.useState)([]);
+    // Listener registries are refs, not state: `usePlayback` parks its loop
+    // during buffering and registers its resume listener from a rAF callback.
+    // With state, that registration only lands after the next React commit -
+    // if the last block unblocks before then, the resume dispatch reads the
+    // previous array, the listener is never called, and the playback loop
+    // stays parked forever (frame clock frozen while isPlaying() is true).
+    const onBufferingCallbacks = (0, react_1.useRef)([]);
+    const onResumeCallbacks = (0, react_1.useRef)([]);
     const env = (0, use_remotion_environment_1.useRemotionEnvironment)();
     const rendering = env.isRendering;
     const buffering = (0, react_1.useRef)(false);
@@ -71,18 +77,21 @@ const useBufferManager = (logLevel, mountTime) => {
         };
     }, [rendering]);
     const listenForBuffering = (0, react_1.useCallback)((callback) => {
-        setOnBufferingCallbacks((c) => [...c, callback]);
+        onBufferingCallbacks.current = [
+            ...onBufferingCallbacks.current,
+            callback,
+        ];
         return {
             remove: () => {
-                setOnBufferingCallbacks((c) => c.filter((cb) => cb !== callback));
+                onBufferingCallbacks.current = onBufferingCallbacks.current.filter((cb) => cb !== callback);
             },
         };
     }, []);
     const listenForResume = (0, react_1.useCallback)((callback) => {
-        setOnResumeCallbacks((c) => [...c, callback]);
+        onResumeCallbacks.current = [...onResumeCallbacks.current, callback];
         return {
             remove: () => {
-                setOnResumeCallbacks((c) => c.filter((cb) => cb !== callback));
+                onResumeCallbacks.current = onResumeCallbacks.current.filter((cb) => cb !== callback);
             },
         };
     }, []);
@@ -95,7 +104,7 @@ const useBufferManager = (logLevel, mountTime) => {
         // not re-dispatch `waiting` to listeners.
         if (blocks.length > 0 && !buffering.current) {
             buffering.current = true;
-            onBufferingCallbacks.forEach((c) => c());
+            [...onBufferingCallbacks.current].forEach((c) => c());
             (0, playback_logging_1.playbackLogging)({
                 logLevel,
                 message: 'Player is entering buffer state',
@@ -119,7 +128,7 @@ const useBufferManager = (logLevel, mountTime) => {
             // dispatch `resume` to listeners.
             if (blocks.length === 0 && buffering.current) {
                 buffering.current = false;
-                onResumeCallbacks.forEach((c) => c());
+                [...onResumeCallbacks.current].forEach((c) => c());
                 (0, playback_logging_1.playbackLogging)({
                     logLevel,
                     message: 'Player is exiting buffer state',

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

@@ -386,6 +386,11 @@ export declare const backgroundSchema: {
     };
 };
 export declare const svgStrokeSchema: {
+    readonly color: {
+        readonly type: "color";
+        readonly default: undefined;
+        readonly description: "Current color";
+    };
     readonly stroke: {
         readonly type: "color";
         readonly default: "none";
@@ -401,6 +406,11 @@ export declare const svgStrokeSchema: {
     };
 };
 export declare const svgPaintSchema: {
+    readonly color: {
+        readonly type: "color";
+        readonly default: undefined;
+        readonly description: "Current color";
+    };
     readonly stroke: {
         readonly type: "color";
         readonly default: "none";

package/dist/cjs/interactivity-schema.js

@@ -208,7 +208,15 @@ exports.backgroundSchema = {
         description: 'Color',
     },
 };
+const svgColorSchema = {
+    color: {
+        type: 'color',
+        default: undefined,
+        description: 'Current color',
+    },
+};
 exports.svgStrokeSchema = {
+    ...svgColorSchema,
     stroke: {
         type: 'color',
         // `none` is the SVG initial value of stroke.

package/dist/cjs/internals.d.ts

@@ -26,6 +26,8 @@ import { useRemotionContexts } from './wrap-remotion-context.js';
 export type { EffectChainState } from './effects/run-effect-chain.js';
 export declare const Internals: {
     readonly MaxMediaCacheSizeContext: import("react").Context<number | null>;
+    readonly makeRenderResourceManager: () => import("./render-resource-manager.js").RenderResourceManager;
+    readonly RenderResourceManagerContext: import("react").Context<import("./render-resource-manager.js").RenderResourceManager | null>;
     readonly useUnsafeVideoConfig: () => import("./video-config.js").VideoConfig | null;
     readonly useFrameForVolumeProp: (behavior: import("./index.js").LoopVolumeCurveBehavior) => number;
     readonly useTimelinePosition: () => number;
@@ -812,7 +814,7 @@ export declare const Internals: {
         scheduleAudioNode: (options: ScheduleAudioNodeOptions) => ScheduleAudioNodeResult;
         resume: () => Promise<void>;
         suspend: () => Promise<void>;
-        getIsResumingAudioContext: () => Promise<void> | null;
+        getIsResumingAudioContext: () => Promise<import("./audio/wait-until-actually-resumed.js").AudioContextResumeResult> | null;
         unscheduleAudioNode: (node: AudioBufferSourceNode) => void;
     } | null>;
     readonly SharedAudioContextProvider: import("react").FC<{
@@ -873,6 +875,7 @@ export declare const Internals: {
         getCompositions: () => import("./CompositionManager.js").AnyComposition[];
     } | null>;
     readonly portalNode: () => HTMLElement;
+    readonly setPortalNodeCurrentScale: (scale: number) => void;
     readonly waitForRoot: (fn: (comp: import("react").FC<{}>) => void) => () => void;
     readonly SetTimelineContext: import("react").Context<SetTimelineContextValue>;
     readonly CanUseRemotionHooksProvider: import("react").FC<{

package/dist/cjs/internals.js

@@ -78,6 +78,7 @@ const PremountContext_js_1 = require("./PremountContext.js");
 const register_root_js_1 = require("./register-root.js");
 const remotion_environment_context_js_1 = require("./remotion-environment-context.js");
 const RemotionRoot_js_1 = require("./RemotionRoot.js");
+const render_resource_manager_js_1 = require("./render-resource-manager.js");
 const RenderAssetManager_js_1 = require("./RenderAssetManager.js");
 const resolve_video_config_js_1 = require("./resolve-video-config.js");
 const ResolveCompositionConfig_js_1 = require("./ResolveCompositionConfig.js");
@@ -123,6 +124,8 @@ const compositionSelectorRef = (0, react_1.createRef)();
 // API and are less likely to use it
 exports.Internals = {
     MaxMediaCacheSizeContext: max_video_cache_size_js_1.MaxMediaCacheSizeContext,
+    makeRenderResourceManager: render_resource_manager_js_1.makeRenderResourceManager,
+    RenderResourceManagerContext: render_resource_manager_js_1.RenderResourceManagerContext,
     useUnsafeVideoConfig: use_unsafe_video_config_js_1.useUnsafeVideoConfig,
     useFrameForVolumeProp: use_audio_frame_js_1.useFrameForVolumeProp,
     useTimelinePosition: TimelinePosition.useTimelinePosition,
@@ -188,6 +191,7 @@ exports.Internals = {
     getPreviewDomElement: get_preview_dom_element_js_1.getPreviewDomElement,
     compositionsRef: CompositionManager_js_1.compositionsRef,
     portalNode: portal_node_js_1.portalNode,
+    setPortalNodeCurrentScale: portal_node_js_1.setPortalNodeCurrentScale,
     waitForRoot: register_root_js_1.waitForRoot,
     SetTimelineContext: TimelineContext_js_1.SetTimelineContext,
     CanUseRemotionHooksProvider: CanUseRemotionHooks_js_1.CanUseRemotionHooksProvider,

package/dist/cjs/interpolate-keyframed-status.js

@@ -10,6 +10,8 @@ const easingToFn = ({ easing, forceSpringAllowTail, }) => {
     switch (easing.type) {
         case 'linear':
             return easing_js_1.Easing.linear;
+        case 'step1':
+            return easing_js_1.Easing.step1;
         case 'spring':
             return easing_js_1.Easing.spring({
                 allowTail: (_a = forceSpringAllowTail !== null && forceSpringAllowTail !== void 0 ? forceSpringAllowTail : easing.allowTail) !== null && _a !== void 0 ? _a : undefined,

package/dist/cjs/portal-node.d.ts

@@ -1 +1,4 @@
+export declare const getPortalNodeCurrentScale: () => number;
+export declare const subscribeToPortalNodeCurrentScale: (listener: () => void) => () => void;
+export declare const setPortalNodeCurrentScale: (scale: number) => void;
 export declare const portalNode: () => HTMLElement;

package/dist/cjs/portal-node.js

@@ -1,7 +1,28 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.portalNode = void 0;
+exports.portalNode = exports.setPortalNodeCurrentScale = exports.subscribeToPortalNodeCurrentScale = exports.getPortalNodeCurrentScale = void 0;
 let _portalNode = null;
+let portalNodeCurrentScale = 1;
+let portalNodeCurrentScaleListeners = [];
+const getPortalNodeCurrentScale = () => portalNodeCurrentScale;
+exports.getPortalNodeCurrentScale = getPortalNodeCurrentScale;
+const subscribeToPortalNodeCurrentScale = (listener) => {
+    portalNodeCurrentScaleListeners.push(listener);
+    return () => {
+        portalNodeCurrentScaleListeners = portalNodeCurrentScaleListeners.filter((currentListener) => currentListener !== listener);
+    };
+};
+exports.subscribeToPortalNodeCurrentScale = subscribeToPortalNodeCurrentScale;
+const setPortalNodeCurrentScale = (scale) => {
+    if (portalNodeCurrentScale === scale) {
+        return;
+    }
+    portalNodeCurrentScale = scale;
+    for (const listener of portalNodeCurrentScaleListeners) {
+        listener();
+    }
+};
+exports.setPortalNodeCurrentScale = setPortalNodeCurrentScale;
 const portalNode = () => {
     if (!_portalNode) {
         if (typeof document === 'undefined') {

package/dist/cjs/render-resource-manager.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export type RenderResourceManager = {
+    getOrCreateResource: <T>({ key, create }: {
+        key: string;
+        create: () => {
+            resource: T;
+            dispose: () => void;
+        };
+    }) => T;
+    dispose: () => void;
+};
+export declare const makeRenderResourceManager: () => RenderResourceManager;
+export declare const RenderResourceManagerContext: React.Context<RenderResourceManager | null>;

package/dist/cjs/render-resource-manager.js

@@ -0,0 +1,47 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderResourceManagerContext = exports.makeRenderResourceManager = void 0;
+const react_1 = __importDefault(require("react"));
+const makeRenderResourceManager = () => {
+    const resources = new Map();
+    let disposed = false;
+    return {
+        getOrCreateResource: ({ key, create, }) => {
+            if (disposed) {
+                throw new Error('Render resource manager has already been disposed');
+            }
+            const existing = resources.get(key);
+            if (existing) {
+                return existing.resource;
+            }
+            const created = create();
+            resources.set(key, created);
+            return created.resource;
+        },
+        dispose: () => {
+            if (disposed) {
+                return;
+            }
+            disposed = true;
+            const resourcesToDispose = Array.from(resources.values());
+            resources.clear();
+            let firstError = null;
+            for (const resource of resourcesToDispose) {
+                try {
+                    resource.dispose();
+                }
+                catch (error) {
+                    firstError !== null && firstError !== void 0 ? firstError : (firstError = error);
+                }
+            }
+            if (firstError !== null) {
+                throw firstError;
+            }
+        },
+    };
+};
+exports.makeRenderResourceManager = makeRenderResourceManager;
+exports.RenderResourceManagerContext = react_1.default.createContext(null);

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

@@ -35,6 +35,7 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCurrentScale = exports.calculateScale = exports.PreviewSizeContext = exports.CurrentScaleContext = void 0;
 const react_1 = __importStar(require("react"));
+const portal_node_1 = require("./portal-node");
 const use_remotion_environment_1 = require("./use-remotion-environment");
 const use_unsafe_video_config_1 = require("./use-unsafe-video-config");
 exports.CurrentScaleContext = react_1.default.createContext(null);
@@ -65,6 +66,12 @@ const useCurrentScale = (options) => {
     const zoomContext = react_1.default.useContext(exports.PreviewSizeContext);
     const config = (0, use_unsafe_video_config_1.useUnsafeVideoConfig)();
     const env = (0, use_remotion_environment_1.useRemotionEnvironment)();
+    const [portalScale, setPortalScale] = react_1.default.useState(portal_node_1.getPortalNodeCurrentScale);
+    react_1.default.useEffect(() => {
+        const update = () => setPortalScale((0, portal_node_1.getPortalNodeCurrentScale)());
+        update();
+        return (0, portal_node_1.subscribeToPortalNodeCurrentScale)(update);
+    }, []);
     if (hasContext === null || config === null || zoomContext === null) {
         if (options === null || options === void 0 ? void 0 : options.dontThrowIfOutsideOfRemotion) {
             return 1;
@@ -82,11 +89,8 @@ const useCurrentScale = (options) => {
     if (hasContext.type === 'scale') {
         return hasContext.scale;
     }
-    return (0, exports.calculateScale)({
-        canvasSize: hasContext.canvasSizeForAuto,
-        compositionHeight: config.height,
-        compositionWidth: config.width,
-        previewSize: zoomContext.size.size,
-    });
+    // Studio initially renders the composition into an unscaled offscreen portal.
+    // Return the scale that the preview has actually committed to that portal.
+    return portalScale;
 };
 exports.useCurrentScale = useCurrentScale;

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

@@ -35,6 +35,9 @@ export type VideoConfigNumericExpression = {
 export type CanUpdateSequencePropStatusLinearEasing = {
     type: 'linear';
 };
+export type CanUpdateSequencePropStatusStep1Easing = {
+    type: 'step1';
+};
 export type CanUpdateSequencePropStatusBezierEasing = {
     type: 'bezier';
     x1: number;
@@ -51,7 +54,7 @@ export type CanUpdateSequencePropStatusSpringEasing = {
     overshootClamping: boolean;
     durationRestThreshold: number | null;
 };
-export type CanUpdateSequencePropStatusEasing = CanUpdateSequencePropStatusLinearEasing | CanUpdateSequencePropStatusBezierEasing | CanUpdateSequencePropStatusSpringEasing;
+export type CanUpdateSequencePropStatusEasing = CanUpdateSequencePropStatusLinearEasing | CanUpdateSequencePropStatusStep1Easing | CanUpdateSequencePropStatusBezierEasing | CanUpdateSequencePropStatusSpringEasing;
 export declare const DEFAULT_LINEAR_EASING: CanUpdateSequencePropStatusLinearEasing;
 export type CanUpdateSequencePropStatusClamping = {
     left: ExtrapolateType;

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

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.506';
+exports.VERSION = '4.0.507';

package/dist/cjs/with-interactivity-schema.js

@@ -35,6 +35,7 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.withInteractivitySchema = exports.mergeValues = exports.selectActiveKeys = exports.readValuesFromProps = exports.getRuntimeValueForSchemaKey = exports.getNestedValue = void 0;
 const react_1 = __importStar(require("react"));
+const CanUseRemotionHooks_js_1 = require("./CanUseRemotionHooks.js");
 const delete_nested_key_js_1 = require("./delete-nested-key.js");
 const use_memoized_effects_js_1 = require("./effects/use-memoized-effects.js");
 const enable_sequence_stack_traces_js_1 = require("./enable-sequence-stack-traces.js");
@@ -130,7 +131,8 @@ const withInteractivitySchema = ({ Component, componentName, componentIdentity,
         const { _remotionInternalStack: internalStack, ...propsWithoutInternalStack } = props;
         const cleanProps = propsWithoutInternalStack;
         const env = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
-        if (!env.isStudio || env.isRendering) {
+        const canUseRemotionHooks = (0, react_1.useContext)(CanUseRemotionHooks_js_1.CanUseRemotionHooks);
+        if (!env.isStudio || env.isRendering || !canUseRemotionHooks) {
             return react_1.default.createElement(Component, {
                 ...cleanProps,
                 controls: null,