diff --git a/packages/studio/src/components/Timeline/TimelineVideoInfo.tsx b/packages/studio/src/components/Timeline/TimelineVideoInfo.tsx
index e611ad18635..a81d1e26f92 100644
--- a/packages/studio/src/components/Timeline/TimelineVideoInfo.tsx
+++ b/packages/studio/src/components/Timeline/TimelineVideoInfo.tsx
@@ -37,6 +37,7 @@ const filmstripContainerStyle: React.CSSProperties = {
height: TIMELINE_LAYER_FILMSTRIP_HEIGHT,
backgroundColor: BLACK_ALPHA_30,
display: 'flex',
+ overflow: 'hidden',
borderTopLeftRadius: 2,
fontSize: 10,
fontFamily: 'Arial, Helvetica',
@@ -111,8 +112,8 @@ const TimelineVideoInfoSegment: React.FC<{
const canvas = document.createElement('canvas');
canvas.width = Math.ceil(visualizationWidth * pixelRatio);
canvas.height = Math.ceil(TIMELINE_LAYER_FILMSTRIP_HEIGHT * pixelRatio);
- canvas.style.width = visualizationWidth + 'px';
- canvas.style.height = TIMELINE_LAYER_FILMSTRIP_HEIGHT + 'px';
+ canvas.style.width = canvas.width / pixelRatio + 'px';
+ canvas.style.height = canvas.height / pixelRatio + 'px';
const ctx = canvas.getContext('2d');
if (!ctx) {
return;
@@ -251,7 +252,10 @@ const TimelineVideoInfoSegment: React.FC<{
const filledSlots = new Map
();
const {fromSeconds, toSeconds} = times;
- const targetWidth = targetCanvas.width;
+ // Keep the time-to-pixel scale independent of the integer canvas backing size.
+ const targetWidth = tiledLoop
+ ? tiledLoop.loopWidth * pixelRatio
+ : visualizationWidth * pixelRatio;
const repeatTarget = () => {
if (!tiledLoop) {
return;
diff --git a/packages/studio/src/components/composition-selector-drag-data.ts b/packages/studio/src/components/composition-selector-drag-data.ts
new file mode 100644
index 00000000000..b2cbe4d06d8
--- /dev/null
+++ b/packages/studio/src/components/composition-selector-drag-data.ts
@@ -0,0 +1,131 @@
+import type {
+ CompositionOrFolder,
+ SymbolicatedStackFrame,
+} from '@remotion/studio-shared';
+
+const MIME_TYPE = 'application/remotion-composition-selector-reorder';
+
+export type CompositionSelectorDragData = {
+ readonly type: 'remotion-composition-selector';
+ readonly version: 1;
+ readonly item: CompositionOrFolder;
+ readonly sourceFile: string | null;
+};
+
+export type CompositionSelectorActiveDrag = {
+ readonly item: CompositionOrFolder;
+ readonly parentFolderPath: string | null;
+};
+
+type DragDataTransfer = {
+ readonly types: ArrayLike;
+ readonly getData: (mimeType: string) => string;
+};
+
+const isSafeString = (value: unknown, maxLength: number): value is string => {
+ return (
+ typeof value === 'string' &&
+ value.length > 0 &&
+ value.length <= maxLength &&
+ !value.includes('\0')
+ );
+};
+
+const isCompositionOrFolder = (
+ value: unknown,
+): value is CompositionOrFolder => {
+ if (typeof value !== 'object' || value === null) {
+ return false;
+ }
+
+ const item = value as Record;
+ if (item.type === 'composition') {
+ return isSafeString(item.compositionId, 500);
+ }
+
+ return (
+ item.type === 'folder' &&
+ isSafeString(item.folderName, 500) &&
+ (item.parentName === null || isSafeString(item.parentName, 2000))
+ );
+};
+
+const isSafeSourceFile = (value: unknown): value is string | null => {
+ return (
+ value === null ||
+ (isSafeString(value, 2000) &&
+ !value.includes('\\') &&
+ !value.startsWith('/') &&
+ !value.split('/').includes('..'))
+ );
+};
+
+export const makeCompositionSelectorDragData = ({
+ item,
+ sourceFile,
+}: {
+ readonly item: CompositionOrFolder;
+ readonly sourceFile: string | null;
+}) => {
+ const data: CompositionSelectorDragData = {
+ type: 'remotion-composition-selector',
+ version: 1,
+ item,
+ sourceFile,
+ };
+ return {mimeType: MIME_TYPE, payload: JSON.stringify(data), data};
+};
+
+export const hasCompositionSelectorDragData = (
+ mimeTypes: ArrayLike,
+) => {
+ return Array.from(mimeTypes).includes(MIME_TYPE);
+};
+
+export const parseCompositionSelectorDragData = (
+ dataTransfer: DragDataTransfer,
+): CompositionSelectorDragData | null => {
+ if (!hasCompositionSelectorDragData(dataTransfer.types)) {
+ return null;
+ }
+
+ try {
+ const parsed = JSON.parse(dataTransfer.getData(MIME_TYPE)) as Record<
+ string,
+ unknown
+ >;
+ if (
+ parsed.type !== 'remotion-composition-selector' ||
+ parsed.version !== 1 ||
+ !isCompositionOrFolder(parsed.item) ||
+ !isSafeSourceFile(parsed.sourceFile)
+ ) {
+ return null;
+ }
+
+ return {
+ type: 'remotion-composition-selector',
+ version: 1,
+ item: parsed.item,
+ sourceFile: parsed.sourceFile,
+ };
+ } catch {
+ return null;
+ }
+};
+
+export const compositionSelectorDragDataToSymbolicatedStack = (
+ dragData: CompositionSelectorDragData,
+): SymbolicatedStackFrame | null => {
+ if (dragData.sourceFile === null) {
+ return null;
+ }
+
+ return {
+ originalColumnNumber: null,
+ originalFileName: dragData.sourceFile,
+ originalFunctionName: null,
+ originalLineNumber: null,
+ originalScriptCode: null,
+ };
+};
diff --git a/packages/studio/src/helpers/use-menu-structure.tsx b/packages/studio/src/helpers/use-menu-structure.tsx
index ac1602e2b0e..fe62bb45974 100644
--- a/packages/studio/src/helpers/use-menu-structure.tsx
+++ b/packages/studio/src/helpers/use-menu-structure.tsx
@@ -264,7 +264,7 @@ const getRenderMenuItems = ({
{
id: 'render-on-web',
value: 'render-on-web',
- label: 'Render on web...',
+ label: 'Render in browser...',
onClick: () => {
closeMenu();
@@ -278,7 +278,7 @@ const getRenderMenuItems = ({
keyHint: null,
leftItem: null,
subMenu: null,
- quickSwitcherLabel: 'Render on web...',
+ quickSwitcherLabel: 'Render in browser...',
},
{
type: 'divider' as const,
diff --git a/packages/studio/src/test/composition-selector-drag-data.test.ts b/packages/studio/src/test/composition-selector-drag-data.test.ts
new file mode 100644
index 00000000000..bb23a331413
--- /dev/null
+++ b/packages/studio/src/test/composition-selector-drag-data.test.ts
@@ -0,0 +1,134 @@
+import {expect, test} from 'bun:test';
+import {
+ compositionSelectorDragDataToSymbolicatedStack,
+ hasCompositionSelectorDragData,
+ makeCompositionSelectorDragData,
+ parseCompositionSelectorDragData,
+} from '../components/composition-selector-drag-data';
+
+const composition = makeCompositionSelectorDragData({
+ item: {type: 'composition', compositionId: 'MyVideo'},
+ sourceFile: 'src/Root.tsx',
+});
+
+const folder = makeCompositionSelectorDragData({
+ item: {type: 'folder', folderName: 'Nested', parentName: 'Parent'},
+ sourceFile: null,
+});
+
+const makeDataTransfer = ({
+ mimeType,
+ payload,
+}: {
+ readonly mimeType: string;
+ readonly payload: string;
+}) => ({
+ types: ['text/plain', mimeType],
+ getData: (requestedMimeType: string) =>
+ requestedMimeType === mimeType ? payload : '',
+});
+
+test('constructs and parses composition selector drag data', () => {
+ expect(composition.mimeType).toBe(
+ 'application/remotion-composition-selector-reorder',
+ );
+ expect(hasCompositionSelectorDragData(['text/plain'])).toBe(false);
+ expect(
+ hasCompositionSelectorDragData(['text/plain', composition.mimeType]),
+ ).toBe(true);
+ expect(
+ parseCompositionSelectorDragData(makeDataTransfer(composition)),
+ ).toEqual(composition.data);
+ expect(parseCompositionSelectorDragData(makeDataTransfer(folder))).toEqual(
+ folder.data,
+ );
+});
+
+test('rejects malformed composition selector drag data', () => {
+ expect(
+ parseCompositionSelectorDragData({
+ types: ['text/plain'],
+ getData: () => composition.payload,
+ }),
+ ).toBe(null);
+
+ const validComposition = {
+ type: 'remotion-composition-selector',
+ version: 1,
+ item: {type: 'composition', compositionId: 'MyVideo'},
+ sourceFile: 'src/Root.tsx',
+ };
+ const validFolder = {
+ ...validComposition,
+ item: {type: 'folder', folderName: 'Nested', parentName: 'Parent'},
+ };
+
+ for (const payload of [
+ '',
+ '{',
+ JSON.stringify({...validComposition, type: 'other'}),
+ JSON.stringify({...validComposition, version: 2}),
+ JSON.stringify({...validComposition, item: null}),
+ JSON.stringify({
+ ...validComposition,
+ item: {type: 'other', compositionId: 'MyVideo'},
+ }),
+ JSON.stringify({
+ ...validComposition,
+ item: {type: 'composition', compositionId: ''},
+ }),
+ JSON.stringify({
+ ...validComposition,
+ item: {type: 'composition', compositionId: 'a'.repeat(501)},
+ }),
+ JSON.stringify({
+ ...validComposition,
+ item: {type: 'composition', compositionId: 'Invalid\0id'},
+ }),
+ JSON.stringify({
+ ...validFolder,
+ item: {...validFolder.item, folderName: ''},
+ }),
+ JSON.stringify({
+ ...validFolder,
+ item: {...validFolder.item, folderName: 'a'.repeat(501)},
+ }),
+ JSON.stringify({
+ ...validFolder,
+ item: {...validFolder.item, parentName: 'a'.repeat(2001)},
+ }),
+ JSON.stringify({
+ ...validFolder,
+ item: {type: 'folder', folderName: 'Nested'},
+ }),
+ JSON.stringify({...validComposition, sourceFile: undefined}),
+ JSON.stringify({...validComposition, sourceFile: ''}),
+ JSON.stringify({...validComposition, sourceFile: 'a'.repeat(2001)}),
+ JSON.stringify({...validComposition, sourceFile: '/src/Root.tsx'}),
+ JSON.stringify({...validComposition, sourceFile: '../Root.tsx'}),
+ JSON.stringify({...validComposition, sourceFile: 'src/../Root.tsx'}),
+ JSON.stringify({...validComposition, sourceFile: 'src\\Root.tsx'}),
+ JSON.stringify({...validComposition, sourceFile: 'src/Root\0.tsx'}),
+ ]) {
+ expect(
+ parseCompositionSelectorDragData(
+ makeDataTransfer({mimeType: composition.mimeType, payload}),
+ ),
+ ).toBe(null);
+ }
+});
+
+test('converts composition selector source locations to symbolicated stacks', () => {
+ expect(
+ compositionSelectorDragDataToSymbolicatedStack(composition.data),
+ ).toEqual({
+ originalColumnNumber: null,
+ originalFileName: 'src/Root.tsx',
+ originalFunctionName: null,
+ originalLineNumber: null,
+ originalScriptCode: null,
+ });
+ expect(compositionSelectorDragDataToSymbolicatedStack(folder.data)).toBe(
+ null,
+ );
+});
diff --git a/packages/timeline-utils/src/render-frame-strip.ts b/packages/timeline-utils/src/render-frame-strip.ts
index b71cd81f93b..b0cfd0dee31 100644
--- a/packages/timeline-utils/src/render-frame-strip.ts
+++ b/packages/timeline-utils/src/render-frame-strip.ts
@@ -132,14 +132,13 @@ export const drawSlot = ({
const relativeTimestamp = timestamp - fromSeconds * WEBCODECS_TIMESCALE;
const frameIndex = relativeTimestamp / durationOfOneFrame;
const thumbnailWidth = frame.displayWidth / devicePixelRatio;
- const left = Math.floor(frameIndex * thumbnailWidth);
- const right = Math.ceil((frameIndex + 1) * thumbnailWidth);
+ const left = frameIndex * thumbnailWidth;
ctx.drawImage(
frame,
left,
0,
- right - left,
+ thumbnailWidth,
frame.displayHeight / devicePixelRatio,
);
filledSlots.set(timestamp, frame.timestamp);
diff --git a/packages/timeline-utils/src/test/render-frame-strip.test.ts b/packages/timeline-utils/src/test/render-frame-strip.test.ts
new file mode 100644
index 00000000000..f7168083769
--- /dev/null
+++ b/packages/timeline-utils/src/test/render-frame-strip.test.ts
@@ -0,0 +1,47 @@
+import {expect, test} from 'bun:test';
+import {drawSlot, WEBCODECS_TIMESCALE} from '../render-frame-strip';
+
+test('filmstrip thumbnails keep their global position after a split', () => {
+ const frame = {
+ displayHeight: 52,
+ displayWidth: 92,
+ timestamp: 2 * WEBCODECS_TIMESCALE,
+ } as VideoFrame;
+ const pixelsPerSecond = 133.8;
+ const splitAtSeconds = 1.1;
+ const drawPositions: number[] = [];
+ const ctx = {
+ drawImage: (...args: unknown[]) => {
+ drawPositions.push(args[1] as number);
+ },
+ } as unknown as CanvasRenderingContext2D;
+
+ drawSlot({
+ ctx,
+ devicePixelRatio: 1,
+ filledSlots: new Map(),
+ frame,
+ frameHeight: frame.displayHeight,
+ fromSeconds: 0,
+ segmentDuration: 3,
+ timestamp: frame.timestamp,
+ visualizationWidth: pixelsPerSecond * 3,
+ });
+ drawSlot({
+ ctx,
+ devicePixelRatio: 1,
+ filledSlots: new Map(),
+ frame,
+ frameHeight: frame.displayHeight,
+ fromSeconds: splitAtSeconds,
+ segmentDuration: 3 - splitAtSeconds,
+ timestamp: frame.timestamp,
+ visualizationWidth: pixelsPerSecond * (3 - splitAtSeconds),
+ });
+
+ const [positionBeforeSplit, positionAfterSplit] = drawPositions;
+ expect(positionAfterSplit + splitAtSeconds * pixelsPerSecond).toBeCloseTo(
+ positionBeforeSplit,
+ 10,
+ );
+});