remotion 4.0.451 → 4.0.453

package/dist/cjs/HtmlInCanvas.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import type { EffectsProp } from './canvas-effects/effect-types.js';
+import type { AbsoluteFillLayout, LayoutAndStyle, SequenceProps } from './Sequence.js';
+export type HtmlInCanvasComposeParams = {
+    readonly source: CanvasImageSource;
+    readonly target: HTMLCanvasElement;
+    readonly frame: number;
+    readonly width: number;
+    readonly height: number;
+    readonly pixelRatio: number;
+};
+export declare const isHtmlInCanvasSupported: () => boolean;
+export type HtmlInCanvasProps = Omit<SequenceProps, 'children' | 'durationInFrames' | keyof LayoutAndStyle> & Omit<AbsoluteFillLayout, 'layout'> & {
+    readonly durationInFrames?: number;
+    readonly width: number;
+    readonly height: number;
+    readonly effects?: EffectsProp;
+    readonly children: React.ReactNode;
+    readonly pixelRatio?: number;
+    readonly onCompose?: (params: HtmlInCanvasComposeParams) => void | Promise<void>;
+};
+export declare const HtmlInCanvas: React.ComponentType<Omit<SequenceProps, "children" | "durationInFrames" | "layout"> & Omit<AbsoluteFillLayout, "layout"> & {
+    readonly durationInFrames?: number | undefined;
+    readonly width: number;
+    readonly height: number;
+    readonly effects?: EffectsProp | undefined;
+    readonly children: React.ReactNode;
+    readonly pixelRatio?: number | undefined;
+    readonly onCompose?: ((params: HtmlInCanvasComposeParams) => void | Promise<void>) | undefined;
+}> & {
+    readonly isHtmlInCanvasSupported: () => boolean;
+};

package/dist/cjs/HtmlInCanvas.js

@@ -0,0 +1,172 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HtmlInCanvas = exports.isHtmlInCanvasSupported = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const run_effect_chain_js_1 = require("./canvas-effects/run-effect-chain.js");
+const use_effect_chain_state_js_1 = require("./canvas-effects/use-effect-chain-state.js");
+const enable_sequence_stack_traces_js_1 = require("./enable-sequence-stack-traces.js");
+const Sequence_js_1 = require("./Sequence.js");
+const use_current_frame_js_1 = require("./use-current-frame.js");
+const use_delay_render_js_1 = require("./use-delay-render.js");
+const use_video_config_js_1 = require("./use-video-config.js");
+const wrap_in_schema_js_1 = require("./wrap-in-schema.js");
+const isHtmlInCanvasSupported = () => {
+    if (typeof document === 'undefined') {
+        return false;
+    }
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    return (typeof (ctx === null || ctx === void 0 ? void 0 : ctx.drawElementImage) === 'function' &&
+        typeof canvas.requestPaint === 'function');
+};
+exports.isHtmlInCanvasSupported = isHtmlInCanvasSupported;
+const htmlInCanvasSchema = {
+    '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 HtmlInCanvasInner = ({ width, height, effects = [], children, style, pixelRatio = 1, onCompose, controls, durationInFrames, ...sequenceProps }) => {
+    const { durationInFrames: videoDuration } = (0, use_video_config_js_1.useVideoConfig)();
+    const resolvedDuration = durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : videoDuration;
+    const frame = (0, use_current_frame_js_1.useCurrentFrame)();
+    const { delayRender, continueRender, cancelRender } = (0, use_delay_render_js_1.useDelayRender)();
+    const canvasRef = (0, react_1.useRef)(null);
+    const sceneRef = (0, react_1.useRef)(null);
+    const chainState = (0, use_effect_chain_state_js_1.useEffectChainState)(width, height);
+    // Refs so the paint handler always reads fresh values.
+    const effectsRef = (0, react_1.useRef)(effects);
+    effectsRef.current = effects;
+    const frameRef = (0, react_1.useRef)(frame);
+    frameRef.current = frame;
+    const pixelRatioRef = (0, react_1.useRef)(pixelRatio);
+    pixelRatioRef.current = pixelRatio;
+    const widthRef = (0, react_1.useRef)(width);
+    widthRef.current = width;
+    const heightRef = (0, react_1.useRef)(height);
+    heightRef.current = height;
+    // Track the current delayRender handle so the paint handler can settle it.
+    const pendingHandleRef = (0, react_1.useRef)(null);
+    const onPaint = (0, react_1.useCallback)(() => {
+        const canvas = canvasRef.current;
+        const sceneEl = sceneRef.current;
+        const handle = pendingHandleRef.current;
+        if (!canvas || !sceneEl || !chainState || handle === null) {
+            return;
+        }
+        try {
+            const ctx = canvas.getContext('2d');
+            if (!ctx) {
+                throw new Error('Failed to acquire 2D context for <HtmlInCanvas> canvas');
+            }
+            const w = widthRef.current;
+            const h = heightRef.current;
+            // Layout-subtree children are not shown on-screen until rasterized here;
+            // effects then read from and write back to this same surface (via pool).
+            ctx.reset();
+            ctx.drawElementImage(sceneEl, 0, 0, w, h);
+            const capturedHandle = handle;
+            pendingHandleRef.current = null;
+            (0, run_effect_chain_js_1.runEffectChain)({
+                state: chainState,
+                source: canvas,
+                effects: effectsRef.current,
+                output: canvas,
+                frame: frameRef.current,
+                width: w,
+                height: h,
+                pixelRatio: pixelRatioRef.current,
+            })
+                .then((completed) => {
+                if (completed) {
+                    continueRender(capturedHandle);
+                }
+            })
+                .catch((err) => {
+                cancelRender(err);
+            });
+        }
+        catch (error) {
+            cancelRender(error);
+        }
+    }, [chainState, continueRender, cancelRender]);
+    // Set up layoutSubtree and persistent paint listener.
+    (0, react_1.useEffect)(() => {
+        if (!(0, exports.isHtmlInCanvasSupported)()) {
+            cancelRender(new Error('HTML in Canvas is not supported. Open this page in Chrome Canary with chrome://flags/#canvas-draw-element enabled.'));
+            return;
+        }
+        const canvas = canvasRef.current;
+        if (!canvas) {
+            return;
+        }
+        canvas.layoutSubtree = true;
+        canvas.addEventListener('paint', onPaint);
+        return () => {
+            canvas.removeEventListener('paint', onPaint);
+        };
+    }, [onPaint, cancelRender]);
+    // On each frame change: block the renderer and request a paint.
+    (0, react_1.useEffect)(() => {
+        const handle = delayRender(`HtmlInCanvas (frame ${frame})`);
+        // Continue a stale handle from a previous frame that never got a paint.
+        if (pendingHandleRef.current !== null) {
+            continueRender(pendingHandleRef.current);
+        }
+        pendingHandleRef.current = handle;
+        const canvas = canvasRef.current;
+        canvas === null || canvas === void 0 ? void 0 : canvas.requestPaint();
+        return () => {
+            if (pendingHandleRef.current === handle) {
+                continueRender(handle);
+                pendingHandleRef.current = null;
+            }
+        };
+    }, [frame, delayRender, continueRender]);
+    const outerStyle = (0, react_1.useMemo)(() => {
+        return {
+            position: 'absolute',
+            inset: 0,
+            width: width + 'px',
+            height: height + 'px',
+        };
+    }, [width, height]);
+    const innerStyle = (0, react_1.useMemo)(() => {
+        return {
+            width,
+            height,
+        };
+    }, [width, height]);
+    return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { durationInFrames: resolvedDuration, name: "<HtmlInCanvas>", controls: controls, ...sequenceProps, style: style, children: jsx_runtime_1.jsx("canvas", { ref: canvasRef, width: width, height: height, style: outerStyle, children: jsx_runtime_1.jsx("div", { ref: sceneRef, style: innerStyle, children: children }) }) }));
+};
+const HtmlInCanvasWrapped = (0, wrap_in_schema_js_1.wrapInSchema)(HtmlInCanvasInner, htmlInCanvasSchema);
+exports.HtmlInCanvas = Object.assign(HtmlInCanvasWrapped, {
+    isHtmlInCanvasSupported: exports.isHtmlInCanvasSupported,
+});
+exports.HtmlInCanvas.displayName = 'HtmlInCanvas';
+(0, enable_sequence_stack_traces_js_1.addSequenceStackTraces)(exports.HtmlInCanvas);

package/dist/cjs/PremountContext.d.ts

@@ -1,6 +1,5 @@
 export type PremountContextValue = {
     premountFramesRemaining: number;
-    playing: boolean;
 };
 /**
  * @internal

package/dist/cjs/PremountContext.js

@@ -10,5 +10,4 @@ const react_1 = require("react");
  */
 exports.PremountContext = (0, react_1.createContext)({
     premountFramesRemaining: 0,
-    playing: false,
 });

package/dist/cjs/RemotionRoot.js

@@ -23,6 +23,6 @@ const RemotionRootContexts = ({ children, numberOfAudioTags, logLevel, audioLate
     const logging = (0, react_1.useMemo)(() => {
         return { logLevel, mountTime: Date.now() };
     }, [logLevel]);
-    return ((0, jsx_runtime_1.jsx)(log_level_context_js_1.LogLevelContext.Provider, { value: logging, children: (0, jsx_runtime_1.jsx)(nonce_js_1.NonceContext.Provider, { value: nonceContext, children: (0, jsx_runtime_1.jsx)(TimelineContext_js_1.TimelineContextProvider, { frameState: frameState, children: (0, jsx_runtime_1.jsx)(use_media_enabled_js_1.MediaEnabledProvider, { videoEnabled: videoEnabled, audioEnabled: audioEnabled, children: (0, jsx_runtime_1.jsx)(EditorProps_js_1.EditorPropsProvider, { children: (0, jsx_runtime_1.jsx)(prefetch_state_js_1.PrefetchProvider, { children: (0, jsx_runtime_1.jsx)(SequenceManager_js_1.SequenceManagerProvider, { visualModeEnabled: visualModeEnabled, children: (0, jsx_runtime_1.jsx)(shared_audio_tags_js_1.SharedAudioContextProvider, { numberOfAudioTags: numberOfAudioTags, audioLatencyHint: audioLatencyHint, audioEnabled: audioEnabled, children: (0, jsx_runtime_1.jsx)(duration_state_js_1.DurationsContextProvider, { children: (0, jsx_runtime_1.jsx)(buffering_js_1.BufferingProvider, { children: children }) }) }) }) }) }) }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(log_level_context_js_1.LogLevelContext.Provider, { value: logging, children: (0, jsx_runtime_1.jsx)(nonce_js_1.NonceContext.Provider, { value: nonceContext, children: (0, jsx_runtime_1.jsx)(TimelineContext_js_1.TimelineContextProvider, { frameState: frameState, children: (0, jsx_runtime_1.jsx)(use_media_enabled_js_1.MediaEnabledProvider, { videoEnabled: videoEnabled, audioEnabled: audioEnabled, children: (0, jsx_runtime_1.jsx)(EditorProps_js_1.EditorPropsProvider, { children: (0, jsx_runtime_1.jsx)(prefetch_state_js_1.PrefetchProvider, { children: (0, jsx_runtime_1.jsx)(SequenceManager_js_1.SequenceManagerProvider, { visualModeEnabled: visualModeEnabled, children: (0, jsx_runtime_1.jsx)(duration_state_js_1.DurationsContextProvider, { children: (0, jsx_runtime_1.jsx)(buffering_js_1.BufferingProvider, { children: (0, jsx_runtime_1.jsx)(shared_audio_tags_js_1.SharedAudioContextProvider, { audioLatencyHint: audioLatencyHint, audioEnabled: audioEnabled, children: (0, jsx_runtime_1.jsx)(shared_audio_tags_js_1.SharedAudioTagsContextProvider, { numberOfAudioTags: numberOfAudioTags, children: children }) }) }) }) }) }) }) }) }) }) }));
 };
 exports.RemotionRootContexts = RemotionRootContexts;

package/dist/cjs/Sequence.js

@@ -202,15 +202,7 @@ const PremountedPostmountedSequenceRefForwardingFunction = (props, ref) => {
         styleWhilePremounted,
         styleWhilePostmounted,
     ]);
-    const { playing } = (0, timeline_position_state_js_1.useTimelineContext)();
-    const premountFramesRemaining = premountingActive ? from - frame : 0;
-    const premountContextValue = (0, react_1.useMemo)(() => {
-        return {
-            premountFramesRemaining,
-            playing: parentPremountContext.playing || playing,
-        };
-    }, [premountFramesRemaining, parentPremountContext.playing, playing]);
-    return ((0, jsx_runtime_1.jsx)(PremountContext_js_1.PremountContext.Provider, { value: premountContextValue, children: (0, jsx_runtime_1.jsx)(freeze_js_1.Freeze, { frame: freezeFrame, active: isFreezingActive, children: (0, jsx_runtime_1.jsx)(exports.Sequence, { ref: ref, from: from, durationInFrames: durationInFrames, style: style, _remotionInternalPremountDisplay: premountFor, _remotionInternalPostmountDisplay: postmountFor, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, ...otherProps }) }) }));
+    return ((0, jsx_runtime_1.jsx)(freeze_js_1.Freeze, { frame: freezeFrame, active: isFreezingActive, children: (0, jsx_runtime_1.jsx)(exports.Sequence, { ref: ref, from: from, durationInFrames: durationInFrames, style: style, _remotionInternalPremountDisplay: premountFor, _remotionInternalPostmountDisplay: postmountFor, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, ...otherProps }) }));
 };
 const PremountedPostmountedSequence = (0, react_1.forwardRef)(PremountedPostmountedSequenceRefForwardingFunction);
 const SequenceRefForwardingFunction = (props, ref) => {

package/dist/cjs/audio/Audio.js

@@ -21,7 +21,7 @@ const AudioForRendering_js_1 = require("./AudioForRendering.js");
 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 audioTagsContext = (0, react_1.useContext)(shared_audio_tags_js_1.SharedAudioTagsContext);
     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)();
@@ -84,7 +84,7 @@ const AudioRefForwardingFunction = (props, ref) => {
     if (environment.isRendering) {
         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, onNativeError: 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: audioTagsContext !== null && audioTagsContext.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/shared-audio-tags.d.ts

@@ -28,17 +28,39 @@ export type ScheduleAudioNodeResult = {
     scheduledTime: number;
 } | {
     type: 'not-started';
+    reason: string;
 };
 export type ScheduleAudioNodeOptions = {
     readonly node: AudioBufferSourceNode;
-    readonly targetTime: number;
     readonly mediaTimestamp: number;
     readonly currentTime: number;
-    readonly sequenceEndTime: number;
-    readonly sequenceStartTime: number;
-    readonly debugAudioScheduling: boolean;
+    readonly scheduledTime: number;
+    readonly originalUnloopedMediaTimestamp: number;
+    readonly duration: number;
+    readonly offset: number;
 };
-type SharedContext = {
+export type AudioSyncAnchorEvent = 'changed';
+export type AudioSyncAnchorListener = (event: AudioSyncAnchorEvent) => void;
+export type AudioSyncAnchorEmitter = {
+    dispatch: (event: AudioSyncAnchorEvent) => void;
+    subscribe: (listener: AudioSyncAnchorListener) => {
+        remove: () => void;
+    };
+};
+type SharedAudioContextValue = {
+    audioContext: AudioContext | null;
+    gainNode: GainNode | null;
+    audioSyncAnchor: {
+        value: number;
+    };
+    audioSyncAnchorEmitter: AudioSyncAnchorEmitter;
+    scheduleAudioNode: (options: ScheduleAudioNodeOptions) => ScheduleAudioNodeResult;
+    resume: () => Promise<void>;
+    suspend: () => void;
+    getIsResumingAudioContext: () => Promise<void> | null;
+    unscheduleAudioNode: (node: AudioBufferSourceNode) => void;
+};
+type SharedAudioTagsContextValue = {
     registerAudio: (options: {
         aud: AudioHTMLAttributes<HTMLAudioElement>;
         audioId: string;
@@ -55,19 +77,18 @@ type SharedContext = {
     }) => void;
     playAllAudios: () => void;
     numberOfAudioTags: number;
-    audioContext: AudioContext | null;
-    audioSyncAnchor: {
-        value: number;
-    };
-    scheduleAudioNode: (options: ScheduleAudioNodeOptions) => ScheduleAudioNodeResult;
 };
-export declare const SharedAudioContext: React.Context<SharedContext | null>;
+export declare const SharedAudioContext: React.Context<SharedAudioContextValue | null>;
+export declare const SharedAudioTagsContext: React.Context<SharedAudioTagsContextValue | null>;
 export declare const SharedAudioContextProvider: React.FC<{
-    readonly numberOfAudioTags: number;
     readonly children: React.ReactNode;
     readonly audioLatencyHint: AudioContextLatencyCategory;
     readonly audioEnabled: boolean;
 }>;
+export declare const SharedAudioTagsContextProvider: React.FC<{
+    readonly numberOfAudioTags: number;
+    readonly children: React.ReactNode;
+}>;
 export declare const useSharedAudio: ({ aud, audioId, premounting, postmounting, }: {
     aud: AudioHTMLAttributes<HTMLAudioElement>;
     audioId: string;