@remotion/studio 4.0.441 → 4.0.443

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/TimelineRotationField.js

@@ -5,7 +5,18 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const InputDragger_1 = require("../NewComposition/InputDragger");
 const timeline_field_utils_1 = require("./timeline-field-utils");
+const unitPattern = /^([+-]?(?:\d+\.?\d*|\.\d+))(deg|rad|turn|grad)$/;
+const unitToDegrees = {
+    deg: 1,
+    rad: 180 / Math.PI,
+    turn: 360,
+    grad: 360 / 400,
+};
 const parseCssRotationToDegrees = (value) => {
+    const match = value.trim().match(unitPattern);
+    if (match) {
+        return Number(match[1]) * unitToDegrees[match[2]];
+    }
     try {
         const m = new DOMMatrix(`rotate(${value})`);
         return Math.round(Math.atan2(m.b, m.a) * (180 / Math.PI) * 1e6) / 1e6;

package/dist/components/Timeline/TimelineSequence.js

@@ -107,7 +107,7 @@ const Inner = ({ s, windowWidth }) => {
 						)`,
                     position: 'absolute',
                     right: 0,
-                } })) : null, s.type === 'audio' ? (jsx_runtime_1.jsx(AudioWaveform_1.AudioWaveform, { src: s.src, doesVolumeChange: s.doesVolumeChange, visualizationWidth: width, startFrom: s.startMediaFrom, durationInFrames: s.duration, volume: s.volume, playbackRate: s.playbackRate })) : null, s.type === 'video' ? (jsx_runtime_1.jsx(TimelineVideoInfo_1.TimelineVideoInfo, { src: s.src, visualizationWidth: width, naturalWidth: naturalWidth, trimBefore: s.startMediaFrom, durationInFrames: s.duration, playbackRate: s.playbackRate })) : null, s.type === 'image' ? (jsx_runtime_1.jsx(TimelineImageInfo_1.TimelineImageInfo, { src: s.src, visualizationWidth: width })) : null, s.loopDisplay === undefined ? null : (jsx_runtime_1.jsx(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.loopDisplay.numberOfTimes })), s.type !== 'audio' &&
+                } })) : null, s.type === 'audio' ? (jsx_runtime_1.jsx(AudioWaveform_1.AudioWaveform, { src: s.src, doesVolumeChange: s.doesVolumeChange, visualizationWidth: width, startFrom: s.startMediaFrom, durationInFrames: s.duration, volume: s.volume, playbackRate: s.playbackRate })) : null, s.type === 'video' ? (jsx_runtime_1.jsx(TimelineVideoInfo_1.TimelineVideoInfo, { src: s.src, visualizationWidth: width, naturalWidth: naturalWidth, trimBefore: s.startMediaFrom, durationInFrames: s.duration, playbackRate: s.playbackRate, volume: s.volume, doesVolumeChange: s.doesVolumeChange, premountWidth: premountWidth !== null && premountWidth !== void 0 ? premountWidth : 0, postmountWidth: postmountWidth !== null && postmountWidth !== void 0 ? postmountWidth : 0 })) : null, s.type === 'image' ? (jsx_runtime_1.jsx(TimelineImageInfo_1.TimelineImageInfo, { src: s.src, visualizationWidth: width })) : null, s.loopDisplay === undefined ? null : (jsx_runtime_1.jsx(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.loopDisplay.numberOfTimes })), s.type !== 'audio' &&
                 s.type !== 'video' &&
                 s.type !== 'image' &&
                 s.loopDisplay === undefined &&

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

@@ -149,7 +149,8 @@ const TimelineStack = ({ isCompact, sequence, originalLocation }) => {
             color: opening && isCompact ? colors_1.VERY_LIGHT_TEXT : colors_1.LIGHT_COLOR,
             userSelect: 'none',
             WebkitUserSelect: 'none',
-            borderBottom: hoverEffect ? '1px solid #fff' : 'none',
+            textDecoration: hoverEffect ? 'underline' : 'none',
+            textUnderlineOffset: 2,
             cursor: hoverEffect ? 'pointer' : undefined,
         };
     }, [titleHoverable, isCompact, opening, titleHovered]);

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

@@ -6,4 +6,8 @@ export declare const TimelineVideoInfo: React.FC<{
     readonly trimBefore: number;
     readonly durationInFrames: number;
     readonly playbackRate: number;
+    readonly volume: string | number;
+    readonly doesVolumeChange: boolean;
+    readonly premountWidth: number;
+    readonly postmountWidth: number;
 }>;

package/dist/components/Timeline/TimelineVideoInfo.js

@@ -8,21 +8,27 @@ const extract_frames_1 = require("../../helpers/extract-frames");
 const frame_database_1 = require("../../helpers/frame-database");
 const resize_video_frame_1 = require("../../helpers/resize-video-frame");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
-const HEIGHT = (0, timeline_layout_1.getTimelineLayerHeight)('video') - 2;
-const containerStyle = {
-    height: HEIGHT,
+const AudioWaveform_1 = require("../AudioWaveform");
+const FILMSTRIP_HEIGHT = timeline_layout_1.TIMELINE_LAYER_HEIGHT_IMAGE - 2;
+const outerStyle = {
+    width: '100%',
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+};
+const filmstripContainerStyle = {
+    height: FILMSTRIP_HEIGHT,
     width: '100%',
     backgroundColor: 'rgba(0, 0, 0, 0.3)',
     display: 'flex',
     borderTopLeftRadius: 2,
-    borderBottomLeftRadius: 2,
     fontSize: 10,
     fontFamily: 'Arial, Helvetica',
 };
 const WEBCODECS_TIMESCALE = 1000000;
 const MAX_TIME_DEVIATION = WEBCODECS_TIMESCALE * 0.05;
 const getDurationOfOneFrame = ({ visualizationWidth, aspectRatio, segmentDuration, }) => {
-    const framesFitInWidthUnrounded = visualizationWidth / (HEIGHT * aspectRatio);
+    const framesFitInWidthUnrounded = visualizationWidth / (FILMSTRIP_HEIGHT * aspectRatio);
     return (segmentDuration / framesFitInWidthUnrounded) * WEBCODECS_TIMESCALE;
 };
 const fixRounding = (value) => {
@@ -32,7 +38,7 @@ const fixRounding = (value) => {
     return Math.floor(value);
 };
 const calculateTimestampSlots = ({ visualizationWidth, fromSeconds, segmentDuration, aspectRatio, }) => {
-    const framesFitInWidthUnrounded = visualizationWidth / (HEIGHT * aspectRatio);
+    const framesFitInWidthUnrounded = visualizationWidth / (FILMSTRIP_HEIGHT * aspectRatio);
     const framesFitInWidth = Math.ceil(framesFitInWidthUnrounded);
     const durationOfOneFrame = getDurationOfOneFrame({
         visualizationWidth,
@@ -70,8 +76,10 @@ const drawSlot = ({ frame, ctx, filledSlots, visualizationWidth, timestamp, segm
     });
     const relativeTimestamp = timestamp - fromSeconds * WEBCODECS_TIMESCALE;
     const frameIndex = relativeTimestamp / durationOfOneFrame;
-    const left = Math.floor((frameIndex * frame.displayWidth) / window.devicePixelRatio); // round to avoid antialiasing
-    ctx.drawImage(frame, left, 0, frame.displayWidth / window.devicePixelRatio, frame.displayHeight / window.devicePixelRatio);
+    const thumbnailWidth = frame.displayWidth / window.devicePixelRatio;
+    const left = Math.floor(frameIndex * thumbnailWidth);
+    const right = Math.ceil((frameIndex + 1) * thumbnailWidth);
+    ctx.drawImage(frame, left, 0, right - left, frame.displayHeight / window.devicePixelRatio);
     filledSlots.set(timestamp, frame.timestamp);
 };
 const fillWithCachedFrames = ({ ctx, naturalWidth, filledSlots, src, segmentDuration, fromSeconds, }) => {
@@ -138,7 +146,7 @@ const fillFrameWhereItFits = ({ frame, filledSlots, ctx, visualizationWidth, seg
         });
     }
 };
-const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore, durationInFrames, playbackRate, }) => {
+const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore, durationInFrames, playbackRate, volume, doesVolumeChange, premountWidth, postmountWidth, }) => {
     const { fps } = (0, remotion_1.useVideoConfig)();
     const ref = (0, react_1.useRef)(null);
     const [error, setError] = (0, react_1.useState)(null);
@@ -160,7 +168,7 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore,
         const controller = new AbortController();
         const canvas = document.createElement('canvas');
         canvas.width = visualizationWidth;
-        canvas.height = HEIGHT;
+        canvas.height = FILMSTRIP_HEIGHT;
         const ctx = canvas.getContext('2d');
         if (!ctx) {
             return;
@@ -216,7 +224,7 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore,
                 let frame;
                 try {
                     frame = sample.toVideoFrame();
-                    const scale = (HEIGHT / frame.displayHeight) * window.devicePixelRatio;
+                    const scale = (FILMSTRIP_HEIGHT / frame.displayHeight) * window.devicePixelRatio;
                     const transformed = (0, resize_video_frame_1.resizeVideoFrame)({
                         frame,
                         scale,
@@ -298,6 +306,17 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore,
         trimBefore,
         visualizationWidth,
     ]);
-    return jsx_runtime_1.jsx("div", { ref: ref, style: containerStyle });
+    const audioWidth = visualizationWidth - premountWidth - postmountWidth;
+    const audioStyle = (0, react_1.useMemo)(() => {
+        return {
+            height: timeline_layout_1.TIMELINE_LAYER_HEIGHT_AUDIO,
+            width: audioWidth,
+            position: 'relative',
+            marginLeft: premountWidth,
+        };
+    }, [audioWidth, premountWidth]);
+    return (jsx_runtime_1.jsxs("div", { style: outerStyle, children: [
+            jsx_runtime_1.jsx("div", { ref: ref, style: filmstripContainerStyle }), jsx_runtime_1.jsx("div", { style: audioStyle, children: jsx_runtime_1.jsx(AudioWaveform_1.AudioWaveform, { src: src, visualizationWidth: audioWidth, startFrom: trimBefore, durationInFrames: durationInFrames, volume: volume, doesVolumeChange: doesVolumeChange, playbackRate: playbackRate }) })
+        ] }));
 };
 exports.TimelineVideoInfo = TimelineVideoInfo;

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

package/dist/components/load-waveform-peaks.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TARGET_SAMPLE_RATE = void 0;
+exports.loadWaveformPeaks = loadWaveformPeaks;
+const mediabunny_1 = require("mediabunny");
+const TARGET_SAMPLE_RATE = 100;
+exports.TARGET_SAMPLE_RATE = TARGET_SAMPLE_RATE;
+const peaksCache = new Map();
+async function loadWaveformPeaks(url, signal) {
+    const cached = peaksCache.get(url);
+    if (cached)
+        return cached;
+    const input = new mediabunny_1.Input({
+        formats: mediabunny_1.ALL_FORMATS,
+        source: new mediabunny_1.UrlSource(url),
+    });
+    try {
+        const audioTrack = await input.getPrimaryAudioTrack();
+        if (!audioTrack) {
+            return new Float32Array(0);
+        }
+        const { sampleRate } = audioTrack;
+        const durationInSeconds = await audioTrack.computeDuration();
+        const totalPeaks = Math.ceil(durationInSeconds * TARGET_SAMPLE_RATE);
+        const samplesPerPeak = Math.floor(sampleRate / TARGET_SAMPLE_RATE);
+        const peaks = new Float32Array(totalPeaks);
+        let peakIndex = 0;
+        let peakMax = 0;
+        let sampleInPeak = 0;
+        const sink = new mediabunny_1.AudioSampleSink(audioTrack);
+        for await (const sample of sink.samples()) {
+            if (signal.aborted) {
+                sample.close();
+                return new Float32Array(0);
+            }
+            const bytesNeeded = sample.allocationSize({
+                format: 'f32',
+                planeIndex: 0,
+            });
+            const floats = new Float32Array(bytesNeeded / 4);
+            sample.copyTo(floats, { format: 'f32', planeIndex: 0 });
+            sample.close();
+            for (let i = 0; i < floats.length; i++) {
+                const abs = Math.abs(floats[i]);
+                if (abs > peakMax)
+                    peakMax = abs;
+                sampleInPeak++;
+                if (sampleInPeak >= samplesPerPeak) {
+                    if (peakIndex < totalPeaks) {
+                        peaks[peakIndex] = peakMax;
+                    }
+                    peakIndex++;
+                    peakMax = 0;
+                    sampleInPeak = 0;
+                }
+            }
+        }
+        if (sampleInPeak > 0 && peakIndex < totalPeaks) {
+            peaks[peakIndex] = peakMax;
+        }
+        peaksCache.set(url, peaks);
+        return peaks;
+    }
+    finally {
+        input.dispose();
+    }
+}

package/dist/components/parse-color.d.ts

@@ -0,0 +1 @@
+export declare const parseColor: (color: string) => [number, number, number, number];

package/dist/components/parse-color.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseColor = void 0;
+const colorCache = new Map();
+const parseColor = (color) => {
+    const cached = colorCache.get(color);
+    if (cached)
+        return cached;
+    const ctx = new OffscreenCanvas(1, 1).getContext('2d');
+    ctx.fillStyle = color;
+    ctx.fillRect(0, 0, 1, 1);
+    const [r, g, b, a] = ctx.getImageData(0, 0, 1, 1).data;
+    const result = [r, g, b, a];
+    colorCache.set(color, result);
+    return result;
+};
+exports.parseColor = parseColor;