@remotion/studio 4.0.441 → 4.0.443

package/dist/components/AudioWaveform.js

@@ -2,18 +2,18 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AudioWaveform = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const media_utils_1 = require("@remotion/media-utils");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const colors_1 = require("../helpers/colors");
 const timeline_layout_1 = require("../helpers/timeline-layout");
-const AudioWaveformBar_1 = require("./AudioWaveformBar");
+const draw_peaks_1 = require("./draw-peaks");
+const load_waveform_peaks_1 = require("./load-waveform-peaks");
 const container = {
     display: 'flex',
     flexDirection: 'row',
-    alignItems: 'flex-end',
+    alignItems: 'center',
     position: 'absolute',
-    height: (0, timeline_layout_1.getTimelineLayerHeight)('other'),
+    inset: 0,
 };
 const errorMessage = {
     fontSize: 13,
@@ -25,46 +25,87 @@ const errorMessage = {
     maxWidth: 450,
     opacity: 0.75,
 };
-const canvasStyle = {
+const waveformCanvasStyle = {
+    pointerEvents: 'none',
+};
+const volumeCanvasStyle = {
     position: 'absolute',
 };
 const AudioWaveform = ({ src, startFrom, durationInFrames, visualizationWidth, volume, doesVolumeChange, playbackRate, }) => {
-    const [metadata, setMetadata] = (0, react_1.useState)(null);
+    const [peaks, setPeaks] = (0, react_1.useState)(null);
     const [error, setError] = (0, react_1.useState)(null);
-    const mountState = (0, react_1.useRef)({ isMounted: true });
     const vidConf = remotion_1.Internals.useUnsafeVideoConfig();
     if (vidConf === null) {
         throw new Error('Expected video config');
     }
-    const canvas = (0, react_1.useRef)(null);
+    const containerRef = (0, react_1.useRef)(null);
+    const waveformCanvas = (0, react_1.useRef)(null);
+    const volumeCanvas = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
-        const { current } = mountState;
-        current.isMounted = true;
-        return () => {
-            current.isMounted = false;
-        };
-    }, []);
+        const controller = new AbortController();
+        setError(null);
+        (0, load_waveform_peaks_1.loadWaveformPeaks)(src, controller.signal)
+            .then((p) => {
+            if (!controller.signal.aborted) {
+                setPeaks(p);
+            }
+        })
+            .catch((err) => {
+            if (!controller.signal.aborted) {
+                setError(err);
+            }
+        });
+        return () => controller.abort();
+    }, [src]);
+    const portionPeaks = (0, react_1.useMemo)(() => {
+        if (!peaks || peaks.length === 0) {
+            return null;
+        }
+        const startTimeInSeconds = startFrom / vidConf.fps;
+        const durationInSeconds = (durationInFrames / vidConf.fps) * playbackRate;
+        const startPeakIndex = Math.floor(startTimeInSeconds * load_waveform_peaks_1.TARGET_SAMPLE_RATE);
+        const endPeakIndex = Math.ceil((startTimeInSeconds + durationInSeconds) * load_waveform_peaks_1.TARGET_SAMPLE_RATE);
+        return peaks.slice(Math.max(0, startPeakIndex), Math.min(peaks.length, endPeakIndex));
+    }, [peaks, startFrom, durationInFrames, vidConf.fps, playbackRate]);
+    (0, react_1.useEffect)(() => {
+        const { current: canvasElement } = waveformCanvas;
+        const { current: containerElement } = containerRef;
+        if (!canvasElement ||
+            !containerElement ||
+            !portionPeaks ||
+            portionPeaks.length === 0) {
+            return;
+        }
+        const h = containerElement.clientHeight;
+        const w = Math.ceil(visualizationWidth);
+        canvasElement.width = w;
+        canvasElement.height = h;
+        const vol = typeof volume === 'number' ? volume : 1;
+        (0, draw_peaks_1.drawBars)(canvasElement, portionPeaks, 'rgba(255, 255, 255, 0.6)', vol, w);
+    }, [portionPeaks, visualizationWidth, volume]);
     (0, react_1.useEffect)(() => {
-        if (!canvas.current) {
+        const { current: volumeCanvasElement } = volumeCanvas;
+        const { current: containerElement } = containerRef;
+        if (!volumeCanvasElement || !containerElement) {
             return;
         }
-        const context = canvas.current.getContext('2d');
+        const h = containerElement.clientHeight;
+        const context = volumeCanvasElement.getContext('2d');
         if (!context) {
             return;
         }
-        context.clearRect(0, 0, visualizationWidth, (0, timeline_layout_1.getTimelineLayerHeight)('other'));
+        volumeCanvasElement.width = Math.ceil(visualizationWidth);
+        volumeCanvasElement.height = h;
+        context.clearRect(0, 0, visualizationWidth, h);
         if (!doesVolumeChange || typeof volume === 'number') {
-            // The volume is a number, meaning it could change on each frame-
-            // User did not use the (f: number) => number syntax, so we can't draw
-            // a visualization.
             return;
         }
         const volumes = volume.split(',').map((v) => Number(v));
         context.beginPath();
-        context.moveTo(0, (0, timeline_layout_1.getTimelineLayerHeight)('other'));
+        context.moveTo(0, h);
         volumes.forEach((v, index) => {
             const x = (index / (volumes.length - 1)) * visualizationWidth;
-            const y = (1 - v) * ((0, timeline_layout_1.getTimelineLayerHeight)('other') - timeline_layout_1.TIMELINE_BORDER * 2) + 1;
+            const y = (1 - v) * (h - timeline_layout_1.TIMELINE_BORDER * 2) + 1;
             if (index === 0) {
                 context.moveTo(x, y);
             }
@@ -74,50 +115,15 @@ const AudioWaveform = ({ src, startFrom, durationInFrames, visualizationWidth, v
         });
         context.strokeStyle = colors_1.LIGHT_TRANSPARENT;
         context.stroke();
-    }, [visualizationWidth, metadata, startFrom, volume, doesVolumeChange]);
-    (0, react_1.useEffect)(() => {
-        setError(null);
-        (0, media_utils_1.getAudioData)(src)
-            .then((data) => {
-            if (mountState.current.isMounted) {
-                setMetadata(data);
-            }
-        })
-            .catch((err) => {
-            if (mountState.current.isMounted) {
-                setError(err);
-            }
-        });
-    }, [src, vidConf.fps]);
-    const normalized = (0, react_1.useMemo)(() => {
-        if (!metadata || metadata.numberOfChannels === 0) {
-            return [];
-        }
-        const numberOfSamples = Math.floor(visualizationWidth / (AudioWaveformBar_1.WAVEFORM_BAR_LENGTH + AudioWaveformBar_1.WAVEFORM_BAR_MARGIN));
-        return (0, media_utils_1.getWaveformPortion)({
-            audioData: metadata,
-            startTimeInSeconds: startFrom / vidConf.fps,
-            durationInSeconds: Math.min((durationInFrames / vidConf.fps) * playbackRate, metadata.durationInSeconds),
-            numberOfSamples,
-            normalize: false,
-        });
-    }, [
-        durationInFrames,
-        vidConf.fps,
-        metadata,
-        playbackRate,
-        startFrom,
-        visualizationWidth,
-    ]);
+    }, [visualizationWidth, volume, doesVolumeChange]);
     if (error) {
         return (jsx_runtime_1.jsx("div", { style: container, children: jsx_runtime_1.jsx("div", { style: errorMessage, children: "No waveform available. Audio might not support CORS." }) }));
     }
-    if (!metadata) {
+    if (!peaks) {
         return null;
     }
-    return (jsx_runtime_1.jsxs("div", { style: container, children: [normalized.map((w) => {
-                return (jsx_runtime_1.jsx(AudioWaveformBar_1.AudioWaveformBar, { amplitude: w.amplitude * (typeof volume === 'number' ? volume : 1) }, w.index));
-            }), jsx_runtime_1.jsx("canvas", { ref: canvas, style: canvasStyle, width: visualizationWidth, height: (0, timeline_layout_1.getTimelineLayerHeight)('other') })
+    return (jsx_runtime_1.jsxs("div", { ref: containerRef, style: container, children: [
+            jsx_runtime_1.jsx("canvas", { ref: waveformCanvas, style: waveformCanvasStyle }), jsx_runtime_1.jsx("canvas", { ref: volumeCanvas, style: volumeCanvasStyle })
         ] }));
 };
 exports.AudioWaveform = AudioWaveform;

package/dist/components/Editor.js

@@ -44,6 +44,7 @@ const canvas_ref_1 = require("../state/canvas-ref");
 const timeline_zoom_1 = require("../state/timeline-zoom");
 const z_index_1 = require("../state/z-index");
 const EditorContent_1 = require("./EditorContent");
+const ForceSpecificCursor_1 = require("./ForceSpecificCursor");
 const GlobalKeybindings_1 = require("./GlobalKeybindings");
 const Modals_1 = require("./Modals");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
@@ -83,10 +84,12 @@ const Editor = ({ Root, readOnlyStudio }) => {
         return react_1.default.memo(Root);
     }, [Root]);
     return (jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onEscape: noop_1.noop, onOutsideClick: noop_1.noop, children: jsx_runtime_1.jsxs(timeline_zoom_1.TimelineZoomContext, { children: [
-                jsx_runtime_1.jsx(remotion_1.Internals.CurrentScaleContext.Provider, { value: value, children: jsx_runtime_1.jsxs("div", { style: background, children: [canvasMounted ? jsx_runtime_1.jsx(MemoRoot, {}) : null, jsx_runtime_1.jsxs(remotion_1.Internals.CanUseRemotionHooksProvider, { children: [
-                                    jsx_runtime_1.jsx(EditorContent_1.EditorContent, { readOnlyStudio: readOnlyStudio, children: jsx_runtime_1.jsx(TopPanel_1.TopPanel, { drawRef: canvas_ref_1.drawRef, bufferStateDelayInMilliseconds: exports.BUFFER_STATE_DELAY_IN_MILLISECONDS, onMounted: onMounted, readOnlyStudio: readOnlyStudio }) }), jsx_runtime_1.jsx(GlobalKeybindings_1.GlobalKeybindings, {})
-                                ] })
-                        ] }) }), jsx_runtime_1.jsx(Modals_1.Modals, { readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(NotificationCenter_1.NotificationCenter, {})
+                jsx_runtime_1.jsxs(remotion_1.Internals.CurrentScaleContext.Provider, { value: value, children: [
+                        jsx_runtime_1.jsx(ForceSpecificCursor_1.ForceSpecificCursor, {}), jsx_runtime_1.jsxs("div", { style: background, children: [canvasMounted ? jsx_runtime_1.jsx(MemoRoot, {}) : null, jsx_runtime_1.jsxs(remotion_1.Internals.CanUseRemotionHooksProvider, { children: [
+                                        jsx_runtime_1.jsx(EditorContent_1.EditorContent, { readOnlyStudio: readOnlyStudio, children: jsx_runtime_1.jsx(TopPanel_1.TopPanel, { drawRef: canvas_ref_1.drawRef, bufferStateDelayInMilliseconds: exports.BUFFER_STATE_DELAY_IN_MILLISECONDS, onMounted: onMounted, readOnlyStudio: readOnlyStudio }) }), jsx_runtime_1.jsx(GlobalKeybindings_1.GlobalKeybindings, {})
+                                    ] })
+                            ] })
+                    ] }), jsx_runtime_1.jsx(Modals_1.Modals, { readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(NotificationCenter_1.NotificationCenter, {})
             ] }) }));
 };
 exports.Editor = Editor;

package/dist/components/EditorGuides/Guide.js

@@ -7,6 +7,7 @@ const colors_1 = require("../../helpers/colors");
 const editor_guides_1 = require("../../state/editor-guides");
 const editor_rulers_1 = require("../../state/editor-rulers");
 const ContextMenu_1 = require("../ContextMenu");
+const ForceSpecificCursor_1 = require("../ForceSpecificCursor");
 const PADDING_FOR_EASY_DRAG = 4;
 const GuideComp = ({ guide, canvasDimensions, scale }) => {
     const { shouldCreateGuideRef, setGuidesList, setSelectedGuideId, selectedGuideId, setHoveredGuideId, hoveredGuideId, } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
@@ -53,7 +54,7 @@ const GuideComp = ({ guide, canvasDimensions, scale }) => {
             return;
         }
         shouldCreateGuideRef.current = true;
-        document.body.style.cursor = 'no-drop';
+        (0, ForceSpecificCursor_1.forceSpecificCursor)('no-drop');
         setSelectedGuideId(() => guide.id);
     }, [shouldCreateGuideRef, setSelectedGuideId, guide.id]);
     const values = (0, react_1.useMemo)(() => {

package/dist/components/EditorRuler/Ruler.js

@@ -7,6 +7,7 @@ const colors_1 = require("../../helpers/colors");
 const editor_ruler_1 = require("../../helpers/editor-ruler");
 const editor_guides_1 = require("../../state/editor-guides");
 const editor_rulers_1 = require("../../state/editor-rulers");
+const ForceSpecificCursor_1 = require("../ForceSpecificCursor");
 const makeGuideId = () => {
     return Math.random().toString(36).substring(7);
 };
@@ -67,7 +68,7 @@ const Ruler = ({ scale, points, originOffset, startMarking, size, markingGaps, o
         }
         e.preventDefault();
         shouldCreateGuideRef.current = true;
-        document.body.style.cursor = 'no-drop';
+        (0, ForceSpecificCursor_1.forceSpecificCursor)('no-drop');
         const guideId = makeGuideId();
         setEditorShowGuides(() => true);
         setSelectedGuideId(() => guideId);

package/dist/components/EditorRuler/index.js

@@ -11,6 +11,7 @@ const editor_ruler_1 = require("../../helpers/editor-ruler");
 const use_studio_canvas_dimensions_1 = require("../../helpers/use-studio-canvas-dimensions");
 const editor_guides_1 = require("../../state/editor-guides");
 const editor_rulers_1 = require("../../state/editor-rulers");
+const ForceSpecificCursor_1 = require("../ForceSpecificCursor");
 const Ruler_1 = __importDefault(require("./Ruler"));
 const originBlockStyles = {
     position: 'absolute',
@@ -70,9 +71,7 @@ const EditorRulers = ({ contentDimensions, canvasSize, assetMetadata, containerR
                 if (!shouldDeleteGuideRef.current) {
                     shouldDeleteGuideRef.current = true;
                 }
-                if (document.body.style.cursor !== 'no-drop') {
-                    document.body.style.cursor = 'no-drop';
-                }
+                (0, ForceSpecificCursor_1.forceSpecificCursor)('no-drop');
                 setGuidesList((prevState) => {
                     const newGuides = prevState.map((guide) => {
                         if (guide.id !== selectedGuideId) {
@@ -103,9 +102,7 @@ const EditorRulers = ({ contentDimensions, canvasSize, assetMetadata, containerR
                             : (mouseY - containerTop) / scale -
                                 canvasPosition.top / scale;
                         const desiredCursor = guide.orientation === 'vertical' ? 'ew-resize' : 'ns-resize';
-                        if (document.body.style.cursor !== desiredCursor) {
-                            document.body.style.cursor = desiredCursor;
-                        }
+                        (0, ForceSpecificCursor_1.forceSpecificCursor)(desiredCursor);
                         return {
                             ...guide,
                             position: Math.floor(position / 1.0),
@@ -136,7 +133,7 @@ const EditorRulers = ({ contentDimensions, canvasSize, assetMetadata, containerR
             return newGuides;
         });
         shouldDeleteGuideRef.current = false;
-        document.body.style.cursor = 'auto';
+        (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
         shouldCreateGuideRef.current = false;
         setSelectedGuideId(() => null);
         document.removeEventListener('pointerup', onMouseUp);

package/dist/components/ForceSpecificCursor.d.ts

@@ -0,0 +1,3 @@
+export declare const forceSpecificCursor: (cursor: string) => void;
+export declare const stopForcingSpecificCursor: () => void;
+export declare const ForceSpecificCursor: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/ForceSpecificCursor.js

@@ -0,0 +1,68 @@
+"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.ForceSpecificCursor = exports.stopForcingSpecificCursor = exports.forceSpecificCursor = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const ref = react_1.default.createRef();
+const forceSpecificCursor = (cursor) => {
+    if (!ref.current) {
+        throw new Error('ForceSpecificCursor is not mounted');
+    }
+    ref.current.style.cursor = cursor;
+    ref.current.style.pointerEvents = 'auto';
+};
+exports.forceSpecificCursor = forceSpecificCursor;
+const stopForcingSpecificCursor = () => {
+    if (!ref.current) {
+        throw new Error('ForceSpecificCursor is not mounted');
+    }
+    ref.current.style.cursor = '';
+    ref.current.style.pointerEvents = 'none';
+};
+exports.stopForcingSpecificCursor = stopForcingSpecificCursor;
+const Z_INDEX_FORCE_SPECIFIC_CURSOR = 100;
+const ForceSpecificCursor = () => {
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            position: 'fixed',
+            inset: 0,
+            zIndex: Z_INDEX_FORCE_SPECIFIC_CURSOR,
+            pointerEvents: 'none',
+        };
+    }, []);
+    return jsx_runtime_1.jsx("div", { ref: ref, style: style });
+};
+exports.ForceSpecificCursor = ForceSpecificCursor;

package/dist/components/MenuBuildIndicator.js

@@ -4,8 +4,11 @@ exports.MenuBuildIndicator = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const client_id_1 = require("../helpers/client-id");
+const get_git_menu_item_1 = require("../helpers/get-git-menu-item");
+const open_in_editor_1 = require("../helpers/open-in-editor");
 const layout_1 = require("./layout");
-const OpenEditorButton_1 = require("./OpenEditorButton");
+const MenuCompositionName_1 = require("./MenuCompositionName");
+const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const Spinner_1 = require("./Spinner");
 const cwd = {
     fontSize: 13,
@@ -25,10 +28,61 @@ const noSpinner = {
     position: 'relative',
     width: spinnerSize,
 };
+const projectNameLinkBase = {
+    color: 'inherit',
+    textDecoration: 'none',
+    cursor: 'pointer',
+    fontSize: 'inherit',
+    textUnderlineOffset: 2,
+};
+const projectNameLink = {
+    ...projectNameLinkBase,
+};
+const projectNameLinkHovered = {
+    ...projectNameLinkBase,
+    textDecoration: 'underline',
+};
 const MenuBuildIndicator = () => {
     const [isBuilding, setIsBuilding] = (0, react_1.useState)(false);
+    const [projectNameHovered, setProjectNameHovered] = (0, react_1.useState)(false);
     const ctx = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).previewServerState;
-    const showButton = window.remotion_editorName && ctx.type === 'connected';
+    const showEditorLink = window.remotion_editorName && ctx.type === 'connected';
+    const showGitLink = !showEditorLink && Boolean(window.remotion_gitSource);
+    const handleProjectNameClick = (0, react_1.useCallback)(async () => {
+        if (showEditorLink) {
+            await (0, open_in_editor_1.openInEditor)({
+                originalFileName: `${window.remotion_cwd}`,
+                originalLineNumber: 1,
+                originalColumnNumber: 1,
+                originalFunctionName: null,
+                originalScriptCode: null,
+            })
+                .then((res) => res.json())
+                .then(({ success }) => {
+                if (!success) {
+                    (0, NotificationCenter_1.showNotification)(`Could not open ${window.remotion_editorName}`, 2000);
+                }
+            })
+                .catch((err) => {
+                // eslint-disable-next-line no-console
+                console.error(err);
+                (0, NotificationCenter_1.showNotification)(`Could not open ${window.remotion_editorName}`, 2000);
+            });
+        }
+        else if (showGitLink) {
+            window.open((0, get_git_menu_item_1.getGitSourceBranchUrl)(window.remotion_gitSource), '_blank');
+        }
+    }, [showEditorLink, showGitLink]);
+    const projectNameTitle = (0, react_1.useMemo)(() => {
+        if (showEditorLink) {
+            return `Open in ${window.remotion_editorName}`;
+        }
+        if (showGitLink) {
+            return `Open ${(0, get_git_menu_item_1.getGitSourceName)(window.remotion_gitSource)} Repo`;
+        }
+        return undefined;
+    }, [showEditorLink, showGitLink]);
+    const isClickable = showEditorLink || showGitLink;
     (0, react_1.useEffect)(() => {
         window.remotion_isBuilding = () => {
             setIsBuilding(true);
@@ -41,6 +95,7 @@ const MenuBuildIndicator = () => {
             window.remotion_finishedBuilding = undefined;
         };
     }, []);
-    return (jsx_runtime_1.jsxs("div", { style: cwd, title: window.remotion_cwd, children: [showButton ? jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }) : null, isBuilding ? (jsx_runtime_1.jsx("div", { style: spinner, children: jsx_runtime_1.jsx(Spinner_1.Spinner, { duration: 0.5, size: spinnerSize }) })) : (jsx_runtime_1.jsx("div", { style: noSpinner })), showButton ? jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }) : null, window.remotion_projectName, showButton ? jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.25 }) : null, showButton ? (jsx_runtime_1.jsx(OpenEditorButton_1.OpenEditorButton, { type: "editor" })) : window.remotion_gitSource ? (jsx_runtime_1.jsx(OpenEditorButton_1.OpenEditorButton, { type: "git" })) : null] }));
+    return (jsx_runtime_1.jsxs("div", { style: cwd, title: window.remotion_cwd, children: [isClickable ? jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }) : null, isBuilding ? (jsx_runtime_1.jsx("div", { style: spinner, children: jsx_runtime_1.jsx(Spinner_1.Spinner, { duration: 0.5, size: spinnerSize }) })) : (jsx_runtime_1.jsx("div", { style: noSpinner })), isClickable ? jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }) : null, isClickable ? (jsx_runtime_1.jsx("a", { style: projectNameHovered ? projectNameLinkHovered : projectNameLink, title: projectNameTitle, onClick: handleProjectNameClick, onPointerEnter: () => setProjectNameHovered(true), onPointerLeave: () => setProjectNameHovered(false), children: window.remotion_projectName })) : (window.remotion_projectName), jsx_runtime_1.jsx(MenuCompositionName_1.MenuCompositionName, {})
+        ] }));
 };
 exports.MenuBuildIndicator = MenuBuildIndicator;

package/dist/components/MenuCompositionName.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const MenuCompositionName: React.FC;

package/dist/components/MenuCompositionName.js

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuCompositionName = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const client_id_1 = require("../helpers/client-id");
+const colors_1 = require("../helpers/colors");
+const open_in_editor_1 = require("../helpers/open-in-editor");
+const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const use_resolved_stack_1 = require("./Timeline/use-resolved-stack");
+const baseStyle = {
+    color: 'inherit',
+    textDecoration: 'none',
+    fontSize: 'inherit',
+    textUnderlineOffset: 2,
+};
+const compositionNameStyle = {
+    ...baseStyle,
+    cursor: 'default',
+};
+const clickableStyle = {
+    ...baseStyle,
+    cursor: 'pointer',
+};
+const clickableHoveredStyle = {
+    ...clickableStyle,
+    textDecoration: 'underline',
+};
+const slashStyle = {
+    color: colors_1.LIGHT_TEXT,
+    marginInline: 4,
+    position: 'relative',
+    top: 1,
+};
+const MenuCompositionName = () => {
+    var _a;
+    const { canvasContent, compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
+        .previewServerState.type;
+    const [opening, setOpening] = (0, react_1.useState)(false);
+    const [hovered, setHovered] = (0, react_1.useState)(false);
+    const composition = (0, react_1.useMemo)(() => {
+        var _a;
+        if (canvasContent === null || canvasContent.type !== 'composition') {
+            return null;
+        }
+        return ((_a = compositions.find((c) => c.id === canvasContent.compositionId)) !== null && _a !== void 0 ? _a : null);
+    }, [canvasContent, compositions]);
+    const resolvedLocation = (0, use_resolved_stack_1.useResolvedStack)((_a = composition === null || composition === void 0 ? void 0 : composition.stack) !== null && _a !== void 0 ? _a : null);
+    const canOpen = resolvedLocation &&
+        window.remotion_editorName &&
+        connectionStatus === 'connected';
+    const handleClick = (0, react_1.useCallback)(async () => {
+        if (!canOpen || !resolvedLocation) {
+            return;
+        }
+        setOpening(true);
+        try {
+            await (0, open_in_editor_1.openOriginalPositionInEditor)(resolvedLocation);
+        }
+        catch (err) {
+            (0, NotificationCenter_1.showNotification)(err.message, 2000);
+        }
+        finally {
+            setOpening(false);
+        }
+    }, [canOpen, resolvedLocation]);
+    if (!composition) {
+        return null;
+    }
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx("span", { style: slashStyle, children: "/" }), jsx_runtime_1.jsx("a", { style: canOpen && !opening
+                    ? hovered
+                        ? clickableHoveredStyle
+                        : clickableStyle
+                    : compositionNameStyle, title: canOpen ? `Open in ${window.remotion_editorName}` : composition.id, onClick: handleClick, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), children: composition.id })
+        ] }));
+};
+exports.MenuCompositionName = MenuCompositionName;

package/dist/components/NewComposition/InputDragger.js

@@ -41,6 +41,7 @@ const colors_1 = require("../../helpers/colors");
 const noop_1 = require("../../helpers/noop");
 const input_dragger_click_lock_1 = require("../../state/input-dragger-click-lock");
 const z_index_1 = require("../../state/z-index");
+const ForceSpecificCursor_1 = require("../ForceSpecificCursor");
 const RemInput_1 = require("./RemInput");
 const isInt = (num) => {
     return num % 1 === 0;
@@ -135,6 +136,7 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
             if (distanceFromStart > 4) {
                 (0, input_dragger_click_lock_1.setClickLock)(true);
                 setDragging(true);
+                (0, ForceSpecificCursor_1.forceSpecificCursor)('ew-resize');
                 target.blur();
             }
             const diff = (0, remotion_1.interpolate)(xDistance, [-5, -4, 0, 4, 5], [-step, 0, 0, 0, step]);
@@ -148,6 +150,7 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
             window.removeEventListener('mousemove', moveListener);
             pointerDownRef.current = false;
             setDragging(false);
+            (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
             if (lastDragValue !== null && onValueChangeEnd) {
                 onValueChangeEnd(lastDragValue);
             }

package/dist/components/RenderModal/RenderModalJSONPropsEditor.js

@@ -103,13 +103,20 @@ const RenderModalJSONPropsEditor = ({ setValue, value, defaultProps, onSave, ser
             }
             const { result } = e;
             if (result.canUpdate) {
-                setLocalValue(parseJS(result.currentDefaultProps, schema));
+                const nextState = parseJS(result.currentDefaultProps, schema);
+                setLocalValue(nextState);
             }
         });
         return () => {
             unsub();
         };
     }, [subscribeToEvent, compositionId, schema]);
+    (0, react_1.useEffect)(() => {
+        if (localValue.validJSON && (0, deep_equal_1.deepEqual)(value, localValue.value)) {
+            return;
+        }
+        setLocalValue(parseJS(value, schema));
+    }, [value, schema, localValue]);
     const onPretty = (0, react_1.useCallback)(() => {
         if (!localValue.validJSON) {
             return;
@@ -137,8 +144,8 @@ const RenderModalJSONPropsEditor = ({ setValue, value, defaultProps, onSave, ser
     }, [hasChanged, hasError, onSave]);
     // If schema is changed in code
     (0, react_1.useEffect)(() => {
-        setLocalValue(parseJSON(localValue.str, schema));
-    }, [localValue.str, schema]);
+        setLocalValue((v) => parseJSON(v.str, schema));
+    }, [schema]);
     const reset = (0, react_1.useCallback)(() => {
         setValue(defaultProps);
         setLocalValue(parseJSON(JSON.stringify(defaultProps, null, 2), schema));

package/dist/components/Splitter/SplitterHandle.js

@@ -4,6 +4,7 @@ exports.SplitterHandle = exports.SPLITTER_HANDLE_SIZE = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
 const react_1 = require("react");
+const ForceSpecificCursor_1 = require("../ForceSpecificCursor");
 const SplitterContext_1 = require("./SplitterContext");
 exports.SPLITTER_HANDLE_SIZE = 3;
 const containerRow = {
@@ -58,6 +59,7 @@ const SplitterHandle = ({ allowToCollapse, onCollapse }) => {
                 x: e.clientX,
                 y: e.clientY,
             };
+            (0, ForceSpecificCursor_1.forceSpecificCursor)(context.orientation === 'horizontal' ? 'row-resize' : 'col-resize');
             (_a = ref.current) === null || _a === void 0 ? void 0 : _a.classList.add('remotion-splitter-active');
             window.addEventListener('pointerup', (ev) => {
                 if (!context.isDragging.current) {
@@ -94,6 +96,7 @@ const SplitterHandle = ({ allowToCollapse, onCollapse }) => {
         const cleanup = () => {
             var _a;
             context.isDragging.current = false;
+            (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
             (_a = ref.current) === null || _a === void 0 ? void 0 : _a.classList.remove('remotion-splitter-active');
             current.removeEventListener('pointerdown', onPointerDown);
             window.removeEventListener('pointermove', onPointerMove);

package/dist/components/Timeline/Timeline.js

@@ -75,15 +75,15 @@ const TimelineInner = () => {
     const visualModeEnabled = Boolean(process.env.EXPERIMENTAL_VISUAL_MODE_ENABLED) &&
         previewServerState.type === 'connected';
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
+    const videoConfigIsNull = videoConfig === null;
     const timeline = (0, react_1.useMemo)(() => {
-        if (!videoConfig) {
+        if (videoConfigIsNull) {
             return [];
         }
         return (0, calculate_timeline_1.calculateTimeline)({
             sequences,
-            sequenceDuration: videoConfig.durationInFrames,
         });
-    }, [sequences, videoConfig]);
+    }, [sequences, videoConfigIsNull]);
     const durationInFrames = (_a = videoConfig === null || videoConfig === void 0 ? void 0 : videoConfig.durationInFrames) !== null && _a !== void 0 ? _a : 0;
     const filtered = (0, react_1.useMemo)(() => {
         const withoutHidden = timeline.filter((t) => !(0, is_collapsed_1.isTrackHidden)(t));