remotion
Version:
Render videos in React
128 lines • 4.97 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.RemotionRoot = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const CompositionManager_1 = require("./CompositionManager");
const nonce_1 = require("./nonce");
const random_1 = require("./random");
const ready_manager_1 = require("./ready-manager");
const timeline_position_state_1 = require("./timeline-position-state");
const RemotionRoot = ({ children }) => {
// Wontfix, expected to have
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const [compositions, setCompositions] = react_1.useState([]);
const [currentComposition, setCurrentComposition] = react_1.useState(null);
const [remotionRootId] = react_1.useState(() => String(random_1.random(null)));
const [sequences, setSequences] = react_1.useState([]);
const [assets, setAssets] = react_1.useState([]);
const [frame, setFrame] = react_1.useState(0);
const [playing, setPlaying] = react_1.useState(false);
const [fastRefreshes, setFastRefreshes] = react_1.useState(0);
react_1.useLayoutEffect(() => {
if (typeof window !== 'undefined') {
window.remotion_setFrame = (f) => {
const id = ready_manager_1.delayRender();
setFrame(f);
requestAnimationFrame(() => ready_manager_1.continueRender(id));
};
}
}, []);
react_1.useLayoutEffect(() => {
if (typeof window !== 'undefined') {
window.remotion_collectAssets = () => {
setAssets([]); // clear assets at next render
return assets;
};
}
}, [assets]);
const registerComposition = react_1.useCallback((comp) => {
setCompositions((comps) => {
if (comps.find((c) => c.id === comp.id)) {
throw new Error(`Multiple composition with id ${comp.id} are registered.`);
}
return [...comps, comp].slice().sort((a, b) => a.nonce - b.nonce);
});
}, []);
const registerSequence = react_1.useCallback((seq) => {
setSequences((seqs) => {
return [...seqs, seq];
});
}, []);
const unregisterComposition = react_1.useCallback((id) => {
setCompositions((comps) => {
return comps.filter((c) => c.id !== id);
});
}, []);
const unregisterSequence = react_1.useCallback((seq) => {
setSequences((seqs) => seqs.filter((s) => s.id !== seq));
}, []);
const registerAsset = react_1.useCallback((asset) => {
setAssets((assts) => {
return [...assts, asset];
});
}, []);
const unregisterAsset = react_1.useCallback((id) => {
setAssets((assts) => {
return assts.filter((a) => a.id !== id);
});
}, []);
const contextValue = react_1.useMemo(() => {
return {
compositions,
registerComposition,
unregisterComposition,
currentComposition,
setCurrentComposition,
registerSequence,
unregisterSequence,
registerAsset,
unregisterAsset,
sequences,
assets,
};
}, [
compositions,
currentComposition,
registerComposition,
registerSequence,
unregisterComposition,
unregisterSequence,
registerAsset,
unregisterAsset,
sequences,
assets,
]);
const timelineContextValue = react_1.useMemo(() => {
return {
frame,
playing,
rootId: remotionRootId,
};
}, [frame, playing, remotionRootId]);
const setTimelineContextValue = react_1.useMemo(() => {
return {
setFrame,
setPlaying,
};
}, []);
const nonceContext = react_1.useMemo(() => {
let counter = 0;
return {
getNonce: () => counter++,
fastRefreshes,
};
}, [fastRefreshes]);
react_1.useEffect(() => {
if (module.hot) {
module.hot.addStatusHandler((status) => {
if (status === 'idle') {
setFastRefreshes((i) => i + 1);
}
});
}
}, []);
return (jsx_runtime_1.jsx(nonce_1.NonceContext.Provider, Object.assign({ value: nonceContext }, { children: jsx_runtime_1.jsx(timeline_position_state_1.TimelineContext.Provider, Object.assign({ value: timelineContextValue }, { children: jsx_runtime_1.jsx(timeline_position_state_1.SetTimelineContext.Provider, Object.assign({ value: setTimelineContextValue }, { children: jsx_runtime_1.jsx(CompositionManager_1.CompositionManager.Provider, Object.assign({ value: contextValue }, { children: children }), void 0) }), void 0) }), void 0) }), void 0));
};
exports.RemotionRoot = RemotionRoot;
//# sourceMappingURL=RemotionRoot.js.map