@remotion/studio 4.0.472 → 4.0.474
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/rename-static-file.d.ts +6 -0
- package/dist/api/rename-static-file.js +18 -0
- package/dist/components/AssetSelector.js +45 -4
- package/dist/components/AssetSelectorItem.js +177 -27
- package/dist/components/Canvas.js +131 -11
- package/dist/components/ConfirmationDialog-types.d.ts +8 -0
- package/dist/components/ConfirmationDialog-types.js +2 -0
- package/dist/components/ConfirmationDialog.d.ts +7 -0
- package/dist/components/ConfirmationDialog.js +103 -0
- package/dist/components/ContextMenu.d.ts +9 -1
- package/dist/components/ContextMenu.js +49 -5
- package/dist/components/CurrentAsset.d.ts +1 -0
- package/dist/components/CurrentAsset.js +13 -2
- package/dist/components/EditorContent.js +15 -2
- package/dist/components/EditorContexts.js +2 -1
- package/dist/components/EditorRuler/Ruler.js +2 -0
- package/dist/components/ExplorerPanel.d.ts +0 -4
- package/dist/components/ExplorerPanel.js +8 -4
- package/dist/components/ExplorerPanelRef.d.ts +4 -0
- package/dist/components/ExplorerPanelRef.js +5 -0
- package/dist/components/FilePreview.d.ts +1 -1
- package/dist/components/InitialCompositionLoader.d.ts +0 -1
- package/dist/components/InitialCompositionLoader.js +5 -27
- package/dist/components/Menu/MenuItem.js +7 -1
- package/dist/components/Menu/SubMenu.js +5 -1
- package/dist/components/Menu/portals.js +17 -8
- package/dist/components/MenuToolbar.js +5 -1
- package/dist/components/ModalContainer.js +6 -1
- package/dist/components/Modals.js +5 -2
- package/dist/components/NewComposition/ComboBox.js +8 -2
- package/dist/components/NewComposition/InputDragger.d.ts +1 -0
- package/dist/components/NewComposition/InputDragger.js +9 -6
- package/dist/components/NewComposition/RenameStaticFile.d.ts +4 -0
- package/dist/components/NewComposition/RenameStaticFile.js +118 -0
- package/dist/components/OptionsPanel.js +5 -1
- package/dist/components/OutlineToggle.d.ts +2 -0
- package/dist/components/OutlineToggle.js +20 -0
- package/dist/components/Preview.d.ts +0 -2
- package/dist/components/Preview.js +23 -33
- package/dist/components/PreviewToolbar.js +19 -6
- package/dist/components/RenderButton.js +8 -2
- package/dist/components/RenderPreview.js +2 -2
- package/dist/components/SelectedOutlineOverlay.d.ts +29 -3
- package/dist/components/SelectedOutlineOverlay.js +259 -80
- package/dist/components/ShowOutlinesProvider.d.ts +4 -0
- package/dist/components/ShowOutlinesProvider.js +24 -0
- package/dist/components/SizeSelector.js +3 -3
- package/dist/components/Splitter/SplitterHandle.js +2 -0
- package/dist/components/StaticFilePreview.js +2 -2
- package/dist/components/Timeline/KeyframeSettingsModal.d.ts +15 -0
- package/dist/components/Timeline/KeyframeSettingsModal.js +150 -0
- package/dist/components/Timeline/SequencePropsObserver.js +3 -3
- package/dist/components/Timeline/Timeline.js +3 -13
- package/dist/components/Timeline/TimelineClipboardKeybindings.d.ts +26 -3
- package/dist/components/Timeline/TimelineClipboardKeybindings.js +242 -25
- package/dist/components/Timeline/TimelineDeleteKeybindings.js +23 -11
- package/dist/components/Timeline/TimelineEffectItem.js +8 -7
- package/dist/components/Timeline/TimelineEffectPropItem.js +69 -19
- package/dist/components/Timeline/TimelineExpandedKeyframeRow.js +6 -1
- package/dist/components/Timeline/TimelineExpandedSection.js +5 -5
- package/dist/components/Timeline/TimelineKeyframeControls.js +13 -23
- package/dist/components/Timeline/TimelineKeyframeDiamond.js +24 -22
- package/dist/components/Timeline/TimelineKeyframeDiamondIcon.d.ts +6 -0
- package/dist/components/Timeline/TimelineKeyframeDiamondIcon.js +14 -0
- package/dist/components/Timeline/TimelineKeyframeDragState.d.ts +17 -0
- package/dist/components/Timeline/TimelineKeyframeDragState.js +39 -0
- package/dist/components/Timeline/TimelineKeyframeEasingLine.d.ts +9 -0
- package/dist/components/Timeline/TimelineKeyframeEasingLine.js +120 -0
- package/dist/components/Timeline/TimelineKeyframedValue.js +1 -1
- package/dist/components/Timeline/TimelineList.js +2 -2
- package/dist/components/Timeline/TimelineMediaInfo.d.ts +0 -13
- package/dist/components/Timeline/TimelineMediaInfo.js +8 -73
- package/dist/components/Timeline/TimelineNumberField.js +15 -7
- package/dist/components/Timeline/TimelineRotationField.js +17 -11
- package/dist/components/Timeline/TimelineScaleField.js +17 -13
- package/dist/components/Timeline/TimelineSelection.d.ts +15 -0
- package/dist/components/Timeline/TimelineSelection.js +26 -1
- package/dist/components/Timeline/TimelineSequence.js +6 -6
- package/dist/components/Timeline/TimelineSequenceItem.d.ts +1 -0
- package/dist/components/Timeline/TimelineSequenceItem.js +297 -36
- package/dist/components/Timeline/TimelineSequencePropItem.js +113 -48
- package/dist/components/Timeline/TimelineSequenceRightEdgeDragHandle.d.ts +5 -5
- package/dist/components/Timeline/TimelineSequenceRightEdgeDragHandle.js +69 -70
- package/dist/components/Timeline/TimelineTranslateField.js +24 -19
- package/dist/components/Timeline/TimelineUvCoordinateField.js +18 -12
- package/dist/components/Timeline/apply-effect-response-to-prop-statuses.d.ts +5 -0
- package/dist/components/Timeline/apply-effect-response-to-prop-statuses.js +19 -0
- package/dist/components/Timeline/call-add-keyframe.d.ts +5 -5
- package/dist/components/Timeline/call-add-keyframe.js +6 -4
- package/dist/components/Timeline/call-delete-keyframe.d.ts +7 -7
- package/dist/components/Timeline/call-delete-keyframe.js +7 -7
- package/dist/components/Timeline/call-move-keyframe.d.ts +19 -0
- package/dist/components/Timeline/call-move-keyframe.js +71 -0
- package/dist/components/Timeline/call-update-keyframe-settings.d.ts +22 -0
- package/dist/components/Timeline/call-update-keyframe-settings.js +52 -0
- package/dist/components/Timeline/delete-selected-keyframe.d.ts +5 -5
- package/dist/components/Timeline/delete-selected-keyframe.js +5 -5
- package/dist/components/Timeline/delete-selected-timeline-item.d.ts +10 -7
- package/dist/components/Timeline/delete-selected-timeline-item.js +37 -23
- package/dist/components/Timeline/duplicate-selected-timeline-item.d.ts +4 -2
- package/dist/components/Timeline/duplicate-selected-timeline-item.js +39 -34
- package/dist/components/Timeline/get-bounded-keyframe-drag-delta.d.ts +8 -0
- package/dist/components/Timeline/get-bounded-keyframe-drag-delta.js +12 -0
- package/dist/components/Timeline/get-keyframe-navigation.d.ts +2 -2
- package/dist/components/Timeline/get-keyframe-navigation.js +14 -6
- package/dist/components/Timeline/get-node-keyframes.d.ts +3 -3
- package/dist/components/Timeline/get-node-keyframes.js +4 -4
- package/dist/components/Timeline/get-timeline-easing-segments.d.ts +9 -0
- package/dist/components/Timeline/get-timeline-easing-segments.js +19 -0
- package/dist/components/Timeline/reset-selected-timeline-props.d.ts +7 -7
- package/dist/components/Timeline/reset-selected-timeline-props.js +13 -12
- package/dist/components/Timeline/save-effect-prop.d.ts +16 -5
- package/dist/components/Timeline/save-effect-prop.js +37 -19
- package/dist/components/Timeline/save-prop-queue.d.ts +4 -3
- package/dist/components/Timeline/save-prop-queue.js +6 -3
- package/dist/components/Timeline/save-sequence-prop.d.ts +5 -10
- package/dist/components/Timeline/save-sequence-prop.js +35 -32
- package/dist/components/Timeline/should-clear-selection-on-pointer-down.d.ts +3 -0
- package/dist/components/Timeline/should-clear-selection-on-pointer-down.js +7 -0
- package/dist/components/Timeline/timeline-asset-link.d.ts +13 -0
- package/dist/components/Timeline/timeline-asset-link.js +37 -0
- package/dist/components/Timeline/timeline-field-utils.d.ts +10 -0
- package/dist/components/Timeline/timeline-field-utils.js +26 -5
- package/dist/components/Timeline/timeline-translate-utils.d.ts +1 -1
- package/dist/components/Timeline/timeline-translate-utils.js +6 -4
- package/dist/components/Timeline/use-expanded-track-keyframe-rows.js +7 -7
- package/dist/components/Timeline/use-sequence-props-subscription.js +3 -3
- package/dist/components/Timeline/use-timeline-height.js +3 -3
- package/dist/components/Timeline/use-timeline-keyframe-drag.d.ts +10 -0
- package/dist/components/Timeline/use-timeline-keyframe-drag.js +380 -0
- package/dist/components/import-assets.d.ts +31 -0
- package/dist/components/import-assets.js +216 -17
- package/dist/components/load-canvas-content-from-url.d.ts +1 -0
- package/dist/components/load-canvas-content-from-url.js +9 -3
- package/dist/components/use-select-asset.d.ts +1 -0
- package/dist/components/use-select-asset.js +30 -0
- package/dist/error-overlay/error-origin.d.ts +3 -0
- package/dist/error-overlay/error-origin.js +42 -0
- package/dist/error-overlay/react-overlay/listen-to-runtime-errors.js +6 -2
- package/dist/error-overlay/remotion-overlay/ErrorLoader.js +38 -0
- package/dist/error-overlay/remotion-overlay/ShortcutHint.js +1 -1
- package/dist/error-overlay/remotion-overlay/log-studio-error.d.ts +3 -0
- package/dist/error-overlay/remotion-overlay/log-studio-error.js +27 -0
- package/dist/esm/{chunk-48grt472.js → chunk-xjvc8qen.js} +21838 -18862
- package/dist/esm/internals.mjs +21838 -18862
- package/dist/esm/previewEntry.mjs +21127 -18127
- package/dist/esm/renderEntry.mjs +1 -1
- package/dist/helpers/get-asset-metadata.js +2 -2
- package/dist/helpers/get-preview-file-type.d.ts +2 -0
- package/dist/helpers/get-preview-file-type.js +33 -0
- package/dist/helpers/install-required-package.d.ts +1 -0
- package/dist/helpers/install-required-package.js +39 -0
- package/dist/helpers/remote-asset-drag.d.ts +4 -0
- package/dist/helpers/remote-asset-drag.js +73 -0
- package/dist/helpers/timeline-layout.d.ts +6 -6
- package/dist/helpers/timeline-layout.js +5 -5
- package/dist/helpers/use-asset-drag-events.d.ts +5 -2
- package/dist/helpers/use-asset-drag-events.js +13 -2
- package/dist/hot-middleware-client/client.js +6 -0
- package/dist/state/editor-outlines.d.ts +8 -0
- package/dist/state/editor-outlines.js +18 -0
- package/dist/state/modals.d.ts +16 -2
- package/package.json +10 -10
- package/dist/helpers/detect-file-type.d.ts +0 -69
- package/dist/helpers/detect-file-type.js +0 -278
package/dist/esm/renderEntry.mjs
CHANGED
|
@@ -209,7 +209,7 @@ var renderContent = (Root) => {
|
|
|
209
209
|
renderToDOM(/* @__PURE__ */ jsx("div", {
|
|
210
210
|
children: /* @__PURE__ */ jsx(DelayedSpinner, {})
|
|
211
211
|
}));
|
|
212
|
-
import("./chunk-
|
|
212
|
+
import("./chunk-xjvc8qen.js").then(({ StudioInternals }) => {
|
|
213
213
|
window.remotion_isStudio = true;
|
|
214
214
|
window.remotion_isReadOnlyStudio = true;
|
|
215
215
|
window.remotion_inputProps = "{}";
|
|
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.getAssetMetadata = exports.remotion_outputsBase = void 0;
|
|
4
4
|
const media_utils_1 = require("@remotion/media-utils");
|
|
5
5
|
const remotion_1 = require("remotion");
|
|
6
|
-
const
|
|
6
|
+
const get_preview_file_type_1 = require("./get-preview-file-type");
|
|
7
7
|
exports.remotion_outputsBase = window.remotion_staticBase.replace('static', 'outputs');
|
|
8
8
|
const getSrcFromCanvasContent = (canvasContent) => {
|
|
9
9
|
if (canvasContent.type === 'asset') {
|
|
@@ -40,7 +40,7 @@ const getAssetMetadata = async (canvasContent, addTime) => {
|
|
|
40
40
|
}
|
|
41
41
|
const fetchedAt = Date.now();
|
|
42
42
|
const srcWithTime = addTime ? `${src}?date=${fetchedAt}` : src;
|
|
43
|
-
const fileType = (0,
|
|
43
|
+
const fileType = (0, get_preview_file_type_1.getPreviewFileType)(src);
|
|
44
44
|
if (fileType === 'video') {
|
|
45
45
|
const resolution = await (0, media_utils_1.getVideoMetadata)(srcWithTime);
|
|
46
46
|
return {
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.getPreviewFileType = void 0;
|
|
4
|
+
const getPreviewFileType = (fileName) => {
|
|
5
|
+
var _a;
|
|
6
|
+
if (!fileName) {
|
|
7
|
+
return 'other';
|
|
8
|
+
}
|
|
9
|
+
const audioExtensions = ['mp3', 'wav', 'ogg', 'aac'];
|
|
10
|
+
const videoExtensions = ['mp4', 'avi', 'mkv', 'mov', 'webm'];
|
|
11
|
+
const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp'];
|
|
12
|
+
const fileExtension = (_a = fileName.split('.').pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase();
|
|
13
|
+
if (fileExtension === undefined) {
|
|
14
|
+
throw new Error('File extension is undefined');
|
|
15
|
+
}
|
|
16
|
+
if (audioExtensions.includes(fileExtension)) {
|
|
17
|
+
return 'audio';
|
|
18
|
+
}
|
|
19
|
+
if (videoExtensions.includes(fileExtension)) {
|
|
20
|
+
return 'video';
|
|
21
|
+
}
|
|
22
|
+
if (imageExtensions.includes(fileExtension)) {
|
|
23
|
+
return 'image';
|
|
24
|
+
}
|
|
25
|
+
if (fileExtension === 'json') {
|
|
26
|
+
return 'json';
|
|
27
|
+
}
|
|
28
|
+
if (fileExtension === 'txt') {
|
|
29
|
+
return 'txt';
|
|
30
|
+
}
|
|
31
|
+
return 'other';
|
|
32
|
+
};
|
|
33
|
+
exports.getPreviewFileType = getPreviewFileType;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const installRequiredPackages: (packageNames: string[]) => Promise<void>;
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.installRequiredPackages = void 0;
|
|
4
|
+
const install_package_1 = require("../api/install-package");
|
|
5
|
+
const NotificationCenter_1 = require("../components/Notifications/NotificationCenter");
|
|
6
|
+
let installQueue = Promise.resolve();
|
|
7
|
+
const getMissingPackages = (packageNames) => {
|
|
8
|
+
var _a;
|
|
9
|
+
const uniquePackageNames = Array.from(new Set(packageNames));
|
|
10
|
+
const installedPackages = (_a = window.remotion_installedPackages) !== null && _a !== void 0 ? _a : [];
|
|
11
|
+
return uniquePackageNames.filter((packageName) => !installedPackages.includes(packageName));
|
|
12
|
+
};
|
|
13
|
+
const addInstalledPackages = (packageNames) => {
|
|
14
|
+
var _a;
|
|
15
|
+
const installedPackages = (_a = window.remotion_installedPackages) !== null && _a !== void 0 ? _a : [];
|
|
16
|
+
window.remotion_installedPackages = Array.from(new Set([...installedPackages, ...packageNames]));
|
|
17
|
+
};
|
|
18
|
+
const formatPackageList = (packageNames) => {
|
|
19
|
+
if (packageNames.length === 1) {
|
|
20
|
+
return packageNames[0];
|
|
21
|
+
}
|
|
22
|
+
return `${packageNames.length} packages`;
|
|
23
|
+
};
|
|
24
|
+
const installRequiredPackages = async (packageNames) => {
|
|
25
|
+
const runInstall = async () => {
|
|
26
|
+
const missingPackages = getMissingPackages(packageNames);
|
|
27
|
+
if (missingPackages.length === 0) {
|
|
28
|
+
return;
|
|
29
|
+
}
|
|
30
|
+
(0, NotificationCenter_1.showNotification)(`Installing ${formatPackageList(missingPackages)}...`, 3000);
|
|
31
|
+
await (0, install_package_1.installPackages)(missingPackages);
|
|
32
|
+
addInstalledPackages(missingPackages);
|
|
33
|
+
(0, NotificationCenter_1.showNotification)(`Installed ${formatPackageList(missingPackages)}`, 3000);
|
|
34
|
+
};
|
|
35
|
+
const queuedInstall = installQueue.then(runInstall, runInstall);
|
|
36
|
+
installQueue = queuedInstall.catch(() => undefined);
|
|
37
|
+
await queuedInstall;
|
|
38
|
+
};
|
|
39
|
+
exports.installRequiredPackages = installRequiredPackages;
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
export declare const hasRemoteAssetDragData: (dataTransfer: DataTransfer | null) => boolean;
|
|
2
|
+
export declare const getRemoteAssetUrlFromUriList: (uriList: string) => string | null;
|
|
3
|
+
export declare const getRemoteAssetUrlFromHtml: (html: string) => string | null;
|
|
4
|
+
export declare const getRemoteAssetUrlFromDataTransfer: (dataTransfer: DataTransfer | null) => string | null;
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.getRemoteAssetUrlFromDataTransfer = exports.getRemoteAssetUrlFromHtml = exports.getRemoteAssetUrlFromUriList = exports.hasRemoteAssetDragData = void 0;
|
|
4
|
+
const remoteAssetDragTypes = ['text/uri-list', 'text/html', 'text/plain'];
|
|
5
|
+
const isHttpUrl = (value) => {
|
|
6
|
+
try {
|
|
7
|
+
const url = new URL(value);
|
|
8
|
+
return url.protocol === 'http:' || url.protocol === 'https:';
|
|
9
|
+
}
|
|
10
|
+
catch (_a) {
|
|
11
|
+
return false;
|
|
12
|
+
}
|
|
13
|
+
};
|
|
14
|
+
const decodeHtmlAttribute = (value) => {
|
|
15
|
+
return value
|
|
16
|
+
.replace(/&/g, '&')
|
|
17
|
+
.replace(/"/g, '"')
|
|
18
|
+
.replace(/'/g, "'")
|
|
19
|
+
.replace(/</g, '<')
|
|
20
|
+
.replace(/>/g, '>');
|
|
21
|
+
};
|
|
22
|
+
const hasRemoteAssetDragData = (dataTransfer) => {
|
|
23
|
+
return remoteAssetDragTypes.some((type) => {
|
|
24
|
+
var _a;
|
|
25
|
+
return Array.from((_a = dataTransfer === null || dataTransfer === void 0 ? void 0 : dataTransfer.types) !== null && _a !== void 0 ? _a : []).includes(type);
|
|
26
|
+
});
|
|
27
|
+
};
|
|
28
|
+
exports.hasRemoteAssetDragData = hasRemoteAssetDragData;
|
|
29
|
+
const getRemoteAssetUrlFromUriList = (uriList) => {
|
|
30
|
+
const lines = uriList.split(/\r?\n/g);
|
|
31
|
+
for (const line of lines) {
|
|
32
|
+
const trimmed = line.trim();
|
|
33
|
+
if (trimmed === '' || trimmed.startsWith('#')) {
|
|
34
|
+
continue;
|
|
35
|
+
}
|
|
36
|
+
if (isHttpUrl(trimmed)) {
|
|
37
|
+
return trimmed;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
return null;
|
|
41
|
+
};
|
|
42
|
+
exports.getRemoteAssetUrlFromUriList = getRemoteAssetUrlFromUriList;
|
|
43
|
+
const getRemoteAssetUrlFromHtml = (html) => {
|
|
44
|
+
var _a;
|
|
45
|
+
var _b, _c, _d, _e;
|
|
46
|
+
const imgSrc = html.match(/<img\b[^>]*\bsrc\s*=\s*(?:"([^"]+)"|'([^']+)'|([^\s>]+))/i);
|
|
47
|
+
const match = (_d = (_c = (_b = imgSrc === null || imgSrc === void 0 ? void 0 : imgSrc[1]) !== null && _b !== void 0 ? _b : imgSrc === null || imgSrc === void 0 ? void 0 : imgSrc[2]) !== null && _c !== void 0 ? _c : imgSrc === null || imgSrc === void 0 ? void 0 : imgSrc[3]) !== null && _d !== void 0 ? _d : null;
|
|
48
|
+
if (match) {
|
|
49
|
+
const decoded = decodeHtmlAttribute(match.trim());
|
|
50
|
+
if (isHttpUrl(decoded)) {
|
|
51
|
+
return decoded;
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
const fallback = (_e = (_a = html.match(/https?:\/\/[^\s"'<>]+/i)) === null || _a === void 0 ? void 0 : _a[0]) !== null && _e !== void 0 ? _e : null;
|
|
55
|
+
return fallback && isHttpUrl(fallback) ? decodeHtmlAttribute(fallback) : null;
|
|
56
|
+
};
|
|
57
|
+
exports.getRemoteAssetUrlFromHtml = getRemoteAssetUrlFromHtml;
|
|
58
|
+
const getRemoteAssetUrlFromDataTransfer = (dataTransfer) => {
|
|
59
|
+
if (!dataTransfer) {
|
|
60
|
+
return null;
|
|
61
|
+
}
|
|
62
|
+
const uriListUrl = (0, exports.getRemoteAssetUrlFromUriList)(dataTransfer.getData('text/uri-list'));
|
|
63
|
+
if (uriListUrl) {
|
|
64
|
+
return uriListUrl;
|
|
65
|
+
}
|
|
66
|
+
const htmlUrl = (0, exports.getRemoteAssetUrlFromHtml)(dataTransfer.getData('text/html'));
|
|
67
|
+
if (htmlUrl) {
|
|
68
|
+
return htmlUrl;
|
|
69
|
+
}
|
|
70
|
+
const plainText = dataTransfer.getData('text/plain').trim();
|
|
71
|
+
return isHttpUrl(plainText) ? plainText : null;
|
|
72
|
+
};
|
|
73
|
+
exports.getRemoteAssetUrlFromDataTransfer = getRemoteAssetUrlFromDataTransfer;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { type AnySchemaFieldInfo, type
|
|
1
|
+
import { type AnySchemaFieldInfo, type DragOverrides, type EffectSchemaFieldInfo, type PropStatuses, type SchemaFieldInfo, type SequenceControls, type SequenceSchemaFieldInfo } from '@remotion/studio-shared';
|
|
2
2
|
import type { GetDragOverrides, GetEffectDragOverrides, SequenceSchema as SequenceSchemaShape, TSequence } from 'remotion';
|
|
3
3
|
import type { GetIsExpanded } from '../components/ExpandedTracksProvider';
|
|
4
4
|
import type { SequenceNodePathInfo } from './get-timeline-sequence-sort-key';
|
|
5
5
|
export { getEffectFieldsToShow, getFieldsToShow, SCHEMA_FIELD_ROW_HEIGHT, } from '@remotion/studio-shared';
|
|
6
|
-
export type { AnySchemaFieldInfo,
|
|
6
|
+
export type { AnySchemaFieldInfo, DragOverrides, EffectSchemaFieldInfo, PropStatuses, SchemaFieldInfo, SequenceControls, SequenceSchemaFieldInfo, };
|
|
7
7
|
export declare const TIMELINE_PADDING = 16;
|
|
8
8
|
export declare const TIMELINE_BORDER = 1;
|
|
9
9
|
export declare const TIMELINE_ITEM_BORDER_BOTTOM = 1;
|
|
@@ -29,12 +29,12 @@ export type TimelineTreeNode = {
|
|
|
29
29
|
readonly label: string;
|
|
30
30
|
readonly field: AnySchemaFieldInfo | null;
|
|
31
31
|
};
|
|
32
|
-
export declare const buildTimelineTree: ({ sequence, nodePathInfo, getDragOverrides, getEffectDragOverrides,
|
|
32
|
+
export declare const buildTimelineTree: ({ sequence, nodePathInfo, getDragOverrides, getEffectDragOverrides, propStatuses, }: {
|
|
33
33
|
sequence: TSequence;
|
|
34
34
|
nodePathInfo: SequenceNodePathInfo;
|
|
35
35
|
getDragOverrides: GetDragOverrides;
|
|
36
36
|
getEffectDragOverrides: GetEffectDragOverrides;
|
|
37
|
-
|
|
37
|
+
propStatuses: PropStatuses;
|
|
38
38
|
}) => TimelineTreeNode[];
|
|
39
39
|
export type FlatTreeRow = {
|
|
40
40
|
readonly node: TimelineTreeNode;
|
|
@@ -46,11 +46,11 @@ export declare const flattenVisibleTreeNodes: ({ nodes, getIsExpanded, depth, }:
|
|
|
46
46
|
depth?: number | undefined;
|
|
47
47
|
}) => FlatTreeRow[];
|
|
48
48
|
export declare const getTreeRowHeight: (node: TimelineTreeNode) => number;
|
|
49
|
-
export declare const getExpandedTrackHeight: ({ sequence, nodePathInfo, getIsExpanded,
|
|
49
|
+
export declare const getExpandedTrackHeight: ({ sequence, nodePathInfo, getIsExpanded, propStatuses, }: {
|
|
50
50
|
sequence: TSequence;
|
|
51
51
|
nodePathInfo: SequenceNodePathInfo;
|
|
52
52
|
getIsExpanded: GetIsExpanded;
|
|
53
|
-
|
|
53
|
+
propStatuses: PropStatuses;
|
|
54
54
|
}) => number;
|
|
55
55
|
export declare const TIMELINE_LAYER_FILMSTRIP_HEIGHT = 26;
|
|
56
56
|
export declare const TIMELINE_VIDEO_INFO_WAVEFORM_HEIGHT = 17;
|
|
@@ -12,7 +12,7 @@ exports.TIMELINE_ITEM_BORDER_BOTTOM = 1;
|
|
|
12
12
|
exports.TIMELINE_TRACK_EXPANDED_HEIGHT = 100;
|
|
13
13
|
exports.TREE_GROUP_ROW_HEIGHT = 22;
|
|
14
14
|
exports.EXPANDED_SECTION_PADDING_RIGHT = 10;
|
|
15
|
-
const buildTimelineTree = ({ sequence, nodePathInfo, getDragOverrides, getEffectDragOverrides,
|
|
15
|
+
const buildTimelineTree = ({ sequence, nodePathInfo, getDragOverrides, getEffectDragOverrides, propStatuses, }) => {
|
|
16
16
|
var _a;
|
|
17
17
|
const roots = [];
|
|
18
18
|
const { sequenceSubscriptionKey, index, auxiliaryKeys, supportsEffects } = nodePathInfo;
|
|
@@ -20,7 +20,7 @@ const buildTimelineTree = ({ sequence, nodePathInfo, getDragOverrides, getEffect
|
|
|
20
20
|
schema: sequence.controls.schema,
|
|
21
21
|
currentRuntimeValueDotNotation: sequence.controls.currentRuntimeValueDotNotation,
|
|
22
22
|
getDragOverrides,
|
|
23
|
-
|
|
23
|
+
propStatuses,
|
|
24
24
|
nodePath: sequenceSubscriptionKey,
|
|
25
25
|
});
|
|
26
26
|
if (controlFields && controlFields.length > 0) {
|
|
@@ -57,7 +57,7 @@ const buildTimelineTree = ({ sequence, nodePathInfo, getDragOverrides, getEffect
|
|
|
57
57
|
effect,
|
|
58
58
|
effectIndex: i,
|
|
59
59
|
nodePath: sequenceSubscriptionKey,
|
|
60
|
-
|
|
60
|
+
propStatuses,
|
|
61
61
|
getEffectDragOverrides,
|
|
62
62
|
});
|
|
63
63
|
return {
|
|
@@ -124,14 +124,14 @@ const getTreeRowHeight = (node) => {
|
|
|
124
124
|
return exports.TREE_GROUP_ROW_HEIGHT;
|
|
125
125
|
};
|
|
126
126
|
exports.getTreeRowHeight = getTreeRowHeight;
|
|
127
|
-
const getExpandedTrackHeight = ({ sequence, nodePathInfo, getIsExpanded,
|
|
127
|
+
const getExpandedTrackHeight = ({ sequence, nodePathInfo, getIsExpanded, propStatuses, }) => {
|
|
128
128
|
const tree = (0, exports.buildTimelineTree)({
|
|
129
129
|
sequence,
|
|
130
130
|
nodePathInfo,
|
|
131
131
|
// We assume that no drag overrides can change the timeline layout
|
|
132
132
|
getDragOverrides: () => ({}),
|
|
133
133
|
getEffectDragOverrides: () => ({}),
|
|
134
|
-
|
|
134
|
+
propStatuses,
|
|
135
135
|
});
|
|
136
136
|
const flat = (0, exports.flattenVisibleTreeNodes)({ nodes: tree, getIsExpanded });
|
|
137
137
|
if (flat.length === 0) {
|
|
@@ -1,3 +1,6 @@
|
|
|
1
|
+
export declare const isFileDragEvent: (event: {
|
|
2
|
+
readonly dataTransfer: DataTransfer;
|
|
3
|
+
}) => boolean;
|
|
1
4
|
declare function useAssetDragEvents({ name, parentFolder, dropLocation, setDropLocation }: {
|
|
2
5
|
name: string | null;
|
|
3
6
|
parentFolder: string | null;
|
|
@@ -5,7 +8,7 @@ declare function useAssetDragEvents({ name, parentFolder, dropLocation, setDropL
|
|
|
5
8
|
setDropLocation: React.Dispatch<React.SetStateAction<string | null>>;
|
|
6
9
|
}): {
|
|
7
10
|
isDropDiv: boolean;
|
|
8
|
-
onDragEnter: ()
|
|
9
|
-
onDragLeave: ()
|
|
11
|
+
onDragEnter: import("react").DragEventHandler<Element>;
|
|
12
|
+
onDragLeave: import("react").DragEventHandler<Element>;
|
|
10
13
|
};
|
|
11
14
|
export default useAssetDragEvents;
|
|
@@ -1,7 +1,12 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.isFileDragEvent = void 0;
|
|
3
4
|
const react_1 = require("react");
|
|
4
5
|
const no_react_1 = require("remotion/no-react");
|
|
6
|
+
const isFileDragEvent = (event) => {
|
|
7
|
+
return Array.from(event.dataTransfer.types).includes('Files');
|
|
8
|
+
};
|
|
9
|
+
exports.isFileDragEvent = isFileDragEvent;
|
|
5
10
|
function useAssetDragEvents({ name, parentFolder, dropLocation, setDropLocation, }) {
|
|
6
11
|
const dragDepthRef = (0, react_1.useRef)(0);
|
|
7
12
|
const combinedParents = (0, react_1.useMemo)(() => {
|
|
@@ -10,7 +15,10 @@ function useAssetDragEvents({ name, parentFolder, dropLocation, setDropLocation,
|
|
|
10
15
|
const isDropDiv = (0, react_1.useMemo)(() => {
|
|
11
16
|
return dropLocation === combinedParents;
|
|
12
17
|
}, [combinedParents, dropLocation]);
|
|
13
|
-
const onDragEnter = (0, react_1.useCallback)(() => {
|
|
18
|
+
const onDragEnter = (0, react_1.useCallback)((event) => {
|
|
19
|
+
if (!(0, exports.isFileDragEvent)(event)) {
|
|
20
|
+
return;
|
|
21
|
+
}
|
|
14
22
|
if (dragDepthRef.current === 0) {
|
|
15
23
|
setDropLocation((currentDropLocation) => (currentDropLocation === null || currentDropLocation === void 0 ? void 0 : currentDropLocation.includes(combinedParents))
|
|
16
24
|
? currentDropLocation
|
|
@@ -18,7 +26,10 @@ function useAssetDragEvents({ name, parentFolder, dropLocation, setDropLocation,
|
|
|
18
26
|
}
|
|
19
27
|
dragDepthRef.current++;
|
|
20
28
|
}, [combinedParents, dragDepthRef, setDropLocation]);
|
|
21
|
-
const onDragLeave = (0, react_1.useCallback)(() => {
|
|
29
|
+
const onDragLeave = (0, react_1.useCallback)((event) => {
|
|
30
|
+
if (!(0, exports.isFileDragEvent)(event)) {
|
|
31
|
+
return;
|
|
32
|
+
}
|
|
22
33
|
dragDepthRef.current--;
|
|
23
34
|
if (dragDepthRef.current === 0) {
|
|
24
35
|
setDropLocation((currentPath) => currentPath === combinedParents ? parentFolder : currentPath);
|
|
@@ -4,6 +4,7 @@
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
5
5
|
exports.enableHotMiddleware = void 0;
|
|
6
6
|
const studio_shared_1 = require("@remotion/studio-shared");
|
|
7
|
+
const error_origin_1 = require("../error-overlay/error-origin");
|
|
7
8
|
const preview_server_events_1 = require("../helpers/preview-server-events");
|
|
8
9
|
const process_update_1 = require("./process-update");
|
|
9
10
|
function createReporter() {
|
|
@@ -63,6 +64,11 @@ function processMessage(obj) {
|
|
|
63
64
|
case 'built': {
|
|
64
65
|
let applyUpdate = true;
|
|
65
66
|
if (obj.errors.length > 0) {
|
|
67
|
+
obj.errors.forEach((error) => {
|
|
68
|
+
if (typeof error === 'string') {
|
|
69
|
+
(0, error_origin_1.markErrorMessageAsLoggedByServer)((0, studio_shared_1.stripAnsi)(error));
|
|
70
|
+
}
|
|
71
|
+
});
|
|
66
72
|
if (reporter)
|
|
67
73
|
reporter.problems('errors', obj);
|
|
68
74
|
applyUpdate = false;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
type State = {
|
|
2
|
+
editorShowOutlines: boolean;
|
|
3
|
+
setEditorShowOutlines: (cb: (prevState: boolean) => boolean) => void;
|
|
4
|
+
};
|
|
5
|
+
export declare const persistEditorShowOutlinesOption: (option: boolean) => void;
|
|
6
|
+
export declare const loadEditorShowOutlinesOption: () => boolean;
|
|
7
|
+
export declare const EditorShowOutlinesContext: import("react").Context<State>;
|
|
8
|
+
export {};
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.EditorShowOutlinesContext = exports.loadEditorShowOutlinesOption = exports.persistEditorShowOutlinesOption = void 0;
|
|
4
|
+
const react_1 = require("react");
|
|
5
|
+
const key = 'remotion.editorShowOutlines';
|
|
6
|
+
const persistEditorShowOutlinesOption = (option) => {
|
|
7
|
+
localStorage.setItem(key, String(option));
|
|
8
|
+
};
|
|
9
|
+
exports.persistEditorShowOutlinesOption = persistEditorShowOutlinesOption;
|
|
10
|
+
const loadEditorShowOutlinesOption = () => {
|
|
11
|
+
const item = localStorage.getItem(key);
|
|
12
|
+
return item !== 'false';
|
|
13
|
+
};
|
|
14
|
+
exports.loadEditorShowOutlinesOption = loadEditorShowOutlinesOption;
|
|
15
|
+
exports.EditorShowOutlinesContext = (0, react_1.createContext)({
|
|
16
|
+
editorShowOutlines: true,
|
|
17
|
+
setEditorShowOutlines: () => undefined,
|
|
18
|
+
});
|
package/dist/state/modals.d.ts
CHANGED
|
@@ -7,6 +7,7 @@ import type { _InternalTypes } from 'remotion';
|
|
|
7
7
|
import type { CompType } from '../components/NewComposition/DuplicateComposition';
|
|
8
8
|
import type { QuickSwitcherMode } from '../components/QuickSwitcher/NoResults';
|
|
9
9
|
import type { RenderType } from '../components/RenderModal/RenderModalAdvanced';
|
|
10
|
+
import type { KeyframeSettingsModalState } from '../components/Timeline/KeyframeSettingsModal';
|
|
10
11
|
import type { Bug, UpdateInfo } from '../components/UpdateCheck';
|
|
11
12
|
export type WebRenderModalState = {
|
|
12
13
|
type: 'web-render';
|
|
@@ -86,6 +87,16 @@ export type RenderModalState = {
|
|
|
86
87
|
defaulMetadata: Record<string, string> | null;
|
|
87
88
|
renderDefaults: RenderDefaults;
|
|
88
89
|
};
|
|
90
|
+
export type ConfirmationDialogState = {
|
|
91
|
+
type: 'confirmation-dialog';
|
|
92
|
+
id: string;
|
|
93
|
+
title: string;
|
|
94
|
+
message: React.ReactNode;
|
|
95
|
+
confirmLabel: string;
|
|
96
|
+
cancelLabel: string;
|
|
97
|
+
onConfirm: () => void;
|
|
98
|
+
onCancel: () => void;
|
|
99
|
+
};
|
|
89
100
|
export type ModalState = {
|
|
90
101
|
type: 'duplicate-comp';
|
|
91
102
|
compositionId: string;
|
|
@@ -106,9 +117,12 @@ export type ModalState = {
|
|
|
106
117
|
folderName: string;
|
|
107
118
|
parentName: string | null;
|
|
108
119
|
stack: string | null;
|
|
120
|
+
} | {
|
|
121
|
+
type: 'rename-static-file';
|
|
122
|
+
relativePath: string;
|
|
109
123
|
} | {
|
|
110
124
|
type: 'input-props-override';
|
|
111
|
-
} | RenderModalState | WebRenderModalState | {
|
|
125
|
+
} | KeyframeSettingsModalState | RenderModalState | WebRenderModalState | {
|
|
112
126
|
type: 'render-progress';
|
|
113
127
|
jobId: string;
|
|
114
128
|
} | {
|
|
@@ -122,7 +136,7 @@ export type ModalState = {
|
|
|
122
136
|
type: 'quick-switcher';
|
|
123
137
|
mode: QuickSwitcherMode;
|
|
124
138
|
invocationTimestamp: number;
|
|
125
|
-
};
|
|
139
|
+
} | ConfirmationDialogState;
|
|
126
140
|
export type ModalContextType = {
|
|
127
141
|
selectedModal: ModalState | null;
|
|
128
142
|
setSelectedModal: React.Dispatch<React.SetStateAction<ModalState | null>>;
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio"
|
|
4
4
|
},
|
|
5
5
|
"name": "@remotion/studio",
|
|
6
|
-
"version": "4.0.
|
|
6
|
+
"version": "4.0.474",
|
|
7
7
|
"description": "APIs for interacting with the Remotion Studio",
|
|
8
8
|
"main": "dist",
|
|
9
9
|
"scripts": {
|
|
@@ -25,14 +25,14 @@
|
|
|
25
25
|
},
|
|
26
26
|
"dependencies": {
|
|
27
27
|
"semver": "7.5.3",
|
|
28
|
-
"remotion": "4.0.
|
|
29
|
-
"@remotion/player": "4.0.
|
|
30
|
-
"@remotion/media-utils": "4.0.
|
|
31
|
-
"@remotion/renderer": "4.0.
|
|
32
|
-
"@remotion/web-renderer": "4.0.
|
|
33
|
-
"@remotion/studio-shared": "4.0.
|
|
34
|
-
"@remotion/timeline-utils": "4.0.
|
|
35
|
-
"@remotion/zod-types": "4.0.
|
|
28
|
+
"remotion": "4.0.474",
|
|
29
|
+
"@remotion/player": "4.0.474",
|
|
30
|
+
"@remotion/media-utils": "4.0.474",
|
|
31
|
+
"@remotion/renderer": "4.0.474",
|
|
32
|
+
"@remotion/web-renderer": "4.0.474",
|
|
33
|
+
"@remotion/studio-shared": "4.0.474",
|
|
34
|
+
"@remotion/timeline-utils": "4.0.474",
|
|
35
|
+
"@remotion/zod-types": "4.0.474",
|
|
36
36
|
"@jridgewell/trace-mapping": "0.3.31",
|
|
37
37
|
"mediabunny": "1.45.0",
|
|
38
38
|
"memfs": "3.4.3",
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
"react": "19.2.3",
|
|
44
44
|
"react-dom": "19.2.3",
|
|
45
45
|
"@types/semver": "7.5.3",
|
|
46
|
-
"@remotion/eslint-config-internal": "4.0.
|
|
46
|
+
"@remotion/eslint-config-internal": "4.0.474",
|
|
47
47
|
"eslint": "9.19.0",
|
|
48
48
|
"@typescript/native-preview": "7.0.0-dev.20260217.1"
|
|
49
49
|
},
|
|
@@ -1,69 +0,0 @@
|
|
|
1
|
-
export type FileDimensions = {
|
|
2
|
-
readonly width: number;
|
|
3
|
-
readonly height: number;
|
|
4
|
-
};
|
|
5
|
-
export declare const matchesPattern: (pattern: Uint8Array<ArrayBufferLike>) => (data: Uint8Array<ArrayBufferLike>) => boolean;
|
|
6
|
-
export declare const isRiffAvi: (data: Uint8Array<ArrayBufferLike>) => boolean;
|
|
7
|
-
export declare const isRiffWave: (data: Uint8Array<ArrayBufferLike>) => boolean;
|
|
8
|
-
export declare const isWebm: (data: Uint8Array<ArrayBufferLike>) => boolean;
|
|
9
|
-
export declare const isIsoBaseMedia: (data: Uint8Array<ArrayBufferLike>) => boolean;
|
|
10
|
-
export declare const isTransportStream: (data: Uint8Array<ArrayBufferLike>) => boolean;
|
|
11
|
-
export declare const isMp3: (data: Uint8Array<ArrayBufferLike>) => boolean;
|
|
12
|
-
export declare const isAac: (data: Uint8Array<ArrayBufferLike>) => boolean;
|
|
13
|
-
export declare const isFlac: (data: Uint8Array<ArrayBufferLike>) => boolean;
|
|
14
|
-
export declare const isM3u: (data: Uint8Array<ArrayBufferLike>) => boolean;
|
|
15
|
-
export type RiffType = {
|
|
16
|
-
type: 'riff';
|
|
17
|
-
};
|
|
18
|
-
export type WebmType = {
|
|
19
|
-
type: 'webm';
|
|
20
|
-
};
|
|
21
|
-
export type IsoBaseMediaType = {
|
|
22
|
-
type: 'iso-base-media';
|
|
23
|
-
};
|
|
24
|
-
export type TransportStreamType = {
|
|
25
|
-
type: 'transport-stream';
|
|
26
|
-
};
|
|
27
|
-
export type Mp3Type = {
|
|
28
|
-
type: 'mp3';
|
|
29
|
-
};
|
|
30
|
-
export type AacType = {
|
|
31
|
-
type: 'aac';
|
|
32
|
-
};
|
|
33
|
-
export type WavType = {
|
|
34
|
-
type: 'wav';
|
|
35
|
-
};
|
|
36
|
-
export type GifType = {
|
|
37
|
-
type: 'gif';
|
|
38
|
-
dimensions: FileDimensions;
|
|
39
|
-
};
|
|
40
|
-
export type FlacType = {
|
|
41
|
-
type: 'flac';
|
|
42
|
-
};
|
|
43
|
-
export type M3uType = {
|
|
44
|
-
type: 'm3u';
|
|
45
|
-
};
|
|
46
|
-
export type PngType = {
|
|
47
|
-
type: 'png';
|
|
48
|
-
dimensions: FileDimensions | null;
|
|
49
|
-
};
|
|
50
|
-
export type JpegType = {
|
|
51
|
-
type: 'jpeg';
|
|
52
|
-
dimensions: FileDimensions | null;
|
|
53
|
-
};
|
|
54
|
-
export type WebpType = {
|
|
55
|
-
type: 'webp';
|
|
56
|
-
dimensions: FileDimensions | null;
|
|
57
|
-
};
|
|
58
|
-
export type BmpType = {
|
|
59
|
-
type: 'bmp';
|
|
60
|
-
dimensions: FileDimensions | null;
|
|
61
|
-
};
|
|
62
|
-
export type PdfType = {
|
|
63
|
-
type: 'pdf';
|
|
64
|
-
};
|
|
65
|
-
export type UnknownType = {
|
|
66
|
-
type: 'unknown';
|
|
67
|
-
};
|
|
68
|
-
export type FileType = JpegType | WebpType | RiffType | WebmType | WavType | PdfType | AacType | IsoBaseMediaType | TransportStreamType | Mp3Type | GifType | PngType | BmpType | AacType | FlacType | M3uType | UnknownType;
|
|
69
|
-
export declare const detectFileType: (data: Uint8Array<ArrayBufferLike>) => FileType;
|