@remotion/cli 4.0.0-alpha11 → 4.0.0-alpha13

package/dist/config/image-format.d.ts

@@ -2,4 +2,4 @@ import type { StillImageFormat, VideoImageFormat } from '@remotion/renderer';
 export declare const setStillImageFormat: (format: StillImageFormat) => void;
 export declare const setVideoImageFormat: (format: VideoImageFormat) => void;
 export declare const getUserPreferredStillImageFormat: () => "png" | "jpeg" | "pdf" | "webp" | undefined;
-export declare const getUserPreferredVideoImageFormat: () => "png" | "jpeg" | "none" | undefined;
+export declare const getUserPreferredVideoImageFormat: () => "none" | "png" | "jpeg" | undefined;

package/dist/config/index.d.ts

@@ -273,7 +273,7 @@ export declare const ConfigInternals: {
     getShouldOutputImageSequence: (frameRange: FrameRange | null) => boolean;
     getDotEnvLocation: () => string | null;
     getUserPreferredStillImageFormat: () => "png" | "jpeg" | "pdf" | "webp" | undefined;
-    getUserPreferredVideoImageFormat: () => "png" | "jpeg" | "none" | undefined;
+    getUserPreferredVideoImageFormat: () => "none" | "png" | "jpeg" | undefined;
     getWebpackOverrideFn: () => WebpackOverrideFn;
     getWebpackCaching: () => boolean;
     getOutputLocation: () => string | null;

package/dist/config/max-timeline-tracks.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getMaxTimelineTracks = exports.setMaxTimelineTracks = void 0;
-let maxTimelineTracks = 15;
+const MaxTimelineTracks_1 = require("../editor/components/Timeline/MaxTimelineTracks");
+let maxTimelineTracks = MaxTimelineTracks_1.DEFAULT_TIMELINE_TRACKS;
 const setMaxTimelineTracks = (maxTracks) => {
     if (typeof maxTracks !== 'number') {
         throw new Error(`Need to pass a number to Config.setMaxTimelineTracks(), got ${typeof maxTracks}`);

package/dist/editor/components/AudioWaveform.d.ts

@@ -2,7 +2,6 @@ import React from 'react';
 export declare const AudioWaveform: React.FC<{
     src: string;
     visualizationWidth: number;
-    fps: number;
     startFrom: number;
     durationInFrames: number;
     setMaxMediaDuration: React.Dispatch<React.SetStateAction<number>>;

package/dist/editor/components/AudioWaveform.js

@@ -4,6 +4,7 @@ exports.AudioWaveform = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const media_utils_1 = require("@remotion/media-utils");
 const react_1 = require("react");
+const remotion_1 = require("remotion");
 const timeline_layout_1 = require("../helpers/timeline-layout");
 const AudioWaveformBar_1 = require("./AudioWaveformBar");
 const container = {
@@ -26,10 +27,14 @@ const errorMessage = {
 const canvasStyle = {
     position: 'absolute',
 };
-const AudioWaveform = ({ src, fps, startFrom, durationInFrames, visualizationWidth, setMaxMediaDuration, volume, doesVolumeChange, playbackRate, }) => {
+const AudioWaveform = ({ src, startFrom, durationInFrames, visualizationWidth, setMaxMediaDuration, volume, doesVolumeChange, playbackRate, }) => {
     const [metadata, setMetadata] = (0, react_1.useState)(null);
     const [error, setError] = (0, react_1.useState)(null);
     const mountState = (0, react_1.useRef)({ isMounted: true });
+    const vidConf = remotion_1.Internals.useUnsafeVideoConfig();
+    if (vidConf === null) {
+        throw new Error('Expected video config');
+    }
     const canvas = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         const { current } = mountState;
@@ -74,7 +79,7 @@ const AudioWaveform = ({ src, fps, startFrom, durationInFrames, visualizationWid
         (0, media_utils_1.getAudioData)(src)
             .then((data) => {
             if (mountState.current.isMounted) {
-                setMaxMediaDuration(Math.floor(data.durationInSeconds * fps));
+                setMaxMediaDuration(Math.floor(data.durationInSeconds * vidConf.fps));
                 setMetadata(data);
             }
         })
@@ -84,7 +89,7 @@ const AudioWaveform = ({ src, fps, startFrom, durationInFrames, visualizationWid
                 setError(err);
             }
         });
-    }, [fps, setMaxMediaDuration, src]);
+    }, [setMaxMediaDuration, src, vidConf.fps]);
     const normalized = (0, react_1.useMemo)(() => {
         if (!metadata || metadata.numberOfChannels === 0) {
             return [];
@@ -92,13 +97,13 @@ const AudioWaveform = ({ src, fps, startFrom, durationInFrames, visualizationWid
         const numberOfSamples = Math.floor(visualizationWidth / (AudioWaveformBar_1.WAVEFORM_BAR_LENGTH + AudioWaveformBar_1.WAVEFORM_BAR_MARGIN));
         return (0, media_utils_1.getWaveformPortion)({
             audioData: metadata,
-            startTimeInSeconds: startFrom / fps,
-            durationInSeconds: (durationInFrames / fps) * playbackRate,
+            startTimeInSeconds: startFrom / vidConf.fps,
+            durationInSeconds: (durationInFrames / vidConf.fps) * playbackRate,
             numberOfSamples,
         });
     }, [
         durationInFrames,
-        fps,
+        vidConf.fps,
         metadata,
         playbackRate,
         startFrom,

package/dist/editor/components/NewComposition/RemInput.d.ts

@@ -13,5 +13,5 @@ export declare const getInputBorderColor: ({ status, isFocused, isHovered, }: {
     isFocused: boolean;
     isHovered: boolean;
 }) => "hsla(0, 0%, 100%, 0.15)" | "rgba(0, 0, 0, 0.6)" | "rgba(255, 255, 255, 0.05)" | "#ff3232" | "#f1c40f";
-export declare const RemotionInput: React.ForwardRefExoticComponent<Pick<Props, "status" | "key" | "rightAlign" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
+export declare const RemotionInput: React.ForwardRefExoticComponent<Pick<Props, "key" | keyof React.InputHTMLAttributes<HTMLInputElement> | "status" | "rightAlign"> & React.RefAttributes<HTMLInputElement>>;
 export {};

package/dist/editor/components/NewComposition/RemInputTypeColor.d.ts

@@ -3,5 +3,5 @@ import type { RemInputStatus } from './RemInput';
 declare type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> & {
     status: RemInputStatus;
 };
-export declare const RemInputTypeColor: React.ForwardRefExoticComponent<Pick<Props, "status" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
+export declare const RemInputTypeColor: React.ForwardRefExoticComponent<Pick<Props, "key" | keyof React.InputHTMLAttributes<HTMLInputElement> | "status"> & React.RefAttributes<HTMLInputElement>>;
 export {};

package/dist/editor/components/NewComposition/RemTextarea.d.ts

@@ -3,5 +3,5 @@ declare type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLTextA
     status: 'error' | 'warning' | 'ok';
 };
 export declare const inputBaseStyle: React.CSSProperties;
-export declare const RemTextarea: React.ForwardRefExoticComponent<Pick<Props, "status" | "key" | keyof React.InputHTMLAttributes<HTMLTextAreaElement>> & React.RefAttributes<HTMLTextAreaElement>>;
+export declare const RemTextarea: React.ForwardRefExoticComponent<Pick<Props, "key" | "status" | keyof React.InputHTMLAttributes<HTMLTextAreaElement>> & React.RefAttributes<HTMLTextAreaElement>>;
 export {};

package/dist/editor/components/RenderModal/RenderModalData.d.ts

@@ -4,15 +4,14 @@ export declare type State = {
     str: string;
     value: Record<string, unknown>;
     validJSON: true;
-    zodValidation: Zod.SafeParseReturnType<unknown, unknown>;
 } | {
     str: string;
     validJSON: false;
     error: string;
 };
 export declare type PropsEditType = 'input-props' | 'default-props';
-export declare const DataEditor: React.FC<{
-    unresolvedComposition: AnyComposition;
+export declare const RenderModalData: React.FC<{
+    composition: AnyComposition;
     inputProps: Record<string, unknown>;
     setInputProps: React.Dispatch<React.SetStateAction<Record<string, unknown>>>;
     compact: boolean;

package/dist/editor/components/RenderModal/RenderModalData.js

@@ -23,7 +23,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DataEditor = void 0;
+exports.RenderModalData = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
@@ -62,7 +62,6 @@ const outer = {
     flexDirection: 'column',
     flex: 1,
     overflow: 'hidden',
-    backgroundColor: colors_1.BACKGROUND,
 };
 const controlContainer = {
     flexDirection: 'column',
@@ -77,6 +76,15 @@ const tabWrapper = {
     alignItems: 'center',
 };
 const persistanceKey = 'remotion.show-render-modalwarning';
+const parseJSON = (str) => {
+    try {
+        const value = (0, input_props_serialization_1.deserializeJSONWithCustomFields)(str);
+        return { str, value, validJSON: true };
+    }
+    catch (e) {
+        return { str, validJSON: false, error: e.message };
+    }
+};
 const getPersistedShowWarningState = () => {
     const val = localStorage.getItem(persistanceKey);
     if (!val) {
@@ -87,7 +95,7 @@ const getPersistedShowWarningState = () => {
 const setPersistedShowWarningState = (val) => {
     localStorage.setItem(persistanceKey, String(Boolean(val)));
 };
-const DataEditor = ({ unresolvedComposition, inputProps, setInputProps, compact, mayShowSaveButton, propsEditType, }) => {
+const RenderModalData = ({ composition, inputProps, setInputProps, compact, mayShowSaveButton, propsEditType, }) => {
     const [mode, setMode] = (0, react_1.useState)('schema');
     const [valBeforeSafe, setValBeforeSafe] = (0, react_1.useState)(inputProps);
     const [saving, setSaving] = (0, react_1.useState)(false);
@@ -106,21 +114,21 @@ const DataEditor = ({ unresolvedComposition, inputProps, setInputProps, compact,
     }, [inJSONEditor, inputProps]);
     const cliProps = (0, remotion_1.getInputProps)();
     const [canSaveDefaultPropsObjectState, setCanSaveDefaultProps] = (0, react_1.useState)({
-        [unresolvedComposition.id]: get_render_modal_warnings_1.defaultTypeCanSaveState,
+        [composition.id]: get_render_modal_warnings_1.defaultTypeCanSaveState,
     });
     const z = (0, get_zod_if_possible_1.useZodIfPossible)();
     const schema = (0, react_1.useMemo)(() => {
         if (!z) {
             return 'no-zod';
         }
-        if (!unresolvedComposition.schema) {
+        if (!composition.schema) {
             return z.object({});
         }
-        if (!(typeof unresolvedComposition.schema.safeParse === 'function')) {
+        if (!(typeof composition.schema.safeParse === 'function')) {
             throw new Error('A value which is not a Zod schema was passed to `schema`');
         }
-        return unresolvedComposition.schema;
-    }, [unresolvedComposition.schema, z]);
+        return composition.schema;
+    }, [composition.schema, z]);
     const zodValidationResult = (0, react_1.useMemo)(() => {
         if (schema === 'no-zod') {
             return 'no-zod';
@@ -138,19 +146,19 @@ const DataEditor = ({ unresolvedComposition, inputProps, setInputProps, compact,
         });
     }, []);
     const canSaveDefaultProps = (0, react_1.useMemo)(() => {
-        return canSaveDefaultPropsObjectState[unresolvedComposition.id]
-            ? canSaveDefaultPropsObjectState[unresolvedComposition.id]
+        return canSaveDefaultPropsObjectState[composition.id]
+            ? canSaveDefaultPropsObjectState[composition.id]
             : get_render_modal_warnings_1.defaultTypeCanSaveState;
-    }, [canSaveDefaultPropsObjectState, unresolvedComposition.id]);
+    }, [canSaveDefaultPropsObjectState, composition.id]);
     const showSaveButton = mayShowSaveButton && canSaveDefaultProps.canUpdate;
     const { fastRefreshes } = (0, react_1.useContext)(remotion_1.Internals.NonceContext);
     (0, react_1.useEffect)(() => {
-        (0, actions_1.canUpdateDefaultProps)(unresolvedComposition.id)
+        (0, actions_1.canUpdateDefaultProps)(composition.id)
             .then((can) => {
             if (can.canUpdate) {
                 setCanSaveDefaultProps((prevState) => ({
                     ...prevState,
-                    [unresolvedComposition.id]: {
+                    [composition.id]: {
                         canUpdate: true,
                     },
                 }));
@@ -158,7 +166,7 @@ const DataEditor = ({ unresolvedComposition, inputProps, setInputProps, compact,
             else {
                 setCanSaveDefaultProps((prevState) => ({
                     ...prevState,
-                    [unresolvedComposition.id]: {
+                    [composition.id]: {
                         canUpdate: false,
                         reason: can.reason,
                         determined: true,
@@ -169,14 +177,14 @@ const DataEditor = ({ unresolvedComposition, inputProps, setInputProps, compact,
             .catch((err) => {
             setCanSaveDefaultProps((prevState) => ({
                 ...prevState,
-                [unresolvedComposition.id]: {
+                [composition.id]: {
                     canUpdate: false,
                     reason: err.message,
                     determined: true,
                 },
             }));
         });
-    }, [unresolvedComposition.id]);
+    }, [composition.id]);
     const modeItems = (0, react_1.useMemo)(() => {
         return [
             {
@@ -197,18 +205,21 @@ const DataEditor = ({ unresolvedComposition, inputProps, setInputProps, compact,
             },
         ];
     }, [mode]);
+    const switchToSchema = (0, react_1.useCallback)(() => {
+        setMode('schema');
+    }, []);
     const onUpdate = (0, react_1.useCallback)(() => {
         if (schema === 'no-zod' || z === null) {
             (0, NotificationCenter_1.sendErrorNotification)('Cannot update default props: No Zod schema');
             return;
         }
         setValBeforeSafe(inputProps);
-        (0, actions_1.updateDefaultProps)(unresolvedComposition.id, inputProps, (0, extract_enum_json_paths_1.extractEnumJsonPaths)(schema, z, [])).then((response) => {
+        (0, actions_1.updateDefaultProps)(composition.id, inputProps, (0, extract_enum_json_paths_1.extractEnumJsonPaths)(schema, z, [])).then((response) => {
             if (!response.success) {
                 (0, NotificationCenter_1.sendErrorNotification)('Cannot update default props: ' + response.reason);
             }
         });
-    }, [unresolvedComposition.id, inputProps, schema, z]);
+    }, [composition.id, inputProps, schema, z]);
     (0, react_1.useEffect)(() => {
         setSaving(false);
     }, [fastRefreshes]);
@@ -218,7 +229,7 @@ const DataEditor = ({ unresolvedComposition, inputProps, setInputProps, compact,
             return;
         }
         setSaving(true);
-        (0, actions_1.updateDefaultProps)(unresolvedComposition.id, updater(unresolvedComposition.defaultProps), (0, extract_enum_json_paths_1.extractEnumJsonPaths)(schema, z, []))
+        (0, actions_1.updateDefaultProps)(composition.id, updater(composition.defaultProps), (0, extract_enum_json_paths_1.extractEnumJsonPaths)(schema, z, []))
             .then((response) => {
             if (!response.success) {
                 console.log(response.stack);
@@ -229,7 +240,7 @@ const DataEditor = ({ unresolvedComposition, inputProps, setInputProps, compact,
             (0, NotificationCenter_1.sendErrorNotification)(`Cannot update default props: ${err.message}`);
             setSaving(false);
         });
-    }, [unresolvedComposition.defaultProps, unresolvedComposition.id, schema, z]);
+    }, [composition.defaultProps, composition.id, schema, z]);
     const connectionStatus = (0, react_1.useContext)(client_id_1.PreviewServerConnectionCtx).type;
     const warnings = (0, react_1.useMemo)(() => {
         return (0, get_render_modal_warnings_1.getRenderModalWarnings)({
@@ -267,11 +278,11 @@ const DataEditor = ({ unresolvedComposition, inputProps, setInputProps, compact,
     if (typeName === z.ZodFirstPartyTypeKind.ZodAny) {
         return (0, jsx_runtime_1.jsx)(SchemaErrorMessages_1.NoSchemaDefined, {});
     }
-    if (!unresolvedComposition.defaultProps) {
+    if (!composition.defaultProps) {
         return (0, jsx_runtime_1.jsx)(SchemaErrorMessages_1.NoDefaultProps, {});
     }
     return ((0, jsx_runtime_1.jsxs)("div", { style: outer, children: [(0, jsx_runtime_1.jsxs)("div", { style: controlContainer, children: [(0, jsx_runtime_1.jsxs)("div", { style: tabWrapper, children: [(0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: modeItems, needsWrapping: false }), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), warnings.length > 0 ? ((0, jsx_runtime_1.jsx)(WarningIndicatorButton_1.WarningIndicatorButton, { setShowWarning: setShowWarning, showWarning: showWarning, warningCount: warnings.length })) : null] }), showWarning && warnings.length > 0
                         ? warnings.map((warning) => ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { message: warning, align: "flex-start", type: "warning" })] }, warning)))
-                        : null] }), mode === 'schema' ? ((0, jsx_runtime_1.jsx)(SchemaEditor_1.SchemaEditor, { value: inputProps, setValue: setInputProps, schema: schema, zodValidationResult: zodValidationResult, compact: compact, defaultProps: unresolvedComposition.defaultProps, onSave: onSave, showSaveButton: showSaveButton, saving: saving, saveDisabledByParent: !zodValidationResult.success })) : ((0, jsx_runtime_1.jsx)(RenderModalJSONPropsEditor_1.RenderModalJSONPropsEditor, { value: inputProps !== null && inputProps !== void 0 ? inputProps : {}, setValue: setInputProps, onSave: onUpdate, valBeforeSafe: valBeforeSafe, showSaveButton: showSaveButton, serializedJSON: serializedJSON, defaultProps: unresolvedComposition.defaultProps, schema: schema }))] }));
+                        : null] }), mode === 'schema' ? ((0, jsx_runtime_1.jsx)(SchemaEditor_1.SchemaEditor, { value: inputProps, setValue: setInputProps, schema: schema, zodValidationResult: zodValidationResult, compact: compact, defaultProps: composition.defaultProps, onSave: onSave, showSaveButton: showSaveButton, saving: saving, saveDisabledByParent: !zodValidationResult.success })) : ((0, jsx_runtime_1.jsx)(RenderModalJSONPropsEditor_1.RenderModalJSONPropsEditor, { value: inputProps !== null && inputProps !== void 0 ? inputProps : {}, setValue: setInputProps, zodValidationResult: zodValidationResult, switchToSchema: switchToSchema, onSave: onUpdate, valBeforeSafe: valBeforeSafe, showSaveButton: showSaveButton, serializedJSON: serializedJSON, parseJSON: parseJSON }))] }));
 };
-exports.DataEditor = DataEditor;
+exports.RenderModalData = RenderModalData;

package/dist/editor/components/RenderModal/human-readable-codec.d.ts

@@ -1,2 +1,2 @@
 import type { Codec } from '@remotion/renderer';
-export declare const humanReadableCodec: (codec: Codec) => "GIF" | "AAC" | "MP3" | "H.264" | "H.264 Matroska" | "H.265" | "ProRes" | "WebM VP8" | "WebM VP9" | "Waveform" | undefined;
+export declare const humanReadableCodec: (codec: Codec) => "AAC" | "MP3" | "GIF" | "H.264" | "H.264 Matroska" | "H.265" | "ProRes" | "WebM VP8" | "WebM VP9" | "Waveform" | undefined;

package/dist/editor/components/Splitter/SplitterContainer.js

@@ -15,6 +15,7 @@ const containerColumn = {
     display: 'flex',
     flexDirection: 'column',
     flex: 1,
+    height: '100%',
 };
 const SplitterContainer = ({ orientation, children, defaultFlex, maxFlex, minFlex, id }) => {
     const [initialTimelineFlex, persistFlex] = (0, timeline_1.useTimelineFlex)(id);

package/dist/editor/components/Timeline/MaxTimelineTracks.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+export declare const DEFAULT_TIMELINE_TRACKS = 90;
 export declare const MAX_TIMELINE_TRACKS: number;
 export declare const MAX_TIMELINE_TRACKS_NOTICE_HEIGHT = 24;
 export declare const MaxTimelineTracksReached: React.FC;

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

@@ -1,10 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MaxTimelineTracksReached = exports.MAX_TIMELINE_TRACKS_NOTICE_HEIGHT = exports.MAX_TIMELINE_TRACKS = void 0;
+exports.MaxTimelineTracksReached = exports.MAX_TIMELINE_TRACKS_NOTICE_HEIGHT = exports.MAX_TIMELINE_TRACKS = exports.DEFAULT_TIMELINE_TRACKS = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
+exports.DEFAULT_TIMELINE_TRACKS = 90;
 exports.MAX_TIMELINE_TRACKS = typeof process.env.MAX_TIMELINE_TRACKS === 'undefined'
-    ? 90
+    ? exports.DEFAULT_TIMELINE_TRACKS
     : Number(process.env.MAX_TIMELINE_TRACKS);
 exports.MAX_TIMELINE_TRACKS_NOTICE_HEIGHT = 24;
 const container = {

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

@@ -8,6 +8,7 @@ const calculate_timeline_1 = require("../../helpers/calculate-timeline");
 const colors_1 = require("../../helpers/colors");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const timeline_ref_1 = require("../../state/timeline-ref");
+const is_menu_item_1 = require("../Menu/is-menu-item");
 const SplitterContainer_1 = require("../Splitter/SplitterContainer");
 const SplitterElement_1 = require("../Splitter/SplitterElement");
 const SplitterHandle_1 = require("../Splitter/SplitterHandle");
@@ -23,6 +24,7 @@ const TimelineScrollable_1 = require("./TimelineScrollable");
 const TimelineSlider_1 = require("./TimelineSlider");
 const TimelineTimeIndicators_1 = require("./TimelineTimeIndicators");
 const TimelineTracks_1 = require("./TimelineTracks");
+const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
 const container = {
     minHeight: '100%',
     flex: 1,
@@ -34,7 +36,7 @@ const container = {
 const noop = () => undefined;
 const Timeline = () => {
     var _a;
-    const { sequences } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const { sequences } = (0, react_1.useContext)(remotion_1.Internals.SequenceManager);
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
     const [state, dispatch] = (0, react_1.useReducer)(timeline_state_reducer_1.timelineStateReducer, {
         collapsed: {},
@@ -85,9 +87,6 @@ const Timeline = () => {
             overflowX: 'hidden',
         };
     }, [hasBeenCut, shown.length]);
-    if (!videoConfig) {
-        return (0, jsx_runtime_1.jsx)("div", { style: container, className: "css-reset" });
-    }
-    return ((0, jsx_runtime_1.jsx)("div", { ref: timeline_refs_1.timelineVerticalScroll, style: container, className: "css-reset", children: (0, jsx_runtime_1.jsx)("div", { style: inner, children: (0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { orientation: "vertical", defaultFlex: 0.2, id: "names-to-timeline", maxFlex: 0.5, minFlex: 0.15, children: [(0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "flexer", children: (0, jsx_runtime_1.jsx)(TimelineList_1.TimelineList, { dispatchStateChange: dispatch, viewState: state, timeline: shown }) }), (0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { onCollapse: noop, allowToCollapse: "none" }), (0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "anti-flexer", children: (0, jsx_runtime_1.jsxs)(TimelineScrollable_1.TimelineScrollable, { children: [(0, jsx_runtime_1.jsx)(TimelineTracks_1.TimelineTracks, { viewState: state, timeline: shown, fps: videoConfig.fps, hasBeenCut: hasBeenCut }), (0, jsx_runtime_1.jsx)(TimelineInOutPointer_1.TimelineInOutPointer, {}), (0, jsx_runtime_1.jsx)(TimelineDragHandler_1.TimelineDragHandler, {}), (0, jsx_runtime_1.jsx)(TimelineSlider_1.TimelineSlider, {}), (0, jsx_runtime_1.jsx)(TimelinePlayCursorSyncer_1.TimelinePlayCursorSyncer, {})] }) })] }) }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { ref: timeline_refs_1.timelineVerticalScroll, style: container, className: 'css-reset ' + is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: (0, jsx_runtime_1.jsx)(TimelineWidthProvider_1.TimelineWidthProvider, { children: (0, jsx_runtime_1.jsx)("div", { style: inner, children: (0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { orientation: "vertical", defaultFlex: 0.2, id: "names-to-timeline", maxFlex: 0.5, minFlex: 0.15, children: [(0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "flexer", children: (0, jsx_runtime_1.jsx)(TimelineList_1.TimelineList, { dispatchStateChange: dispatch, viewState: state, timeline: shown }) }), (0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { onCollapse: noop, allowToCollapse: "none" }), (0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "anti-flexer", children: (0, jsx_runtime_1.jsxs)(TimelineScrollable_1.TimelineScrollable, { children: [(0, jsx_runtime_1.jsx)(TimelineTracks_1.TimelineTracks, { viewState: state, timeline: shown, hasBeenCut: hasBeenCut }), (0, jsx_runtime_1.jsx)(TimelineInOutPointer_1.TimelineInOutPointer, {}), (0, jsx_runtime_1.jsx)(TimelineDragHandler_1.TimelineDragHandler, {}), (0, jsx_runtime_1.jsx)(TimelineSlider_1.TimelineSlider, {}), (0, jsx_runtime_1.jsx)(TimelinePlayCursorSyncer_1.TimelinePlayCursorSyncer, {})] }) })] }) }) }) }));
 };
 exports.Timeline = Timeline;

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

@@ -10,11 +10,13 @@ const timeline_layout_1 = require("../../helpers/timeline-layout");
 const in_out_1 = require("../../state/in-out");
 const timeline_zoom_1 = require("../../state/timeline-zoom");
 const FramePersistor_1 = require("../FramePersistor");
+const is_menu_item_1 = require("../Menu/is-menu-item");
 const timeline_refs_1 = require("./timeline-refs");
 const timeline_scroll_logic_1 = require("./timeline-scroll-logic");
 const TimelineInOutPointer_1 = require("./TimelineInOutPointer");
 const TimelineInOutPointerHandle_1 = require("./TimelineInOutPointerHandle");
 const TimelineSlider_1 = require("./TimelineSlider");
+const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
 const inner = {
     overflowY: 'auto',
     overflowX: 'hidden',
@@ -30,7 +32,20 @@ const getClientXWithScroll = (x) => {
     return x + ((_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scrollLeft);
 };
 const TimelineDragHandler = () => {
+    const video = remotion_1.Internals.useUnsafeVideoConfig();
+    const { zoom } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
+    const containerStyle = (0, react_1.useMemo)(() => {
+        return {
+            ...container,
+            width: 100 * zoom + '%',
+        };
+    }, [zoom]);
+    return ((0, jsx_runtime_1.jsx)("div", { ref: timeline_refs_1.sliderAreaRef, style: containerStyle, children: video ? (0, jsx_runtime_1.jsx)(Inner, {}) : null }));
+};
+exports.TimelineDragHandler = TimelineDragHandler;
+const Inner = () => {
     var _a, _b, _c;
+    const videoConfig = (0, remotion_1.useVideoConfig)();
     const size = player_1.PlayerInternals.useElementSize(timeline_refs_1.scrollableRef, {
         triggerOnWindowResize: true,
         shouldApplyCssTransforms: true,
@@ -38,16 +53,21 @@ const TimelineDragHandler = () => {
     const [inOutDragging, setInOutDragging] = (0, react_1.useState)({
         dragging: false,
     });
+    const timelineWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
+    const get = (0, react_1.useCallback)((frame) => {
+        if (timelineWidth === null) {
+            throw new Error('timeline width is not yet determined');
+        }
+        return (0, get_left_of_timeline_slider_1.getXPositionOfItemInTimelineImperatively)(frame, videoConfig.durationInFrames, timelineWidth);
+    }, [timelineWidth, videoConfig.durationInFrames]);
     const width = (_b = (_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scrollWidth) !== null && _b !== void 0 ? _b : 0;
     const left = (_c = size === null || size === void 0 ? void 0 : size.left) !== null && _c !== void 0 ? _c : 0;
     const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
     const { setInAndOutFrames } = (0, in_out_1.useTimelineSetInOutFramePosition)();
-    const { get } = (0, get_left_of_timeline_slider_1.useGetXPositionOfItemInTimeline)();
     const [dragging, setDragging] = (0, react_1.useState)({
         dragging: false,
     });
     const { playing, play, pause, seek } = player_1.PlayerInternals.usePlayer();
-    const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
     const scroller = (0, react_1.useRef)(null);
     const stopInterval = () => {
         if (scroller.current) {
@@ -312,13 +332,8 @@ const TimelineDragHandler = () => {
             window.removeEventListener('pointerup', onPointerUpInOut);
         };
     }, [inOutDragging.dragging, onPointerMoveInOut, onPointerUpInOut]);
-    const { zoom } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
-    const containerStyle = (0, react_1.useMemo)(() => {
-        return {
-            ...container,
-            width: 100 * zoom + '%',
-        };
-    }, [zoom]);
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: timeline_refs_1.sliderAreaRef, style: containerStyle, onPointerDown: onPointerDown, children: [(0, jsx_runtime_1.jsx)("div", { style: inner }), inFrame !== null && ((0, jsx_runtime_1.jsx)(TimelineInOutPointerHandle_1.TimelineInOutPointerHandle, { type: "in", atFrame: inFrame, dragging: inOutDragging.dragging === 'in' })), outFrame !== null && ((0, jsx_runtime_1.jsx)(TimelineInOutPointerHandle_1.TimelineInOutPointerHandle, { type: "out", dragging: inOutDragging.dragging === 'out', atFrame: outFrame }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            width: '100%',
+            height: '100%',
+        }, onPointerDown: onPointerDown, children: [(0, jsx_runtime_1.jsx)("div", { style: inner, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME }), inFrame !== null && ((0, jsx_runtime_1.jsx)(TimelineInOutPointerHandle_1.TimelineInOutPointerHandle, { type: "in", atFrame: inFrame, dragging: inOutDragging.dragging === 'in' })), outFrame !== null && ((0, jsx_runtime_1.jsx)(TimelineInOutPointerHandle_1.TimelineInOutPointerHandle, { type: "out", dragging: inOutDragging.dragging === 'out', atFrame: outFrame }))] }));
 };
-exports.TimelineDragHandler = TimelineDragHandler;

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

@@ -6,6 +6,7 @@ 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 in_out_1 = require("../../state/in-out");
+const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
 const areaHighlight = {
     position: 'absolute',
     backgroundColor: 'rgba(0, 0, 0, 0.5)',
@@ -18,18 +19,19 @@ exports.outMarkerAreaRef = (0, react_1.createRef)();
 const TimelineInOutPointer = () => {
     const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
-    const { get, width } = (0, get_left_of_timeline_slider_1.useGetXPositionOfItemInTimeline)();
-    if (!videoConfig) {
+    const timelineWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
+    if (!videoConfig || timelineWidth === null) {
         return null;
     }
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [inFrame !== null && ((0, jsx_runtime_1.jsx)("div", { ref: exports.inMarkerAreaRef, style: {
                     ...areaHighlight,
                     left: 0,
-                    width: get(inFrame !== null && inFrame !== void 0 ? inFrame : 0),
+                    width: (0, get_left_of_timeline_slider_1.getXPositionOfItemInTimelineImperatively)(inFrame, videoConfig.durationInFrames, timelineWidth),
                 } })), outFrame !== null && ((0, jsx_runtime_1.jsx)("div", { ref: exports.outMarkerAreaRef, style: {
                     ...areaHighlight,
-                    left: get(outFrame),
-                    width: width - get(outFrame),
+                    left: (0, get_left_of_timeline_slider_1.getXPositionOfItemInTimelineImperatively)(outFrame, videoConfig.durationInFrames, timelineWidth),
+                    width: timelineWidth -
+                        (0, get_left_of_timeline_slider_1.getXPositionOfItemInTimelineImperatively)(outFrame, videoConfig.durationInFrames, timelineWidth),
                 } }))] }));
 };
 exports.TimelineInOutPointer = TimelineInOutPointer;

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

@@ -3,7 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineInOutPointerHandle = exports.outPointerHandle = exports.inPointerHandle = void 0;
 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 TimelineWidthProvider_1 = require("./TimelineWidthProvider");
 const line = {
     height: '100%',
     width: 1,
@@ -16,16 +18,20 @@ const line = {
 exports.inPointerHandle = (0, react_1.createRef)();
 exports.outPointerHandle = (0, react_1.createRef)();
 const TimelineInOutPointerHandle = ({ dragging, type, atFrame }) => {
-    const { get } = (0, get_left_of_timeline_slider_1.useGetXPositionOfItemInTimeline)();
+    const timelineWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
+    const videoConfig = (0, remotion_1.useVideoConfig)();
+    if (timelineWidth === null) {
+        throw new Error('Timeline width is null');
+    }
     const style = (0, react_1.useMemo)(() => {
         return {
             ...line,
             backgroundColor: dragging
                 ? 'rgba(255, 255, 255, 0.7)'
                 : 'rgba(255, 255, 255, 0.1)',
-            transform: `translateX(${get(atFrame)}px)`,
+            transform: `translateX(${(0, get_left_of_timeline_slider_1.getXPositionOfItemInTimelineImperatively)(atFrame, videoConfig.durationInFrames, timelineWidth)}px)`,
         };
-    }, [atFrame, dragging, get]);
+    }, [atFrame, dragging, timelineWidth, videoConfig.durationInFrames]);
     return ((0, jsx_runtime_1.jsx)("div", { ref: type === 'in' ? exports.inPointerHandle : exports.outPointerHandle, style: style }));
 };
 exports.TimelineInOutPointerHandle = TimelineInOutPointerHandle;

package/dist/editor/components/Timeline/TimelineSequence.d.ts

@@ -2,5 +2,4 @@ import React from 'react';
 import type { TSequence } from 'remotion';
 export declare const TimelineSequence: React.FC<{
     s: TSequence;
-    fps: number;
 }>;

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

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineSequence = 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 colors_1 = require("../../helpers/colors");
@@ -10,17 +9,19 @@ const get_timeline_sequence_layout_1 = require("../../helpers/get-timeline-seque
 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 TimelineWidthProvider_1 = require("./TimelineWidthProvider");
 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;
-    const size = player_1.PlayerInternals.useElementSize(timeline_refs_1.sliderAreaRef, {
-        triggerOnWindowResize: false,
-        shouldApplyCssTransforms: true,
-    });
-    const windowWidth = (_a = size === null || size === void 0 ? void 0 : size.width) !== null && _a !== void 0 ? _a : 0;
+const TimelineSequence = ({ s }) => {
+    const windowWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
+    if (windowWidth === null) {
+        return null;
+    }
+    return (0, jsx_runtime_1.jsx)(Inner, { windowWidth: windowWidth, s: s });
+};
+exports.TimelineSequence = TimelineSequence;
+const Inner = ({ s, windowWidth }) => {
     // If a duration is 1, it is essentially a still and it should have width 0
     // Some compositions may not be longer than their media duration,
     // if that is the case, it needs to be asynchronously determined
@@ -29,16 +30,18 @@ const TimelineSequence = ({ s, fps }) => {
     if (!video) {
         throw new TypeError('Expected video config');
     }
-    const { marginLeft, width } = (0, get_timeline_sequence_layout_1.getTimelineSequenceLayout)({
-        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,
-        windowWidth,
-    });
+    const { marginLeft, width } = (0, react_1.useMemo)(() => {
+        return (0, get_timeline_sequence_layout_1.getTimelineSequenceLayout)({
+            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,
+            windowWidth,
+        });
+    }, [maxMediaDuration, s, video, windowWidth]);
     const style = (0, react_1.useMemo)(() => {
         return {
             background: s.type === 'audio'
@@ -57,6 +60,5 @@ 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.loopDisplay === undefined ? null : ((0, jsx_runtime_1.jsx)(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.loopDisplay.numberOfTimes }))] }, 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, 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;