remotion 4.0.437 → 4.0.439
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/cjs/Composition.js +0 -7
- package/dist/cjs/CompositionManagerContext.d.ts +0 -1
- package/dist/cjs/CompositionManagerContext.js +0 -1
- package/dist/cjs/CompositionManagerProvider.js +0 -16
- package/dist/cjs/EditorProps.d.ts +0 -5
- package/dist/cjs/EditorProps.js +3 -23
- package/dist/cjs/ResolveCompositionConfig.d.ts +0 -1
- package/dist/cjs/ResolveCompositionConfig.js +1 -2
- package/dist/cjs/index.d.ts +1 -2
- package/dist/cjs/internals.d.ts +0 -9
- package/dist/cjs/internals.js +0 -2
- package/dist/cjs/interpolate-colors.js +176 -0
- package/dist/cjs/use-schema.js +1 -1
- package/dist/cjs/version.d.ts +1 -1
- package/dist/cjs/version.js +1 -1
- package/dist/esm/index.mjs +180 -78
- package/dist/esm/no-react.mjs +157 -1
- package/dist/esm/version.mjs +1 -1
- package/package.json +2 -2
package/dist/cjs/Composition.js
CHANGED
|
@@ -93,13 +93,6 @@ const InnerComposition = ({ width, height, fps, durationInFrames, id, defaultPro
|
|
|
93
93
|
registerComposition,
|
|
94
94
|
unregisterComposition,
|
|
95
95
|
]);
|
|
96
|
-
(0, react_1.useEffect)(() => {
|
|
97
|
-
window.dispatchEvent(new CustomEvent(ResolveCompositionConfig_js_1.PROPS_UPDATED_EXTERNALLY, {
|
|
98
|
-
detail: {
|
|
99
|
-
resetUnsaved: id,
|
|
100
|
-
},
|
|
101
|
-
}));
|
|
102
|
-
}, [defaultProps, id]);
|
|
103
96
|
const resolved = (0, ResolveCompositionConfig_js_1.useResolvedVideoConfig)(id);
|
|
104
97
|
if (environment.isStudio &&
|
|
105
98
|
video &&
|
|
@@ -28,7 +28,6 @@ export type CompositionManagerSetters = {
|
|
|
28
28
|
registerFolder: (name: string, parent: string | null, nonce: NonceHistory) => void;
|
|
29
29
|
unregisterFolder: (name: string, parent: string | null) => void;
|
|
30
30
|
setCanvasContent: React.Dispatch<React.SetStateAction<CanvasContent | null>>;
|
|
31
|
-
updateCompositionDefaultProps: (id: string, newDefaultProps: Record<string, unknown>) => void;
|
|
32
31
|
onlyRenderComposition: string | null;
|
|
33
32
|
};
|
|
34
33
|
export type CompositionManagerContext = {
|
|
@@ -53,20 +53,6 @@ const CompositionManagerProvider = ({ children, onlyRenderComposition, currentCo
|
|
|
53
53
|
getCompositions: () => currentcompositionsRef.current,
|
|
54
54
|
};
|
|
55
55
|
}, []);
|
|
56
|
-
const updateCompositionDefaultProps = (0, react_1.useCallback)((id, newDefaultProps) => {
|
|
57
|
-
setCompositions((comps) => {
|
|
58
|
-
const updated = comps.map((c) => {
|
|
59
|
-
if (c.id === id) {
|
|
60
|
-
return {
|
|
61
|
-
...c,
|
|
62
|
-
defaultProps: newDefaultProps,
|
|
63
|
-
};
|
|
64
|
-
}
|
|
65
|
-
return c;
|
|
66
|
-
});
|
|
67
|
-
return updated;
|
|
68
|
-
});
|
|
69
|
-
}, []);
|
|
70
56
|
const compositionManagerSetters = (0, react_1.useMemo)(() => {
|
|
71
57
|
return {
|
|
72
58
|
registerComposition,
|
|
@@ -74,7 +60,6 @@ const CompositionManagerProvider = ({ children, onlyRenderComposition, currentCo
|
|
|
74
60
|
registerFolder,
|
|
75
61
|
unregisterFolder,
|
|
76
62
|
setCanvasContent,
|
|
77
|
-
updateCompositionDefaultProps,
|
|
78
63
|
onlyRenderComposition,
|
|
79
64
|
};
|
|
80
65
|
}, [
|
|
@@ -82,7 +67,6 @@ const CompositionManagerProvider = ({ children, onlyRenderComposition, currentCo
|
|
|
82
67
|
registerFolder,
|
|
83
68
|
unregisterComposition,
|
|
84
69
|
unregisterFolder,
|
|
85
|
-
updateCompositionDefaultProps,
|
|
86
70
|
onlyRenderComposition,
|
|
87
71
|
]);
|
|
88
72
|
const compositionManagerContextValue = (0, react_1.useMemo)(() => {
|
|
@@ -8,13 +8,8 @@ export type EditorPropsContextType = {
|
|
|
8
8
|
defaultProps: Record<string, unknown>;
|
|
9
9
|
newProps: Record<string, unknown> | ((oldProps: Record<string, unknown>) => Record<string, unknown>);
|
|
10
10
|
}) => void;
|
|
11
|
-
resetUnsaved: (compositionId: string) => void;
|
|
12
11
|
};
|
|
13
12
|
export declare const EditorPropsContext: React.Context<EditorPropsContextType>;
|
|
14
|
-
export declare const editorPropsProviderRef: React.RefObject<{
|
|
15
|
-
getProps: () => Props;
|
|
16
|
-
setProps: React.Dispatch<React.SetStateAction<Props>>;
|
|
17
|
-
} | null>;
|
|
18
13
|
export declare const timeValueRef: React.RefObject<{
|
|
19
14
|
goToFrame: () => void;
|
|
20
15
|
seek: (newFrame: number) => void;
|
package/dist/cjs/EditorProps.js
CHANGED
|
@@ -33,7 +33,7 @@ var __importStar = (this && this.__importStar) || (function () {
|
|
|
33
33
|
};
|
|
34
34
|
})();
|
|
35
35
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
|
-
exports.EditorPropsProvider = exports.timeValueRef = exports.
|
|
36
|
+
exports.EditorPropsProvider = exports.timeValueRef = exports.EditorPropsContext = void 0;
|
|
37
37
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
38
38
|
const react_1 = __importStar(require("react"));
|
|
39
39
|
exports.EditorPropsContext = (0, react_1.createContext)({
|
|
@@ -41,11 +41,7 @@ exports.EditorPropsContext = (0, react_1.createContext)({
|
|
|
41
41
|
updateProps: () => {
|
|
42
42
|
throw new Error('Not implemented');
|
|
43
43
|
},
|
|
44
|
-
resetUnsaved: () => {
|
|
45
|
-
throw new Error('Not implemented');
|
|
46
|
-
},
|
|
47
44
|
});
|
|
48
|
-
exports.editorPropsProviderRef = react_1.default.createRef();
|
|
49
45
|
exports.timeValueRef = react_1.default.createRef();
|
|
50
46
|
const EditorPropsProvider = ({ children }) => {
|
|
51
47
|
const [props, setProps] = react_1.default.useState({});
|
|
@@ -60,25 +56,9 @@ const EditorPropsProvider = ({ children }) => {
|
|
|
60
56
|
};
|
|
61
57
|
});
|
|
62
58
|
}, []);
|
|
63
|
-
const resetUnsaved = (0, react_1.useCallback)((compositionId) => {
|
|
64
|
-
setProps((prev) => {
|
|
65
|
-
if (prev[compositionId]) {
|
|
66
|
-
const newProps = { ...prev };
|
|
67
|
-
delete newProps[compositionId];
|
|
68
|
-
return newProps;
|
|
69
|
-
}
|
|
70
|
-
return prev;
|
|
71
|
-
});
|
|
72
|
-
}, []);
|
|
73
|
-
(0, react_1.useImperativeHandle)(exports.editorPropsProviderRef, () => {
|
|
74
|
-
return {
|
|
75
|
-
getProps: () => props,
|
|
76
|
-
setProps,
|
|
77
|
-
};
|
|
78
|
-
}, [props]);
|
|
79
59
|
const ctx = (0, react_1.useMemo)(() => {
|
|
80
|
-
return { props, updateProps
|
|
81
|
-
}, [props,
|
|
60
|
+
return { props, updateProps };
|
|
61
|
+
}, [props, updateProps]);
|
|
82
62
|
return ((0, jsx_runtime_1.jsx)(exports.EditorPropsContext.Provider, { value: ctx, children: children }));
|
|
83
63
|
};
|
|
84
64
|
exports.EditorPropsProvider = EditorPropsProvider;
|
|
@@ -19,6 +19,5 @@ type VideoConfigState = {
|
|
|
19
19
|
error: Error;
|
|
20
20
|
};
|
|
21
21
|
export declare const needsResolution: (composition: AnyComposition) => boolean;
|
|
22
|
-
export declare const PROPS_UPDATED_EXTERNALLY = "remotion.propsUpdatedExternally";
|
|
23
22
|
export declare const useResolvedVideoConfig: (preferredCompositionId: string | null) => VideoConfigState | null;
|
|
24
23
|
export {};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.useResolvedVideoConfig = exports.
|
|
3
|
+
exports.useResolvedVideoConfig = exports.needsResolution = exports.resolveCompositionsRef = exports.ResolveCompositionContext = void 0;
|
|
4
4
|
const react_1 = require("react");
|
|
5
5
|
const CompositionManagerContext_js_1 = require("./CompositionManagerContext.js");
|
|
6
6
|
const input_props_js_1 = require("./config/input-props.js");
|
|
@@ -15,7 +15,6 @@ const needsResolution = (composition) => {
|
|
|
15
15
|
return Boolean(composition.calculateMetadata);
|
|
16
16
|
};
|
|
17
17
|
exports.needsResolution = needsResolution;
|
|
18
|
-
exports.PROPS_UPDATED_EXTERNALLY = 'remotion.propsUpdatedExternally';
|
|
19
18
|
const useResolvedVideoConfig = (preferredCompositionId) => {
|
|
20
19
|
const context = (0, react_1.useContext)(exports.ResolveCompositionContext);
|
|
21
20
|
const { props: allEditorProps } = (0, react_1.useContext)(EditorProps_js_1.EditorPropsContext);
|
package/dist/cjs/index.d.ts
CHANGED
|
@@ -39,7 +39,7 @@ declare global {
|
|
|
39
39
|
remotion_ignoreFastRefreshUpdate: number | null;
|
|
40
40
|
remotion_numberOfAudioTags: number;
|
|
41
41
|
remotion_audioLatencyHint: AudioContextLatencyCategory | undefined;
|
|
42
|
-
remotion_logLevel: LogLevel;
|
|
42
|
+
remotion_logLevel: LogLevel | undefined;
|
|
43
43
|
remotion_projectName: string;
|
|
44
44
|
remotion_cwd: string;
|
|
45
45
|
remotion_studioServerCommand: string;
|
|
@@ -65,7 +65,6 @@ declare global {
|
|
|
65
65
|
siteVersion: '11';
|
|
66
66
|
remotion_version: string;
|
|
67
67
|
remotion_imported: string | boolean;
|
|
68
|
-
remotion_unsavedProps: boolean | undefined;
|
|
69
68
|
}
|
|
70
69
|
}
|
|
71
70
|
export type BundleCompositionState = {
|
package/dist/cjs/internals.d.ts
CHANGED
|
@@ -315,15 +315,6 @@ export declare const Internals: {
|
|
|
315
315
|
height: number;
|
|
316
316
|
};
|
|
317
317
|
}) => number;
|
|
318
|
-
readonly editorPropsProviderRef: import("react").RefObject<{
|
|
319
|
-
getProps: () => {
|
|
320
|
-
[x: string]: Record<string, unknown>;
|
|
321
|
-
};
|
|
322
|
-
setProps: React.Dispatch<React.SetStateAction<{
|
|
323
|
-
[x: string]: Record<string, unknown>;
|
|
324
|
-
}>>;
|
|
325
|
-
} | null>;
|
|
326
|
-
readonly PROPS_UPDATED_EXTERNALLY: "remotion.propsUpdatedExternally";
|
|
327
318
|
readonly validateRenderAsset: (artifact: TRenderAsset) => void;
|
|
328
319
|
readonly Log: {
|
|
329
320
|
trace: (options: {
|
package/dist/cjs/internals.js
CHANGED
|
@@ -184,8 +184,6 @@ exports.Internals = {
|
|
|
184
184
|
CurrentScaleContext: use_current_scale_js_1.CurrentScaleContext,
|
|
185
185
|
PreviewSizeContext: use_current_scale_js_1.PreviewSizeContext,
|
|
186
186
|
calculateScale: use_current_scale_js_1.calculateScale,
|
|
187
|
-
editorPropsProviderRef: EditorProps_js_1.editorPropsProviderRef,
|
|
188
|
-
PROPS_UPDATED_EXTERNALLY: ResolveCompositionConfig_js_1.PROPS_UPDATED_EXTERNALLY,
|
|
189
187
|
validateRenderAsset: validate_artifact_js_1.validateRenderAsset,
|
|
190
188
|
Log: log_js_1.Log,
|
|
191
189
|
LogLevelContext: log_level_context_js_1.LogLevelContext,
|
|
@@ -13,6 +13,20 @@ const PERCENTAGE = NUMBER + '%';
|
|
|
13
13
|
function call(...args) {
|
|
14
14
|
return '\\(\\s*(' + args.join(')\\s*,\\s*(') + ')\\s*\\)';
|
|
15
15
|
}
|
|
16
|
+
// Modern CSS Color Level 4 syntax: space-separated values with optional / alpha
|
|
17
|
+
const MODERN_VALUE = '(?:none|[-+]?\\d*\\.?\\d+(?:%|deg|rad|grad|turn)?)';
|
|
18
|
+
function modernColorCall(name) {
|
|
19
|
+
return new RegExp(name +
|
|
20
|
+
'\\(\\s*(' +
|
|
21
|
+
MODERN_VALUE +
|
|
22
|
+
')\\s+(' +
|
|
23
|
+
MODERN_VALUE +
|
|
24
|
+
')\\s+(' +
|
|
25
|
+
MODERN_VALUE +
|
|
26
|
+
')(?:\\s*\\/\\s*(' +
|
|
27
|
+
MODERN_VALUE +
|
|
28
|
+
'))?\\s*\\)');
|
|
29
|
+
}
|
|
16
30
|
function getMatchers() {
|
|
17
31
|
const cachedMatchers = {
|
|
18
32
|
rgb: undefined,
|
|
@@ -24,6 +38,11 @@ function getMatchers() {
|
|
|
24
38
|
hex5: undefined,
|
|
25
39
|
hex6: undefined,
|
|
26
40
|
hex8: undefined,
|
|
41
|
+
oklch: undefined,
|
|
42
|
+
oklab: undefined,
|
|
43
|
+
lab: undefined,
|
|
44
|
+
lch: undefined,
|
|
45
|
+
hwb: undefined,
|
|
27
46
|
};
|
|
28
47
|
if (cachedMatchers.rgb === undefined) {
|
|
29
48
|
cachedMatchers.rgb = new RegExp('rgb' + call(NUMBER, NUMBER, NUMBER));
|
|
@@ -35,6 +54,11 @@ function getMatchers() {
|
|
|
35
54
|
/^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/;
|
|
36
55
|
cachedMatchers.hex6 = /^#([0-9a-fA-F]{6})$/;
|
|
37
56
|
cachedMatchers.hex8 = /^#([0-9a-fA-F]{8})$/;
|
|
57
|
+
cachedMatchers.oklch = modernColorCall('oklch');
|
|
58
|
+
cachedMatchers.oklab = modernColorCall('oklab');
|
|
59
|
+
cachedMatchers.lab = modernColorCall('lab');
|
|
60
|
+
cachedMatchers.lch = modernColorCall('lch');
|
|
61
|
+
cachedMatchers.hwb = modernColorCall('hwb');
|
|
38
62
|
}
|
|
39
63
|
return cachedMatchers;
|
|
40
64
|
}
|
|
@@ -101,6 +125,106 @@ function parsePercentage(str) {
|
|
|
101
125
|
}
|
|
102
126
|
return int / 100;
|
|
103
127
|
}
|
|
128
|
+
// Modern CSS Color Level 4 parsing helpers
|
|
129
|
+
function parseModernComponent(str, percentScale) {
|
|
130
|
+
if (str === 'none')
|
|
131
|
+
return 0;
|
|
132
|
+
if (str.endsWith('%')) {
|
|
133
|
+
return (Number.parseFloat(str) / 100) * percentScale;
|
|
134
|
+
}
|
|
135
|
+
return Number.parseFloat(str);
|
|
136
|
+
}
|
|
137
|
+
function parseHueAngle(str) {
|
|
138
|
+
if (str === 'none')
|
|
139
|
+
return 0;
|
|
140
|
+
if (str.endsWith('rad')) {
|
|
141
|
+
return (Number.parseFloat(str) * 180) / Math.PI;
|
|
142
|
+
}
|
|
143
|
+
if (str.endsWith('grad'))
|
|
144
|
+
return Number.parseFloat(str) * 0.9;
|
|
145
|
+
if (str.endsWith('turn'))
|
|
146
|
+
return Number.parseFloat(str) * 360;
|
|
147
|
+
// 'deg' suffix or plain number = degrees
|
|
148
|
+
return Number.parseFloat(str);
|
|
149
|
+
}
|
|
150
|
+
function parseModernAlpha(str) {
|
|
151
|
+
if (str === undefined || str === 'none')
|
|
152
|
+
return 1;
|
|
153
|
+
if (str.endsWith('%')) {
|
|
154
|
+
return Math.max(0, Math.min(1, Number.parseFloat(str) / 100));
|
|
155
|
+
}
|
|
156
|
+
return Math.max(0, Math.min(1, Number.parseFloat(str)));
|
|
157
|
+
}
|
|
158
|
+
// sRGB gamma correction
|
|
159
|
+
function linearToSrgb(c) {
|
|
160
|
+
if (c <= 0.0031308)
|
|
161
|
+
return 12.92 * c;
|
|
162
|
+
return 1.055 * c ** (1 / 2.4) - 0.055;
|
|
163
|
+
}
|
|
164
|
+
function clamp01(v) {
|
|
165
|
+
return Math.max(0, Math.min(1, v));
|
|
166
|
+
}
|
|
167
|
+
function rgbFloatToInt(r, g, b, alpha) {
|
|
168
|
+
const ri = Math.round(clamp01(r) * 255);
|
|
169
|
+
const gi = Math.round(clamp01(g) * 255);
|
|
170
|
+
const bi = Math.round(clamp01(b) * 255);
|
|
171
|
+
const ai = Math.round(clamp01(alpha) * 255);
|
|
172
|
+
return ((ri << 24) | (gi << 16) | (bi << 8) | ai) >>> 0;
|
|
173
|
+
}
|
|
174
|
+
// OKLab to sRGB conversion
|
|
175
|
+
function oklabToSrgb(L, a, b) {
|
|
176
|
+
const l_ = L + 0.3963377774 * a + 0.2158037573 * b;
|
|
177
|
+
const m_ = L - 0.1055613458 * a - 0.0638541728 * b;
|
|
178
|
+
const s_ = L - 0.0894841775 * a - 1.291485548 * b;
|
|
179
|
+
const l = l_ * l_ * l_;
|
|
180
|
+
const m = m_ * m_ * m_;
|
|
181
|
+
const s = s_ * s_ * s_;
|
|
182
|
+
const rLin = 4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s;
|
|
183
|
+
const gLin = -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s;
|
|
184
|
+
const bLin = -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s;
|
|
185
|
+
return [linearToSrgb(rLin), linearToSrgb(gLin), linearToSrgb(bLin)];
|
|
186
|
+
}
|
|
187
|
+
// CIE Lab to sRGB conversion (D65 illuminant)
|
|
188
|
+
function labToSrgb(L, a, b) {
|
|
189
|
+
const epsilon = 216 / 24389;
|
|
190
|
+
const kappa = 24389 / 27;
|
|
191
|
+
// D65 white point
|
|
192
|
+
const Xn = 0.95047;
|
|
193
|
+
const Yn = 1.0;
|
|
194
|
+
const Zn = 1.08883;
|
|
195
|
+
const fy = (L + 16) / 116;
|
|
196
|
+
const fx = a / 500 + fy;
|
|
197
|
+
const fz = fy - b / 200;
|
|
198
|
+
const fx3 = fx * fx * fx;
|
|
199
|
+
const fz3 = fz * fz * fz;
|
|
200
|
+
const xr = fx3 > epsilon ? fx3 : (116 * fx - 16) / kappa;
|
|
201
|
+
const yr = L > kappa * epsilon ? ((L + 16) / 116) ** 3 : L / kappa;
|
|
202
|
+
const zr = fz3 > epsilon ? fz3 : (116 * fz - 16) / kappa;
|
|
203
|
+
const X = xr * Xn;
|
|
204
|
+
const Y = yr * Yn;
|
|
205
|
+
const Z = zr * Zn;
|
|
206
|
+
// XYZ to linear sRGB (D65)
|
|
207
|
+
const rLin = 3.2404542 * X - 1.5371385 * Y - 0.4985314 * Z;
|
|
208
|
+
const gLin = -0.969266 * X + 1.8760108 * Y + 0.041556 * Z;
|
|
209
|
+
const bLin = 0.0556434 * X - 0.2040259 * Y + 1.0572252 * Z;
|
|
210
|
+
return [linearToSrgb(rLin), linearToSrgb(gLin), linearToSrgb(bLin)];
|
|
211
|
+
}
|
|
212
|
+
// HWB to sRGB conversion
|
|
213
|
+
function hwbToSrgb(h, w, bk) {
|
|
214
|
+
// h is 0-1 (hue as fraction of 360), w and bk are 0-1
|
|
215
|
+
if (w + bk >= 1) {
|
|
216
|
+
const gray = w / (w + bk);
|
|
217
|
+
return [gray, gray, gray];
|
|
218
|
+
}
|
|
219
|
+
// Get pure hue RGB (HSL with S=100%, L=50%)
|
|
220
|
+
const q = 1; // l=0.5, s=1: q = 0.5*(1+1) = 1
|
|
221
|
+
const p = 0; // 2*0.5 - 1 = 0
|
|
222
|
+
const r = hue2rgb(p, q, h + 1 / 3);
|
|
223
|
+
const g = hue2rgb(p, q, h);
|
|
224
|
+
const bl = hue2rgb(p, q, h - 1 / 3);
|
|
225
|
+
const factor = 1 - w - bk;
|
|
226
|
+
return [r * factor + w, g * factor + w, bl * factor + w];
|
|
227
|
+
}
|
|
104
228
|
exports.colorNames = {
|
|
105
229
|
transparent: 0x00000000,
|
|
106
230
|
// http://www.w3.org/TR/css3-color/#svg-color
|
|
@@ -339,6 +463,58 @@ function normalizeColor(color) {
|
|
|
339
463
|
0);
|
|
340
464
|
}
|
|
341
465
|
}
|
|
466
|
+
if (matchers.oklch) {
|
|
467
|
+
if ((match = matchers.oklch.exec(color))) {
|
|
468
|
+
const L = parseModernComponent(match[1], 1); // 100% = 1
|
|
469
|
+
const C = parseModernComponent(match[2], 0.4); // 100% = 0.4
|
|
470
|
+
const H = parseHueAngle(match[3]);
|
|
471
|
+
const alpha = parseModernAlpha(match[4]);
|
|
472
|
+
const hRad = (H * Math.PI) / 180;
|
|
473
|
+
const [r, g, b] = oklabToSrgb(L, C * Math.cos(hRad), C * Math.sin(hRad));
|
|
474
|
+
return rgbFloatToInt(r, g, b, alpha);
|
|
475
|
+
}
|
|
476
|
+
}
|
|
477
|
+
if (matchers.oklab) {
|
|
478
|
+
if ((match = matchers.oklab.exec(color))) {
|
|
479
|
+
const L = parseModernComponent(match[1], 1);
|
|
480
|
+
const a = parseModernComponent(match[2], 0.4);
|
|
481
|
+
const b = parseModernComponent(match[3], 0.4);
|
|
482
|
+
const alpha = parseModernAlpha(match[4]);
|
|
483
|
+
const [r, g, bl] = oklabToSrgb(L, a, b);
|
|
484
|
+
return rgbFloatToInt(r, g, bl, alpha);
|
|
485
|
+
}
|
|
486
|
+
}
|
|
487
|
+
if (matchers.lab) {
|
|
488
|
+
if ((match = matchers.lab.exec(color))) {
|
|
489
|
+
const L = parseModernComponent(match[1], 100); // 100% = 100
|
|
490
|
+
const a = parseModernComponent(match[2], 125); // 100% = 125
|
|
491
|
+
const b = parseModernComponent(match[3], 125);
|
|
492
|
+
const alpha = parseModernAlpha(match[4]);
|
|
493
|
+
const [r, g, bl] = labToSrgb(L, a, b);
|
|
494
|
+
return rgbFloatToInt(r, g, bl, alpha);
|
|
495
|
+
}
|
|
496
|
+
}
|
|
497
|
+
if (matchers.lch) {
|
|
498
|
+
if ((match = matchers.lch.exec(color))) {
|
|
499
|
+
const L = parseModernComponent(match[1], 100);
|
|
500
|
+
const C = parseModernComponent(match[2], 150); // 100% = 150
|
|
501
|
+
const H = parseHueAngle(match[3]);
|
|
502
|
+
const alpha = parseModernAlpha(match[4]);
|
|
503
|
+
const hRad = (H * Math.PI) / 180;
|
|
504
|
+
const [r, g, bl] = labToSrgb(L, C * Math.cos(hRad), C * Math.sin(hRad));
|
|
505
|
+
return rgbFloatToInt(r, g, bl, alpha);
|
|
506
|
+
}
|
|
507
|
+
}
|
|
508
|
+
if (matchers.hwb) {
|
|
509
|
+
if ((match = matchers.hwb.exec(color))) {
|
|
510
|
+
const H = parseHueAngle(match[1]);
|
|
511
|
+
const W = parseModernComponent(match[2], 1); // 100% = 1
|
|
512
|
+
const B = parseModernComponent(match[3], 1);
|
|
513
|
+
const alpha = parseModernAlpha(match[4]);
|
|
514
|
+
const [r, g, bl] = hwbToSrgb(H / 360, W, B);
|
|
515
|
+
return rgbFloatToInt(r, g, bl, alpha);
|
|
516
|
+
}
|
|
517
|
+
}
|
|
342
518
|
throw new Error(`invalid color string ${color} provided`);
|
|
343
519
|
}
|
|
344
520
|
const opacity = (c) => {
|
package/dist/cjs/use-schema.js
CHANGED
|
@@ -50,7 +50,7 @@ const useSchema = (schema, currentValue) => {
|
|
|
50
50
|
const overrideValues = (_a = overrides[overrideId]) !== null && _a !== void 0 ? _a : {};
|
|
51
51
|
const propStatus = codeValues[overrideId];
|
|
52
52
|
const currentValueKeys = Object.keys(currentValue);
|
|
53
|
-
const keysToUpdate = new Set(currentValueKeys)
|
|
53
|
+
const keysToUpdate = [...new Set(currentValueKeys)];
|
|
54
54
|
const merged = {};
|
|
55
55
|
// Apply code values over runtime values, falling back to schema default
|
|
56
56
|
for (const key of keysToUpdate) {
|
package/dist/cjs/version.d.ts
CHANGED
package/dist/cjs/version.js
CHANGED
package/dist/esm/index.mjs
CHANGED
|
@@ -61,7 +61,7 @@ function truthy(value) {
|
|
|
61
61
|
}
|
|
62
62
|
|
|
63
63
|
// src/version.ts
|
|
64
|
-
var VERSION = "4.0.
|
|
64
|
+
var VERSION = "4.0.439";
|
|
65
65
|
|
|
66
66
|
// src/multiple-versions-warning.ts
|
|
67
67
|
var checkMultipleRemotionVersions = () => {
|
|
@@ -678,9 +678,6 @@ var CompositionSetters = createContext7({
|
|
|
678
678
|
setCanvasContent: () => {
|
|
679
679
|
return;
|
|
680
680
|
},
|
|
681
|
-
updateCompositionDefaultProps: () => {
|
|
682
|
-
return;
|
|
683
|
-
},
|
|
684
681
|
onlyRenderComposition: null
|
|
685
682
|
});
|
|
686
683
|
|
|
@@ -807,23 +804,14 @@ var getInputProps = () => {
|
|
|
807
804
|
};
|
|
808
805
|
|
|
809
806
|
// src/EditorProps.tsx
|
|
810
|
-
import React5, {
|
|
811
|
-
createContext as createContext8,
|
|
812
|
-
useCallback as useCallback2,
|
|
813
|
-
useImperativeHandle,
|
|
814
|
-
useMemo as useMemo3
|
|
815
|
-
} from "react";
|
|
807
|
+
import React5, { createContext as createContext8, useCallback as useCallback2, useMemo as useMemo3 } from "react";
|
|
816
808
|
import { jsx as jsx4 } from "react/jsx-runtime";
|
|
817
809
|
var EditorPropsContext = createContext8({
|
|
818
810
|
props: {},
|
|
819
811
|
updateProps: () => {
|
|
820
812
|
throw new Error("Not implemented");
|
|
821
|
-
},
|
|
822
|
-
resetUnsaved: () => {
|
|
823
|
-
throw new Error("Not implemented");
|
|
824
813
|
}
|
|
825
814
|
});
|
|
826
|
-
var editorPropsProviderRef = React5.createRef();
|
|
827
815
|
var timeValueRef = React5.createRef();
|
|
828
816
|
var EditorPropsProvider = ({ children }) => {
|
|
829
817
|
const [props, setProps] = React5.useState({});
|
|
@@ -839,25 +827,9 @@ var EditorPropsProvider = ({ children }) => {
|
|
|
839
827
|
};
|
|
840
828
|
});
|
|
841
829
|
}, []);
|
|
842
|
-
const resetUnsaved = useCallback2((compositionId) => {
|
|
843
|
-
setProps((prev) => {
|
|
844
|
-
if (prev[compositionId]) {
|
|
845
|
-
const newProps = { ...prev };
|
|
846
|
-
delete newProps[compositionId];
|
|
847
|
-
return newProps;
|
|
848
|
-
}
|
|
849
|
-
return prev;
|
|
850
|
-
});
|
|
851
|
-
}, []);
|
|
852
|
-
useImperativeHandle(editorPropsProviderRef, () => {
|
|
853
|
-
return {
|
|
854
|
-
getProps: () => props,
|
|
855
|
-
setProps
|
|
856
|
-
};
|
|
857
|
-
}, [props]);
|
|
858
830
|
const ctx = useMemo3(() => {
|
|
859
|
-
return { props, updateProps
|
|
860
|
-
}, [props,
|
|
831
|
+
return { props, updateProps };
|
|
832
|
+
}, [props, updateProps]);
|
|
861
833
|
return /* @__PURE__ */ jsx4(EditorPropsContext.Provider, {
|
|
862
834
|
value: ctx,
|
|
863
835
|
children
|
|
@@ -928,7 +900,6 @@ var resolveCompositionsRef = createRef();
|
|
|
928
900
|
var needsResolution = (composition) => {
|
|
929
901
|
return Boolean(composition.calculateMetadata);
|
|
930
902
|
};
|
|
931
|
-
var PROPS_UPDATED_EXTERNALLY = "remotion.propsUpdatedExternally";
|
|
932
903
|
var useResolvedVideoConfig = (preferredCompositionId) => {
|
|
933
904
|
const context = useContext5(ResolveCompositionContext);
|
|
934
905
|
const { props: allEditorProps } = useContext5(EditorPropsContext);
|
|
@@ -1671,14 +1642,14 @@ var Sequence = forwardRef2(SequenceRefForwardingFunction);
|
|
|
1671
1642
|
import {
|
|
1672
1643
|
forwardRef as forwardRef3,
|
|
1673
1644
|
useEffect as useEffect2,
|
|
1674
|
-
useImperativeHandle as
|
|
1645
|
+
useImperativeHandle as useImperativeHandle2,
|
|
1675
1646
|
useLayoutEffect as useLayoutEffect2,
|
|
1676
1647
|
useRef as useRef5,
|
|
1677
1648
|
useState as useState5
|
|
1678
1649
|
} from "react";
|
|
1679
1650
|
|
|
1680
1651
|
// src/animated-image/canvas.tsx
|
|
1681
|
-
import React10, { useCallback as useCallback5, useImperativeHandle
|
|
1652
|
+
import React10, { useCallback as useCallback5, useImperativeHandle, useRef as useRef4 } from "react";
|
|
1682
1653
|
import { jsx as jsx9 } from "react/jsx-runtime";
|
|
1683
1654
|
var calcArgs = (fit, frameSize, canvasSize) => {
|
|
1684
1655
|
switch (fit) {
|
|
@@ -1751,7 +1722,7 @@ var CanvasRefForwardingFunction = ({ width, height, fit, className, style }, ref
|
|
|
1751
1722
|
height: canvasHeight
|
|
1752
1723
|
}));
|
|
1753
1724
|
}, [fit, height, width]);
|
|
1754
|
-
|
|
1725
|
+
useImperativeHandle(ref, () => {
|
|
1755
1726
|
return {
|
|
1756
1727
|
draw,
|
|
1757
1728
|
getCanvas: () => {
|
|
@@ -1957,7 +1928,7 @@ var AnimatedImage = forwardRef3(({
|
|
|
1957
1928
|
const currentTimeRef = useRef5(currentTime);
|
|
1958
1929
|
currentTimeRef.current = currentTime;
|
|
1959
1930
|
const ref = useRef5(null);
|
|
1960
|
-
|
|
1931
|
+
useImperativeHandle2(canvasRef, () => {
|
|
1961
1932
|
const c = ref.current?.getCanvas();
|
|
1962
1933
|
if (!c) {
|
|
1963
1934
|
throw new Error("Canvas ref is not set");
|
|
@@ -2043,7 +2014,7 @@ import { useContext as useContext14, useLayoutEffect as useLayoutEffect4, useSta
|
|
|
2043
2014
|
import {
|
|
2044
2015
|
createContext as createContext13,
|
|
2045
2016
|
useCallback as useCallback6,
|
|
2046
|
-
useImperativeHandle as
|
|
2017
|
+
useImperativeHandle as useImperativeHandle3,
|
|
2047
2018
|
useLayoutEffect as useLayoutEffect3,
|
|
2048
2019
|
useMemo as useMemo12,
|
|
2049
2020
|
useRef as useRef6,
|
|
@@ -2101,7 +2072,7 @@ var RenderAssetManagerProvider = ({ children, collectAssets }) => {
|
|
|
2101
2072
|
setRenderAssets(renderAssetsRef.current);
|
|
2102
2073
|
}, []);
|
|
2103
2074
|
if (collectAssets) {
|
|
2104
|
-
|
|
2075
|
+
useImperativeHandle3(collectAssets, () => {
|
|
2105
2076
|
return {
|
|
2106
2077
|
collectAssets: () => {
|
|
2107
2078
|
const assets = renderAssetsRef.current;
|
|
@@ -2661,7 +2632,7 @@ import React17, {
|
|
|
2661
2632
|
forwardRef as forwardRef4,
|
|
2662
2633
|
useContext as useContext24,
|
|
2663
2634
|
useEffect as useEffect10,
|
|
2664
|
-
useImperativeHandle as
|
|
2635
|
+
useImperativeHandle as useImperativeHandle4,
|
|
2665
2636
|
useMemo as useMemo22,
|
|
2666
2637
|
useRef as useRef14,
|
|
2667
2638
|
useState as useState13
|
|
@@ -4680,7 +4651,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
|
|
|
4680
4651
|
});
|
|
4681
4652
|
};
|
|
4682
4653
|
}, [cleanupOnMediaTagUnmount]);
|
|
4683
|
-
|
|
4654
|
+
useImperativeHandle4(ref, () => {
|
|
4684
4655
|
return audioRef.current;
|
|
4685
4656
|
}, [audioRef]);
|
|
4686
4657
|
const currentOnDurationCallback = useRef14(onDuration);
|
|
@@ -4719,7 +4690,7 @@ import {
|
|
|
4719
4690
|
forwardRef as forwardRef5,
|
|
4720
4691
|
useContext as useContext25,
|
|
4721
4692
|
useEffect as useEffect11,
|
|
4722
|
-
useImperativeHandle as
|
|
4693
|
+
useImperativeHandle as useImperativeHandle5,
|
|
4723
4694
|
useLayoutEffect as useLayoutEffect8,
|
|
4724
4695
|
useMemo as useMemo23,
|
|
4725
4696
|
useRef as useRef15
|
|
@@ -4763,7 +4734,7 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
|
|
|
4763
4734
|
mediaVolume: 1
|
|
4764
4735
|
});
|
|
4765
4736
|
warnAboutTooHighVolume(volume);
|
|
4766
|
-
|
|
4737
|
+
useImperativeHandle5(ref, () => {
|
|
4767
4738
|
return audioRef.current;
|
|
4768
4739
|
}, []);
|
|
4769
4740
|
useEffect11(() => {
|
|
@@ -5264,13 +5235,6 @@ var InnerComposition = ({
|
|
|
5264
5235
|
registerComposition,
|
|
5265
5236
|
unregisterComposition
|
|
5266
5237
|
]);
|
|
5267
|
-
useEffect13(() => {
|
|
5268
|
-
window.dispatchEvent(new CustomEvent(PROPS_UPDATED_EXTERNALLY, {
|
|
5269
|
-
detail: {
|
|
5270
|
-
resetUnsaved: id
|
|
5271
|
-
}
|
|
5272
|
-
}));
|
|
5273
|
-
}, [defaultProps, id]);
|
|
5274
5238
|
const resolved = useResolvedVideoConfig(id);
|
|
5275
5239
|
if (environment.isStudio && video && video.component === lazy && video.id === id) {
|
|
5276
5240
|
const Comp = lazy;
|
|
@@ -5562,7 +5526,7 @@ import {
|
|
|
5562
5526
|
forwardRef as forwardRef8,
|
|
5563
5527
|
useCallback as useCallback13,
|
|
5564
5528
|
useContext as useContext29,
|
|
5565
|
-
useImperativeHandle as
|
|
5529
|
+
useImperativeHandle as useImperativeHandle6,
|
|
5566
5530
|
useLayoutEffect as useLayoutEffect9,
|
|
5567
5531
|
useRef as useRef17
|
|
5568
5532
|
} from "react";
|
|
@@ -5592,7 +5556,7 @@ var ImgRefForwarding = ({
|
|
|
5592
5556
|
if (!_propsValid) {
|
|
5593
5557
|
throw new Error("typecheck error");
|
|
5594
5558
|
}
|
|
5595
|
-
|
|
5559
|
+
useImperativeHandle6(ref, () => {
|
|
5596
5560
|
return imageRef.current;
|
|
5597
5561
|
}, []);
|
|
5598
5562
|
const actualSrc = usePreload(src);
|
|
@@ -5727,7 +5691,7 @@ var compositionsRef = React24.createRef();
|
|
|
5727
5691
|
// src/CompositionManagerProvider.tsx
|
|
5728
5692
|
import {
|
|
5729
5693
|
useCallback as useCallback14,
|
|
5730
|
-
useImperativeHandle as
|
|
5694
|
+
useImperativeHandle as useImperativeHandle7,
|
|
5731
5695
|
useMemo as useMemo26,
|
|
5732
5696
|
useRef as useRef18,
|
|
5733
5697
|
useState as useState15
|
|
@@ -5781,25 +5745,11 @@ var CompositionManagerProvider = ({
|
|
|
5781
5745
|
return prevFolders.filter((p) => !(p.name === name && p.parent === parent));
|
|
5782
5746
|
});
|
|
5783
5747
|
}, []);
|
|
5784
|
-
|
|
5748
|
+
useImperativeHandle7(compositionsRef, () => {
|
|
5785
5749
|
return {
|
|
5786
5750
|
getCompositions: () => currentcompositionsRef.current
|
|
5787
5751
|
};
|
|
5788
5752
|
}, []);
|
|
5789
|
-
const updateCompositionDefaultProps = useCallback14((id, newDefaultProps) => {
|
|
5790
|
-
setCompositions((comps) => {
|
|
5791
|
-
const updated = comps.map((c2) => {
|
|
5792
|
-
if (c2.id === id) {
|
|
5793
|
-
return {
|
|
5794
|
-
...c2,
|
|
5795
|
-
defaultProps: newDefaultProps
|
|
5796
|
-
};
|
|
5797
|
-
}
|
|
5798
|
-
return c2;
|
|
5799
|
-
});
|
|
5800
|
-
return updated;
|
|
5801
|
-
});
|
|
5802
|
-
}, []);
|
|
5803
5753
|
const compositionManagerSetters = useMemo26(() => {
|
|
5804
5754
|
return {
|
|
5805
5755
|
registerComposition,
|
|
@@ -5807,7 +5757,6 @@ var CompositionManagerProvider = ({
|
|
|
5807
5757
|
registerFolder,
|
|
5808
5758
|
unregisterFolder,
|
|
5809
5759
|
setCanvasContent,
|
|
5810
|
-
updateCompositionDefaultProps,
|
|
5811
5760
|
onlyRenderComposition
|
|
5812
5761
|
};
|
|
5813
5762
|
}, [
|
|
@@ -5815,7 +5764,6 @@ var CompositionManagerProvider = ({
|
|
|
5815
5764
|
registerFolder,
|
|
5816
5765
|
unregisterComposition,
|
|
5817
5766
|
unregisterFolder,
|
|
5818
|
-
updateCompositionDefaultProps,
|
|
5819
5767
|
onlyRenderComposition
|
|
5820
5768
|
]);
|
|
5821
5769
|
const compositionManagerContextValue = useMemo26(() => {
|
|
@@ -6354,7 +6302,7 @@ var useSchema = (schema, currentValue) => {
|
|
|
6354
6302
|
const overrideValues = overrides[overrideId] ?? {};
|
|
6355
6303
|
const propStatus = codeValues[overrideId];
|
|
6356
6304
|
const currentValueKeys = Object.keys(currentValue);
|
|
6357
|
-
const keysToUpdate = new Set(currentValueKeys)
|
|
6305
|
+
const keysToUpdate = [...new Set(currentValueKeys)];
|
|
6358
6306
|
const merged = {};
|
|
6359
6307
|
for (const key of keysToUpdate) {
|
|
6360
6308
|
const codeValueStatus = propStatus?.[key] ?? null;
|
|
@@ -6624,7 +6572,7 @@ import React30, {
|
|
|
6624
6572
|
forwardRef as forwardRef9,
|
|
6625
6573
|
useContext as useContext34,
|
|
6626
6574
|
useEffect as useEffect16,
|
|
6627
|
-
useImperativeHandle as
|
|
6575
|
+
useImperativeHandle as useImperativeHandle8,
|
|
6628
6576
|
useMemo as useMemo31,
|
|
6629
6577
|
useRef as useRef19,
|
|
6630
6578
|
useState as useState18
|
|
@@ -6785,7 +6733,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
|
|
|
6785
6733
|
duration,
|
|
6786
6734
|
fps
|
|
6787
6735
|
});
|
|
6788
|
-
|
|
6736
|
+
useImperativeHandle8(ref, () => {
|
|
6789
6737
|
return videoRef.current;
|
|
6790
6738
|
}, []);
|
|
6791
6739
|
useState18(() => playbackLogging({
|
|
@@ -7306,8 +7254,6 @@ var Internals = {
|
|
|
7306
7254
|
CurrentScaleContext,
|
|
7307
7255
|
PreviewSizeContext,
|
|
7308
7256
|
calculateScale,
|
|
7309
|
-
editorPropsProviderRef,
|
|
7310
|
-
PROPS_UPDATED_EXTERNALLY,
|
|
7311
7257
|
validateRenderAsset,
|
|
7312
7258
|
Log,
|
|
7313
7259
|
LogLevelContext,
|
|
@@ -7339,6 +7285,10 @@ var PERCENTAGE = NUMBER + "%";
|
|
|
7339
7285
|
function call(...args) {
|
|
7340
7286
|
return "\\(\\s*(" + args.join(")\\s*,\\s*(") + ")\\s*\\)";
|
|
7341
7287
|
}
|
|
7288
|
+
var MODERN_VALUE = "(?:none|[-+]?\\d*\\.?\\d+(?:%|deg|rad|grad|turn)?)";
|
|
7289
|
+
function modernColorCall(name) {
|
|
7290
|
+
return new RegExp(name + "\\(\\s*(" + MODERN_VALUE + ")\\s+(" + MODERN_VALUE + ")\\s+(" + MODERN_VALUE + ")(?:\\s*\\/\\s*(" + MODERN_VALUE + "))?\\s*\\)");
|
|
7291
|
+
}
|
|
7342
7292
|
function getMatchers() {
|
|
7343
7293
|
const cachedMatchers = {
|
|
7344
7294
|
rgb: undefined,
|
|
@@ -7349,7 +7299,12 @@ function getMatchers() {
|
|
|
7349
7299
|
hex4: undefined,
|
|
7350
7300
|
hex5: undefined,
|
|
7351
7301
|
hex6: undefined,
|
|
7352
|
-
hex8: undefined
|
|
7302
|
+
hex8: undefined,
|
|
7303
|
+
oklch: undefined,
|
|
7304
|
+
oklab: undefined,
|
|
7305
|
+
lab: undefined,
|
|
7306
|
+
lch: undefined,
|
|
7307
|
+
hwb: undefined
|
|
7353
7308
|
};
|
|
7354
7309
|
if (cachedMatchers.rgb === undefined) {
|
|
7355
7310
|
cachedMatchers.rgb = new RegExp("rgb" + call(NUMBER, NUMBER, NUMBER));
|
|
@@ -7360,6 +7315,11 @@ function getMatchers() {
|
|
|
7360
7315
|
cachedMatchers.hex4 = /^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/;
|
|
7361
7316
|
cachedMatchers.hex6 = /^#([0-9a-fA-F]{6})$/;
|
|
7362
7317
|
cachedMatchers.hex8 = /^#([0-9a-fA-F]{8})$/;
|
|
7318
|
+
cachedMatchers.oklch = modernColorCall("oklch");
|
|
7319
|
+
cachedMatchers.oklab = modernColorCall("oklab");
|
|
7320
|
+
cachedMatchers.lab = modernColorCall("lab");
|
|
7321
|
+
cachedMatchers.lch = modernColorCall("lch");
|
|
7322
|
+
cachedMatchers.hwb = modernColorCall("hwb");
|
|
7363
7323
|
}
|
|
7364
7324
|
return cachedMatchers;
|
|
7365
7325
|
}
|
|
@@ -7423,6 +7383,96 @@ function parsePercentage(str) {
|
|
|
7423
7383
|
}
|
|
7424
7384
|
return int / 100;
|
|
7425
7385
|
}
|
|
7386
|
+
function parseModernComponent(str, percentScale) {
|
|
7387
|
+
if (str === "none")
|
|
7388
|
+
return 0;
|
|
7389
|
+
if (str.endsWith("%")) {
|
|
7390
|
+
return Number.parseFloat(str) / 100 * percentScale;
|
|
7391
|
+
}
|
|
7392
|
+
return Number.parseFloat(str);
|
|
7393
|
+
}
|
|
7394
|
+
function parseHueAngle(str) {
|
|
7395
|
+
if (str === "none")
|
|
7396
|
+
return 0;
|
|
7397
|
+
if (str.endsWith("rad")) {
|
|
7398
|
+
return Number.parseFloat(str) * 180 / Math.PI;
|
|
7399
|
+
}
|
|
7400
|
+
if (str.endsWith("grad"))
|
|
7401
|
+
return Number.parseFloat(str) * 0.9;
|
|
7402
|
+
if (str.endsWith("turn"))
|
|
7403
|
+
return Number.parseFloat(str) * 360;
|
|
7404
|
+
return Number.parseFloat(str);
|
|
7405
|
+
}
|
|
7406
|
+
function parseModernAlpha(str) {
|
|
7407
|
+
if (str === undefined || str === "none")
|
|
7408
|
+
return 1;
|
|
7409
|
+
if (str.endsWith("%")) {
|
|
7410
|
+
return Math.max(0, Math.min(1, Number.parseFloat(str) / 100));
|
|
7411
|
+
}
|
|
7412
|
+
return Math.max(0, Math.min(1, Number.parseFloat(str)));
|
|
7413
|
+
}
|
|
7414
|
+
function linearToSrgb(c2) {
|
|
7415
|
+
if (c2 <= 0.0031308)
|
|
7416
|
+
return 12.92 * c2;
|
|
7417
|
+
return 1.055 * c2 ** (1 / 2.4) - 0.055;
|
|
7418
|
+
}
|
|
7419
|
+
function clamp01(v) {
|
|
7420
|
+
return Math.max(0, Math.min(1, v));
|
|
7421
|
+
}
|
|
7422
|
+
function rgbFloatToInt(r, g, b2, alpha) {
|
|
7423
|
+
const ri = Math.round(clamp01(r) * 255);
|
|
7424
|
+
const gi = Math.round(clamp01(g) * 255);
|
|
7425
|
+
const bi = Math.round(clamp01(b2) * 255);
|
|
7426
|
+
const ai = Math.round(clamp01(alpha) * 255);
|
|
7427
|
+
return (ri << 24 | gi << 16 | bi << 8 | ai) >>> 0;
|
|
7428
|
+
}
|
|
7429
|
+
function oklabToSrgb(L, a2, b2) {
|
|
7430
|
+
const l_ = L + 0.3963377774 * a2 + 0.2158037573 * b2;
|
|
7431
|
+
const m_ = L - 0.1055613458 * a2 - 0.0638541728 * b2;
|
|
7432
|
+
const s_ = L - 0.0894841775 * a2 - 1.291485548 * b2;
|
|
7433
|
+
const l = l_ * l_ * l_;
|
|
7434
|
+
const m = m_ * m_ * m_;
|
|
7435
|
+
const s = s_ * s_ * s_;
|
|
7436
|
+
const rLin = 4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s;
|
|
7437
|
+
const gLin = -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s;
|
|
7438
|
+
const bLin = -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s;
|
|
7439
|
+
return [linearToSrgb(rLin), linearToSrgb(gLin), linearToSrgb(bLin)];
|
|
7440
|
+
}
|
|
7441
|
+
function labToSrgb(L, a2, b2) {
|
|
7442
|
+
const epsilon = 216 / 24389;
|
|
7443
|
+
const kappa = 24389 / 27;
|
|
7444
|
+
const Xn = 0.95047;
|
|
7445
|
+
const Yn = 1;
|
|
7446
|
+
const Zn = 1.08883;
|
|
7447
|
+
const fy = (L + 16) / 116;
|
|
7448
|
+
const fx = a2 / 500 + fy;
|
|
7449
|
+
const fz = fy - b2 / 200;
|
|
7450
|
+
const fx3 = fx * fx * fx;
|
|
7451
|
+
const fz3 = fz * fz * fz;
|
|
7452
|
+
const xr = fx3 > epsilon ? fx3 : (116 * fx - 16) / kappa;
|
|
7453
|
+
const yr = L > kappa * epsilon ? ((L + 16) / 116) ** 3 : L / kappa;
|
|
7454
|
+
const zr = fz3 > epsilon ? fz3 : (116 * fz - 16) / kappa;
|
|
7455
|
+
const X = xr * Xn;
|
|
7456
|
+
const Y = yr * Yn;
|
|
7457
|
+
const Z = zr * Zn;
|
|
7458
|
+
const rLin = 3.2404542 * X - 1.5371385 * Y - 0.4985314 * Z;
|
|
7459
|
+
const gLin = -0.969266 * X + 1.8760108 * Y + 0.041556 * Z;
|
|
7460
|
+
const bLin = 0.0556434 * X - 0.2040259 * Y + 1.0572252 * Z;
|
|
7461
|
+
return [linearToSrgb(rLin), linearToSrgb(gLin), linearToSrgb(bLin)];
|
|
7462
|
+
}
|
|
7463
|
+
function hwbToSrgb(h, w, bk) {
|
|
7464
|
+
if (w + bk >= 1) {
|
|
7465
|
+
const gray = w / (w + bk);
|
|
7466
|
+
return [gray, gray, gray];
|
|
7467
|
+
}
|
|
7468
|
+
const q = 1;
|
|
7469
|
+
const p = 0;
|
|
7470
|
+
const r = hue2rgb(p, q, h + 1 / 3);
|
|
7471
|
+
const g = hue2rgb(p, q, h);
|
|
7472
|
+
const bl = hue2rgb(p, q, h - 1 / 3);
|
|
7473
|
+
const factor = 1 - w - bk;
|
|
7474
|
+
return [r * factor + w, g * factor + w, bl * factor + w];
|
|
7475
|
+
}
|
|
7426
7476
|
var colorNames = {
|
|
7427
7477
|
transparent: 0,
|
|
7428
7478
|
aliceblue: 4042850303,
|
|
@@ -7621,6 +7671,58 @@ function normalizeColor(color) {
|
|
|
7621
7671
|
return (hslToRgb(parse360(match[1]), parsePercentage(match[2]), parsePercentage(match[3])) | parse1(match[4])) >>> 0;
|
|
7622
7672
|
}
|
|
7623
7673
|
}
|
|
7674
|
+
if (matchers.oklch) {
|
|
7675
|
+
if (match = matchers.oklch.exec(color)) {
|
|
7676
|
+
const L = parseModernComponent(match[1], 1);
|
|
7677
|
+
const C = parseModernComponent(match[2], 0.4);
|
|
7678
|
+
const H = parseHueAngle(match[3]);
|
|
7679
|
+
const alpha = parseModernAlpha(match[4]);
|
|
7680
|
+
const hRad = H * Math.PI / 180;
|
|
7681
|
+
const [r, g, b2] = oklabToSrgb(L, C * Math.cos(hRad), C * Math.sin(hRad));
|
|
7682
|
+
return rgbFloatToInt(r, g, b2, alpha);
|
|
7683
|
+
}
|
|
7684
|
+
}
|
|
7685
|
+
if (matchers.oklab) {
|
|
7686
|
+
if (match = matchers.oklab.exec(color)) {
|
|
7687
|
+
const L = parseModernComponent(match[1], 1);
|
|
7688
|
+
const a2 = parseModernComponent(match[2], 0.4);
|
|
7689
|
+
const b2 = parseModernComponent(match[3], 0.4);
|
|
7690
|
+
const alpha = parseModernAlpha(match[4]);
|
|
7691
|
+
const [r, g, bl] = oklabToSrgb(L, a2, b2);
|
|
7692
|
+
return rgbFloatToInt(r, g, bl, alpha);
|
|
7693
|
+
}
|
|
7694
|
+
}
|
|
7695
|
+
if (matchers.lab) {
|
|
7696
|
+
if (match = matchers.lab.exec(color)) {
|
|
7697
|
+
const L = parseModernComponent(match[1], 100);
|
|
7698
|
+
const a2 = parseModernComponent(match[2], 125);
|
|
7699
|
+
const b2 = parseModernComponent(match[3], 125);
|
|
7700
|
+
const alpha = parseModernAlpha(match[4]);
|
|
7701
|
+
const [r, g, bl] = labToSrgb(L, a2, b2);
|
|
7702
|
+
return rgbFloatToInt(r, g, bl, alpha);
|
|
7703
|
+
}
|
|
7704
|
+
}
|
|
7705
|
+
if (matchers.lch) {
|
|
7706
|
+
if (match = matchers.lch.exec(color)) {
|
|
7707
|
+
const L = parseModernComponent(match[1], 100);
|
|
7708
|
+
const C = parseModernComponent(match[2], 150);
|
|
7709
|
+
const H = parseHueAngle(match[3]);
|
|
7710
|
+
const alpha = parseModernAlpha(match[4]);
|
|
7711
|
+
const hRad = H * Math.PI / 180;
|
|
7712
|
+
const [r, g, bl] = labToSrgb(L, C * Math.cos(hRad), C * Math.sin(hRad));
|
|
7713
|
+
return rgbFloatToInt(r, g, bl, alpha);
|
|
7714
|
+
}
|
|
7715
|
+
}
|
|
7716
|
+
if (matchers.hwb) {
|
|
7717
|
+
if (match = matchers.hwb.exec(color)) {
|
|
7718
|
+
const H = parseHueAngle(match[1]);
|
|
7719
|
+
const W = parseModernComponent(match[2], 1);
|
|
7720
|
+
const B = parseModernComponent(match[3], 1);
|
|
7721
|
+
const alpha = parseModernAlpha(match[4]);
|
|
7722
|
+
const [r, g, bl] = hwbToSrgb(H / 360, W, B);
|
|
7723
|
+
return rgbFloatToInt(r, g, bl, alpha);
|
|
7724
|
+
}
|
|
7725
|
+
}
|
|
7624
7726
|
throw new Error(`invalid color string ${color} provided`);
|
|
7625
7727
|
}
|
|
7626
7728
|
var opacity = (c2) => {
|
|
@@ -8161,7 +8263,7 @@ import {
|
|
|
8161
8263
|
forwardRef as forwardRef12,
|
|
8162
8264
|
useContext as useContext35,
|
|
8163
8265
|
useEffect as useEffect17,
|
|
8164
|
-
useImperativeHandle as
|
|
8266
|
+
useImperativeHandle as useImperativeHandle9,
|
|
8165
8267
|
useLayoutEffect as useLayoutEffect11,
|
|
8166
8268
|
useMemo as useMemo35,
|
|
8167
8269
|
useRef as useRef20
|
|
@@ -8376,7 +8478,7 @@ var VideoForRenderingForwardFunction = ({
|
|
|
8376
8478
|
sequenceContext?.relativeFrom,
|
|
8377
8479
|
audioStreamIndex
|
|
8378
8480
|
]);
|
|
8379
|
-
|
|
8481
|
+
useImperativeHandle9(ref, () => {
|
|
8380
8482
|
return videoRef.current;
|
|
8381
8483
|
}, []);
|
|
8382
8484
|
useEffect17(() => {
|
package/dist/esm/no-react.mjs
CHANGED
|
@@ -205,6 +205,10 @@ var PERCENTAGE = NUMBER + "%";
|
|
|
205
205
|
function call(...args) {
|
|
206
206
|
return "\\(\\s*(" + args.join(")\\s*,\\s*(") + ")\\s*\\)";
|
|
207
207
|
}
|
|
208
|
+
var MODERN_VALUE = "(?:none|[-+]?\\d*\\.?\\d+(?:%|deg|rad|grad|turn)?)";
|
|
209
|
+
function modernColorCall(name) {
|
|
210
|
+
return new RegExp(name + "\\(\\s*(" + MODERN_VALUE + ")\\s+(" + MODERN_VALUE + ")\\s+(" + MODERN_VALUE + ")(?:\\s*\\/\\s*(" + MODERN_VALUE + "))?\\s*\\)");
|
|
211
|
+
}
|
|
208
212
|
function getMatchers() {
|
|
209
213
|
const cachedMatchers = {
|
|
210
214
|
rgb: undefined,
|
|
@@ -215,7 +219,12 @@ function getMatchers() {
|
|
|
215
219
|
hex4: undefined,
|
|
216
220
|
hex5: undefined,
|
|
217
221
|
hex6: undefined,
|
|
218
|
-
hex8: undefined
|
|
222
|
+
hex8: undefined,
|
|
223
|
+
oklch: undefined,
|
|
224
|
+
oklab: undefined,
|
|
225
|
+
lab: undefined,
|
|
226
|
+
lch: undefined,
|
|
227
|
+
hwb: undefined
|
|
219
228
|
};
|
|
220
229
|
if (cachedMatchers.rgb === undefined) {
|
|
221
230
|
cachedMatchers.rgb = new RegExp("rgb" + call(NUMBER, NUMBER, NUMBER));
|
|
@@ -226,6 +235,11 @@ function getMatchers() {
|
|
|
226
235
|
cachedMatchers.hex4 = /^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/;
|
|
227
236
|
cachedMatchers.hex6 = /^#([0-9a-fA-F]{6})$/;
|
|
228
237
|
cachedMatchers.hex8 = /^#([0-9a-fA-F]{8})$/;
|
|
238
|
+
cachedMatchers.oklch = modernColorCall("oklch");
|
|
239
|
+
cachedMatchers.oklab = modernColorCall("oklab");
|
|
240
|
+
cachedMatchers.lab = modernColorCall("lab");
|
|
241
|
+
cachedMatchers.lch = modernColorCall("lch");
|
|
242
|
+
cachedMatchers.hwb = modernColorCall("hwb");
|
|
229
243
|
}
|
|
230
244
|
return cachedMatchers;
|
|
231
245
|
}
|
|
@@ -289,6 +303,96 @@ function parsePercentage(str) {
|
|
|
289
303
|
}
|
|
290
304
|
return int / 100;
|
|
291
305
|
}
|
|
306
|
+
function parseModernComponent(str, percentScale) {
|
|
307
|
+
if (str === "none")
|
|
308
|
+
return 0;
|
|
309
|
+
if (str.endsWith("%")) {
|
|
310
|
+
return Number.parseFloat(str) / 100 * percentScale;
|
|
311
|
+
}
|
|
312
|
+
return Number.parseFloat(str);
|
|
313
|
+
}
|
|
314
|
+
function parseHueAngle(str) {
|
|
315
|
+
if (str === "none")
|
|
316
|
+
return 0;
|
|
317
|
+
if (str.endsWith("rad")) {
|
|
318
|
+
return Number.parseFloat(str) * 180 / Math.PI;
|
|
319
|
+
}
|
|
320
|
+
if (str.endsWith("grad"))
|
|
321
|
+
return Number.parseFloat(str) * 0.9;
|
|
322
|
+
if (str.endsWith("turn"))
|
|
323
|
+
return Number.parseFloat(str) * 360;
|
|
324
|
+
return Number.parseFloat(str);
|
|
325
|
+
}
|
|
326
|
+
function parseModernAlpha(str) {
|
|
327
|
+
if (str === undefined || str === "none")
|
|
328
|
+
return 1;
|
|
329
|
+
if (str.endsWith("%")) {
|
|
330
|
+
return Math.max(0, Math.min(1, Number.parseFloat(str) / 100));
|
|
331
|
+
}
|
|
332
|
+
return Math.max(0, Math.min(1, Number.parseFloat(str)));
|
|
333
|
+
}
|
|
334
|
+
function linearToSrgb(c) {
|
|
335
|
+
if (c <= 0.0031308)
|
|
336
|
+
return 12.92 * c;
|
|
337
|
+
return 1.055 * c ** (1 / 2.4) - 0.055;
|
|
338
|
+
}
|
|
339
|
+
function clamp01(v) {
|
|
340
|
+
return Math.max(0, Math.min(1, v));
|
|
341
|
+
}
|
|
342
|
+
function rgbFloatToInt(r, g, b, alpha) {
|
|
343
|
+
const ri = Math.round(clamp01(r) * 255);
|
|
344
|
+
const gi = Math.round(clamp01(g) * 255);
|
|
345
|
+
const bi = Math.round(clamp01(b) * 255);
|
|
346
|
+
const ai = Math.round(clamp01(alpha) * 255);
|
|
347
|
+
return (ri << 24 | gi << 16 | bi << 8 | ai) >>> 0;
|
|
348
|
+
}
|
|
349
|
+
function oklabToSrgb(L, a, b) {
|
|
350
|
+
const l_ = L + 0.3963377774 * a + 0.2158037573 * b;
|
|
351
|
+
const m_ = L - 0.1055613458 * a - 0.0638541728 * b;
|
|
352
|
+
const s_ = L - 0.0894841775 * a - 1.291485548 * b;
|
|
353
|
+
const l = l_ * l_ * l_;
|
|
354
|
+
const m = m_ * m_ * m_;
|
|
355
|
+
const s = s_ * s_ * s_;
|
|
356
|
+
const rLin = 4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s;
|
|
357
|
+
const gLin = -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s;
|
|
358
|
+
const bLin = -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s;
|
|
359
|
+
return [linearToSrgb(rLin), linearToSrgb(gLin), linearToSrgb(bLin)];
|
|
360
|
+
}
|
|
361
|
+
function labToSrgb(L, a, b) {
|
|
362
|
+
const epsilon = 216 / 24389;
|
|
363
|
+
const kappa = 24389 / 27;
|
|
364
|
+
const Xn = 0.95047;
|
|
365
|
+
const Yn = 1;
|
|
366
|
+
const Zn = 1.08883;
|
|
367
|
+
const fy = (L + 16) / 116;
|
|
368
|
+
const fx = a / 500 + fy;
|
|
369
|
+
const fz = fy - b / 200;
|
|
370
|
+
const fx3 = fx * fx * fx;
|
|
371
|
+
const fz3 = fz * fz * fz;
|
|
372
|
+
const xr = fx3 > epsilon ? fx3 : (116 * fx - 16) / kappa;
|
|
373
|
+
const yr = L > kappa * epsilon ? ((L + 16) / 116) ** 3 : L / kappa;
|
|
374
|
+
const zr = fz3 > epsilon ? fz3 : (116 * fz - 16) / kappa;
|
|
375
|
+
const X = xr * Xn;
|
|
376
|
+
const Y = yr * Yn;
|
|
377
|
+
const Z = zr * Zn;
|
|
378
|
+
const rLin = 3.2404542 * X - 1.5371385 * Y - 0.4985314 * Z;
|
|
379
|
+
const gLin = -0.969266 * X + 1.8760108 * Y + 0.041556 * Z;
|
|
380
|
+
const bLin = 0.0556434 * X - 0.2040259 * Y + 1.0572252 * Z;
|
|
381
|
+
return [linearToSrgb(rLin), linearToSrgb(gLin), linearToSrgb(bLin)];
|
|
382
|
+
}
|
|
383
|
+
function hwbToSrgb(h, w, bk) {
|
|
384
|
+
if (w + bk >= 1) {
|
|
385
|
+
const gray = w / (w + bk);
|
|
386
|
+
return [gray, gray, gray];
|
|
387
|
+
}
|
|
388
|
+
const q = 1;
|
|
389
|
+
const p = 0;
|
|
390
|
+
const r = hue2rgb(p, q, h + 1 / 3);
|
|
391
|
+
const g = hue2rgb(p, q, h);
|
|
392
|
+
const bl = hue2rgb(p, q, h - 1 / 3);
|
|
393
|
+
const factor = 1 - w - bk;
|
|
394
|
+
return [r * factor + w, g * factor + w, bl * factor + w];
|
|
395
|
+
}
|
|
292
396
|
var colorNames = {
|
|
293
397
|
transparent: 0,
|
|
294
398
|
aliceblue: 4042850303,
|
|
@@ -487,6 +591,58 @@ function normalizeColor(color) {
|
|
|
487
591
|
return (hslToRgb(parse360(match[1]), parsePercentage(match[2]), parsePercentage(match[3])) | parse1(match[4])) >>> 0;
|
|
488
592
|
}
|
|
489
593
|
}
|
|
594
|
+
if (matchers.oklch) {
|
|
595
|
+
if (match = matchers.oklch.exec(color)) {
|
|
596
|
+
const L = parseModernComponent(match[1], 1);
|
|
597
|
+
const C = parseModernComponent(match[2], 0.4);
|
|
598
|
+
const H = parseHueAngle(match[3]);
|
|
599
|
+
const alpha = parseModernAlpha(match[4]);
|
|
600
|
+
const hRad = H * Math.PI / 180;
|
|
601
|
+
const [r, g, b] = oklabToSrgb(L, C * Math.cos(hRad), C * Math.sin(hRad));
|
|
602
|
+
return rgbFloatToInt(r, g, b, alpha);
|
|
603
|
+
}
|
|
604
|
+
}
|
|
605
|
+
if (matchers.oklab) {
|
|
606
|
+
if (match = matchers.oklab.exec(color)) {
|
|
607
|
+
const L = parseModernComponent(match[1], 1);
|
|
608
|
+
const a = parseModernComponent(match[2], 0.4);
|
|
609
|
+
const b = parseModernComponent(match[3], 0.4);
|
|
610
|
+
const alpha = parseModernAlpha(match[4]);
|
|
611
|
+
const [r, g, bl] = oklabToSrgb(L, a, b);
|
|
612
|
+
return rgbFloatToInt(r, g, bl, alpha);
|
|
613
|
+
}
|
|
614
|
+
}
|
|
615
|
+
if (matchers.lab) {
|
|
616
|
+
if (match = matchers.lab.exec(color)) {
|
|
617
|
+
const L = parseModernComponent(match[1], 100);
|
|
618
|
+
const a = parseModernComponent(match[2], 125);
|
|
619
|
+
const b = parseModernComponent(match[3], 125);
|
|
620
|
+
const alpha = parseModernAlpha(match[4]);
|
|
621
|
+
const [r, g, bl] = labToSrgb(L, a, b);
|
|
622
|
+
return rgbFloatToInt(r, g, bl, alpha);
|
|
623
|
+
}
|
|
624
|
+
}
|
|
625
|
+
if (matchers.lch) {
|
|
626
|
+
if (match = matchers.lch.exec(color)) {
|
|
627
|
+
const L = parseModernComponent(match[1], 100);
|
|
628
|
+
const C = parseModernComponent(match[2], 150);
|
|
629
|
+
const H = parseHueAngle(match[3]);
|
|
630
|
+
const alpha = parseModernAlpha(match[4]);
|
|
631
|
+
const hRad = H * Math.PI / 180;
|
|
632
|
+
const [r, g, bl] = labToSrgb(L, C * Math.cos(hRad), C * Math.sin(hRad));
|
|
633
|
+
return rgbFloatToInt(r, g, bl, alpha);
|
|
634
|
+
}
|
|
635
|
+
}
|
|
636
|
+
if (matchers.hwb) {
|
|
637
|
+
if (match = matchers.hwb.exec(color)) {
|
|
638
|
+
const H = parseHueAngle(match[1]);
|
|
639
|
+
const W = parseModernComponent(match[2], 1);
|
|
640
|
+
const B = parseModernComponent(match[3], 1);
|
|
641
|
+
const alpha = parseModernAlpha(match[4]);
|
|
642
|
+
const [r, g, bl] = hwbToSrgb(H / 360, W, B);
|
|
643
|
+
return rgbFloatToInt(r, g, bl, alpha);
|
|
644
|
+
}
|
|
645
|
+
}
|
|
490
646
|
throw new Error(`invalid color string ${color} provided`);
|
|
491
647
|
}
|
|
492
648
|
function processColor(color) {
|
package/dist/esm/version.mjs
CHANGED
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"url": "https://github.com/remotion-dev/remotion/tree/main/packages/core"
|
|
4
4
|
},
|
|
5
5
|
"name": "remotion",
|
|
6
|
-
"version": "4.0.
|
|
6
|
+
"version": "4.0.439",
|
|
7
7
|
"description": "Make videos programmatically",
|
|
8
8
|
"main": "dist/cjs/index.js",
|
|
9
9
|
"types": "dist/cjs/index.d.ts",
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
"react-dom": "19.2.3",
|
|
36
36
|
"webpack": "5.105.0",
|
|
37
37
|
"zod": "4.3.6",
|
|
38
|
-
"@remotion/eslint-config-internal": "4.0.
|
|
38
|
+
"@remotion/eslint-config-internal": "4.0.439",
|
|
39
39
|
"eslint": "9.19.0",
|
|
40
40
|
"@typescript/native-preview": "7.0.0-dev.20260217.1"
|
|
41
41
|
},
|