@remotion/studio 4.0.504 → 4.0.506

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,4 +1,4 @@
 import React from 'react';
-export declare const TimelineZoomControls: React.FC<{
-    readonly sliderMaxWidth?: number;
+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,9 +53,6 @@ const container = {
 const buttonStyle = {
     fontSize: 24,
 };
-const iconStyle = {
-    width: 14,
-};
 const TimelineZoomSlider = ({ maxWidth }) => {
     var _a;
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
@@ -47,10 +76,9 @@ const TimelineZoomSlider = ({ maxWidth }) => {
     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 TimelineZoomControls = ({ sliderMaxWidth }) => {
-    var _a;
+const TimelineZoomControlsInner = ({ sliderMaxWidth }) => {
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
-    const { setZoom, zoom: zoomMap } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
+    const { setZoom } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
     const onMinusClicked = (0, react_1.useCallback)(() => {
         if (canvasContent === null || canvasContent.type !== 'composition') {
             return;
@@ -69,9 +97,8 @@ const TimelineZoomControls = ({ sliderMaxWidth }) => {
         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: (color) => jsx_runtime_1.jsx(minus_1.Minus, { style: iconStyle, 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", disabled: timeline_zoom_1.TIMELINE_MAX_ZOOM === zoom, children: (color) => jsx_runtime_1.jsx(plus_1.Plus, { color: color, 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/reset-selected-timeline-props.js

@@ -71,7 +71,7 @@ const getTimelinePropResetTargets = ({ selections, sequences, overrideIdsToNodeP
             const sequencePropStatus = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath);
             const { merged: sequenceValuesDotNotation } = remotion_1.Internals.computeEffectiveSchemaValuesDotNotation({
                 schema: sequence.controls.schema,
-                currentValue: sequence.controls.currentRuntimeValueDotNotation,
+                currentValue: sequence.controls.runtimeValues.getSnapshot(),
                 overrideValues: {},
                 propStatus: sequencePropStatus,
                 frame: null,

package/dist/components/Timeline/should-subscribe-to-sequence-props.d.ts

@@ -1,4 +1,4 @@
 import type { TSequence } from 'remotion';
 export declare const shouldSubscribeToSequenceProps: (sequence: TSequence, previewConnected: boolean) => sequence is TSequence & {
-    readonly controls: import("remotion").SequenceControls;
+    readonly controls: import("remotion").SequenceRegistrationControls;
 };

package/dist/components/Timeline/timeline-asset-link.d.ts

@@ -1,4 +1,4 @@
-import type { SequenceControls } from 'remotion';
+import type { SequenceRegistrationControls } from 'remotion';
 type LinkInfo = {
     kind: 'local';
     assetPath: string;
@@ -13,7 +13,7 @@ export declare const splitRemoteSourceForMiddleEllipsis: (src: string) => {
     leading: string;
     trailing: string;
 };
-export declare const getTimelineAssetSrcFromSchema: (controls: SequenceControls | null) => string | null;
+export declare const getTimelineAssetSrcFromSchema: (controls: SequenceRegistrationControls | null, runtimeValues?: Readonly<Record<string, unknown>> | undefined) => string | null;
 export declare const getTimelineAssetLinkInfo: (src: string) => LinkInfo;
 export declare const openTimelineAssetLink: (linkInfo: TimelineAssetLinkInfo, selectAsset: (asset: string) => void) => void;
 export {};

package/dist/components/Timeline/timeline-asset-link.js

@@ -21,11 +21,11 @@ const splitRemoteSourceForMiddleEllipsis = (src) => {
     };
 };
 exports.splitRemoteSourceForMiddleEllipsis = splitRemoteSourceForMiddleEllipsis;
-const getTimelineAssetSrcFromSchema = (controls) => {
+const getTimelineAssetSrcFromSchema = (controls, runtimeValues = controls === null || controls === void 0 ? void 0 : controls.runtimeValues.getSnapshot()) => {
     if (!controls || !(0, studio_shared_1.getAssetSchemaKeys)(controls.schema).includes('src')) {
         return null;
     }
-    const { src } = controls.currentRuntimeValueDotNotation;
+    const { src } = runtimeValues !== null && runtimeValues !== void 0 ? runtimeValues : {};
     return typeof src === 'string' ? src : null;
 };
 exports.getTimelineAssetSrcFromSchema = getTimelineAssetSrcFromSchema;

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

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const timeline_node_path_key_1 = require("../../helpers/timeline-node-path-key");
+const use_runtime_values_1 = require("../../helpers/use-runtime-values");
 const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const get_node_keyframes_1 = require("./get-node-keyframes");
 const imperative_state_1 = require("./imperative-state");
@@ -37,6 +38,7 @@ 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 runtimeValues = (0, use_runtime_values_1.useRuntimeValues)(sequence.controls);
     const tree = (0, react_1.useMemo)(() => (0, timeline_layout_1.buildTimelineTree)({
         sequence,
         nodePathInfo,
@@ -45,12 +47,14 @@ const useExpandedTrackKeyframeRows = ({ sequence, nodePathInfo, keyframeDisplayO
         propStatuses,
         includeTextContent: false,
         includeSourceControls: false,
+        runtimeValues,
     }), [
         propStatuses,
         getDragOverrides,
         getEffectDragOverrides,
         nodePathInfo,
         sequence,
+        runtimeValues,
     ]);
     const selectedRowKeys = (0, react_1.useMemo)(() => (0, timeline_expanded_filter_1.getSelectedTimelineExpandedRowKeys)(selectedItems), [selectedItems]);
     const filteredTree = (0, react_1.useMemo)(() => (0, timeline_expanded_filter_1.filterTimelineExpandedTree)({

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

@@ -132,6 +132,7 @@ const useTimelineAssetDrop = () => {
                 event,
                 fps: videoConfig.fps,
                 from: frame,
+                preferCompositionStart: false,
             });
         }
         finally {

package/dist/components/Timeline/use-timeline-expanded-tree.d.ts

@@ -9,6 +9,7 @@ export declare const useTimelineExpandedTree: ({ sequence, nodePathInfo, include
     filteredTree: import("../../helpers/timeline-layout").TimelineTreeNode[];
     getIsExpanded: import("../ExpandedTracksProvider").GetIsExpanded;
     propStatuses: import("remotion").PropStatuses;
+    runtimeValues: Readonly<Record<string, unknown>>;
     toggleTrack: (nodePathInfo: SequenceNodePathInfo) => void;
     tree: import("../../helpers/timeline-layout").TimelineTreeNode[];
 };

package/dist/components/Timeline/use-timeline-expanded-tree.js

@@ -4,6 +4,7 @@ exports.useTimelineExpandedTree = void 0;
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
+const use_runtime_values_1 = require("../../helpers/use-runtime-values");
 const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const get_node_keyframes_1 = require("./get-node-keyframes");
 const timeline_expanded_filter_1 = require("./timeline-expanded-filter");
@@ -14,6 +15,7 @@ const useTimelineExpandedTree = ({ sequence, nodePathInfo, includeTextContent, i
     const { propStatuses: visualModePropStatuses } = (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 runtimeValues = (0, use_runtime_values_1.useRuntimeValues)(sequence.controls);
     const tree = (0, react_1.useMemo)(() => (0, timeline_layout_1.buildTimelineTree)({
         sequence,
         nodePathInfo,
@@ -22,6 +24,7 @@ const useTimelineExpandedTree = ({ sequence, nodePathInfo, includeTextContent, i
         propStatuses: visualModePropStatuses,
         includeTextContent,
         includeSourceControls,
+        runtimeValues,
     }), [
         sequence,
         nodePathInfo,
@@ -30,6 +33,7 @@ const useTimelineExpandedTree = ({ sequence, nodePathInfo, includeTextContent, i
         visualModePropStatuses,
         includeTextContent,
         includeSourceControls,
+        runtimeValues,
     ]);
     const selectedRowKeys = (0, react_1.useMemo)(() => (0, timeline_expanded_filter_1.getSelectedTimelineExpandedRowKeys)(selectedItems), [selectedItems]);
     const filteredTree = (0, react_1.useMemo)(() => (0, timeline_expanded_filter_1.filterTimelineExpandedTree)({
@@ -57,6 +61,7 @@ const useTimelineExpandedTree = ({ sequence, nodePathInfo, includeTextContent, i
         filteredTree,
         getIsExpanded,
         propStatuses: visualModePropStatuses,
+        runtimeValues,
         toggleTrack,
         tree,
     };

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

@@ -5,13 +5,14 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
+const use_runtime_values_1 = require("../../helpers/use-runtime-values");
 const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const get_node_keyframes_1 = require("./get-node-keyframes");
 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);
@@ -19,6 +20,20 @@ const useTimelineHeight = ({ shown, hasBeenCut, }) => {
     const { selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
     const previewServerConnected = previewServerState.type === 'connected';
     const selectedRowKeys = (0, react_1.useMemo)(() => (0, timeline_expanded_filter_1.getSelectedTimelineExpandedRowKeys)(selectedItems), [selectedItems]);
+    const expandedControls = (0, react_1.useMemo)(() => shown.flatMap((track) => {
+        if (!previewServerConnected ||
+            track.nodePathInfo === null ||
+            !getIsExpanded(track.nodePathInfo) ||
+            track.sequence.controls === null) {
+            return [];
+        }
+        return [track.sequence.controls];
+    }), [getIsExpanded, previewServerConnected, shown]);
+    const runtimeValueSnapshots = (0, use_runtime_values_1.useRuntimeValueSnapshots)(expandedControls);
+    const runtimeValuesByStore = (0, react_1.useMemo)(() => new Map(expandedControls.map((controls, index) => [
+        controls.runtimeValues,
+        runtimeValueSnapshots[index],
+    ])), [expandedControls, runtimeValueSnapshots]);
     return (0, react_1.useMemo)(() => {
         const tracksHeight = shown.reduce((acc, track) => {
             const isExpanded = previewServerConnected &&
@@ -27,6 +42,7 @@ const useTimelineHeight = ({ shown, hasBeenCut, }) => {
             const layerHeight = (0, timeline_layout_1.getTimelineLayerHeight)(track.sequence.type) +
                 timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM;
             const expandedHeight = (() => {
+                var _a;
                 if (!isExpanded || track.nodePathInfo === null) {
                     return 0;
                 }
@@ -39,6 +55,9 @@ const useTimelineHeight = ({ shown, hasBeenCut, }) => {
                     propStatuses,
                     includeTextContent: false,
                     includeSourceControls: false,
+                    runtimeValues: track.sequence.controls
+                        ? ((_a = runtimeValuesByStore.get(track.sequence.controls.runtimeValues)) !== null && _a !== void 0 ? _a : null)
+                        : null,
                 });
                 const filteredTree = (0, timeline_expanded_filter_1.filterTimelineExpandedTree)({
                     nodes: tree,
@@ -70,16 +89,18 @@ 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,
         getDragOverrides,
         getEffectDragOverrides,
         selectedRowKeys,
+        runtimeValuesByStore,
     ]);
 };
 exports.useTimelineHeight = useTimelineHeight;

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

@@ -25,11 +25,15 @@ const style = {
 exports.inOutHandles = (0, react_1.createRef)();
 exports.defaultInOutValue = { inFrame: null, outFrame: null };
 const TimelineInOutPointToggle = () => {
+    var _a;
     const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
     const { setInAndOutFrames } = (0, in_out_1.useTimelineSetInOutFramePosition)();
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
     const keybindings = (0, use_keybinding_1.useKeybinding)();
-    const { getCurrentFrame, isFirstFrame, isLastFrame } = player_1.PlayerInternals.usePlayer();
+    const { getCurrentFrame } = player_1.PlayerInternals.usePlayerMethods();
+    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
+    const isFirstFrame = timelinePosition === 0;
+    const isLastFrame = timelinePosition === ((_a = videoConfig === null || videoConfig === void 0 ? void 0 : videoConfig.durationInFrames) !== null && _a !== void 0 ? _a : 1) - 1;
     const onInOutClear = (0, react_1.useCallback)((composition) => {
         setInAndOutFrames((prev) => {
             return {