@remotion/studio 4.0.503 → 4.0.505

package/dist/components/Timeline/TimelineTimeIndicators.js

@@ -1,8 +1,41 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineTimeIndicators = exports.getTimelineTickScale = exports.getNiceSecondInterval = exports.TimelineTimePadding = exports.TimelineTimePlaceholders = exports.TIMELINE_TIME_INDICATOR_HEIGHT = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
+const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const colors_1 = require("../../helpers/colors");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
@@ -171,7 +204,7 @@ const TimelineTimeIndicators = () => {
     return (jsx_runtime_1.jsx(TimelineTimeIndicatorsInner, { durationInFrames: video.durationInFrames, fps: video.fps, windowWidth: sliderTrack }));
 };
 exports.TimelineTimeIndicators = TimelineTimeIndicators;
-const TimelineTimeIndicatorsInner = ({ windowWidth, durationInFrames, fps }) => {
+const TimelineTimeIndicatorsInner = react_1.default.memo(({ windowWidth, durationInFrames, fps }) => {
     const ref = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         const currentRef = ref.current;
@@ -271,4 +304,4 @@ const TimelineTimeIndicatorsInner = ({ windowWidth, durationInFrames, fps }) =>
     return (jsx_runtime_1.jsx("div", { ref: ref, style: style, children: ticks.map((t) => {
             return (jsx_runtime_1.jsx("div", { style: t.style, children: t.showTime ? (jsx_runtime_1.jsx("div", { style: tickLabel, children: (0, render_frame_1.renderFrame)(t.frame, fps) })) : null }, t.frame));
         }) }));
-};
+});

package/dist/components/Timeline/TimelineVideoInfo.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { LoopDisplay } from 'remotion';
-export declare const TimelineVideoInfo: React.FC<{
+export declare const TimelineVideoInfo: React.NamedExoticComponent<{
     readonly src: string;
     readonly visualizationWidth: number;
     readonly naturalWidth: number;

package/dist/components/Timeline/TimelineVideoInfo.js

@@ -1,9 +1,42 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineVideoInfo = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const timeline_utils_1 = require("@remotion/timeline-utils");
-const react_1 = require("react");
+const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const colors_1 = require("../../helpers/colors");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
@@ -26,7 +59,7 @@ const filmstripContainerStyle = {
     fontFamily: 'Arial, Helvetica',
 };
 const MAX_FROZEN_FRAME_CACHE_DEVIATION = timeline_utils_1.WEBCODECS_TIMESCALE * 0.05;
-const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, startMediaFrom, mediaFrameAtSequenceZero, sequenceFrameOffset, durationInFrames, playbackRate, volume, doesVolumeChange, premountWidth, postmountWidth, loopDisplay, frozenMediaFrame, extendLastFrame, }) => {
+const TimelineVideoInfoInner = ({ src, visualizationWidth, naturalWidth, startMediaFrom, mediaFrameAtSequenceZero, sequenceFrameOffset, durationInFrames, playbackRate, volume, doesVolumeChange, premountWidth, postmountWidth, loopDisplay, frozenMediaFrame, extendLastFrame, }) => {
     const { fps } = (0, remotion_1.useVideoConfig)();
     const ref = (0, react_1.useRef)(null);
     const [error, setError] = (0, react_1.useState)(null);
@@ -338,4 +371,4 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, startMediaFr
             jsx_runtime_1.jsx("div", { ref: ref, style: filmstripStyle }), jsx_runtime_1.jsx("div", { style: audioStyle, children: jsx_runtime_1.jsx(AudioWaveform_1.AudioWaveform, { src: src, height: timeline_layout_1.TIMELINE_VIDEO_INFO_WAVEFORM_HEIGHT, visualizationWidth: audioWidth, startFrom: mediaStartFrame, durationInFrames: durationInFrames, volume: volume, doesVolumeChange: doesVolumeChange, playbackRate: playbackRate, loopDisplay: loopDisplay }) })
         ] }));
 };
-exports.TimelineVideoInfo = TimelineVideoInfo;
+exports.TimelineVideoInfo = react_1.default.memo(TimelineVideoInfoInner);

package/dist/components/Timeline/TimelineZoomControls.d.ts

@@ -1,2 +1,4 @@
 import React from 'react';
-export declare const TimelineZoomControls: React.FC;
+export declare const TimelineZoomControls: React.NamedExoticComponent<{
+    readonly sliderMaxWidth?: number | undefined;
+}>;

package/dist/components/Timeline/TimelineZoomControls.js

@@ -1,13 +1,45 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineZoomControls = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
+const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const colors_1 = require("../../helpers/colors");
 const is_current_selected_still_1 = require("../../helpers/is-current-selected-still");
-const minus_1 = require("../../icons/minus");
-const plus_1 = require("../../icons/plus");
+const canvas_zoom_1 = require("../../icons/canvas-zoom");
 const timeline_zoom_1 = require("../../state/timeline-zoom");
 const z_index_1 = require("../../state/z-index");
 const ControlButton_1 = require("../ControlButton");
@@ -21,35 +53,43 @@ const container = {
 const buttonStyle = {
     fontSize: 24,
 };
-const iconStyle = {
-    color: colors_1.WHITE,
-    width: 14,
-};
-const TimelineZoomControls = () => {
+const TimelineZoomSlider = ({ maxWidth }) => {
     var _a;
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { setZoom, zoom: zoomMap } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
     const { tabIndex } = (0, z_index_1.useZIndex)();
-    const onMinusClicked = (0, react_1.useCallback)(() => {
+    const isStill = (0, is_current_selected_still_1.useIsStill)();
+    const onChange = (0, react_1.useCallback)((e) => {
         if (canvasContent === null || canvasContent.type !== 'composition') {
             return;
         }
-        setZoom(canvasContent.compositionId, (z) => Math.max(timeline_zoom_1.TIMELINE_MIN_ZOOM, z - 0.2), { anchorFrame: null, anchorContentX: null });
+        setZoom(canvasContent.compositionId, () => Number(e.target.value), {
+            anchorFrame: null,
+            anchorContentX: null,
+        });
     }, [canvasContent, setZoom]);
-    const onPlusClicked = (0, react_1.useCallback)(() => {
+    if (isStill ||
+        canvasContent === null ||
+        canvasContent.type !== 'composition') {
+        return null;
+    }
+    const zoom = (_a = zoomMap[canvasContent.compositionId]) !== null && _a !== void 0 ? _a : timeline_zoom_1.TIMELINE_MIN_ZOOM;
+    return (jsx_runtime_1.jsx("input", { style: maxWidth === undefined ? undefined : { maxWidth }, title: `Timeline zoom (${zoom}x)`, alt: `Timeline zoom (${zoom}x)`, type: "range", min: timeline_zoom_1.TIMELINE_MIN_ZOOM, step: 0.1, value: zoom, max: timeline_zoom_1.TIMELINE_MAX_ZOOM, onChange: onChange, className: "__remotion-timeline-slider", tabIndex: tabIndex }));
+};
+const TimelineZoomControlsInner = ({ sliderMaxWidth }) => {
+    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const { setZoom } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
+    const onMinusClicked = (0, react_1.useCallback)(() => {
         if (canvasContent === null || canvasContent.type !== 'composition') {
             return;
         }
-        setZoom(canvasContent.compositionId, (z) => Math.min(timeline_zoom_1.TIMELINE_MAX_ZOOM, z + 0.2), { anchorFrame: null, anchorContentX: null });
+        setZoom(canvasContent.compositionId, (z) => Math.max(timeline_zoom_1.TIMELINE_MIN_ZOOM, z - 0.2), { anchorFrame: null, anchorContentX: null });
     }, [canvasContent, setZoom]);
-    const onChange = (0, react_1.useCallback)((e) => {
+    const onPlusClicked = (0, react_1.useCallback)(() => {
         if (canvasContent === null || canvasContent.type !== 'composition') {
             return;
         }
-        setZoom(canvasContent.compositionId, () => Number(e.target.value), {
-            anchorFrame: null,
-            anchorContentX: null,
-        });
+        setZoom(canvasContent.compositionId, (z) => Math.min(timeline_zoom_1.TIMELINE_MAX_ZOOM, z + 0.2), { anchorFrame: null, anchorContentX: null });
     }, [canvasContent, setZoom]);
     const isStill = (0, is_current_selected_still_1.useIsStill)();
     if (isStill ||
@@ -57,9 +97,8 @@ const TimelineZoomControls = () => {
         canvasContent.type !== 'composition') {
         return null;
     }
-    const zoom = (_a = zoomMap[canvasContent.compositionId]) !== null && _a !== void 0 ? _a : timeline_zoom_1.TIMELINE_MIN_ZOOM;
     return (jsx_runtime_1.jsxs("div", { style: container, children: [
-            jsx_runtime_1.jsx(ControlButton_1.ControlButton, { onClick: onMinusClicked, style: buttonStyle, title: "Zoom out timeline", role: 'ControlButton', type: "button", disabled: timeline_zoom_1.TIMELINE_MIN_ZOOM === zoom, children: jsx_runtime_1.jsx(minus_1.Minus, { style: iconStyle }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx("input", { title: `Timeline zoom (${zoom}x)`, alt: `Timeline zoom (${zoom}x)`, type: 'range', min: timeline_zoom_1.TIMELINE_MIN_ZOOM, step: 0.1, value: zoom, max: timeline_zoom_1.TIMELINE_MAX_ZOOM, onChange: onChange, className: "__remotion-timeline-slider", tabIndex: tabIndex }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(ControlButton_1.ControlButton, { onClick: onPlusClicked, style: buttonStyle, title: "Zoom in timeline", role: 'button', type: "button", disabled: timeline_zoom_1.TIMELINE_MAX_ZOOM === zoom, children: jsx_runtime_1.jsx(plus_1.Plus, { color: colors_1.CURRENT_COLOR_LOWERCASE, style: iconStyle }) })
+            jsx_runtime_1.jsx(ControlButton_1.ControlButton, { onClick: onMinusClicked, style: buttonStyle, title: "Zoom out timeline", role: 'ControlButton', type: "button", children: (color) => jsx_runtime_1.jsx(canvas_zoom_1.CanvasZoomOutIcon, { color: color }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(TimelineZoomSlider, { maxWidth: sliderMaxWidth }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(ControlButton_1.ControlButton, { onClick: onPlusClicked, style: buttonStyle, title: "Zoom in timeline", role: 'button', type: "button", children: (color) => jsx_runtime_1.jsx(canvas_zoom_1.CanvasZoomIcon, { color: color }) })
         ] }));
 };
-exports.TimelineZoomControls = TimelineZoomControls;
+exports.TimelineZoomControls = react_1.default.memo(TimelineZoomControlsInner);

package/dist/components/Timeline/use-expanded-track-keyframe-rows.js

@@ -8,6 +8,7 @@ const timeline_layout_1 = require("../../helpers/timeline-layout");
 const timeline_node_path_key_1 = require("../../helpers/timeline-node-path-key");
 const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const get_node_keyframes_1 = require("./get-node-keyframes");
+const imperative_state_1 = require("./imperative-state");
 const timeline_expanded_filter_1 = require("./timeline-expanded-filter");
 const TimelineSelection_1 = require("./TimelineSelection");
 const getNodeCanEditEasing = ({ node, nodePath, propStatuses, }) => {
@@ -36,7 +37,6 @@ const useExpandedTrackKeyframeRows = ({ sequence, nodePathInfo, keyframeDisplayO
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { getDragOverrides, getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const { selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
-    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const tree = (0, react_1.useMemo)(() => (0, timeline_layout_1.buildTimelineTree)({
         sequence,
         nodePathInfo,
@@ -89,7 +89,7 @@ const useExpandedTrackKeyframeRows = ({ sequence, nodePathInfo, keyframeDisplayO
             keyframeDisplayOffset,
             getDragOverrides,
             getEffectDragOverrides,
-            timelinePosition,
+            timelinePosition: (0, imperative_state_1.getCurrentFrame)(),
         }),
     ])), [
         flat,
@@ -98,7 +98,6 @@ const useExpandedTrackKeyframeRows = ({ sequence, nodePathInfo, keyframeDisplayO
         keyframeDisplayOffset,
         nodePathInfo.sequenceSubscriptionKey,
         propStatuses,
-        timelinePosition,
     ]);
     const rows = (0, react_1.useMemo)(() => flat.map(({ node }) => {
         var _a;

package/dist/components/Timeline/use-sequence-freeze-frame-menu-item.d.ts

@@ -11,7 +11,7 @@ export declare const calculateSequenceFreezeFrame: ({ sequence, sequenceFrameOff
     readonly sequenceFrameOffset: number;
     readonly timelinePosition: number;
 }) => number;
-export declare const useSequenceFreezeFrameMenuItem: ({ clientId, nodePath, propStatusesForOverride, sequence, sequenceFrameOffset, setPropStatuses, timelinePosition, validatedSource, }: {
+export declare const getSequenceFreezeFrameMenuItem: ({ clientId, nodePath, propStatusesForOverride, sequence, sequenceFrameOffset, setPropStatuses, timelinePosition, validatedSource, }: {
     readonly clientId: string | null;
     readonly nodePath: SequencePropsSubscriptionKey | null;
     readonly propStatusesForOverride: Record<string, CanUpdateSequencePropStatus> | undefined;

package/dist/components/Timeline/use-sequence-freeze-frame-menu-item.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSequenceFreezeFrameMenuItem = exports.calculateSequenceFreezeFrame = exports.isSequenceVisibleAtTimelinePosition = exports.shouldShowFreezeFrameMenuItem = void 0;
-const react_1 = require("react");
+exports.getSequenceFreezeFrameMenuItem = exports.calculateSequenceFreezeFrame = exports.isSequenceVisibleAtTimelinePosition = exports.shouldShowFreezeFrameMenuItem = void 0;
 const save_sequence_prop_1 = require("./save-sequence-prop");
 const shouldShowFreezeFrameMenuItem = (sequence) => {
     return sequence.type !== 'audio';
@@ -21,7 +20,7 @@ const calculateSequenceFreezeFrame = ({ sequence, sequenceFrameOffset, timelineP
     return Math.min(Math.max(minFrame, rawFreezeFrame), maxFrame);
 };
 exports.calculateSequenceFreezeFrame = calculateSequenceFreezeFrame;
-const useSequenceFreezeFrameMenuItem = ({ clientId, nodePath, propStatusesForOverride, sequence, sequenceFrameOffset, setPropStatuses, timelinePosition, validatedSource, }) => {
+const getSequenceFreezeFrameMenuItem = ({ clientId, nodePath, propStatusesForOverride, sequence, sequenceFrameOffset, setPropStatuses, timelinePosition, validatedSource, }) => {
     const freezeStatus = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.freeze;
     const isFrozen = (freezeStatus === null || freezeStatus === void 0 ? void 0 : freezeStatus.status) === 'static' &&
         typeof freezeStatus.codeValue === 'number';
@@ -33,7 +32,7 @@ const useSequenceFreezeFrameMenuItem = ({ clientId, nodePath, propStatusesForOve
         freezeStatus !== undefined &&
         freezeStatus !== null &&
         freezeStatus.status === 'static';
-    const onToggleFreezeFrame = (0, react_1.useCallback)(() => {
+    const onToggleFreezeFrame = () => {
         if (!canToggleFreeze ||
             !sequence.controls ||
             nodePath === null ||
@@ -65,18 +64,8 @@ const useSequenceFreezeFrameMenuItem = ({ clientId, nodePath, propStatusesForOve
             undoLabel: remove ? 'Unfreeze sequence' : 'Freeze sequence',
             redoLabel: remove ? 'Freeze sequence again' : 'Unfreeze sequence again',
         });
-    }, [
-        canToggleFreeze,
-        clientId,
-        isFrozen,
-        nodePath,
-        sequence,
-        sequenceFrameOffset,
-        setPropStatuses,
-        timelinePosition,
-        validatedSource,
-    ]);
-    return (0, react_1.useMemo)(() => (0, exports.shouldShowFreezeFrameMenuItem)(sequence)
+    };
+    return (0, exports.shouldShowFreezeFrameMenuItem)(sequence)
         ? {
             type: 'item',
             id: 'toggle-freeze-frame',
@@ -89,6 +78,6 @@ const useSequenceFreezeFrameMenuItem = ({ clientId, nodePath, propStatusesForOve
             subMenu: null,
             value: 'toggle-freeze-frame',
         }
-        : null, [canToggleFreeze, isFrozen, onToggleFreezeFrame, sequence]);
+        : null;
 };
-exports.useSequenceFreezeFrameMenuItem = useSequenceFreezeFrameMenuItem;
+exports.getSequenceFreezeFrameMenuItem = getSequenceFreezeFrameMenuItem;

package/dist/components/Timeline/use-timeline-asset-drop.js

@@ -11,6 +11,7 @@ const effect_drag_and_drop_1 = require("../effect-drag-and-drop");
 const handle_drop_1 = require("../handle-drop");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const SvgImportDialog_1 = require("../SvgImportDialog");
+const imperative_state_1 = require("./imperative-state");
 const timeline_refs_1 = require("./timeline-refs");
 const timeline_scroll_logic_1 = require("./timeline-scroll-logic");
 const use_resolved_stack_1 = require("./use-resolved-stack");
@@ -28,7 +29,6 @@ const useTimelineAssetDrop = () => {
     var _a, _b;
     const { canvasContent, compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
-    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const chooseSvgImportMode = (0, SvgImportDialog_1.useSvgImportDialog)();
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const [isAddingAsset, setIsAddingAsset] = (0, react_1.useState)(false);
@@ -65,8 +65,8 @@ const useTimelineAssetDrop = () => {
                 timelineLeft: scrollable.getBoundingClientRect().left,
                 timelineWidth: scrollable.scrollWidth,
             })
-            : timelinePosition;
-    }, [timelinePosition, videoConfig]);
+            : (0, imperative_state_1.getCurrentFrame)();
+    }, [videoConfig]);
     const onAssetDragOver = (0, react_1.useCallback)((event) => {
         const timeline = timeline_refs_1.timelineVerticalScroll.current;
         const { dataTransfer } = event;

package/dist/components/Timeline/use-timeline-height.d.ts

@@ -1,5 +1,6 @@
 import type { TimelineTrackData } from '../../helpers/get-timeline-sequence-sort-key';
-export declare const useTimelineHeight: ({ shown, hasBeenCut, }: {
+export declare const useTimelineHeight: ({ shown, hasBeenCut, isStill, }: {
     shown: TimelineTrackData[];
     hasBeenCut: boolean;
+    isStill: boolean;
 }) => number;

package/dist/components/Timeline/use-timeline-height.js

@@ -11,7 +11,7 @@ const MaxTimelineTracks_1 = require("./MaxTimelineTracks");
 const timeline_expanded_filter_1 = require("./timeline-expanded-filter");
 const TimelineSelection_1 = require("./TimelineSelection");
 const TimelineTimeIndicators_1 = require("./TimelineTimeIndicators");
-const useTimelineHeight = ({ shown, hasBeenCut, }) => {
+const useTimelineHeight = ({ shown, hasBeenCut, isStill, }) => {
     const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
@@ -70,10 +70,11 @@ const useTimelineHeight = ({ shown, hasBeenCut, }) => {
         return (tracksHeight +
             timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM +
             (hasBeenCut ? MaxTimelineTracks_1.MAX_TIMELINE_TRACKS_NOTICE_HEIGHT : 0) +
-            TimelineTimeIndicators_1.TIMELINE_TIME_INDICATOR_HEIGHT);
+            (isStill ? 0 : TimelineTimeIndicators_1.TIMELINE_TIME_INDICATOR_HEIGHT));
     }, [
         shown,
         hasBeenCut,
+        isStill,
         previewServerConnected,
         getIsExpanded,
         propStatuses,

package/dist/components/TimelineCombobox.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { RenderInlineAction } from './InlineAction';
+import type { ComboboxValue } from './NewComposition/ComboBox';
+export declare const TimelineCombobox: React.FC<{
+    readonly values: ComboboxValue[];
+    readonly selectedId: string | number;
+    readonly title: string;
+    readonly labelWidth?: number;
+    readonly renderLeftItem?: RenderInlineAction;
+    readonly unhoveredIconColor?: string;
+}>;

package/dist/components/TimelineCombobox.js

@@ -0,0 +1,181 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineCombobox = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const player_1 = require("@remotion/player");
+const react_1 = require("react");
+const react_dom_1 = __importDefault(require("react-dom"));
+const colors_1 = require("../helpers/colors");
+const mobile_layout_1 = require("../helpers/mobile-layout");
+const noop_1 = require("../helpers/noop");
+const caret_1 = require("../icons/caret");
+const z_index_1 = require("../state/z-index");
+const layout_1 = require("./layout");
+const is_menu_item_1 = require("./Menu/is-menu-item");
+const portals_1 = require("./Menu/portals");
+const styles_1 = require("./Menu/styles");
+const MenuContent_1 = require("./NewComposition/MenuContent");
+const container = {
+    boxSizing: 'border-box',
+    border: 'none',
+    borderRadius: 3,
+    height: 24,
+    padding: '0 4px',
+    fontFamily: 'inherit',
+    maxWidth: '100%',
+};
+const label = {
+    flex: 'none',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    fontFamily: 'inherit',
+    fontSize: 12,
+    lineHeight: '16px',
+    color: colors_1.WHITE_ALPHA_80,
+    minWidth: 0,
+    textAlign: 'left',
+    whiteSpace: 'nowrap',
+};
+const TimelineCombobox = ({ values, selectedId, title, labelWidth = 32, renderLeftItem, unhoveredIconColor = colors_1.LIGHT_TEXT, }) => {
+    const [hovered, setIsHovered] = (0, react_1.useState)(false);
+    const [opened, setOpened] = (0, react_1.useState)(false);
+    const ref = (0, react_1.useRef)(null);
+    const { tabIndex, currentZIndex } = (0, z_index_1.useZIndex)();
+    const size = player_1.PlayerInternals.useElementSize(ref, {
+        triggerOnWindowResize: true,
+        shouldApplyCssTransforms: true,
+    });
+    const refresh = size === null || size === void 0 ? void 0 : size.refresh;
+    const onHide = (0, react_1.useCallback)(() => {
+        setOpened(false);
+    }, []);
+    const onOverlayPointerDown = (0, react_1.useCallback)((e) => {
+        e.stopPropagation();
+    }, []);
+    (0, react_1.useEffect)(() => {
+        const { current } = ref;
+        if (!current) {
+            return;
+        }
+        const onMouseEnter = () => setIsHovered(true);
+        const onMouseLeave = () => setIsHovered(false);
+        const onPointerDown = (e) => {
+            e.stopPropagation();
+            return setOpened((isOpened) => {
+                if (!isOpened) {
+                    refresh === null || refresh === void 0 ? void 0 : refresh();
+                }
+                return !isOpened;
+            });
+        };
+        const onClick = (e) => {
+            e.stopPropagation();
+            const isKeyboardInitiated = e.detail === 0;
+            if (!isKeyboardInitiated) {
+                return;
+            }
+            return setOpened((isOpened) => {
+                if (!isOpened) {
+                    refresh === null || refresh === void 0 ? void 0 : refresh();
+                    window.addEventListener('pointerup', (evt) => {
+                        if (!(0, is_menu_item_1.isMenuItem)(evt.target)) {
+                            setOpened(false);
+                        }
+                    }, { once: true });
+                }
+                return !isOpened;
+            });
+        };
+        current.addEventListener('mouseenter', onMouseEnter);
+        current.addEventListener('mouseleave', onMouseLeave);
+        current.addEventListener('pointerdown', onPointerDown);
+        current.addEventListener('click', onClick);
+        return () => {
+            current.removeEventListener('mouseenter', onMouseEnter);
+            current.removeEventListener('mouseleave', onMouseLeave);
+            current.removeEventListener('pointerdown', onPointerDown);
+            current.removeEventListener('click', onClick);
+        };
+    }, [refresh]);
+    const spaceToBottom = (0, react_1.useMemo)(() => {
+        const margin = 10;
+        if (size && opened) {
+            return size.windowSize.height - (size.top + size.height) - margin;
+        }
+        return 0;
+    }, [opened, size]);
+    const spaceToTop = (0, react_1.useMemo)(() => {
+        const margin = 10;
+        if (size && opened) {
+            return size.top - margin;
+        }
+        return 0;
+    }, [opened, size]);
+    const derivedMaxHeight = (0, react_1.useMemo)(() => {
+        return spaceToTop > spaceToBottom ? spaceToTop : spaceToBottom;
+    }, [spaceToBottom, spaceToTop]);
+    const isMobileLayout = (0, mobile_layout_1.useMobileLayout)();
+    const portalStyle = (0, react_1.useMemo)(() => {
+        if (!opened || !size) {
+            return null;
+        }
+        const spaceToRight = size.windowSize.width - size.left;
+        const spaceToLeft = size.left + size.width;
+        const minSpaceRequired = isMobileLayout
+            ? styles_1.MAX_MOBILE_MENU_WIDTH
+            : styles_1.MAX_MENU_WIDTH;
+        const verticalLayout = spaceToTop > spaceToBottom ? 'bottom' : 'top';
+        const canOpenOnLeft = spaceToLeft >= minSpaceRequired;
+        const canOpenOnRight = spaceToRight >= minSpaceRequired;
+        const horizontalLayout = canOpenOnRight ? 'left' : 'right';
+        return {
+            ...(verticalLayout === 'top'
+                ? {
+                    ...styles_1.menuContainerTowardsBottom,
+                    top: size.top + size.height,
+                }
+                : {
+                    ...styles_1.menuContainerTowardsTop,
+                    bottom: size.windowSize.height - size.top,
+                }),
+            ...(horizontalLayout === 'left'
+                ? { left: size.left }
+                : canOpenOnLeft
+                    ? { right: size.windowSize.width - size.left - size.width }
+                    : { left: 0 }),
+        };
+    }, [isMobileLayout, opened, size, spaceToBottom, spaceToTop]);
+    const selected = values.find((value) => value.id === selectedId);
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            ...container,
+            userSelect: 'none',
+            WebkitUserSelect: 'none',
+            display: 'inline-flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            backgroundColor: (0, colors_1.getBackgroundFromHoverState)({
+                hovered,
+                selected: opened,
+            }),
+        };
+    }, [hovered, opened]);
+    const foregroundColor = hovered || opened ? colors_1.WHITE : colors_1.WHITE_ALPHA_80;
+    const labelStyle = (0, react_1.useMemo)(() => {
+        return {
+            ...label,
+            width: labelWidth,
+            color: foregroundColor,
+        };
+    }, [foregroundColor, labelWidth]);
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsxs("button", { ref: ref, title: title, "aria-label": title, tabIndex: tabIndex, type: "button", style: style, className: is_menu_item_1.MENU_INITIATOR_CLASSNAME, children: [renderLeftItem ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [renderLeftItem(foregroundColor), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 })
+                        ] })) : null, selected ? (jsx_runtime_1.jsx("div", { title: typeof selected.label === 'string' ? selected.label : undefined, style: labelStyle, children: selected.label })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(caret_1.CaretDown, { color: hovered || opened ? colors_1.WHITE : unhoveredIconColor })
+                ] }), portalStyle
+                ? react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: styles_1.fullScreenOverlay, onPointerDown: onOverlayPointerDown, children: jsx_runtime_1.jsx("div", { style: styles_1.outerPortal, className: "css-reset", children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onOutsideClick: onHide, onEscape: onHide, children: jsx_runtime_1.jsx("div", { style: portalStyle, children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: noop_1.noop, values: values, onHide: onHide, leaveLeftSpace: true, preselectIndex: values.findIndex((value) => selected && value.id === selected.id), topItemCanBeUnselected: false, fixedHeight: derivedMaxHeight }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
+                : null] }));
+};
+exports.TimelineCombobox = TimelineCombobox;

package/dist/components/TimelineInOutToggle.js

@@ -19,8 +19,8 @@ const getTooltipText = (pointType, key) => [
     .filter(no_react_1.NoReactInternals.truthy)
     .join(' ');
 const style = {
-    width: 16,
-    height: 16,
+    width: 17,
+    height: 17,
 };
 exports.inOutHandles = (0, react_1.createRef)();
 exports.defaultInOutValue = { inFrame: null, outFrame: null };
@@ -239,7 +239,7 @@ const TimelineInOutPointToggle = () => {
         };
     }, [confId, onInMark, onInOutClear, onOutMark]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: getTooltipText('In', 'I'), "aria-label": getTooltipText('In', 'I'), onClick: onInMark, onContextMenu: clearInMark, disabled: !videoConfig || isFirstFrame, children: jsx_runtime_1.jsx(timelineInOutPointer_1.TimelineInPointer, { color: inFrame === null ? colors_1.WHITE : colors_1.BLUE, style: style }) }), jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: getTooltipText('Out', 'O'), "aria-label": getTooltipText('Out', 'O'), onClick: onOutMark, onContextMenu: clearOutMark, disabled: !videoConfig || isLastFrame, children: jsx_runtime_1.jsx(timelineInOutPointer_1.TimelineOutPointer, { color: outFrame === null ? colors_1.WHITE : colors_1.BLUE, style: style }) })
+            jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: getTooltipText('In', 'I'), "aria-label": getTooltipText('In', 'I'), onClick: onInMark, onContextMenu: clearInMark, disabled: !videoConfig || isFirstFrame, children: (color) => (jsx_runtime_1.jsx(timelineInOutPointer_1.TimelineInPointer, { color: inFrame === null ? color : colors_1.BLUE, style: style })) }), jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: getTooltipText('Out', 'O'), "aria-label": getTooltipText('Out', 'O'), onClick: onOutMark, onContextMenu: clearOutMark, disabled: !videoConfig || isLastFrame, children: (color) => (jsx_runtime_1.jsx(timelineInOutPointer_1.TimelineOutPointer, { color: outFrame === null ? color : colors_1.BLUE, style: style })) })
         ] }));
 };
 exports.TimelineInOutPointToggle = TimelineInOutPointToggle;