remotion 4.0.457 → 4.0.458
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/CompositionManager.d.ts +1 -1
- package/dist/cjs/HtmlInCanvas.js +7 -37
- package/dist/cjs/Img.js +2 -31
- package/dist/cjs/Sequence.d.ts +1 -1
- package/dist/cjs/Sequence.js +8 -3
- package/dist/cjs/SequenceManager.d.ts +3 -3
- package/dist/cjs/TimelineContext.d.ts +5 -2
- package/dist/cjs/TimelineContext.js +9 -4
- package/dist/cjs/audio/shared-audio-tags.js +5 -9
- package/dist/cjs/audio/use-audio-context.js +10 -1
- package/dist/cjs/flatten-schema.d.ts +4 -0
- package/dist/cjs/flatten-schema.js +46 -0
- package/dist/cjs/internals.d.ts +83 -7
- package/dist/cjs/internals.js +9 -1
- package/dist/cjs/sequence-field-schema.d.ts +81 -2
- package/dist/cjs/sequence-field-schema.js +49 -0
- package/dist/cjs/series/index.d.ts +2 -2
- package/dist/cjs/series/index.js +10 -6
- package/dist/cjs/timeline-position-state.d.ts +2 -1
- package/dist/cjs/timeline-position-state.js +9 -1
- package/dist/cjs/use-media-playback.js +1 -1
- package/dist/cjs/use-schema.d.ts +9 -6
- package/dist/cjs/use-schema.js +30 -73
- package/dist/cjs/version.d.ts +1 -1
- package/dist/cjs/version.js +1 -1
- package/dist/cjs/wrap-in-schema.d.ts +8 -0
- package/dist/cjs/wrap-in-schema.js +72 -15
- package/dist/esm/index.mjs +435 -369
- package/dist/esm/version.mjs +1 -1
- package/package.json +2 -2
- package/dist/cjs/audio/Audio.d.ts +0 -56
- package/dist/cjs/audio/Audio.js +0 -101
- package/dist/cjs/canvas-effects/HtmlInCanvas.d.ts +0 -12
- package/dist/cjs/canvas-effects/HtmlInCanvas.js +0 -188
- package/dist/cjs/canvas-effects/Solid.d.ts +0 -12
- package/dist/cjs/canvas-effects/Solid.js +0 -93
- package/dist/cjs/canvas-effects/canvas-pool.d.ts +0 -13
- package/dist/cjs/canvas-effects/canvas-pool.js +0 -85
- package/dist/cjs/canvas-effects/define-effect.d.ts +0 -3
- package/dist/cjs/canvas-effects/define-effect.js +0 -28
- package/dist/cjs/canvas-effects/effect-internals.d.ts +0 -7
- package/dist/cjs/canvas-effects/effect-internals.js +0 -42
- package/dist/cjs/canvas-effects/effect-types.d.ts +0 -31
- package/dist/cjs/canvas-effects/effect-types.js +0 -12
- package/dist/cjs/canvas-effects/gpu-device.d.ts +0 -2
- package/dist/cjs/canvas-effects/gpu-device.js +0 -36
- package/dist/cjs/canvas-effects/index.d.ts +0 -1
- package/dist/cjs/canvas-effects/index.js +0 -2
- package/dist/cjs/canvas-effects/run-effect-chain.d.ts +0 -23
- package/dist/cjs/canvas-effects/run-effect-chain.js +0 -119
- package/dist/cjs/canvas-effects/use-effect-chain-state.d.ts +0 -3
- package/dist/cjs/canvas-effects/use-effect-chain-state.js +0 -38
- package/dist/cjs/canvas-effects/use-effect-chain.d.ts +0 -13
- package/dist/cjs/canvas-effects/use-effect-chain.js +0 -200
- package/dist/cjs/canvas-effects/use-memoized-effects.d.ts +0 -2
- package/dist/cjs/canvas-effects/use-memoized-effects.js +0 -21
- package/dist/cjs/enable-effects.d.ts +0 -1
- package/dist/cjs/enable-effects.js +0 -4
- package/dist/cjs/video/Video.d.ts +0 -53
- package/dist/cjs/video/Video.js +0 -85
package/dist/cjs/HtmlInCanvas.js
CHANGED
|
@@ -7,6 +7,7 @@ const delay_render_js_1 = require("./delay-render.js");
|
|
|
7
7
|
const run_effect_chain_js_1 = require("./effects/run-effect-chain.js");
|
|
8
8
|
const use_effect_chain_state_js_1 = require("./effects/use-effect-chain-state.js");
|
|
9
9
|
const enable_sequence_stack_traces_js_1 = require("./enable-sequence-stack-traces.js");
|
|
10
|
+
const sequence_field_schema_js_1 = require("./sequence-field-schema.js");
|
|
10
11
|
const Sequence_js_1 = require("./Sequence.js");
|
|
11
12
|
const use_current_frame_js_1 = require("./use-current-frame.js");
|
|
12
13
|
const use_delay_render_js_1 = require("./use-delay-render.js");
|
|
@@ -54,37 +55,7 @@ const defaultOnPaint = ({ canvas, element, elementImage, }) => {
|
|
|
54
55
|
};
|
|
55
56
|
/* eslint-enable react/require-default-props */
|
|
56
57
|
const HtmlInCanvasAncestorContext = (0, react_1.createContext)(false);
|
|
57
|
-
const
|
|
58
|
-
'style.translate': {
|
|
59
|
-
type: 'translate',
|
|
60
|
-
step: 1,
|
|
61
|
-
default: '0px 0px',
|
|
62
|
-
description: 'Position',
|
|
63
|
-
},
|
|
64
|
-
'style.scale': {
|
|
65
|
-
type: 'number',
|
|
66
|
-
min: 0.05,
|
|
67
|
-
max: 100,
|
|
68
|
-
step: 0.01,
|
|
69
|
-
default: 1,
|
|
70
|
-
description: 'Scale',
|
|
71
|
-
},
|
|
72
|
-
'style.rotate': {
|
|
73
|
-
type: 'rotation',
|
|
74
|
-
step: 1,
|
|
75
|
-
default: '0deg',
|
|
76
|
-
description: 'Rotation',
|
|
77
|
-
},
|
|
78
|
-
'style.opacity': {
|
|
79
|
-
type: 'number',
|
|
80
|
-
min: 0,
|
|
81
|
-
max: 1,
|
|
82
|
-
step: 0.01,
|
|
83
|
-
default: 1,
|
|
84
|
-
description: 'Opacity',
|
|
85
|
-
},
|
|
86
|
-
};
|
|
87
|
-
const HtmlInCanvasInner = (0, react_1.forwardRef)(({ width, height, _experimentalEffects: experimentalEffects = [], children, onPaint, onInit, _experimentalControls: controls, style, durationInFrames, ...sequenceProps }, ref) => {
|
|
58
|
+
const HtmlInCanvasInner = (0, react_1.forwardRef)(({ width, height, _experimentalEffects: effects = [], children, onPaint, onInit, _experimentalControls: controls, style, durationInFrames, ...sequenceProps }, ref) => {
|
|
88
59
|
const isInsideAncestorHtmlInCanvas = (0, react_1.useContext)(HtmlInCanvasAncestorContext);
|
|
89
60
|
assertHtmlInCanvasDimensions(width, height);
|
|
90
61
|
const { continueRender, cancelRender } = (0, use_delay_render_js_1.useDelayRender)();
|
|
@@ -109,8 +80,8 @@ const HtmlInCanvasInner = (0, react_1.forwardRef)(({ width, height, _experimenta
|
|
|
109
80
|
const [offscreenCanvas] = (0, react_1.useState)(() => new OffscreenCanvas(1, 1));
|
|
110
81
|
const chainState = (0, use_effect_chain_state_js_1.useEffectChainState)();
|
|
111
82
|
// Refs so the paint handler always reads fresh values.
|
|
112
|
-
const effectsRef = (0, react_1.useRef)(
|
|
113
|
-
effectsRef.current =
|
|
83
|
+
const effectsRef = (0, react_1.useRef)(effects);
|
|
84
|
+
effectsRef.current = effects;
|
|
114
85
|
const frameRef = (0, react_1.useRef)(frame);
|
|
115
86
|
frameRef.current = frame;
|
|
116
87
|
const onPaintRef = (0, react_1.useRef)(onPaint);
|
|
@@ -245,16 +216,15 @@ const HtmlInCanvasInner = (0, react_1.forwardRef)(({ width, height, _experimenta
|
|
|
245
216
|
return {
|
|
246
217
|
width,
|
|
247
218
|
height,
|
|
248
|
-
...style,
|
|
249
219
|
};
|
|
250
|
-
}, [width, height
|
|
220
|
+
}, [width, height]);
|
|
251
221
|
if (isInsideAncestorHtmlInCanvas) {
|
|
252
222
|
throw new Error('<HtmlInCanvas> effects cannot be nested together. Chrome will only display the outer effect. Consider merging the effects into one if you can.');
|
|
253
223
|
}
|
|
254
|
-
return ((0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { durationInFrames: resolvedDuration, name: "<HtmlInCanvas>", _experimentalControls: controls, layout: "none", ...sequenceProps, children: (0, jsx_runtime_1.jsx)(HtmlInCanvasAncestorContext.Provider, { value: true, children: (0, jsx_runtime_1.jsx)("canvas", { ref: setLayoutCanvasRef, width: width, height: height, children: (0, jsx_runtime_1.jsx)("div", { ref: divRef, style: innerStyle, children: children }) }) }) }));
|
|
224
|
+
return ((0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { durationInFrames: resolvedDuration, name: "<HtmlInCanvas>", _experimentalControls: controls, _experimentalEffects: effects, layout: "none", ...sequenceProps, children: (0, jsx_runtime_1.jsx)(HtmlInCanvasAncestorContext.Provider, { value: true, children: (0, jsx_runtime_1.jsx)("canvas", { ref: setLayoutCanvasRef, width: width, height: height, style: style, children: (0, jsx_runtime_1.jsx)("div", { ref: divRef, style: innerStyle, children: children }) }) }) }));
|
|
255
225
|
});
|
|
256
226
|
HtmlInCanvasInner.displayName = 'HtmlInCanvas';
|
|
257
|
-
const HtmlInCanvasWrapped = (0, wrap_in_schema_js_1.wrapInSchema)(HtmlInCanvasInner,
|
|
227
|
+
const HtmlInCanvasWrapped = (0, wrap_in_schema_js_1.wrapInSchema)(HtmlInCanvasInner, sequence_field_schema_js_1.sequenceStyleSchema);
|
|
258
228
|
exports.HtmlInCanvas = Object.assign(HtmlInCanvasWrapped, {
|
|
259
229
|
isSupported: exports.isHtmlInCanvasSupported,
|
|
260
230
|
});
|
package/dist/cjs/Img.js
CHANGED
|
@@ -7,6 +7,7 @@ const react_1 = require("react");
|
|
|
7
7
|
const enable_sequence_stack_traces_js_1 = require("./enable-sequence-stack-traces.js");
|
|
8
8
|
const get_cross_origin_value_js_1 = require("./get-cross-origin-value.js");
|
|
9
9
|
const prefetch_js_1 = require("./prefetch.js");
|
|
10
|
+
const sequence_field_schema_js_1 = require("./sequence-field-schema.js");
|
|
10
11
|
const SequenceContext_js_1 = require("./SequenceContext.js");
|
|
11
12
|
const use_buffer_state_js_1 = require("./use-buffer-state.js");
|
|
12
13
|
const use_delay_render_js_1 = require("./use-delay-render.js");
|
|
@@ -24,36 +25,6 @@ function truncateSrcForLabel(src) {
|
|
|
24
25
|
}
|
|
25
26
|
return src;
|
|
26
27
|
}
|
|
27
|
-
const imgSchema = {
|
|
28
|
-
'style.translate': {
|
|
29
|
-
type: 'translate',
|
|
30
|
-
step: 1,
|
|
31
|
-
default: '0px 0px',
|
|
32
|
-
description: 'Position',
|
|
33
|
-
},
|
|
34
|
-
'style.scale': {
|
|
35
|
-
type: 'number',
|
|
36
|
-
min: 0.05,
|
|
37
|
-
max: 100,
|
|
38
|
-
step: 0.01,
|
|
39
|
-
default: 1,
|
|
40
|
-
description: 'Scale',
|
|
41
|
-
},
|
|
42
|
-
'style.rotate': {
|
|
43
|
-
type: 'rotation',
|
|
44
|
-
step: 1,
|
|
45
|
-
default: '0deg',
|
|
46
|
-
description: 'Rotation',
|
|
47
|
-
},
|
|
48
|
-
'style.opacity': {
|
|
49
|
-
type: 'number',
|
|
50
|
-
min: 0,
|
|
51
|
-
max: 1,
|
|
52
|
-
step: 0.01,
|
|
53
|
-
default: 1,
|
|
54
|
-
description: 'Opacity',
|
|
55
|
-
},
|
|
56
|
-
};
|
|
57
28
|
const ImgInner = ({ onError, maxRetries = 2, src, pauseWhenLoading, delayRenderRetries, delayRenderTimeoutInMilliseconds, onImageFrame, crossOrigin, showInTimeline, name, stack, ref, _experimentalControls: controls, ...props }) => {
|
|
58
29
|
var _a, _b;
|
|
59
30
|
const imageRef = (0, react_1.useRef)(null);
|
|
@@ -230,5 +201,5 @@ const ImgInner = ({ onError, maxRetries = 2, src, pauseWhenLoading, delayRenderR
|
|
|
230
201
|
* @description Works just like a regular HTML img tag. When you use the <Img> tag, Remotion will ensure that the image is loaded before rendering the frame.
|
|
231
202
|
* @see [Documentation](https://remotion.dev/docs/img)
|
|
232
203
|
*/
|
|
233
|
-
exports.Img = (0, wrap_in_schema_js_1.wrapInSchema)(ImgInner,
|
|
204
|
+
exports.Img = (0, wrap_in_schema_js_1.wrapInSchema)(ImgInner, sequence_field_schema_js_1.sequenceStyleSchema);
|
|
234
205
|
(0, enable_sequence_stack_traces_js_1.addSequenceStackTraces)(exports.Img);
|
package/dist/cjs/Sequence.d.ts
CHANGED
|
@@ -58,4 +58,4 @@ export type SequencePropsWithoutDuration = {
|
|
|
58
58
|
export type SequenceProps = {
|
|
59
59
|
readonly durationInFrames?: number;
|
|
60
60
|
} & SequencePropsWithoutDuration;
|
|
61
|
-
export declare const Sequence: React.
|
|
61
|
+
export declare const Sequence: React.ComponentType<SequenceProps & React.RefAttributes<HTMLDivElement>>;
|
package/dist/cjs/Sequence.js
CHANGED
|
@@ -10,6 +10,7 @@ const use_memoized_effects_js_1 = require("./effects/use-memoized-effects.js");
|
|
|
10
10
|
const freeze_js_1 = require("./freeze.js");
|
|
11
11
|
const nonce_js_1 = require("./nonce.js");
|
|
12
12
|
const PremountContext_js_1 = require("./PremountContext.js");
|
|
13
|
+
const sequence_field_schema_js_1 = require("./sequence-field-schema.js");
|
|
13
14
|
const SequenceContext_js_1 = require("./SequenceContext.js");
|
|
14
15
|
const SequenceManager_js_1 = require("./SequenceManager.js");
|
|
15
16
|
const timeline_position_state_js_1 = require("./timeline-position-state.js");
|
|
@@ -17,6 +18,7 @@ const use_current_frame_1 = require("./use-current-frame");
|
|
|
17
18
|
const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
|
|
18
19
|
const use_video_config_js_1 = require("./use-video-config.js");
|
|
19
20
|
const v5_flag_js_1 = require("./v5-flag.js");
|
|
21
|
+
const wrap_in_schema_js_1 = require("./wrap-in-schema.js");
|
|
20
22
|
const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity, children, name, height, width, showInTimeline = true, _experimentalControls: controls, _experimentalEffects, _remotionInternalLoopDisplay: loopDisplay, _remotionInternalStack: stack, _remotionInternalPremountDisplay: premountDisplay, _remotionInternalPostmountDisplay: postmountDisplay, _remotionInternalIsMedia: isMedia, ...other }, ref) => {
|
|
21
23
|
var _a, _b;
|
|
22
24
|
const { layout = 'absolute-fill' } = other;
|
|
@@ -32,7 +34,9 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
|
|
|
32
34
|
}
|
|
33
35
|
// @ts-expect-error
|
|
34
36
|
if (layout === 'none' && typeof other.style !== 'undefined') {
|
|
35
|
-
throw new TypeError('If layout="none", you may not pass a style.'
|
|
37
|
+
throw new TypeError('If layout="none", you may not pass a style. Passed: ' +
|
|
38
|
+
// @ts-expect-error
|
|
39
|
+
JSON.stringify(other.style));
|
|
36
40
|
}
|
|
37
41
|
if (typeof durationInFrames !== 'number') {
|
|
38
42
|
throw new TypeError(`You passed to durationInFrames an argument of type ${typeof durationInFrames}, but it must be a number.`);
|
|
@@ -235,7 +239,7 @@ const PremountedPostmountedSequenceRefForwardingFunction = (props, ref) => {
|
|
|
235
239
|
styleWhilePremounted,
|
|
236
240
|
styleWhilePostmounted,
|
|
237
241
|
]);
|
|
238
|
-
return ((0, jsx_runtime_1.jsx)(freeze_js_1.Freeze, { frame: freezeFrame, active: isFreezingActive, children: (0, jsx_runtime_1.jsx)(
|
|
242
|
+
return ((0, jsx_runtime_1.jsx)(freeze_js_1.Freeze, { frame: freezeFrame, active: isFreezingActive, children: (0, jsx_runtime_1.jsx)(SequenceInner, { ref: ref, from: from, durationInFrames: durationInFrames, style: style, _remotionInternalPremountDisplay: premountFor, _remotionInternalPostmountDisplay: postmountFor, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, ...otherProps }) }));
|
|
239
243
|
};
|
|
240
244
|
const PremountedPostmountedSequence = (0, react_1.forwardRef)(PremountedPostmountedSequenceRefForwardingFunction);
|
|
241
245
|
const SequenceRefForwardingFunction = (props, ref) => {
|
|
@@ -252,8 +256,9 @@ const SequenceRefForwardingFunction = (props, ref) => {
|
|
|
252
256
|
}
|
|
253
257
|
return (0, jsx_runtime_1.jsx)(RegularSequence, { ...props, ref: ref });
|
|
254
258
|
};
|
|
259
|
+
const SequenceInner = (0, react_1.forwardRef)(SequenceRefForwardingFunction);
|
|
255
260
|
/*
|
|
256
261
|
* @description A component that time-shifts its children and wraps them in an absolutely positioned <div>.
|
|
257
262
|
* @see [Documentation](https://www.remotion.dev/docs/sequence)
|
|
258
263
|
*/
|
|
259
|
-
exports.Sequence = (0,
|
|
264
|
+
exports.Sequence = (0, wrap_in_schema_js_1.wrapInSchema)(SequenceInner, sequence_field_schema_js_1.sequenceSchema);
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { TSequence } from './CompositionManager.js';
|
|
3
|
-
import type { CanUpdateSequencePropStatus } from './use-schema.js';
|
|
3
|
+
import type { CanUpdateSequencePropStatus, CodeValues, DragOverrides } from './use-schema.js';
|
|
4
4
|
export type SequenceManagerContext = {
|
|
5
5
|
registerSequence: (seq: TSequence) => void;
|
|
6
6
|
unregisterSequence: (id: string) => void;
|
|
@@ -14,10 +14,10 @@ export type SequenceVisibilityToggleState = {
|
|
|
14
14
|
export declare const SequenceVisibilityToggleContext: React.Context<SequenceVisibilityToggleState>;
|
|
15
15
|
export type VisualModeOverrides = {
|
|
16
16
|
visualModeEnabled: boolean;
|
|
17
|
-
dragOverrides:
|
|
17
|
+
dragOverrides: DragOverrides;
|
|
18
18
|
setDragOverrides: (sequenceId: string, key: string, value: unknown) => void;
|
|
19
19
|
clearDragOverrides: (sequenceId: string) => void;
|
|
20
|
-
codeValues:
|
|
20
|
+
codeValues: CodeValues;
|
|
21
21
|
setCodeValues: (sequenceId: string, values: Record<string, CanUpdateSequencePropStatus> | null) => void;
|
|
22
22
|
};
|
|
23
23
|
export declare const VisualModeOverridesContext: React.Context<VisualModeOverrides>;
|
|
@@ -5,17 +5,20 @@ export type TimelineContextValue = {
|
|
|
5
5
|
frame: Record<string, number>;
|
|
6
6
|
playing: boolean;
|
|
7
7
|
rootId: string;
|
|
8
|
-
playbackRate: number;
|
|
9
8
|
imperativePlaying: MutableRefObject<boolean>;
|
|
10
|
-
setPlaybackRate: (u: React.SetStateAction<number>) => void;
|
|
11
9
|
audioAndVideoTags: MutableRefObject<PlayableMediaTag[]>;
|
|
12
10
|
};
|
|
11
|
+
export type PlaybackRateContextValue = {
|
|
12
|
+
playbackRate: number;
|
|
13
|
+
setPlaybackRate: (u: React.SetStateAction<number>) => void;
|
|
14
|
+
};
|
|
13
15
|
export type SetTimelineContextValue = {
|
|
14
16
|
setFrame: (u: React.SetStateAction<Record<string, number>>) => void;
|
|
15
17
|
setPlaying: (u: React.SetStateAction<boolean>) => void;
|
|
16
18
|
};
|
|
17
19
|
export declare const SetTimelineContext: React.Context<SetTimelineContextValue>;
|
|
18
20
|
export declare const TimelineContext: React.Context<TimelineContextValue | null>;
|
|
21
|
+
export declare const PlaybackRateContext: React.Context<PlaybackRateContextValue | null>;
|
|
19
22
|
export declare const AbsoluteTimeContext: React.Context<TimelineContextValue | null>;
|
|
20
23
|
export declare const TimelineContextProvider: React.FC<{
|
|
21
24
|
readonly children: React.ReactNode;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.TimelineContextProvider = exports.AbsoluteTimeContext = exports.TimelineContext = exports.SetTimelineContext = void 0;
|
|
3
|
+
exports.TimelineContextProvider = exports.AbsoluteTimeContext = exports.PlaybackRateContext = exports.TimelineContext = exports.SetTimelineContext = void 0;
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
5
|
const react_1 = require("react");
|
|
6
6
|
const random_1 = require("./random");
|
|
@@ -15,6 +15,7 @@ exports.SetTimelineContext = (0, react_1.createContext)({
|
|
|
15
15
|
},
|
|
16
16
|
});
|
|
17
17
|
exports.TimelineContext = (0, react_1.createContext)(null);
|
|
18
|
+
exports.PlaybackRateContext = (0, react_1.createContext)(null);
|
|
18
19
|
exports.AbsoluteTimeContext = (0, react_1.createContext)(null);
|
|
19
20
|
const TimelineContextProvider = ({ children, frameState }) => {
|
|
20
21
|
const [playing, setPlaying] = (0, react_1.useState)(false);
|
|
@@ -62,17 +63,21 @@ const TimelineContextProvider = ({ children, frameState }) => {
|
|
|
62
63
|
playing,
|
|
63
64
|
imperativePlaying,
|
|
64
65
|
rootId: remotionRootId,
|
|
66
|
+
audioAndVideoTags,
|
|
67
|
+
};
|
|
68
|
+
}, [frame, playing, remotionRootId]);
|
|
69
|
+
const playbackRateContextValue = (0, react_1.useMemo)(() => {
|
|
70
|
+
return {
|
|
65
71
|
playbackRate,
|
|
66
72
|
setPlaybackRate,
|
|
67
|
-
audioAndVideoTags,
|
|
68
73
|
};
|
|
69
|
-
}, [
|
|
74
|
+
}, [playbackRate]);
|
|
70
75
|
const setTimelineContextValue = (0, react_1.useMemo)(() => {
|
|
71
76
|
return {
|
|
72
77
|
setFrame,
|
|
73
78
|
setPlaying,
|
|
74
79
|
};
|
|
75
80
|
}, []);
|
|
76
|
-
return ((0, jsx_runtime_1.jsx)(exports.AbsoluteTimeContext.Provider, { value: timelineContextValue, children: (0, jsx_runtime_1.jsx)(exports.TimelineContext.Provider, { value: timelineContextValue, children: (0, jsx_runtime_1.jsx)(exports.SetTimelineContext.Provider, { value: setTimelineContextValue, children: children }) }) }));
|
|
81
|
+
return ((0, jsx_runtime_1.jsx)(exports.AbsoluteTimeContext.Provider, { value: timelineContextValue, children: (0, jsx_runtime_1.jsx)(exports.PlaybackRateContext.Provider, { value: playbackRateContextValue, children: (0, jsx_runtime_1.jsx)(exports.TimelineContext.Provider, { value: timelineContextValue, children: (0, jsx_runtime_1.jsx)(exports.SetTimelineContext.Provider, { value: setTimelineContextValue, children: children }) }) }) }));
|
|
77
82
|
};
|
|
78
83
|
exports.TimelineContextProvider = TimelineContextProvider;
|
|
@@ -161,7 +161,6 @@ const SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled }
|
|
|
161
161
|
};
|
|
162
162
|
}, [ctxAndGain, logLevel]);
|
|
163
163
|
const resume = (0, react_1.useCallback)(() => {
|
|
164
|
-
var _a, _b;
|
|
165
164
|
if (!ctxAndGain) {
|
|
166
165
|
return Promise.resolve();
|
|
167
166
|
}
|
|
@@ -180,14 +179,11 @@ const SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled }
|
|
|
180
179
|
isResuming.current = null;
|
|
181
180
|
});
|
|
182
181
|
ctxAndGain.gainNode.gain.cancelScheduledValues(ctxAndGain.audioContext.currentTime);
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
nodesToResume.current.clear();
|
|
189
|
-
})
|
|
190
|
-
.catch(() => {
|
|
182
|
+
ctxAndGain.gainNode.gain.setValueAtTime(0, ctxAndGain.audioContext.currentTime);
|
|
183
|
+
ctxAndGain.gainNode.gain.linearRampToValueAtTime(1, ctxAndGain.audioContext.currentTime + 0.03);
|
|
184
|
+
nodesToResume.current.forEach((r, node) => node.start(r.scheduledTime, r.offset, r.duration));
|
|
185
|
+
nodesToResume.current.clear();
|
|
186
|
+
return resumePromise.catch(() => {
|
|
191
187
|
// Already logged above; swallow to avoid unhandled rejection
|
|
192
188
|
// since callers (e.g. use-playback.ts) do not await this.
|
|
193
189
|
});
|
|
@@ -17,7 +17,7 @@ const warnOnce = (logLevel) => {
|
|
|
17
17
|
};
|
|
18
18
|
const useSingletonAudioContext = ({ logLevel, latencyHint, audioEnabled, }) => {
|
|
19
19
|
const env = (0, use_remotion_environment_1.useRemotionEnvironment)();
|
|
20
|
-
|
|
20
|
+
const context = (0, react_1.useMemo)(() => {
|
|
21
21
|
if (env.isRendering) {
|
|
22
22
|
return null;
|
|
23
23
|
}
|
|
@@ -37,10 +37,19 @@ const useSingletonAudioContext = ({ logLevel, latencyHint, audioEnabled, }) => {
|
|
|
37
37
|
});
|
|
38
38
|
const gainNode = audioContext.createGain();
|
|
39
39
|
gainNode.connect(audioContext.destination);
|
|
40
|
+
log_1.Log.trace({ logLevel, tag: 'audio' }, 'Creating new audio context');
|
|
41
|
+
audioContext.suspend();
|
|
40
42
|
return {
|
|
41
43
|
audioContext,
|
|
42
44
|
gainNode,
|
|
43
45
|
};
|
|
44
46
|
}, [logLevel, latencyHint, env.isRendering, audioEnabled]);
|
|
47
|
+
(0, react_1.useEffect)(() => {
|
|
48
|
+
return () => {
|
|
49
|
+
var _a;
|
|
50
|
+
(_a = context === null || context === void 0 ? void 0 : context.audioContext) === null || _a === void 0 ? void 0 : _a.close();
|
|
51
|
+
};
|
|
52
|
+
}, [context]);
|
|
53
|
+
return context;
|
|
45
54
|
};
|
|
46
55
|
exports.useSingletonAudioContext = useSingletonAudioContext;
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import type { SequenceSchema } from './sequence-field-schema';
|
|
2
|
+
export type ResolveValue = (key: string) => unknown;
|
|
3
|
+
export declare const flattenActiveSchema: (schema: SequenceSchema, resolve: ResolveValue) => SequenceSchema;
|
|
4
|
+
export declare const getFlatSchemaWithAllKeys: (schema: SequenceSchema) => SequenceSchema;
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.getFlatSchemaWithAllKeys = exports.flattenActiveSchema = void 0;
|
|
4
|
+
const flattenActiveSchema = (schema, resolve) => {
|
|
5
|
+
var _a;
|
|
6
|
+
const out = {};
|
|
7
|
+
for (const key of Object.keys(schema)) {
|
|
8
|
+
const field = schema[key];
|
|
9
|
+
if (field.type === 'enum') {
|
|
10
|
+
out[key] = field;
|
|
11
|
+
const current = (_a = resolve(key)) !== null && _a !== void 0 ? _a : field.default;
|
|
12
|
+
const variant = field.variants[current];
|
|
13
|
+
if (variant) {
|
|
14
|
+
Object.assign(out, (0, exports.flattenActiveSchema)(variant, resolve));
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
else {
|
|
18
|
+
out[key] = field;
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
return out;
|
|
22
|
+
};
|
|
23
|
+
exports.flattenActiveSchema = flattenActiveSchema;
|
|
24
|
+
const getFlatSchemaWithAllKeys = (schema) => {
|
|
25
|
+
const out = {};
|
|
26
|
+
const addKey = (key, field) => {
|
|
27
|
+
if (key in out) {
|
|
28
|
+
throw new Error(`Duplicate key "${key}" in schema: discriminated union variants must not share keys`);
|
|
29
|
+
}
|
|
30
|
+
out[key] = field;
|
|
31
|
+
};
|
|
32
|
+
for (const key of Object.keys(schema)) {
|
|
33
|
+
const field = schema[key];
|
|
34
|
+
addKey(key, field);
|
|
35
|
+
if (field.type === 'enum') {
|
|
36
|
+
for (const variant of Object.values(field.variants)) {
|
|
37
|
+
const flatVariant = (0, exports.getFlatSchemaWithAllKeys)(variant);
|
|
38
|
+
for (const variantKey of Object.keys(flatVariant)) {
|
|
39
|
+
addKey(variantKey, flatVariant[variantKey]);
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
return out;
|
|
45
|
+
};
|
|
46
|
+
exports.getFlatSchemaWithAllKeys = getFlatSchemaWithAllKeys;
|
package/dist/cjs/internals.d.ts
CHANGED
|
@@ -11,9 +11,9 @@ import type { RemotionEnvironment } from './remotion-environment-context.js';
|
|
|
11
11
|
import type { SequenceFieldSchema, SequenceSchema } from './sequence-field-schema.js';
|
|
12
12
|
import type { ResolvedStackLocation } from './sequence-stack-traces.js';
|
|
13
13
|
import * as TimelinePosition from './timeline-position-state.js';
|
|
14
|
-
import { type SetTimelineContextValue, type TimelineContextValue } from './TimelineContext.js';
|
|
14
|
+
import { type PlaybackRateContextValue, type SetTimelineContextValue, type TimelineContextValue } from './TimelineContext.js';
|
|
15
15
|
import { truthy } from './truthy.js';
|
|
16
|
-
import type
|
|
16
|
+
import { type CanUpdateSequencePropStatus, type CodeValues, type DragOverrides } from './use-schema.js';
|
|
17
17
|
import type { MediaVolumeContextValue, SetMediaVolumeContextValue } from './volume-position-state.js';
|
|
18
18
|
import type { WatchRemotionStaticFilesPayload } from './watch-static-file.js';
|
|
19
19
|
import { useRemotionContexts } from './wrap-remotion-context.js';
|
|
@@ -82,13 +82,81 @@ export declare const Internals: {
|
|
|
82
82
|
readonly SequenceManager: import("react").Context<import("./SequenceManager.js").SequenceManagerContext>;
|
|
83
83
|
readonly SequenceStackTracesUpdateContext: import("react").Context<import("./sequence-stack-traces.js").UpdateResolvedStackTraceFn>;
|
|
84
84
|
readonly SequenceVisibilityToggleContext: import("react").Context<import("./SequenceManager.js").SequenceVisibilityToggleState>;
|
|
85
|
-
readonly useSchema: <S extends SequenceSchema, T extends import("./sequence-field-schema.js").SchemaKeysRecord<S>>(schema: S | null, currentValue: (T & Record<Exclude<keyof T, keyof S>, never>) | null) => {
|
|
86
|
-
controls: import("./CompositionManager.js").SequenceControls | undefined;
|
|
87
|
-
values: T;
|
|
88
|
-
};
|
|
89
85
|
readonly wrapInSchema: <S extends SequenceSchema, Props extends object>(Component: React.ComponentType<Props & {
|
|
90
86
|
readonly _experimentalControls: import("./CompositionManager.js").SequenceControls | undefined;
|
|
91
87
|
}>, schema: S) => React.ComponentType<Props>;
|
|
88
|
+
readonly sequenceSchema: {
|
|
89
|
+
readonly layout: {
|
|
90
|
+
readonly type: "enum";
|
|
91
|
+
readonly default: "absolute-fill";
|
|
92
|
+
readonly description: "Layout";
|
|
93
|
+
readonly variants: {
|
|
94
|
+
readonly 'absolute-fill': {
|
|
95
|
+
readonly 'style.translate': {
|
|
96
|
+
readonly type: "translate";
|
|
97
|
+
readonly step: 1;
|
|
98
|
+
readonly default: "0px 0px";
|
|
99
|
+
readonly description: "Offset";
|
|
100
|
+
};
|
|
101
|
+
readonly 'style.scale': {
|
|
102
|
+
readonly type: "number";
|
|
103
|
+
readonly min: 0.05;
|
|
104
|
+
readonly max: 100;
|
|
105
|
+
readonly step: 0.01;
|
|
106
|
+
readonly default: 1;
|
|
107
|
+
readonly description: "Scale";
|
|
108
|
+
};
|
|
109
|
+
readonly 'style.rotate': {
|
|
110
|
+
readonly type: "rotation";
|
|
111
|
+
readonly step: 1;
|
|
112
|
+
readonly default: "0deg";
|
|
113
|
+
readonly description: "Rotation";
|
|
114
|
+
};
|
|
115
|
+
readonly 'style.opacity': {
|
|
116
|
+
readonly type: "number";
|
|
117
|
+
readonly min: 0;
|
|
118
|
+
readonly max: 1;
|
|
119
|
+
readonly step: 0.01;
|
|
120
|
+
readonly default: 1;
|
|
121
|
+
readonly description: "Opacity";
|
|
122
|
+
};
|
|
123
|
+
};
|
|
124
|
+
readonly none: {};
|
|
125
|
+
};
|
|
126
|
+
};
|
|
127
|
+
};
|
|
128
|
+
readonly sequenceStyleSchema: {
|
|
129
|
+
readonly 'style.translate': {
|
|
130
|
+
readonly type: "translate";
|
|
131
|
+
readonly step: 1;
|
|
132
|
+
readonly default: "0px 0px";
|
|
133
|
+
readonly description: "Offset";
|
|
134
|
+
};
|
|
135
|
+
readonly 'style.scale': {
|
|
136
|
+
readonly type: "number";
|
|
137
|
+
readonly min: 0.05;
|
|
138
|
+
readonly max: 100;
|
|
139
|
+
readonly step: 0.01;
|
|
140
|
+
readonly default: 1;
|
|
141
|
+
readonly description: "Scale";
|
|
142
|
+
};
|
|
143
|
+
readonly 'style.rotate': {
|
|
144
|
+
readonly type: "rotation";
|
|
145
|
+
readonly step: 1;
|
|
146
|
+
readonly default: "0deg";
|
|
147
|
+
readonly description: "Rotation";
|
|
148
|
+
};
|
|
149
|
+
readonly 'style.opacity': {
|
|
150
|
+
readonly type: "number";
|
|
151
|
+
readonly min: 0;
|
|
152
|
+
readonly max: 1;
|
|
153
|
+
readonly step: 0.01;
|
|
154
|
+
readonly default: 1;
|
|
155
|
+
readonly description: "Opacity";
|
|
156
|
+
};
|
|
157
|
+
};
|
|
158
|
+
readonly flattenActiveSchema: (schema: SequenceSchema, resolve: import("./flatten-schema.js").ResolveValue) => SequenceSchema;
|
|
159
|
+
readonly getFlatSchemaWithAllKeys: (schema: SequenceSchema) => SequenceSchema;
|
|
92
160
|
readonly useSequenceControlOverride: (key: string) => unknown | undefined;
|
|
93
161
|
readonly RemotionRootContexts: import("react").FC<{
|
|
94
162
|
readonly children: React.ReactNode;
|
|
@@ -292,6 +360,7 @@ export declare const Internals: {
|
|
|
292
360
|
readonly persistCurrentFrame: (time: {
|
|
293
361
|
[x: string]: number;
|
|
294
362
|
}) => void;
|
|
363
|
+
readonly usePlaybackRate: () => PlaybackRateContextValue;
|
|
295
364
|
readonly useTimelineContext: () => TimelineContextValue;
|
|
296
365
|
readonly useTimelineSetFrame: () => ((u: React.SetStateAction<Record<string, number>>) => void);
|
|
297
366
|
readonly isIosSafari: () => boolean;
|
|
@@ -445,6 +514,7 @@ export declare const Internals: {
|
|
|
445
514
|
readonly TimelinePosition: typeof TimelinePosition;
|
|
446
515
|
readonly DelayRenderContextType: import("react").Context<import("./delay-render.js").DelayRenderScope | null>;
|
|
447
516
|
readonly TimelineContext: import("react").Context<TimelineContextValue | null>;
|
|
517
|
+
readonly PlaybackRateContext: import("react").Context<PlaybackRateContextValue | null>;
|
|
448
518
|
readonly AbsoluteTimeContext: import("react").Context<TimelineContextValue | null>;
|
|
449
519
|
readonly RenderAssetManagerProvider: import("react").FC<{
|
|
450
520
|
children: React.ReactNode;
|
|
@@ -465,5 +535,11 @@ export declare const Internals: {
|
|
|
465
535
|
readonly useMemoizedEffects: (effects: import("./index.js").EffectDescriptor<unknown>[]) => import("./index.js").EffectDefinitionAndStack<unknown>[];
|
|
466
536
|
readonly defineEffect: <P, S>(definition: import("./effects/effect-types.js").EffectDefinition<P, S>) => import("./effects/effect-types.js").EffectDefinition<P, S>;
|
|
467
537
|
readonly createDescriptor: <P, S>(definition: import("./effects/effect-types.js").EffectDefinition<P, S>, params: P) => import("./index.js").EffectDescriptor<unknown>;
|
|
538
|
+
readonly computeEffectiveSchemaValuesDotNotation: ({ schema, currentValue, overrideValues, propStatus, }: {
|
|
539
|
+
schema: SequenceSchema;
|
|
540
|
+
currentValue: Record<string, unknown>;
|
|
541
|
+
overrideValues: Record<string, unknown>;
|
|
542
|
+
propStatus: Record<string, CanUpdateSequencePropStatus> | undefined;
|
|
543
|
+
}) => Record<string, unknown>;
|
|
468
544
|
};
|
|
469
|
-
export type { CompositionManagerContext, ResolvedStackLocation, CompProps, LoggingContextValue, MediaVolumeContextValue, RemotionEnvironment, SequenceFieldSchema, SequenceSchema, SerializedJSONWithCustomFields, SetMediaVolumeContextValue, SetTimelineContextValue, TCompMetadata, TComposition, TimelineContextValue, TRenderAsset, TSequence, WatchRemotionStaticFilesPayload, ScheduleAudioNodeOptions, CanUpdateSequencePropStatus, ScheduleAudioNodeResult, NonceHistory, };
|
|
545
|
+
export type { CompositionManagerContext, ResolvedStackLocation, CompProps, LoggingContextValue, MediaVolumeContextValue, RemotionEnvironment, SequenceFieldSchema, SequenceSchema, SerializedJSONWithCustomFields, SetMediaVolumeContextValue, SetTimelineContextValue, PlaybackRateContextValue, TCompMetadata, TComposition, TimelineContextValue, TRenderAsset, TSequence, WatchRemotionStaticFilesPayload, ScheduleAudioNodeOptions, CanUpdateSequencePropStatus, CodeValues, DragOverrides, ScheduleAudioNodeResult, NonceHistory, };
|
package/dist/cjs/internals.js
CHANGED
|
@@ -54,6 +54,7 @@ const run_effect_chain_js_1 = require("./effects/run-effect-chain.js");
|
|
|
54
54
|
const use_effect_chain_state_js_1 = require("./effects/use-effect-chain-state.js");
|
|
55
55
|
const use_memoized_effects_js_1 = require("./effects/use-memoized-effects.js");
|
|
56
56
|
const enable_sequence_stack_traces_js_1 = require("./enable-sequence-stack-traces.js");
|
|
57
|
+
const flatten_schema_js_1 = require("./flatten-schema.js");
|
|
57
58
|
const get_effective_visual_mode_value_js_1 = require("./get-effective-visual-mode-value.js");
|
|
58
59
|
const get_preview_dom_element_js_1 = require("./get-preview-dom-element.js");
|
|
59
60
|
const get_remotion_environment_js_1 = require("./get-remotion-environment.js");
|
|
@@ -74,6 +75,7 @@ const RemotionRoot_js_1 = require("./RemotionRoot.js");
|
|
|
74
75
|
const RenderAssetManager_js_1 = require("./RenderAssetManager.js");
|
|
75
76
|
const resolve_video_config_js_1 = require("./resolve-video-config.js");
|
|
76
77
|
const ResolveCompositionConfig_js_1 = require("./ResolveCompositionConfig.js");
|
|
78
|
+
const sequence_field_schema_js_1 = require("./sequence-field-schema.js");
|
|
77
79
|
const sequence_stack_traces_js_1 = require("./sequence-stack-traces.js");
|
|
78
80
|
const SequenceContext_js_1 = require("./SequenceContext.js");
|
|
79
81
|
const SequenceManager_js_1 = require("./SequenceManager.js");
|
|
@@ -128,8 +130,11 @@ exports.Internals = {
|
|
|
128
130
|
SequenceManager: SequenceManager_js_1.SequenceManager,
|
|
129
131
|
SequenceStackTracesUpdateContext: sequence_stack_traces_js_1.SequenceStackTracesUpdateContext,
|
|
130
132
|
SequenceVisibilityToggleContext: SequenceManager_js_1.SequenceVisibilityToggleContext,
|
|
131
|
-
useSchema: use_schema_js_1.useSchema,
|
|
132
133
|
wrapInSchema: wrap_in_schema_js_1.wrapInSchema,
|
|
134
|
+
sequenceSchema: sequence_field_schema_js_1.sequenceSchema,
|
|
135
|
+
sequenceStyleSchema: sequence_field_schema_js_1.sequenceStyleSchema,
|
|
136
|
+
flattenActiveSchema: flatten_schema_js_1.flattenActiveSchema,
|
|
137
|
+
getFlatSchemaWithAllKeys: flatten_schema_js_1.getFlatSchemaWithAllKeys,
|
|
133
138
|
useSequenceControlOverride: use_sequence_control_override_js_1.useSequenceControlOverride,
|
|
134
139
|
RemotionRootContexts: RemotionRoot_js_1.RemotionRootContexts,
|
|
135
140
|
CompositionManagerProvider: CompositionManagerProvider_js_1.CompositionManagerProvider,
|
|
@@ -179,6 +184,7 @@ exports.Internals = {
|
|
|
179
184
|
REMOTION_STUDIO_CONTAINER_ELEMENT: get_preview_dom_element_js_1.REMOTION_STUDIO_CONTAINER_ELEMENT,
|
|
180
185
|
RenderAssetManager: RenderAssetManager_js_1.RenderAssetManager,
|
|
181
186
|
persistCurrentFrame: timeline_position_state_js_1.persistCurrentFrame,
|
|
187
|
+
usePlaybackRate: timeline_position_state_js_1.usePlaybackRate,
|
|
182
188
|
useTimelineContext: timeline_position_state_js_1.useTimelineContext,
|
|
183
189
|
useTimelineSetFrame: timeline_position_state_js_1.useTimelineSetFrame,
|
|
184
190
|
isIosSafari: video_fragment_js_1.isIosSafari,
|
|
@@ -212,6 +218,7 @@ exports.Internals = {
|
|
|
212
218
|
TimelinePosition,
|
|
213
219
|
DelayRenderContextType: use_delay_render_js_1.DelayRenderContextType,
|
|
214
220
|
TimelineContext: TimelineContext_js_1.TimelineContext,
|
|
221
|
+
PlaybackRateContext: TimelineContext_js_1.PlaybackRateContext,
|
|
215
222
|
AbsoluteTimeContext: TimelineContext_js_1.AbsoluteTimeContext,
|
|
216
223
|
RenderAssetManagerProvider: RenderAssetManager_js_1.RenderAssetManagerProvider,
|
|
217
224
|
getEffectiveVisualModeValue: get_effective_visual_mode_value_js_1.getEffectiveVisualModeValue,
|
|
@@ -221,4 +228,5 @@ exports.Internals = {
|
|
|
221
228
|
useMemoizedEffects: use_memoized_effects_js_1.useMemoizedEffects,
|
|
222
229
|
defineEffect: define_effect_js_1.defineEffect,
|
|
223
230
|
createDescriptor: define_effect_js_1.createDescriptor,
|
|
231
|
+
computeEffectiveSchemaValuesDotNotation: use_schema_js_1.computeEffectiveSchemaValuesDotNotation,
|
|
224
232
|
};
|