@remotion/studio 4.0.291 → 4.0.293
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/.turbo/turbo-make.log +2 -2
- package/dist/api/get-zod-schema-from-primitive.js +6 -1
- package/dist/api/save-default-props.js +13 -1
- package/dist/api/update-default-props.js +1 -1
- package/dist/api/use-visual-control.js +1 -2
- package/dist/api/use-visual-controls.d.ts +7 -0
- package/dist/api/use-visual-controls.js +57 -0
- package/dist/api/visual-control.d.ts +2 -0
- package/dist/api/visual-control.js +11 -0
- package/dist/components/AskAiModal.d.ts +7 -0
- package/dist/components/AskAiModal.js +65 -0
- package/dist/components/Canvas.d.ts +0 -1
- package/dist/components/Canvas.js +2 -2
- package/dist/components/CanvasOrLoading.js +1 -1
- package/dist/components/EditorContexts.js +2 -1
- package/dist/components/GlobalKeybindings.js +14 -0
- package/dist/components/GlobalPropsEditorUpdateButton.js +6 -2
- package/dist/components/KeyboardShortcutsExplainer.js +1 -1
- package/dist/components/ModalContainer.d.ts +1 -0
- package/dist/components/ModalContainer.js +2 -2
- package/dist/components/ModalHeader.d.ts +1 -0
- package/dist/components/ModalHeader.js +2 -2
- package/dist/components/Modals.js +2 -1
- package/dist/components/OptionsPanel.d.ts +1 -1
- package/dist/components/OptionsPanel.js +12 -2
- package/dist/components/Preview.d.ts +0 -1
- package/dist/components/Preview.js +3 -5
- package/dist/components/QuickSwitcher/QuickSwitcherResult.js +1 -1
- package/dist/components/RenderModal/DataEditor.js +11 -4
- package/dist/components/RenderModal/RenderModalJSONPropsEditor.js +1 -1
- package/dist/components/RenderModal/SchemaEditor/Fieldset.d.ts +1 -0
- package/dist/components/RenderModal/SchemaEditor/Fieldset.js +5 -5
- package/dist/components/RenderModal/SchemaEditor/SchemaLabel.js +1 -1
- package/dist/components/RenderModal/SchemaEditor/ZodArrayEditor.js +1 -1
- package/dist/components/RenderModal/SchemaEditor/ZodArrayItemEditor.d.ts +1 -0
- package/dist/components/RenderModal/SchemaEditor/ZodArrayItemEditor.js +2 -2
- package/dist/components/RenderModal/SchemaEditor/ZodMatrixEditor.js +3 -6
- package/dist/components/RenderModal/SchemaEditor/ZodSwitch.js +6 -0
- package/dist/components/RenderModal/SchemaEditor/create-zod-values.js +9 -0
- package/dist/components/RenderModal/SchemaEditor/extract-enum-json-paths.d.ts +7 -2
- package/dist/components/RenderModal/SchemaEditor/extract-enum-json-paths.js +96 -22
- package/dist/components/RenderQueue/actions.d.ts +5 -1
- package/dist/components/RenderQueue/actions.js +12 -5
- package/dist/components/Tabs/index.js +3 -1
- package/dist/components/Timeline/TimelineStack/get-stack.d.ts +1 -1
- package/dist/components/Timeline/TimelineStack/get-stack.js +4 -2
- package/dist/components/Timeline/TimelineStack/index.js +2 -8
- package/dist/components/VisualControls/ClickableFileName.d.ts +12 -2
- package/dist/components/VisualControls/ClickableFileName.js +17 -13
- package/dist/components/VisualControls/VisualControlHandle.d.ts +0 -2
- package/dist/components/VisualControls/VisualControlHandle.js +69 -7
- package/dist/components/VisualControls/VisualControlHandleHeader.d.ts +4 -0
- package/dist/components/VisualControls/VisualControlHandleHeader.js +9 -0
- package/dist/components/VisualControls/VisualControlsContent.js +40 -16
- package/dist/components/VisualControls/get-original-stack-trace.d.ts +2 -2
- package/dist/components/VisualControls/get-original-stack-trace.js +10 -2
- package/dist/esm/index.mjs +153 -29
- package/dist/esm/internals.mjs +4430 -3644
- package/dist/esm/previewEntry.mjs +4520 -3734
- package/dist/esm/renderEntry.mjs +4545 -3721
- package/dist/helpers/get-location-of-sequence.d.ts +1 -0
- package/dist/helpers/get-location-of-sequence.js +18 -1
- package/dist/helpers/open-in-editor.d.ts +2 -0
- package/dist/helpers/open-in-editor.js +11 -1
- package/dist/helpers/retry-payload.js +3 -3
- package/dist/helpers/use-menu-structure.js +16 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +3 -1
- package/dist/renderEntry.js +5 -5
- package/dist/state/z-index.d.ts +1 -0
- package/dist/state/z-index.js +13 -5
- package/dist/visual-controls/VisualControls.d.ts +11 -18
- package/dist/visual-controls/VisualControls.js +69 -64
- package/dist/visual-controls/get-current-edited-value.d.ts +2 -3
- package/dist/visual-controls/get-current-edited-value.js +3 -3
- package/package.json +9 -9
- package/tsconfig.tsbuildinfo +1 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.getLocationOfSequence = void 0;
|
|
3
|
+
exports.getLocationOfFunctionCall = exports.getLocationOfSequence = void 0;
|
|
4
4
|
const parser_1 = require("../error-overlay/react-overlay/utils/parser");
|
|
5
5
|
const getLocationOfSequence = (stack) => {
|
|
6
6
|
if (!stack) {
|
|
@@ -19,3 +19,20 @@ const getLocationOfSequence = (stack) => {
|
|
|
19
19
|
return null;
|
|
20
20
|
};
|
|
21
21
|
exports.getLocationOfSequence = getLocationOfSequence;
|
|
22
|
+
const getLocationOfFunctionCall = (stack, functionName) => {
|
|
23
|
+
if (!stack) {
|
|
24
|
+
return null;
|
|
25
|
+
}
|
|
26
|
+
const parsed = (0, parser_1.parseStack)(stack.split('\n'));
|
|
27
|
+
let i = 0;
|
|
28
|
+
while (i < parsed.length) {
|
|
29
|
+
const frame = parsed[i];
|
|
30
|
+
if (frame.functionName !== functionName) {
|
|
31
|
+
i++;
|
|
32
|
+
continue;
|
|
33
|
+
}
|
|
34
|
+
return parsed[i + 1];
|
|
35
|
+
}
|
|
36
|
+
return null;
|
|
37
|
+
};
|
|
38
|
+
exports.getLocationOfFunctionCall = getLocationOfFunctionCall;
|
|
@@ -1,2 +1,4 @@
|
|
|
1
1
|
import type { SymbolicatedStackFrame } from '@remotion/studio-shared';
|
|
2
|
+
import type { OriginalPosition } from '../error-overlay/react-overlay/utils/get-source-map';
|
|
2
3
|
export declare const openInEditor: (stack: SymbolicatedStackFrame) => Promise<Response>;
|
|
4
|
+
export declare const openOriginalPositionInEditor: (originalPosition: OriginalPosition) => Promise<void>;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.openInEditor = void 0;
|
|
3
|
+
exports.openOriginalPositionInEditor = exports.openInEditor = void 0;
|
|
4
4
|
const openInEditor = (stack) => {
|
|
5
5
|
const { originalFileName, originalLineNumber, originalColumnNumber, originalFunctionName, originalScriptCode, } = stack;
|
|
6
6
|
return fetch(`/api/open-in-editor`, {
|
|
@@ -20,3 +20,13 @@ const openInEditor = (stack) => {
|
|
|
20
20
|
});
|
|
21
21
|
};
|
|
22
22
|
exports.openInEditor = openInEditor;
|
|
23
|
+
const openOriginalPositionInEditor = async (originalPosition) => {
|
|
24
|
+
await (0, exports.openInEditor)({
|
|
25
|
+
originalColumnNumber: originalPosition.column,
|
|
26
|
+
originalFileName: originalPosition.source,
|
|
27
|
+
originalFunctionName: null,
|
|
28
|
+
originalLineNumber: originalPosition.line,
|
|
29
|
+
originalScriptCode: null,
|
|
30
|
+
});
|
|
31
|
+
};
|
|
32
|
+
exports.openOriginalPositionInEditor = openOriginalPositionInEditor;
|
|
@@ -37,7 +37,7 @@ const makeRetryPayload = (job) => {
|
|
|
37
37
|
initialOpenGlRenderer: job.chromiumOptions.gl,
|
|
38
38
|
initialHeadless: job.chromiumOptions.headless,
|
|
39
39
|
initialIgnoreCertificateErrors: job.chromiumOptions.ignoreCertificateErrors,
|
|
40
|
-
defaultProps: no_react_1.NoReactInternals.
|
|
40
|
+
defaultProps: no_react_1.NoReactInternals.deserializeJSONWithSpecialTypes(job.serializedInputPropsWithCustomSchema),
|
|
41
41
|
inFrameMark: null,
|
|
42
42
|
outFrameMark: null,
|
|
43
43
|
initialOffthreadVideoCacheSizeInBytes: job.offthreadVideoCacheSizeInBytes,
|
|
@@ -84,7 +84,7 @@ const makeRetryPayload = (job) => {
|
|
|
84
84
|
initialOpenGlRenderer: job.chromiumOptions.gl,
|
|
85
85
|
initialHeadless: job.chromiumOptions.headless,
|
|
86
86
|
initialIgnoreCertificateErrors: job.chromiumOptions.ignoreCertificateErrors,
|
|
87
|
-
defaultProps: no_react_1.NoReactInternals.
|
|
87
|
+
defaultProps: no_react_1.NoReactInternals.deserializeJSONWithSpecialTypes(job.serializedInputPropsWithCustomSchema),
|
|
88
88
|
initialStillImageFormat: defaults.stillImageFormat,
|
|
89
89
|
inFrameMark: job.startFrame,
|
|
90
90
|
outFrameMark: job.endFrame,
|
|
@@ -134,7 +134,7 @@ const makeRetryPayload = (job) => {
|
|
|
134
134
|
initialOpenGlRenderer: job.chromiumOptions.gl,
|
|
135
135
|
initialHeadless: job.chromiumOptions.headless,
|
|
136
136
|
initialIgnoreCertificateErrors: job.chromiumOptions.ignoreCertificateErrors,
|
|
137
|
-
defaultProps: no_react_1.NoReactInternals.
|
|
137
|
+
defaultProps: no_react_1.NoReactInternals.deserializeJSONWithSpecialTypes(job.serializedInputPropsWithCustomSchema),
|
|
138
138
|
inFrameMark: job.startFrame,
|
|
139
139
|
outFrameMark: job.endFrame,
|
|
140
140
|
initialOffthreadVideoCacheSizeInBytes: job.offthreadVideoCacheSizeInBytes,
|
|
@@ -6,6 +6,7 @@ const react_1 = require("react");
|
|
|
6
6
|
const remotion_1 = require("remotion");
|
|
7
7
|
const no_react_1 = require("remotion/no-react");
|
|
8
8
|
const restart_studio_1 = require("../api/restart-studio");
|
|
9
|
+
const AskAiModal_1 = require("../components/AskAiModal");
|
|
9
10
|
const NotificationCenter_1 = require("../components/Notifications/NotificationCenter");
|
|
10
11
|
const SizeSelector_1 = require("../components/SizeSelector");
|
|
11
12
|
const TimelineInOutToggle_1 = require("../components/TimelineInOutToggle");
|
|
@@ -541,6 +542,21 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
|
|
|
541
542
|
label: 'Tools',
|
|
542
543
|
leaveLeftPadding: false,
|
|
543
544
|
items: [
|
|
545
|
+
{
|
|
546
|
+
id: 'ask-ai',
|
|
547
|
+
value: 'ask-ai',
|
|
548
|
+
label: 'Ask AI',
|
|
549
|
+
onClick: () => {
|
|
550
|
+
var _a;
|
|
551
|
+
closeMenu();
|
|
552
|
+
(_a = AskAiModal_1.askAiModalRef.current) === null || _a === void 0 ? void 0 : _a.toggle();
|
|
553
|
+
},
|
|
554
|
+
leftItem: null,
|
|
555
|
+
keyHint: `${ShortcutHint_1.cmdOrCtrlCharacter}+J`,
|
|
556
|
+
subMenu: null,
|
|
557
|
+
type: 'item',
|
|
558
|
+
quickSwitcherLabel: 'Ask AI',
|
|
559
|
+
},
|
|
544
560
|
'EyeDropper' in window
|
|
545
561
|
? {
|
|
546
562
|
id: 'color-picker',
|
package/dist/index.d.ts
CHANGED
|
@@ -11,6 +11,7 @@ export { saveDefaultProps } from './api/save-default-props';
|
|
|
11
11
|
export { seek } from './api/seek';
|
|
12
12
|
export { toggle } from './api/toggle';
|
|
13
13
|
export { updateDefaultProps } from './api/update-default-props';
|
|
14
|
+
export { visualControl } from './api/visual-control';
|
|
14
15
|
export { watchPublicFolder } from './api/watch-public-folder';
|
|
15
16
|
export { watchStaticFile } from './api/watch-static-file';
|
|
16
17
|
export { writeStaticFile } from './api/write-static-file';
|
package/dist/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.StudioInternals = exports.writeStaticFile = exports.watchStaticFile = exports.watchPublicFolder = exports.updateDefaultProps = exports.toggle = exports.seek = exports.saveDefaultProps = exports.restartStudio = exports.reevaluateComposition = exports.play = exports.pause = exports.goToComposition = exports.getStaticFiles = exports.focusDefaultPropsPath = exports.deleteStaticFile = void 0;
|
|
3
|
+
exports.StudioInternals = exports.writeStaticFile = exports.watchStaticFile = exports.watchPublicFolder = exports.visualControl = exports.updateDefaultProps = exports.toggle = exports.seek = exports.saveDefaultProps = exports.restartStudio = exports.reevaluateComposition = exports.play = exports.pause = exports.goToComposition = exports.getStaticFiles = exports.focusDefaultPropsPath = exports.deleteStaticFile = void 0;
|
|
4
4
|
const create_composition_1 = require("./api/create-composition");
|
|
5
5
|
var delete_static_file_1 = require("./api/delete-static-file");
|
|
6
6
|
Object.defineProperty(exports, "deleteStaticFile", { enumerable: true, get: function () { return delete_static_file_1.deleteStaticFile; } });
|
|
@@ -26,6 +26,8 @@ var toggle_1 = require("./api/toggle");
|
|
|
26
26
|
Object.defineProperty(exports, "toggle", { enumerable: true, get: function () { return toggle_1.toggle; } });
|
|
27
27
|
var update_default_props_1 = require("./api/update-default-props");
|
|
28
28
|
Object.defineProperty(exports, "updateDefaultProps", { enumerable: true, get: function () { return update_default_props_1.updateDefaultProps; } });
|
|
29
|
+
var visual_control_1 = require("./api/visual-control");
|
|
30
|
+
Object.defineProperty(exports, "visualControl", { enumerable: true, get: function () { return visual_control_1.visualControl; } });
|
|
29
31
|
var watch_public_folder_1 = require("./api/watch-public-folder");
|
|
30
32
|
Object.defineProperty(exports, "watchPublicFolder", { enumerable: true, get: function () { return watch_public_folder_1.watchPublicFolder; } });
|
|
31
33
|
var watch_static_file_1 = require("./api/watch-static-file");
|
package/dist/renderEntry.js
CHANGED
|
@@ -173,7 +173,7 @@ const renderContent = (Root) => {
|
|
|
173
173
|
const bundleMode = getBundleMode();
|
|
174
174
|
if (bundleMode.type === 'composition') {
|
|
175
175
|
const markup = ((0, jsx_runtime_1.jsxs)(remotion_1.Internals.RemotionRoot, { logLevel: window.remotion_logLevel, numberOfAudioTags: 0, onlyRenderComposition: bundleMode.compositionName, currentCompositionMetadata: {
|
|
176
|
-
props: no_react_1.NoReactInternals.
|
|
176
|
+
props: no_react_1.NoReactInternals.deserializeJSONWithSpecialTypes(bundleMode.serializedResolvedPropsWithSchema),
|
|
177
177
|
durationInFrames: bundleMode.compositionDurationInFrames,
|
|
178
178
|
fps: bundleMode.compositionFps,
|
|
179
179
|
height: bundleMode.compositionHeight,
|
|
@@ -266,12 +266,12 @@ if (typeof window !== 'undefined') {
|
|
|
266
266
|
const { props, defaultProps, ...data } = resolved;
|
|
267
267
|
return {
|
|
268
268
|
...data,
|
|
269
|
-
serializedResolvedPropsWithCustomSchema: no_react_1.NoReactInternals.
|
|
269
|
+
serializedResolvedPropsWithCustomSchema: no_react_1.NoReactInternals.serializeJSONWithSpecialTypes({
|
|
270
270
|
data: props,
|
|
271
271
|
indent: undefined,
|
|
272
272
|
staticBase: null,
|
|
273
273
|
}).serializedString,
|
|
274
|
-
serializedDefaultPropsWithCustomSchema: no_react_1.NoReactInternals.
|
|
274
|
+
serializedDefaultPropsWithCustomSchema: no_react_1.NoReactInternals.serializeJSONWithSpecialTypes({
|
|
275
275
|
data: defaultProps,
|
|
276
276
|
indent: undefined,
|
|
277
277
|
staticBase: null,
|
|
@@ -315,12 +315,12 @@ if (typeof window !== 'undefined') {
|
|
|
315
315
|
const { props, defaultProps, ...data } = prom;
|
|
316
316
|
return {
|
|
317
317
|
...data,
|
|
318
|
-
serializedResolvedPropsWithCustomSchema: no_react_1.NoReactInternals.
|
|
318
|
+
serializedResolvedPropsWithCustomSchema: no_react_1.NoReactInternals.serializeJSONWithSpecialTypes({
|
|
319
319
|
data: props,
|
|
320
320
|
indent: undefined,
|
|
321
321
|
staticBase: null,
|
|
322
322
|
}).serializedString,
|
|
323
|
-
serializedDefaultPropsWithCustomSchema: no_react_1.NoReactInternals.
|
|
323
|
+
serializedDefaultPropsWithCustomSchema: no_react_1.NoReactInternals.serializeJSONWithSpecialTypes({
|
|
324
324
|
data: defaultProps,
|
|
325
325
|
indent: undefined,
|
|
326
326
|
staticBase: null,
|
package/dist/state/z-index.d.ts
CHANGED
|
@@ -3,6 +3,7 @@ export declare const HigherZIndex: React.FC<{
|
|
|
3
3
|
readonly onEscape: () => void;
|
|
4
4
|
readonly onOutsideClick: (target: Node) => void;
|
|
5
5
|
readonly children: React.ReactNode;
|
|
6
|
+
readonly disabled?: boolean;
|
|
6
7
|
}>;
|
|
7
8
|
export declare const useZIndex: () => {
|
|
8
9
|
currentZIndex: number;
|
package/dist/state/z-index.js
CHANGED
|
@@ -31,16 +31,24 @@ const EscapeHook = ({ onEscape }) => {
|
|
|
31
31
|
}, [keybindings, onEscape]);
|
|
32
32
|
return null;
|
|
33
33
|
};
|
|
34
|
-
const HigherZIndex = ({ children, onEscape, onOutsideClick }) => {
|
|
34
|
+
const HigherZIndex = ({ children, onEscape, onOutsideClick, disabled }) => {
|
|
35
35
|
const context = (0, react_1.useContext)(ZIndexContext);
|
|
36
36
|
const highestContext = (0, react_1.useContext)(highest_z_index_1.HighestZIndexContext);
|
|
37
37
|
const containerRef = (0, react_1.useRef)(null);
|
|
38
|
-
const currentIndex =
|
|
38
|
+
const currentIndex = disabled
|
|
39
|
+
? context.currentIndex
|
|
40
|
+
: context.currentIndex + 1;
|
|
39
41
|
(0, react_1.useEffect)(() => {
|
|
42
|
+
if (disabled) {
|
|
43
|
+
return;
|
|
44
|
+
}
|
|
40
45
|
highestContext.registerZIndex(currentIndex);
|
|
41
46
|
return () => highestContext.unregisterZIndex(currentIndex);
|
|
42
|
-
}, [currentIndex, highestContext]);
|
|
47
|
+
}, [currentIndex, highestContext, disabled]);
|
|
43
48
|
(0, react_1.useEffect)(() => {
|
|
49
|
+
if (disabled) {
|
|
50
|
+
return;
|
|
51
|
+
}
|
|
44
52
|
let onUp = null;
|
|
45
53
|
const listener = (downEvent) => {
|
|
46
54
|
var _a;
|
|
@@ -72,13 +80,13 @@ const HigherZIndex = ({ children, onEscape, onOutsideClick }) => {
|
|
|
72
80
|
onUp = null;
|
|
73
81
|
return window.removeEventListener('pointerdown', listener);
|
|
74
82
|
};
|
|
75
|
-
}, [currentIndex, highestContext.highestIndex, onOutsideClick]);
|
|
83
|
+
}, [currentIndex, disabled, highestContext.highestIndex, onOutsideClick]);
|
|
76
84
|
const value = (0, react_1.useMemo)(() => {
|
|
77
85
|
return {
|
|
78
86
|
currentIndex,
|
|
79
87
|
};
|
|
80
88
|
}, [currentIndex]);
|
|
81
|
-
return ((0, jsx_runtime_1.jsxs)(ZIndexContext.Provider, { value: value, children: [(0, jsx_runtime_1.jsx)(EscapeHook, { onEscape: onEscape }), (0, jsx_runtime_1.jsx)("div", { ref: containerRef, style: margin, children: children })] }));
|
|
89
|
+
return ((0, jsx_runtime_1.jsxs)(ZIndexContext.Provider, { value: value, children: [disabled ? null : (0, jsx_runtime_1.jsx)(EscapeHook, { onEscape: onEscape }), (0, jsx_runtime_1.jsx)("div", { ref: containerRef, style: margin, children: children })] }));
|
|
82
90
|
};
|
|
83
91
|
exports.HigherZIndex = HigherZIndex;
|
|
84
92
|
const useZIndex = () => {
|
|
@@ -1,36 +1,29 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import type { ZodTypeAny } from 'zod';
|
|
3
|
-
export type
|
|
2
|
+
import type { z, ZodTypeAny } from 'zod';
|
|
3
|
+
export type VisualControlValueWithoutUnsaved = {
|
|
4
4
|
valueInCode: unknown;
|
|
5
|
-
unsavedValue: unknown;
|
|
6
5
|
schema: ZodTypeAny;
|
|
7
6
|
stack: string;
|
|
8
7
|
};
|
|
9
|
-
export type
|
|
10
|
-
|
|
11
|
-
stack: string;
|
|
8
|
+
export type VisualControlValue = VisualControlValueWithoutUnsaved & {
|
|
9
|
+
unsavedValue: unknown;
|
|
12
10
|
};
|
|
13
|
-
type
|
|
14
|
-
export type Handles = Record<number, Handle>;
|
|
11
|
+
export type Handles = Record<string, VisualControlValue>;
|
|
15
12
|
export type VisualControlsContextType = {
|
|
16
|
-
hooks: VisualControlHook[];
|
|
17
13
|
handles: Handles;
|
|
18
14
|
};
|
|
19
15
|
export declare const VisualControlsTabActivatedContext: React.Context<boolean>;
|
|
20
16
|
export type SetVisualControlsContextType = {
|
|
21
|
-
addHook: (hook: VisualControlHook) => void;
|
|
22
|
-
removeHook: (hook: VisualControlHook) => void;
|
|
23
|
-
setControl: (hook: VisualControlHook, key: string, value: VisualControlValue) => {
|
|
24
|
-
same: boolean;
|
|
25
|
-
currentValue: unknown;
|
|
26
|
-
};
|
|
27
17
|
updateHandles: () => void;
|
|
28
|
-
updateValue: (
|
|
18
|
+
updateValue: (key: string, value: unknown) => void;
|
|
19
|
+
visualControl: <T>(key: string, value: T, schema?: z.ZodTypeAny) => T;
|
|
29
20
|
};
|
|
30
|
-
export declare const makeHook: (stack: string) => VisualControlHook;
|
|
31
21
|
export declare const VisualControlsContext: React.Context<VisualControlsContextType>;
|
|
22
|
+
export type VisualControlRef = {
|
|
23
|
+
globalVisualControl: <T>(key: string, value: T, schema?: z.ZodTypeAny) => T;
|
|
24
|
+
};
|
|
25
|
+
export declare const visualControlRef: React.RefObject<VisualControlRef | null>;
|
|
32
26
|
export declare const SetVisualControlsContext: React.Context<SetVisualControlsContextType>;
|
|
33
27
|
export declare const VisualControlsProvider: React.FC<{
|
|
34
28
|
readonly children: React.ReactNode;
|
|
35
29
|
}>;
|
|
36
|
-
export {};
|
|
@@ -1,118 +1,123 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.VisualControlsProvider = exports.SetVisualControlsContext = exports.
|
|
3
|
+
exports.VisualControlsProvider = exports.SetVisualControlsContext = exports.visualControlRef = exports.VisualControlsContext = exports.VisualControlsTabActivatedContext = void 0;
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
5
|
const react_1 = require("react");
|
|
6
|
+
const remotion_1 = require("remotion");
|
|
7
|
+
const get_zod_schema_from_primitive_1 = require("../api/get-zod-schema-from-primitive");
|
|
8
|
+
const get_zod_if_possible_1 = require("../components/get-zod-if-possible");
|
|
6
9
|
const get_current_edited_value_1 = require("./get-current-edited-value");
|
|
7
10
|
exports.VisualControlsTabActivatedContext = (0, react_1.createContext)(false);
|
|
8
|
-
const makeHook = (stack) => {
|
|
9
|
-
return { id: Math.random(), stack };
|
|
10
|
-
};
|
|
11
|
-
exports.makeHook = makeHook;
|
|
12
11
|
exports.VisualControlsContext = (0, react_1.createContext)({
|
|
13
|
-
hooks: [],
|
|
14
12
|
handles: {},
|
|
15
13
|
});
|
|
14
|
+
exports.visualControlRef = (0, react_1.createRef)();
|
|
16
15
|
exports.SetVisualControlsContext = (0, react_1.createContext)({
|
|
17
|
-
addHook: () => {
|
|
18
|
-
throw new Error('addControl is not implemented');
|
|
19
|
-
},
|
|
20
|
-
removeHook: () => {
|
|
21
|
-
throw new Error('removeControl is not implemented');
|
|
22
|
-
},
|
|
23
|
-
setControl: () => {
|
|
24
|
-
throw new Error('addControl is not implemented');
|
|
25
|
-
},
|
|
26
16
|
updateHandles: () => {
|
|
27
17
|
throw new Error('updateHandles is not implemented');
|
|
28
18
|
},
|
|
29
19
|
updateValue: () => {
|
|
30
20
|
throw new Error('updateValue is not implemented');
|
|
31
21
|
},
|
|
22
|
+
visualControl: () => {
|
|
23
|
+
throw new Error('visualControl is not implemented');
|
|
24
|
+
},
|
|
32
25
|
});
|
|
33
26
|
const VisualControlsProvider = ({ children }) => {
|
|
34
|
-
const [hooks, setHooks] = (0, react_1.useState)([]);
|
|
35
27
|
const imperativeHandles = (0, react_1.useRef)({});
|
|
36
28
|
const [handles, setHandles] = (0, react_1.useState)({});
|
|
37
|
-
const [tabActivated, setTabActivated] = (0, react_1.useState)(false);
|
|
38
|
-
const addHook = (0, react_1.useCallback)((hook) => {
|
|
39
|
-
setHooks((prev) => {
|
|
40
|
-
if (prev.find((c) => c.id === hook.id)) {
|
|
41
|
-
return prev;
|
|
42
|
-
}
|
|
43
|
-
return [...prev, hook];
|
|
44
|
-
});
|
|
45
|
-
setTabActivated(true);
|
|
46
|
-
}, [setHooks]);
|
|
47
|
-
const removeHook = (0, react_1.useCallback)((hook) => {
|
|
48
|
-
setHooks((prev) => prev.filter((c) => c !== hook));
|
|
49
|
-
}, [setHooks]);
|
|
50
29
|
const state = (0, react_1.useMemo)(() => {
|
|
51
30
|
return {
|
|
52
|
-
hooks,
|
|
53
31
|
handles,
|
|
54
32
|
};
|
|
55
|
-
}, [
|
|
56
|
-
const setControl = (0, react_1.useCallback)((
|
|
57
|
-
var _a, _b, _c, _d
|
|
58
|
-
const
|
|
59
|
-
const
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
same: true,
|
|
63
|
-
currentValue: (0, get_current_edited_value_1.getVisualControlEditedValue)({
|
|
64
|
-
hook,
|
|
65
|
-
key,
|
|
66
|
-
handles: imperativeHandles.current,
|
|
67
|
-
}),
|
|
68
|
-
};
|
|
69
|
-
}
|
|
33
|
+
}, [handles]);
|
|
34
|
+
const setControl = (0, react_1.useCallback)((key, value) => {
|
|
35
|
+
var _a, _b, _c, _d;
|
|
36
|
+
const currentUnsaved = (_b = (_a = imperativeHandles.current) === null || _a === void 0 ? void 0 : _a[key]) === null || _b === void 0 ? void 0 : _b.unsavedValue;
|
|
37
|
+
const currentSavedState = (_d = (_c = imperativeHandles.current) === null || _c === void 0 ? void 0 : _c[key]) === null || _d === void 0 ? void 0 : _d.valueInCode;
|
|
38
|
+
const changedSavedValue = value.valueInCode !== currentSavedState;
|
|
39
|
+
const changedUnsavedValue = currentUnsaved === undefined && value.valueInCode !== undefined;
|
|
70
40
|
imperativeHandles.current = {
|
|
71
41
|
...imperativeHandles.current,
|
|
72
|
-
[
|
|
73
|
-
...
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
unsavedValue: currentUnsaved !== null && currentUnsaved !== void 0 ? currentUnsaved : value.valueInCode,
|
|
77
|
-
},
|
|
42
|
+
[key]: {
|
|
43
|
+
...value,
|
|
44
|
+
unsavedValue: currentUnsaved !== null && currentUnsaved !== void 0 ? currentUnsaved : value.valueInCode,
|
|
45
|
+
valueInCode: value.valueInCode,
|
|
78
46
|
},
|
|
79
47
|
};
|
|
80
48
|
return {
|
|
81
|
-
|
|
49
|
+
changed: changedSavedValue || changedUnsavedValue,
|
|
82
50
|
currentValue: (0, get_current_edited_value_1.getVisualControlEditedValue)({
|
|
83
|
-
hook,
|
|
84
51
|
key,
|
|
85
52
|
handles: imperativeHandles.current,
|
|
86
53
|
}),
|
|
87
54
|
};
|
|
88
55
|
}, []);
|
|
56
|
+
const z = (0, get_zod_if_possible_1.useZodIfPossible)();
|
|
57
|
+
const changedRef = (0, react_1.useRef)(false);
|
|
58
|
+
const visualControl = (0, react_1.useCallback)(
|
|
59
|
+
// eslint-disable-next-line prefer-arrow-callback
|
|
60
|
+
function (key, value, schema) {
|
|
61
|
+
// eslint-disable-next-line no-constant-condition
|
|
62
|
+
if (handles && false) {
|
|
63
|
+
/** Intentional: State is managed imperatively */
|
|
64
|
+
}
|
|
65
|
+
if (!(0, remotion_1.getRemotionEnvironment)().isStudio) {
|
|
66
|
+
return value;
|
|
67
|
+
}
|
|
68
|
+
if (!z) {
|
|
69
|
+
return value;
|
|
70
|
+
}
|
|
71
|
+
const { changed, currentValue } = setControl(key, {
|
|
72
|
+
valueInCode: value,
|
|
73
|
+
schema: schema !== null && schema !== void 0 ? schema : (0, get_zod_schema_from_primitive_1.getZodSchemaFromPrimitive)(value, z),
|
|
74
|
+
stack: new Error().stack,
|
|
75
|
+
});
|
|
76
|
+
if (changed) {
|
|
77
|
+
changedRef.current = true;
|
|
78
|
+
}
|
|
79
|
+
return currentValue;
|
|
80
|
+
}, [setControl, handles, z]);
|
|
89
81
|
const updateHandles = (0, react_1.useCallback)(() => {
|
|
90
82
|
setHandles(() => {
|
|
91
83
|
return imperativeHandles.current;
|
|
92
84
|
});
|
|
93
85
|
}, []);
|
|
94
|
-
const updateValue = (0, react_1.useCallback)((
|
|
86
|
+
const updateValue = (0, react_1.useCallback)((key, value) => {
|
|
95
87
|
imperativeHandles.current = {
|
|
96
88
|
...imperativeHandles.current,
|
|
97
|
-
[
|
|
98
|
-
...imperativeHandles.current[
|
|
99
|
-
|
|
100
|
-
...imperativeHandles.current[hook.id][key],
|
|
101
|
-
unsavedValue: value,
|
|
102
|
-
},
|
|
89
|
+
[key]: {
|
|
90
|
+
...imperativeHandles.current[key],
|
|
91
|
+
unsavedValue: value,
|
|
103
92
|
},
|
|
104
93
|
};
|
|
105
94
|
updateHandles();
|
|
106
95
|
}, [updateHandles]);
|
|
96
|
+
(0, react_1.useImperativeHandle)(exports.visualControlRef, () => {
|
|
97
|
+
return {
|
|
98
|
+
globalVisualControl: visualControl,
|
|
99
|
+
};
|
|
100
|
+
}, [visualControl]);
|
|
101
|
+
(0, react_1.useEffect)(() => {
|
|
102
|
+
const callback = () => {
|
|
103
|
+
if (imperativeHandles.current) {
|
|
104
|
+
updateHandles();
|
|
105
|
+
changedRef.current = false;
|
|
106
|
+
}
|
|
107
|
+
};
|
|
108
|
+
const interval = setInterval(callback, 100);
|
|
109
|
+
return () => {
|
|
110
|
+
clearInterval(interval);
|
|
111
|
+
};
|
|
112
|
+
}, [updateHandles]);
|
|
107
113
|
const setState = (0, react_1.useMemo)(() => {
|
|
108
114
|
return {
|
|
109
|
-
addHook,
|
|
110
|
-
removeHook,
|
|
111
115
|
setControl,
|
|
112
116
|
updateHandles,
|
|
113
117
|
updateValue,
|
|
118
|
+
visualControl,
|
|
114
119
|
};
|
|
115
|
-
}, [
|
|
116
|
-
return ((0, jsx_runtime_1.jsx)(exports.VisualControlsTabActivatedContext.Provider, { value:
|
|
120
|
+
}, [setControl, updateHandles, updateValue, visualControl]);
|
|
121
|
+
return ((0, jsx_runtime_1.jsx)(exports.VisualControlsTabActivatedContext.Provider, { value: Object.keys(state.handles).length > 0, children: (0, jsx_runtime_1.jsx)(exports.VisualControlsContext.Provider, { value: state, children: (0, jsx_runtime_1.jsx)(exports.SetVisualControlsContext.Provider, { value: setState, children: children }) }) }));
|
|
117
122
|
};
|
|
118
123
|
exports.VisualControlsProvider = VisualControlsProvider;
|
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
import type { Handles
|
|
2
|
-
export declare const getVisualControlEditedValue: ({ handles,
|
|
1
|
+
import type { Handles } from './VisualControls';
|
|
2
|
+
export declare const getVisualControlEditedValue: ({ handles, key, }: {
|
|
3
3
|
handles: Handles;
|
|
4
|
-
hook: VisualControlHook;
|
|
5
4
|
key: string;
|
|
6
5
|
}) => unknown;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.getVisualControlEditedValue = void 0;
|
|
4
|
-
const getVisualControlEditedValue = ({ handles,
|
|
5
|
-
var _a, _b
|
|
4
|
+
const getVisualControlEditedValue = ({ handles, key, }) => {
|
|
5
|
+
var _a, _b;
|
|
6
6
|
// TODO: What if z.null()
|
|
7
|
-
return (
|
|
7
|
+
return (_b = (_a = handles === null || handles === void 0 ? void 0 : handles[key]) === null || _a === void 0 ? void 0 : _a.unsavedValue) !== null && _b !== void 0 ? _b : null;
|
|
8
8
|
};
|
|
9
9
|
exports.getVisualControlEditedValue = getVisualControlEditedValue;
|
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.293",
|
|
7
7
|
"description": "APIs for interacting with the Remotion Studio",
|
|
8
8
|
"main": "dist",
|
|
9
9
|
"sideEffects": false,
|
|
@@ -23,20 +23,20 @@
|
|
|
23
23
|
"source-map": "0.7.3",
|
|
24
24
|
"open": "^8.4.2",
|
|
25
25
|
"zod": "3.22.3",
|
|
26
|
-
"remotion": "4.0.
|
|
27
|
-
"@remotion/
|
|
28
|
-
"@remotion/
|
|
29
|
-
"@remotion/media-parser": "4.0.
|
|
30
|
-
"@remotion/
|
|
31
|
-
"@remotion/
|
|
32
|
-
"@remotion/
|
|
26
|
+
"remotion": "4.0.293",
|
|
27
|
+
"@remotion/player": "4.0.293",
|
|
28
|
+
"@remotion/media-utils": "4.0.293",
|
|
29
|
+
"@remotion/media-parser": "4.0.293",
|
|
30
|
+
"@remotion/studio-shared": "4.0.293",
|
|
31
|
+
"@remotion/zod-types": "4.0.293",
|
|
32
|
+
"@remotion/renderer": "4.0.293"
|
|
33
33
|
},
|
|
34
34
|
"devDependencies": {
|
|
35
35
|
"react": "19.0.0",
|
|
36
36
|
"react-dom": "19.0.0",
|
|
37
37
|
"@types/semver": "^7.3.4",
|
|
38
38
|
"eslint": "9.19.0",
|
|
39
|
-
"@remotion/eslint-config-internal": "4.0.
|
|
39
|
+
"@remotion/eslint-config-internal": "4.0.293"
|
|
40
40
|
},
|
|
41
41
|
"publishConfig": {
|
|
42
42
|
"access": "public"
|