@remotion/studio 4.0.427 → 4.0.428

package/dist/components/EditorContexts.js

@@ -11,6 +11,7 @@ const preview_size_1 = require("../state/preview-size");
 const sidebar_1 = require("../state/sidebar");
 const VisualControls_1 = require("../visual-controls/VisualControls");
 const CheckerboardProvider_1 = require("./CheckerboardProvider");
+const ExpandedTracksProvider_1 = require("./ExpandedTracksProvider");
 const get_zod_if_possible_1 = require("./get-zod-if-possible");
 const MediaVolumeProvider_1 = require("./MediaVolumeProvider");
 const ModalsProvider_1 = require("./ModalsProvider");
@@ -22,7 +23,7 @@ const ShowRulersProvider_1 = require("./ShowRulersProvider");
 const ZoomGesturesProvider_1 = require("./ZoomGesturesProvider");
 const EditorContexts = ({ children, readOnlyStudio }) => {
     return (jsx_runtime_1.jsx(get_zod_if_possible_1.ZodProvider, { children: jsx_runtime_1.jsx(VisualControls_1.VisualControlsProvider, { children: jsx_runtime_1.jsx(client_id_1.PreviewServerConnection, { readOnlyStudio: readOnlyStudio, children: jsx_runtime_1.jsxs(context_1.RenderQueueContextProvider, { children: [
-                        jsx_runtime_1.jsx(ClientRenderQueueProcessor_1.ClientRenderQueueProcessor, {}), jsx_runtime_1.jsx(keybindings_1.KeybindingContextProvider, { children: jsx_runtime_1.jsx(CheckerboardProvider_1.CheckerboardProvider, { children: jsx_runtime_1.jsx(ZoomGesturesProvider_1.ZoomGesturesProvider, { children: jsx_runtime_1.jsx(ShowRulersProvider_1.ShowRulersProvider, { children: jsx_runtime_1.jsx(ShowGuidesProvider_1.ShowGuidesProvider, { children: jsx_runtime_1.jsx(preview_size_1.PreviewSizeProvider, { children: jsx_runtime_1.jsx(ModalsProvider_1.ModalsProvider, { children: jsx_runtime_1.jsx(MediaVolumeProvider_1.MediaVolumeProvider, { children: jsx_runtime_1.jsx(player_1.PlayerInternals.PlayerEmitterProvider, { currentPlaybackRate: null, children: jsx_runtime_1.jsx(sidebar_1.SidebarContextProvider, { children: jsx_runtime_1.jsx(folders_1.FolderContextProvider, { children: jsx_runtime_1.jsx(highest_z_index_1.HighestZIndexProvider, { children: jsx_runtime_1.jsx(SetTimelineInOutProvider_1.SetTimelineInOutProvider, { children: children }) }) }) }) }) }) }) }) }) }) }) }) })
+                        jsx_runtime_1.jsx(ClientRenderQueueProcessor_1.ClientRenderQueueProcessor, {}), jsx_runtime_1.jsx(keybindings_1.KeybindingContextProvider, { children: jsx_runtime_1.jsx(CheckerboardProvider_1.CheckerboardProvider, { children: jsx_runtime_1.jsx(ZoomGesturesProvider_1.ZoomGesturesProvider, { children: jsx_runtime_1.jsx(ShowRulersProvider_1.ShowRulersProvider, { children: jsx_runtime_1.jsx(ShowGuidesProvider_1.ShowGuidesProvider, { children: jsx_runtime_1.jsx(preview_size_1.PreviewSizeProvider, { children: jsx_runtime_1.jsx(ModalsProvider_1.ModalsProvider, { children: jsx_runtime_1.jsx(MediaVolumeProvider_1.MediaVolumeProvider, { children: jsx_runtime_1.jsx(player_1.PlayerInternals.PlayerEmitterProvider, { currentPlaybackRate: null, children: jsx_runtime_1.jsx(sidebar_1.SidebarContextProvider, { children: jsx_runtime_1.jsx(folders_1.FolderContextProvider, { children: jsx_runtime_1.jsx(highest_z_index_1.HighestZIndexProvider, { children: jsx_runtime_1.jsx(SetTimelineInOutProvider_1.SetTimelineInOutProvider, { children: jsx_runtime_1.jsx(ExpandedTracksProvider_1.ExpandedTracksProvider, { children: children }) }) }) }) }) }) }) }) }) }) }) }) }) })
                     ] }) }) }) }));
 };
 exports.EditorContexts = EditorContexts;

package/dist/components/ExpandedTracksProvider.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+type ExpandedTracksContextValue = {
+    readonly expandedTracks: Record<string, boolean>;
+    readonly toggleTrack: (id: string) => void;
+};
+export declare const ExpandedTracksContext: React.Context<ExpandedTracksContextValue>;
+export declare const ExpandedTracksProvider: React.FC<{
+    readonly children: React.ReactNode;
+}>;
+export {};

package/dist/components/ExpandedTracksProvider.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExpandedTracksProvider = exports.ExpandedTracksContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+exports.ExpandedTracksContext = (0, react_1.createContext)({
+    expandedTracks: {},
+    toggleTrack: () => {
+        throw new Error('ExpandedTracksContext not initialized');
+    },
+});
+const ExpandedTracksProvider = ({ children }) => {
+    const [expandedTracks, setExpandedTracks] = (0, react_1.useState)({});
+    const toggleTrack = (0, react_1.useCallback)((id) => {
+        setExpandedTracks((prev) => ({
+            ...prev,
+            [id]: !prev[id],
+        }));
+    }, []);
+    const value = (0, react_1.useMemo)(() => ({
+        expandedTracks,
+        toggleTrack,
+    }), [expandedTracks, toggleTrack]);
+    return (jsx_runtime_1.jsx(exports.ExpandedTracksContext.Provider, { value: value, children: children }));
+};
+exports.ExpandedTracksProvider = ExpandedTracksProvider;

package/dist/components/Timeline/TimelineListItem.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const colors_1 = require("../../helpers/colors");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
+const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const TimelineLayerEye_1 = require("./TimelineLayerEye");
 const TimelineStack_1 = require("./TimelineStack");
 const SPACING = 5;
@@ -13,8 +14,43 @@ const space = {
     width: SPACING,
     flexShrink: 0,
 };
+const arrowButton = {
+    background: 'none',
+    border: 'none',
+    color: 'white',
+    cursor: 'pointer',
+    padding: 0,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 12,
+    height: 12,
+    flexShrink: 0,
+    fontSize: 8,
+    marginRight: 4,
+    userSelect: 'none',
+    outline: 'none',
+    lineHeight: 1,
+};
+const expandedSection = {
+    height: timeline_layout_1.TIMELINE_TRACK_EXPANDED_HEIGHT,
+    color: 'white',
+    fontFamily: 'Arial, Helvetica, sans-serif',
+    fontSize: 12,
+    display: 'flex',
+    alignItems: 'center',
+    paddingLeft: 28,
+    borderBottom: `1px solid ${colors_1.TIMELINE_TRACK_SEPARATOR}`,
+};
 const TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
+    var _a;
+    const visualModeEnabled = Boolean(process.env.EXPERIMENTAL_VISUAL_MODE_ENABLED);
     const { hidden, setHidden } = (0, react_1.useContext)(remotion_1.Internals.SequenceVisibilityToggleContext);
+    const { expandedTracks, toggleTrack } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksContext);
+    const isExpanded = (_a = expandedTracks[sequence.id]) !== null && _a !== void 0 ? _a : false;
+    const onToggleExpand = (0, react_1.useCallback)(() => {
+        toggleTrack(sequence.id);
+    }, [sequence.id, toggleTrack]);
     const padder = (0, react_1.useMemo)(() => {
         return {
             width: Number(SPACING * 1.5) * nestedDepth,
@@ -48,8 +84,15 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
             borderBottom: `1px solid ${colors_1.TIMELINE_TRACK_SEPARATOR}`,
         };
     }, [sequence.type]);
-    return (jsx_runtime_1.jsxs("div", { style: outer, children: [
-            jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: onToggleVisibility }), jsx_runtime_1.jsx("div", { style: padder }), sequence.parent && nestedDepth > 0 ? jsx_runtime_1.jsx("div", { style: space }) : null, jsx_runtime_1.jsx(TimelineStack_1.TimelineStack, { sequence: sequence, isCompact: isCompact })
-        ] }));
+    const arrowStyle = (0, react_1.useMemo)(() => {
+        return {
+            ...arrowButton,
+            transform: isExpanded ? 'rotate(90deg)' : 'rotate(0deg)',
+        };
+    }, [isExpanded]);
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsxs("div", { style: outer, children: [
+                    jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: onToggleVisibility }), jsx_runtime_1.jsx("div", { style: padder }), sequence.parent && nestedDepth > 0 ? jsx_runtime_1.jsx("div", { style: space }) : null, visualModeEnabled ? (jsx_runtime_1.jsx("button", { type: "button", style: arrowStyle, onClick: onToggleExpand, "aria-expanded": isExpanded, "aria-label": `${isExpanded ? 'Collapse' : 'Expand'} track`, children: jsx_runtime_1.jsx("svg", { width: "12", height: "12", viewBox: "0 0 8 8", style: { display: 'block' }, children: jsx_runtime_1.jsx("path", { d: "M2 1L6 4L2 7Z", fill: "white" }) }) })) : null, jsx_runtime_1.jsx(TimelineStack_1.TimelineStack, { sequence: sequence, isCompact: isCompact })
+                ] }), visualModeEnabled && isExpanded ? (jsx_runtime_1.jsx("div", { style: expandedSection, children: "Expanded track details" })) : null] }));
 };
 exports.TimelineListItem = TimelineListItem;

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

@@ -158,7 +158,7 @@ const TimelineStack = ({ isCompact, sequence }) => {
             whiteSpace: 'nowrap',
             textOverflow: 'ellipsis',
             overflow: 'hidden',
-            lineHeight: 1,
+            lineHeight: 1.2,
             color: opening && isCompact ? colors_1.VERY_LIGHT_TEXT : colors_1.LIGHT_COLOR,
             userSelect: 'none',
             WebkitUserSelect: 'none',

package/dist/components/Timeline/TimelineTracks.js

@@ -4,6 +4,7 @@ exports.TimelineTracks = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
+const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const MaxTimelineTracks_1 = require("./MaxTimelineTracks");
 const TimelineSequence_1 = require("./TimelineSequence");
 const TimelineTimeIndicators_1 = require("./TimelineTimeIndicators");
@@ -16,7 +17,12 @@ const content = {
 const timelineContent = {
     minHeight: '100%',
 };
+const expandedPlaceholder = {
+    height: timeline_layout_1.TIMELINE_TRACK_EXPANDED_HEIGHT + timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM,
+};
 const TimelineTracks = ({ timeline, hasBeenCut }) => {
+    const { expandedTracks } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksContext);
+    const visualModeEnabled = Boolean(process.env.EXPERIMENTAL_VISUAL_MODE_ENABLED);
     const timelineStyle = (0, react_1.useMemo)(() => {
         return {
             ...timelineContent,
@@ -26,13 +32,16 @@ const TimelineTracks = ({ timeline, hasBeenCut }) => {
     return (jsx_runtime_1.jsxs("div", { style: timelineStyle, children: [
             jsx_runtime_1.jsxs("div", { style: content, children: [
                     jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePadding, {}), timeline.map((track) => {
+                        var _a;
                         if ((0, is_collapsed_1.isTrackHidden)(track)) {
                             return null;
                         }
-                        return (jsx_runtime_1.jsx("div", { style: {
-                                height: (0, timeline_layout_1.getTimelineLayerHeight)(track.sequence.type === 'video' ? 'video' : 'other'),
-                                marginBottom: timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM,
-                            }, children: jsx_runtime_1.jsx(TimelineSequence_1.TimelineSequence, { s: track.sequence }) }, track.sequence.id));
+                        const isExpanded = (_a = expandedTracks[track.sequence.id]) !== null && _a !== void 0 ? _a : false;
+                        return (jsx_runtime_1.jsxs("div", { children: [
+                                jsx_runtime_1.jsx("div", { style: {
+                                        height: (0, timeline_layout_1.getTimelineLayerHeight)(track.sequence.type === 'video' ? 'video' : 'other'),
+                                        marginBottom: timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM,
+                                    }, children: jsx_runtime_1.jsx(TimelineSequence_1.TimelineSequence, { s: track.sequence }) }), visualModeEnabled && isExpanded ? (jsx_runtime_1.jsx("div", { style: expandedPlaceholder })) : null] }, track.sequence.id));
                     })] }), hasBeenCut ? jsx_runtime_1.jsx(MaxTimelineTracks_1.MaxTimelineTracksReached, {}) : null] }));
 };
 exports.TimelineTracks = TimelineTracks;