@remotion/studio
Version:
APIs for interacting with the Remotion Studio
29 lines (28 loc) • 2.04 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.NewCompDuration = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const validate_new_comp_data_1 = require("../../helpers/validate-new-comp-data");
const layout_1 = require("../layout");
const layout_2 = require("../RenderModal/layout");
const InputDragger_1 = require("./InputDragger");
const ValidationMessage_1 = require("./ValidationMessage");
const NewCompDuration = ({ durationInFrames, setDurationInFrames }) => {
const onDurationInFramesChanged = (0, react_1.useCallback)((newValue) => {
setDurationInFrames(Number(newValue));
}, [setDurationInFrames]);
const onDurationChangedDirectly = (0, react_1.useCallback)((newVal) => {
setDurationInFrames(newVal);
}, [setDurationInFrames]);
const compDurationErrMessage = (0, validate_new_comp_data_1.validateCompositionDuration)(durationInFrames);
return (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Duration in frames" }), jsx_runtime_1.jsxs("div", { style: layout_2.rightRow, children: [
jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: durationInFrames, onTextChange: onDurationInFramesChanged, placeholder: "Duration (frames)", name: "durationInFrames", min: 1, step: 1, required: true, status: "ok",
// Hitting Promise.all() limit in Chrome
max: 300000, onValueChange: onDurationChangedDirectly, rightAlign: false }), compDurationErrMessage ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compDurationErrMessage, type: "error" })
] })) : null] })
] }));
};
exports.NewCompDuration = NewCompDuration;