@remotion/studio 4.0.463 → 4.0.464
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/components/CanvasOrLoading.js +1 -1
- package/dist/components/ColorPicker/AlphaSlider.d.ts +9 -0
- package/dist/components/ColorPicker/AlphaSlider.js +88 -0
- package/dist/components/ColorPicker/ColorPicker.d.ts +18 -0
- package/dist/components/ColorPicker/ColorPicker.js +176 -0
- package/dist/components/ColorPicker/ColorPickerPopup.d.ts +8 -0
- package/dist/components/ColorPicker/ColorPickerPopup.js +276 -0
- package/dist/components/ColorPicker/HueSlider.d.ts +6 -0
- package/dist/components/ColorPicker/HueSlider.js +68 -0
- package/dist/components/ColorPicker/SaturationValueArea.d.ts +14 -0
- package/dist/components/ColorPicker/SaturationValueArea.js +93 -0
- package/dist/components/ColorPicker/checker.d.ts +4 -0
- package/dist/components/ColorPicker/checker.js +9 -0
- package/dist/components/ExpandedTracksProvider.d.ts +2 -0
- package/dist/components/ExpandedTracksProvider.js +18 -1
- package/dist/components/RenderModal/SchemaEditor/ZodColorEditor.js +8 -47
- package/dist/components/Timeline/Padder.js +2 -2
- package/dist/components/Timeline/SubscribeToNodePaths.d.ts +1 -1
- package/dist/components/Timeline/SubscribeToNodePaths.js +9 -4
- package/dist/components/Timeline/Timeline.js +4 -7
- package/dist/components/Timeline/TimelineColorField.js +18 -156
- package/dist/components/Timeline/TimelineEffectFieldRow.d.ts +1 -2
- package/dist/components/Timeline/TimelineEffectFieldRow.js +22 -31
- package/dist/components/Timeline/TimelineEffectGroupRow.d.ts +1 -2
- package/dist/components/Timeline/TimelineEffectGroupRow.js +15 -12
- package/dist/components/Timeline/TimelineExpandedRow.js +15 -30
- package/dist/components/Timeline/TimelineFieldRow.d.ts +1 -2
- package/dist/components/Timeline/TimelineFieldRow.js +19 -16
- package/dist/components/Timeline/TimelineImageInfo.js +5 -17
- package/dist/components/Timeline/TimelineListItem.d.ts +0 -1
- package/dist/components/Timeline/TimelineListItem.js +12 -14
- package/dist/components/Timeline/TimelineRowChrome.d.ts +8 -0
- package/dist/components/Timeline/TimelineRowChrome.js +21 -0
- package/dist/components/Timeline/TimelineTracks.js +0 -4
- package/dist/components/Timeline/save-effect-prop.d.ts +2 -1
- package/dist/components/Timeline/save-effect-prop.js +2 -13
- package/dist/components/Timeline/save-prop-queue.d.ts +1 -2
- package/dist/components/Timeline/save-prop-queue.js +3 -12
- package/dist/components/Timeline/save-sequence-prop.d.ts +2 -1
- package/dist/components/Timeline/save-sequence-prop.js +2 -11
- package/dist/components/Timeline/should-show-track-in-timeline.d.ts +2 -0
- package/dist/components/Timeline/should-show-track-in-timeline.js +23 -0
- package/dist/components/Timeline/timeline-field-row-layout.d.ts +2 -0
- package/dist/components/Timeline/timeline-field-row-layout.js +14 -0
- package/dist/components/Timeline/timeline-indent.d.ts +1 -0
- package/dist/components/Timeline/timeline-indent.js +4 -0
- package/dist/components/Timeline/timeline-row-layout.d.ts +11 -0
- package/dist/components/Timeline/timeline-row-layout.js +27 -0
- package/dist/components/Timeline/use-resolved-stack-react-to-change.d.ts +2 -0
- package/dist/components/Timeline/use-resolved-stack-react-to-change.js +59 -0
- package/dist/components/Timeline/use-sequence-props-subscription.js +27 -1
- package/dist/error-overlay/remotion-overlay/ShortcutHint.js +5 -3
- package/dist/esm/chunk-6jf1natv.js +25 -0
- package/dist/esm/{chunk-b0m62frw.js → chunk-mawnnpzg.js} +4811 -3975
- package/dist/esm/index.mjs +16 -0
- package/dist/esm/internals.mjs +4824 -3973
- package/dist/esm/previewEntry.mjs +4835 -3985
- package/dist/esm/renderEntry.mjs +4 -3
- package/dist/helpers/client-id.d.ts +2 -9
- package/dist/helpers/client-id.js +15 -40
- package/dist/helpers/color-conversion.d.ts +36 -0
- package/dist/helpers/color-conversion.js +121 -0
- package/dist/helpers/inject-css.js +4 -7
- package/dist/helpers/migrate-expanded-tracks-for-subscription-key.d.ts +3 -0
- package/dist/helpers/migrate-expanded-tracks-for-subscription-key.js +26 -0
- package/dist/helpers/preview-server-events.d.ts +15 -0
- package/dist/helpers/preview-server-events.js +81 -0
- package/dist/helpers/timeline-layout.d.ts +0 -1
- package/dist/helpers/timeline-layout.js +29 -25
- package/dist/hot-middleware-client/client.js +10 -16
- package/package.json +10 -10
- package/dist/components/NewComposition/RemInputTypeColor.d.ts +0 -8
- package/dist/components/NewComposition/RemInputTypeColor.js +0 -53
- package/dist/components/Timeline/is-collapsed.d.ts +0 -2
- package/dist/components/Timeline/is-collapsed.js +0 -10
- package/dist/esm/chunk-5gtx3pza.js +0 -9
- package/dist/helpers/color-math.d.ts +0 -1
- package/dist/helpers/color-math.js +0 -13
package/dist/esm/renderEntry.mjs
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import {
|
|
2
|
-
__require
|
|
3
|
-
|
|
2
|
+
__require,
|
|
3
|
+
__toESM
|
|
4
|
+
} from "./chunk-6jf1natv.js";
|
|
4
5
|
|
|
5
6
|
// src/renderEntry.tsx
|
|
6
7
|
import { useContext, useEffect, useRef, useState } from "react";
|
|
@@ -206,7 +207,7 @@ var renderContent = (Root) => {
|
|
|
206
207
|
renderToDOM(/* @__PURE__ */ jsx("div", {
|
|
207
208
|
children: /* @__PURE__ */ jsx(DelayedSpinner, {})
|
|
208
209
|
}));
|
|
209
|
-
import("./chunk-
|
|
210
|
+
import("./chunk-mawnnpzg.js").then(({ StudioInternals }) => {
|
|
210
211
|
window.remotion_isStudio = true;
|
|
211
212
|
window.remotion_isReadOnlyStudio = true;
|
|
212
213
|
window.remotion_inputProps = "{}";
|
|
@@ -1,15 +1,8 @@
|
|
|
1
1
|
import type { EventSourceEvent } from '@remotion/studio-shared';
|
|
2
2
|
import React from 'react';
|
|
3
|
-
type
|
|
4
|
-
type: 'init';
|
|
5
|
-
} | {
|
|
6
|
-
type: 'connected';
|
|
7
|
-
clientId: string;
|
|
8
|
-
} | {
|
|
9
|
-
type: 'disconnected';
|
|
10
|
-
};
|
|
3
|
+
import { type PreviewServerConnectionState } from './preview-server-events';
|
|
11
4
|
type Context = {
|
|
12
|
-
previewServerState:
|
|
5
|
+
previewServerState: PreviewServerConnectionState;
|
|
13
6
|
subscribeToEvent: (type: EventSourceEvent['type'], listener: (event: EventSourceEvent) => void) => () => void;
|
|
14
7
|
};
|
|
15
8
|
export declare const StudioServerConnectionCtx: React.Context<Context>;
|
|
@@ -43,6 +43,7 @@ const remotion_1 = require("remotion");
|
|
|
43
43
|
const NotificationCenter_1 = require("../components/Notifications/NotificationCenter");
|
|
44
44
|
const PlayBeepSound_1 = __importDefault(require("../components/PlayBeepSound"));
|
|
45
45
|
const context_1 = require("../components/RenderQueue/context");
|
|
46
|
+
const preview_server_events_1 = require("./preview-server-events");
|
|
46
47
|
const url_state_1 = require("./url-state");
|
|
47
48
|
exports.StudioServerConnectionCtx = react_1.default.createContext({
|
|
48
49
|
previewServerState: {
|
|
@@ -60,20 +61,20 @@ const PreviewServerConnection = ({ children, readOnlyStudio }) => {
|
|
|
60
61
|
listeners.current = listeners.current.filter((l) => l.type !== type || l.listener !== listener);
|
|
61
62
|
};
|
|
62
63
|
}, []);
|
|
63
|
-
const
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
64
|
+
const [state, setState] = react_1.default.useState({
|
|
65
|
+
type: 'init',
|
|
66
|
+
});
|
|
67
|
+
(0, react_1.useEffect)(() => {
|
|
68
|
+
if (readOnlyStudio) {
|
|
69
|
+
return;
|
|
70
|
+
}
|
|
71
|
+
const handleEvent = (newEvent) => {
|
|
72
|
+
var _a, _b;
|
|
68
73
|
if (newEvent.type === 'new-input-props' ||
|
|
69
74
|
newEvent.type === 'new-env-variables') {
|
|
70
75
|
(0, url_state_1.reloadUrl)();
|
|
71
76
|
}
|
|
72
77
|
if (newEvent.type === 'init') {
|
|
73
|
-
setState({
|
|
74
|
-
type: 'connected',
|
|
75
|
-
clientId: newEvent.clientId,
|
|
76
|
-
});
|
|
77
78
|
listeners.current.forEach((l) => {
|
|
78
79
|
if (l.type === 'undo-redo-stack-changed') {
|
|
79
80
|
l.listener({
|
|
@@ -108,45 +109,19 @@ const PreviewServerConnection = ({ children, readOnlyStudio }) => {
|
|
|
108
109
|
detail: payload,
|
|
109
110
|
}));
|
|
110
111
|
}
|
|
111
|
-
if (newEvent.type === 'hmr') {
|
|
112
|
-
(_c = window.__remotion_processHmrEvent) === null || _c === void 0 ? void 0 : _c.call(window, newEvent.hmrEvent);
|
|
113
|
-
}
|
|
114
112
|
listeners.current.forEach((l) => {
|
|
115
113
|
if (l.type === newEvent.type) {
|
|
116
114
|
l.listener(newEvent);
|
|
117
115
|
}
|
|
118
116
|
});
|
|
119
|
-
});
|
|
120
|
-
source.addEventListener('open', () => {
|
|
121
|
-
source.addEventListener('error', () => {
|
|
122
|
-
setState({ type: 'disconnected' });
|
|
123
|
-
// Display an error message that the studio server has disconnected.
|
|
124
|
-
source === null || source === void 0 ? void 0 : source.close();
|
|
125
|
-
// Retry later
|
|
126
|
-
setTimeout(() => {
|
|
127
|
-
openEventSource();
|
|
128
|
-
}, 1000);
|
|
129
|
-
}, { once: true });
|
|
130
|
-
});
|
|
131
|
-
const close = () => {
|
|
132
|
-
source.close();
|
|
133
117
|
};
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
};
|
|
137
|
-
}, []);
|
|
138
|
-
(0, react_1.useEffect)(() => {
|
|
139
|
-
if (readOnlyStudio) {
|
|
140
|
-
return;
|
|
141
|
-
}
|
|
142
|
-
const { close } = openEventSource();
|
|
118
|
+
const unsubscribeFromEvents = (0, preview_server_events_1.subscribeToPreviewServerEvents)(handleEvent);
|
|
119
|
+
const unsubscribeFromConnectionState = (0, preview_server_events_1.subscribeToPreviewServerConnectionState)(setState);
|
|
143
120
|
return () => {
|
|
144
|
-
|
|
121
|
+
unsubscribeFromEvents();
|
|
122
|
+
unsubscribeFromConnectionState();
|
|
145
123
|
};
|
|
146
|
-
}, [
|
|
147
|
-
const [state, setState] = react_1.default.useState({
|
|
148
|
-
type: 'init',
|
|
149
|
-
});
|
|
124
|
+
}, [readOnlyStudio]);
|
|
150
125
|
const context = (0, react_1.useMemo)(() => {
|
|
151
126
|
return {
|
|
152
127
|
previewServerState: state,
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
export type Rgba = {
|
|
2
|
+
r: number;
|
|
3
|
+
g: number;
|
|
4
|
+
b: number;
|
|
5
|
+
a: number;
|
|
6
|
+
};
|
|
7
|
+
export type Hsva = {
|
|
8
|
+
h: number;
|
|
9
|
+
s: number;
|
|
10
|
+
v: number;
|
|
11
|
+
a: number;
|
|
12
|
+
};
|
|
13
|
+
export declare const clamp: (value: number, min: number, max: number) => number;
|
|
14
|
+
export declare const parseAnyColor: (input: string) => Rgba;
|
|
15
|
+
export declare const formatRgbHex: ({ r, g, b }: {
|
|
16
|
+
r: number;
|
|
17
|
+
g: number;
|
|
18
|
+
b: number;
|
|
19
|
+
}) => string;
|
|
20
|
+
export declare const formatRgba: ({ r, g, b, a }: Rgba) => string;
|
|
21
|
+
export declare const rgbToHsv: ({ r, g, b, }: {
|
|
22
|
+
r: number;
|
|
23
|
+
g: number;
|
|
24
|
+
b: number;
|
|
25
|
+
}) => Hsva;
|
|
26
|
+
export declare const hsvToRgb: ({ h, s, v, }: {
|
|
27
|
+
h: number;
|
|
28
|
+
s: number;
|
|
29
|
+
v: number;
|
|
30
|
+
}) => {
|
|
31
|
+
r: number;
|
|
32
|
+
g: number;
|
|
33
|
+
b: number;
|
|
34
|
+
};
|
|
35
|
+
export declare const rgbaToHsva: (rgba: Rgba) => Hsva;
|
|
36
|
+
export declare const hsvaToRgba: (hsva: Hsva) => Rgba;
|
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.hsvaToRgba = exports.rgbaToHsva = exports.hsvToRgb = exports.rgbToHsv = exports.formatRgba = exports.formatRgbHex = exports.parseAnyColor = exports.clamp = void 0;
|
|
4
|
+
const no_react_1 = require("remotion/no-react");
|
|
5
|
+
const clamp = (value, min, max) => {
|
|
6
|
+
return Math.min(Math.max(value, min), max);
|
|
7
|
+
};
|
|
8
|
+
exports.clamp = clamp;
|
|
9
|
+
const componentToHex = (c) => {
|
|
10
|
+
return Math.round((0, exports.clamp)(c, 0, 255))
|
|
11
|
+
.toString(16)
|
|
12
|
+
.padStart(2, '0');
|
|
13
|
+
};
|
|
14
|
+
// Always returns a normalized {r, g, b, a (0-255)} object,
|
|
15
|
+
// regardless of whether the input was a hex, rgb(), rgba(), or named color.
|
|
16
|
+
// Falls back to opaque black when parsing fails.
|
|
17
|
+
const parseAnyColor = (input) => {
|
|
18
|
+
try {
|
|
19
|
+
const argb = no_react_1.NoReactInternals.processColor(input)
|
|
20
|
+
.toString(16)
|
|
21
|
+
.padStart(8, '0');
|
|
22
|
+
const a = parseInt(argb.slice(0, 2), 16);
|
|
23
|
+
const r = parseInt(argb.slice(2, 4), 16);
|
|
24
|
+
const g = parseInt(argb.slice(4, 6), 16);
|
|
25
|
+
const b = parseInt(argb.slice(6, 8), 16);
|
|
26
|
+
return { r, g, b, a };
|
|
27
|
+
}
|
|
28
|
+
catch (_a) {
|
|
29
|
+
return { r: 0, g: 0, b: 0, a: 255 };
|
|
30
|
+
}
|
|
31
|
+
};
|
|
32
|
+
exports.parseAnyColor = parseAnyColor;
|
|
33
|
+
const formatRgbHex = ({ r, g, b }) => {
|
|
34
|
+
return `#${componentToHex(r)}${componentToHex(g)}${componentToHex(b)}`;
|
|
35
|
+
};
|
|
36
|
+
exports.formatRgbHex = formatRgbHex;
|
|
37
|
+
const formatRgba = ({ r, g, b, a }) => {
|
|
38
|
+
if (a >= 255) {
|
|
39
|
+
return (0, exports.formatRgbHex)({ r, g, b });
|
|
40
|
+
}
|
|
41
|
+
const opacity = Number((a / 255).toFixed(2));
|
|
42
|
+
return `rgba(${Math.round(r)}, ${Math.round(g)}, ${Math.round(b)}, ${opacity})`;
|
|
43
|
+
};
|
|
44
|
+
exports.formatRgba = formatRgba;
|
|
45
|
+
const rgbToHsv = ({ r, g, b, }) => {
|
|
46
|
+
const rn = r / 255;
|
|
47
|
+
const gn = g / 255;
|
|
48
|
+
const bn = b / 255;
|
|
49
|
+
const max = Math.max(rn, gn, bn);
|
|
50
|
+
const min = Math.min(rn, gn, bn);
|
|
51
|
+
const delta = max - min;
|
|
52
|
+
let h = 0;
|
|
53
|
+
if (delta !== 0) {
|
|
54
|
+
if (max === rn) {
|
|
55
|
+
h = ((gn - bn) / delta) % 6;
|
|
56
|
+
}
|
|
57
|
+
else if (max === gn) {
|
|
58
|
+
h = (bn - rn) / delta + 2;
|
|
59
|
+
}
|
|
60
|
+
else {
|
|
61
|
+
h = (rn - gn) / delta + 4;
|
|
62
|
+
}
|
|
63
|
+
h *= 60;
|
|
64
|
+
if (h < 0) {
|
|
65
|
+
h += 360;
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
const s = max === 0 ? 0 : delta / max;
|
|
69
|
+
const v = max;
|
|
70
|
+
return { h, s, v, a: 1 };
|
|
71
|
+
};
|
|
72
|
+
exports.rgbToHsv = rgbToHsv;
|
|
73
|
+
const hsvToRgb = ({ h, s, v, }) => {
|
|
74
|
+
const c = v * s;
|
|
75
|
+
const hh = (h % 360) / 60;
|
|
76
|
+
const x = c * (1 - Math.abs((hh % 2) - 1));
|
|
77
|
+
let r1 = 0;
|
|
78
|
+
let g1 = 0;
|
|
79
|
+
let b1 = 0;
|
|
80
|
+
if (hh >= 0 && hh < 1) {
|
|
81
|
+
r1 = c;
|
|
82
|
+
g1 = x;
|
|
83
|
+
}
|
|
84
|
+
else if (hh >= 1 && hh < 2) {
|
|
85
|
+
r1 = x;
|
|
86
|
+
g1 = c;
|
|
87
|
+
}
|
|
88
|
+
else if (hh >= 2 && hh < 3) {
|
|
89
|
+
g1 = c;
|
|
90
|
+
b1 = x;
|
|
91
|
+
}
|
|
92
|
+
else if (hh >= 3 && hh < 4) {
|
|
93
|
+
g1 = x;
|
|
94
|
+
b1 = c;
|
|
95
|
+
}
|
|
96
|
+
else if (hh >= 4 && hh < 5) {
|
|
97
|
+
r1 = x;
|
|
98
|
+
b1 = c;
|
|
99
|
+
}
|
|
100
|
+
else {
|
|
101
|
+
r1 = c;
|
|
102
|
+
b1 = x;
|
|
103
|
+
}
|
|
104
|
+
const m = v - c;
|
|
105
|
+
return {
|
|
106
|
+
r: Math.round((r1 + m) * 255),
|
|
107
|
+
g: Math.round((g1 + m) * 255),
|
|
108
|
+
b: Math.round((b1 + m) * 255),
|
|
109
|
+
};
|
|
110
|
+
};
|
|
111
|
+
exports.hsvToRgb = hsvToRgb;
|
|
112
|
+
const rgbaToHsva = (rgba) => {
|
|
113
|
+
const { h, s, v } = (0, exports.rgbToHsv)(rgba);
|
|
114
|
+
return { h, s, v, a: rgba.a / 255 };
|
|
115
|
+
};
|
|
116
|
+
exports.rgbaToHsva = rgbaToHsva;
|
|
117
|
+
const hsvaToRgba = (hsva) => {
|
|
118
|
+
const { r, g, b } = (0, exports.hsvToRgb)(hsva);
|
|
119
|
+
return { r, g, b, a: Math.round(hsva.a * 255) };
|
|
120
|
+
};
|
|
121
|
+
exports.hsvaToRgba = hsvaToRgba;
|
|
@@ -84,7 +84,7 @@ const makeDefaultGlobalCSS = () => {
|
|
|
84
84
|
|
|
85
85
|
input:focus,
|
|
86
86
|
textarea:focus,
|
|
87
|
-
button:focus:not(.__remotion_input_dragger),
|
|
87
|
+
button:focus:not(.__remotion_input_dragger):not(.__remotion_color_swatch),
|
|
88
88
|
a:focus {
|
|
89
89
|
outline: none;
|
|
90
90
|
box-shadow:
|
|
@@ -93,12 +93,9 @@ const makeDefaultGlobalCSS = () => {
|
|
|
93
93
|
inset 1px -1px #555,
|
|
94
94
|
inset -1px 1px #555;
|
|
95
95
|
}
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
}
|
|
100
|
-
input[type='color'].__remotion_color_picker::-webkit-color-swatch {
|
|
101
|
-
border: none;
|
|
96
|
+
|
|
97
|
+
.__remotion_color_swatch:focus {
|
|
98
|
+
outline: none;
|
|
102
99
|
}
|
|
103
100
|
|
|
104
101
|
.__remotion_thumb,
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import type { SequencePropsSubscriptionKey } from 'remotion';
|
|
2
|
+
import type { BooleanMap } from './persist-boolean-map';
|
|
3
|
+
export declare const migrateExpandedTracksForSubscriptionKey: (prev: BooleanMap, oldKey: SequencePropsSubscriptionKey, newKey: SequencePropsSubscriptionKey) => BooleanMap | null;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.migrateExpandedTracksForSubscriptionKey = void 0;
|
|
4
|
+
const studio_shared_1 = require("@remotion/studio-shared");
|
|
5
|
+
const migrateExpandedTracksForSubscriptionKey = (prev, oldKey, newKey) => {
|
|
6
|
+
const oldPrefix = (0, studio_shared_1.stringifySequenceExpandedRowKey)(oldKey);
|
|
7
|
+
const newPrefix = (0, studio_shared_1.stringifySequenceExpandedRowKey)(newKey);
|
|
8
|
+
if (oldPrefix === newPrefix) {
|
|
9
|
+
return null;
|
|
10
|
+
}
|
|
11
|
+
let changed = false;
|
|
12
|
+
const next = { ...prev };
|
|
13
|
+
for (const [key, value] of Object.entries(prev)) {
|
|
14
|
+
if (!value || !key.startsWith(oldPrefix + '.')) {
|
|
15
|
+
continue;
|
|
16
|
+
}
|
|
17
|
+
const migratedKey = newPrefix + key.slice(oldPrefix.length);
|
|
18
|
+
if (!next[migratedKey]) {
|
|
19
|
+
next[migratedKey] = true;
|
|
20
|
+
}
|
|
21
|
+
delete next[key];
|
|
22
|
+
changed = true;
|
|
23
|
+
}
|
|
24
|
+
return changed ? next : null;
|
|
25
|
+
};
|
|
26
|
+
exports.migrateExpandedTracksForSubscriptionKey = migrateExpandedTracksForSubscriptionKey;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import type { EventSourceEvent } from '@remotion/studio-shared';
|
|
2
|
+
export type PreviewServerConnectionState = {
|
|
3
|
+
type: 'init';
|
|
4
|
+
} | {
|
|
5
|
+
type: 'connected';
|
|
6
|
+
clientId: string;
|
|
7
|
+
} | {
|
|
8
|
+
type: 'disconnected';
|
|
9
|
+
};
|
|
10
|
+
type MessageListener = (event: EventSourceEvent) => void;
|
|
11
|
+
type ConnectionStateListener = (state: PreviewServerConnectionState) => void;
|
|
12
|
+
export declare const ensurePreviewServerEventSource: () => void;
|
|
13
|
+
export declare const subscribeToPreviewServerEvents: (listener: MessageListener) => () => void;
|
|
14
|
+
export declare const subscribeToPreviewServerConnectionState: (listener: ConnectionStateListener) => () => void;
|
|
15
|
+
export {};
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
/// <reference lib="dom" />
|
|
3
|
+
/// <reference lib="dom.iterable" />
|
|
4
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
5
|
+
exports.subscribeToPreviewServerConnectionState = exports.subscribeToPreviewServerEvents = exports.ensurePreviewServerEventSource = void 0;
|
|
6
|
+
let source = null;
|
|
7
|
+
let connectionState = { type: 'init' };
|
|
8
|
+
let lastInitEvent = null;
|
|
9
|
+
const messageListeners = new Set();
|
|
10
|
+
const connectionStateListeners = new Set();
|
|
11
|
+
const notifyConnectionState = () => {
|
|
12
|
+
for (const listener of connectionStateListeners) {
|
|
13
|
+
listener(connectionState);
|
|
14
|
+
}
|
|
15
|
+
};
|
|
16
|
+
const dispatch = (event) => {
|
|
17
|
+
for (const listener of messageListeners) {
|
|
18
|
+
listener(event);
|
|
19
|
+
}
|
|
20
|
+
};
|
|
21
|
+
const openEventSource = () => {
|
|
22
|
+
if (source) {
|
|
23
|
+
return;
|
|
24
|
+
}
|
|
25
|
+
source = new EventSource('/events');
|
|
26
|
+
source.addEventListener('message', (event) => {
|
|
27
|
+
try {
|
|
28
|
+
const newEvent = JSON.parse(event.data);
|
|
29
|
+
if (newEvent.type === 'init') {
|
|
30
|
+
lastInitEvent = newEvent;
|
|
31
|
+
connectionState = {
|
|
32
|
+
type: 'connected',
|
|
33
|
+
clientId: newEvent.clientId,
|
|
34
|
+
};
|
|
35
|
+
notifyConnectionState();
|
|
36
|
+
}
|
|
37
|
+
dispatch(newEvent);
|
|
38
|
+
}
|
|
39
|
+
catch (_a) {
|
|
40
|
+
// Ignore parse errors
|
|
41
|
+
}
|
|
42
|
+
});
|
|
43
|
+
source.addEventListener('open', () => {
|
|
44
|
+
source === null || source === void 0 ? void 0 : source.addEventListener('error', () => {
|
|
45
|
+
connectionState = { type: 'disconnected' };
|
|
46
|
+
notifyConnectionState();
|
|
47
|
+
source === null || source === void 0 ? void 0 : source.close();
|
|
48
|
+
source = null;
|
|
49
|
+
setTimeout(() => {
|
|
50
|
+
openEventSource();
|
|
51
|
+
}, 1000);
|
|
52
|
+
}, { once: true });
|
|
53
|
+
});
|
|
54
|
+
};
|
|
55
|
+
const ensurePreviewServerEventSource = () => {
|
|
56
|
+
if (typeof window === 'undefined' || typeof EventSource === 'undefined') {
|
|
57
|
+
return;
|
|
58
|
+
}
|
|
59
|
+
openEventSource();
|
|
60
|
+
};
|
|
61
|
+
exports.ensurePreviewServerEventSource = ensurePreviewServerEventSource;
|
|
62
|
+
const subscribeToPreviewServerEvents = (listener) => {
|
|
63
|
+
(0, exports.ensurePreviewServerEventSource)();
|
|
64
|
+
messageListeners.add(listener);
|
|
65
|
+
if (lastInitEvent && connectionState.type === 'connected') {
|
|
66
|
+
listener(lastInitEvent);
|
|
67
|
+
}
|
|
68
|
+
return () => {
|
|
69
|
+
messageListeners.delete(listener);
|
|
70
|
+
};
|
|
71
|
+
};
|
|
72
|
+
exports.subscribeToPreviewServerEvents = subscribeToPreviewServerEvents;
|
|
73
|
+
const subscribeToPreviewServerConnectionState = (listener) => {
|
|
74
|
+
(0, exports.ensurePreviewServerEventSource)();
|
|
75
|
+
connectionStateListeners.add(listener);
|
|
76
|
+
listener(connectionState);
|
|
77
|
+
return () => {
|
|
78
|
+
connectionStateListeners.delete(listener);
|
|
79
|
+
};
|
|
80
|
+
};
|
|
81
|
+
exports.subscribeToPreviewServerConnectionState = subscribeToPreviewServerConnectionState;
|
|
@@ -9,7 +9,6 @@ export declare const TIMELINE_BORDER = 1;
|
|
|
9
9
|
export declare const TIMELINE_ITEM_BORDER_BOTTOM = 1;
|
|
10
10
|
export declare const TIMELINE_TRACK_EXPANDED_HEIGHT = 100;
|
|
11
11
|
export declare const TREE_GROUP_ROW_HEIGHT = 22;
|
|
12
|
-
export declare const EXPANDED_SECTION_PADDING_LEFT = 28;
|
|
13
12
|
export declare const EXPANDED_SECTION_PADDING_RIGHT = 10;
|
|
14
13
|
export type TimelineFieldOnSave = (value: unknown) => Promise<void>;
|
|
15
14
|
export type TimelineFieldOnDragValueChange = (value: unknown) => void;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.getTimelineLayerHeight = exports.TIMELINE_LAYER_HEIGHT_AUDIO = exports.TIMELINE_LAYER_HEIGHT_IMAGE = exports.TIMELINE_LAYER_HEIGHT_VIDEO = exports.getExpandedTrackHeight = exports.getTreeRowHeight = exports.flattenVisibleTreeNodes = exports.buildTimelineTree = exports.EXPANDED_SECTION_PADDING_RIGHT = exports.
|
|
3
|
+
exports.getTimelineLayerHeight = exports.TIMELINE_LAYER_HEIGHT_AUDIO = exports.TIMELINE_LAYER_HEIGHT_IMAGE = exports.TIMELINE_LAYER_HEIGHT_VIDEO = exports.getExpandedTrackHeight = exports.getTreeRowHeight = exports.flattenVisibleTreeNodes = exports.buildTimelineTree = exports.EXPANDED_SECTION_PADDING_RIGHT = exports.TREE_GROUP_ROW_HEIGHT = exports.TIMELINE_TRACK_EXPANDED_HEIGHT = exports.TIMELINE_ITEM_BORDER_BOTTOM = exports.TIMELINE_BORDER = exports.TIMELINE_PADDING = exports.getFieldsToShow = exports.getEffectFieldsToShow = exports.SCHEMA_FIELD_ROW_HEIGHT = void 0;
|
|
4
4
|
const studio_shared_1 = require("@remotion/studio-shared");
|
|
5
5
|
const studio_shared_2 = require("@remotion/studio-shared");
|
|
6
6
|
Object.defineProperty(exports, "SCHEMA_FIELD_ROW_HEIGHT", { enumerable: true, get: function () { return studio_shared_2.SCHEMA_FIELD_ROW_HEIGHT; } });
|
|
@@ -11,12 +11,33 @@ exports.TIMELINE_BORDER = 1;
|
|
|
11
11
|
exports.TIMELINE_ITEM_BORDER_BOTTOM = 1;
|
|
12
12
|
exports.TIMELINE_TRACK_EXPANDED_HEIGHT = 100;
|
|
13
13
|
exports.TREE_GROUP_ROW_HEIGHT = 22;
|
|
14
|
-
exports.EXPANDED_SECTION_PADDING_LEFT = 28;
|
|
15
14
|
exports.EXPANDED_SECTION_PADDING_RIGHT = 10;
|
|
16
15
|
const buildTimelineTree = ({ sequence, nodePathInfo, getDragOverrides, codeValues, }) => {
|
|
17
16
|
var _a;
|
|
18
17
|
const roots = [];
|
|
19
18
|
const { sequenceSubscriptionKey, index, auxiliaryKeys } = nodePathInfo;
|
|
19
|
+
const controlFields = (0, studio_shared_1.getFieldsToShow)({
|
|
20
|
+
schema: sequence.controls.schema,
|
|
21
|
+
currentRuntimeValueDotNotation: sequence.controls.currentRuntimeValueDotNotation,
|
|
22
|
+
getDragOverrides,
|
|
23
|
+
codeValues,
|
|
24
|
+
nodePath: sequenceSubscriptionKey,
|
|
25
|
+
});
|
|
26
|
+
if (controlFields && controlFields.length > 0) {
|
|
27
|
+
for (const f of controlFields) {
|
|
28
|
+
roots.push({
|
|
29
|
+
kind: 'field',
|
|
30
|
+
nodePathInfo: {
|
|
31
|
+
sequenceSubscriptionKey,
|
|
32
|
+
auxiliaryKeys: [...auxiliaryKeys, 'controls', f.key],
|
|
33
|
+
index,
|
|
34
|
+
numberOfSequencesWithThisNodePath: 0,
|
|
35
|
+
},
|
|
36
|
+
label: (_a = f.description) !== null && _a !== void 0 ? _a : f.key,
|
|
37
|
+
field: f,
|
|
38
|
+
});
|
|
39
|
+
}
|
|
40
|
+
}
|
|
20
41
|
if (sequence.effects.length > 0) {
|
|
21
42
|
roots.push({
|
|
22
43
|
kind: 'group',
|
|
@@ -46,7 +67,12 @@ const buildTimelineTree = ({ sequence, nodePathInfo, getDragOverrides, codeValue
|
|
|
46
67
|
kind: 'field',
|
|
47
68
|
nodePathInfo: {
|
|
48
69
|
sequenceSubscriptionKey,
|
|
49
|
-
auxiliaryKeys: [
|
|
70
|
+
auxiliaryKeys: [
|
|
71
|
+
...auxiliaryKeys,
|
|
72
|
+
'effects',
|
|
73
|
+
i.toString(),
|
|
74
|
+
f.key,
|
|
75
|
+
],
|
|
50
76
|
index,
|
|
51
77
|
numberOfSequencesWithThisNodePath: 0,
|
|
52
78
|
},
|
|
@@ -58,28 +84,6 @@ const buildTimelineTree = ({ sequence, nodePathInfo, getDragOverrides, codeValue
|
|
|
58
84
|
}),
|
|
59
85
|
});
|
|
60
86
|
}
|
|
61
|
-
const controlFields = (0, studio_shared_1.getFieldsToShow)({
|
|
62
|
-
schema: sequence.controls.schema,
|
|
63
|
-
currentRuntimeValueDotNotation: sequence.controls.currentRuntimeValueDotNotation,
|
|
64
|
-
getDragOverrides,
|
|
65
|
-
codeValues,
|
|
66
|
-
nodePath: sequenceSubscriptionKey,
|
|
67
|
-
});
|
|
68
|
-
if (controlFields && controlFields.length > 0) {
|
|
69
|
-
for (const f of controlFields) {
|
|
70
|
-
roots.push({
|
|
71
|
-
kind: 'field',
|
|
72
|
-
nodePathInfo: {
|
|
73
|
-
sequenceSubscriptionKey,
|
|
74
|
-
auxiliaryKeys: [...auxiliaryKeys, 'controls', f.key],
|
|
75
|
-
index,
|
|
76
|
-
numberOfSequencesWithThisNodePath: 0,
|
|
77
|
-
},
|
|
78
|
-
label: (_a = f.description) !== null && _a !== void 0 ? _a : f.key,
|
|
79
|
-
field: f,
|
|
80
|
-
});
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
87
|
return roots;
|
|
84
88
|
};
|
|
85
89
|
exports.buildTimelineTree = buildTimelineTree;
|
|
@@ -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 preview_server_events_1 = require("../helpers/preview-server-events");
|
|
7
8
|
const process_update_1 = require("./process-update");
|
|
8
9
|
function createReporter() {
|
|
9
10
|
const styles = {
|
|
@@ -88,6 +89,7 @@ function processMessage(obj) {
|
|
|
88
89
|
}
|
|
89
90
|
let reporter;
|
|
90
91
|
const singletonKey = '__webpack_hot_middleware_reporter__';
|
|
92
|
+
let unsubscribeFromPreviewServerEvents = null;
|
|
91
93
|
const enableHotMiddleware = () => {
|
|
92
94
|
if (typeof window !== 'undefined') {
|
|
93
95
|
if (!window[singletonKey]) {
|
|
@@ -98,24 +100,16 @@ const enableHotMiddleware = () => {
|
|
|
98
100
|
window.__remotion_processHmrEvent = (hmrEvent) => {
|
|
99
101
|
processMessage(hmrEvent);
|
|
100
102
|
};
|
|
101
|
-
//
|
|
102
|
-
//
|
|
103
|
-
// to deliver compiled code, but the React-managed /events SSE
|
|
104
|
-
// (in PreviewServerConnection) only connects after React mounts —
|
|
105
|
-
// which itself depends on lazy modules loading first.
|
|
103
|
+
// Connect to /events immediately so HMR works before React mounts.
|
|
104
|
+
// PreviewServerConnection reuses the same EventSource via preview-server-events.
|
|
106
105
|
if (typeof window !== 'undefined' && typeof EventSource !== 'undefined') {
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
if (parsed.type === 'hmr') {
|
|
112
|
-
processMessage(parsed.hmrEvent);
|
|
106
|
+
if (!unsubscribeFromPreviewServerEvents) {
|
|
107
|
+
unsubscribeFromPreviewServerEvents = (0, preview_server_events_1.subscribeToPreviewServerEvents)((event) => {
|
|
108
|
+
if (event.type === 'hmr') {
|
|
109
|
+
processMessage(event.hmrEvent);
|
|
113
110
|
}
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
// Ignore parse errors
|
|
117
|
-
}
|
|
118
|
-
});
|
|
111
|
+
});
|
|
112
|
+
}
|
|
119
113
|
}
|
|
120
114
|
};
|
|
121
115
|
exports.enableHotMiddleware = enableHotMiddleware;
|
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.464",
|
|
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.464",
|
|
29
|
+
"@remotion/player": "4.0.464",
|
|
30
|
+
"@remotion/media-utils": "4.0.464",
|
|
31
|
+
"@remotion/renderer": "4.0.464",
|
|
32
|
+
"@remotion/web-renderer": "4.0.464",
|
|
33
|
+
"@remotion/studio-shared": "4.0.464",
|
|
34
|
+
"@remotion/timeline-utils": "4.0.464",
|
|
35
|
+
"@remotion/zod-types": "4.0.464",
|
|
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.464",
|
|
47
47
|
"eslint": "9.19.0",
|
|
48
48
|
"@typescript/native-preview": "7.0.0-dev.20260217.1"
|
|
49
49
|
},
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import type { RemInputStatus } from './RemInput';
|
|
3
|
-
type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> & {
|
|
4
|
-
readonly status: RemInputStatus;
|
|
5
|
-
readonly name: string;
|
|
6
|
-
};
|
|
7
|
-
export declare const RemInputTypeColor: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLInputElement>>;
|
|
8
|
-
export {};
|