remotion/dist/cjs/Interactive.js

Make videos programmatically

"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
    var ownKeys = function(o) {
        ownKeys = Object.getOwnPropertyNames || function (o) {
            var ar = [];
            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
            return ar;
        };
        return ownKeys(o);
    };
    return function (mod) {
        if (mod && mod.__esModule) return mod;
        var result = {};
        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
        __setModuleDefault(result, mod);
        return result;
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.Interactive = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importStar(require("react"));
const enable_sequence_stack_traces_js_1 = require("./enable-sequence-stack-traces.js");
const interactivity_schema_js_1 = require("./interactivity-schema.js");
const Sequence_js_1 = require("./Sequence.js");
const use_crop_style_js_1 = require("./use-crop-style.js");
const with_interactivity_schema_js_1 = require("./with-interactivity-schema.js");
const sourcePathToIdentityPrefix = (packageName) => {
    if (packageName === 'remotion') {
        return 'dev.remotion.remotion';
    }
    if (packageName.startsWith('@remotion/')) {
        const normalizedPackageName = packageName
            .slice('@remotion/'.length)
            .replace(/-([a-z])/g, (_, char) => char.toUpperCase());
        return `dev.remotion.${normalizedPackageName}`;
    }
    throw new Error(`Unsupported Remotion package name: ${packageName}`);
};
const makeRemotionComponentIdentity = ({ packageName, componentName, }) => {
    return `${sourcePathToIdentityPrefix(packageName)}.${componentName}`;
};
const interactiveElementSchema = {
    ...interactivity_schema_js_1.baseSchema,
    ...interactivity_schema_js_1.transformSchema,
    ...interactivity_schema_js_1.cropSchema,
};
const interactiveBackgroundElementSchema = {
    ...interactiveElementSchema,
    ...interactivity_schema_js_1.backgroundSchema,
};
const interactiveBorderElementSchema = {
    ...interactiveBackgroundElementSchema,
    ...interactivity_schema_js_1.borderSchema,
    ...interactivity_schema_js_1.borderRadiusSchema,
};
const interactiveTextElementSchema = {
    ...interactiveBorderElementSchema,
    ...interactivity_schema_js_1.textSchema,
    ...interactivity_schema_js_1.textContentSchema,
};
const interactiveSvgTextElementSchema = {
    ...interactiveElementSchema,
    ...interactivity_schema_js_1.svgPaintSchema,
    ...interactivity_schema_js_1.textSchema,
    ...interactivity_schema_js_1.textContentSchema,
};
const interactiveSvgElementSchema = {
    ...interactiveElementSchema,
    ...interactivity_schema_js_1.svgPaintSchema,
};
const interactiveSvgStrokeElementSchema = {
    ...interactiveElementSchema,
    ...interactivity_schema_js_1.svgStrokeSchema,
};
const interactiveSvgRootElementSchema = {
    ...interactiveBorderElementSchema,
    ...interactivity_schema_js_1.svgPaintSchema,
};
const setRef = (ref, value) => {
    if (typeof ref === 'function') {
        ref(value);
    }
    else if (ref) {
        ref.current = value;
    }
};
const withSchema = (options) => {
    const Wrapped = (0, with_interactivity_schema_js_1.withInteractivitySchema)(options);
    (0, enable_sequence_stack_traces_js_1.addSequenceStackTraces)(Wrapped);
    return Wrapped;
};
const makeInteractiveElement = (tag, displayName, schema) => {
    const Inner = (0, react_1.forwardRef)((propsWithControls, ref) => {
        const { durationInFrames, from, trimBefore, freeze, hidden, name, showInTimeline, controls, cropLeft, cropRight, cropTop, cropBottom, style, ...props } = propsWithControls;
        const croppedStyle = (0, use_crop_style_js_1.useCropStyle)({
            cropLeft,
            cropRight,
            cropTop,
            cropBottom,
            style: style !== null && style !== void 0 ? style : null,
            componentName: displayName,
        });
        const refForOutline = (0, react_1.useRef)(null);
        const callbackRef = (0, react_1.useCallback)((element) => {
            refForOutline.current = element;
            setRef(ref, element);
        }, [ref]);
        return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, trimBefore: trimBefore, durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity, freeze: freeze, hidden: hidden, name: name !== null && name !== void 0 ? name : displayName, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, controls: controls, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/interactive", outlineRef: refForOutline, children: react_1.default.createElement(tag, {
                ...props,
                style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined,
                ref: callbackRef,
            }) }));
    });
    Inner.displayName = displayName;
    const Wrapped = withSchema({
        Component: Inner,
        componentName: displayName,
        componentIdentity: makeRemotionComponentIdentity({
            packageName: 'remotion',
            componentName: displayName.slice(1, -1),
        }),
        schema,
        supportsEffects: false,
    });
    Wrapped.displayName = displayName;
    return Wrapped;
};
const makeInteractiveTextElement = (tag, displayName) => {
    return makeInteractiveElement(tag, displayName, interactiveTextElementSchema);
};
const makeInteractiveSvgElement = (tag, displayName) => {
    return makeInteractiveElement(tag, displayName, interactiveSvgElementSchema);
};
const makeInteractiveSvgStrokeElement = (tag, displayName) => {
    return makeInteractiveElement(tag, displayName, interactiveSvgStrokeElementSchema);
};
/**
 * @description HTML and SVG elements that are registered in the Remotion Studio timeline and can be visually edited.
 */
exports.Interactive = {
    baseSchema: interactivity_schema_js_1.baseSchema,
    captionsSchema: interactivity_schema_js_1.captionsSchema,
    transformSchema: interactivity_schema_js_1.transformSchema,
    textSchema: interactivity_schema_js_1.textSchema,
    backgroundSchema: interactivity_schema_js_1.backgroundSchema,
    borderSchema: interactivity_schema_js_1.borderSchema,
    borderRadiusSchema: interactivity_schema_js_1.borderRadiusSchema,
    cropSchema: interactivity_schema_js_1.cropSchema,
    svgPaintSchema: interactivity_schema_js_1.svgPaintSchema,
    svgStrokeSchema: interactivity_schema_js_1.svgStrokeSchema,
    premountSchema: interactivity_schema_js_1.premountSchema,
    sequenceSchema: interactivity_schema_js_1.sequenceSchema,
    withSchema,
    _internalMakeRemotionComponentIdentity: makeRemotionComponentIdentity,
    A: makeInteractiveTextElement('a', '<Interactive.A>'),
    Article: makeInteractiveTextElement('article', '<Interactive.Article>'),
    Aside: makeInteractiveTextElement('aside', '<Interactive.Aside>'),
    Button: makeInteractiveTextElement('button', '<Interactive.Button>'),
    Circle: makeInteractiveSvgElement('circle', '<Interactive.Circle>'),
    Code: makeInteractiveTextElement('code', '<Interactive.Code>'),
    Div: makeInteractiveTextElement('div', '<Interactive.Div>'),
    Ellipse: makeInteractiveSvgElement('ellipse', '<Interactive.Ellipse>'),
    Em: makeInteractiveTextElement('em', '<Interactive.Em>'),
    Footer: makeInteractiveTextElement('footer', '<Interactive.Footer>'),
    G: makeInteractiveSvgElement('g', '<Interactive.G>'),
    H1: makeInteractiveTextElement('h1', '<Interactive.H1>'),
    H2: makeInteractiveTextElement('h2', '<Interactive.H2>'),
    H3: makeInteractiveTextElement('h3', '<Interactive.H3>'),
    H4: makeInteractiveTextElement('h4', '<Interactive.H4>'),
    H5: makeInteractiveTextElement('h5', '<Interactive.H5>'),
    H6: makeInteractiveTextElement('h6', '<Interactive.H6>'),
    Header: makeInteractiveTextElement('header', '<Interactive.Header>'),
    Label: makeInteractiveTextElement('label', '<Interactive.Label>'),
    Li: makeInteractiveTextElement('li', '<Interactive.Li>'),
    Line: makeInteractiveSvgStrokeElement('line', '<Interactive.Line>'),
    Main: makeInteractiveTextElement('main', '<Interactive.Main>'),
    Nav: makeInteractiveTextElement('nav', '<Interactive.Nav>'),
    Ol: makeInteractiveTextElement('ol', '<Interactive.Ol>'),
    P: makeInteractiveTextElement('p', '<Interactive.P>'),
    Path: makeInteractiveSvgElement('path', '<Interactive.Path>'),
    Pre: makeInteractiveTextElement('pre', '<Interactive.Pre>'),
    Rect: makeInteractiveSvgElement('rect', '<Interactive.Rect>'),
    Section: makeInteractiveTextElement('section', '<Interactive.Section>'),
    Small: makeInteractiveTextElement('small', '<Interactive.Small>'),
    Span: makeInteractiveTextElement('span', '<Interactive.Span>'),
    Strong: makeInteractiveTextElement('strong', '<Interactive.Strong>'),
    Svg: makeInteractiveElement('svg', '<Interactive.Svg>', interactiveSvgRootElementSchema),
    Text: makeInteractiveElement('text', '<Interactive.Text>', interactiveSvgTextElementSchema),
    Ul: makeInteractiveTextElement('ul', '<Interactive.Ul>'),
};