@remotion/studio
Version:
APIs for interacting with the Remotion Studio
109 lines (108 loc) • 5.43 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.RenderButton = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const player_1 = require("@remotion/player");
const react_1 = require("react");
const remotion_1 = require("remotion");
const client_id_1 = require("../helpers/client-id");
const use_keybinding_1 = require("../helpers/use-keybinding");
const render_1 = require("../icons/render");
const in_out_1 = require("../state/in-out");
const modals_1 = require("../state/modals");
const Button_1 = require("./Button");
const layout_1 = require("./layout");
const button = {
paddingLeft: 7,
paddingRight: 7,
paddingTop: 7,
paddingBottom: 7,
};
const label = {
fontSize: 14,
};
const RenderButton = () => {
const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
.previewServerState.type;
const shortcut = (0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? '' : '(R)';
const tooltip = connectionStatus === 'connected'
? 'Export the current composition ' + shortcut
: 'Connect to the Studio server to render';
const iconStyle = (0, react_1.useMemo)(() => {
return {
style: {
height: 16,
color: 'currentColor',
},
};
}, []);
const video = remotion_1.Internals.useVideo();
const getCurrentFrame = player_1.PlayerInternals.useFrameImperative();
const { props } = (0, react_1.useContext)(remotion_1.Internals.EditorPropsContext);
const onClick = (0, react_1.useCallback)(() => {
var _a, _b, _c;
if (!video) {
return null;
}
const defaults = window.remotion_renderDefaults;
if (!defaults) {
throw new TypeError('Expected defaults');
}
setSelectedModal({
type: 'render',
compositionId: video.id,
initialFrame: getCurrentFrame(),
initialStillImageFormat: defaults.stillImageFormat,
initialVideoImageFormat: null,
initialJpegQuality: defaults.jpegQuality,
initialScale: (_b = (_a = window.remotion_renderDefaults) === null || _a === void 0 ? void 0 : _a.scale) !== null && _b !== void 0 ? _b : 1,
initialLogLevel: defaults.logLevel,
initialConcurrency: defaults.concurrency,
maxConcurrency: defaults.maxConcurrency,
minConcurrency: defaults.minConcurrency,
initialMuted: defaults.muted,
initialEnforceAudioTrack: defaults.enforceAudioTrack,
initialProResProfile: defaults.proResProfile,
initialx264Preset: defaults.x264Preset,
initialPixelFormat: null,
initialAudioBitrate: defaults.audioBitrate,
initialVideoBitrate: defaults.videoBitrate,
initialEveryNthFrame: defaults.everyNthFrame,
initialNumberOfGifLoops: defaults.numberOfGifLoops,
initialDelayRenderTimeout: defaults.delayRenderTimeout,
defaultConfigurationAudioCodec: defaults.audioCodec,
initialEnvVariables: window.process.env,
initialDisableWebSecurity: defaults.disableWebSecurity,
initialOpenGlRenderer: defaults.openGlRenderer,
initialHeadless: defaults.headless,
initialIgnoreCertificateErrors: defaults.ignoreCertificateErrors,
initialOffthreadVideoCacheSizeInBytes: defaults.offthreadVideoCacheSizeInBytes,
initialOffthreadVideoThreads: defaults.offthreadVideoThreads,
defaultProps: (_c = props[video.id]) !== null && _c !== void 0 ? _c : video.defaultProps,
inFrameMark: inFrame,
outFrameMark: outFrame,
initialColorSpace: defaults.colorSpace,
initialMultiProcessOnLinux: defaults.multiProcessOnLinux,
defaultConfigurationVideoCodec: defaults.codec,
initialEncodingBufferSize: defaults.encodingBufferSize,
initialEncodingMaxRate: defaults.encodingMaxRate,
initialUserAgent: defaults.userAgent,
initialBeep: defaults.beepOnFinish,
initialRepro: defaults.repro,
initialForSeamlessAacConcatenation: defaults.forSeamlessAacConcatenation,
renderTypeOfLastRender: null,
defaulMetadata: defaults.metadata,
initialHardwareAcceleration: defaults.hardwareAcceleration,
initialChromeMode: defaults.chromeMode,
initialMediaCacheSizeInBytes: defaults.mediaCacheSizeInBytes,
renderDefaults: defaults,
});
}, [video, setSelectedModal, getCurrentFrame, props, inFrame, outFrame]);
if (!video) {
return null;
}
return ((0, jsx_runtime_1.jsx)(Button_1.Button, { id: "render-modal-button", title: tooltip, onClick: onClick, buttonContainerStyle: button, disabled: connectionStatus !== 'connected', children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)(render_1.RenderIcon, { svgProps: iconStyle }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("span", { style: label, children: "Render" })] }) }));
};
exports.RenderButton = RenderButton;