@remotion/studio 4.0.519 → 4.0.521
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/api/shut-down-studio.d.ts +6 -0
- package/dist/api/shut-down-studio.js +23 -0
- package/dist/api/visual-control.js +2 -2
- package/dist/components/AudioWaveform.js +16 -7
- package/dist/components/Canvas.js +114 -48
- package/dist/components/CaptionInspector.d.ts +1 -0
- package/dist/components/CaptionInspector.js +43 -2
- package/dist/components/CaptionTextEditor.js +1 -1
- package/dist/components/CompositionSelector.js +41 -34
- package/dist/components/CompositionSelectorItem.d.ts +7 -0
- package/dist/components/CompositionSelectorItem.js +344 -73
- package/dist/components/CurrentCompositionSideEffects.js +5 -0
- package/dist/components/ElementInstallConfirmation.d.ts +2 -23
- package/dist/components/ElementInstallConfirmation.js +89 -65
- package/dist/components/ElementLibraryModal.js +3 -1
- package/dist/components/FpsCounter.js +1 -1
- package/dist/components/FramePersistor.js +1 -1
- package/dist/components/InlineCaptionInspector.js +37 -1
- package/dist/components/InspectorPanel/ElementLibraryButton.js +3 -18
- package/dist/components/InspectorPanel/SequenceSelectionInspector.js +4 -3
- package/dist/components/InspectorPanel/use-composition-actions.js +5 -8
- package/dist/components/InspectorSequenceSection.js +1 -4
- package/dist/components/Menu/MenuSubItem.js +1 -1
- package/dist/components/ModalContainer.d.ts +1 -0
- package/dist/components/ModalContainer.js +2 -2
- package/dist/components/ModalHeader.js +5 -1
- package/dist/components/Modals.js +1 -1
- package/dist/components/NewComposition/NewComposition.js +2 -2
- package/dist/components/PlayPause.js +2 -13
- package/dist/components/PreviewToolbar.js +1 -1
- package/dist/components/QuickSwitcher/QuickSwitcherContent.js +29 -15
- package/dist/components/QuickSwitcher/QuickSwitcherResult.d.ts +14 -1
- package/dist/components/QuickSwitcher/QuickSwitcherResult.js +64 -9
- package/dist/components/QuickSwitcher/asset-search.d.ts +0 -1
- package/dist/components/QuickSwitcher/asset-search.js +1 -16
- package/dist/components/QuickSwitcher/composition-search.d.ts +16 -0
- package/dist/components/QuickSwitcher/composition-search.js +136 -0
- package/dist/components/RenderButton.js +2 -2
- package/dist/components/RenderModal/RenderStatusModal.js +7 -1
- package/dist/components/RenderModal/ServerRenderModal.js +1 -1
- package/dist/components/RenderModal/WebRenderModal.js +1 -1
- package/dist/components/RenderQueue/ClientRenderQueueProcessor.js +1 -1
- package/dist/components/ResetZoomButton.js +17 -2
- package/dist/components/SelectedOutlineElement.js +10 -30
- package/dist/components/SettingsModal.js +8 -5
- package/dist/components/TimeValue.js +36 -7
- package/dist/components/Timeline/Timeline.d.ts +1 -1
- package/dist/components/Timeline/Timeline.js +33 -20
- package/dist/components/Timeline/TimelineAssetField.d.ts +0 -1
- package/dist/components/Timeline/TimelineAssetField.js +17 -9
- package/dist/components/Timeline/TimelineCollapseToggle.js +1 -1
- package/dist/components/Timeline/TimelineDeleteKeybindings.js +5 -90
- package/dist/components/Timeline/TimelineDragHandler.js +18 -8
- package/dist/components/Timeline/TimelineFontWeightField.d.ts +11 -0
- package/dist/components/Timeline/TimelineFontWeightField.js +65 -0
- package/dist/components/Timeline/TimelineInOutDragHandler.js +2 -3
- package/dist/components/Timeline/TimelineLayerChildren.d.ts +21 -0
- package/dist/components/Timeline/TimelineLayerChildren.js +129 -0
- package/dist/components/Timeline/TimelineNumberField.js +13 -5
- package/dist/components/Timeline/TimelinePinchZoom.js +14 -4
- package/dist/components/Timeline/TimelinePlayCursorSyncer.js +8 -4
- package/dist/components/Timeline/TimelinePrimitiveFieldValue.js +4 -0
- package/dist/components/Timeline/TimelineSequence.js +54 -73
- package/dist/components/Timeline/TimelineSequenceItem.js +16 -36
- package/dist/components/Timeline/TimelineSequenceRightEdgeDragHandle.js +22 -10
- package/dist/components/Timeline/TimelineSlider.js +2 -2
- package/dist/components/Timeline/TimelineTickFormatProvider.d.ts +8 -0
- package/dist/components/Timeline/TimelineTickFormatProvider.js +16 -0
- package/dist/components/Timeline/TimelineTimeIndicators.js +7 -3
- package/dist/components/Timeline/TimelineVideoInfo.js +7 -3
- package/dist/components/Timeline/TimelineWidthProvider.js +15 -8
- package/dist/components/Timeline/TimelineZoomControls.js +25 -8
- package/dist/components/Timeline/delete-selected-timeline-item.js +2 -2
- package/dist/components/Timeline/timeline-field-display-utils.js +1 -0
- package/dist/components/Timeline/timeline-scroll-logic.d.ts +1 -0
- package/dist/components/Timeline/timeline-scroll-logic.js +21 -17
- package/dist/components/Timeline/use-delete-timeline-items.d.ts +1 -0
- package/dist/components/Timeline/use-delete-timeline-items.js +118 -0
- package/dist/components/Timeline/use-timeline-asset-drop.js +8 -14
- package/dist/components/UpdateStatusContext.d.ts +5 -0
- package/dist/components/UpdateStatusContext.js +53 -2
- package/dist/components/UpdatesSettings.js +25 -4
- package/dist/components/WebMcp.js +87 -8
- package/dist/components/ZoomPersistor.js +2 -2
- package/dist/components/composition-drag-data.d.ts +36 -0
- package/dist/components/composition-drag-data.js +232 -0
- package/dist/components/composition-selector-drag-data.d.ts +27 -0
- package/dist/components/composition-selector-drag-data.js +80 -0
- package/dist/components/drop-handler-data.d.ts +2 -1
- package/dist/components/drop-handler-data.js +6 -4
- package/dist/components/effect-drag-and-drop.d.ts +2 -5
- package/dist/components/handle-drop.js +6 -2
- package/dist/components/import-assets.d.ts +7 -14
- package/dist/components/import-assets.js +11 -1
- package/dist/components/parse-caption-file.d.ts +5 -0
- package/dist/components/parse-caption-file.js +63 -0
- package/dist/error-overlay/current-error.d.ts +13 -0
- package/dist/error-overlay/current-error.js +21 -0
- package/dist/error-overlay/remotion-overlay/ErrorLoader.js +5 -1
- package/dist/esm/chunk-emw4k5b0.js +99527 -0
- package/dist/esm/{chunk-1fkq5bfq.js → chunk-vkrvnx2h.js} +20116 -16283
- package/dist/esm/index.mjs +27 -9
- package/dist/esm/internals.mjs +17408 -13426
- package/dist/esm/previewEntry.mjs +17285 -13216
- package/dist/esm/renderEntry.mjs +1 -1
- package/dist/helpers/create-folder-tree.js +2 -5
- package/dist/helpers/document-title.d.ts +2 -0
- package/dist/helpers/document-title.js +14 -3
- package/dist/helpers/get-preview-file-type.js +22 -3
- package/dist/helpers/get-timeline-max-zoom.d.ts +34 -28
- package/dist/helpers/get-timeline-max-zoom.js +46 -29
- package/dist/helpers/inserted-element-selection.d.ts +2 -1
- package/dist/helpers/install-fiber-sequence-order-observer.d.ts +37 -0
- package/dist/helpers/install-fiber-sequence-order-observer.js +109 -0
- package/dist/helpers/open-in-editor.js +2 -1
- package/dist/helpers/use-menu-structure.js +2 -2
- package/dist/helpers/use-runtime-values.d.ts +1 -1
- package/dist/helpers/use-runtime-values.js +5 -4
- package/dist/helpers/use-sync-external-store.d.ts +3 -0
- package/dist/helpers/use-sync-external-store.js +5 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +3 -1
- package/dist/previewEntry.js +2 -0
- package/dist/state/modals.d.ts +16 -2
- package/dist/state/timeline-sequence-hover.js +3 -2
- package/dist/state/timeline-zoom.d.ts +0 -1
- package/dist/state/timeline-zoom.js +13 -6
- package/package.json +17 -17
- package/dist/helpers/sort-by-nonce-history.d.ts +0 -1
- package/dist/helpers/sort-by-nonce-history.js +0 -6
|
@@ -0,0 +1,232 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
19
|
+
var ownKeys = function(o) {
|
|
20
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
21
|
+
var ar = [];
|
|
22
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
23
|
+
return ar;
|
|
24
|
+
};
|
|
25
|
+
return ownKeys(o);
|
|
26
|
+
};
|
|
27
|
+
return function (mod) {
|
|
28
|
+
if (mod && mod.__esModule) return mod;
|
|
29
|
+
var result = {};
|
|
30
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
31
|
+
__setModuleDefault(result, mod);
|
|
32
|
+
return result;
|
|
33
|
+
};
|
|
34
|
+
})();
|
|
35
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
|
+
exports.compositionDragDataToSymbolicatedStack = exports.parseCompositionDragData = exports.getCompositionDragPreviewMetadata = exports.makeCompositionDragData = void 0;
|
|
37
|
+
const z = __importStar(require("zod/mini"));
|
|
38
|
+
const REMOTION_DRAG_MIME_TYPE = 'application/vnd.remotion.drag+json';
|
|
39
|
+
const DRAG_MIME_VERSION = 1;
|
|
40
|
+
const MAX_MIME_TYPE_LENGTH = 512;
|
|
41
|
+
const MAX_DIMENSION = 100000;
|
|
42
|
+
const MAX_DURATION_IN_FRAMES = 100000000;
|
|
43
|
+
const compositionIdSchema = z
|
|
44
|
+
.string()
|
|
45
|
+
.check(z.refine((value) => value.length > 0 &&
|
|
46
|
+
value.length < 500 &&
|
|
47
|
+
/^([a-zA-Z0-9-\u4E00-\u9FFF])+$/.test(value)));
|
|
48
|
+
const compositionFileSchema = z.nullable(z
|
|
49
|
+
.string()
|
|
50
|
+
.check(z.refine((value) => value.length > 0 &&
|
|
51
|
+
value.length < 2000 &&
|
|
52
|
+
!value.includes('\0') &&
|
|
53
|
+
!value.includes('\\') &&
|
|
54
|
+
!value.startsWith('/') &&
|
|
55
|
+
!value.split('/').includes('..'))));
|
|
56
|
+
const compositionDragDataSchema = z.object({
|
|
57
|
+
type: z.literal('remotion-composition'),
|
|
58
|
+
version: z.literal(1),
|
|
59
|
+
compositionId: compositionIdSchema,
|
|
60
|
+
compositionFile: compositionFileSchema,
|
|
61
|
+
});
|
|
62
|
+
const parsePositiveNumber = (value, max) => {
|
|
63
|
+
if (!/^(?:[1-9]\d*|0\.\d+|[1-9]\d*\.\d+)$/.test(value)) {
|
|
64
|
+
return null;
|
|
65
|
+
}
|
|
66
|
+
const parsed = Number(value);
|
|
67
|
+
return Number.isFinite(parsed) && parsed > 0 && parsed <= max ? parsed : null;
|
|
68
|
+
};
|
|
69
|
+
const parsePositiveInteger = (value, max) => {
|
|
70
|
+
if (!/^[1-9]\d*$/.test(value)) {
|
|
71
|
+
return null;
|
|
72
|
+
}
|
|
73
|
+
const parsed = Number(value);
|
|
74
|
+
return Number.isInteger(parsed) && parsed <= max ? parsed : null;
|
|
75
|
+
};
|
|
76
|
+
const parseCompositionDragMimeType = (mimeType) => {
|
|
77
|
+
if (mimeType.length > MAX_MIME_TYPE_LENGTH ||
|
|
78
|
+
!mimeType.startsWith(`${REMOTION_DRAG_MIME_TYPE};`)) {
|
|
79
|
+
return null;
|
|
80
|
+
}
|
|
81
|
+
const segments = mimeType.split(';');
|
|
82
|
+
if (segments.shift() !== REMOTION_DRAG_MIME_TYPE) {
|
|
83
|
+
return null;
|
|
84
|
+
}
|
|
85
|
+
const values = new Map();
|
|
86
|
+
for (const segment of segments) {
|
|
87
|
+
const separator = segment.indexOf('=');
|
|
88
|
+
if (separator === -1) {
|
|
89
|
+
return null;
|
|
90
|
+
}
|
|
91
|
+
const key = segment.slice(0, separator);
|
|
92
|
+
const value = segment.slice(separator + 1);
|
|
93
|
+
if (!['v', 'type', 'width', 'height', 'duration'].includes(key) ||
|
|
94
|
+
value === '' ||
|
|
95
|
+
values.has(key)) {
|
|
96
|
+
return null;
|
|
97
|
+
}
|
|
98
|
+
values.set(key, value);
|
|
99
|
+
}
|
|
100
|
+
if (values.get('v') !== String(DRAG_MIME_VERSION) ||
|
|
101
|
+
values.get('type') !== 'composition') {
|
|
102
|
+
return null;
|
|
103
|
+
}
|
|
104
|
+
const widthValue = values.get('width');
|
|
105
|
+
const heightValue = values.get('height');
|
|
106
|
+
if ((widthValue === undefined) !== (heightValue === undefined)) {
|
|
107
|
+
return null;
|
|
108
|
+
}
|
|
109
|
+
const width = widthValue === undefined
|
|
110
|
+
? null
|
|
111
|
+
: parsePositiveNumber(widthValue, MAX_DIMENSION);
|
|
112
|
+
const height = heightValue === undefined
|
|
113
|
+
? null
|
|
114
|
+
: parsePositiveNumber(heightValue, MAX_DIMENSION);
|
|
115
|
+
const durationValue = values.get('duration');
|
|
116
|
+
const durationInFrames = durationValue === undefined
|
|
117
|
+
? null
|
|
118
|
+
: parsePositiveInteger(durationValue, MAX_DURATION_IN_FRAMES);
|
|
119
|
+
if (widthValue !== undefined && width === null) {
|
|
120
|
+
return null;
|
|
121
|
+
}
|
|
122
|
+
if (heightValue !== undefined && height === null) {
|
|
123
|
+
return null;
|
|
124
|
+
}
|
|
125
|
+
if (durationValue !== undefined && durationInFrames === null) {
|
|
126
|
+
return null;
|
|
127
|
+
}
|
|
128
|
+
return {
|
|
129
|
+
type: 'composition',
|
|
130
|
+
width,
|
|
131
|
+
height,
|
|
132
|
+
durationInFrames,
|
|
133
|
+
mimeType,
|
|
134
|
+
};
|
|
135
|
+
};
|
|
136
|
+
const makeCompositionDragData = ({ compositionFile, compositionId, width, height, durationInFrames, }) => {
|
|
137
|
+
if ((width === null) !== (height === null)) {
|
|
138
|
+
throw new TypeError('width and height must either both be numbers or both be null');
|
|
139
|
+
}
|
|
140
|
+
if (width !== null &&
|
|
141
|
+
(!Number.isFinite(width) || width <= 0 || width > MAX_DIMENSION)) {
|
|
142
|
+
throw new TypeError(`width and height must be numbers between 0 and ${MAX_DIMENSION}`);
|
|
143
|
+
}
|
|
144
|
+
if (height !== null &&
|
|
145
|
+
(!Number.isFinite(height) || height <= 0 || height > MAX_DIMENSION)) {
|
|
146
|
+
throw new TypeError(`width and height must be numbers between 0 and ${MAX_DIMENSION}`);
|
|
147
|
+
}
|
|
148
|
+
if (durationInFrames !== null &&
|
|
149
|
+
(!Number.isInteger(durationInFrames) ||
|
|
150
|
+
durationInFrames <= 0 ||
|
|
151
|
+
durationInFrames > MAX_DURATION_IN_FRAMES)) {
|
|
152
|
+
throw new TypeError(`durationInFrames must be an integer between 1 and ${MAX_DURATION_IN_FRAMES}`);
|
|
153
|
+
}
|
|
154
|
+
const data = {
|
|
155
|
+
type: 'remotion-composition',
|
|
156
|
+
version: 1,
|
|
157
|
+
compositionFile,
|
|
158
|
+
compositionId,
|
|
159
|
+
};
|
|
160
|
+
const segments = [
|
|
161
|
+
REMOTION_DRAG_MIME_TYPE,
|
|
162
|
+
`v=${DRAG_MIME_VERSION}`,
|
|
163
|
+
'type=composition',
|
|
164
|
+
];
|
|
165
|
+
if (width !== null && height !== null) {
|
|
166
|
+
segments.push(`width=${width}`, `height=${height}`);
|
|
167
|
+
}
|
|
168
|
+
if (durationInFrames !== null) {
|
|
169
|
+
segments.push(`duration=${durationInFrames}`);
|
|
170
|
+
}
|
|
171
|
+
return {
|
|
172
|
+
mimeType: segments.join(';'),
|
|
173
|
+
payload: JSON.stringify(data),
|
|
174
|
+
data,
|
|
175
|
+
};
|
|
176
|
+
};
|
|
177
|
+
exports.makeCompositionDragData = makeCompositionDragData;
|
|
178
|
+
const getCompositionDragPreviewMetadata = (mimeTypes) => {
|
|
179
|
+
for (let index = 0; index < mimeTypes.length; index++) {
|
|
180
|
+
const parsed = parseCompositionDragMimeType(mimeTypes[index]);
|
|
181
|
+
if (parsed !== null) {
|
|
182
|
+
return parsed;
|
|
183
|
+
}
|
|
184
|
+
}
|
|
185
|
+
return null;
|
|
186
|
+
};
|
|
187
|
+
exports.getCompositionDragPreviewMetadata = getCompositionDragPreviewMetadata;
|
|
188
|
+
const parseCompositionDragData = (source) => {
|
|
189
|
+
const serialized = 'types' in source
|
|
190
|
+
? (() => {
|
|
191
|
+
const preview = (0, exports.getCompositionDragPreviewMetadata)(source.types);
|
|
192
|
+
return preview === null
|
|
193
|
+
? null
|
|
194
|
+
: {
|
|
195
|
+
mimeType: preview.mimeType,
|
|
196
|
+
payload: source.getData(preview.mimeType),
|
|
197
|
+
};
|
|
198
|
+
})()
|
|
199
|
+
: source;
|
|
200
|
+
if (serialized === null ||
|
|
201
|
+
parseCompositionDragMimeType(serialized.mimeType) === null) {
|
|
202
|
+
return null;
|
|
203
|
+
}
|
|
204
|
+
try {
|
|
205
|
+
const parsed = z.safeParse(compositionDragDataSchema, JSON.parse(serialized.payload));
|
|
206
|
+
return parsed.success
|
|
207
|
+
? {
|
|
208
|
+
type: 'remotion-composition',
|
|
209
|
+
version: 1,
|
|
210
|
+
compositionFile: parsed.data.compositionFile,
|
|
211
|
+
compositionId: parsed.data.compositionId,
|
|
212
|
+
}
|
|
213
|
+
: null;
|
|
214
|
+
}
|
|
215
|
+
catch (_a) {
|
|
216
|
+
return null;
|
|
217
|
+
}
|
|
218
|
+
};
|
|
219
|
+
exports.parseCompositionDragData = parseCompositionDragData;
|
|
220
|
+
const compositionDragDataToSymbolicatedStack = (dragData) => {
|
|
221
|
+
if (dragData.compositionFile === null) {
|
|
222
|
+
return null;
|
|
223
|
+
}
|
|
224
|
+
return {
|
|
225
|
+
originalColumnNumber: null,
|
|
226
|
+
originalFileName: dragData.compositionFile,
|
|
227
|
+
originalFunctionName: null,
|
|
228
|
+
originalLineNumber: null,
|
|
229
|
+
originalScriptCode: null,
|
|
230
|
+
};
|
|
231
|
+
};
|
|
232
|
+
exports.compositionDragDataToSymbolicatedStack = compositionDragDataToSymbolicatedStack;
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import type { CompositionOrFolder, SymbolicatedStackFrame } from '@remotion/studio-shared';
|
|
2
|
+
export type CompositionSelectorDragData = {
|
|
3
|
+
readonly type: 'remotion-composition-selector';
|
|
4
|
+
readonly version: 1;
|
|
5
|
+
readonly item: CompositionOrFolder;
|
|
6
|
+
readonly sourceFile: string | null;
|
|
7
|
+
};
|
|
8
|
+
export type CompositionSelectorActiveDrag = {
|
|
9
|
+
readonly item: CompositionOrFolder;
|
|
10
|
+
readonly parentFolderPath: string | null;
|
|
11
|
+
};
|
|
12
|
+
type DragDataTransfer = {
|
|
13
|
+
readonly types: ArrayLike<string>;
|
|
14
|
+
readonly getData: (mimeType: string) => string;
|
|
15
|
+
};
|
|
16
|
+
export declare const makeCompositionSelectorDragData: ({ item, sourceFile, }: {
|
|
17
|
+
readonly item: CompositionOrFolder;
|
|
18
|
+
readonly sourceFile: string | null;
|
|
19
|
+
}) => {
|
|
20
|
+
mimeType: string;
|
|
21
|
+
payload: string;
|
|
22
|
+
data: CompositionSelectorDragData;
|
|
23
|
+
};
|
|
24
|
+
export declare const hasCompositionSelectorDragData: (mimeTypes: ArrayLike<string>) => boolean;
|
|
25
|
+
export declare const parseCompositionSelectorDragData: (dataTransfer: DragDataTransfer) => CompositionSelectorDragData | null;
|
|
26
|
+
export declare const compositionSelectorDragDataToSymbolicatedStack: (dragData: CompositionSelectorDragData) => SymbolicatedStackFrame | null;
|
|
27
|
+
export {};
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.compositionSelectorDragDataToSymbolicatedStack = exports.parseCompositionSelectorDragData = exports.hasCompositionSelectorDragData = exports.makeCompositionSelectorDragData = void 0;
|
|
4
|
+
const MIME_TYPE = 'application/remotion-composition-selector-reorder';
|
|
5
|
+
const isSafeString = (value, maxLength) => {
|
|
6
|
+
return (typeof value === 'string' &&
|
|
7
|
+
value.length > 0 &&
|
|
8
|
+
value.length <= maxLength &&
|
|
9
|
+
!value.includes('\0'));
|
|
10
|
+
};
|
|
11
|
+
const isCompositionOrFolder = (value) => {
|
|
12
|
+
if (typeof value !== 'object' || value === null) {
|
|
13
|
+
return false;
|
|
14
|
+
}
|
|
15
|
+
const item = value;
|
|
16
|
+
if (item.type === 'composition') {
|
|
17
|
+
return isSafeString(item.compositionId, 500);
|
|
18
|
+
}
|
|
19
|
+
return (item.type === 'folder' &&
|
|
20
|
+
isSafeString(item.folderName, 500) &&
|
|
21
|
+
(item.parentName === null || isSafeString(item.parentName, 2000)));
|
|
22
|
+
};
|
|
23
|
+
const isSafeSourceFile = (value) => {
|
|
24
|
+
return (value === null ||
|
|
25
|
+
(isSafeString(value, 2000) &&
|
|
26
|
+
!value.includes('\\') &&
|
|
27
|
+
!value.startsWith('/') &&
|
|
28
|
+
!value.split('/').includes('..')));
|
|
29
|
+
};
|
|
30
|
+
const makeCompositionSelectorDragData = ({ item, sourceFile, }) => {
|
|
31
|
+
const data = {
|
|
32
|
+
type: 'remotion-composition-selector',
|
|
33
|
+
version: 1,
|
|
34
|
+
item,
|
|
35
|
+
sourceFile,
|
|
36
|
+
};
|
|
37
|
+
return { mimeType: MIME_TYPE, payload: JSON.stringify(data), data };
|
|
38
|
+
};
|
|
39
|
+
exports.makeCompositionSelectorDragData = makeCompositionSelectorDragData;
|
|
40
|
+
const hasCompositionSelectorDragData = (mimeTypes) => {
|
|
41
|
+
return Array.from(mimeTypes).includes(MIME_TYPE);
|
|
42
|
+
};
|
|
43
|
+
exports.hasCompositionSelectorDragData = hasCompositionSelectorDragData;
|
|
44
|
+
const parseCompositionSelectorDragData = (dataTransfer) => {
|
|
45
|
+
if (!(0, exports.hasCompositionSelectorDragData)(dataTransfer.types)) {
|
|
46
|
+
return null;
|
|
47
|
+
}
|
|
48
|
+
try {
|
|
49
|
+
const parsed = JSON.parse(dataTransfer.getData(MIME_TYPE));
|
|
50
|
+
if (parsed.type !== 'remotion-composition-selector' ||
|
|
51
|
+
parsed.version !== 1 ||
|
|
52
|
+
!isCompositionOrFolder(parsed.item) ||
|
|
53
|
+
!isSafeSourceFile(parsed.sourceFile)) {
|
|
54
|
+
return null;
|
|
55
|
+
}
|
|
56
|
+
return {
|
|
57
|
+
type: 'remotion-composition-selector',
|
|
58
|
+
version: 1,
|
|
59
|
+
item: parsed.item,
|
|
60
|
+
sourceFile: parsed.sourceFile,
|
|
61
|
+
};
|
|
62
|
+
}
|
|
63
|
+
catch (_a) {
|
|
64
|
+
return null;
|
|
65
|
+
}
|
|
66
|
+
};
|
|
67
|
+
exports.parseCompositionSelectorDragData = parseCompositionSelectorDragData;
|
|
68
|
+
const compositionSelectorDragDataToSymbolicatedStack = (dragData) => {
|
|
69
|
+
if (dragData.sourceFile === null) {
|
|
70
|
+
return null;
|
|
71
|
+
}
|
|
72
|
+
return {
|
|
73
|
+
originalColumnNumber: null,
|
|
74
|
+
originalFileName: dragData.sourceFile,
|
|
75
|
+
originalFunctionName: null,
|
|
76
|
+
originalLineNumber: null,
|
|
77
|
+
originalScriptCode: null,
|
|
78
|
+
};
|
|
79
|
+
};
|
|
80
|
+
exports.compositionSelectorDragDataToSymbolicatedStack = compositionSelectorDragDataToSymbolicatedStack;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import { type ComponentDragData
|
|
1
|
+
import { type ComponentDragData } from '@remotion/studio-protocol';
|
|
2
|
+
import { type CompositionDragData } from './composition-drag-data';
|
|
2
3
|
export declare const isFileDragEvent: (event: DragEvent) => boolean;
|
|
3
4
|
export declare const isAssetDragEvent: (event: DragEvent) => boolean;
|
|
4
5
|
export declare const isComponentDragEvent: (event: DragEvent) => boolean;
|
|
@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.getSfxDragUrl = exports.getComponentDragData = exports.getCompositionDragData = exports.getAssetDragPath = exports.isSupportedDropEvent = exports.isRemoteAssetDragEvent = exports.isSfxDragEvent = exports.isElementDragEvent = exports.isCompositionDragEvent = exports.isComponentDragEvent = exports.isAssetDragEvent = exports.isFileDragEvent = void 0;
|
|
4
4
|
const studio_protocol_1 = require("@remotion/studio-protocol");
|
|
5
5
|
const remote_asset_drag_1 = require("../helpers/remote-asset-drag");
|
|
6
|
+
const composition_drag_data_1 = require("./composition-drag-data");
|
|
6
7
|
const isFileDragEvent = (event) => {
|
|
7
8
|
var _a;
|
|
8
9
|
var _b;
|
|
@@ -23,7 +24,9 @@ const isComponentDragEvent = (event) => {
|
|
|
23
24
|
};
|
|
24
25
|
exports.isComponentDragEvent = isComponentDragEvent;
|
|
25
26
|
const isCompositionDragEvent = (event) => {
|
|
26
|
-
|
|
27
|
+
var _a;
|
|
28
|
+
var _b;
|
|
29
|
+
return ((0, composition_drag_data_1.getCompositionDragPreviewMetadata)((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) !== null && _b !== void 0 ? _b : []) !== null);
|
|
27
30
|
};
|
|
28
31
|
exports.isCompositionDragEvent = isCompositionDragEvent;
|
|
29
32
|
const isElementDragEvent = (event) => {
|
|
@@ -62,10 +65,9 @@ const getAssetDragPath = (event) => {
|
|
|
62
65
|
};
|
|
63
66
|
exports.getAssetDragPath = getAssetDragPath;
|
|
64
67
|
const getCompositionDragData = (event) => {
|
|
65
|
-
|
|
66
|
-
?
|
|
68
|
+
return event.dataTransfer
|
|
69
|
+
? (0, composition_drag_data_1.parseCompositionDragData)(event.dataTransfer)
|
|
67
70
|
: null;
|
|
68
|
-
return (parsed === null || parsed === void 0 ? void 0 : parsed.type) === 'composition' ? parsed.data : null;
|
|
69
71
|
};
|
|
70
72
|
exports.getCompositionDragData = getCompositionDragData;
|
|
71
73
|
const getComponentDragData = (event) => {
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { type EffectDragData } from '@remotion/studio-protocol';
|
|
2
|
+
import { type EffectDefinition } from '@remotion/studio-shared';
|
|
2
3
|
import type { SequencePropsSubscriptionKey } from 'remotion';
|
|
3
4
|
export declare const hasEffectDragType: (dataTransfer: DataTransfer) => boolean;
|
|
4
5
|
export declare const hasExplicitEffectDragType: (dataTransfer: DataTransfer) => boolean;
|
|
@@ -11,11 +12,7 @@ export declare const addEffectFromDragData: ({ clientId, dragData, fileName, nod
|
|
|
11
12
|
}) => Promise<void>;
|
|
12
13
|
export declare const addEffectToSequence: ({ clientId, effect, fileName, nodePath, }: {
|
|
13
14
|
readonly clientId: string;
|
|
14
|
-
readonly effect:
|
|
15
|
-
name: string;
|
|
16
|
-
importPath: string;
|
|
17
|
-
config: Record<string, unknown>;
|
|
18
|
-
};
|
|
15
|
+
readonly effect: EffectDefinition;
|
|
19
16
|
readonly fileName: string;
|
|
20
17
|
readonly nodePath: SequencePropsSubscriptionKey;
|
|
21
18
|
}) => Promise<void>;
|
|
@@ -8,7 +8,7 @@ const element_install_request_1 = require("./element-install-request");
|
|
|
8
8
|
const import_assets_1 = require("./import-assets");
|
|
9
9
|
const handleDrop = async ({ chooseSvgImportMode, compositionFile, compositionId, destinationDimensions, dropPosition, event, fps, from, localFiles, preferCompositionStart, }) => {
|
|
10
10
|
var _a;
|
|
11
|
-
var _b;
|
|
11
|
+
var _b, _c, _d;
|
|
12
12
|
if (localFiles !== null || (0, drop_handler_data_1.isFileDragEvent)(event)) {
|
|
13
13
|
const files = localFiles !== null && localFiles !== void 0 ? localFiles : Array.from((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) !== null && _b !== void 0 ? _b : []);
|
|
14
14
|
if (files.length === 0) {
|
|
@@ -88,7 +88,11 @@ const handleDrop = async ({ chooseSvgImportMode, compositionFile, compositionId,
|
|
|
88
88
|
createdAt: Date.now(),
|
|
89
89
|
compositionFile,
|
|
90
90
|
compositionId,
|
|
91
|
-
element:
|
|
91
|
+
element: {
|
|
92
|
+
...element.element,
|
|
93
|
+
durationInFrames: (_c = element.element.durationInFrames) !== null && _c !== void 0 ? _c : null,
|
|
94
|
+
installationMode: (_d = element.element.installationMode) !== null && _d !== void 0 ? _d : null,
|
|
95
|
+
},
|
|
92
96
|
from: (0, import_assets_1.getFromForDrop)({
|
|
93
97
|
durationInFrames: element.element.durationInFrames,
|
|
94
98
|
from,
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { type
|
|
2
|
-
import { type ElementInstallExpectedFileState, type FileType, type InsertableCompositionElementPosition } from '@remotion/studio-shared';
|
|
1
|
+
import { type ElementInstallExpectedFileState, type FileType, type InsertableCompositionElementPosition, type InstallableElement } from '@remotion/studio-shared';
|
|
3
2
|
import type { Dimensions } from '../helpers/is-current-selected-still';
|
|
3
|
+
import type { CompositionDragData } from './composition-drag-data';
|
|
4
4
|
export type InsertElementDropPosition = {
|
|
5
5
|
readonly centerX: number;
|
|
6
6
|
readonly centerY: number;
|
|
@@ -71,14 +71,15 @@ export declare const getComponentDimensions: (component: {
|
|
|
71
71
|
dimensions?: import("@remotion/studio-protocol").ComponentDimensions | undefined;
|
|
72
72
|
importName: string;
|
|
73
73
|
importPath: string;
|
|
74
|
-
props: ComponentProp[];
|
|
74
|
+
props: import("@remotion/studio-protocol").ComponentProp[];
|
|
75
75
|
}) => Dimensions | null;
|
|
76
76
|
export declare const getDurationInFrames: ({ durationInSeconds, fps, }: {
|
|
77
77
|
durationInSeconds: number | null;
|
|
78
78
|
fps: number;
|
|
79
79
|
}) => number | null;
|
|
80
|
-
export declare const pickFilesToImport: ({ multiple, }?: {
|
|
80
|
+
export declare const pickFilesToImport: ({ multiple, accept, }?: {
|
|
81
81
|
readonly multiple?: boolean | undefined;
|
|
82
|
+
readonly accept: string | null;
|
|
82
83
|
}) => Promise<File[]>;
|
|
83
84
|
export declare const importAssets: ({ compositionFile, compositionId, destinationDimensions, dropPosition, files, fps, from, preferCompositionStart, svgImportMode, }: {
|
|
84
85
|
compositionFile: string;
|
|
@@ -139,7 +140,7 @@ export declare const insertComponent: ({ component, compositionFile, composition
|
|
|
139
140
|
dimensions?: import("@remotion/studio-protocol").ComponentDimensions | undefined;
|
|
140
141
|
importName: string;
|
|
141
142
|
importPath: string;
|
|
142
|
-
props: ComponentProp[];
|
|
143
|
+
props: import("@remotion/studio-protocol").ComponentProp[];
|
|
143
144
|
};
|
|
144
145
|
compositionFile: string;
|
|
145
146
|
compositionId: string;
|
|
@@ -158,15 +159,7 @@ export declare const insertComposition: ({ composition, compositionFile, composi
|
|
|
158
159
|
export declare const insertElement: ({ compositionFile, compositionId, element, expectedFileState, position, from, overwriteExisting, }: {
|
|
159
160
|
compositionFile: string;
|
|
160
161
|
compositionId: string;
|
|
161
|
-
element:
|
|
162
|
-
dependencies: import("@remotion/studio-protocol").ElementDependency[];
|
|
163
|
-
durationInFrames?: number | undefined;
|
|
164
|
-
installationMode?: import("@remotion/studio-protocol").ElementInstallationMode | undefined;
|
|
165
|
-
slug: string;
|
|
166
|
-
displayName: string;
|
|
167
|
-
sourceCode: string;
|
|
168
|
-
dimensions: import("@remotion/studio-protocol").ComponentDimensions | null;
|
|
169
|
-
};
|
|
162
|
+
element: InstallableElement;
|
|
170
163
|
expectedFileState: ElementInstallExpectedFileState;
|
|
171
164
|
position: InsertableCompositionElementPosition | null;
|
|
172
165
|
from: number | null;
|
|
@@ -425,11 +425,14 @@ const getAssetElementFromStaticAsset = async (assetPath) => {
|
|
|
425
425
|
}
|
|
426
426
|
return (0, exports.getAssetElementFromPath)(assetPath);
|
|
427
427
|
};
|
|
428
|
-
const pickFilesToImport = ({ multiple = true, } = {}) => {
|
|
428
|
+
const pickFilesToImport = ({ multiple = true, accept, } = { accept: null }) => {
|
|
429
429
|
return new Promise((resolve) => {
|
|
430
430
|
const input = document.createElement('input');
|
|
431
431
|
input.type = 'file';
|
|
432
432
|
input.multiple = multiple;
|
|
433
|
+
if (accept !== null) {
|
|
434
|
+
input.accept = accept;
|
|
435
|
+
}
|
|
433
436
|
input.style.display = 'none';
|
|
434
437
|
let didResolve = false;
|
|
435
438
|
const resolveOnce = (files) => {
|
|
@@ -480,6 +483,7 @@ const insertCompositionElement = async ({ compositionFile, compositionId, elemen
|
|
|
480
483
|
(0, inserted_element_selection_1.requestInsertedElementSelection)({
|
|
481
484
|
compositionId,
|
|
482
485
|
nodePath: result.insertedNodePath,
|
|
486
|
+
notification: null,
|
|
483
487
|
});
|
|
484
488
|
}
|
|
485
489
|
return true;
|
|
@@ -897,7 +901,13 @@ const insertElement = async ({ compositionFile, compositionId, element, expected
|
|
|
897
901
|
? response.reason
|
|
898
902
|
: `Element file changed: ${response.conflict.filePath}`;
|
|
899
903
|
(0, NotificationCenter_1.showNotification)(`Could not add Element: ${reason}`, 4000);
|
|
904
|
+
return;
|
|
900
905
|
}
|
|
906
|
+
(0, inserted_element_selection_1.requestInsertedElementSelection)({
|
|
907
|
+
compositionId,
|
|
908
|
+
nodePath: null,
|
|
909
|
+
notification: `Installed ${element.displayName}`,
|
|
910
|
+
});
|
|
901
911
|
}
|
|
902
912
|
catch (error) {
|
|
903
913
|
(0, NotificationCenter_1.showNotification)(`Could not add Element: ${error instanceof Error ? error.message : String(error)}`, 4000);
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.parseCaptionFile = void 0;
|
|
4
|
+
const isObject = (value) => {
|
|
5
|
+
return typeof value === 'object' && value !== null && !Array.isArray(value);
|
|
6
|
+
};
|
|
7
|
+
const isFiniteNumber = (value) => {
|
|
8
|
+
return typeof value === 'number' && Number.isFinite(value);
|
|
9
|
+
};
|
|
10
|
+
const parseCaptionFile = ({ fileName, contents, }) => {
|
|
11
|
+
if (!fileName.toLowerCase().endsWith('.json')) {
|
|
12
|
+
throw new Error('Unsupported caption file. Choose a .json file.');
|
|
13
|
+
}
|
|
14
|
+
let parsed;
|
|
15
|
+
try {
|
|
16
|
+
parsed = JSON.parse(contents);
|
|
17
|
+
}
|
|
18
|
+
catch (error) {
|
|
19
|
+
throw new Error(`Invalid JSON: ${error instanceof Error ? error.message : String(error)}`);
|
|
20
|
+
}
|
|
21
|
+
if (!Array.isArray(parsed)) {
|
|
22
|
+
throw new Error('Expected a Remotion Caption[] JSON array.');
|
|
23
|
+
}
|
|
24
|
+
let previousStart = null;
|
|
25
|
+
for (const [index, caption] of parsed.entries()) {
|
|
26
|
+
const path = `captions[${index}]`;
|
|
27
|
+
if (!isObject(caption)) {
|
|
28
|
+
throw new Error(`${path} must be an object.`);
|
|
29
|
+
}
|
|
30
|
+
if (typeof caption.text !== 'string') {
|
|
31
|
+
throw new Error(`${path}.text must be a string.`);
|
|
32
|
+
}
|
|
33
|
+
if (!isFiniteNumber(caption.startMs) || caption.startMs < 0) {
|
|
34
|
+
throw new Error(`${path}.startMs must be a finite, non-negative number.`);
|
|
35
|
+
}
|
|
36
|
+
if (!isFiniteNumber(caption.endMs) || caption.endMs < 0) {
|
|
37
|
+
throw new Error(`${path}.endMs must be a finite, non-negative number.`);
|
|
38
|
+
}
|
|
39
|
+
if (caption.endMs < caption.startMs) {
|
|
40
|
+
throw new Error(`${path}.endMs must not be earlier than startMs.`);
|
|
41
|
+
}
|
|
42
|
+
if (caption.timestampMs !== null && !isFiniteNumber(caption.timestampMs)) {
|
|
43
|
+
throw new Error(`${path}.timestampMs must be a finite number or null.`);
|
|
44
|
+
}
|
|
45
|
+
if (caption.confidence !== null && !isFiniteNumber(caption.confidence)) {
|
|
46
|
+
throw new Error(`${path}.confidence must be a finite number or null.`);
|
|
47
|
+
}
|
|
48
|
+
if (typeof caption.confidence === 'number' &&
|
|
49
|
+
(caption.confidence < 0 || caption.confidence > 1)) {
|
|
50
|
+
throw new Error(`${path}.confidence must be between 0 and 1.`);
|
|
51
|
+
}
|
|
52
|
+
if (caption.pageBreakAfter !== undefined &&
|
|
53
|
+
typeof caption.pageBreakAfter !== 'boolean') {
|
|
54
|
+
throw new Error(`${path}.pageBreakAfter must be a boolean when provided.`);
|
|
55
|
+
}
|
|
56
|
+
if (previousStart !== null && caption.startMs < previousStart) {
|
|
57
|
+
throw new Error(`${path}.startMs is out of timestamp order.`);
|
|
58
|
+
}
|
|
59
|
+
previousStart = caption.startMs;
|
|
60
|
+
}
|
|
61
|
+
return parsed;
|
|
62
|
+
};
|
|
63
|
+
exports.parseCaptionFile = parseCaptionFile;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import type { ErrorRecord } from './react-overlay/listen-to-runtime-errors';
|
|
2
|
+
type CurrentError = {
|
|
3
|
+
readonly error: Error;
|
|
4
|
+
readonly symbolication: Promise<ErrorRecord | null>;
|
|
5
|
+
};
|
|
6
|
+
declare global {
|
|
7
|
+
interface Window {
|
|
8
|
+
remotion_currentErrors: CurrentError[] | undefined;
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
export declare const registerCurrentError: (error: CurrentError) => () => void;
|
|
12
|
+
export declare const getCurrentError: () => CurrentError | null;
|
|
13
|
+
export {};
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.getCurrentError = exports.registerCurrentError = void 0;
|
|
4
|
+
const registerCurrentError = (error) => {
|
|
5
|
+
var _a;
|
|
6
|
+
window.remotion_currentErrors = [
|
|
7
|
+
...((_a = window.remotion_currentErrors) !== null && _a !== void 0 ? _a : []),
|
|
8
|
+
error,
|
|
9
|
+
];
|
|
10
|
+
return () => {
|
|
11
|
+
var _a;
|
|
12
|
+
window.remotion_currentErrors = (_a = window.remotion_currentErrors) === null || _a === void 0 ? void 0 : _a.filter((candidate) => candidate !== error);
|
|
13
|
+
};
|
|
14
|
+
};
|
|
15
|
+
exports.registerCurrentError = registerCurrentError;
|
|
16
|
+
const getCurrentError = () => {
|
|
17
|
+
var _a;
|
|
18
|
+
var _b;
|
|
19
|
+
return (_b = (_a = window.remotion_currentErrors) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : null;
|
|
20
|
+
};
|
|
21
|
+
exports.getCurrentError = getCurrentError;
|
|
@@ -4,6 +4,7 @@ exports.ErrorLoader = void 0;
|
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
5
|
const studio_shared_1 = require("@remotion/studio-shared");
|
|
6
6
|
const react_1 = require("react");
|
|
7
|
+
const current_error_1 = require("../current-error");
|
|
7
8
|
const error_origin_1 = require("../error-origin");
|
|
8
9
|
const listen_to_runtime_errors_1 = require("../react-overlay/listen-to-runtime-errors");
|
|
9
10
|
const ErrorDisplay_1 = require("./ErrorDisplay");
|
|
@@ -51,7 +52,9 @@ const ErrorLoader = ({ error, keyboardShortcuts, onRetry, canHaveDismissButton,
|
|
|
51
52
|
type: 'loading',
|
|
52
53
|
});
|
|
53
54
|
(0, react_1.useEffect)(() => {
|
|
54
|
-
(0, listen_to_runtime_errors_1.getErrorRecord)(error)
|
|
55
|
+
const symbolication = (0, listen_to_runtime_errors_1.getErrorRecord)(error);
|
|
56
|
+
const unregister = (0, current_error_1.registerCurrentError)({ error, symbolication });
|
|
57
|
+
symbolication
|
|
55
58
|
.then((record) => {
|
|
56
59
|
if (record) {
|
|
57
60
|
if (shouldLogError(error)) {
|
|
@@ -80,6 +83,7 @@ const ErrorLoader = ({ error, keyboardShortcuts, onRetry, canHaveDismissButton,
|
|
|
80
83
|
type: 'error',
|
|
81
84
|
});
|
|
82
85
|
});
|
|
86
|
+
return unregister;
|
|
83
87
|
}, [error]);
|
|
84
88
|
if (state.type === 'loading') {
|
|
85
89
|
return (jsx_runtime_1.jsx("div", { style: container, children: jsx_runtime_1.jsx(ErrorTitle_1.ErrorTitle, { symbolicating: true, name: error.name, message: error.message, canHaveDismissButton: canHaveDismissButton }) }));
|