remotion 4.0.88 → 4.0.90
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/AbsoluteFill.d.ts +1 -1
- package/dist/cjs/IFrame.d.ts +1 -1
- package/dist/cjs/Img.d.ts +1 -1
- package/dist/cjs/audio/Audio.d.ts +2 -2
- package/dist/cjs/enable-sequence-stack-traces.d.ts +1 -0
- package/dist/cjs/enable-sequence-stack-traces.js +8 -5
- package/dist/cjs/get-remotion-environment.js +9 -38
- package/dist/cjs/index.d.ts +1 -0
- package/dist/cjs/internals.d.ts +5 -1
- package/dist/cjs/internals.js +3 -0
- package/dist/cjs/interpolate-colors.d.ts +3 -0
- package/dist/cjs/interpolate-colors.js +4 -4
- package/dist/cjs/series/flatten-children.d.ts +1 -1
- package/dist/cjs/setup-env-variables.js +7 -7
- package/dist/cjs/version.d.ts +1 -1
- package/dist/cjs/version.js +1 -1
- package/dist/cjs/video/Video.d.ts +2 -2
- package/dist/cjs/video/Video.js +1 -2
- package/dist/cjs/video/seek-until-right.js +3 -3
- package/dist/cjs/wrap-remotion-context.d.ts +1 -1
- package/dist/esm/index.mjs +361 -387
- package/dist/esm/no-react.mjs +3 -3
- package/dist/esm/version.mjs +1 -1
- package/package.json +3 -4
- package/dist/cjs/buffering.d.ts +0 -26
- package/dist/cjs/buffering.js +0 -75
- package/dist/cjs/get-timeline-clip-name.d.ts +0 -1
- package/dist/cjs/get-timeline-clip-name.js +0 -25
- package/dist/cjs/use-buffer.d.ts +0 -5
- package/dist/cjs/use-buffer.js +0 -20
|
@@ -3,4 +3,4 @@ import React from 'react';
|
|
|
3
3
|
* @description An absolutely positioned <div> element with 100% width, height, and a column flex style
|
|
4
4
|
* @see [Documentation](https://www.remotion.dev/docs/absolute-fill)
|
|
5
5
|
*/
|
|
6
|
-
export declare const AbsoluteFill: React.ForwardRefExoticComponent<
|
|
6
|
+
export declare const AbsoluteFill: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
package/dist/cjs/IFrame.d.ts
CHANGED
|
@@ -3,4 +3,4 @@ import React from 'react';
|
|
|
3
3
|
* @description The <IFrame /> can be used like a regular <iframe> HTML tag.
|
|
4
4
|
* @see [Documentation](https://www.remotion.dev/docs/iframe)
|
|
5
5
|
*/
|
|
6
|
-
export declare const IFrame: React.ForwardRefExoticComponent<
|
|
6
|
+
export declare const IFrame: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.IframeHTMLAttributes<HTMLIFrameElement>, HTMLIFrameElement>, "ref"> & React.RefAttributes<HTMLIFrameElement>>;
|
package/dist/cjs/Img.d.ts
CHANGED
|
@@ -7,4 +7,4 @@ export type ImgProps = Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTML
|
|
|
7
7
|
* @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.
|
|
8
8
|
* @see [Documentation](https://www.remotion.dev/docs/img)
|
|
9
9
|
*/
|
|
10
|
-
export declare const Img: React.ForwardRefExoticComponent<
|
|
10
|
+
export declare const Img: React.ForwardRefExoticComponent<Omit<ImgProps, "ref"> & React.RefAttributes<HTMLImageElement>>;
|
|
@@ -4,7 +4,7 @@ import type { RemotionMainAudioProps } from './props.js';
|
|
|
4
4
|
* @description With this component, you can add audio to your video. All audio formats which are supported by Chromium are supported by the component.
|
|
5
5
|
* @see [Documentation](https://www.remotion.dev/docs/audio)
|
|
6
6
|
*/
|
|
7
|
-
export declare const Audio: React.ForwardRefExoticComponent<
|
|
7
|
+
export declare const Audio: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>, "nonce" | "onEnded" | "onResize" | "onResizeCapture" | "autoPlay" | "controls"> & {
|
|
8
8
|
name?: string | undefined;
|
|
9
9
|
volume?: import("../volume-prop.js").VolumeProp | undefined;
|
|
10
10
|
playbackRate?: number | undefined;
|
|
@@ -18,4 +18,4 @@ export declare const Audio: React.ForwardRefExoticComponent<Pick<Omit<React.Deta
|
|
|
18
18
|
* @deprecated For internal use only
|
|
19
19
|
*/
|
|
20
20
|
stack?: string | undefined;
|
|
21
|
-
}, "
|
|
21
|
+
}, "ref"> & React.RefAttributes<HTMLAudioElement>>;
|
|
@@ -3,12 +3,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.addSequenceStackTraces = void 0;
|
|
6
|
+
exports.addSequenceStackTraces = exports.enableSequenceStackTraces = void 0;
|
|
7
7
|
const react_1 = __importDefault(require("react"));
|
|
8
8
|
const get_remotion_environment_1 = require("./get-remotion-environment");
|
|
9
9
|
const originalCreateElement = react_1.default.createElement;
|
|
10
10
|
const componentsToAddStacksTo = [];
|
|
11
|
+
// Gets called when a new component is added,
|
|
12
|
+
// also when the Studio is mounted
|
|
11
13
|
const enableSequenceStackTraces = () => {
|
|
14
|
+
if (!(0, get_remotion_environment_1.getRemotionEnvironment)().isStudio) {
|
|
15
|
+
return;
|
|
16
|
+
}
|
|
12
17
|
const proxy = new Proxy(originalCreateElement, {
|
|
13
18
|
apply(target, thisArg, argArray) {
|
|
14
19
|
if (componentsToAddStacksTo.includes(argArray[0])) {
|
|
@@ -24,11 +29,9 @@ const enableSequenceStackTraces = () => {
|
|
|
24
29
|
});
|
|
25
30
|
react_1.default.createElement = proxy;
|
|
26
31
|
};
|
|
32
|
+
exports.enableSequenceStackTraces = enableSequenceStackTraces;
|
|
27
33
|
const addSequenceStackTraces = (component) => {
|
|
28
|
-
if (!(0, get_remotion_environment_1.getRemotionEnvironment)().isStudio) {
|
|
29
|
-
return;
|
|
30
|
-
}
|
|
31
34
|
componentsToAddStacksTo.push(component);
|
|
32
|
-
enableSequenceStackTraces();
|
|
35
|
+
(0, exports.enableSequenceStackTraces)();
|
|
33
36
|
};
|
|
34
37
|
exports.addSequenceStackTraces = addSequenceStackTraces;
|
|
@@ -6,45 +6,16 @@ exports.getRemotionEnvironment = void 0;
|
|
|
6
6
|
* @see [Documentation](https://www.remotion.dev/docs/get-remotion-environment)
|
|
7
7
|
*/
|
|
8
8
|
const getRemotionEnvironment = () => {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
typeof window.
|
|
14
|
-
|
|
15
|
-
return {
|
|
16
|
-
isStudio: false,
|
|
17
|
-
isRendering: true,
|
|
18
|
-
isPlayer: false,
|
|
19
|
-
};
|
|
20
|
-
}
|
|
21
|
-
return {
|
|
22
|
-
isStudio: false,
|
|
23
|
-
isRendering: false,
|
|
24
|
-
isPlayer: typeof window !== 'undefined' && window.remotion_isPlayer,
|
|
25
|
-
};
|
|
26
|
-
}
|
|
27
|
-
// The Vitest framework sets NODE_ENV as test.
|
|
28
|
-
// Right now we don't need to treat it in a special
|
|
29
|
-
// way which is good - defaulting to `rendering`.
|
|
30
|
-
if (process.env.NODE_ENV === 'test') {
|
|
31
|
-
return {
|
|
32
|
-
isStudio: false,
|
|
33
|
-
isRendering: true,
|
|
34
|
-
isPlayer: false,
|
|
35
|
-
};
|
|
36
|
-
}
|
|
37
|
-
if (typeof window !== 'undefined' && window.remotion_isPlayer) {
|
|
38
|
-
return {
|
|
39
|
-
isStudio: false,
|
|
40
|
-
isRendering: false,
|
|
41
|
-
isPlayer: true,
|
|
42
|
-
};
|
|
43
|
-
}
|
|
9
|
+
const isPlayer = typeof window !== 'undefined' && window.remotion_isPlayer;
|
|
10
|
+
const isRendering = process.env.NODE_ENV === 'test' ||
|
|
11
|
+
(process.env.NODE_ENV === 'production' &&
|
|
12
|
+
typeof window !== 'undefined' &&
|
|
13
|
+
typeof window.remotion_puppeteerTimeout !== 'undefined');
|
|
14
|
+
const isStudio = typeof window !== 'undefined' && window.remotion_isStudio;
|
|
44
15
|
return {
|
|
45
|
-
isStudio
|
|
46
|
-
isRendering
|
|
47
|
-
isPlayer
|
|
16
|
+
isStudio,
|
|
17
|
+
isRendering,
|
|
18
|
+
isPlayer,
|
|
48
19
|
};
|
|
49
20
|
};
|
|
50
21
|
exports.getRemotionEnvironment = getRemotionEnvironment;
|
package/dist/cjs/index.d.ts
CHANGED
|
@@ -42,6 +42,7 @@ declare global {
|
|
|
42
42
|
remotion_collectAssets: () => TRenderAsset[];
|
|
43
43
|
remotion_getClipRegion: () => ClipRegion | null;
|
|
44
44
|
remotion_isPlayer: boolean;
|
|
45
|
+
remotion_isStudio: boolean;
|
|
45
46
|
remotion_isBuilding: undefined | (() => void);
|
|
46
47
|
remotion_finishedBuilding: undefined | (() => void);
|
|
47
48
|
siteVersion: '10';
|
package/dist/cjs/internals.d.ts
CHANGED
|
@@ -33,7 +33,7 @@ export declare const Internals: {
|
|
|
33
33
|
readonly truthy: typeof truthy;
|
|
34
34
|
readonly SequenceContext: import("react").Context<import("./SequenceContext.js").SequenceContextType | null>;
|
|
35
35
|
readonly useRemotionContexts: typeof useRemotionContexts;
|
|
36
|
-
readonly RemotionContextProvider: (props: import("./wrap-remotion-context.js").RemotionContextProviderProps) => JSX.Element;
|
|
36
|
+
readonly RemotionContextProvider: (props: import("./wrap-remotion-context.js").RemotionContextProviderProps) => import("react/jsx-runtime.js").JSX.Element;
|
|
37
37
|
readonly CSSUtils: typeof CSSUtils;
|
|
38
38
|
readonly setupEnvVariables: () => void;
|
|
39
39
|
readonly MediaVolumeContext: import("react").Context<MediaVolumeContextValue>;
|
|
@@ -128,5 +128,9 @@ export declare const Internals: {
|
|
|
128
128
|
readonly WATCH_REMOTION_STATIC_FILES: "remotion_staticFilesChanged";
|
|
129
129
|
readonly addSequenceStackTraces: (component: unknown) => void;
|
|
130
130
|
readonly useMediaStartsAt: () => number;
|
|
131
|
+
readonly enableSequenceStackTraces: () => void;
|
|
132
|
+
readonly colorNames: {
|
|
133
|
+
[key: string]: number;
|
|
134
|
+
};
|
|
131
135
|
};
|
|
132
136
|
export type { TComposition, TimelinePosition as Timeline, TCompMetadata, TSequence, TRenderAsset as TAsset, TimelineContextValue, SetTimelineContextValue, CompProps, CompositionManagerContext, MediaVolumeContextValue, SetMediaVolumeContextValue, RemotionEnvironment, SerializedJSONWithCustomFields, WatchRemotionStaticFilesPayload, };
|
package/dist/cjs/internals.js
CHANGED
|
@@ -36,6 +36,7 @@ const enable_sequence_stack_traces_js_1 = require("./enable-sequence-stack-trace
|
|
|
36
36
|
const get_preview_dom_element_js_1 = require("./get-preview-dom-element.js");
|
|
37
37
|
const get_remotion_environment_js_1 = require("./get-remotion-environment.js");
|
|
38
38
|
const input_props_serialization_js_1 = require("./input-props-serialization.js");
|
|
39
|
+
const interpolate_colors_js_1 = require("./interpolate-colors.js");
|
|
39
40
|
const is_player_js_1 = require("./is-player.js");
|
|
40
41
|
const NativeLayers_js_1 = require("./NativeLayers.js");
|
|
41
42
|
const nonce_js_1 = require("./nonce.js");
|
|
@@ -119,4 +120,6 @@ exports.Internals = {
|
|
|
119
120
|
WATCH_REMOTION_STATIC_FILES: watch_static_file_js_1.WATCH_REMOTION_STATIC_FILES,
|
|
120
121
|
addSequenceStackTraces: enable_sequence_stack_traces_js_1.addSequenceStackTraces,
|
|
121
122
|
useMediaStartsAt: use_audio_frame_js_1.useMediaStartsAt,
|
|
123
|
+
enableSequenceStackTraces: enable_sequence_stack_traces_js_1.enableSequenceStackTraces,
|
|
124
|
+
colorNames: interpolate_colors_js_1.colorNames,
|
|
122
125
|
};
|
|
@@ -2,6 +2,9 @@
|
|
|
2
2
|
* Copied from:
|
|
3
3
|
* https://github.com/software-mansion/react-native-reanimated/blob/master/src/reanimated2/Colors.ts
|
|
4
4
|
*/
|
|
5
|
+
export declare const colorNames: {
|
|
6
|
+
[key: string]: number;
|
|
7
|
+
};
|
|
5
8
|
export declare function processColor(color: string): number;
|
|
6
9
|
/**
|
|
7
10
|
* @description This function allows you to map a range of values to colors using a concise syntax.
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* https://github.com/software-mansion/react-native-reanimated/blob/master/src/reanimated2/Colors.ts
|
|
5
5
|
*/
|
|
6
6
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
7
|
-
exports.interpolateColors = exports.processColor = void 0;
|
|
7
|
+
exports.interpolateColors = exports.processColor = exports.colorNames = void 0;
|
|
8
8
|
/* eslint no-bitwise: 0 */
|
|
9
9
|
const interpolate_js_1 = require("./interpolate.js");
|
|
10
10
|
// var INTEGER = '[-+]?\\d+';
|
|
@@ -101,7 +101,7 @@ function parsePercentage(str) {
|
|
|
101
101
|
}
|
|
102
102
|
return int / 100;
|
|
103
103
|
}
|
|
104
|
-
|
|
104
|
+
exports.colorNames = {
|
|
105
105
|
transparent: 0x00000000,
|
|
106
106
|
// http://www.w3.org/TR/css3-color/#svg-color
|
|
107
107
|
aliceblue: 0xf0f8ffff,
|
|
@@ -263,8 +263,8 @@ function normalizeColor(color) {
|
|
|
263
263
|
return Number.parseInt(match[1] + 'ff', 16) >>> 0;
|
|
264
264
|
}
|
|
265
265
|
}
|
|
266
|
-
if (
|
|
267
|
-
return
|
|
266
|
+
if (exports.colorNames[color] !== undefined) {
|
|
267
|
+
return exports.colorNames[color];
|
|
268
268
|
}
|
|
269
269
|
if (matchers.rgb) {
|
|
270
270
|
if ((match = matchers.rgb.exec(color))) {
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
export declare const flattenChildren: (children: React.ReactNode) => (string | number | React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.
|
|
2
|
+
export declare const flattenChildren: (children: React.ReactNode) => (string | number | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal)[];
|
|
@@ -10,14 +10,14 @@ const getEnvVariables = () => {
|
|
|
10
10
|
}
|
|
11
11
|
return { ...JSON.parse(param), NODE_ENV: process.env.NODE_ENV };
|
|
12
12
|
}
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
NODE_ENV: 'development',
|
|
18
|
-
};
|
|
13
|
+
// For the Studio, we already set the environment variables in index-html.ts.
|
|
14
|
+
// We just add NODE_ENV here.
|
|
15
|
+
if (!process.env.NODE_ENV) {
|
|
16
|
+
throw new Error('process.env.NODE_ENV is not set');
|
|
19
17
|
}
|
|
20
|
-
|
|
18
|
+
return {
|
|
19
|
+
NODE_ENV: process.env.NODE_ENV,
|
|
20
|
+
};
|
|
21
21
|
};
|
|
22
22
|
const setupEnvVariables = () => {
|
|
23
23
|
const env = getEnvVariables();
|
package/dist/cjs/version.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const VERSION = "4.0.
|
|
1
|
+
export declare const VERSION = "4.0.90";
|
package/dist/cjs/version.js
CHANGED
|
@@ -4,7 +4,7 @@ import type { RemotionMainVideoProps } from './props.js';
|
|
|
4
4
|
* @description allows you to include a video file in your Remotion project. It wraps the native HTMLVideoElement.
|
|
5
5
|
* @see [Documentation](https://www.remotion.dev/docs/video)
|
|
6
6
|
*/
|
|
7
|
-
export declare const Video:
|
|
7
|
+
export declare const Video: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, "nonce" | "onEnded" | "autoPlay" | "controls"> & {
|
|
8
8
|
name?: string | undefined;
|
|
9
9
|
volume?: import("../volume-prop.js").VolumeProp | undefined;
|
|
10
10
|
playbackRate?: number | undefined;
|
|
@@ -16,4 +16,4 @@ export declare const Video: (props: Omit<React.DetailedHTMLProps<React.VideoHTML
|
|
|
16
16
|
* @deprecated For internal use only
|
|
17
17
|
*/
|
|
18
18
|
stack?: string | undefined;
|
|
19
|
-
} & React.RefAttributes<HTMLVideoElement
|
|
19
|
+
}, "ref"> & React.RefAttributes<HTMLVideoElement>>;
|
package/dist/cjs/video/Video.js
CHANGED
|
@@ -55,10 +55,9 @@ const VideoForwardingFunction = (props, ref) => {
|
|
|
55
55
|
}
|
|
56
56
|
return ((0, jsx_runtime_1.jsx)(VideoForDevelopment_js_1.VideoForDevelopment, { onlyWarnForMediaSeekingError: false, ...otherProps, ref: ref, onDuration: onDuration, _remotionInternalStack: stack !== null && stack !== void 0 ? stack : null, _remotionInternalNativeLoopPassed: _remotionInternalNativeLoopPassed !== null && _remotionInternalNativeLoopPassed !== void 0 ? _remotionInternalNativeLoopPassed : false }));
|
|
57
57
|
};
|
|
58
|
-
const forward = react_1.forwardRef;
|
|
59
58
|
/**
|
|
60
59
|
* @description allows you to include a video file in your Remotion project. It wraps the native HTMLVideoElement.
|
|
61
60
|
* @see [Documentation](https://www.remotion.dev/docs/video)
|
|
62
61
|
*/
|
|
63
|
-
exports.Video =
|
|
62
|
+
exports.Video = (0, react_1.forwardRef)(VideoForwardingFunction);
|
|
64
63
|
(0, enable_sequence_stack_traces_js_1.addSequenceStackTraces)(exports.Video);
|
|
@@ -44,7 +44,7 @@ const seekToTimeMultipleUntilRight = (element, desiredTime, fps) => {
|
|
|
44
44
|
const firstSeek = (0, exports.seekToTime)(element, desiredTime + threshold);
|
|
45
45
|
firstSeek.wait.then((seekedTo) => {
|
|
46
46
|
const difference = Math.abs(desiredTime - seekedTo);
|
|
47
|
-
if (difference
|
|
47
|
+
if (difference <= threshold) {
|
|
48
48
|
return resolve();
|
|
49
49
|
}
|
|
50
50
|
const sign = desiredTime > seekedTo ? 1 : -1;
|
|
@@ -53,12 +53,12 @@ const seekToTimeMultipleUntilRight = (element, desiredTime, fps) => {
|
|
|
53
53
|
newSeek.wait
|
|
54
54
|
.then((newTime) => {
|
|
55
55
|
const newDifference = Math.abs(desiredTime - newTime);
|
|
56
|
-
if (newDifference
|
|
56
|
+
if (newDifference <= threshold) {
|
|
57
57
|
return resolve();
|
|
58
58
|
}
|
|
59
59
|
const thirdSeek = (0, exports.seekToTime)(element, desiredTime);
|
|
60
60
|
currentCancel = thirdSeek.cancel;
|
|
61
|
-
thirdSeek.wait.then(() => {
|
|
61
|
+
return thirdSeek.wait.then(() => {
|
|
62
62
|
resolve();
|
|
63
63
|
});
|
|
64
64
|
})
|
|
@@ -28,4 +28,4 @@ export interface RemotionContextProviderProps {
|
|
|
28
28
|
contexts: ReturnType<typeof useRemotionContexts>;
|
|
29
29
|
children: React.ReactNode;
|
|
30
30
|
}
|
|
31
|
-
export declare const RemotionContextProvider: (props: RemotionContextProviderProps) => JSX.Element;
|
|
31
|
+
export declare const RemotionContextProvider: (props: RemotionContextProviderProps) => import("react/jsx-runtime.js").JSX.Element;
|