@remotion/studio 4.0.515 → 4.0.517

package/dist/helpers/get-timeline-sequence-layout.d.ts

@@ -1,8 +1,9 @@
 import type { VideoConfig } from 'remotion';
 export declare const SEQUENCE_BORDER_WIDTH = 1;
-export declare const getTimelineSequenceLayout: ({ durationInFrames, startFrom, maxMediaDuration, startFromMedia, video, windowWidth, premountDisplay, postmountDisplay, }: {
+export declare const getTimelineSequenceLayout: ({ durationInFrames, startFrom, cascadedStart, maxMediaDuration, startFromMedia, video, windowWidth, premountDisplay, postmountDisplay, }: {
     durationInFrames: number;
     startFrom: number;
+    cascadedStart: number;
     startFromMedia: number;
     maxMediaDuration: number | null;
     video: VideoConfig;
@@ -13,6 +14,8 @@ export declare const getTimelineSequenceLayout: ({ durationInFrames, startFrom,
     marginLeft: number;
     width: number;
     naturalWidth: number;
+    negativeStartWidth: number;
+    negativeStartClipped: boolean;
     premountWidth: number | null;
     postmountWidth: number | null;
 };

package/dist/helpers/get-timeline-sequence-layout.js

@@ -10,16 +10,23 @@ const getWidthOfTrack = ({ durationInFrames, timelineDuration, windowWidth, spat
         : (spatialDuration / timelineDuration) * fullWidth;
     return Math.max(0, base - exports.SEQUENCE_BORDER_WIDTH + nonNegativeMarginLeft);
 };
-const getTimelineSequenceLayout = ({ durationInFrames, startFrom, maxMediaDuration, startFromMedia, video, windowWidth, premountDisplay, postmountDisplay, }) => {
+const getTimelineSequenceLayout = ({ durationInFrames, startFrom, cascadedStart, maxMediaDuration, startFromMedia, video, windowWidth, premountDisplay, postmountDisplay, }) => {
     var _a;
     const maxMediaSequenceDuration = (maxMediaDuration !== null && maxMediaDuration !== void 0 ? maxMediaDuration : Infinity) - startFromMedia;
     const timelineDuration = (_a = video.durationInFrames) !== null && _a !== void 0 ? _a : 1;
+    const fullWidth = windowWidth - timeline_layout_1.TIMELINE_PADDING * 2;
     const spatialDuration = Math.max(0, Math.min(maxMediaSequenceDuration, durationInFrames, timelineDuration - startFrom));
     // Unclipped spatial duration: without the timeline-end constraint
     const naturalSpatialDuration = Math.max(0, Math.min(maxMediaSequenceDuration, durationInFrames));
-    const marginLeft = timelineDuration <= 0
-        ? 0
-        : (startFrom / timelineDuration) * (windowWidth - timeline_layout_1.TIMELINE_PADDING * 2);
+    const marginLeft = timelineDuration <= 0 ? 0 : (startFrom / timelineDuration) * fullWidth;
+    const naturalNegativeStartWidth = timelineDuration > 0 &&
+        startFrom === 0 &&
+        cascadedStart < 0 &&
+        durationInFrames > 0
+        ? Math.max(0, (-cascadedStart / timelineDuration) * fullWidth)
+        : 0;
+    const negativeStartWidth = Math.min(timeline_layout_1.TIMELINE_PADDING, naturalNegativeStartWidth);
+    const negativeStartClipped = naturalNegativeStartWidth > timeline_layout_1.TIMELINE_PADDING;
     const nonNegativeMarginLeft = Math.min(marginLeft, 0);
     const width = getWidthOfTrack({
         durationInFrames,
@@ -54,9 +61,11 @@ const getTimelineSequenceLayout = ({ durationInFrames, startFrom, maxMediaDurati
         })
         : null;
     return {
-        marginLeft: Math.max(marginLeft, 0) - (premountWidth !== null && premountWidth !== void 0 ? premountWidth : 0),
-        width: width + (premountWidth !== null && premountWidth !== void 0 ? premountWidth : 0) + (postmountWidth !== null && postmountWidth !== void 0 ? postmountWidth : 0),
+        marginLeft: Math.max(marginLeft, 0) - negativeStartWidth - (premountWidth !== null && premountWidth !== void 0 ? premountWidth : 0),
+        width: width + negativeStartWidth + (premountWidth !== null && premountWidth !== void 0 ? premountWidth : 0) + (postmountWidth !== null && postmountWidth !== void 0 ? postmountWidth : 0),
         naturalWidth: naturalWidth + (premountWidth !== null && premountWidth !== void 0 ? premountWidth : 0) + (postmountWidth !== null && postmountWidth !== void 0 ? postmountWidth : 0),
+        negativeStartWidth,
+        negativeStartClipped,
         premountWidth,
         postmountWidth,
     };

package/dist/helpers/get-timeline-sequence-sort-key.d.ts

@@ -1,21 +1,2 @@
-import type { _InternalTypes, SequencePropsSubscriptionKey, TSequence } from 'remotion';
-export type SequenceNodePathInfo = {
-    sequenceSubscriptionKey: SequencePropsSubscriptionKey;
-    auxiliaryKeys: string[];
-    index: number;
-    numberOfSequencesWithThisNodePath: number;
-    supportsEffects: boolean;
-};
-export type TimelineTrackData = {
-    sequence: TSequence;
-    connectedCompositions?: readonly _InternalTypes['AnyComposition'][];
-    depth: number;
-    nodePathInfo: SequenceNodePathInfo | null;
-    keyframeDisplayOffset: number;
-    sequenceFrameOffset: number;
-};
-export type TimelineTrackWithOriginalTimings = TimelineTrackData & {
-    cascadedStart: number;
-    cascadedDuration: number;
-};
-export declare const getTimelineSequenceSortKey: (track: TimelineTrackData, tracks: TimelineTrackData[], nonceRanks: Map<string, number>) => string;
+export { getTimelineSequenceSortKey } from '@remotion/canvas';
+export type { SequenceNodePathInfo, TimelineTrackData, TimelineTrackWithOriginalTimings, } from '@remotion/canvas';

package/dist/helpers/get-timeline-sequence-sort-key.js

@@ -1,19 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getTimelineSequenceSortKey = void 0;
-const getTimelineSequenceSortKey = (track, tracks, nonceRanks) => {
-    var _a;
-    const rank = (_a = nonceRanks.get(track.sequence.id)) !== null && _a !== void 0 ? _a : 0;
-    const id = String(rank).padStart(6, '0');
-    if (!track.sequence.parent) {
-        return id;
-    }
-    const parent = tracks.find((t) => t.sequence.id === track.sequence.parent);
-    if (!parent) {
-        // Due to effects and conditional `showInTimeline`, a parent
-        // may not exist in the `allTracks` array.
-        return id;
-    }
-    return `${(0, exports.getTimelineSequenceSortKey)(parent, tracks, nonceRanks)}-${id}`;
-};
-exports.getTimelineSequenceSortKey = getTimelineSequenceSortKey;
+const canvas_1 = require("@remotion/canvas");
+Object.defineProperty(exports, "getTimelineSequenceSortKey", { enumerable: true, get: function () { return canvas_1.getTimelineSequenceSortKey; } });

package/dist/helpers/hoverable.d.ts

@@ -2,6 +2,7 @@ import type React from 'react';
 export declare const HOVERABLE_CLASS_NAME = "__remotion-hoverable";
 export declare const HOVER_GROUP_CLASS_NAME = "__remotion-hover-group";
 export declare const HOVER_GROUP_REVEAL_CLASS_NAME = "__remotion-hover-group-reveal";
+export declare const FOCUS_VISIBLE_ONLY_CLASS_NAME = "__remotion-focus-visible-only";
 export declare const hoverableStyle: ({ idleBackground, hoverBackground, idleColor, hoverColor, }: {
     idleBackground: string;
     hoverBackground: string;

package/dist/helpers/hoverable.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.makeHoverableCSS = exports.hoverableStyle = exports.HOVER_GROUP_REVEAL_CLASS_NAME = exports.HOVER_GROUP_CLASS_NAME = exports.HOVERABLE_CLASS_NAME = void 0;
+exports.makeHoverableCSS = exports.hoverableStyle = exports.FOCUS_VISIBLE_ONLY_CLASS_NAME = exports.HOVER_GROUP_REVEAL_CLASS_NAME = exports.HOVER_GROUP_CLASS_NAME = exports.HOVERABLE_CLASS_NAME = void 0;
 const colors_1 = require("./colors");
 // Purely visual hover styling must be driven by CSS `:hover` rather than
 // React state: When the Studio runs in an <iframe> (like in Browser Studio),
@@ -11,6 +11,7 @@ const colors_1 = require("./colors");
 exports.HOVERABLE_CLASS_NAME = '__remotion-hoverable';
 exports.HOVER_GROUP_CLASS_NAME = '__remotion-hover-group';
 exports.HOVER_GROUP_REVEAL_CLASS_NAME = '__remotion-hover-group-reveal';
+exports.FOCUS_VISIBLE_ONLY_CLASS_NAME = '__remotion-focus-visible-only';
 const BG_VARIABLE = '--remotion-hoverable-bg';
 const HOVER_BG_VARIABLE = '--remotion-hoverable-hover-bg';
 const COLOR_VARIABLE = '--remotion-hoverable-color';

package/dist/helpers/inject-css.js

@@ -58,7 +58,7 @@ const makeDefaultGlobalCSS = () => {
 
   input:focus,
   textarea:focus,
-  button:focus:not(.__remotion_input_dragger):not(.__remotion_color_swatch):not(.__remotion-inspector-section-title):not(.__remotion-timeline-expand-arrow-button),
+  button:focus:not(.__remotion_input_dragger):not(.__remotion_color_swatch):not(.__remotion-inspector-section-title):not(.${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}):not(.__remotion-timeline-expand-arrow-button),
   a:focus {
 	    outline: none;
 	    box-shadow: ${colors_1.FOCUS_BOX_SHADOW};
@@ -67,6 +67,7 @@ const makeDefaultGlobalCSS = () => {
   .__remotion-composition-selector-item:focus,
   .__remotion-inspector-quick-action:focus,
   .__remotion-inspector-section-title:focus,
+  .${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}:focus,
   .__remotion-timeline-expand-arrow-button:focus {
     outline: none;
     box-shadow: none;
@@ -75,6 +76,7 @@ const makeDefaultGlobalCSS = () => {
   .__remotion-composition-selector-item:focus-visible,
   .__remotion-inspector-quick-action:focus-visible,
   .__remotion-inspector-section-title:focus-visible,
+  .${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}:focus-visible,
   .__remotion-timeline-expand-arrow-button:focus-visible {
     box-shadow: ${colors_1.FOCUS_BOX_SHADOW};
   }

package/dist/helpers/is-current-selected-still.js

@@ -14,13 +14,15 @@ const useIsStill = () => {
 exports.useIsStill = useIsStill;
 const useIsVideoComposition = () => {
     const isStill = (0, exports.useIsStill)();
-    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const { canvasContent, currentAssetMetadata } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     if (canvasContent === null) {
         return false;
     }
     if (isStill) {
         return false;
     }
-    return canvasContent.type === 'composition';
+    return (canvasContent.type === 'composition' ||
+        (canvasContent.type === 'asset' &&
+            (currentAssetMetadata === null || currentAssetMetadata === void 0 ? void 0 : currentAssetMetadata.asset) === canvasContent.asset));
 };
 exports.useIsVideoComposition = useIsVideoComposition;

package/dist/helpers/open-in-remotion-convert.d.ts

@@ -0,0 +1,7 @@
+export declare const getRemotionConvertUrl: ({ relativePath, studioOrigin, }: {
+    relativePath: string;
+    studioOrigin: string;
+}) => string;
+export declare const openInRemotionConvert: ({ relativePath, }: {
+    relativePath: string;
+}) => void;

package/dist/helpers/open-in-remotion-convert.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.openInRemotionConvert = exports.getRemotionConvertUrl = void 0;
+const remotion_1 = require("remotion");
+const getRemotionConvertUrl = ({ relativePath, studioOrigin, }) => {
+    const convertUrl = new URL('https://www.remotion.dev/convert');
+    const assetUrl = new URL((0, remotion_1.staticFile)(relativePath), studioOrigin);
+    convertUrl.searchParams.set('url', assetUrl.toString());
+    return convertUrl.toString();
+};
+exports.getRemotionConvertUrl = getRemotionConvertUrl;
+const openInRemotionConvert = ({ relativePath, }) => {
+    window.open((0, exports.getRemotionConvertUrl)({
+        relativePath,
+        studioOrigin: window.location.origin,
+    }), '_blank', 'noopener,noreferrer');
+};
+exports.openInRemotionConvert = openInRemotionConvert;

package/dist/helpers/sort-by-nonce-history.d.ts

@@ -1,5 +1 @@
-import type { NonceHistory } from 'remotion';
-export declare const compareNonceHistories: (a: NonceHistory, b: NonceHistory) => number;
-export declare const sortItemsByNonceHistory: <T extends {
-    nonce: NonceHistory;
-}>(items: T[]) => T[];
+export { compareNonceHistories, sortItemsByNonceHistory } from '@remotion/canvas';

package/dist/helpers/sort-by-nonce-history.js

@@ -1,151 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.sortItemsByNonceHistory = exports.compareNonceHistories = void 0;
-const getSharedEpochOrder = (a, b) => {
-    const aMap = new Map(a);
-    const bMap = new Map(b);
-    const allEpochs = [...new Set([...aMap.keys(), ...bMap.keys()])].sort((x, y) => y - x);
-    for (const epoch of allEpochs) {
-        const aNonce = aMap.get(epoch);
-        const bNonce = bMap.get(epoch);
-        if (aNonce !== undefined && bNonce !== undefined) {
-            return aNonce - bNonce;
-        }
-    }
-    return null;
-};
-const compareNonceHistories = (a, b) => {
-    const shared = getSharedEpochOrder(a, b);
-    if (shared !== null) {
-        return shared;
-    }
-    // No shared epoch — items from a lower latest epoch come first
-    const aLatestEpoch = a[a.length - 1][0];
-    const bLatestEpoch = b[b.length - 1][0];
-    return aLatestEpoch - bLatestEpoch;
-};
-exports.compareNonceHistories = compareNonceHistories;
-// Compare two histories, each pre-collapsed to parallel arrays of epochs and
-// nonces sorted by descending epoch, without rebuilding a Map per comparison.
-// Equivalent to getSharedEpochOrder: both find the newest shared epoch and
-// compare its nonces.
-const sharedEpochOrderFromSorted = (aEpochs, aNonces, bEpochs, bNonces) => {
-    let i = 0;
-    let j = 0;
-    while (i < aEpochs.length && j < bEpochs.length) {
-        const ae = aEpochs[i];
-        const be = bEpochs[j];
-        if (ae === be) {
-            return aNonces[i] - bNonces[j];
-        }
-        if (ae > be) {
-            i++;
-        }
-        else {
-            j++;
-        }
-    }
-    return null;
-};
-const sortItemsByNonceHistory = (items) => {
-    const n = items.length;
-    if (n <= 1) {
-        return items.slice();
-    }
-    // Collapse each history once into epoch/nonce arrays sorted by descending
-    // epoch. `new Map(nonce)` keeps the last value per duplicated epoch, matching
-    // getSharedEpochOrder. This removes the per-pair Map/Set construction the
-    // pairwise loop below would otherwise repeat O(n^2) times.
-    const epochsOf = new Array(n);
-    const noncesOf = new Array(n);
-    for (let i = 0; i < n; i++) {
-        const map = new Map(items[i].nonce);
-        const epochs = [...map.keys()].sort((x, y) => y - x);
-        epochsOf[i] = epochs;
-        noncesOf[i] = epochs.map((e) => map.get(e));
-    }
-    // Pairwise "strictly before" relation, stored as bitsets: `before[i]` has
-    // bit j set when i must come before j, `known[i]` has bit j set when the
-    // pair (i, j) is directly determined by a shared epoch. Bitsets let the
-    // transitive closure below combine 32 relationships per word.
-    const words = (n + 31) >> 5;
-    const before = new Uint32Array(n * words);
-    const known = new Uint32Array(n * words);
-    // Direct comparison sign per ordered pair; only read where `known` is set.
-    const sign = new Int8Array(n * n);
-    for (let i = 0; i < n; i++) {
-        for (let j = i + 1; j < n; j++) {
-            const cmp = sharedEpochOrderFromSorted(epochsOf[i], noncesOf[i], epochsOf[j], noncesOf[j]);
-            if (cmp === null) {
-                continue;
-            }
-            known[i * words + (j >> 5)] |= 1 << (j & 31);
-            known[j * words + (i >> 5)] |= 1 << (i & 31);
-            sign[i * n + j] = cmp < 0 ? -1 : cmp > 0 ? 1 : 0;
-            sign[j * n + i] = cmp < 0 ? 1 : cmp > 0 ? -1 : 0;
-            if (cmp < 0) {
-                before[i * words + (j >> 5)] |= 1 << (j & 31);
-            }
-            else if (cmp > 0) {
-                before[j * words + (i >> 5)] |= 1 << (i & 31);
-            }
-        }
-    }
-    // Transitive closure: if i < k and k < j, then i < j. This is the same
-    // Floyd-Warshall relation as before, but the inner sweep is bitwise
-    // (`before[k] & ~known[i]` finds all reachable j at once). A newly derived
-    // edge is marked known immediately so the first path decides an otherwise
-    // undetermined pair — preserving behavior on the inputs where the pairwise
-    // comparison is intentionally non-transitive.
-    for (let k = 0; k < n; k++) {
-        const kBase = k * words;
-        const kWord = k >> 5;
-        const kBit = 1 << (k & 31);
-        for (let i = 0; i < n; i++) {
-            if (i === k) {
-                continue;
-            }
-            const iBase = i * words;
-            if ((before[iBase + kWord] & kBit) === 0) {
-                continue; // i is not before k, so k adds nothing for i
-            }
-            for (let w = 0; w < words; w++) {
-                const add = before[kBase + w] & ~known[iBase + w];
-                if (add === 0) {
-                    continue;
-                }
-                before[iBase + w] |= add;
-                known[iBase + w] |= add;
-                // Set the mirror relationship (j after i) for each newly known pair.
-                let bits = add;
-                while (bits !== 0) {
-                    const lowest = bits & -bits;
-                    const j = (w << 5) + (31 - Math.clz32(lowest));
-                    sign[i * n + j] = -1;
-                    known[j * words + (i >> 5)] |= 1 << (i & 31);
-                    sign[j * n + i] = 1;
-                    bits ^= lowest;
-                }
-            }
-        }
-    }
-    const indexMap = new Map(items.map((item, i) => [item, i]));
-    const result = items.slice();
-    result.sort((a, b) => {
-        const ai = indexMap.get(a);
-        const bi = indexMap.get(b);
-        if ((known[ai * words + (bi >> 5)] >> (bi & 31)) & 1) {
-            return sign[ai * n + bi];
-        }
-        if ((before[ai * words + (bi >> 5)] >> (bi & 31)) & 1) {
-            return -1;
-        }
-        if ((before[bi * words + (ai >> 5)] >> (ai & 31)) & 1) {
-            return 1;
-        }
-        // No transitive relationship — lower latest epoch first
-        return a.nonce[a.nonce.length - 1][0] - b.nonce[b.nonce.length - 1][0];
-    });
-    return result;
-};
-exports.sortItemsByNonceHistory = sortItemsByNonceHistory;
+const canvas_1 = require("@remotion/canvas");
+Object.defineProperty(exports, "compareNonceHistories", { enumerable: true, get: function () { return canvas_1.compareNonceHistories; } });
+Object.defineProperty(exports, "sortItemsByNonceHistory", { enumerable: true, get: function () { return canvas_1.sortItemsByNonceHistory; } });

package/dist/helpers/timeline-node-path-key.d.ts

@@ -1,4 +1,3 @@
-import type { SequencePropsSubscriptionKey } from 'remotion';
 import type { SequenceNodePathInfo } from './get-timeline-sequence-sort-key';
-export declare const timelineSequenceNodePathToKey: (key: SequencePropsSubscriptionKey) => string;
+export { timelineSequenceNodePathToKey } from '@remotion/canvas';
 export declare const timelineNodePathInfoToKey: (info: SequenceNodePathInfo) => string;

package/dist/helpers/timeline-node-path-key.js

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.timelineNodePathInfoToKey = exports.timelineSequenceNodePathToKey = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
-const timelineSequenceNodePathToKey = (key) => `${key.absolutePath}:${JSON.stringify(key.nodePath)}`;
-exports.timelineSequenceNodePathToKey = timelineSequenceNodePathToKey;
+const canvas_1 = require("@remotion/canvas");
+Object.defineProperty(exports, "timelineSequenceNodePathToKey", { enumerable: true, get: function () { return canvas_1.timelineSequenceNodePathToKey; } });
 const timelineNodePathInfoToKey = (info) => [
     (0, studio_shared_1.stringifySequenceExpandedRowKey)(info.sequenceSubscriptionKey),
     info.auxiliaryKeys.join('.'),

package/dist/helpers/use-media-metadata.d.ts

@@ -1,4 +1,4 @@
-import type { InputAudioTrack, InputVideoTrack } from 'mediabunny';
+import type { FrameRateMetrics, InputAudioTrack, InputVideoTrack } from 'mediabunny';
 export type MediaMetadata = {
     duration: number;
     format: string | null;
@@ -12,6 +12,7 @@ export type MediaMetadata = {
     hasVideoTrack: boolean | null;
     hasAudioTrack: boolean | null;
 };
+export declare const getFrameRateFromMetrics: (metrics: Pick<FrameRateMetrics, "bestGuessFrameRate" | "probedPacketCount"> | null) => number | null;
 export declare const getCachedMediaMetadata: (src: string) => MediaMetadata | null;
 export declare const getMediaMetadata: (src: string) => Promise<MediaMetadata | null>;
 export declare const useMediaMetadata: (src: string | null) => MediaMetadata | null;

package/dist/helpers/use-media-metadata.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useMediaMetadata = exports.getMediaMetadata = exports.getCachedMediaMetadata = void 0;
+exports.useMediaMetadata = exports.getMediaMetadata = exports.getCachedMediaMetadata = exports.getFrameRateFromMetrics = void 0;
 const media_utils_1 = require("@remotion/media-utils");
 const mediabunny_1 = require("mediabunny");
 const react_1 = require("react");
@@ -8,6 +8,13 @@ const remotion_1 = require("remotion");
 const get_duration_or_compute_1 = require("./get-duration-or-compute");
 const cache = new Map();
 const pendingRequests = new Map();
+const getFrameRateFromMetrics = (metrics) => {
+    if (metrics === null || metrics.probedPacketCount < 2) {
+        return null;
+    }
+    return metrics.bestGuessFrameRate;
+};
+exports.getFrameRateFromMetrics = getFrameRateFromMetrics;
 const getCachedMediaMetadata = (src) => {
     var _a;
     return (_a = cache.get(src)) !== null && _a !== void 0 ? _a : null;
@@ -22,7 +29,7 @@ const safeCall = async (fn) => {
     }
 };
 const getMediabunnyMetadata = async (src) => {
-    var _a, _b;
+    var _a;
     const lease = (() => {
         try {
             return remotion_1.Internals.globalMediaResourceManager.acquire({
@@ -62,11 +69,11 @@ const getMediabunnyMetadata = async (src) => {
         if (duration === null) {
             return null;
         }
-        const [width, height, videoCodec, packetStats, isHdr, audioCodec, sampleRate,] = await Promise.all([
+        const [width, height, videoCodec, frameRateMetrics, isHdr, audioCodec, sampleRate,] = await Promise.all([
             videoTrack ? safeCall(() => videoTrack.getDisplayWidth()) : null,
             videoTrack ? safeCall(() => videoTrack.getDisplayHeight()) : null,
             videoTrack ? safeCall(() => videoTrack.getCodec()) : null,
-            videoTrack ? safeCall(() => videoTrack.computePacketStats(50)) : null,
+            videoTrack ? safeCall(() => videoTrack.computeFrameRateMetrics()) : null,
             videoTrack ? safeCall(() => videoTrack.hasHighDynamicRange()) : null,
             audioTrack ? safeCall(() => audioTrack.getCodec()) : null,
             audioTrack ? safeCall(() => audioTrack.getSampleRate()) : null,
@@ -78,7 +85,7 @@ const getMediabunnyMetadata = async (src) => {
             height,
             videoCodec,
             audioCodec,
-            fps: (_b = packetStats === null || packetStats === void 0 ? void 0 : packetStats.averagePacketRate) !== null && _b !== void 0 ? _b : null,
+            fps: (0, exports.getFrameRateFromMetrics)(frameRateMetrics),
             isHdr,
             sampleRate,
             hasVideoTrack: Boolean(videoTrack),

package/dist/helpers/use-menu-structure.js

@@ -20,6 +20,7 @@ const Checkmark_1 = require("../icons/Checkmark");
 const canvas_ref_1 = require("../state/canvas-ref");
 const checkerboard_1 = require("../state/checkerboard");
 const editor_guides_1 = require("../state/editor-guides");
+const editor_pixel_grid_1 = require("../state/editor-pixel-grid");
 const editor_rulers_1 = require("../state/editor-rulers");
 const editor_snapping_1 = require("../state/editor-snapping");
 const editor_zoom_gestures_1 = require("../state/editor-zoom-gestures");
@@ -234,6 +235,7 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const { checkerboard, setCheckerboard } = (0, react_1.useContext)(checkerboard_1.CheckerboardContext);
     const { editorZoomGestures, setEditorZoomGestures } = (0, react_1.useContext)(editor_zoom_gestures_1.EditorZoomGesturesContext);
+    const { editorShowPixelGrid, setEditorShowPixelGrid } = (0, react_1.useContext)(editor_pixel_grid_1.EditorShowPixelGridContext);
     const { editorShowRulers, setEditorShowRulers } = (0, react_1.useContext)(editor_rulers_1.EditorShowRulersContext);
     const { editorShowGuides, setEditorShowGuides } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
     const { editorSnapping, setEditorSnapping } = (0, react_1.useContext)(editor_snapping_1.EditorSnappingContext);
@@ -304,29 +306,28 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                         subMenu: null,
                         quickSwitcherLabel: 'Help: Changelog',
                     },
-                    browserStudioOperations === null
-                        ? {
-                            id: 'settings',
-                            value: 'settings',
-                            label: 'Settings...',
-                            onClick: () => {
-                                var _a;
-                                var _b;
-                                closeMenu();
-                                setSelectedModal({
-                                    type: 'settings',
-                                    initialTab: 'rendering',
-                                    initialPublicLicenseKey: (_b = (_a = window.remotion_renderDefaults) === null || _a === void 0 ? void 0 : _a.publicLicenseKey) !== null && _b !== void 0 ? _b : null,
-                                });
-                            },
-                            type: 'item',
-                            keyHint: null,
-                            leftItem: null,
-                            subMenu: null,
-                            quickSwitcherLabel: 'Settings...',
-                            disabled: readOnlyStudio || type !== 'connected',
-                        }
-                        : null,
+                    {
+                        id: 'settings',
+                        value: 'settings',
+                        label: 'Settings...',
+                        onClick: () => {
+                            var _a;
+                            var _b;
+                            closeMenu();
+                            setSelectedModal({
+                                type: 'settings',
+                                initialTab: browserStudioOperations === null ? 'rendering' : 'shortcuts',
+                                initialPublicLicenseKey: (_b = (_a = window.remotion_renderDefaults) === null || _a === void 0 ? void 0 : _a.publicLicenseKey) !== null && _b !== void 0 ? _b : null,
+                            });
+                        },
+                        type: 'item',
+                        keyHint: null,
+                        leftItem: null,
+                        subMenu: null,
+                        quickSwitcherLabel: 'Settings...',
+                        disabled: (browserStudioOperations === null && readOnlyStudio) ||
+                            type !== 'connected',
+                    },
                     {
                         id: 'acknowledgements',
                         value: 'acknowledgements',
@@ -424,6 +425,22 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                             ? 'Disable Zoom and Pan Gestures'
                             : 'Enable Zoom and Pan Gestures',
                     },
+                    {
+                        id: 'pixel-grid',
+                        keyHint: null,
+                        label: 'Pixel Grid',
+                        onClick: () => {
+                            closeMenu();
+                            setEditorShowPixelGrid((c) => !c);
+                        },
+                        type: 'item',
+                        value: 'pixel-grid',
+                        leftItem: editorShowPixelGrid ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
+                        subMenu: null,
+                        quickSwitcherLabel: editorShowPixelGrid
+                            ? 'Hide Pixel Grid'
+                            : 'Show Pixel Grid',
+                    },
                     {
                         id: 'show-rulers',
                         keyHint: null,
@@ -789,12 +806,13 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                             value: 'install-packages',
                             label: 'Install package...',
                             onClick: () => {
+                                var _a;
+                                var _b;
                                 closeMenu();
                                 setSelectedModal({
-                                    type: 'install-packages',
-                                    packageManager: remotion_packageManager === 'unknown'
-                                        ? null
-                                        : remotion_packageManager,
+                                    type: 'settings',
+                                    initialTab: 'packages',
+                                    initialPublicLicenseKey: (_b = (_a = window.remotion_renderDefaults) === null || _a === void 0 ? void 0 : _a.publicLicenseKey) !== null && _b !== void 0 ? _b : null,
                                 });
                             },
                             type: 'item',
@@ -818,13 +836,13 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                             ? 'Shortcuts (disabled)'
                             : 'Shortcuts',
                         onClick: () => {
+                            var _a;
+                            var _b;
                             closeMenu();
                             setSelectedModal({
-                                type: 'quick-switcher',
-                                mode: 'docs',
-                                invocationTimestamp: Date.now(),
-                                assetSelection: null,
-                                compositionSelection: null,
+                                type: 'settings',
+                                initialTab: 'shortcuts',
+                                initialPublicLicenseKey: (_b = (_a = window.remotion_renderDefaults) === null || _a === void 0 ? void 0 : _a.publicLicenseKey) !== null && _b !== void 0 ? _b : null,
                             });
                         },
                         keyHint: '?',
@@ -990,6 +1008,7 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
         currentComposition,
         resolvedCompositionLocation,
         editorZoomGestures,
+        editorShowPixelGrid,
         editorShowRulers,
         editorShowGuides,
         editorSnapping,
@@ -1007,6 +1026,7 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
         size.size,
         setSize,
         setEditorZoomGestures,
+        setEditorShowPixelGrid,
         setEditorShowRulers,
         setEditorShowGuides,
         setEditorSnapping,

package/dist/icons/align-center-horizontal.js

@@ -6,7 +6,7 @@ const AlignCenterHorizontalIcon = (props) => {
     var _a;
     const color = (_a = props.color) !== null && _a !== void 0 ? _a : 'currentColor';
     return (jsx_runtime_1.jsxs("svg", { ...props, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-            jsx_runtime_1.jsx("path", { d: "M8 2V14", stroke: color, strokeOpacity: "0.5", strokeLinecap: "square" }), jsx_runtime_1.jsx("line", { x1: "3", y1: "6", x2: "12", y2: "6", stroke: color, strokeWidth: "2" }), jsx_runtime_1.jsx("line", { x1: "4", y1: "10", x2: "11", y2: "10", stroke: color, strokeWidth: "2" })
+            jsx_runtime_1.jsx("path", { d: "M8 2V14", stroke: color, strokeLinecap: "square" }), jsx_runtime_1.jsx("line", { x1: "3", y1: "6", x2: "12", y2: "6", stroke: color, strokeWidth: "2" }), jsx_runtime_1.jsx("line", { x1: "4", y1: "10", x2: "11", y2: "10", stroke: color, strokeWidth: "2" })
         ] }));
 };
 exports.AlignCenterHorizontalIcon = AlignCenterHorizontalIcon;

package/dist/icons/align-left.js

@@ -6,7 +6,7 @@ const AlignLeftIcon = (props) => {
     var _a;
     const color = (_a = props.color) !== null && _a !== void 0 ? _a : 'currentColor';
     return (jsx_runtime_1.jsxs("svg", { ...props, viewBox: "0 0 16 16", fill: "none", children: [
-            jsx_runtime_1.jsx("path", { d: "M2 2L2 14", stroke: color, strokeOpacity: "0.5", strokeLinecap: "square" }), jsx_runtime_1.jsx("line", { x1: "4", y1: "6", x2: "13", y2: "6", stroke: color, strokeWidth: "2" }), jsx_runtime_1.jsx("line", { x1: "4", y1: "10", x2: "11", y2: "10", stroke: color, strokeWidth: "2" })
+            jsx_runtime_1.jsx("path", { d: "M2 2L2 14", stroke: color, strokeLinecap: "square" }), jsx_runtime_1.jsx("line", { x1: "4", y1: "6", x2: "13", y2: "6", stroke: color, strokeWidth: "2" }), jsx_runtime_1.jsx("line", { x1: "4", y1: "10", x2: "11", y2: "10", stroke: color, strokeWidth: "2" })
         ] }));
 };
 exports.AlignLeftIcon = AlignLeftIcon;

package/dist/icons/align-right.js

@@ -6,7 +6,7 @@ const AlignRightIcon = (props) => {
     var _a;
     const color = (_a = props.color) !== null && _a !== void 0 ? _a : 'currentColor';
     return (jsx_runtime_1.jsxs("svg", { ...props, viewBox: "0 0 16 16", fill: "none", children: [
-            jsx_runtime_1.jsx("path", { d: "M14 2V14", stroke: color, strokeOpacity: "0.5", strokeLinecap: "square" }), jsx_runtime_1.jsx("line", { x1: "3", y1: "6", x2: "12", y2: "6", stroke: color, strokeWidth: "2" }), jsx_runtime_1.jsx("line", { x1: "5", y1: "10", x2: "12", y2: "10", stroke: color, strokeWidth: "2" })
+            jsx_runtime_1.jsx("path", { d: "M14 2V14", stroke: color, strokeLinecap: "square" }), jsx_runtime_1.jsx("line", { x1: "3", y1: "6", x2: "12", y2: "6", stroke: color, strokeWidth: "2" }), jsx_runtime_1.jsx("line", { x1: "5", y1: "10", x2: "12", y2: "10", stroke: color, strokeWidth: "2" })
         ] }));
 };
 exports.AlignRightIcon = AlignRightIcon;

package/dist/icons/keyboard.d.ts

@@ -0,0 +1,4 @@
+import type { SVGProps } from 'react';
+export declare const KeyboardIcon: React.FC<SVGProps<SVGSVGElement> & {
+    readonly color: string;
+}>;