remotion
Version:
Make videos programmatically
132 lines (131 loc) • 6.65 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Composition = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const react_dom_1 = require("react-dom");
const CanUseRemotionHooks_js_1 = require("./CanUseRemotionHooks.js");
const CompositionManagerContext_js_1 = require("./CompositionManagerContext.js");
const Folder_js_1 = require("./Folder.js");
const ResolveCompositionConfig_js_1 = require("./ResolveCompositionConfig.js");
const delay_render_js_1 = require("./delay-render.js");
const get_remotion_environment_js_1 = require("./get-remotion-environment.js");
const input_props_serialization_js_1 = require("./input-props-serialization.js");
const is_player_js_1 = require("./is-player.js");
const loading_indicator_js_1 = require("./loading-indicator.js");
const nonce_js_1 = require("./nonce.js");
const portal_node_js_1 = require("./portal-node.js");
const use_lazy_component_js_1 = require("./use-lazy-component.js");
const use_video_js_1 = require("./use-video.js");
const validate_composition_id_js_1 = require("./validation/validate-composition-id.js");
const validate_default_props_js_1 = require("./validation/validate-default-props.js");
const Fallback = () => {
(0, react_1.useEffect)(() => {
const fallback = (0, delay_render_js_1.delayRender)('Waiting for Root component to unsuspend');
return () => (0, delay_render_js_1.continueRender)(fallback);
}, []);
return null;
};
const InnerComposition = ({ width, height, fps, durationInFrames, id, defaultProps, schema, ...compProps }) => {
var _a, _b;
const compManager = (0, react_1.useContext)(CompositionManagerContext_js_1.CompositionSetters);
const { registerComposition, unregisterComposition } = compManager;
const video = (0, use_video_js_1.useVideo)();
const lazy = (0, use_lazy_component_js_1.useLazyComponent)({
compProps: compProps,
componentName: 'Composition',
noSuspense: false,
});
const nonce = (0, nonce_js_1.useNonce)();
const isPlayer = (0, is_player_js_1.useIsPlayer)();
const environment = (0, get_remotion_environment_js_1.getRemotionEnvironment)();
const canUseComposition = (0, react_1.useContext)(CanUseRemotionHooks_js_1.CanUseRemotionHooks);
if (canUseComposition) {
if (isPlayer) {
throw new Error('<Composition> was mounted inside the `component` that was passed to the <Player>. See https://remotion.dev/docs/wrong-composition-mount for help.');
}
throw new Error('<Composition> mounted inside another composition. See https://remotion.dev/docs/wrong-composition-mount for help.');
}
const { folderName, parentName } = (0, react_1.useContext)(Folder_js_1.FolderContext);
(0, react_1.useEffect)(() => {
var _a;
// Ensure it's a URL safe id
if (!id) {
throw new Error('No id for composition passed.');
}
(0, validate_composition_id_js_1.validateCompositionId)(id);
(0, validate_default_props_js_1.validateDefaultAndInputProps)(defaultProps, 'defaultProps', id);
registerComposition({
durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : undefined,
fps: fps !== null && fps !== void 0 ? fps : undefined,
height: height !== null && height !== void 0 ? height : undefined,
width: width !== null && width !== void 0 ? width : undefined,
id,
folderName,
component: lazy,
defaultProps: (0, input_props_serialization_js_1.serializeThenDeserializeInStudio)((defaultProps !== null && defaultProps !== void 0 ? defaultProps : {})),
nonce,
parentFolderName: parentName,
schema: schema !== null && schema !== void 0 ? schema : null,
calculateMetadata: (_a = compProps.calculateMetadata) !== null && _a !== void 0 ? _a : null,
});
return () => {
unregisterComposition(id);
};
}, [
durationInFrames,
fps,
height,
lazy,
id,
folderName,
defaultProps,
width,
nonce,
parentName,
schema,
compProps.calculateMetadata,
registerComposition,
unregisterComposition,
]);
(0, react_1.useEffect)(() => {
window.dispatchEvent(new CustomEvent(ResolveCompositionConfig_js_1.PROPS_UPDATED_EXTERNALLY, {
detail: {
resetUnsaved: id,
},
}));
}, [defaultProps, id]);
const resolved = (0, ResolveCompositionConfig_js_1.useResolvedVideoConfig)(id);
if (environment.isStudio && video && video.component === lazy) {
const Comp = lazy;
if (resolved === null ||
(resolved.type !== 'success' &&
resolved.type !== 'success-and-refreshing')) {
return null;
}
return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(CanUseRemotionHooks_js_1.CanUseRemotionHooksProvider, { children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(loading_indicator_js_1.Loading, {}), children: (0, jsx_runtime_1.jsx)(Comp, { ...((_a = resolved.result.props) !== null && _a !== void 0 ? _a : {}) }) }) }), (0, portal_node_js_1.portalNode)());
}
if (environment.isRendering && video && video.component === lazy) {
const Comp = lazy;
if (resolved === null ||
(resolved.type !== 'success' &&
resolved.type !== 'success-and-refreshing')) {
return null;
}
return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(CanUseRemotionHooks_js_1.CanUseRemotionHooksProvider, { children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(Fallback, {}), children: (0, jsx_runtime_1.jsx)(Comp, { ...((_b = resolved.result.props) !== null && _b !== void 0 ? _b : {}) }) }) }), (0, portal_node_js_1.portalNode)());
}
return null;
};
/*
* @description This component is used to register a video to make it renderable and make it show in the sidebar, in dev mode.
* @see [Documentation](https://remotion.dev/docs/composition)
*/
const Composition = (props) => {
const { onlyRenderComposition } = (0, react_1.useContext)(CompositionManagerContext_js_1.CompositionSetters);
if (onlyRenderComposition && onlyRenderComposition !== props.id) {
return null;
}
// @ts-expect-error
return (0, jsx_runtime_1.jsx)(InnerComposition, { ...props });
};
exports.Composition = Composition;