@remotion/studio: Fix bugs in loop display

[JonnyBurger]

Fixes #6091

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
bugs	Ready	Preview, Comment	Feb 10, 2026 0:31am
remotion	Ready	Preview, Comment	Feb 10, 2026 0:31am

[Copilot]

Pull request overview

Fixes timeline loop/media visualization inaccuracies in @remotion/studio by adding “natural” (unclipped) layout sizing and correcting how media trims / playbackRate influence thumbnail extraction and timeline metadata.

Changes:

• Add naturalWidth to timeline sequence layout so clipped sequences can still map media-time correctly.
• Update timeline video thumbnail extraction to use trim/playbackRate when computing source time ranges.
• Include trimBefore in timeline sequence registration for @remotion/media and add TS project reference wiring.

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
packages/studio/src/test/timeline-sequence-layout.test.ts	Updates expectations to include naturalWidth.
packages/studio/src/helpers/use-max-media-duration.ts	Adjusts max media duration based on playbackRate.
packages/studio/src/helpers/get-timeline-sequence-layout.ts	Computes and returns naturalWidth in addition to clipped width.
packages/studio/src/components/Timeline/TimelineVideoInfo.tsx	Uses trimBefore + playbackRate and naturalWidth for thumbnail slotting/extraction.
packages/studio/src/components/Timeline/TimelineSequence.tsx	Wires naturalWidth + new props into TimelineVideoInfo.
packages/media/tsconfig.json	Adds TS project reference to ../core.
packages/media/src/use-media-in-timeline.ts	Includes trimBefore in startMediaFrom for timeline registration.

Comments suppressed due to low confidence (1)

packages/studio/src/components/Timeline/TimelineVideoInfo.tsx:104

• naturalWidth is used to compute the timestamp slots and extraction targets, but the canvas is still created with canvas.width = visualizationWidth. If naturalWidth is much larger than the visible width (e.g. sequences clipped by the composition end), this will request/decode frames for off-canvas positions that will never be drawn, which can become expensive. Consider generating slots only for the visible width while still mapping timestamps using the natural scale (or otherwise cap slot generation to visualizationWidth).

const ensureSlots = ({
	filledSlots,
	naturalWidth: visualizationWidth,
	fromSeconds,
	toSeconds,
	aspectRatio,
}: {
	filledSlots: Map<number, number | undefined>;
	naturalWidth: number;
	fromSeconds: number;
	toSeconds: number;
	aspectRatio: number;
}) => {
	const segmentDuration = toSeconds - fromSeconds;

	const timestampTargets = calculateTimestampSlots({
		visualizationWidth,