@remotion/studio 4.0.441 → 4.0.442

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/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));

package/dist/components/Timeline/TimelineDragHandler.js

@@ -11,6 +11,7 @@ const in_out_1 = require("../../state/in-out");
 const timeline_zoom_1 = require("../../state/timeline-zoom");
 const z_index_1 = require("../../state/z-index");
 const ContextMenu_1 = require("../ContextMenu");
+const ForceSpecificCursor_1 = require("../ForceSpecificCursor");
 const is_menu_item_1 = require("../Menu/is-menu-item");
 const TimelineInOutToggle_1 = require("../TimelineInOutToggle");
 const timeline_refs_1 = require("./timeline-refs");
@@ -115,6 +116,7 @@ const Inner = () => {
             }
             const inMarker = get(inFrame);
             const outMarker = outFrame === null ? Infinity : get(outFrame - 1);
+            (0, ForceSpecificCursor_1.forceSpecificCursor)('ew-resize');
             setInOutDragging({
                 dragging: 'in',
                 initialOffset: getClientXWithScroll(e.clientX),
@@ -128,6 +130,7 @@ const Inner = () => {
             }
             const outMarker = get(outFrame);
             const inMarker = inFrame === null ? -Infinity : get(inFrame + 1);
+            (0, ForceSpecificCursor_1.forceSpecificCursor)('ew-resize');
             setInOutDragging({
                 dragging: 'out',
                 initialOffset: getClientXWithScroll(e.clientX),
@@ -311,6 +314,7 @@ const Inner = () => {
     const onPointerUpInOut = (0, react_1.useCallback)((e) => {
         document.body.style.userSelect = '';
         document.body.style.webkitUserSelect = '';
+        (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
         if (!videoConfig) {
             return;
         }

package/dist/components/Timeline/TimelineWidthProvider.js

@@ -4,6 +4,7 @@ exports.TimelineWidthProvider = exports.TimelineWidthContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
 const react_1 = require("react");
+const timeline_zoom_1 = require("../../state/timeline-zoom");
 const timeline_refs_1 = require("./timeline-refs");
 exports.TimelineWidthContext = (0, react_1.createContext)(null);
 const TimelineWidthProvider = ({ children }) => {
@@ -12,6 +13,20 @@ const TimelineWidthProvider = ({ children }) => {
         triggerOnWindowResize: false,
         shouldApplyCssTransforms: true,
     });
-    return (jsx_runtime_1.jsx(exports.TimelineWidthContext.Provider, { value: (_a = size === null || size === void 0 ? void 0 : size.width) !== null && _a !== void 0 ? _a : null, children: children }));
+    const { zoom: zoomMap } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
+    const [widthOverride, setWidthOverride] = (0, react_1.useState)(null);
+    const observedWidth = (_a = size === null || size === void 0 ? void 0 : size.width) !== null && _a !== void 0 ? _a : null;
+    (0, react_1.useLayoutEffect)(() => {
+        var _a;
+        var _b;
+        const actual = (_b = (_a = timeline_refs_1.sliderAreaRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _b !== void 0 ? _b : null;
+        if (actual !== null && actual !== observedWidth) {
+            setWidthOverride(actual);
+        }
+        else {
+            setWidthOverride(null);
+        }
+    }, [observedWidth, zoomMap]);
+    return (jsx_runtime_1.jsx(exports.TimelineWidthContext.Provider, { value: widthOverride !== null && widthOverride !== void 0 ? widthOverride : observedWidth, children: children }));
 };
 exports.TimelineWidthProvider = TimelineWidthProvider;

package/dist/components/draw-peaks.d.ts

@@ -0,0 +1 @@
+export declare const drawBars: (canvas: HTMLCanvasElement, peaks: Float32Array<ArrayBufferLike>, color: string, volume: number, width: number) => void;

package/dist/components/draw-peaks.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.drawBars = void 0;
+const parse_color_1 = require("./parse-color");
+const CLIPPING_COLOR = '#FF7F50';
+const drawBars = (canvas, peaks, color, volume, width) => {
+    const ctx = canvas.getContext('2d');
+    if (!ctx) {
+        throw new Error('Failed to get canvas context');
+    }
+    const { height } = canvas;
+    const w = canvas.width;
+    ctx.clearRect(0, 0, w, height);
+    if (volume === 0)
+        return;
+    const [r, g, b, a] = (0, parse_color_1.parseColor)(color);
+    const [cr, cg, cb, ca] = (0, parse_color_1.parseColor)(CLIPPING_COLOR);
+    const imageData = ctx.createImageData(w, height);
+    const { data } = imageData;
+    const numBars = width;
+    for (let barIndex = 0; barIndex < numBars; barIndex++) {
+        const x = barIndex;
+        if (x >= w)
+            break;
+        const peakIndex = Math.floor((barIndex / numBars) * peaks.length);
+        const peak = peaks[peakIndex] || 0;
+        const scaledPeak = peak * volume;
+        const halfBar = Math.max(0, Math.min(height / 2, (scaledPeak * height) / 2));
+        if (halfBar === 0)
+            continue;
+        const mid = height / 2;
+        const barY = Math.round(mid - halfBar);
+        const barEnd = Math.round(mid + halfBar);
+        const isClipping = scaledPeak > 1;
+        const clipTopEnd = isClipping ? Math.min(barY + 2, barEnd) : barY;
+        const clipBotStart = isClipping ? Math.max(barEnd - 2, barY) : barEnd;
+        for (let y = barY; y < clipTopEnd; y++) {
+            const idx = (y * w + x) * 4;
+            data[idx] = cr;
+            data[idx + 1] = cg;
+            data[idx + 2] = cb;
+            data[idx + 3] = ca;
+        }
+        for (let y = clipTopEnd; y < clipBotStart; y++) {
+            const idx = (y * w + x) * 4;
+            data[idx] = r;
+            data[idx + 1] = g;
+            data[idx + 2] = b;
+            data[idx + 3] = a;
+        }
+        for (let y = clipBotStart; y < barEnd; y++) {
+            const idx = (y * w + x) * 4;
+            data[idx] = cr;
+            data[idx + 1] = cg;
+            data[idx + 2] = cb;
+            data[idx + 3] = ca;
+        }
+    }
+    ctx.putImageData(imageData, 0, 0);
+};
+exports.drawBars = drawBars;

package/dist/components/load-waveform-peaks.d.ts

@@ -0,0 +1,3 @@
+declare const TARGET_SAMPLE_RATE = 100;
+export { TARGET_SAMPLE_RATE };
+export declare function loadWaveformPeaks(url: string, signal: AbortSignal): Promise<Float32Array>;