remotion/dist/cjs/effects/Solid.js

Make videos programmatically

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Solid = void 0;
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_field_schema_js_1 = require("../sequence-field-schema.js");
const Sequence_js_1 = require("../Sequence.js");
const use_delay_render_js_1 = require("../use-delay-render.js");
const wrap_in_schema_js_1 = require("../wrap-in-schema.js");
const run_effect_chain_js_1 = require("./run-effect-chain.js");
const use_effect_chain_state_js_1 = require("./use-effect-chain-state.js");
const use_memoized_effects_js_1 = require("./use-memoized-effects.js");
const solidSchema = {
    color: {
        type: 'color',
        default: 'transparent',
        description: 'Color',
    },
    width: {
        type: 'number',
        min: 1,
        step: 1,
        default: 1920,
        description: 'Width',
    },
    height: {
        type: 'number',
        min: 1,
        step: 1,
        default: 1080,
        description: 'Height',
    },
    ...sequence_field_schema_js_1.sequenceVisualStyleSchema,
};
const SolidInner = ({ color, width, height, effects = [], className, style, overrideId, ref, }) => {
    const { delayRender, continueRender, cancelRender } = (0, use_delay_render_js_1.useDelayRender)();
    const [outputCanvas, setOutputCanvas] = (0, react_1.useState)(null);
    const memoizedEffects = (0, use_memoized_effects_js_1.useMemoizedEffects)({
        effects,
        overrideId: overrideId !== null && overrideId !== void 0 ? overrideId : null,
    });
    const sourceCanvas = (0, react_1.useMemo)(() => {
        if (typeof document === 'undefined') {
            return null;
        }
        const canvas = document.createElement('canvas');
        canvas.width = 1;
        canvas.height = 1;
        return canvas;
    }, []);
    const chainState = (0, use_effect_chain_state_js_1.useEffectChainState)();
    const canvasRef = (0, react_1.useCallback)((canvas) => {
        setOutputCanvas(canvas);
        if (typeof ref === 'function') {
            ref(canvas);
        }
        else if (ref) {
            ref.current = canvas;
        }
    }, [ref]);
    // Fill source and run effect chain on every frame / color change.
    (0, react_1.useEffect)(() => {
        if (!outputCanvas || !sourceCanvas) {
            return;
        }
        const handle = delayRender('Solid effect chain');
        if (!chainState) {
            continueRender(handle);
            return () => {
                continueRender(handle);
            };
        }
        const ctx = sourceCanvas.getContext('2d', { colorSpace: 'srgb' });
        if (!ctx) {
            cancelRender(new Error('Failed to acquire 2D context for <Solid> source'));
            return;
        }
        ctx.clearRect(0, 0, 1, 1);
        if (color !== undefined) {
            ctx.fillStyle = color;
            ctx.fillRect(0, 0, 1, 1);
        }
        (0, run_effect_chain_js_1.runEffectChain)({
            state: chainState.get(width, height),
            source: sourceCanvas,
            effects: memoizedEffects,
            output: outputCanvas,
            width,
            height,
        })
            .then((completed) => {
            if (completed) {
                continueRender(handle);
            }
        })
            .catch((err) => {
            cancelRender(err);
        });
        return () => {
            continueRender(handle);
        };
    }, [
        color,
        outputCanvas,
        sourceCanvas,
        chainState,
        width,
        height,
        delayRender,
        continueRender,
        cancelRender,
        memoizedEffects,
    ]);
    return ((0, jsx_runtime_1.jsx)("canvas", { ref: canvasRef, width: width, height: height, className: className, style: style }));
};
const SolidOuter = (0, react_1.forwardRef)(({ effects = [], _experimentalControls: controls, color, height, width, className, durationInFrames, style, name, from, hidden, showInTimeline, ...props }, ref) => {
    var _a;
    props;
    const memoizedEffectDefinitions = (0, use_memoized_effects_js_1.useMemoizedEffectDefinitions)(effects);
    return ((0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { layout: "none", from: from, hidden: hidden, showInTimeline: showInTimeline, _experimentalControls: controls, _remotionInternalEffects: memoizedEffectDefinitions, durationInFrames: durationInFrames, name: name !== null && name !== void 0 ? name : '<Solid>', _remotionInternalDocumentationLink: name === undefined ? 'https://www.remotion.dev/docs/solid' : undefined, ...props, children: (0, jsx_runtime_1.jsx)(SolidInner, { ref: ref, overrideId: (_a = controls === null || controls === void 0 ? void 0 : controls.overrideId) !== null && _a !== void 0 ? _a : null, color: color, height: height, width: width, className: className, style: style, effects: effects }) }));
});
exports.Solid = (0, wrap_in_schema_js_1.wrapInSchema)(SolidOuter, solidSchema);
exports.Solid.displayName = 'Solid';
(0, enable_sequence_stack_traces_js_1.addSequenceStackTraces)(exports.Solid);