@remotion/studio
Version:
APIs for interacting with the Remotion Studio
33 lines (32 loc) • 1.67 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.TimelineWidthProvider = exports.TimelineWidthContext = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const player_1 = require("@remotion/player");
const react_1 = require("react");
const timeline_zoom_1 = require("../../state/timeline-zoom");
const timeline_refs_1 = require("./timeline-refs");
exports.TimelineWidthContext = (0, react_1.createContext)(null);
const TimelineWidthProvider = ({ children }) => {
var _a;
const size = player_1.PlayerInternals.useElementSize(timeline_refs_1.sliderAreaRef, {
triggerOnWindowResize: false,
shouldApplyCssTransforms: true,
});
const { zoom: zoomMap } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
const [widthOverride, setWidthOverride] = (0, react_1.useState)(null);
const observedWidth = (_a = size === null || size === void 0 ? void 0 : size.width) !== null && _a !== void 0 ? _a : null;
(0, react_1.useLayoutEffect)(() => {
var _a;
var _b;
const actual = (_b = (_a = timeline_refs_1.sliderAreaRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _b !== void 0 ? _b : null;
if (actual !== null && actual !== observedWidth) {
setWidthOverride(actual);
}
else {
setWidthOverride(null);
}
}, [observedWidth, zoomMap]);
return (jsx_runtime_1.jsx(exports.TimelineWidthContext.Provider, { value: widthOverride !== null && widthOverride !== void 0 ? widthOverride : observedWidth, children: children }));
};
exports.TimelineWidthProvider = TimelineWidthProvider;