@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.
Files changed (165) hide show
  1. package/dist/api/rename-static-file.d.ts +6 -0
  2. package/dist/api/rename-static-file.js +18 -0
  3. package/dist/components/AssetSelector.js +45 -4
  4. package/dist/components/AssetSelectorItem.js +177 -27
  5. package/dist/components/Canvas.js +131 -11
  6. package/dist/components/ConfirmationDialog-types.d.ts +8 -0
  7. package/dist/components/ConfirmationDialog-types.js +2 -0
  8. package/dist/components/ConfirmationDialog.d.ts +7 -0
  9. package/dist/components/ConfirmationDialog.js +103 -0
  10. package/dist/components/ContextMenu.d.ts +9 -1
  11. package/dist/components/ContextMenu.js +49 -5
  12. package/dist/components/CurrentAsset.d.ts +1 -0
  13. package/dist/components/CurrentAsset.js +13 -2
  14. package/dist/components/EditorContent.js +15 -2
  15. package/dist/components/EditorContexts.js +2 -1
  16. package/dist/components/EditorRuler/Ruler.js +2 -0
  17. package/dist/components/ExplorerPanel.d.ts +0 -4
  18. package/dist/components/ExplorerPanel.js +8 -4
  19. package/dist/components/ExplorerPanelRef.d.ts +4 -0
  20. package/dist/components/ExplorerPanelRef.js +5 -0
  21. package/dist/components/FilePreview.d.ts +1 -1
  22. package/dist/components/InitialCompositionLoader.d.ts +0 -1
  23. package/dist/components/InitialCompositionLoader.js +5 -27
  24. package/dist/components/Menu/MenuItem.js +7 -1
  25. package/dist/components/Menu/SubMenu.js +5 -1
  26. package/dist/components/Menu/portals.js +17 -8
  27. package/dist/components/MenuToolbar.js +5 -1
  28. package/dist/components/ModalContainer.js +6 -1
  29. package/dist/components/Modals.js +5 -2
  30. package/dist/components/NewComposition/ComboBox.js +8 -2
  31. package/dist/components/NewComposition/InputDragger.d.ts +1 -0
  32. package/dist/components/NewComposition/InputDragger.js +9 -6
  33. package/dist/components/NewComposition/RenameStaticFile.d.ts +4 -0
  34. package/dist/components/NewComposition/RenameStaticFile.js +118 -0
  35. package/dist/components/OptionsPanel.js +5 -1
  36. package/dist/components/OutlineToggle.d.ts +2 -0
  37. package/dist/components/OutlineToggle.js +20 -0
  38. package/dist/components/Preview.d.ts +0 -2
  39. package/dist/components/Preview.js +23 -33
  40. package/dist/components/PreviewToolbar.js +19 -6
  41. package/dist/components/RenderButton.js +8 -2
  42. package/dist/components/RenderPreview.js +2 -2
  43. package/dist/components/SelectedOutlineOverlay.d.ts +29 -3
  44. package/dist/components/SelectedOutlineOverlay.js +259 -80
  45. package/dist/components/ShowOutlinesProvider.d.ts +4 -0
  46. package/dist/components/ShowOutlinesProvider.js +24 -0
  47. package/dist/components/SizeSelector.js +3 -3
  48. package/dist/components/Splitter/SplitterHandle.js +2 -0
  49. package/dist/components/StaticFilePreview.js +2 -2
  50. package/dist/components/Timeline/KeyframeSettingsModal.d.ts +15 -0
  51. package/dist/components/Timeline/KeyframeSettingsModal.js +150 -0
  52. package/dist/components/Timeline/SequencePropsObserver.js +3 -3
  53. package/dist/components/Timeline/Timeline.js +3 -13
  54. package/dist/components/Timeline/TimelineClipboardKeybindings.d.ts +26 -3
  55. package/dist/components/Timeline/TimelineClipboardKeybindings.js +242 -25
  56. package/dist/components/Timeline/TimelineDeleteKeybindings.js +23 -11
  57. package/dist/components/Timeline/TimelineEffectItem.js +8 -7
  58. package/dist/components/Timeline/TimelineEffectPropItem.js +69 -19
  59. package/dist/components/Timeline/TimelineExpandedKeyframeRow.js +6 -1
  60. package/dist/components/Timeline/TimelineExpandedSection.js +5 -5
  61. package/dist/components/Timeline/TimelineKeyframeControls.js +13 -23
  62. package/dist/components/Timeline/TimelineKeyframeDiamond.js +24 -22
  63. package/dist/components/Timeline/TimelineKeyframeDiamondIcon.d.ts +6 -0
  64. package/dist/components/Timeline/TimelineKeyframeDiamondIcon.js +14 -0
  65. package/dist/components/Timeline/TimelineKeyframeDragState.d.ts +17 -0
  66. package/dist/components/Timeline/TimelineKeyframeDragState.js +39 -0
  67. package/dist/components/Timeline/TimelineKeyframeEasingLine.d.ts +9 -0
  68. package/dist/components/Timeline/TimelineKeyframeEasingLine.js +120 -0
  69. package/dist/components/Timeline/TimelineKeyframedValue.js +1 -1
  70. package/dist/components/Timeline/TimelineList.js +2 -2
  71. package/dist/components/Timeline/TimelineMediaInfo.d.ts +0 -13
  72. package/dist/components/Timeline/TimelineMediaInfo.js +8 -73
  73. package/dist/components/Timeline/TimelineNumberField.js +15 -7
  74. package/dist/components/Timeline/TimelineRotationField.js +17 -11
  75. package/dist/components/Timeline/TimelineScaleField.js +17 -13
  76. package/dist/components/Timeline/TimelineSelection.d.ts +15 -0
  77. package/dist/components/Timeline/TimelineSelection.js +26 -1
  78. package/dist/components/Timeline/TimelineSequence.js +6 -6
  79. package/dist/components/Timeline/TimelineSequenceItem.d.ts +1 -0
  80. package/dist/components/Timeline/TimelineSequenceItem.js +297 -36
  81. package/dist/components/Timeline/TimelineSequencePropItem.js +113 -48
  82. package/dist/components/Timeline/TimelineSequenceRightEdgeDragHandle.d.ts +5 -5
  83. package/dist/components/Timeline/TimelineSequenceRightEdgeDragHandle.js +69 -70
  84. package/dist/components/Timeline/TimelineTranslateField.js +24 -19
  85. package/dist/components/Timeline/TimelineUvCoordinateField.js +18 -12
  86. package/dist/components/Timeline/apply-effect-response-to-prop-statuses.d.ts +5 -0
  87. package/dist/components/Timeline/apply-effect-response-to-prop-statuses.js +19 -0
  88. package/dist/components/Timeline/call-add-keyframe.d.ts +5 -5
  89. package/dist/components/Timeline/call-add-keyframe.js +6 -4
  90. package/dist/components/Timeline/call-delete-keyframe.d.ts +7 -7
  91. package/dist/components/Timeline/call-delete-keyframe.js +7 -7
  92. package/dist/components/Timeline/call-move-keyframe.d.ts +19 -0
  93. package/dist/components/Timeline/call-move-keyframe.js +71 -0
  94. package/dist/components/Timeline/call-update-keyframe-settings.d.ts +22 -0
  95. package/dist/components/Timeline/call-update-keyframe-settings.js +52 -0
  96. package/dist/components/Timeline/delete-selected-keyframe.d.ts +5 -5
  97. package/dist/components/Timeline/delete-selected-keyframe.js +5 -5
  98. package/dist/components/Timeline/delete-selected-timeline-item.d.ts +10 -7
  99. package/dist/components/Timeline/delete-selected-timeline-item.js +37 -23
  100. package/dist/components/Timeline/duplicate-selected-timeline-item.d.ts +4 -2
  101. package/dist/components/Timeline/duplicate-selected-timeline-item.js +39 -34
  102. package/dist/components/Timeline/get-bounded-keyframe-drag-delta.d.ts +8 -0
  103. package/dist/components/Timeline/get-bounded-keyframe-drag-delta.js +12 -0
  104. package/dist/components/Timeline/get-keyframe-navigation.d.ts +2 -2
  105. package/dist/components/Timeline/get-keyframe-navigation.js +14 -6
  106. package/dist/components/Timeline/get-node-keyframes.d.ts +3 -3
  107. package/dist/components/Timeline/get-node-keyframes.js +4 -4
  108. package/dist/components/Timeline/get-timeline-easing-segments.d.ts +9 -0
  109. package/dist/components/Timeline/get-timeline-easing-segments.js +19 -0
  110. package/dist/components/Timeline/reset-selected-timeline-props.d.ts +7 -7
  111. package/dist/components/Timeline/reset-selected-timeline-props.js +13 -12
  112. package/dist/components/Timeline/save-effect-prop.d.ts +16 -5
  113. package/dist/components/Timeline/save-effect-prop.js +37 -19
  114. package/dist/components/Timeline/save-prop-queue.d.ts +4 -3
  115. package/dist/components/Timeline/save-prop-queue.js +6 -3
  116. package/dist/components/Timeline/save-sequence-prop.d.ts +5 -10
  117. package/dist/components/Timeline/save-sequence-prop.js +35 -32
  118. package/dist/components/Timeline/should-clear-selection-on-pointer-down.d.ts +3 -0
  119. package/dist/components/Timeline/should-clear-selection-on-pointer-down.js +7 -0
  120. package/dist/components/Timeline/timeline-asset-link.d.ts +13 -0
  121. package/dist/components/Timeline/timeline-asset-link.js +37 -0
  122. package/dist/components/Timeline/timeline-field-utils.d.ts +10 -0
  123. package/dist/components/Timeline/timeline-field-utils.js +26 -5
  124. package/dist/components/Timeline/timeline-translate-utils.d.ts +1 -1
  125. package/dist/components/Timeline/timeline-translate-utils.js +6 -4
  126. package/dist/components/Timeline/use-expanded-track-keyframe-rows.js +7 -7
  127. package/dist/components/Timeline/use-sequence-props-subscription.js +3 -3
  128. package/dist/components/Timeline/use-timeline-height.js +3 -3
  129. package/dist/components/Timeline/use-timeline-keyframe-drag.d.ts +10 -0
  130. package/dist/components/Timeline/use-timeline-keyframe-drag.js +380 -0
  131. package/dist/components/import-assets.d.ts +31 -0
  132. package/dist/components/import-assets.js +216 -17
  133. package/dist/components/load-canvas-content-from-url.d.ts +1 -0
  134. package/dist/components/load-canvas-content-from-url.js +9 -3
  135. package/dist/components/use-select-asset.d.ts +1 -0
  136. package/dist/components/use-select-asset.js +30 -0
  137. package/dist/error-overlay/error-origin.d.ts +3 -0
  138. package/dist/error-overlay/error-origin.js +42 -0
  139. package/dist/error-overlay/react-overlay/listen-to-runtime-errors.js +6 -2
  140. package/dist/error-overlay/remotion-overlay/ErrorLoader.js +38 -0
  141. package/dist/error-overlay/remotion-overlay/ShortcutHint.js +1 -1
  142. package/dist/error-overlay/remotion-overlay/log-studio-error.d.ts +3 -0
  143. package/dist/error-overlay/remotion-overlay/log-studio-error.js +27 -0
  144. package/dist/esm/{chunk-48grt472.js → chunk-xjvc8qen.js} +21838 -18862
  145. package/dist/esm/internals.mjs +21838 -18862
  146. package/dist/esm/previewEntry.mjs +21127 -18127
  147. package/dist/esm/renderEntry.mjs +1 -1
  148. package/dist/helpers/get-asset-metadata.js +2 -2
  149. package/dist/helpers/get-preview-file-type.d.ts +2 -0
  150. package/dist/helpers/get-preview-file-type.js +33 -0
  151. package/dist/helpers/install-required-package.d.ts +1 -0
  152. package/dist/helpers/install-required-package.js +39 -0
  153. package/dist/helpers/remote-asset-drag.d.ts +4 -0
  154. package/dist/helpers/remote-asset-drag.js +73 -0
  155. package/dist/helpers/timeline-layout.d.ts +6 -6
  156. package/dist/helpers/timeline-layout.js +5 -5
  157. package/dist/helpers/use-asset-drag-events.d.ts +5 -2
  158. package/dist/helpers/use-asset-drag-events.js +13 -2
  159. package/dist/hot-middleware-client/client.js +6 -0
  160. package/dist/state/editor-outlines.d.ts +8 -0
  161. package/dist/state/editor-outlines.js +18 -0
  162. package/dist/state/modals.d.ts +16 -2
  163. package/package.json +10 -10
  164. package/dist/helpers/detect-file-type.d.ts +0 -69
  165. package/dist/helpers/detect-file-type.js +0 -278
@@ -209,7 +209,7 @@ var renderContent = (Root) => {
209
209
  renderToDOM(/* @__PURE__ */ jsx("div", {
210
210
  children: /* @__PURE__ */ jsx(DelayedSpinner, {})
211
211
  }));
212
- import("./chunk-48grt472.js").then(({ StudioInternals }) => {
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 Preview_1 = require("../components/Preview");
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, Preview_1.getPreviewFileType)(src);
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,2 @@
1
+ export type AssetFileType = 'audio' | 'video' | 'image' | 'json' | 'txt' | 'other';
2
+ export declare const getPreviewFileType: (fileName: string | null) => AssetFileType;
@@ -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(/&amp;/g, '&')
17
+ .replace(/&quot;/g, '"')
18
+ .replace(/&#39;/g, "'")
19
+ .replace(/&lt;/g, '<')
20
+ .replace(/&gt;/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 CodeValues, type DragOverrides, type EffectSchemaFieldInfo, type SchemaFieldInfo, type SequenceControls, type SequenceSchemaFieldInfo } from '@remotion/studio-shared';
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, CodeValues, DragOverrides, EffectSchemaFieldInfo, SchemaFieldInfo, SequenceControls, SequenceSchemaFieldInfo, };
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, codeValues, }: {
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
- codeValues: CodeValues;
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, codeValues, }: {
49
+ export declare const getExpandedTrackHeight: ({ sequence, nodePathInfo, getIsExpanded, propStatuses, }: {
50
50
  sequence: TSequence;
51
51
  nodePathInfo: SequenceNodePathInfo;
52
52
  getIsExpanded: GetIsExpanded;
53
- codeValues: CodeValues;
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, codeValues, }) => {
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
- codeValues,
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
- codeValues,
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, codeValues, }) => {
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
- codeValues,
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: () => void;
9
- onDragLeave: () => void;
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
+ });
@@ -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.472",
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.472",
29
- "@remotion/player": "4.0.472",
30
- "@remotion/media-utils": "4.0.472",
31
- "@remotion/renderer": "4.0.472",
32
- "@remotion/web-renderer": "4.0.472",
33
- "@remotion/studio-shared": "4.0.472",
34
- "@remotion/timeline-utils": "4.0.472",
35
- "@remotion/zod-types": "4.0.472",
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.472",
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;