@remotion/cli 4.0.0-alpha.217 → 4.0.0-alpha10

package/dist/editor/components/Timeline/TimelinePlayCursorSyncer.js

@@ -12,8 +12,9 @@ const TimelinePlayCursorSyncer = () => {
     var _a, _b, _c;
     const video = remotion_1.Internals.useVideo();
     const timelineContext = (0, react_1.useContext)(remotion_1.Internals.Timeline.TimelineContext);
+    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const { zoom } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
-    (0, imperative_state_1.setCurrentFrame)(timelineContext.frame);
+    (0, imperative_state_1.setCurrentFrame)(timelinePosition);
     (0, imperative_state_1.setCurrentZoom)(zoom);
     (0, imperative_state_1.setCurrentDuration)((_a = video === null || video === void 0 ? void 0 : video.durationInFrames) !== null && _a !== void 0 ? _a : 1);
     (0, imperative_state_1.setCurrentFps)((_b = video === null || video === void 0 ? void 0 : video.fps) !== null && _b !== void 0 ? _b : 1);
@@ -31,9 +32,9 @@ const TimelinePlayCursorSyncer = () => {
         (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
             direction: timelineContext.playbackRate > 0 ? 'page-right' : 'page-left',
             durationInFrames: video.durationInFrames,
-            frame: timelineContext.frame,
+            frame: timelinePosition,
         });
-    }, [playing, timelineContext, video]);
+    }, [playing, timelineContext, timelinePosition, video]);
     /**
      * Restore state if `enter` is being pressed
      */

package/dist/editor/components/Timeline/TimelineSequence.js

@@ -5,17 +5,17 @@ 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 colors_1 = require("../../helpers/colors");
 const get_timeline_sequence_layout_1 = require("../../helpers/get-timeline-sequence-layout");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const AudioWaveform_1 = require("../AudioWaveform");
 const LoopedTimelineIndicators_1 = require("./LoopedTimelineIndicators");
 const timeline_refs_1 = require("./timeline-refs");
 const TimelineVideoInfo_1 = require("./TimelineVideoInfo");
-const SEQUENCE_GRADIENT = 'var(--blue)';
 const AUDIO_GRADIENT = 'linear-gradient(rgb(16 171 58), rgb(43 165 63) 60%)';
 const VIDEO_GRADIENT = 'linear-gradient(to top, #8e44ad, #9b59b6)';
 const TimelineSequence = ({ s, fps }) => {
-    var _a, _b;
+    var _a;
     const size = player_1.PlayerInternals.useElementSize(timeline_refs_1.sliderAreaRef, {
         triggerOnWindowResize: false,
         shouldApplyCssTransforms: true,
@@ -30,8 +30,10 @@ const TimelineSequence = ({ s, fps }) => {
         throw new TypeError('Expected video config');
     }
     const { marginLeft, width } = (0, get_timeline_sequence_layout_1.getTimelineSequenceLayout)({
-        durationInFrames: s.duration * ((_b = s.showLoopTimesInTimeline) !== null && _b !== void 0 ? _b : 1),
-        startFrom: s.from,
+        durationInFrames: s.loopDisplay
+            ? s.loopDisplay.durationInFrames * s.loopDisplay.numberOfTimes
+            : s.duration,
+        startFrom: s.loopDisplay ? s.from + s.loopDisplay.startOffset : s.from,
         startFromMedia: s.type === 'sequence' ? 0 : s.startMediaFrom,
         maxMediaDuration,
         video,
@@ -43,7 +45,7 @@ const TimelineSequence = ({ s, fps }) => {
                 ? AUDIO_GRADIENT
                 : s.type === 'video'
                     ? VIDEO_GRADIENT
-                    : SEQUENCE_GRADIENT,
+                    : colors_1.BLUE,
             border: get_timeline_sequence_layout_1.SEQUENCE_BORDER_WIDTH + 'px solid rgba(255, 255, 255, 0.2)',
             borderRadius: 4,
             position: 'absolute',
@@ -55,6 +57,6 @@ const TimelineSequence = ({ s, fps }) => {
             overflow: 'hidden',
         };
     }, [marginLeft, s.type, width]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: style, title: s.displayName, children: [s.type === 'audio' ? ((0, jsx_runtime_1.jsx)(AudioWaveform_1.AudioWaveform, { src: s.src, doesVolumeChange: s.doesVolumeChange, visualizationWidth: width, startFrom: s.startMediaFrom, durationInFrames: s.duration, fps: fps, volume: s.volume, setMaxMediaDuration: setMaxMediaDuration, playbackRate: s.playbackRate })) : null, s.type === 'video' ? (0, jsx_runtime_1.jsx)(TimelineVideoInfo_1.TimelineVideoInfo, { src: s.src }) : null, s.showLoopTimesInTimeline === undefined ? null : ((0, jsx_runtime_1.jsx)(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.showLoopTimesInTimeline }))] }, s.id));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: style, title: s.displayName, children: [s.type === 'audio' ? ((0, jsx_runtime_1.jsx)(AudioWaveform_1.AudioWaveform, { src: s.src, doesVolumeChange: s.doesVolumeChange, visualizationWidth: width, startFrom: s.startMediaFrom, durationInFrames: s.duration, fps: fps, volume: s.volume, setMaxMediaDuration: setMaxMediaDuration, playbackRate: s.playbackRate })) : null, s.type === 'video' ? (0, jsx_runtime_1.jsx)(TimelineVideoInfo_1.TimelineVideoInfo, { src: s.src }) : null, s.loopDisplay === undefined ? null : ((0, jsx_runtime_1.jsx)(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.loopDisplay.numberOfTimes }))] }, s.id));
 };
 exports.TimelineSequence = TimelineSequence;

package/dist/editor/components/TimelineInOutToggle.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const truthy_1 = require("../../truthy");
+const colors_1 = require("../helpers/colors");
 const is_current_selected_still_1 = require("../helpers/is-current-selected-still");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const timelineInOutPointer_1 = require("../icons/timelineInOutPointer");
@@ -218,12 +219,9 @@ const TimelineInOutPointToggle = () => {
             },
         };
     }, [onInMark, onInOutClear, onOutMark, setInAndOutFrames]);
-    if (!videoConfig) {
-        return null;
-    }
     if (isStill) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: getTooltipText('In', 'I'), "aria-label": getTooltipText('In', 'I'), onClick: (e) => onInMark(e), onContextMenu: clearInMark, disabled: timelinePosition === 0, children: (0, jsx_runtime_1.jsx)(timelineInOutPointer_1.TimelineInPointer, { color: inFrame === null ? 'white' : 'var(--blue)', style: style }) }), (0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: getTooltipText('Out', 'O'), "aria-label": getTooltipText('Out', 'O'), onClick: onOutMark, onContextMenu: clearOutMark, disabled: timelinePosition === videoConfig.durationInFrames - 1, children: (0, jsx_runtime_1.jsx)(timelineInOutPointer_1.TimelineOutPointer, { color: outFrame === null ? 'white' : 'var(--blue)', style: style }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: getTooltipText('In', 'I'), "aria-label": getTooltipText('In', 'I'), onClick: (e) => onInMark(e), onContextMenu: clearInMark, disabled: !videoConfig || timelinePosition === 0, children: (0, jsx_runtime_1.jsx)(timelineInOutPointer_1.TimelineInPointer, { color: inFrame === null ? 'white' : colors_1.BLUE, style: style }) }), (0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: getTooltipText('Out', 'O'), "aria-label": getTooltipText('Out', 'O'), onClick: onOutMark, onContextMenu: clearOutMark, disabled: !videoConfig || timelinePosition === videoConfig.durationInFrames - 1, children: (0, jsx_runtime_1.jsx)(timelineInOutPointer_1.TimelineOutPointer, { color: outFrame === null ? 'white' : colors_1.BLUE, style: style }) })] }));
 };
 exports.TimelineInOutPointToggle = TimelineInOutPointToggle;

package/dist/editor/components/TopPanel.js

@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const use_breakpoint_1 = require("../helpers/use-breakpoint");
 const sidebar_1 = require("../state/sidebar");
-const Canvas_1 = require("./Canvas");
+const CanvasOrLoading_1 = require("./CanvasOrLoading");
 const CompositionSelector_1 = require("./CompositionSelector");
 const CurrentCompositionSideEffects_1 = require("./CurrentCompositionSideEffects");
 const InitialCompositionLoader_1 = require("./InitialCompositionLoader");
@@ -66,6 +66,6 @@ const TopPanel = () => {
     const onCollapseRight = (0, react_1.useCallback)(() => {
         setSidebarCollapsedState({ left: null, right: 'collapsed' });
     }, [setSidebarCollapsedState]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(InitialCompositionLoader_1.InitialCompositionLoader, {}), (0, jsx_runtime_1.jsx)(MenuToolbar_1.MenuToolbar, {}), (0, jsx_runtime_1.jsx)("div", { style: row, children: (0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { minFlex: 0.15, maxFlex: 0.4, defaultFlex: 0.2, id: "sidebar-to-preview", orientation: "vertical", children: [actualStateLeft === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "flexer", children: (0, jsx_runtime_1.jsx)("div", { style: leftContainer, className: "css-reset", children: (0, jsx_runtime_1.jsx)(CompositionSelector_1.CompositionSelector, {}) }) })) : null, actualStateLeft === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { allowToCollapse: "left", onCollapse: onCollapseLeft })) : null, (0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "anti-flexer", children: (0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { minFlex: 0.5, maxFlex: 0.8, defaultFlex: 0.7, id: "canvas-to-right-sidebar", orientation: "vertical", children: [(0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "flexer", children: (0, jsx_runtime_1.jsx)("div", { style: canvasContainer, children: (0, jsx_runtime_1.jsx)(Canvas_1.Canvas, {}) }) }), actualStateRight === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { allowToCollapse: "right", onCollapse: onCollapseRight })) : null, actualStateRight === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "anti-flexer", children: (0, jsx_runtime_1.jsx)(RightPanel_1.RightPanel, {}) })) : null] }) })] }) }), (0, jsx_runtime_1.jsx)(PreviewToolbar_1.PreviewToolbar, {}), (0, jsx_runtime_1.jsx)(CurrentCompositionSideEffects_1.CurrentCompositionKeybindings, {}), (0, jsx_runtime_1.jsx)(CurrentCompositionSideEffects_1.TitleUpdater, {})] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(InitialCompositionLoader_1.InitialCompositionLoader, {}), (0, jsx_runtime_1.jsx)(MenuToolbar_1.MenuToolbar, {}), (0, jsx_runtime_1.jsx)("div", { style: row, children: (0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { minFlex: 0.15, maxFlex: 0.4, defaultFlex: 0.2, id: "sidebar-to-preview", orientation: "vertical", children: [actualStateLeft === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "flexer", children: (0, jsx_runtime_1.jsx)("div", { style: leftContainer, className: "css-reset", children: (0, jsx_runtime_1.jsx)(CompositionSelector_1.CompositionSelector, {}) }) })) : null, actualStateLeft === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { allowToCollapse: "left", onCollapse: onCollapseLeft })) : null, (0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "anti-flexer", children: (0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { minFlex: 0.5, maxFlex: 0.8, defaultFlex: 0.7, id: "canvas-to-right-sidebar", orientation: "vertical", children: [(0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "flexer", children: (0, jsx_runtime_1.jsx)("div", { style: canvasContainer, children: (0, jsx_runtime_1.jsx)(CanvasOrLoading_1.CanvasOrLoading, {}) }) }), actualStateRight === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { allowToCollapse: "right", onCollapse: onCollapseRight })) : null, actualStateRight === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "anti-flexer", children: (0, jsx_runtime_1.jsx)(RightPanel_1.RightPanel, {}) })) : null] }) })] }) }), (0, jsx_runtime_1.jsx)(PreviewToolbar_1.PreviewToolbar, {}), (0, jsx_runtime_1.jsx)(CurrentCompositionSideEffects_1.CurrentCompositionKeybindings, {}), (0, jsx_runtime_1.jsx)(CurrentCompositionSideEffects_1.TitleUpdater, {})] }));
 };
 exports.TopPanel = TopPanel;

package/dist/editor/components/UpdateCheck.js

@@ -3,11 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.UpdateCheck = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const colors_1 = require("../helpers/colors");
 const modals_1 = require("../state/modals");
 const z_index_1 = require("../state/z-index");
 const buttonStyle = {
     appearance: 'none',
-    color: 'var(--blue)',
+    color: colors_1.BLUE,
     border: 'none',
     fontWeight: 'bold',
     backgroundColor: 'transparent',

package/dist/editor/components/get-zod-if-possible.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
 export declare type ZodType = Awaited<typeof import('zod')>['z'];
-export declare type ZodColorType = Awaited<typeof import('@remotion/z-color')>;
+export declare type ZodTypesType = Awaited<typeof import('@remotion/zod-types')>;
 export declare const getZodIfPossible: () => Promise<ZodType | null>;
-export declare const getZColorIfPossible: () => Promise<ZodColorType | null>;
+export declare const getZTypesIfPossible: () => Promise<ZodTypesType | null>;
 export declare const useZodIfPossible: () => typeof import("zod/lib/external") | null;
-export declare const useZodColorIfPossible: () => typeof import("@remotion/z-color") | null;
+export declare const useZodTypesIfPossible: () => typeof import("@remotion/zod-types") | null;
 export declare const ZodProvider: React.FC<{
     children: React.ReactNode;
 }>;

package/dist/editor/components/get-zod-if-possible.js

@@ -23,7 +23,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ZodProvider = exports.useZodColorIfPossible = exports.useZodIfPossible = exports.getZColorIfPossible = exports.getZodIfPossible = void 0;
+exports.ZodProvider = exports.useZodTypesIfPossible = exports.useZodIfPossible = exports.getZTypesIfPossible = exports.getZodIfPossible = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const getZodIfPossible = async () => {
@@ -36,44 +36,44 @@ const getZodIfPossible = async () => {
     }
 };
 exports.getZodIfPossible = getZodIfPossible;
-const getZColorIfPossible = async () => {
+const getZTypesIfPossible = async () => {
     try {
-        const mod = await Promise.resolve().then(() => __importStar(require('@remotion/z-color')));
+        const mod = await Promise.resolve().then(() => __importStar(require('@remotion/zod-types')));
         return mod;
     }
     catch (err) {
         return null;
     }
 };
-exports.getZColorIfPossible = getZColorIfPossible;
+exports.getZTypesIfPossible = getZTypesIfPossible;
 const useZodIfPossible = () => {
     var _a;
     const context = (0, react_1.useContext)(ZodContext);
     return (_a = context === null || context === void 0 ? void 0 : context.zod) !== null && _a !== void 0 ? _a : null;
 };
 exports.useZodIfPossible = useZodIfPossible;
-const useZodColorIfPossible = () => {
+const useZodTypesIfPossible = () => {
     var _a;
     const context = (0, react_1.useContext)(ZodContext);
-    return (_a = context === null || context === void 0 ? void 0 : context.zodColor) !== null && _a !== void 0 ? _a : null;
+    return (_a = context === null || context === void 0 ? void 0 : context.zodTypes) !== null && _a !== void 0 ? _a : null;
 };
-exports.useZodColorIfPossible = useZodColorIfPossible;
+exports.useZodTypesIfPossible = useZodTypesIfPossible;
 const ZodContext = (0, react_1.createContext)(null);
 const ZodProvider = ({ children }) => {
     const [zod, setZod] = (0, react_1.useState)(null);
-    const [zodColor, setZodColor] = (0, react_1.useState)(null);
+    const [zodTypes, setZodTypes] = (0, react_1.useState)(null);
     (0, react_1.useEffect)(() => {
         (0, exports.getZodIfPossible)().then((z) => setZod(z));
     }, []);
     (0, react_1.useEffect)(() => {
-        (0, exports.getZColorIfPossible)().then((z) => setZodColor(z));
+        (0, exports.getZTypesIfPossible)().then((z) => setZodTypes(z));
     }, []);
     const contextValue = (0, react_1.useMemo)(() => {
         return {
             zod,
-            zodColor,
+            zodTypes,
         };
-    }, [zod, zodColor]);
+    }, [zod, zodTypes]);
     return ((0, jsx_runtime_1.jsx)(ZodContext.Provider, { value: contextValue, children: children }));
 };
 exports.ZodProvider = ZodProvider;

package/dist/editor/helpers/calculate-timeline.js

@@ -29,7 +29,7 @@ const calculateTimeline = ({ sequences, sequenceDuration, }) => {
                     rootId: '-',
                     showInTimeline: true,
                     nonce: 0,
-                    showLoopTimesInTimeline: undefined,
+                    loopDisplay: undefined,
                 },
                 depth: 0,
                 hash: '-',

package/dist/editor/helpers/client-id.d.ts

@@ -7,8 +7,8 @@ declare type PreviewServerState = {
 } | {
     type: 'disconnected';
 };
-export declare const PreviewServerConnectionCtx: React.Context<PreviewServerState>;
-export declare const previewServerConnectionRef: React.RefObject<{
+export declare const StudioServerConnectionCtx: React.Context<PreviewServerState>;
+export declare const studioServerConnectionRef: React.RefObject<{
     set: (jobs: PreviewServerState) => void;
 }>;
 export declare const PreviewServerConnection: React.FC<{

package/dist/editor/helpers/client-id.js

@@ -23,24 +23,24 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PreviewServerConnection = exports.previewServerConnectionRef = exports.PreviewServerConnectionCtx = void 0;
+exports.PreviewServerConnection = exports.studioServerConnectionRef = exports.StudioServerConnectionCtx = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
-exports.PreviewServerConnectionCtx = react_1.default.createContext({
+exports.StudioServerConnectionCtx = react_1.default.createContext({
     type: 'init',
 });
-exports.previewServerConnectionRef = (0, react_1.createRef)();
+exports.studioServerConnectionRef = (0, react_1.createRef)();
 const PreviewServerConnection = ({ children }) => {
     const [state, setState] = react_1.default.useState({
         type: 'init',
     });
-    (0, react_1.useImperativeHandle)(exports.previewServerConnectionRef, () => {
+    (0, react_1.useImperativeHandle)(exports.studioServerConnectionRef, () => {
         return {
             set: (newState) => {
                 setState(newState);
             },
         };
     }, []);
-    return ((0, jsx_runtime_1.jsx)(exports.PreviewServerConnectionCtx.Provider, { value: state, children: children }));
+    return ((0, jsx_runtime_1.jsx)(exports.StudioServerConnectionCtx.Provider, { value: state, children: children }));
 };
 exports.PreviewServerConnection = PreviewServerConnection;

package/dist/editor/helpers/colors.d.ts

@@ -3,7 +3,7 @@ export declare const INPUT_BACKGROUND = "#2f363d";
 export declare const BORDER_COLOR = "#000";
 export declare const LIGHT_COLOR = "#ddd";
 export declare const SELECTED_BACKGROUND = "hsla(0, 0%, 100%, 0.15)";
-export declare const LIGHT_TEXT = "rgba(255, 255, 255, 0.6)";
+export declare const LIGHT_TEXT = "#A6A7A9";
 export declare const VERY_LIGHT_TEXT = "rgba(255, 255, 255, 0.3)";
 export declare const CLEAR_HOVER = "rgba(255, 255, 255, 0.06)";
 export declare const INPUT_BORDER_COLOR_UNHOVERED = "rgba(0, 0, 0, 0.6)";
@@ -11,7 +11,9 @@ export declare const INPUT_BORDER_COLOR_HOVERED = "rgba(255, 255, 255, 0.05)";
 export declare const TIMELINE_BACKGROUND = "#111";
 export declare const FAIL_COLOR = "#ff3232";
 export declare const WARNING_COLOR = "#f1c40f";
+export declare const BLUE = "#0b84f3";
+export declare const BLUE_DISABLED = "#284f73";
 export declare const getBackgroundFromHoverState: ({ selected, hovered, }: {
     selected: boolean;
     hovered: boolean;
-}) => "transparent" | "hsla(0, 0%, 100%, 0.15)" | "hsla(0, 0%, 100%, 0.25)" | "rgba(255, 255, 255, 0.06)";
+}) => "transparent" | "hsla(0, 0%, 100%, 0.15)" | "rgba(255, 255, 255, 0.06)" | "hsla(0, 0%, 100%, 0.25)";

package/dist/editor/helpers/colors.js

@@ -1,12 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getBackgroundFromHoverState = exports.WARNING_COLOR = exports.FAIL_COLOR = exports.TIMELINE_BACKGROUND = exports.INPUT_BORDER_COLOR_HOVERED = exports.INPUT_BORDER_COLOR_UNHOVERED = exports.CLEAR_HOVER = exports.VERY_LIGHT_TEXT = exports.LIGHT_TEXT = exports.SELECTED_BACKGROUND = exports.LIGHT_COLOR = exports.BORDER_COLOR = exports.INPUT_BACKGROUND = exports.BACKGROUND = void 0;
+exports.getBackgroundFromHoverState = exports.BLUE_DISABLED = exports.BLUE = exports.WARNING_COLOR = exports.FAIL_COLOR = exports.TIMELINE_BACKGROUND = exports.INPUT_BORDER_COLOR_HOVERED = exports.INPUT_BORDER_COLOR_UNHOVERED = exports.CLEAR_HOVER = exports.VERY_LIGHT_TEXT = exports.LIGHT_TEXT = exports.SELECTED_BACKGROUND = exports.LIGHT_COLOR = exports.BORDER_COLOR = exports.INPUT_BACKGROUND = exports.BACKGROUND = void 0;
 exports.BACKGROUND = '#1f2428';
 exports.INPUT_BACKGROUND = '#2f363d';
 exports.BORDER_COLOR = '#000';
 exports.LIGHT_COLOR = '#ddd';
 exports.SELECTED_BACKGROUND = 'hsla(0, 0%, 100%, 0.15)';
-exports.LIGHT_TEXT = 'rgba(255, 255, 255, 0.6)';
+exports.LIGHT_TEXT = '#A6A7A9';
 exports.VERY_LIGHT_TEXT = 'rgba(255, 255, 255, 0.3)';
 const SELECTED_HOVER_BACKGROUND = 'hsla(0, 0%, 100%, 0.25)';
 exports.CLEAR_HOVER = 'rgba(255, 255, 255, 0.06)';
@@ -15,6 +15,8 @@ exports.INPUT_BORDER_COLOR_HOVERED = 'rgba(255, 255, 255, 0.05)';
 exports.TIMELINE_BACKGROUND = '#111';
 exports.FAIL_COLOR = '#ff3232';
 exports.WARNING_COLOR = '#f1c40f';
+exports.BLUE = '#0b84f3';
+exports.BLUE_DISABLED = '#284f73';
 const getBackgroundFromHoverState = ({ selected, hovered, }) => {
     if (selected) {
         if (hovered) {

package/dist/editor/helpers/get-timeline-sequence-layout.d.ts

@@ -1,11 +1,11 @@
-import type { AnyComposition } from 'remotion';
+import type { VideoConfig } from 'remotion';
 export declare const SEQUENCE_BORDER_WIDTH = 1;
 export declare const getTimelineSequenceLayout: ({ durationInFrames, startFrom, maxMediaDuration, startFromMedia, video, windowWidth, }: {
     durationInFrames: number;
     startFrom: number;
     startFromMedia: number;
     maxMediaDuration: number | null;
-    video: AnyComposition;
+    video: VideoConfig;
     windowWidth: number;
 }) => {
     marginLeft: number;

package/dist/editor/helpers/is-composition-still.d.ts

@@ -1,2 +1,3 @@
-import type { AnyComposition } from 'remotion';
-export declare const isCompositionStill: (comp: AnyComposition | null) => boolean;
+export declare const isCompositionStill: (comp: {
+    durationInFrames: number;
+} | null) => boolean;

package/dist/editor/helpers/is-current-selected-still.js

@@ -5,12 +5,11 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const is_composition_still_1 = require("./is-composition-still");
 const useIsStill = () => {
-    const { compositions, currentComposition } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
-    const selected = (0, react_1.useMemo)(() => compositions.find((c) => c.id === currentComposition), [compositions, currentComposition]);
-    if (!selected) {
+    const resolved = remotion_1.Internals.useResolvedVideoConfig(null);
+    if (!resolved || resolved.type !== 'success') {
         return false;
     }
-    return (0, is_composition_still_1.isCompositionStill)(selected);
+    return (0, is_composition_still_1.isCompositionStill)(resolved.result);
 };
 exports.useIsStill = useIsStill;
 const useDimensions = () => {

package/dist/editor/helpers/use-file-existence.js

@@ -7,7 +7,7 @@ const actions_1 = require("../components/RenderQueue/actions");
 const client_id_1 = require("./client-id");
 const useFileExistence = (outName) => {
     const [exists, setExists] = (0, react_1.useState)(false);
-    const state = (0, react_1.useContext)(client_id_1.PreviewServerConnectionCtx);
+    const state = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const clientId = state.type === 'connected' ? state.clientId : undefined;
     const currentOutName = (0, react_1.useRef)('');
     currentOutName.current = outName;

package/dist/editor/helpers/use-menu-structure.js

@@ -33,7 +33,7 @@ const useMenuStructure = (closeMenu) => {
     const { checkerboard, setCheckerboard } = (0, react_1.useContext)(checkerboard_1.CheckerboardContext);
     const { editorZoomGestures, setEditorZoomGestures } = (0, react_1.useContext)(editor_zoom_gestures_1.EditorZoomGesturesContext);
     const { size, setSize } = (0, react_1.useContext)(preview_size_1.PreviewSizeContext);
-    const { type } = (0, react_1.useContext)(client_id_1.PreviewServerConnectionCtx);
+    const { type } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { setSidebarCollapsedState, sidebarCollapsedStateLeft, sidebarCollapsedStateRight, } = (0, react_1.useContext)(sidebar_1.SidebarContext);
     const sizes = (0, SizeSelector_1.getUniqueSizes)(size);
     const structure = (0, react_1.useMemo)(() => {

package/dist/editor/icons/media-volume.js

@@ -2,9 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VolumeOnIcon = exports.VolumeOffIcon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../helpers/colors");
 const size = 25;
 const VolumeOffIcon = () => {
-    return ((0, jsx_runtime_1.jsx)("svg", { width: size, height: size, viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { d: "M3.63 3.63a.996.996 0 000 1.41L7.29 8.7 7 9H4c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1h3l3.29 3.29c.63.63 1.71.18 1.71-.71v-4.17l4.18 4.18c-.49.37-1.02.68-1.6.91-.36.15-.58.53-.58.92 0 .72.73 1.18 1.39.91.8-.33 1.55-.77 2.22-1.31l1.34 1.34a.996.996 0 101.41-1.41L5.05 3.63c-.39-.39-1.02-.39-1.42 0zM19 12c0 .82-.15 1.61-.41 2.34l1.53 1.53c.56-1.17.88-2.48.88-3.87 0-3.83-2.4-7.11-5.78-8.4-.59-.23-1.22.23-1.22.86v.19c0 .38.25.71.61.85C17.18 6.54 19 9.06 19 12zm-8.71-6.29l-.17.17L12 7.76V6.41c0-.89-1.08-1.33-1.71-.7zM16.5 12A4.5 4.5 0 0014 7.97v1.79l2.48 2.48c.01-.08.02-.16.02-.24z", fill: "var(--blue)" }) }));
+    return ((0, jsx_runtime_1.jsx)("svg", { width: size, height: size, viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { d: "M3.63 3.63a.996.996 0 000 1.41L7.29 8.7 7 9H4c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1h3l3.29 3.29c.63.63 1.71.18 1.71-.71v-4.17l4.18 4.18c-.49.37-1.02.68-1.6.91-.36.15-.58.53-.58.92 0 .72.73 1.18 1.39.91.8-.33 1.55-.77 2.22-1.31l1.34 1.34a.996.996 0 101.41-1.41L5.05 3.63c-.39-.39-1.02-.39-1.42 0zM19 12c0 .82-.15 1.61-.41 2.34l1.53 1.53c.56-1.17.88-2.48.88-3.87 0-3.83-2.4-7.11-5.78-8.4-.59-.23-1.22.23-1.22.86v.19c0 .38.25.71.61.85C17.18 6.54 19 9.06 19 12zm-8.71-6.29l-.17.17L12 7.76V6.41c0-.89-1.08-1.33-1.71-.7zM16.5 12A4.5 4.5 0 0014 7.97v1.79l2.48 2.48c.01-.08.02-.16.02-.24z", fill: colors_1.BLUE }) }));
 };
 exports.VolumeOffIcon = VolumeOffIcon;
 const VolumeOnIcon = () => {

package/dist/editor/icons/render.d.ts

@@ -5,4 +5,5 @@ export declare const RenderIcon: React.FC<{
 }>;
 export declare const ThinRenderIcon: React.FC<{
     svgProps: SVGProps<SVGSVGElement>;
+    fill: string;
 }>;

package/dist/editor/icons/render.js

@@ -7,6 +7,6 @@ const RenderIcon = (props) => {
 };
 exports.RenderIcon = RenderIcon;
 const ThinRenderIcon = (props) => {
-    return ((0, jsx_runtime_1.jsx)("svg", { ...props.svgProps, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", children: (0, jsx_runtime_1.jsx)("path", { fill: 'currentColor', d: "M188.9 372l-50.4-50.4c18.6-42.6 61.7-137.7 95.1-187C304.6 30.1 409 24.6 475.7 36.3c11.7 66.7 6.2 171.1-98.4 242c-49.4 33.5-145.5 75.6-188.4 93.7zm-79.9-62.8c-5.2 11.9-2.5 25.7 6.7 34.9l50.7 50.7c9.1 9.1 22.7 11.9 34.5 6.9c6.5-2.7 14.3-6 23-9.8L224 496c0 5.5 2.9 10.7 7.6 13.6s10.6 3.2 15.6 .7l101.5-50.7c21.7-10.8 35.4-33 35.4-57.2V312.1c4-2.5 7.7-4.9 11.3-7.3C516.1 222.9 520.1 100.9 506.7 28.1c-2.1-11.6-11.2-20.6-22.8-22.8C411.1-8.1 289.1-4.1 207.2 116.7c-2.4 3.6-4.9 7.3-7.3 11.3l-90.2 0c-24.2 0-46.4 13.7-57.2 35.4L1.7 264.8c-2.5 5-2.2 10.8 .7 15.6s8.1 7.6 13.6 7.6H118.5c-3.6 8-6.8 15.2-9.4 21.2zM256 470.1l0-92.5c30.3-13.7 65.4-30.3 96-47v71.7c0 12.1-6.8 23.2-17.7 28.6L256 470.1zM109.7 160h71.5c-16.9 30.7-34 65.8-48.1 96H41.9L81 177.7c5.4-10.8 16.5-17.7 28.6-17.7zM392 144a24 24 0 1 1 -48 0 24 24 0 1 1 48 0zM368 88a56 56 0 1 0 0 112 56 56 0 1 0 0-112z" }) }));
+    return ((0, jsx_runtime_1.jsx)("svg", { ...props.svgProps, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", children: (0, jsx_runtime_1.jsx)("path", { fill: props.fill, d: "M188.9 372l-50.4-50.4c18.6-42.6 61.7-137.7 95.1-187C304.6 30.1 409 24.6 475.7 36.3c11.7 66.7 6.2 171.1-98.4 242c-49.4 33.5-145.5 75.6-188.4 93.7zm-79.9-62.8c-5.2 11.9-2.5 25.7 6.7 34.9l50.7 50.7c9.1 9.1 22.7 11.9 34.5 6.9c6.5-2.7 14.3-6 23-9.8L224 496c0 5.5 2.9 10.7 7.6 13.6s10.6 3.2 15.6 .7l101.5-50.7c21.7-10.8 35.4-33 35.4-57.2V312.1c4-2.5 7.7-4.9 11.3-7.3C516.1 222.9 520.1 100.9 506.7 28.1c-2.1-11.6-11.2-20.6-22.8-22.8C411.1-8.1 289.1-4.1 207.2 116.7c-2.4 3.6-4.9 7.3-7.3 11.3l-90.2 0c-24.2 0-46.4 13.7-57.2 35.4L1.7 264.8c-2.5 5-2.2 10.8 .7 15.6s8.1 7.6 13.6 7.6H118.5c-3.6 8-6.8 15.2-9.4 21.2zM256 470.1l0-92.5c30.3-13.7 65.4-30.3 96-47v71.7c0 12.1-6.8 23.2-17.7 28.6L256 470.1zM109.7 160h71.5c-16.9 30.7-34 65.8-48.1 96H41.9L81 177.7c5.4-10.8 16.5-17.7 28.6-17.7zM392 144a24 24 0 1 1 -48 0 24 24 0 1 1 48 0zM368 88a56 56 0 1 0 0 112 56 56 0 1 0 0-112z" }) }));
 };
 exports.ThinRenderIcon = ThinRenderIcon;

package/dist/editor/state/modals.d.ts

@@ -35,7 +35,9 @@ export declare type RenderModalState = {
     initialHeadless: boolean;
     minConcurrency: number;
     maxConcurrency: number;
-    defaultProps: unknown;
+    defaultProps: Record<string, unknown>;
+    inFrameMark: number | null;
+    outFrameMark: number | null;
 };
 export declare type ModalState = {
     type: 'new-comp';

package/dist/entry-point.js

@@ -5,20 +5,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.findEntryPoint = void 0;
 const renderer_1 = require("@remotion/renderer");
-const fs_1 = require("fs");
-const path_1 = __importDefault(require("path"));
+const node_fs_1 = require("node:fs");
+const node_path_1 = __importDefault(require("node:path"));
 const config_1 = require("./config");
 const log_1 = require("./log");
 const candidates = [
-    path_1.default.join('src', 'index.ts'),
-    path_1.default.join('src', 'index.tsx'),
-    path_1.default.join('src', 'index.js'),
-    path_1.default.join('remotion', 'index.tsx'),
-    path_1.default.join('remotion', 'index.ts'),
-    path_1.default.join('remotion', 'index.js'),
+    node_path_1.default.join('src', 'index.ts'),
+    node_path_1.default.join('src', 'index.tsx'),
+    node_path_1.default.join('src', 'index.js'),
+    node_path_1.default.join('remotion', 'index.tsx'),
+    node_path_1.default.join('remotion', 'index.ts'),
+    node_path_1.default.join('remotion', 'index.js'),
 ];
 const findCommonPath = (remotionRoot) => {
-    return candidates.find((candidate) => (0, fs_1.existsSync)(path_1.default.resolve(remotionRoot, candidate)));
+    return candidates.find((candidate) => (0, node_fs_1.existsSync)(node_path_1.default.resolve(remotionRoot, candidate)));
 };
 const findEntryPoint = (args, remotionRoot) => {
     const result = findEntryPointInner(args, remotionRoot);
@@ -28,10 +28,10 @@ const findEntryPoint = (args, remotionRoot) => {
     if (renderer_1.RenderInternals.isServeUrl(result.file)) {
         return result;
     }
-    if (!(0, fs_1.existsSync)(result.file)) {
+    if (!(0, node_fs_1.existsSync)(result.file)) {
         throw new Error(`${result.file} was chosen as the entry point (reason = ${result.reason}) but it does not exist.`);
     }
-    if ((0, fs_1.lstatSync)(result.file).isDirectory()) {
+    if ((0, node_fs_1.lstatSync)(result.file).isDirectory()) {
         throw new Error(`${result.file} was chosen as the entry point (reason = ${result.reason}) but it is a directory - it needs to be a file.`);
     }
     return result;
@@ -42,10 +42,10 @@ const findEntryPointInner = (args, remotionRoot) => {
     let file = args[0];
     if (file) {
         log_1.Log.verbose('Checking if', file, 'is the entry file');
-        const cwdResolution = path_1.default.resolve(process.cwd(), file);
-        const remotionRootResolution = path_1.default.resolve(remotionRoot, file);
+        const cwdResolution = node_path_1.default.resolve(process.cwd(), file);
+        const remotionRootResolution = node_path_1.default.resolve(remotionRoot, file);
         // Checking if file was found in CWD
-        if ((0, fs_1.existsSync)(cwdResolution)) {
+        if ((0, node_fs_1.existsSync)(cwdResolution)) {
             return {
                 file: cwdResolution,
                 remainingArgs: args.slice(1),
@@ -53,7 +53,7 @@ const findEntryPointInner = (args, remotionRoot) => {
             };
         }
         // Checking if file was found in remotion root
-        if ((0, fs_1.existsSync)(remotionRootResolution)) {
+        if ((0, node_fs_1.existsSync)(remotionRootResolution)) {
             return {
                 file: remotionRootResolution,
                 remainingArgs: args.slice(1),
@@ -69,7 +69,7 @@ const findEntryPointInner = (args, remotionRoot) => {
     if (file) {
         log_1.Log.verbose('Entry point from config file is', file);
         return {
-            file: path_1.default.resolve(remotionRoot, file),
+            file: node_path_1.default.resolve(remotionRoot, file),
             remainingArgs: args,
             reason: 'config file',
         };
@@ -77,7 +77,7 @@ const findEntryPointInner = (args, remotionRoot) => {
     // 3rd priority: Common paths
     const found = findCommonPath(remotionRoot);
     if (found) {
-        const absolutePath = path_1.default.resolve(remotionRoot, found);
+        const absolutePath = node_path_1.default.resolve(remotionRoot, found);
         log_1.Log.verbose('Selected', absolutePath, 'as the entry point because file exists and is a common entry point and no entry point was explicitly selected');
         return {
             file: absolutePath,

package/dist/event-source-events.d.ts

@@ -9,6 +9,8 @@ export declare type EventSourceEvent = {
 } | {
     type: 'new-env-variables';
     newEnvVariables: Record<string, string>;
+} | {
+    type: 'root-file-changed';
 } | {
     type: 'render-queue-updated';
     queue: RenderJob[];

package/dist/event-source.js

@@ -23,7 +23,7 @@ const openEventSource = () => {
             window.location.reload();
         }
         if (newEvent.type === 'init') {
-            (_a = client_id_1.previewServerConnectionRef.current) === null || _a === void 0 ? void 0 : _a.set({
+            (_a = client_id_1.studioServerConnectionRef.current) === null || _a === void 0 ? void 0 : _a.set({
                 type: 'connected',
                 clientId: newEvent.clientId,
             });
@@ -46,7 +46,7 @@ const openEventSource = () => {
     source.addEventListener('open', () => {
         source.addEventListener('error', () => {
             var _a;
-            (_a = client_id_1.previewServerConnectionRef.current) === null || _a === void 0 ? void 0 : _a.set({ type: 'disconnected' });
+            (_a = client_id_1.studioServerConnectionRef.current) === null || _a === void 0 ? void 0 : _a.set({ type: 'disconnected' });
             // Display an error message that the preview server has disconnected.
             source === null || source === void 0 ? void 0 : source.close();
             // Retry later

package/dist/ffmpeg.js

@@ -2,18 +2,27 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ffprobeCommand = exports.ffmpegCommand = void 0;
 const renderer_1 = require("@remotion/renderer");
-const child_process_1 = require("child_process");
+const node_child_process_1 = require("node:child_process");
+const node_fs_1 = require("node:fs");
 const ffmpegCommand = (_root, args) => {
-    const done = (0, child_process_1.spawnSync)(renderer_1.RenderInternals.getExecutablePath('ffmpeg'), args, {
-        ...renderer_1.RenderInternals.callFfExtraOptions(),
+    const binary = renderer_1.RenderInternals.getExecutablePath('ffmpeg');
+    if (!process.env.READ_ONLY_FS) {
+        (0, node_fs_1.chmodSync)(binary, 0o755);
+    }
+    const done = (0, node_child_process_1.spawnSync)(binary, args, {
+        ...renderer_1.RenderInternals.dynamicLibraryPathOptions(),
         stdio: 'inherit',
     });
     process.exit(done.status);
 };
 exports.ffmpegCommand = ffmpegCommand;
 const ffprobeCommand = (_root, args) => {
-    const done = (0, child_process_1.spawnSync)(renderer_1.RenderInternals.getExecutablePath('ffprobe'), args, {
-        ...renderer_1.RenderInternals.callFfExtraOptions(),
+    const binary = renderer_1.RenderInternals.getExecutablePath('ffprobe');
+    if (!process.env.READ_ONLY_FS) {
+        (0, node_fs_1.chmodSync)(binary, 0o755);
+    }
+    const done = (0, node_child_process_1.spawnSync)(binary, args, {
+        ...renderer_1.RenderInternals.dynamicLibraryPathOptions(),
         stdio: 'inherit',
     });
     process.exit(done.status);

package/dist/file-watcher.js

@@ -4,12 +4,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.installFileWatcher = void 0;
-const fs_1 = __importDefault(require("fs"));
+const node_fs_1 = __importDefault(require("node:fs"));
 const installFileWatcher = ({ file, onChange, }) => {
-    const existedAtBeginning = fs_1.default.existsSync(file);
+    const existedAtBeginning = node_fs_1.default.existsSync(file);
     let existedBefore = existedAtBeginning;
     const listener = () => {
-        const existsNow = fs_1.default.existsSync(file);
+        const existsNow = node_fs_1.default.existsSync(file);
         if (!existedBefore && existsNow) {
             onChange('created');
             existedBefore = true;
@@ -24,11 +24,11 @@ const installFileWatcher = ({ file, onChange, }) => {
             onChange('changed');
         }
     };
-    fs_1.default.watchFile(file, { interval: 100 }, listener);
+    node_fs_1.default.watchFile(file, { interval: 100 }, listener);
     return {
         exists: existedAtBeginning,
         unwatch: () => {
-            fs_1.default.unwatchFile(file, listener);
+            node_fs_1.default.unwatchFile(file, listener);
         },
     };
 };