@remotion/studio 4.0.428 → 4.0.430

package/dist/components/Timeline/TimelineSchemaField.js

@@ -0,0 +1,106 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineFieldSavingSpinner = exports.TimelineFieldValue = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Checkbox_1 = require("../Checkbox");
+const InputDragger_1 = require("../NewComposition/InputDragger");
+const Spinner_1 = require("../Spinner");
+const unsupportedLabel = {
+    color: 'rgba(255, 255, 255, 0.4)',
+    fontSize: 12,
+    marginLeft: 'auto',
+    fontStyle: 'italic',
+};
+const draggerStyle = {
+    width: 80,
+    marginLeft: 'auto',
+};
+const checkboxContainer = {
+    marginLeft: 'auto',
+};
+const notEditableBackground = {
+    backgroundColor: 'rgba(255, 0, 0, 0.2)',
+    borderRadius: 3,
+    padding: '0 4px',
+};
+const TimelineNumberField = ({ field, codeValue, canUpdate, onSave, onDragValueChange, onDragEnd }) => {
+    var _a, _b, _c;
+    const [dragValue, setDragValue] = (0, react_1.useState)(null);
+    const dragging = (0, react_1.useRef)(false);
+    const onValueChange = (0, react_1.useCallback)((newVal) => {
+        dragging.current = true;
+        setDragValue(newVal);
+        onDragValueChange(field.key, newVal);
+    }, [onDragValueChange, field.key]);
+    (0, react_1.useEffect)(() => {
+        setDragValue(null);
+        onDragEnd();
+    }, [field.currentValue, onDragEnd]);
+    const onValueChangeEnd = (0, react_1.useCallback)((newVal) => {
+        if (canUpdate && newVal !== codeValue) {
+            onSave(field.key, newVal).catch(() => {
+                setDragValue(null);
+            });
+        }
+        else {
+            setDragValue(null);
+        }
+    }, [canUpdate, onSave, field.key, codeValue]);
+    const onTextChange = (0, react_1.useCallback)((newVal) => {
+        if (canUpdate) {
+            const parsed = Number(newVal);
+            if (!Number.isNaN(parsed) && parsed !== codeValue) {
+                setDragValue(parsed);
+                onSave(field.key, parsed).catch(() => {
+                    setDragValue(null);
+                });
+            }
+        }
+    }, [canUpdate, onSave, field.key, codeValue]);
+    return (jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragValue !== null && dragValue !== void 0 ? dragValue : codeValue, style: draggerStyle, status: "ok", onValueChange: onValueChange, onValueChangeEnd: onValueChangeEnd, onTextChange: onTextChange, min: field.fieldSchema.type === 'number'
+            ? ((_a = field.fieldSchema.min) !== null && _a !== void 0 ? _a : -Infinity)
+            : -Infinity, max: field.fieldSchema.type === 'number'
+            ? ((_b = field.fieldSchema.max) !== null && _b !== void 0 ? _b : Infinity)
+            : Infinity, step: field.fieldSchema.type === 'number' ? ((_c = field.fieldSchema.step) !== null && _c !== void 0 ? _c : 1) : 1, rightAlign: true }));
+};
+const TimelineBooleanField = ({ field, codeValue, canUpdate, onSave }) => {
+    const checked = Boolean(codeValue);
+    const onChange = (0, react_1.useCallback)(() => {
+        if (canUpdate) {
+            onSave(field.key, !checked);
+        }
+    }, [canUpdate, onSave, field.key, checked]);
+    return (jsx_runtime_1.jsx("div", { style: checkboxContainer, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: checked, onChange: onChange, name: field.key, disabled: !canUpdate }) }));
+};
+const TimelineFieldValue = ({ field, onSave, onDragValueChange, onDragEnd, propStatus, canUpdate }) => {
+    var _a, _b;
+    const wrapperStyle = canUpdate === null || canUpdate === false
+        ? notEditableBackground
+        : undefined;
+    if (!field.supported) {
+        return jsx_runtime_1.jsx("span", { style: unsupportedLabel, children: "unsupported" });
+    }
+    if (propStatus !== null && !propStatus.canUpdate) {
+        return jsx_runtime_1.jsx("span", { style: unsupportedLabel, children: propStatus.reason });
+    }
+    if (propStatus === null) {
+        return (jsx_runtime_1.jsx("span", { style: { ...notEditableBackground }, children: jsx_runtime_1.jsx("span", { style: unsupportedLabel, children: "error" }) }));
+    }
+    const effectiveCodeValue = (_b = (_a = propStatus.codeValue) !== null && _a !== void 0 ? _a : field.currentValue) !== null && _b !== void 0 ? _b : field.fieldSchema.default;
+    if (field.typeName === 'number') {
+        return (jsx_runtime_1.jsx("span", { style: wrapperStyle, children: jsx_runtime_1.jsx(TimelineNumberField, { field: field, codeValue: effectiveCodeValue, canUpdate: canUpdate, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd }) }));
+    }
+    if (field.typeName === 'boolean') {
+        return (jsx_runtime_1.jsx("span", { style: wrapperStyle, children: jsx_runtime_1.jsx(TimelineBooleanField, { field: field, codeValue: effectiveCodeValue, canUpdate: canUpdate, onSave: onSave }) }));
+    }
+    return (jsx_runtime_1.jsx("span", { style: { ...unsupportedLabel, fontStyle: 'normal' }, children: String(effectiveCodeValue) }));
+};
+exports.TimelineFieldValue = TimelineFieldValue;
+const TimelineFieldSavingSpinner = ({ saving }) => {
+    if (!saving) {
+        return null;
+    }
+    return jsx_runtime_1.jsx(Spinner_1.Spinner, { duration: 0.5, size: 12 });
+};
+exports.TimelineFieldSavingSpinner = TimelineFieldSavingSpinner;

package/dist/components/Timeline/TimelineSequenceFrame.js

@@ -7,6 +7,7 @@ const relativeFrameStyle = {
     fontFamily: 'Arial, Helvetica, sans-serif',
     color: 'white',
     opacity: 0.5,
+    whiteSpace: 'nowrap',
 };
 const TimelineSequenceFrame = ({ roundedFrame, premounted, postmounted }) => {
     return (jsx_runtime_1.jsx("div", { style: relativeFrameStyle, children: premounted

package/dist/components/Timeline/TimelineSlider.js

@@ -5,10 +5,10 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const get_left_of_timeline_slider_1 = require("../../helpers/get-left-of-timeline-slider");
-const TimelineSliderHandle_1 = require("./TimelineSliderHandle");
-const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
 const imperative_state_1 = require("./imperative-state");
 const timeline_refs_1 = require("./timeline-refs");
+const TimelineSliderHandle_1 = require("./TimelineSliderHandle");
+const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
 const container = {
     position: 'absolute',
     bottom: 0,

package/dist/components/Timeline/TimelineStack/index.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
 import type { TSequence } from 'remotion';
+import type { OriginalPosition } from '../../../error-overlay/react-overlay/utils/get-source-map';
 export declare const TimelineStack: React.FC<{
     readonly isCompact: boolean;
     readonly sequence: TSequence;
+    readonly originalLocation: OriginalPosition | null;
 }>;

package/dist/components/Timeline/TimelineStack/index.js

@@ -11,10 +11,9 @@ const get_git_menu_item_1 = require("../../../helpers/get-git-menu-item");
 const open_in_editor_1 = require("../../../helpers/open-in-editor");
 const url_state_1 = require("../../../helpers/url-state");
 const InitialCompositionLoader_1 = require("../../InitialCompositionLoader");
+const layout_1 = require("../../layout");
 const NotificationCenter_1 = require("../../Notifications/NotificationCenter");
 const Spinner_1 = require("../../Spinner");
-const layout_1 = require("../../layout");
-const get_stack_1 = require("./get-stack");
 const source_attribution_1 = require("./source-attribution");
 const publicPath = window.remotion_publicPath === '/' ? '' : window.remotion_publicPath;
 const withoutSlashInTheEnd = publicPath.endsWith('/')
@@ -24,8 +23,7 @@ const withoutSlashInTheEnd = publicPath.endsWith('/')
 source_map_1.SourceMapConsumer.initialize({
     'lib/mappings.wasm': withoutSlashInTheEnd + studio_shared_1.SOURCE_MAP_ENDPOINT,
 });
-const TimelineStack = ({ isCompact, sequence }) => {
-    const [originalLocation, setOriginalLocation] = (0, react_1.useState)(null);
+const TimelineStack = ({ isCompact, sequence, originalLocation }) => {
     const [stackHovered, setStackHovered] = (0, react_1.useState)(false);
     const [titleHovered, setTitleHovered] = (0, react_1.useState)(false);
     const [opening, setOpening] = (0, react_1.useState)(false);
@@ -107,19 +105,6 @@ const TimelineStack = ({ isCompact, sequence }) => {
             window.open((0, get_git_menu_item_1.getGitRefUrl)(window.remotion_gitSource, originalLocation), '_blank');
         }
     }, [canOpenInEditor, canOpenInGitHub, openEditor, originalLocation]);
-    (0, react_1.useEffect)(() => {
-        if (!sequence.stack) {
-            return;
-        }
-        (0, get_stack_1.getOriginalLocationFromStack)(sequence.stack, 'sequence')
-            .then((frame) => {
-            setOriginalLocation(frame);
-        })
-            .catch((err) => {
-            // eslint-disable-next-line no-console
-            console.error('Could not get original location of Sequence', err);
-        });
-    }, [sequence.stack]);
     const onStackPointerEnter = (0, react_1.useCallback)(() => {
         setStackHovered(true);
     }, []);

package/dist/components/Timeline/TimelineTimeIndicators.js

@@ -9,9 +9,9 @@ const timeline_layout_1 = require("../../helpers/timeline-layout");
 const render_frame_1 = require("../../state/render-frame");
 const SplitterHandle_1 = require("../Splitter/SplitterHandle");
 const TimeValue_1 = require("../TimeValue");
-const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
 const timeline_refs_1 = require("./timeline-refs");
 const timeline_scroll_logic_1 = require("./timeline-scroll-logic");
+const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
 exports.TIMELINE_TIME_INDICATOR_HEIGHT = 39;
 const container = {
     height: exports.TIMELINE_TIME_INDICATOR_HEIGHT - 4,

package/dist/components/Timeline/TimelineTracks.js

@@ -3,12 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineTracks = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const client_id_1 = require("../../helpers/client-id");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
+const is_collapsed_1 = require("./is-collapsed");
 const MaxTimelineTracks_1 = require("./MaxTimelineTracks");
 const TimelineSequence_1 = require("./TimelineSequence");
 const TimelineTimeIndicators_1 = require("./TimelineTimeIndicators");
-const is_collapsed_1 = require("./is-collapsed");
 const content = {
     paddingLeft: timeline_layout_1.TIMELINE_PADDING,
     paddingRight: timeline_layout_1.TIMELINE_PADDING,
@@ -17,12 +18,14 @@ const content = {
 const timelineContent = {
     minHeight: '100%',
 };
-const expandedPlaceholder = {
-    height: timeline_layout_1.TIMELINE_TRACK_EXPANDED_HEIGHT + timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM,
-};
+const getExpandedPlaceholderStyle = (controls) => ({
+    height: (0, timeline_layout_1.getExpandedTrackHeight)(controls) + timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM,
+});
 const TimelineTracks = ({ timeline, hasBeenCut }) => {
     const { expandedTracks } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksContext);
-    const visualModeEnabled = Boolean(process.env.EXPERIMENTAL_VISUAL_MODE_ENABLED);
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const visualModeEnabled = Boolean(process.env.EXPERIMENTAL_VISUAL_MODE_ENABLED) &&
+        previewServerState.type === 'connected';
     const timelineStyle = (0, react_1.useMemo)(() => {
         return {
             ...timelineContent,
@@ -41,7 +44,7 @@ const TimelineTracks = ({ timeline, hasBeenCut }) => {
                                 jsx_runtime_1.jsx("div", { style: {
                                         height: (0, timeline_layout_1.getTimelineLayerHeight)(track.sequence.type === 'video' ? 'video' : 'other'),
                                         marginBottom: timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM,
-                                    }, children: jsx_runtime_1.jsx(TimelineSequence_1.TimelineSequence, { s: track.sequence }) }), visualModeEnabled && isExpanded ? (jsx_runtime_1.jsx("div", { style: expandedPlaceholder })) : null] }, track.sequence.id));
+                                    }, children: jsx_runtime_1.jsx(TimelineSequence_1.TimelineSequence, { s: track.sequence }) }), visualModeEnabled && isExpanded ? (jsx_runtime_1.jsx("div", { style: getExpandedPlaceholderStyle(track.sequence.controls) })) : null] }, track.sequence.id));
                     })] }), hasBeenCut ? jsx_runtime_1.jsx(MaxTimelineTracks_1.MaxTimelineTracksReached, {}) : null] }));
 };
 exports.TimelineTracks = TimelineTracks;

package/dist/components/Timeline/TimelineVideoInfo.js

@@ -213,47 +213,62 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore,
             },
             src,
             onVideoSample: (sample) => {
-                const frame = sample.toVideoFrame();
-                const scale = (HEIGHT / frame.displayHeight) * window.devicePixelRatio;
-                const transformed = (0, resize_video_frame_1.resizeVideoFrame)({
-                    frame,
-                    scale,
-                });
-                if (transformed !== frame) {
-                    frame.close();
+                let frame;
+                try {
+                    frame = sample.toVideoFrame();
+                    const scale = (HEIGHT / frame.displayHeight) * window.devicePixelRatio;
+                    const transformed = (0, resize_video_frame_1.resizeVideoFrame)({
+                        frame,
+                        scale,
+                    });
+                    if (transformed !== frame) {
+                        frame.close();
+                    }
+                    frame = undefined;
+                    const databaseKey = (0, frame_database_1.makeFrameDatabaseKey)(src, transformed.timestamp);
+                    const existingFrame = frame_database_1.frameDatabase.get(databaseKey);
+                    if (existingFrame) {
+                        existingFrame.frame.close();
+                    }
+                    frame_database_1.frameDatabase.set(databaseKey, {
+                        frame: transformed,
+                        lastUsed: Date.now(),
+                    });
+                    if (aspectRatio.current === null) {
+                        throw new Error('Aspect ratio is not set');
+                    }
+                    ensureSlots({
+                        filledSlots,
+                        fromSeconds,
+                        toSeconds,
+                        naturalWidth,
+                        aspectRatio: aspectRatio.current,
+                    });
+                    fillFrameWhereItFits({
+                        ctx,
+                        filledSlots,
+                        visualizationWidth: naturalWidth,
+                        frame: transformed,
+                        segmentDuration: toSeconds - fromSeconds,
+                        fromSeconds,
+                    });
                 }
-                const databaseKey = (0, frame_database_1.makeFrameDatabaseKey)(src, transformed.timestamp);
-                const existingFrame = frame_database_1.frameDatabase.get(databaseKey);
-                if (existingFrame) {
-                    existingFrame.frame.close();
+                catch (e) {
+                    if (frame) {
+                        frame.close();
+                    }
+                    throw e;
                 }
-                frame_database_1.frameDatabase.set(databaseKey, {
-                    frame: transformed,
-                    lastUsed: Date.now(),
-                });
-                if (aspectRatio.current === null) {
-                    throw new Error('Aspect ratio is not set');
+                finally {
+                    sample.close();
                 }
-                ensureSlots({
-                    filledSlots,
-                    fromSeconds,
-                    toSeconds,
-                    naturalWidth,
-                    aspectRatio: aspectRatio.current,
-                });
-                fillFrameWhereItFits({
-                    ctx,
-                    filledSlots,
-                    visualizationWidth: naturalWidth,
-                    frame: transformed,
-                    segmentDuration: toSeconds - fromSeconds,
-                    fromSeconds,
-                });
-                sample.close();
             },
             signal: controller.signal,
         })
             .then(() => {
+            if (controller.signal.aborted) {
+                return;
+            }
             fillWithCachedFrames({
                 ctx,
                 naturalWidth,

package/dist/components/Timeline/timeline-scroll-logic.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.zoomAndPreserveCursor = exports.getFrameFromX = exports.getFrameWhileScrollingRight = exports.getFrameIncrementFromWidth = exports.getScrollPositionForCursorOnRightEdge = exports.getScrollPositionForCursorOnLeftEdge = exports.scrollToTimelineXOffset = exports.ensureFrameIsInViewport = exports.isCursorInViewport = exports.getFrameWhileScrollingLeft = exports.canScrollTimelineIntoDirection = void 0;
 const remotion_1 = require("remotion");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
-const TimelineSlider_1 = require("./TimelineSlider");
 const timeline_refs_1 = require("./timeline-refs");
+const TimelineSlider_1 = require("./TimelineSlider");
 const canScrollTimelineIntoDirection = () => {
     const current = timeline_refs_1.scrollableRef.current;
     const { scrollWidth, scrollLeft, clientWidth } = current;

package/dist/components/UpdateModal/UpdateModal.js

@@ -7,10 +7,10 @@ const colors_1 = require("../../helpers/colors");
 const copy_text_1 = require("../../helpers/copy-text");
 const CopyButton_1 = require("../CopyButton");
 const KnownBugs_1 = require("../KnownBugs");
+const layout_1 = require("../layout");
 const ModalHeader_1 = require("../ModalHeader");
 const DismissableModal_1 = require("../NewComposition/DismissableModal");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
-const layout_1 = require("../layout");
 const container = {
     padding: 20,
     paddingTop: 0,

package/dist/components/VisualControls/VisualControlHandle.js

@@ -5,17 +5,17 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const no_react_1 = require("remotion/no-react");
 const fast_refresh_context_1 = require("../../fast-refresh-context");
-const VisualControls_1 = require("../../visual-controls/VisualControls");
 const get_current_edited_value_1 = require("../../visual-controls/get-current-edited-value");
+const VisualControls_1 = require("../../visual-controls/VisualControls");
+const get_zod_if_possible_1 = require("../get-zod-if-possible");
+const layout_1 = require("../layout");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
-const ZodSwitch_1 = require("../RenderModal/SchemaEditor/ZodSwitch");
 const extract_enum_json_paths_1 = require("../RenderModal/SchemaEditor/extract-enum-json-paths");
 const local_state_1 = require("../RenderModal/SchemaEditor/local-state");
+const ZodSwitch_1 = require("../RenderModal/SchemaEditor/ZodSwitch");
 const actions_1 = require("../RenderQueue/actions");
-const get_zod_if_possible_1 = require("../get-zod-if-possible");
-const layout_1 = require("../layout");
-const VisualControlHandleHeader_1 = require("./VisualControlHandleHeader");
 const get_original_stack_trace_1 = require("./get-original-stack-trace");
+const VisualControlHandleHeader_1 = require("./VisualControlHandleHeader");
 const VisualControlHandle = ({ value, keyName }) => {
     const z = (0, get_zod_if_possible_1.useZodIfPossible)();
     if (!z) {

package/dist/error-overlay/react-overlay/listen-to-runtime-errors.js

@@ -2,11 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getErrorRecord = void 0;
 exports.listenToRuntimeErrors = listenToRuntimeErrors;
+const url_state_1 = require("../../helpers/url-state");
 const Overlay_1 = require("../remotion-overlay/Overlay");
 const format_warning_1 = require("./effects/format-warning");
 const proxy_console_1 = require("./effects/proxy-console");
 const stack_trace_limit_1 = require("./effects/stack-trace-limit");
-const url_state_1 = require("../../helpers/url-state");
 const unhandled_error_1 = require("./effects/unhandled-error");
 const unhandled_rejection_1 = require("./effects/unhandled-rejection");
 const get_stack_frames_1 = require("./utils/get-stack-frames");

package/dist/error-overlay/remotion-overlay/CompositionIdsDropdown.js

@@ -5,8 +5,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const Button_1 = require("../../components/Button");
 const colors_1 = require("../../helpers/colors");
-const CompositionIdListItem_1 = require("./CompositionIdListItem");
 const carets_1 = require("./carets");
+const CompositionIdListItem_1 = require("./CompositionIdListItem");
 const containerStyle = {
     display: 'inline-block',
     position: 'relative',

package/dist/error-overlay/remotion-overlay/ErrorDisplay.js

@@ -4,19 +4,19 @@ exports.ErrorDisplay = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
-const is_menu_item_1 = require("../../components/Menu/is-menu-item");
 const layout_1 = require("../../components/layout");
+const is_menu_item_1 = require("../../components/Menu/is-menu-item");
 const url_state_1 = require("../../helpers/url-state");
 const AskOnDiscord_1 = require("./AskOnDiscord");
 const CalculateMetadataErrorExplainer_1 = require("./CalculateMetadataErrorExplainer");
 const CompositionIdsDropdown_1 = require("./CompositionIdsDropdown");
 const ErrorTitle_1 = require("./ErrorTitle");
+const get_help_link_1 = require("./get-help-link");
 const HelpLink_1 = require("./HelpLink");
 const OpenInEditor_1 = require("./OpenInEditor");
 const Retry_1 = require("./Retry");
 const SearchGitHubIssues_1 = require("./SearchGitHubIssues");
 const StackFrame_1 = require("./StackFrame");
-const get_help_link_1 = require("./get-help-link");
 const stack = {
     marginTop: 17,
     overflowX: 'scroll',

package/dist/error-overlay/remotion-overlay/StackFrame.js

@@ -4,8 +4,8 @@ exports.StackElement = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const Button_1 = require("../../components/Button");
-const CodeFrame_1 = require("./CodeFrame");
 const carets_1 = require("./carets");
+const CodeFrame_1 = require("./CodeFrame");
 const format_location_1 = require("./format-location");
 const location = {
     color: 'rgba(255, 255, 255, 0.6)',