remotion 4.0.0-preload.13 → 4.0.0-preload.17
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-build.log +2 -2
- package/dist/Img.js +20 -24
- package/dist/Still.d.ts +1 -0
- package/dist/index.d.ts +3 -2
- package/dist/index.js +3 -2
- package/dist/internals.d.ts +2 -0
- package/dist/internals.js +2 -0
- package/dist/validate-media-props.d.ts +2 -1
- package/dist/video/OffthreadVideo.d.ts +2 -2
- package/dist/video/OffthreadVideo.js +17 -82
- package/dist/video/OffthreadVideoForRendering.d.ts +3 -0
- package/dist/video/OffthreadVideoForRendering.js +87 -0
- package/dist/video/get-current-time.d.ts +5 -0
- package/dist/video/get-current-time.js +10 -2
- package/dist/video/index.d.ts +3 -2
- package/dist/video/index.js +5 -12
- package/dist/video/props.d.ts +10 -1
- package/package.json +2 -2
- package/.turbo/turbo-lint.log +0 -11
- package/.turbo/turbo-test.log +0 -63
package/.turbo/turbo-build.log
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
[35mremotion:build: [0mcache hit, replaying output [
|
|
1
|
+
[35mremotion:build: [0mcache hit, replaying output [2m0ed27fb7f3545e9e[0m
|
|
2
2
|
[35mremotion:build: [0m
|
|
3
|
-
[35mremotion:build: [0m> remotion@3.0.
|
|
3
|
+
[35mremotion:build: [0m> remotion@3.0.10 build /Users/jonathanburger/remotion/packages/core
|
|
4
4
|
[35mremotion:build: [0m> tsc -d
|
|
5
5
|
[35mremotion:build: [0m
|
package/dist/Img.js
CHANGED
|
@@ -4,43 +4,39 @@ exports.Img = void 0;
|
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
5
|
const react_1 = require("react");
|
|
6
6
|
const delay_render_1 = require("./delay-render");
|
|
7
|
-
const ImgRefForwarding = ({
|
|
8
|
-
const
|
|
9
|
-
|
|
7
|
+
const ImgRefForwarding = ({ onError, ...props }, ref) => {
|
|
8
|
+
const imageRef = (0, react_1.useRef)(null);
|
|
9
|
+
(0, react_1.useImperativeHandle)(ref, () => {
|
|
10
|
+
return imageRef.current;
|
|
10
11
|
});
|
|
11
|
-
(0, react_1.useEffect)(() => {
|
|
12
|
-
if (ref &&
|
|
13
|
-
ref.current.complete &&
|
|
14
|
-
handle) {
|
|
15
|
-
(0, delay_render_1.continueRender)(handle);
|
|
16
|
-
}
|
|
17
|
-
}, [handle, ref]);
|
|
18
|
-
const didLoad = (0, react_1.useCallback)((e) => {
|
|
19
|
-
if (handle) {
|
|
20
|
-
(0, delay_render_1.continueRender)(handle);
|
|
21
|
-
}
|
|
22
|
-
onLoad === null || onLoad === void 0 ? void 0 : onLoad(e);
|
|
23
|
-
}, [handle, onLoad]);
|
|
24
12
|
const didGetError = (0, react_1.useCallback)((e) => {
|
|
25
|
-
|
|
26
|
-
(0, delay_render_1.continueRender)(handle);
|
|
27
|
-
}
|
|
13
|
+
var _a;
|
|
28
14
|
if (onError) {
|
|
29
15
|
onError(e);
|
|
30
16
|
}
|
|
31
17
|
else {
|
|
32
|
-
console.error('Error loading image:', e, 'Handle the event using the onError() prop to make this message disappear.');
|
|
18
|
+
console.error('Error loading image with src:', (_a = imageRef.current) === null || _a === void 0 ? void 0 : _a.src, e, 'Handle the event using the onError() prop to make this message disappear.');
|
|
33
19
|
}
|
|
34
|
-
}, [
|
|
20
|
+
}, [onError]);
|
|
35
21
|
// If image source switches, make new handle
|
|
36
|
-
(0, react_1.
|
|
22
|
+
(0, react_1.useLayoutEffect)(() => {
|
|
37
23
|
const newHandle = (0, delay_render_1.delayRender)('Loading <Img> with src=' + props.src);
|
|
38
|
-
|
|
24
|
+
const { current } = imageRef;
|
|
25
|
+
const didLoad = () => {
|
|
26
|
+
(0, delay_render_1.continueRender)(newHandle);
|
|
27
|
+
};
|
|
28
|
+
if (current === null || current === void 0 ? void 0 : current.complete) {
|
|
29
|
+
(0, delay_render_1.continueRender)(newHandle);
|
|
30
|
+
}
|
|
31
|
+
else {
|
|
32
|
+
current === null || current === void 0 ? void 0 : current.addEventListener('load', didLoad, { once: true });
|
|
33
|
+
}
|
|
39
34
|
// If tag gets unmounted, clear pending handles because image is not going to load
|
|
40
35
|
return () => {
|
|
36
|
+
current === null || current === void 0 ? void 0 : current.removeEventListener('load', didLoad);
|
|
41
37
|
(0, delay_render_1.continueRender)(newHandle);
|
|
42
38
|
};
|
|
43
39
|
}, [props.src]);
|
|
44
|
-
return (0, jsx_runtime_1.jsx)("img", { ...props, ref:
|
|
40
|
+
return (0, jsx_runtime_1.jsx)("img", { ...props, ref: imageRef, onError: didGetError }, void 0);
|
|
45
41
|
};
|
|
46
42
|
exports.Img = (0, react_1.forwardRef)(ImgRefForwarding);
|
package/dist/Still.d.ts
CHANGED
package/dist/index.d.ts
CHANGED
|
@@ -11,13 +11,14 @@ declare global {
|
|
|
11
11
|
remotion_cwd: string;
|
|
12
12
|
remotion_setFrame: (frame: number) => void;
|
|
13
13
|
remotion_initialFrame: number;
|
|
14
|
+
remotion_proxyPort: number;
|
|
14
15
|
remotion_puppeteerTimeout: number;
|
|
15
16
|
remotion_inputProps: string;
|
|
16
17
|
remotion_envVariables: string;
|
|
17
18
|
remotion_collectAssets: () => TAsset[];
|
|
18
19
|
remotion_isPlayer: boolean;
|
|
19
20
|
remotion_imported: boolean;
|
|
20
|
-
siteVersion: '
|
|
21
|
+
siteVersion: '3';
|
|
21
22
|
}
|
|
22
23
|
}
|
|
23
24
|
export declare type BundleState = {
|
|
@@ -51,7 +52,7 @@ export * from './spring';
|
|
|
51
52
|
export { staticFile } from './static-file';
|
|
52
53
|
export * from './Still';
|
|
53
54
|
export type { PlayableMediaTag } from './timeline-position-state';
|
|
54
|
-
export
|
|
55
|
+
export { useCurrentFrame } from './use-frame';
|
|
55
56
|
export * from './use-video-config';
|
|
56
57
|
export * from './video';
|
|
57
58
|
export * from './video-config';
|
package/dist/index.js
CHANGED
|
@@ -10,7 +10,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
|
10
10
|
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
11
11
|
};
|
|
12
12
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
13
|
-
exports.staticFile = exports.Series = exports.Sequence = exports.registerRoot = exports.Loop = exports.interpolateColors = exports.getInputProps = void 0;
|
|
13
|
+
exports.useCurrentFrame = exports.staticFile = exports.Series = exports.Sequence = exports.registerRoot = exports.Loop = exports.interpolateColors = exports.getInputProps = void 0;
|
|
14
14
|
require("./asset-types");
|
|
15
15
|
const multiple_versions_warning_1 = require("./multiple-versions-warning");
|
|
16
16
|
(0, multiple_versions_warning_1.checkMultipleRemotionVersions)();
|
|
@@ -42,7 +42,8 @@ __exportStar(require("./spring"), exports);
|
|
|
42
42
|
var static_file_1 = require("./static-file");
|
|
43
43
|
Object.defineProperty(exports, "staticFile", { enumerable: true, get: function () { return static_file_1.staticFile; } });
|
|
44
44
|
__exportStar(require("./Still"), exports);
|
|
45
|
-
|
|
45
|
+
var use_frame_1 = require("./use-frame");
|
|
46
|
+
Object.defineProperty(exports, "useCurrentFrame", { enumerable: true, get: function () { return use_frame_1.useCurrentFrame; } });
|
|
46
47
|
__exportStar(require("./use-video-config"), exports);
|
|
47
48
|
__exportStar(require("./video"), exports);
|
|
48
49
|
__exportStar(require("./video-config"), exports);
|
package/dist/internals.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
1
2
|
import { CompProps } from './Composition';
|
|
2
3
|
import { CompositionManagerContext, RenderAssetInfo, TAsset, TCompMetadata, TComposition, TSequence } from './CompositionManager';
|
|
3
4
|
import * as AssetCompression from './compress-assets';
|
|
@@ -144,5 +145,6 @@ export declare const Internals: {
|
|
|
144
145
|
getCompositions: () => TCompMetadata[];
|
|
145
146
|
}>;
|
|
146
147
|
DELAY_RENDER_CALLSTACK_TOKEN: string;
|
|
148
|
+
useAbsoluteCurrentFrame: () => number;
|
|
147
149
|
};
|
|
148
150
|
export type { TComposition, Timeline, TCompMetadata, TSequence, WebpackOverrideFn, TAsset, RenderAssetInfo, TimelineContextValue, SetTimelineContextValue, TimelineInOutContextValue, SetTimelineInOutContextValue, CompProps, CompositionManagerContext, MediaVolumeContextValue, SetMediaVolumeContextValue, RemotionEnvironment, ProResProfile, OpenGlRenderer, };
|
package/dist/internals.js
CHANGED
|
@@ -61,6 +61,7 @@ const TimelineInOutPosition = __importStar(require("./timeline-inout-position-st
|
|
|
61
61
|
const TimelinePosition = __importStar(require("./timeline-position-state"));
|
|
62
62
|
const timeout_2 = require("./timeout");
|
|
63
63
|
const truthy_1 = require("./truthy");
|
|
64
|
+
const use_frame_1 = require("./use-frame");
|
|
64
65
|
const use_lazy_component_1 = require("./use-lazy-component");
|
|
65
66
|
const use_unsafe_video_config_1 = require("./use-unsafe-video-config");
|
|
66
67
|
const use_video_1 = require("./use-video");
|
|
@@ -161,4 +162,5 @@ exports.Internals = {
|
|
|
161
162
|
getPreviewDomElement: get_preview_dom_element_1.getPreviewDomElement,
|
|
162
163
|
compositionsRef: CompositionManager_1.compositionsRef,
|
|
163
164
|
DELAY_RENDER_CALLSTACK_TOKEN: delay_render_1.DELAY_RENDER_CALLSTACK_TOKEN,
|
|
165
|
+
useAbsoluteCurrentFrame: use_frame_1.useAbsoluteCurrentFrame,
|
|
164
166
|
};
|
|
@@ -1,3 +1,4 @@
|
|
|
1
1
|
import { RemotionAudioProps } from './audio';
|
|
2
2
|
import { RemotionVideoProps } from './video';
|
|
3
|
-
|
|
3
|
+
import { OffthreadVideoProps } from './video/props';
|
|
4
|
+
export declare const validateMediaProps: (props: RemotionVideoProps | RemotionAudioProps | OffthreadVideoProps, component: 'Video' | 'Audio') => void;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import {
|
|
3
|
-
export declare const OffthreadVideo: React.
|
|
2
|
+
import { OffthreadVideoProps, RemotionMainVideoProps } from './props';
|
|
3
|
+
export declare const OffthreadVideo: React.FC<OffthreadVideoProps & RemotionMainVideoProps>;
|
|
@@ -2,89 +2,24 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.OffthreadVideo = void 0;
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
-
const
|
|
6
|
-
const absolute_src_1 = require("../absolute-src");
|
|
7
|
-
const use_audio_frame_1 = require("../audio/use-audio-frame");
|
|
8
|
-
const CompositionManager_1 = require("../CompositionManager");
|
|
9
|
-
const Img_1 = require("../Img");
|
|
10
|
-
const random_1 = require("../random");
|
|
5
|
+
const get_environment_1 = require("../get-environment");
|
|
11
6
|
const sequencing_1 = require("../sequencing");
|
|
12
|
-
const
|
|
13
|
-
const
|
|
14
|
-
const
|
|
15
|
-
const
|
|
16
|
-
const
|
|
17
|
-
const
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
const mediaStartsAt = (0, use_audio_frame_1.useMediaStartsAt)();
|
|
24
|
-
(0, react_1.useImperativeHandle)(ref, () => {
|
|
25
|
-
return imageRef.current;
|
|
26
|
-
});
|
|
27
|
-
const { registerAsset, unregisterAsset } = (0, react_1.useContext)(CompositionManager_1.CompositionManager);
|
|
28
|
-
if (!src) {
|
|
29
|
-
throw new TypeError('No `src` was passed to <OffthreadVideo>.');
|
|
7
|
+
const validate_media_props_1 = require("../validate-media-props");
|
|
8
|
+
const validate_start_from_props_1 = require("../validate-start-from-props");
|
|
9
|
+
const OffthreadVideoForRendering_1 = require("./OffthreadVideoForRendering");
|
|
10
|
+
const VideoForDevelopment_1 = require("./VideoForDevelopment");
|
|
11
|
+
const OffthreadVideo = (props) => {
|
|
12
|
+
const { startFrom, endAt, ...otherProps } = props;
|
|
13
|
+
if (typeof startFrom !== 'undefined' || typeof endAt !== 'undefined') {
|
|
14
|
+
(0, validate_start_from_props_1.validateStartFromProps)(startFrom, endAt);
|
|
15
|
+
const startFromFrameNo = startFrom !== null && startFrom !== void 0 ? startFrom : 0;
|
|
16
|
+
const endAtFrameNo = endAt !== null && endAt !== void 0 ? endAt : Infinity;
|
|
17
|
+
return ((0, jsx_runtime_1.jsx)(sequencing_1.Sequence, { layout: "none", from: 0 - startFromFrameNo, showInTimeline: false, durationInFrames: endAtFrameNo, children: (0, jsx_runtime_1.jsx)(exports.OffthreadVideo, { ...otherProps }, void 0) }, void 0));
|
|
30
18
|
}
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
src,
|
|
35
|
-
props.muted,
|
|
36
|
-
sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.cumulatedFrom,
|
|
37
|
-
sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.relativeFrom,
|
|
38
|
-
sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.durationInFrames,
|
|
39
|
-
]);
|
|
40
|
-
if (!videoConfig) {
|
|
41
|
-
throw new Error('No video config found');
|
|
19
|
+
(0, validate_media_props_1.validateMediaProps)(props, 'Video');
|
|
20
|
+
if ((0, get_environment_1.getRemotionEnvironment)() === 'rendering') {
|
|
21
|
+
return (0, jsx_runtime_1.jsx)(OffthreadVideoForRendering_1.OffthreadVideoForRendering, { ...otherProps }, void 0);
|
|
42
22
|
}
|
|
43
|
-
|
|
44
|
-
volume: volumeProp,
|
|
45
|
-
frame: volumePropsFrame,
|
|
46
|
-
mediaVolume: 1,
|
|
47
|
-
});
|
|
48
|
-
(0, react_1.useEffect)(() => {
|
|
49
|
-
if (!src) {
|
|
50
|
-
throw new Error('No src passed');
|
|
51
|
-
}
|
|
52
|
-
if (props.muted) {
|
|
53
|
-
return;
|
|
54
|
-
}
|
|
55
|
-
registerAsset({
|
|
56
|
-
type: 'video',
|
|
57
|
-
src: (0, absolute_src_1.getAbsoluteSrc)(src),
|
|
58
|
-
id,
|
|
59
|
-
frame: absoluteFrame,
|
|
60
|
-
volume,
|
|
61
|
-
mediaFrame: frame,
|
|
62
|
-
playbackRate: playbackRate !== null && playbackRate !== void 0 ? playbackRate : 1,
|
|
63
|
-
});
|
|
64
|
-
return () => unregisterAsset(id);
|
|
65
|
-
}, [
|
|
66
|
-
props.muted,
|
|
67
|
-
src,
|
|
68
|
-
registerAsset,
|
|
69
|
-
id,
|
|
70
|
-
unregisterAsset,
|
|
71
|
-
volume,
|
|
72
|
-
frame,
|
|
73
|
-
absoluteFrame,
|
|
74
|
-
playbackRate,
|
|
75
|
-
]);
|
|
76
|
-
const currentTime = (0, react_1.useMemo)(() => {
|
|
77
|
-
return (0, get_current_time_1.getMediaTime)({
|
|
78
|
-
fps: videoConfig.fps,
|
|
79
|
-
frame,
|
|
80
|
-
src,
|
|
81
|
-
playbackRate: playbackRate || 1,
|
|
82
|
-
startFrom: -mediaStartsAt,
|
|
83
|
-
});
|
|
84
|
-
}, [frame, mediaStartsAt, playbackRate, src, videoConfig.fps]);
|
|
85
|
-
const actualSrc = (0, react_1.useMemo)(() => {
|
|
86
|
-
return `https://remotionoffthreadvideo.com/proxy?src=${encodeURIComponent(src)}&time=${encodeURIComponent(currentTime)}`;
|
|
87
|
-
}, [currentTime, src]);
|
|
88
|
-
return (0, jsx_runtime_1.jsx)(Img_1.Img, { ref: imageRef, src: actualSrc, ...props, onError: onError }, void 0);
|
|
23
|
+
return (0, jsx_runtime_1.jsx)(VideoForDevelopment_1.VideoForDevelopment, { ...otherProps }, void 0);
|
|
89
24
|
};
|
|
90
|
-
exports.OffthreadVideo =
|
|
25
|
+
exports.OffthreadVideo = OffthreadVideo;
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.OffthreadVideoForRendering = void 0;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const react_1 = require("react");
|
|
6
|
+
const absolute_src_1 = require("../absolute-src");
|
|
7
|
+
const use_audio_frame_1 = require("../audio/use-audio-frame");
|
|
8
|
+
const CompositionManager_1 = require("../CompositionManager");
|
|
9
|
+
const Img_1 = require("../Img");
|
|
10
|
+
const random_1 = require("../random");
|
|
11
|
+
const sequencing_1 = require("../sequencing");
|
|
12
|
+
const use_frame_1 = require("../use-frame");
|
|
13
|
+
const use_unsafe_video_config_1 = require("../use-unsafe-video-config");
|
|
14
|
+
const volume_prop_1 = require("../volume-prop");
|
|
15
|
+
const get_current_time_1 = require("./get-current-time");
|
|
16
|
+
const OffthreadVideoForRendering = ({ onError, volume: volumeProp, playbackRate, src, muted, ...props }) => {
|
|
17
|
+
const absoluteFrame = (0, use_frame_1.useAbsoluteCurrentFrame)();
|
|
18
|
+
const frame = (0, use_frame_1.useCurrentFrame)();
|
|
19
|
+
const volumePropsFrame = (0, use_audio_frame_1.useFrameForVolumeProp)();
|
|
20
|
+
const videoConfig = (0, use_unsafe_video_config_1.useUnsafeVideoConfig)();
|
|
21
|
+
const sequenceContext = (0, react_1.useContext)(sequencing_1.SequenceContext);
|
|
22
|
+
const mediaStartsAt = (0, use_audio_frame_1.useMediaStartsAt)();
|
|
23
|
+
const { registerAsset, unregisterAsset } = (0, react_1.useContext)(CompositionManager_1.CompositionManager);
|
|
24
|
+
if (!src) {
|
|
25
|
+
throw new TypeError('No `src` was passed to <OffthreadVideo>.');
|
|
26
|
+
}
|
|
27
|
+
// Generate a string that's as unique as possible for this asset
|
|
28
|
+
// but at the same time the same on all threads
|
|
29
|
+
const id = (0, react_1.useMemo)(() => `video-${(0, random_1.random)(src !== null && src !== void 0 ? src : '')}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.cumulatedFrom}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.relativeFrom}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.durationInFrames}-muted:${muted}`, [
|
|
30
|
+
src,
|
|
31
|
+
muted,
|
|
32
|
+
sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.cumulatedFrom,
|
|
33
|
+
sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.relativeFrom,
|
|
34
|
+
sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.durationInFrames,
|
|
35
|
+
]);
|
|
36
|
+
if (!videoConfig) {
|
|
37
|
+
throw new Error('No video config found');
|
|
38
|
+
}
|
|
39
|
+
const volume = (0, volume_prop_1.evaluateVolume)({
|
|
40
|
+
volume: volumeProp,
|
|
41
|
+
frame: volumePropsFrame,
|
|
42
|
+
mediaVolume: 1,
|
|
43
|
+
});
|
|
44
|
+
(0, react_1.useEffect)(() => {
|
|
45
|
+
if (!src) {
|
|
46
|
+
throw new Error('No src passed');
|
|
47
|
+
}
|
|
48
|
+
if (muted) {
|
|
49
|
+
return;
|
|
50
|
+
}
|
|
51
|
+
registerAsset({
|
|
52
|
+
type: 'video',
|
|
53
|
+
src: (0, absolute_src_1.getAbsoluteSrc)(src),
|
|
54
|
+
id,
|
|
55
|
+
frame: absoluteFrame,
|
|
56
|
+
volume,
|
|
57
|
+
mediaFrame: frame,
|
|
58
|
+
playbackRate: playbackRate !== null && playbackRate !== void 0 ? playbackRate : 1,
|
|
59
|
+
});
|
|
60
|
+
return () => unregisterAsset(id);
|
|
61
|
+
}, [
|
|
62
|
+
muted,
|
|
63
|
+
src,
|
|
64
|
+
registerAsset,
|
|
65
|
+
id,
|
|
66
|
+
unregisterAsset,
|
|
67
|
+
volume,
|
|
68
|
+
frame,
|
|
69
|
+
absoluteFrame,
|
|
70
|
+
playbackRate,
|
|
71
|
+
]);
|
|
72
|
+
const currentTime = (0, react_1.useMemo)(() => {
|
|
73
|
+
return ((0, get_current_time_1.getExpectedMediaFrameUncorrected)({
|
|
74
|
+
frame,
|
|
75
|
+
playbackRate: playbackRate || 1,
|
|
76
|
+
startFrom: -mediaStartsAt,
|
|
77
|
+
}) / videoConfig.fps);
|
|
78
|
+
}, [frame, mediaStartsAt, playbackRate, videoConfig.fps]);
|
|
79
|
+
const actualSrc = (0, react_1.useMemo)(() => {
|
|
80
|
+
return `http://localhost:${window.remotion_proxyPort}/proxy?src=${encodeURIComponent((0, absolute_src_1.getAbsoluteSrc)(src))}&time=${encodeURIComponent(currentTime)}`;
|
|
81
|
+
}, [currentTime, src]);
|
|
82
|
+
const onErr = (0, react_1.useCallback)((e) => {
|
|
83
|
+
onError === null || onError === void 0 ? void 0 : onError(e);
|
|
84
|
+
}, [onError]);
|
|
85
|
+
return (0, jsx_runtime_1.jsx)(Img_1.Img, { src: actualSrc, ...props, onError: onErr }, void 0);
|
|
86
|
+
};
|
|
87
|
+
exports.OffthreadVideoForRendering = OffthreadVideoForRendering;
|
|
@@ -1,3 +1,8 @@
|
|
|
1
|
+
export declare const getExpectedMediaFrameUncorrected: ({ frame, playbackRate, startFrom, }: {
|
|
2
|
+
frame: number;
|
|
3
|
+
playbackRate: number;
|
|
4
|
+
startFrom: number;
|
|
5
|
+
}) => number;
|
|
1
6
|
export declare const getMediaTime: ({ fps, frame, src, playbackRate, startFrom, }: {
|
|
2
7
|
fps: number;
|
|
3
8
|
frame: number;
|
|
@@ -1,10 +1,18 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
// Calculate the `.currentTime` of a video or audio element
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
-
exports.getMediaTime = void 0;
|
|
4
|
+
exports.getMediaTime = exports.getExpectedMediaFrameUncorrected = void 0;
|
|
5
5
|
const interpolate_1 = require("../interpolate");
|
|
6
|
+
const getExpectedMediaFrameUncorrected = ({ frame, playbackRate, startFrom, }) => {
|
|
7
|
+
return (0, interpolate_1.interpolate)(frame, [-1, startFrom, startFrom + 1], [-1, startFrom, startFrom + playbackRate]);
|
|
8
|
+
};
|
|
9
|
+
exports.getExpectedMediaFrameUncorrected = getExpectedMediaFrameUncorrected;
|
|
6
10
|
const getMediaTime = ({ fps, frame, src, playbackRate, startFrom, }) => {
|
|
7
|
-
const expectedFrame = (0,
|
|
11
|
+
const expectedFrame = (0, exports.getExpectedMediaFrameUncorrected)({
|
|
12
|
+
frame,
|
|
13
|
+
playbackRate,
|
|
14
|
+
startFrom,
|
|
15
|
+
});
|
|
8
16
|
if (src.endsWith('mp4')) {
|
|
9
17
|
// In Chrome, for MP4s, if 30fps, the first frame is still displayed at 0.033333
|
|
10
18
|
// even though after that it increases by 0.033333333 each.
|
package/dist/video/index.d.ts
CHANGED
|
@@ -1,2 +1,3 @@
|
|
|
1
|
-
export
|
|
2
|
-
export
|
|
1
|
+
export { OffthreadVideo } from './OffthreadVideo';
|
|
2
|
+
export { OffthreadVideoProps as RemotionOffthreadVideoProps, RemotionMainVideoProps, RemotionVideoProps, } from './props';
|
|
3
|
+
export { Video } from './Video';
|
package/dist/video/index.js
CHANGED
|
@@ -1,14 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
5
|
-
}) : (function(o, m, k, k2) {
|
|
6
|
-
if (k2 === undefined) k2 = k;
|
|
7
|
-
o[k2] = m[k];
|
|
8
|
-
}));
|
|
9
|
-
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
10
|
-
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
11
|
-
};
|
|
12
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
13
|
-
|
|
14
|
-
|
|
3
|
+
exports.Video = exports.OffthreadVideo = void 0;
|
|
4
|
+
var OffthreadVideo_1 = require("./OffthreadVideo");
|
|
5
|
+
Object.defineProperty(exports, "OffthreadVideo", { enumerable: true, get: function () { return OffthreadVideo_1.OffthreadVideo; } });
|
|
6
|
+
var Video_1 = require("./Video");
|
|
7
|
+
Object.defineProperty(exports, "Video", { enumerable: true, get: function () { return Video_1.Video; } });
|
package/dist/video/props.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
import React from 'react';
|
|
2
2
|
import { VolumeProp } from '../volume-prop';
|
|
3
3
|
export declare type RemotionMainVideoProps = {
|
|
4
4
|
startFrom?: number;
|
|
@@ -8,3 +8,12 @@ export declare type RemotionVideoProps = Omit<React.DetailedHTMLProps<React.Vide
|
|
|
8
8
|
volume?: VolumeProp;
|
|
9
9
|
playbackRate?: number;
|
|
10
10
|
};
|
|
11
|
+
export declare type OffthreadVideoProps = {
|
|
12
|
+
src: string;
|
|
13
|
+
className?: string;
|
|
14
|
+
style?: React.CSSProperties;
|
|
15
|
+
volume?: VolumeProp;
|
|
16
|
+
playbackRate?: number;
|
|
17
|
+
muted?: boolean;
|
|
18
|
+
onError?: React.ReactEventHandler<HTMLVideoElement | HTMLImageElement>;
|
|
19
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "remotion",
|
|
3
|
-
"version": "4.0.0-preload.
|
|
3
|
+
"version": "4.0.0-preload.17+14cd6033f",
|
|
4
4
|
"description": "Render videos in React",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -55,5 +55,5 @@
|
|
|
55
55
|
"publishConfig": {
|
|
56
56
|
"access": "public"
|
|
57
57
|
},
|
|
58
|
-
"gitHead": "
|
|
58
|
+
"gitHead": "14cd6033f4ad0fa75af142d54a4cd1a23aff3f21"
|
|
59
59
|
}
|
package/.turbo/turbo-lint.log
DELETED
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
[34mremotion:lint: [0mcache hit, replaying output [2mca801c8a64489efb[0m
|
|
2
|
-
[34mremotion:lint: [0m
|
|
3
|
-
[34mremotion:lint: [0m> remotion@3.0.9 lint /Users/jonathanburger/remotion/packages/core
|
|
4
|
-
[34mremotion:lint: [0m> eslint src --ext ts,tsx
|
|
5
|
-
[34mremotion:lint: [0m
|
|
6
|
-
[34mremotion:lint: [0m
|
|
7
|
-
[34mremotion:lint: [0m/Users/jonathanburger/remotion/packages/core/src/use-lazy-component.ts
|
|
8
|
-
[34mremotion:lint: [0m 9:50 warning Unexpected any. Specify a different type @typescript-eslint/no-explicit-any
|
|
9
|
-
[34mremotion:lint: [0m
|
|
10
|
-
[34mremotion:lint: [0m✖ 1 problem (0 errors, 1 warning)
|
|
11
|
-
[34mremotion:lint: [0m
|
package/.turbo/turbo-test.log
DELETED
|
@@ -1,63 +0,0 @@
|
|
|
1
|
-
[34mremotion:test: [0mcache hit, replaying output [2mcceb170b4f03ca12[0m
|
|
2
|
-
[34mremotion:test: [0m
|
|
3
|
-
[34mremotion:test: [0m> remotion@3.0.9 test /Users/jonathanburger/remotion/packages/core
|
|
4
|
-
[34mremotion:test: [0m> jest --coverage && node generate-badges.js
|
|
5
|
-
[34mremotion:test: [0m
|
|
6
|
-
[34mremotion:test: [0mwatchman warning: Recrawled this watch 25 times, most recently because:
|
|
7
|
-
[34mremotion:test: [0mMustScanSubDirs UserDroppedTo resolve, please review the information on
|
|
8
|
-
[34mremotion:test: [0mhttps://facebook.github.io/watchman/docs/troubleshooting.html#recrawl
|
|
9
|
-
[34mremotion:test: [0mTo clear this warning, run:
|
|
10
|
-
[34mremotion:test: [0m`watchman watch-del '/Users/jonathanburger/remotion' ; watchman watch-project '/Users/jonathanburger/remotion'`
|
|
11
|
-
[34mremotion:test: [0m
|
|
12
|
-
[34mremotion:test: [0mPASS src/test/easing.test.ts (16.995 s)
|
|
13
|
-
[34mremotion:test: [0mPASS src/test/interpolate.test.ts (17.428 s)
|
|
14
|
-
[34mremotion:test: [0mPASS src/test/crf.test.ts (17.267 s)
|
|
15
|
-
[34mremotion:test: [0mPASS src/test/volume-prop.test.ts
|
|
16
|
-
[34mremotion:test: [0mPASS src/test/interpolateColors.test.ts
|
|
17
|
-
[34mremotion:test: [0mPASS src/test/nested-sequences.test.tsx (21.573 s)
|
|
18
|
-
[34mremotion:test: [0mPASS src/test/pixel-format.test.ts
|
|
19
|
-
[34mremotion:test: [0mPASS src/test/media-validation.test.tsx
|
|
20
|
-
[34mremotion:test: [0mPASS src/test/random.test.ts
|
|
21
|
-
[34mremotion:test: [0mPASS src/test/image-format.test.ts
|
|
22
|
-
[34mremotion:test: [0mPASS src/test/codec.test.ts
|
|
23
|
-
[34mremotion:test: [0mPASS src/test/get-current-time.test.ts
|
|
24
|
-
[34mremotion:test: [0mPASS src/test/range.test.tsx (9.35 s)
|
|
25
|
-
[34mremotion:test: [0mPASS src/test/audio-for-rendering.test.tsx (7.636 s)
|
|
26
|
-
[34mremotion:test: [0mPASS src/test/sequence-validation.test.tsx
|
|
27
|
-
[34mremotion:test: [0mPASS src/test/use-audio-frame.test.tsx (5.104 s)
|
|
28
|
-
[34mremotion:test: [0mPASS src/test/freeze.test.tsx (6.656 s)
|
|
29
|
-
[34mremotion:test: [0mPASS src/test/composition-validation.test.tsx (32.821 s)
|
|
30
|
-
[34mremotion:test: [0mPASS src/test/validate-start-from-props.test.ts
|
|
31
|
-
[34mremotion:test: [0mPASS src/test/series.test.tsx (32.945 s)
|
|
32
|
-
[34mremotion:test: [0mPASS src/test/loop-validation.test.tsx (32.887 s)
|
|
33
|
-
[34mremotion:test: [0mPASS src/test/composition-rules.test.tsx (5.824 s)
|
|
34
|
-
[34mremotion:test: [0mPASS src/test/log.test.ts
|
|
35
|
-
[34mremotion:test: [0mPASS src/test/measure-spring.test.ts
|
|
36
|
-
[34mremotion:test: [0mPASS src/test/pro-res-profile.test.ts
|
|
37
|
-
[34mremotion:test: [0mPASS src/test/video.test.tsx (8.266 s)
|
|
38
|
-
[34mremotion:test: [0mPASS src/test/bezier.test.ts
|
|
39
|
-
[34mremotion:test: [0mPASS src/test/use-media-tag-volume.test.tsx
|
|
40
|
-
[34mremotion:test: [0mPASS src/test/quality.test.ts
|
|
41
|
-
[34mremotion:test: [0mPASS src/test/use-sync-volume-with-media-tag.test.ts
|
|
42
|
-
[34mremotion:test: [0mPASS src/test/image-sequence.test.ts
|
|
43
|
-
[34mremotion:test: [0mPASS src/test/overwrite.test.ts
|
|
44
|
-
[34mremotion:test: [0mPASS src/test/input-props.test.ts
|
|
45
|
-
[34mremotion:test: [0mPASS src/test/validate-frame.test.ts
|
|
46
|
-
[34mremotion:test: [0mPASS src/test/preview-server.test.ts
|
|
47
|
-
[34mremotion:test: [0mPASS src/test/concurrency.test.ts
|
|
48
|
-
[34mremotion:test: [0mPASS src/test/spring.test.ts
|
|
49
|
-
[34mremotion:test: [0mPASS src/test/webpack-caching.test.ts
|
|
50
|
-
[34mremotion:test: [0mPASS src/test/ready-manager.test.ts
|
|
51
|
-
[34mremotion:test: [0mPASS src/test/use-media-in-timeline.test.tsx
|
|
52
|
-
[34mremotion:test: [0mPASS src/test/get-asset-file-name.test.ts
|
|
53
|
-
[34mremotion:test: [0mPASS src/test/truthy.test.ts
|
|
54
|
-
[34mremotion:test: [0mPASS src/test/absolute-src.test.ts
|
|
55
|
-
[34mremotion:test: [0mPASS src/test/validate-image-format.test.ts
|
|
56
|
-
[34mremotion:test: [0mPASS src/test/audio.test.tsx (7.831 s)
|
|
57
|
-
[34mremotion:test: [0mPASS src/test/Img.test.tsx
|
|
58
|
-
[34mremotion:test: [0m
|
|
59
|
-
[34mremotion:test: [0mTest Suites: 46 passed, 46 total
|
|
60
|
-
[34mremotion:test: [0mTests: 474 passed, 474 total
|
|
61
|
-
[34mremotion:test: [0mSnapshots: 0 total
|
|
62
|
-
[34mremotion:test: [0mTime: 43.001 s
|
|
63
|
-
[34mremotion:test: [0mRan all test suites.
|