@remotion/studio 4.0.436 → 4.0.438

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

@@ -1,2 +1,2 @@
 import React from 'react';
-export declare const Timeline: React.FC;
+export declare const Timeline: React.NamedExoticComponent<{}>;

package/dist/components/Timeline/Timeline.js

@@ -1,12 +1,47 @@
 "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.Timeline = 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 calculate_timeline_1 = require("../../helpers/calculate-timeline");
+const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
+const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const is_menu_item_1 = require("../Menu/is-menu-item");
 const SplitterContainer_1 = require("../Splitter/SplitterContainer");
 const SplitterElement_1 = require("../Splitter/SplitterElement");
@@ -32,9 +67,13 @@ const container = {
     backgroundColor: colors_1.BACKGROUND,
 };
 const noop = () => undefined;
-const Timeline = () => {
+const TimelineInner = () => {
     var _a;
     const { sequences } = (0, react_1.useContext)(remotion_1.Internals.SequenceManager);
+    const { expandedTracks } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksContext);
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const visualModeEnabled = Boolean(process.env.EXPERIMENTAL_VISUAL_MODE_ENABLED) &&
+        previewServerState.type === 'connected';
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
     const timeline = (0, react_1.useMemo)(() => {
         if (!videoConfig) {
@@ -58,9 +97,15 @@ const Timeline = () => {
     const inner = (0, react_1.useMemo)(() => {
         return {
             height: shown.reduce((acc, track) => {
+                var _a;
+                const isExpanded = visualModeEnabled && ((_a = expandedTracks[track.sequence.id]) !== null && _a !== void 0 ? _a : false);
                 return (acc +
                     (0, timeline_layout_1.getTimelineLayerHeight)(track.sequence.type === 'video' ? 'video' : 'other') +
-                    Number(timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM));
+                    Number(timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM) +
+                    (isExpanded
+                        ? (0, timeline_layout_1.getExpandedTrackHeight)(track.sequence.controls) +
+                            timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM
+                        : 0));
             }, 0) +
                 timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM +
                 (hasBeenCut ? MaxTimelineTracks_1.MAX_TIMELINE_TRACKS_NOTICE_HEIGHT : 0) +
@@ -70,11 +115,11 @@ const Timeline = () => {
             minHeight: '100%',
             overflowX: 'hidden',
         };
-    }, [hasBeenCut, shown]);
+    }, [hasBeenCut, shown, expandedTracks, visualModeEnabled]);
     return (jsx_runtime_1.jsx("div", { ref: timeline_refs_1.timelineVerticalScroll, style: container, className: 'css-reset ' + is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(TimelineWidthProvider_1.TimelineWidthProvider, { children: jsx_runtime_1.jsx("div", { style: inner, children: jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { orientation: "vertical", defaultFlex: 0.2, id: "names-to-timeline", maxFlex: 0.5, minFlex: 0.15, children: [
                         jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "flexer", sticky: jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePlaceholders, {}), children: jsx_runtime_1.jsx(TimelineList_1.TimelineList, { timeline: shown }) }), jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { onCollapse: noop, allowToCollapse: "none" }), jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "anti-flexer", sticky: null, children: jsx_runtime_1.jsxs(TimelineScrollable_1.TimelineScrollable, { children: [
                                     jsx_runtime_1.jsx(TimelineTracks_1.TimelineTracks, { timeline: shown, hasBeenCut: hasBeenCut }), jsx_runtime_1.jsx(TimelineInOutPointer_1.TimelineInOutPointer, {}), jsx_runtime_1.jsx(TimelinePlayCursorSyncer_1.TimelinePlayCursorSyncer, {}), jsx_runtime_1.jsx(TimelineDragHandler_1.TimelineDragHandler, {}), jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimeIndicators, {}), jsx_runtime_1.jsx(TimelineSlider_1.TimelineSlider, {})
                                 ] }) })
                     ] }) }) }) }));
 };
-exports.Timeline = Timeline;
+exports.Timeline = react_1.default.memo(TimelineInner);

package/dist/components/TopPanel.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 export declare const useResponsiveSidebarStatus: () => "collapsed" | "expanded";
-export declare const TopPanel: React.FC<{
+export declare const TopPanel: React.NamedExoticComponent<{
     readonly readOnlyStudio: boolean;
     readonly onMounted: () => void;
     readonly drawRef: React.RefObject<HTMLDivElement | null>;

package/dist/components/TopPanel.js

@@ -1,11 +1,44 @@
 "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;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TopPanel = exports.useResponsiveSidebarStatus = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
+const react_1 = __importStar(require("react"));
 const mobile_layout_1 = require("../helpers/mobile-layout");
 const use_breakpoint_1 = require("../helpers/use-breakpoint");
 const editor_rulers_1 = require("../state/editor-rulers");
@@ -48,7 +81,7 @@ const useResponsiveSidebarStatus = () => {
     return actualStateLeft;
 };
 exports.useResponsiveSidebarStatus = useResponsiveSidebarStatus;
-const TopPanel = ({ readOnlyStudio, onMounted, drawRef, bufferStateDelayInMilliseconds }) => {
+const TopPanelInner = ({ readOnlyStudio, onMounted, drawRef, bufferStateDelayInMilliseconds }) => {
     const { setSidebarCollapsedState, sidebarCollapsedStateRight } = (0, react_1.useContext)(sidebar_1.SidebarContext);
     const rulersAreVisible = (0, use_is_ruler_visible_1.useIsRulerVisible)();
     const actualStateLeft = (0, exports.useResponsiveSidebarStatus)();
@@ -80,4 +113,4 @@ const TopPanel = ({ readOnlyStudio, onMounted, drawRef, bufferStateDelayInMillis
                     ] }) }), jsx_runtime_1.jsx(PreviewToolbar_1.PreviewToolbar, { bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds, readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(CurrentCompositionSideEffects_1.CurrentCompositionKeybindings, { readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(CurrentCompositionSideEffects_1.TitleUpdater, {})
         ] }));
 };
-exports.TopPanel = TopPanel;
+exports.TopPanel = react_1.default.memo(TopPanelInner);