@remotion/studio 4.0.496 → 4.0.497

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 (81) hide show
  1. package/dist/components/AudioWaveform.js +1 -11
  2. package/dist/components/Canvas.js +22 -203
  3. package/dist/components/CompositionSelectorItem.js +2 -10
  4. package/dist/components/InspectorPanel/AlignmentControls.js +2 -0
  5. package/dist/components/InspectorPanel/ConnectedCompositionsSection.js +27 -2
  6. package/dist/components/InspectorPanel/SequenceSelectionInspector.js +65 -8
  7. package/dist/components/InspectorPanel/use-composition-actions.js +6 -2
  8. package/dist/components/NewComposition/CodemodFooter.d.ts +1 -1
  9. package/dist/components/NewComposition/CodemodFooter.js +23 -4
  10. package/dist/components/NewComposition/InputDragger.d.ts +6 -0
  11. package/dist/components/NewComposition/InputDragger.js +12 -3
  12. package/dist/components/NewComposition/NewComposition.js +1 -1
  13. package/dist/components/NewComposition/use-rename-static-file.js +1 -1
  14. package/dist/components/SelectedOutlineElement.js +56 -88
  15. package/dist/components/SelectedOutlineOverlay.d.ts +1 -1
  16. package/dist/components/SelectedOutlineOverlay.js +9 -10
  17. package/dist/components/Timeline/Timeline.js +10 -3
  18. package/dist/components/Timeline/TimelineAssetDropIndicator.d.ts +2 -0
  19. package/dist/components/Timeline/TimelineAssetDropIndicator.js +37 -0
  20. package/dist/components/Timeline/TimelineClipboardKeybindings.js +1 -7
  21. package/dist/components/Timeline/TimelineScrollable.js +3 -2
  22. package/dist/components/Timeline/TimelineSelection.d.ts +4 -0
  23. package/dist/components/Timeline/TimelineSelection.js +40 -5
  24. package/dist/components/Timeline/TimelineSequence.js +20 -8
  25. package/dist/components/Timeline/TimelineSequenceFrame.js +2 -4
  26. package/dist/components/Timeline/TimelineSequenceItem.js +2 -0
  27. package/dist/components/Timeline/TimelineSequencePropItem.js +4 -0
  28. package/dist/components/Timeline/TimelineSequenceRightEdgeDragHandle.d.ts +15 -3
  29. package/dist/components/Timeline/TimelineSequenceRightEdgeDragHandle.js +96 -18
  30. package/dist/components/Timeline/TimelineTimeIndicators.d.ts +16 -0
  31. package/dist/components/Timeline/TimelineTimeIndicators.js +154 -35
  32. package/dist/components/Timeline/TimelineTranslateField.js +2 -1
  33. package/dist/components/Timeline/TimelineVideoInfo.d.ts +1 -0
  34. package/dist/components/Timeline/TimelineVideoInfo.js +4 -1
  35. package/dist/components/Timeline/delete-selected-timeline-item.d.ts +2 -0
  36. package/dist/components/Timeline/delete-selected-timeline-item.js +5 -4
  37. package/dist/components/Timeline/disable-sequence-interactivity.js +2 -0
  38. package/dist/components/Timeline/get-timeline-media-visualization-layout.d.ts +8 -0
  39. package/dist/components/Timeline/get-timeline-media-visualization-layout.js +10 -0
  40. package/dist/components/Timeline/get-timeline-video-info-widths.js +11 -3
  41. package/dist/components/Timeline/keyframe-clipboard.js +21 -5
  42. package/dist/components/Timeline/reset-selected-timeline-props.js +2 -0
  43. package/dist/components/Timeline/save-sequence-prop.d.ts +5 -3
  44. package/dist/components/Timeline/save-sequence-prop.js +43 -18
  45. package/dist/components/Timeline/should-clear-selection-on-pointer-down.d.ts +2 -0
  46. package/dist/components/Timeline/should-clear-selection-on-pointer-down.js +1 -1
  47. package/dist/components/Timeline/timeline-asset-drop-context.d.ts +1 -0
  48. package/dist/components/Timeline/timeline-asset-drop-context.js +5 -0
  49. package/dist/components/Timeline/timeline-scroll-logic.d.ts +7 -0
  50. package/dist/components/Timeline/timeline-scroll-logic.js +10 -1
  51. package/dist/components/Timeline/use-rename-sequence.js +2 -0
  52. package/dist/components/Timeline/use-sequence-freeze-frame-menu-item.js +2 -0
  53. package/dist/components/Timeline/use-timeline-asset-drop.d.ts +1 -0
  54. package/dist/components/Timeline/use-timeline-asset-drop.js +168 -0
  55. package/dist/components/composition-menu-items.d.ts +15 -1
  56. package/dist/components/composition-menu-items.js +137 -107
  57. package/dist/components/drop-handler-data.d.ts +13 -0
  58. package/dist/components/drop-handler-data.js +117 -0
  59. package/dist/components/handle-drop.d.ts +13 -0
  60. package/dist/components/handle-drop.js +115 -0
  61. package/dist/components/import-assets.d.ts +26 -8
  62. package/dist/components/import-assets.js +161 -49
  63. package/dist/components/selected-outline-drag.d.ts +11 -1
  64. package/dist/components/selected-outline-drag.js +74 -1
  65. package/dist/esm/{chunk-0v4n7nkh.js → chunk-5wj95bdd.js} +4262 -3392
  66. package/dist/esm/internals.mjs +4262 -3392
  67. package/dist/esm/previewEntry.mjs +4464 -3594
  68. package/dist/esm/renderEntry.mjs +1 -1
  69. package/dist/helpers/is-video-with-last-frame-hold.d.ts +2 -0
  70. package/dist/helpers/is-video-with-last-frame-hold.js +9 -0
  71. package/dist/helpers/url-state.d.ts +1 -0
  72. package/dist/helpers/url-state.js +5 -1
  73. package/dist/helpers/use-max-media-duration.js +5 -3
  74. package/dist/helpers/use-menu-structure.js +2 -0
  75. package/dist/icons/duplicate.d.ts +5 -0
  76. package/dist/icons/duplicate.js +10 -0
  77. package/dist/icons/snowflake.d.ts +5 -0
  78. package/dist/icons/snowflake.js +10 -0
  79. package/dist/icons/trash.d.ts +5 -0
  80. package/dist/icons/trash.js +8 -0
  81. package/package.json +11 -11
@@ -212,7 +212,7 @@ var renderContent = (Root) => {
212
212
  renderToDOM(/* @__PURE__ */ jsx("div", {
213
213
  children: /* @__PURE__ */ jsx(DelayedSpinner, {})
214
214
  }));
215
- import("./chunk-0v4n7nkh.js").then(({ StudioInternals }) => {
215
+ import("./chunk-5wj95bdd.js").then(({ StudioInternals }) => {
216
216
  window.remotion_isStudio = true;
217
217
  window.remotion_isReadOnlyStudio = true;
218
218
  window.remotion_inputProps = "{}";
@@ -0,0 +1,2 @@
1
+ import type { TSequence } from 'remotion';
2
+ export declare const isVideoWithLastFrameHold: (sequence: TSequence) => boolean;
@@ -0,0 +1,9 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.isVideoWithLastFrameHold = void 0;
4
+ const isVideoWithLastFrameHold = (sequence) => {
5
+ var _a;
6
+ return (sequence.type === 'video' &&
7
+ ((_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.componentIdentity) === 'dev.remotion.media.Video');
8
+ };
9
+ exports.isVideoWithLastFrameHold = isVideoWithLastFrameHold;
@@ -1,5 +1,6 @@
1
1
  export declare const getUrlForRoute: (route: string) => string;
2
2
  export declare const pushUrl: (url: string) => void;
3
+ export declare const replaceUrl: (url: string) => void;
3
4
  export declare const clearUrl: () => void;
4
5
  export declare const reloadUrl: () => void;
5
6
  export declare const getRoute: () => string;
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.getRoute = exports.reloadUrl = exports.clearUrl = exports.pushUrl = exports.getUrlForRoute = void 0;
3
+ exports.getRoute = exports.reloadUrl = exports.clearUrl = exports.replaceUrl = exports.pushUrl = exports.getUrlForRoute = void 0;
4
4
  const getUrlHandlingType = () => {
5
5
  if (window.remotion_isReadOnlyStudio) {
6
6
  return 'query-string';
@@ -18,6 +18,10 @@ const pushUrl = (url) => {
18
18
  window.history.pushState({}, 'Studio', (0, exports.getUrlForRoute)(url));
19
19
  };
20
20
  exports.pushUrl = pushUrl;
21
+ const replaceUrl = (url) => {
22
+ window.history.replaceState({}, 'Studio', (0, exports.getUrlForRoute)(url));
23
+ };
24
+ exports.replaceUrl = replaceUrl;
21
25
  const clearUrl = () => {
22
26
  window.location.href = window.location.pathname;
23
27
  };
@@ -2,6 +2,7 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.useMaxMediaDuration = void 0;
4
4
  const react_1 = require("react");
5
+ const is_video_with_last_frame_hold_1 = require("./is-video-with-last-frame-hold");
5
6
  const use_media_metadata_1 = require("./use-media-metadata");
6
7
  const cache = new Map();
7
8
  const getCacheKey = (src, fps) => JSON.stringify([src, fps]);
@@ -16,7 +17,8 @@ const getSrc = (s) => {
16
17
  };
17
18
  const useMaxMediaDuration = (s, fps) => {
18
19
  var _a;
19
- const src = getSrc(s);
20
+ const holdsLastFrame = (0, is_video_with_last_frame_hold_1.isVideoWithLastFrameHold)(s);
21
+ const src = holdsLastFrame ? null : getSrc(s);
20
22
  const cacheKey = src ? getCacheKey(src, fps) : null;
21
23
  const [maxMediaDuration, setMaxMediaDuration] = (0, react_1.useState)(cacheKey ? ((_a = cache.get(cacheKey)) !== null && _a !== void 0 ? _a : null) : Infinity);
22
24
  (0, react_1.useEffect)(() => {
@@ -49,8 +51,8 @@ const useMaxMediaDuration = (s, fps) => {
49
51
  cancelled = true;
50
52
  };
51
53
  }, [cacheKey, fps, src]);
52
- if (maxMediaDuration !== null && (s.type === 'audio' || s.type === 'video')) {
53
- return maxMediaDuration;
54
+ if (holdsLastFrame) {
55
+ return Infinity;
54
56
  }
55
57
  return maxMediaDuration;
56
58
  };
@@ -671,6 +671,8 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
671
671
  closeMenu,
672
672
  composition: currentComposition,
673
673
  connectionStatus: type,
674
+ includeCompositionManagementItems: true,
675
+ includeNewCompositionItem: true,
674
676
  resolvedLocation: resolvedCompositionLocation,
675
677
  setSelectedModal,
676
678
  readOnlyStudio,
@@ -0,0 +1,5 @@
1
+ import type { SVGProps } from 'react';
2
+ import React from 'react';
3
+ export declare const DuplicateIcon: React.FC<SVGProps<SVGSVGElement> & {
4
+ readonly color: string;
5
+ }>;
@@ -0,0 +1,10 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.DuplicateIcon = void 0;
4
+ const jsx_runtime_1 = require("react/jsx-runtime");
5
+ // Font Awesome Pro v7.3.1, Copyright 2026 Fonticons, Inc.
6
+ // https://fontawesome.com/license (Commercial License)
7
+ const DuplicateIcon = ({ color, ...props }) => {
8
+ return (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 640 640", ...props, children: jsx_runtime_1.jsx("path", { fill: color, d: "M352 544L128 544C110.3 544 96 529.7 96 512L96 288C96 270.3 110.3 256 128 256L176 256L176 224L128 224C92.7 224 64 252.7 64 288L64 512C64 547.3 92.7 576 128 576L352 576C387.3 576 416 547.3 416 512L416 464L384 464L384 512C384 529.7 369.7 544 352 544zM288 384C270.3 384 256 369.7 256 352L256 128C256 110.3 270.3 96 288 96L512 96C529.7 96 544 110.3 544 128L544 352C544 369.7 529.7 384 512 384L288 384zM224 352C224 387.3 252.7 416 288 416L512 416C547.3 416 576 387.3 576 352L576 128C576 92.7 547.3 64 512 64L288 64C252.7 64 224 92.7 224 128L224 352z" }) }));
9
+ };
10
+ exports.DuplicateIcon = DuplicateIcon;
@@ -0,0 +1,5 @@
1
+ import type { SVGProps } from 'react';
2
+ import React from 'react';
3
+ export declare const SnowflakeIcon: React.FC<SVGProps<SVGSVGElement> & {
4
+ readonly color: string;
5
+ }>;
@@ -0,0 +1,10 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.SnowflakeIcon = void 0;
4
+ const jsx_runtime_1 = require("react/jsx-runtime");
5
+ // Font Awesome Free v7.3.1, Copyright 2026 Fonticons, Inc.
6
+ // https://fontawesome.com/license/free
7
+ const SnowflakeIcon = ({ color, ...props }) => {
8
+ return (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 640 640", ...props, children: jsx_runtime_1.jsx("path", { fill: color, d: "M344.1 56C344.1 42.7 333.4 32 320.1 32C306.8 32 296.1 42.7 296.1 56L296.1 134.1L273.1 111.1C263.7 101.7 248.5 101.7 239.2 111.1C229.9 120.5 229.8 135.7 239.2 145L296.2 202L296.2 278.5L230 240.3L209.1 162.5C205.7 149.7 192.5 142.1 179.7 145.5C166.9 148.9 159.2 162 162.7 174.8L171.1 206.3L103.5 167.3C92 160.6 77.3 164.5 70.7 176C64.1 187.5 68 202.2 79.5 208.8L147.1 247.8L115.6 256.2C102.8 259.6 95.2 272.8 98.6 285.6C102 298.4 115.2 306 128 302.6L205.8 281.7L272 319.9L205.8 358.1L128 337.2C115.2 333.8 102 341.4 98.6 354.2C95.2 367 102.8 380.2 115.6 383.6L147.1 392L79.5 431C68 437.8 64.1 452.5 70.7 464C77.3 475.5 92 479.4 103.5 472.8L171.1 433.8L162.7 465.3C159.3 478.1 166.9 491.3 179.7 494.7C192.5 498.1 205.7 490.5 209.1 477.7L230 399.9L296.2 361.7L296.2 438.2L239.2 495.2C229.8 504.6 229.8 519.8 239.2 529.1C248.6 538.4 263.8 538.5 273.1 529.1L296.1 506.1L296.1 584.2C296.1 597.5 306.8 608.2 320.1 608.2C333.4 608.2 344.1 597.5 344.1 584.2L344.1 506.1L367.1 529.1C376.5 538.5 391.7 538.5 401 529.1C410.3 519.7 410.4 504.5 401 495.2L344 438.2L344 361.7L410.2 399.9L431.1 477.7C434.5 490.5 447.7 498.1 460.5 494.7C473.3 491.3 480.9 478.1 477.5 465.3L469.1 433.8L536.7 472.8C548.2 479.4 562.9 475.5 569.5 464C576.1 452.5 572.2 437.8 560.7 431.2L493.1 392.2L524.6 383.8C537.4 380.4 545 367.2 541.6 354.4C538.2 341.6 525 334 512.2 337.4L434.4 358.3L368.2 320.1L434.4 281.9L512.2 302.8C525 306.2 538.2 298.6 541.6 285.8C545 273 537.4 259.8 524.6 256.4L493.1 248L560.7 209C572.2 202.4 576.1 187.7 569.5 176.2C562.9 164.7 548.2 160.8 536.7 167.4L469.1 206.4L477.5 174.9C480.9 162.1 473.3 148.9 460.5 145.5C447.7 142.1 434.5 149.7 431.1 162.5L410.2 240.3L344 278.5L344 202L401 145C410.4 135.6 410.4 120.4 401 111.1C391.6 101.8 376.4 101.7 367.1 111.1L344.1 134.1L344.1 56z" }) }));
9
+ };
10
+ exports.SnowflakeIcon = SnowflakeIcon;
@@ -0,0 +1,5 @@
1
+ import type { SVGProps } from 'react';
2
+ import React from 'react';
3
+ export declare const TrashIcon: React.FC<SVGProps<SVGSVGElement> & {
4
+ readonly color: string;
5
+ }>;
@@ -0,0 +1,8 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.TrashIcon = void 0;
4
+ const jsx_runtime_1 = require("react/jsx-runtime");
5
+ const TrashIcon = ({ color, ...props }) => {
6
+ return (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", ...props, children: jsx_runtime_1.jsx("path", { fill: color, d: "M160.5 27.4C162.5 20.6 168.8 16 175.8 16h96.4c7.1 0 13.3 4.6 15.3 11.4l11 36.6h-149l11-36.6zM116.1 64H16C7.2 64 0 71.2 0 80s7.2 16 16 16h416c8.8 0 16-7.2 16-16s-7.2-16-16-16H331.9l-13.7-45.8C312.1-2.1 293.4-16 272.2-16h-96.4c-21.2 0-39.9 13.9-46 34.2L116.1 64zM28.7 144l22.9 308.7c2.5 33.4 30.3 59.3 63.8 59.3h217.1c33.5 0 61.3-25.9 63.8-59.3L419.2 144h-32.1l-22.7 306.4c-1.2 16.7-15.2 29.6-31.9 29.6H115.4c-16.8 0-30.7-12.9-31.9-29.6L60.8 144H28.7z" }) }));
7
+ };
8
+ exports.TrashIcon = TrashIcon;
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.496",
6
+ "version": "4.0.497",
7
7
  "description": "APIs for interacting with the Remotion Studio",
8
8
  "main": "dist",
9
9
  "scripts": {
@@ -25,15 +25,15 @@
25
25
  },
26
26
  "dependencies": {
27
27
  "semver": "7.5.3",
28
- "remotion": "4.0.496",
29
- "@remotion/canvas-capture": "4.0.496",
30
- "@remotion/player": "4.0.496",
31
- "@remotion/media-utils": "4.0.496",
32
- "@remotion/renderer": "4.0.496",
33
- "@remotion/web-renderer": "4.0.496",
34
- "@remotion/studio-shared": "4.0.496",
35
- "@remotion/timeline-utils": "4.0.496",
36
- "@remotion/zod-types": "4.0.496",
28
+ "remotion": "4.0.497",
29
+ "@remotion/canvas-capture": "4.0.497",
30
+ "@remotion/player": "4.0.497",
31
+ "@remotion/media-utils": "4.0.497",
32
+ "@remotion/renderer": "4.0.497",
33
+ "@remotion/web-renderer": "4.0.497",
34
+ "@remotion/studio-shared": "4.0.497",
35
+ "@remotion/timeline-utils": "4.0.497",
36
+ "@remotion/zod-types": "4.0.497",
37
37
  "@jridgewell/trace-mapping": "0.3.31",
38
38
  "mediabunny": "1.50.8",
39
39
  "memfs": "3.4.3",
@@ -44,7 +44,7 @@
44
44
  "react": "19.2.3",
45
45
  "react-dom": "19.2.3",
46
46
  "@types/semver": "7.5.3",
47
- "@remotion/eslint-config-internal": "4.0.496",
47
+ "@remotion/eslint-config-internal": "4.0.497",
48
48
  "eslint": "9.19.0",
49
49
  "@typescript/native-preview": "7.0.0-dev.20260217.1"
50
50
  },