remotion
Version:
Make videos programmatically
128 lines (127 loc) • 6.68 kB
JavaScript
;
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 with_interactivity_schema_js_1 = require("./with-interactivity-schema.js");
const interactiveElementSchema = {
...interactivity_schema_js_1.baseSchema,
...interactivity_schema_js_1.transformSchema,
...interactivity_schema_js_1.textSchema,
...interactivity_schema_js_1.textContentSchema,
};
const setRef = (ref, value) => {
if (typeof ref === 'function') {
ref(value);
}
else if (ref) {
ref.current = value;
}
};
const makeInteractiveElement = (tag, displayName) => {
const Inner = (0, react_1.forwardRef)((propsWithControls, ref) => {
const { durationInFrames, from, trimBefore, freeze, hidden, name, showInTimeline, stack, controls, ...props } = propsWithControls;
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, _remotionInternalStack: stack, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/interactive", outlineRef: refForOutline, children: react_1.default.createElement(tag, {
...props,
ref: callbackRef,
}) }));
});
Inner.displayName = displayName;
const Wrapped = (0, with_interactivity_schema_js_1.withInteractivitySchema)({
Component: Inner,
componentName: displayName,
componentIdentity: `dev.remotion.remotion.${displayName.slice(1, -1)}`,
schema: interactiveElementSchema,
supportsEffects: false,
});
Wrapped.displayName = displayName;
(0, enable_sequence_stack_traces_js_1.addSequenceStackTraces)(Wrapped);
return Wrapped;
};
/**
* @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,
transformSchema: interactivity_schema_js_1.transformSchema,
textSchema: interactivity_schema_js_1.textSchema,
premountSchema: interactivity_schema_js_1.premountSchema,
sequenceSchema: interactivity_schema_js_1.sequenceSchema,
withSchema: with_interactivity_schema_js_1.withInteractivitySchema,
A: makeInteractiveElement('a', '<Interactive.A>'),
Article: makeInteractiveElement('article', '<Interactive.Article>'),
Aside: makeInteractiveElement('aside', '<Interactive.Aside>'),
Button: makeInteractiveElement('button', '<Interactive.Button>'),
Circle: makeInteractiveElement('circle', '<Interactive.Circle>'),
Code: makeInteractiveElement('code', '<Interactive.Code>'),
Div: makeInteractiveElement('div', '<Interactive.Div>'),
Ellipse: makeInteractiveElement('ellipse', '<Interactive.Ellipse>'),
Em: makeInteractiveElement('em', '<Interactive.Em>'),
Footer: makeInteractiveElement('footer', '<Interactive.Footer>'),
G: makeInteractiveElement('g', '<Interactive.G>'),
H1: makeInteractiveElement('h1', '<Interactive.H1>'),
H2: makeInteractiveElement('h2', '<Interactive.H2>'),
H3: makeInteractiveElement('h3', '<Interactive.H3>'),
H4: makeInteractiveElement('h4', '<Interactive.H4>'),
H5: makeInteractiveElement('h5', '<Interactive.H5>'),
H6: makeInteractiveElement('h6', '<Interactive.H6>'),
Header: makeInteractiveElement('header', '<Interactive.Header>'),
Label: makeInteractiveElement('label', '<Interactive.Label>'),
Li: makeInteractiveElement('li', '<Interactive.Li>'),
Line: makeInteractiveElement('line', '<Interactive.Line>'),
Main: makeInteractiveElement('main', '<Interactive.Main>'),
Nav: makeInteractiveElement('nav', '<Interactive.Nav>'),
Ol: makeInteractiveElement('ol', '<Interactive.Ol>'),
P: makeInteractiveElement('p', '<Interactive.P>'),
Path: makeInteractiveElement('path', '<Interactive.Path>'),
Pre: makeInteractiveElement('pre', '<Interactive.Pre>'),
Rect: makeInteractiveElement('rect', '<Interactive.Rect>'),
Section: makeInteractiveElement('section', '<Interactive.Section>'),
Small: makeInteractiveElement('small', '<Interactive.Small>'),
Span: makeInteractiveElement('span', '<Interactive.Span>'),
Strong: makeInteractiveElement('strong', '<Interactive.Strong>'),
Svg: makeInteractiveElement('svg', '<Interactive.Svg>'),
Text: makeInteractiveElement('text', '<Interactive.Text>'),
Ul: makeInteractiveElement('ul', '<Interactive.Ul>'),
};