@remotion/studio 4.0.459 → 4.0.461

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 (107) hide show
  1. package/dist/Studio.d.ts +0 -1
  2. package/dist/Studio.js +4 -4
  3. package/dist/components/AudioWaveform.js +21 -13
  4. package/dist/components/Checkbox.d.ts +7 -0
  5. package/dist/components/Checkbox.js +38 -24
  6. package/dist/components/Editor.js +10 -9
  7. package/dist/components/ExpandedTracksProvider.d.ts +9 -4
  8. package/dist/components/ExpandedTracksProvider.js +45 -15
  9. package/dist/components/MenuBuildIndicator.js +1 -2
  10. package/dist/components/MenuCompositionName.js +1 -0
  11. package/dist/components/NewComposition/ComboBox.d.ts +1 -0
  12. package/dist/components/NewComposition/ComboBox.js +14 -5
  13. package/dist/components/RenderButton.js +1 -1
  14. package/dist/components/SequencePropsSubscriptionProvider.d.ts +3 -0
  15. package/dist/components/SequencePropsSubscriptionProvider.js +26 -0
  16. package/dist/components/Timeline/SequencePropsObserver.d.ts +1 -0
  17. package/dist/components/Timeline/SequencePropsObserver.js +24 -0
  18. package/dist/components/Timeline/SubscribeToNodePaths.d.ts +7 -0
  19. package/dist/components/Timeline/SubscribeToNodePaths.js +15 -0
  20. package/dist/components/Timeline/Timeline.js +30 -49
  21. package/dist/components/Timeline/TimelineBooleanField.d.ts +4 -4
  22. package/dist/components/Timeline/TimelineBooleanField.js +5 -5
  23. package/dist/components/Timeline/TimelineDragHandler.js +37 -3
  24. package/dist/components/Timeline/TimelineEnumField.d.ts +5 -5
  25. package/dist/components/Timeline/TimelineEnumField.js +23 -15
  26. package/dist/components/Timeline/TimelineExpandArrowButton.d.ts +1 -0
  27. package/dist/components/Timeline/TimelineExpandArrowButton.js +5 -3
  28. package/dist/components/Timeline/TimelineExpandedRow.d.ts +6 -6
  29. package/dist/components/Timeline/TimelineExpandedRow.js +4 -5
  30. package/dist/components/Timeline/TimelineExpandedSection.d.ts +2 -2
  31. package/dist/components/Timeline/TimelineExpandedSection.js +20 -9
  32. package/dist/components/Timeline/TimelineFieldRow.d.ts +2 -3
  33. package/dist/components/Timeline/TimelineFieldRow.js +66 -30
  34. package/dist/components/Timeline/TimelineHeightContainer.d.ts +7 -0
  35. package/dist/components/Timeline/TimelineHeightContainer.js +51 -0
  36. package/dist/components/Timeline/TimelineList.js +1 -1
  37. package/dist/components/Timeline/TimelineListItem.d.ts +2 -0
  38. package/dist/components/Timeline/TimelineListItem.js +33 -18
  39. package/dist/components/Timeline/TimelineNumberField.d.ts +5 -5
  40. package/dist/components/Timeline/TimelineNumberField.js +12 -10
  41. package/dist/components/Timeline/TimelineRotationField.d.ts +5 -5
  42. package/dist/components/Timeline/TimelineRotationField.js +10 -10
  43. package/dist/components/Timeline/TimelineSchemaField.d.ts +4 -6
  44. package/dist/components/Timeline/TimelineSchemaField.js +11 -11
  45. package/dist/components/Timeline/TimelineSequence.js +2 -2
  46. package/dist/components/Timeline/TimelineSlider.js +2 -2
  47. package/dist/components/Timeline/TimelineStack/get-stack.js +17 -31
  48. package/dist/components/Timeline/TimelineStack/index.js +0 -10
  49. package/dist/components/Timeline/TimelineTimeIndicators.js +2 -2
  50. package/dist/components/Timeline/TimelineTracks.d.ts +1 -1
  51. package/dist/components/Timeline/TimelineTracks.js +53 -12
  52. package/dist/components/Timeline/TimelineTranslateField.d.ts +5 -5
  53. package/dist/components/Timeline/TimelineTranslateField.js +19 -37
  54. package/dist/components/Timeline/TimelineVideoInfo.js +25 -140
  55. package/dist/components/Timeline/sequence-props-subscription-store.d.ts +10 -13
  56. package/dist/components/Timeline/sequence-props-subscription-store.js +56 -123
  57. package/dist/components/Timeline/use-sequence-props-subscription.d.ts +6 -6
  58. package/dist/components/Timeline/use-sequence-props-subscription.js +25 -55
  59. package/dist/components/Timeline/use-timeline-height.d.ts +5 -0
  60. package/dist/components/Timeline/use-timeline-height.js +39 -0
  61. package/dist/error-overlay/react-overlay/utils/get-source-map.d.ts +3 -3
  62. package/dist/error-overlay/react-overlay/utils/get-source-map.js +5 -5
  63. package/dist/error-overlay/react-overlay/utils/unmapper.d.ts +0 -6
  64. package/dist/error-overlay/react-overlay/utils/unmapper.js +8 -1
  65. package/dist/esm/{chunk-0njpenna.js → chunk-yzh34sp0.js} +3026 -3446
  66. package/dist/esm/internals.mjs +3026 -3446
  67. package/dist/esm/previewEntry.mjs +3028 -3449
  68. package/dist/esm/renderEntry.mjs +2 -5
  69. package/dist/helpers/calculate-timeline.d.ts +3 -2
  70. package/dist/helpers/calculate-timeline.js +43 -2
  71. package/dist/helpers/get-timeline-sequence-layout.js +3 -3
  72. package/dist/helpers/get-timeline-sequence-sort-key.d.ts +7 -1
  73. package/dist/helpers/timeline-layout.d.ts +19 -9
  74. package/dist/helpers/timeline-layout.js +50 -20
  75. package/dist/icons/Checkmark.d.ts +4 -1
  76. package/dist/icons/Checkmark.js +1 -5
  77. package/dist/icons/caret.d.ts +3 -1
  78. package/dist/icons/caret.js +5 -2
  79. package/dist/internals.d.ts +0 -1
  80. package/dist/previewEntry.js +1 -1
  81. package/dist/renderEntry.js +3 -3
  82. package/package.json +13 -21
  83. package/dist/audio-waveform-worker.d.ts +0 -1
  84. package/dist/audio-waveform-worker.js +0 -102
  85. package/dist/components/audio-waveform-worker-types.d.ts +0 -28
  86. package/dist/components/audio-waveform-worker-types.js +0 -2
  87. package/dist/components/draw-peaks.d.ts +0 -1
  88. package/dist/components/draw-peaks.js +0 -68
  89. package/dist/components/load-waveform-peaks.d.ts +0 -13
  90. package/dist/components/load-waveform-peaks.js +0 -76
  91. package/dist/components/looped-media-timeline.d.ts +0 -6
  92. package/dist/components/looped-media-timeline.js +0 -14
  93. package/dist/components/parse-color.d.ts +0 -1
  94. package/dist/components/parse-color.js +0 -17
  95. package/dist/components/slice-waveform-peaks.d.ts +0 -7
  96. package/dist/components/slice-waveform-peaks.js +0 -15
  97. package/dist/components/waveform-peak-processor.d.ts +0 -23
  98. package/dist/components/waveform-peak-processor.js +0 -77
  99. package/dist/esm/audio-waveform-worker.mjs +0 -354
  100. package/dist/helpers/extract-frames.d.ts +0 -18
  101. package/dist/helpers/extract-frames.js +0 -87
  102. package/dist/helpers/frame-database.d.ts +0 -16
  103. package/dist/helpers/frame-database.js +0 -65
  104. package/dist/helpers/resize-video-frame.d.ts +0 -4
  105. package/dist/helpers/resize-video-frame.js +0 -39
  106. package/dist/make-audio-waveform-worker.d.ts +0 -1
  107. package/dist/make-audio-waveform-worker.js +0 -10
@@ -1,18 +0,0 @@
1
- import type { VideoSample } from 'mediabunny';
2
- type Options = {
3
- track: {
4
- width: number;
5
- height: number;
6
- };
7
- container: string;
8
- durationInSeconds: number | null;
9
- };
10
- export type ExtractFramesTimestampsInSecondsFn = (options: Options) => Promise<number[]> | number[];
11
- export type ExtractFramesProps = {
12
- src: string;
13
- timestampsInSeconds: number[] | ExtractFramesTimestampsInSecondsFn;
14
- onVideoSample: (sample: VideoSample) => void;
15
- signal?: AbortSignal;
16
- };
17
- export declare function extractFrames({ src, timestampsInSeconds, onVideoSample, signal }: ExtractFramesProps): Promise<void>;
18
- export {};
@@ -1,87 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.extractFrames = extractFrames;
4
- const mediabunny_1 = require("mediabunny");
5
- const get_duration_or_compute_1 = require("./get-duration-or-compute");
6
- async function extractFrames({ src, timestampsInSeconds, onVideoSample, signal, }) {
7
- var _a;
8
- const input = new mediabunny_1.Input({
9
- formats: mediabunny_1.ALL_FORMATS,
10
- source: new mediabunny_1.UrlSource(src),
11
- });
12
- const dispose = () => {
13
- input.dispose();
14
- };
15
- if (signal) {
16
- signal.addEventListener('abort', dispose, { once: true });
17
- }
18
- try {
19
- const [durationInSeconds, format, videoTrack] = await Promise.all([
20
- (0, get_duration_or_compute_1.getDurationOrCompute)(input),
21
- input.getFormat(),
22
- input.getPrimaryVideoTrack(),
23
- ]);
24
- if (!videoTrack) {
25
- throw new Error('No video track found in the input');
26
- }
27
- if (await videoTrack.isLive()) {
28
- throw new Error('Live streams are not currently supported by Remotion. Sorry! Source: ' +
29
- src);
30
- }
31
- if (await videoTrack.isRelativeToUnixEpoch()) {
32
- throw new Error('Streams with UNIX timestamps are not currently supported by Remotion. Sorry! Source: ' +
33
- src);
34
- }
35
- const timestamps = typeof timestampsInSeconds === 'function'
36
- ? await timestampsInSeconds({
37
- track: {
38
- width: await videoTrack.getDisplayWidth(),
39
- height: await videoTrack.getDisplayHeight(),
40
- },
41
- container: format.name,
42
- durationInSeconds,
43
- })
44
- : timestampsInSeconds;
45
- if (timestamps.length === 0) {
46
- return;
47
- }
48
- const sink = new mediabunny_1.VideoSampleSink(videoTrack);
49
- const sampleIterator = sink.samplesAtTimestamps(timestamps);
50
- try {
51
- for await (const videoSample of sampleIterator) {
52
- if (signal === null || signal === void 0 ? void 0 : signal.aborted) {
53
- videoSample === null || videoSample === void 0 ? void 0 : videoSample.close();
54
- break;
55
- }
56
- if (!videoSample) {
57
- continue;
58
- }
59
- onVideoSample(videoSample);
60
- }
61
- }
62
- finally {
63
- // When input.dispose() causes the iterator to throw
64
- // InputDisposedError, for-await does not call .return() on the
65
- // iterator (it only does so on `break`). Explicitly call it so
66
- // the iterator can close any internally buffered VideoSamples.
67
- try {
68
- await ((_a = sampleIterator.return) === null || _a === void 0 ? void 0 : _a.call(sampleIterator));
69
- }
70
- catch (_b) {
71
- // Iterator already done or input disposed
72
- }
73
- }
74
- }
75
- catch (error) {
76
- if (error instanceof mediabunny_1.InputDisposedError) {
77
- return;
78
- }
79
- throw error;
80
- }
81
- finally {
82
- dispose();
83
- if (signal) {
84
- signal.removeEventListener('abort', dispose);
85
- }
86
- }
87
- }
@@ -1,16 +0,0 @@
1
- export type FrameDatabaseKey = string & {
2
- __brand: 'FrameDatabaseKey';
3
- };
4
- export declare const makeFrameDatabaseKey: (src: string, timestamp: number) => FrameDatabaseKey;
5
- export declare const getFrameDatabaseKeyPrefix: (src: string) => string;
6
- type VideoFrameAndLastUsed = {
7
- frame: VideoFrame;
8
- lastUsed: number;
9
- size: number;
10
- };
11
- export declare const frameDatabase: Map<FrameDatabaseKey, VideoFrameAndLastUsed>;
12
- export declare const aspectRatioCache: Map<string, number>;
13
- export declare const getTimestampFromFrameDatabaseKey: (key: FrameDatabaseKey) => number;
14
- export declare const getAspectRatioFromCache: (src: string) => number | null;
15
- export declare const addFrameToCache: (key: FrameDatabaseKey, frame: VideoFrame) => void;
16
- export {};
@@ -1,65 +0,0 @@
1
- "use strict";
2
- // Cache the thumbnails of the timeline
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- exports.addFrameToCache = exports.getAspectRatioFromCache = exports.getTimestampFromFrameDatabaseKey = exports.aspectRatioCache = exports.frameDatabase = exports.getFrameDatabaseKeyPrefix = exports.makeFrameDatabaseKey = void 0;
5
- const KEY_SEPARATOR = '|';
6
- const makeFrameDatabaseKey = (src, timestamp) => `${src}${KEY_SEPARATOR}${timestamp}`;
7
- exports.makeFrameDatabaseKey = makeFrameDatabaseKey;
8
- const getFrameDatabaseKeyPrefix = (src) => {
9
- return `${src}${KEY_SEPARATOR}`;
10
- };
11
- exports.getFrameDatabaseKeyPrefix = getFrameDatabaseKeyPrefix;
12
- const MAX_CACHE_SIZE_BYTES = 10 * 1024 * 1024; // 10 MB
13
- let totalCacheSize = 0;
14
- exports.frameDatabase = new Map();
15
- exports.aspectRatioCache = new Map();
16
- const getTimestampFromFrameDatabaseKey = (key) => {
17
- const split = key.split(KEY_SEPARATOR);
18
- return Number(split[split.length - 1]);
19
- };
20
- exports.getTimestampFromFrameDatabaseKey = getTimestampFromFrameDatabaseKey;
21
- const getAspectRatioFromCache = (src) => {
22
- const cached = exports.aspectRatioCache.get(src);
23
- if (cached) {
24
- return cached;
25
- }
26
- return null;
27
- };
28
- exports.getAspectRatioFromCache = getAspectRatioFromCache;
29
- const evictLRU = () => {
30
- while (totalCacheSize > MAX_CACHE_SIZE_BYTES && exports.frameDatabase.size > 0) {
31
- let oldestKey;
32
- let oldestTime = Infinity;
33
- for (const [key, candidate] of exports.frameDatabase) {
34
- if (candidate.lastUsed < oldestTime) {
35
- oldestTime = candidate.lastUsed;
36
- oldestKey = key;
37
- }
38
- }
39
- if (!oldestKey) {
40
- break;
41
- }
42
- const entry = exports.frameDatabase.get(oldestKey);
43
- if (entry) {
44
- totalCacheSize -= entry.size;
45
- entry.frame.close();
46
- exports.frameDatabase.delete(oldestKey);
47
- }
48
- }
49
- };
50
- const addFrameToCache = (key, frame) => {
51
- const existing = exports.frameDatabase.get(key);
52
- if (existing) {
53
- totalCacheSize -= existing.size;
54
- existing.frame.close();
55
- }
56
- const size = frame.allocationSize();
57
- totalCacheSize += size;
58
- exports.frameDatabase.set(key, {
59
- frame,
60
- lastUsed: Date.now(),
61
- size,
62
- });
63
- evictLRU();
64
- };
65
- exports.addFrameToCache = addFrameToCache;
@@ -1,4 +0,0 @@
1
- export declare const resizeVideoFrame: ({ frame, scale, }: {
2
- frame: VideoFrame;
3
- scale: number;
4
- }) => VideoFrame;
@@ -1,39 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.resizeVideoFrame = void 0;
4
- const calculateNewDimensionsFromScale = ({ width, height, scale, }) => {
5
- const scaledWidth = Math.round(width * scale);
6
- const scaledHeight = Math.round(height * scale);
7
- return {
8
- width: scaledWidth,
9
- height: scaledHeight,
10
- };
11
- };
12
- const resizeVideoFrame = ({ frame, scale, }) => {
13
- var _a;
14
- // No resize, no rotation
15
- if (scale === 1) {
16
- return frame;
17
- }
18
- const { width, height } = calculateNewDimensionsFromScale({
19
- height: frame.displayHeight,
20
- width: frame.displayWidth,
21
- scale,
22
- });
23
- const canvas = new OffscreenCanvas(width, height);
24
- const ctx = canvas.getContext('2d');
25
- if (!ctx) {
26
- throw new Error('Could not get 2d context');
27
- }
28
- canvas.width = width;
29
- canvas.height = height;
30
- ctx.scale(scale, scale);
31
- ctx.drawImage(frame, 0, 0);
32
- return new VideoFrame(canvas, {
33
- displayHeight: height,
34
- displayWidth: width,
35
- duration: (_a = frame.duration) !== null && _a !== void 0 ? _a : undefined,
36
- timestamp: frame.timestamp,
37
- });
38
- };
39
- exports.resizeVideoFrame = resizeVideoFrame;
@@ -1 +0,0 @@
1
- export declare const makeAudioWaveformWorker: () => Worker;
@@ -1,10 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.makeAudioWaveformWorker = void 0;
4
- const makeAudioWaveformWorker = () => {
5
- // @ts-expect-error `import.meta.url` is required for bundling the worker entry.
6
- return new Worker(new URL('./audio-waveform-worker.mjs', import.meta.url), {
7
- type: 'module',
8
- });
9
- };
10
- exports.makeAudioWaveformWorker = makeAudioWaveformWorker;