@remotion/studio
Version:
APIs for interacting with the Remotion Studio
29 lines (28 loc) • 1.68 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.NumberOfLoopsSetting = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const InputDragger_1 = require("../NewComposition/InputDragger");
const RemInput_1 = require("../NewComposition/RemInput");
const layout_1 = require("./layout");
const min = 0;
const NumberOfLoopsSetting = ({ numberOfGifLoops, setNumberOfGifLoops }) => {
const onNumberOfGifLoopsChangedDirectly = (0, react_1.useCallback)((newConcurrency) => {
setNumberOfGifLoops(newConcurrency);
}, [setNumberOfGifLoops]);
const onNumberOfGifLoopsChanged = (0, react_1.useCallback)((e) => {
setNumberOfGifLoops((q) => {
const newConcurrency = parseInt(e, 10);
if (Number.isNaN(newConcurrency)) {
return q;
}
const newConcurrencyClamped = Math.max(newConcurrency, min);
return newConcurrencyClamped;
});
}, [setNumberOfGifLoops]);
return (jsx_runtime_1.jsxs("div", { style: layout_1.optionRow, children: [
jsx_runtime_1.jsx("div", { style: layout_1.label, children: "Number of loops" }), jsx_runtime_1.jsx("div", { style: layout_1.rightRow, children: jsx_runtime_1.jsx(RemInput_1.RightAlignInput, { children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { value: numberOfGifLoops, onTextChange: onNumberOfGifLoopsChanged, placeholder: `${min}-`, onValueChange: onNumberOfGifLoopsChangedDirectly, name: "number-of-gif-loops", step: 1, min: min, status: "ok", rightAlign: true }) }) })
] }));
};
exports.NumberOfLoopsSetting = NumberOfLoopsSetting;