remotion 3.3.91 → 3.3.93
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 +6 -1
- package/dist/cjs/Sequence.d.ts +2 -1
- package/dist/cjs/Sequence.js +3 -3
- package/dist/cjs/loop/index.js +14 -5
- package/dist/cjs/spring/index.d.ts +3 -1
- package/dist/cjs/spring/index.js +29 -15
- package/dist/cjs/use-media-in-timeline.js +1 -1
- package/dist/cjs/use-media-playback.js +12 -3
- package/dist/cjs/version.d.ts +1 -1
- package/dist/cjs/version.js +1 -1
- package/dist/cjs/video/props.d.ts +1 -0
- package/dist/esm/index.mjs +78 -48
- package/dist/esm/version.mjs +1 -1
- package/package.json +1 -1
- package/dist/cjs/EditorProps.d.ts +0 -15
- package/dist/cjs/EditorProps.js +0 -53
- package/dist/cjs/props-if-has-props.d.ts +0 -10
- package/dist/cjs/props-if-has-props.js +0 -2
- package/dist/cjs/z-color.d.ts +0 -9
- package/dist/cjs/z-color.js +0 -28
|
@@ -32,6 +32,11 @@ declare type EnhancedTSequenceData = {
|
|
|
32
32
|
startMediaFrom: number;
|
|
33
33
|
playbackRate: number;
|
|
34
34
|
};
|
|
35
|
+
export declare type LoopDisplay = {
|
|
36
|
+
numberOfTimes: number;
|
|
37
|
+
startOffset: number;
|
|
38
|
+
durationInFrames: number;
|
|
39
|
+
};
|
|
35
40
|
export declare type TSequence = {
|
|
36
41
|
from: number;
|
|
37
42
|
duration: number;
|
|
@@ -41,7 +46,7 @@ export declare type TSequence = {
|
|
|
41
46
|
rootId: string;
|
|
42
47
|
showInTimeline: boolean;
|
|
43
48
|
nonce: number;
|
|
44
|
-
|
|
49
|
+
loopDisplay: LoopDisplay | undefined;
|
|
45
50
|
} & EnhancedTSequenceData;
|
|
46
51
|
export declare type TAsset = {
|
|
47
52
|
type: 'audio' | 'video';
|
package/dist/cjs/Sequence.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import type { LoopDisplay } from './CompositionManager.js';
|
|
2
3
|
export declare type LayoutAndStyle = {
|
|
3
4
|
layout: 'none';
|
|
4
5
|
} | {
|
|
@@ -12,7 +13,7 @@ export declare type SequenceProps = {
|
|
|
12
13
|
durationInFrames?: number;
|
|
13
14
|
name?: string;
|
|
14
15
|
showInTimeline?: boolean;
|
|
15
|
-
|
|
16
|
+
loopDisplay?: LoopDisplay;
|
|
16
17
|
} & LayoutAndStyle;
|
|
17
18
|
/**
|
|
18
19
|
* @description A component that time-shifts its children and wraps them in an absolutely positioned <div>.
|
package/dist/cjs/Sequence.js
CHANGED
|
@@ -11,7 +11,7 @@ const nonce_js_1 = require("./nonce.js");
|
|
|
11
11
|
const SequenceContext_js_1 = require("./SequenceContext.js");
|
|
12
12
|
const timeline_position_state_js_1 = require("./timeline-position-state.js");
|
|
13
13
|
const use_video_config_js_1 = require("./use-video-config.js");
|
|
14
|
-
const SequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity, children, name, showInTimeline = true,
|
|
14
|
+
const SequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity, children, name, showInTimeline = true, loopDisplay, ...other }, ref) => {
|
|
15
15
|
const { layout = 'absolute-fill' } = other;
|
|
16
16
|
const [id] = (0, react_1.useState)(() => String(Math.random()));
|
|
17
17
|
const parentSequence = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
|
|
@@ -81,7 +81,7 @@ const SequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity,
|
|
|
81
81
|
rootId,
|
|
82
82
|
showInTimeline,
|
|
83
83
|
nonce,
|
|
84
|
-
|
|
84
|
+
loopDisplay,
|
|
85
85
|
});
|
|
86
86
|
return () => {
|
|
87
87
|
unregisterSequence(id);
|
|
@@ -99,7 +99,7 @@ const SequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity,
|
|
|
99
99
|
from,
|
|
100
100
|
showInTimeline,
|
|
101
101
|
nonce,
|
|
102
|
-
|
|
102
|
+
loopDisplay,
|
|
103
103
|
environment,
|
|
104
104
|
]);
|
|
105
105
|
const endThreshold = cumulatedFrom + from + durationInFrames - 1;
|
package/dist/cjs/loop/index.js
CHANGED
|
@@ -2,7 +2,9 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.Loop = void 0;
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const react_1 = require("react");
|
|
5
6
|
const Sequence_js_1 = require("../Sequence.js");
|
|
7
|
+
const use_current_frame_js_1 = require("../use-current-frame.js");
|
|
6
8
|
const use_video_config_js_1 = require("../use-video-config.js");
|
|
7
9
|
const validate_duration_in_frames_js_1 = require("../validation/validate-duration-in-frames.js");
|
|
8
10
|
/**
|
|
@@ -10,6 +12,7 @@ const validate_duration_in_frames_js_1 = require("../validation/validate-duratio
|
|
|
10
12
|
* @see [Documentation](https://www.remotion.dev/docs/loop)
|
|
11
13
|
*/
|
|
12
14
|
const Loop = ({ durationInFrames, times = Infinity, children, name, ...props }) => {
|
|
15
|
+
const currentFrame = (0, use_current_frame_js_1.useCurrentFrame)();
|
|
13
16
|
const { durationInFrames: compDuration } = (0, use_video_config_js_1.useVideoConfig)();
|
|
14
17
|
(0, validate_duration_in_frames_js_1.validateDurationInFrames)({
|
|
15
18
|
durationInFrames,
|
|
@@ -28,10 +31,16 @@ const Loop = ({ durationInFrames, times = Infinity, children, name, ...props })
|
|
|
28
31
|
const maxTimes = Math.ceil(compDuration / durationInFrames);
|
|
29
32
|
const actualTimes = Math.min(maxTimes, times);
|
|
30
33
|
const style = props.layout === 'none' ? undefined : props.style;
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
34
|
+
const maxFrame = durationInFrames * (actualTimes - 1);
|
|
35
|
+
const start = Math.floor(currentFrame / durationInFrames) * durationInFrames;
|
|
36
|
+
const from = Math.min(start, maxFrame);
|
|
37
|
+
const loopDisplay = (0, react_1.useMemo)(() => {
|
|
38
|
+
return {
|
|
39
|
+
numberOfTimes: actualTimes,
|
|
40
|
+
startOffset: -from,
|
|
41
|
+
durationInFrames,
|
|
42
|
+
};
|
|
43
|
+
}, [actualTimes, durationInFrames, from]);
|
|
44
|
+
return ((0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { durationInFrames: durationInFrames, from: from, name: name, loopDisplay: loopDisplay, layout: props.layout, style: style, children: children }));
|
|
36
45
|
};
|
|
37
46
|
exports.Loop = Loop;
|
|
@@ -4,6 +4,7 @@ import type { SpringConfig } from './spring-utils.js';
|
|
|
4
4
|
* @see [Documentation](https://www.remotion.dev/docs/spring)
|
|
5
5
|
* @param {number} frame The current time value. Most of the time you want to pass in the return value of useCurrentFrame.
|
|
6
6
|
* @param {number} fps The framerate at which the animation runs. Pass in the value obtained by `useVideoConfig()`.
|
|
7
|
+
* @param {?boolean} reverse Whether the animation plays in reverse or not. Default `false`.
|
|
7
8
|
* @param {?Object} config optional object that allows you to customize the physical properties of the animation.
|
|
8
9
|
* @param {number} [config.mass=1] The weight of the spring. If you reduce the mass, the animation becomes faster!
|
|
9
10
|
* @param {number} [config.damping=10] How hard the animation decelerates.
|
|
@@ -15,7 +16,7 @@ import type { SpringConfig } from './spring-utils.js';
|
|
|
15
16
|
* @param {?number} [config.durationThreshold] How close to the end the animation is considered to be done. Default `0.005`
|
|
16
17
|
* @param {?number} [config.delay] Delay the animation for this amount of frames. Default `0`
|
|
17
18
|
*/
|
|
18
|
-
export declare function spring({ frame: passedFrame, fps, config, from, to, durationInFrames, durationRestThreshold, delay, }: {
|
|
19
|
+
export declare function spring({ frame: passedFrame, fps, config, from, to, durationInFrames: passedDurationInFrames, durationRestThreshold, delay, reverse, }: {
|
|
19
20
|
frame: number;
|
|
20
21
|
fps: number;
|
|
21
22
|
config?: Partial<SpringConfig>;
|
|
@@ -24,6 +25,7 @@ export declare function spring({ frame: passedFrame, fps, config, from, to, dura
|
|
|
24
25
|
durationInFrames?: number;
|
|
25
26
|
durationRestThreshold?: number;
|
|
26
27
|
delay?: number;
|
|
28
|
+
reverse?: boolean;
|
|
27
29
|
}): number;
|
|
28
30
|
export { measureSpring } from './measure-spring.js';
|
|
29
31
|
export { SpringConfig } from './spring-utils.js';
|
package/dist/cjs/spring/index.js
CHANGED
|
@@ -11,6 +11,7 @@ const spring_utils_js_1 = require("./spring-utils.js");
|
|
|
11
11
|
* @see [Documentation](https://www.remotion.dev/docs/spring)
|
|
12
12
|
* @param {number} frame The current time value. Most of the time you want to pass in the return value of useCurrentFrame.
|
|
13
13
|
* @param {number} fps The framerate at which the animation runs. Pass in the value obtained by `useVideoConfig()`.
|
|
14
|
+
* @param {?boolean} reverse Whether the animation plays in reverse or not. Default `false`.
|
|
14
15
|
* @param {?Object} config optional object that allows you to customize the physical properties of the animation.
|
|
15
16
|
* @param {number} [config.mass=1] The weight of the spring. If you reduce the mass, the animation becomes faster!
|
|
16
17
|
* @param {number} [config.damping=10] How hard the animation decelerates.
|
|
@@ -22,29 +23,42 @@ const spring_utils_js_1 = require("./spring-utils.js");
|
|
|
22
23
|
* @param {?number} [config.durationThreshold] How close to the end the animation is considered to be done. Default `0.005`
|
|
23
24
|
* @param {?number} [config.delay] Delay the animation for this amount of frames. Default `0`
|
|
24
25
|
*/
|
|
25
|
-
function spring({ frame: passedFrame, fps, config = {}, from = 0, to = 1, durationInFrames, durationRestThreshold, delay = 0, }) {
|
|
26
|
-
(0, validation_spring_duration_js_1.validateSpringDuration)(
|
|
26
|
+
function spring({ frame: passedFrame, fps, config = {}, from = 0, to = 1, durationInFrames: passedDurationInFrames, durationRestThreshold, delay = 0, reverse = false, }) {
|
|
27
|
+
(0, validation_spring_duration_js_1.validateSpringDuration)(passedDurationInFrames);
|
|
27
28
|
(0, validate_frame_js_1.validateFrame)({
|
|
28
29
|
frame: passedFrame,
|
|
29
30
|
durationInFrames: Infinity,
|
|
30
31
|
allowFloats: true,
|
|
31
32
|
});
|
|
32
33
|
(0, validate_fps_js_1.validateFps)(fps, 'to spring()', false);
|
|
33
|
-
const
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
34
|
+
const needsToCalculateNaturalDuration = reverse || typeof passedDurationInFrames !== 'undefined';
|
|
35
|
+
const naturalDuration = needsToCalculateNaturalDuration
|
|
36
|
+
? (0, measure_spring_js_1.measureSpring)({
|
|
37
|
+
fps,
|
|
38
|
+
config,
|
|
39
|
+
from,
|
|
40
|
+
to,
|
|
41
|
+
threshold: durationRestThreshold,
|
|
42
|
+
})
|
|
43
|
+
: undefined;
|
|
44
|
+
const naturalDurationGetter = needsToCalculateNaturalDuration
|
|
45
|
+
? {
|
|
46
|
+
get: () => naturalDuration,
|
|
47
|
+
}
|
|
48
|
+
: {
|
|
49
|
+
get: () => {
|
|
50
|
+
throw new Error('did not calculate natural duration, this is an error with Remotion. Please report');
|
|
51
|
+
},
|
|
52
|
+
};
|
|
53
|
+
const frame = reverse
|
|
54
|
+
? (passedDurationInFrames !== null && passedDurationInFrames !== void 0 ? passedDurationInFrames : naturalDurationGetter.get()) - passedFrame
|
|
55
|
+
: passedFrame;
|
|
45
56
|
const spr = (0, spring_utils_js_1.springCalculation)({
|
|
46
57
|
fps,
|
|
47
|
-
frame:
|
|
58
|
+
frame: (passedDurationInFrames === undefined
|
|
59
|
+
? frame
|
|
60
|
+
: frame / (passedDurationInFrames / naturalDurationGetter.get())) -
|
|
61
|
+
delay,
|
|
48
62
|
config,
|
|
49
63
|
from,
|
|
50
64
|
to,
|
|
@@ -51,12 +51,21 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
|
|
|
51
51
|
(0, warn_about_non_seekable_media_js_1.warnAboutNonSeekableMedia)(mediaRef.current, onlyWarnForMediaSeekingError ? 'console-warning' : 'console-error');
|
|
52
52
|
}
|
|
53
53
|
}
|
|
54
|
+
// Only perform a seek if the time is not already the same.
|
|
55
|
+
// Chrome rounds to 6 digits, so 0.033333333 -> 0.033333,
|
|
56
|
+
// therefore a threshold is allowed.
|
|
57
|
+
// Refer to the https://github.com/remotion-dev/video-buffering-example
|
|
58
|
+
// which is fixed by only seeking conditionally.
|
|
59
|
+
const makesSenseToSeek = Math.abs(mediaRef.current.currentTime - shouldBeTime) > 0.00001;
|
|
54
60
|
if (!playing || absoluteFrame === 0) {
|
|
55
|
-
|
|
61
|
+
if (makesSenseToSeek) {
|
|
62
|
+
mediaRef.current.currentTime = shouldBeTime;
|
|
63
|
+
}
|
|
56
64
|
}
|
|
57
65
|
if (mediaRef.current.paused && !mediaRef.current.ended && playing) {
|
|
58
|
-
|
|
59
|
-
|
|
66
|
+
if (makesSenseToSeek) {
|
|
67
|
+
mediaRef.current.currentTime = shouldBeTime;
|
|
68
|
+
}
|
|
60
69
|
(0, play_and_handle_not_allowed_error_js_1.playAndHandleNotAllowedError)(mediaRef, mediaType);
|
|
61
70
|
}
|
|
62
71
|
}, [
|
package/dist/cjs/version.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const VERSION = "3.3.
|
|
1
|
+
export declare const VERSION = "3.3.93";
|
package/dist/cjs/version.js
CHANGED
package/dist/esm/index.mjs
CHANGED
|
@@ -58,7 +58,7 @@ function truthy(value) {
|
|
|
58
58
|
}
|
|
59
59
|
|
|
60
60
|
// Automatically generated on publish
|
|
61
|
-
const VERSION = '3.3.
|
|
61
|
+
const VERSION = '3.3.93';
|
|
62
62
|
|
|
63
63
|
const checkMultipleRemotionVersions = () => {
|
|
64
64
|
if (typeof globalThis === 'undefined') {
|
|
@@ -666,7 +666,7 @@ const useVideoConfig = () => {
|
|
|
666
666
|
return videoConfig;
|
|
667
667
|
};
|
|
668
668
|
|
|
669
|
-
const SequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity, children, name, showInTimeline = true,
|
|
669
|
+
const SequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity, children, name, showInTimeline = true, loopDisplay, ...other }, ref) => {
|
|
670
670
|
const { layout = 'absolute-fill' } = other;
|
|
671
671
|
const [id] = useState(() => String(Math.random()));
|
|
672
672
|
const parentSequence = useContext(SequenceContext);
|
|
@@ -736,7 +736,7 @@ const SequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity,
|
|
|
736
736
|
rootId,
|
|
737
737
|
showInTimeline,
|
|
738
738
|
nonce,
|
|
739
|
-
|
|
739
|
+
loopDisplay,
|
|
740
740
|
});
|
|
741
741
|
return () => {
|
|
742
742
|
unregisterSequence(id);
|
|
@@ -754,7 +754,7 @@ const SequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity,
|
|
|
754
754
|
from,
|
|
755
755
|
showInTimeline,
|
|
756
756
|
nonce,
|
|
757
|
-
|
|
757
|
+
loopDisplay,
|
|
758
758
|
environment,
|
|
759
759
|
]);
|
|
760
760
|
const endThreshold = cumulatedFrom + from + durationInFrames - 1;
|
|
@@ -781,6 +781,26 @@ const SequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity,
|
|
|
781
781
|
*/
|
|
782
782
|
const Sequence = forwardRef(SequenceRefForwardingFunction);
|
|
783
783
|
|
|
784
|
+
/**
|
|
785
|
+
* @description Get the current frame of the video. Frames are 0-indexed, meaning the first frame is 0, the last frame is the duration of the composition in frames minus one.
|
|
786
|
+
* @see [Documentation](https://remotion.dev/docs/use-current-frame)
|
|
787
|
+
*/
|
|
788
|
+
const useCurrentFrame = () => {
|
|
789
|
+
const canUseRemotionHooks = useContext(CanUseRemotionHooks);
|
|
790
|
+
if (!canUseRemotionHooks) {
|
|
791
|
+
if (typeof window !== 'undefined' && window.remotion_isPlayer) {
|
|
792
|
+
throw new Error(`useCurrentFrame can only be called inside a component that was passed to <Player>. See: https://www.remotion.dev/docs/player/examples`);
|
|
793
|
+
}
|
|
794
|
+
throw new Error(`useCurrentFrame() can only be called inside a component that was registered as a composition. See https://www.remotion.dev/docs/the-fundamentals#defining-compositions`);
|
|
795
|
+
}
|
|
796
|
+
const frame = useTimelinePosition();
|
|
797
|
+
const context = useContext(SequenceContext);
|
|
798
|
+
const contextOffset = context
|
|
799
|
+
? context.cumulatedFrom + context.relativeFrom
|
|
800
|
+
: 0;
|
|
801
|
+
return frame - contextOffset;
|
|
802
|
+
};
|
|
803
|
+
|
|
784
804
|
const validateDurationInFrames = ({ allowFloats, component, durationInFrames, }) => {
|
|
785
805
|
if (typeof durationInFrames !== 'number') {
|
|
786
806
|
throw new Error(`The "durationInFrames" prop ${component} must be a number, but you passed a value of type ${typeof durationInFrames}`);
|
|
@@ -801,6 +821,7 @@ const validateDurationInFrames = ({ allowFloats, component, durationInFrames, })
|
|
|
801
821
|
* @see [Documentation](https://www.remotion.dev/docs/loop)
|
|
802
822
|
*/
|
|
803
823
|
const Loop = ({ durationInFrames, times = Infinity, children, name, ...props }) => {
|
|
824
|
+
const currentFrame = useCurrentFrame();
|
|
804
825
|
const { durationInFrames: compDuration } = useVideoConfig();
|
|
805
826
|
validateDurationInFrames({
|
|
806
827
|
durationInFrames,
|
|
@@ -819,11 +840,17 @@ const Loop = ({ durationInFrames, times = Infinity, children, name, ...props })
|
|
|
819
840
|
const maxTimes = Math.ceil(compDuration / durationInFrames);
|
|
820
841
|
const actualTimes = Math.min(maxTimes, times);
|
|
821
842
|
const style = props.layout === 'none' ? undefined : props.style;
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
843
|
+
const maxFrame = durationInFrames * (actualTimes - 1);
|
|
844
|
+
const start = Math.floor(currentFrame / durationInFrames) * durationInFrames;
|
|
845
|
+
const from = Math.min(start, maxFrame);
|
|
846
|
+
const loopDisplay = useMemo(() => {
|
|
847
|
+
return {
|
|
848
|
+
numberOfTimes: actualTimes,
|
|
849
|
+
startOffset: -from,
|
|
850
|
+
durationInFrames,
|
|
851
|
+
};
|
|
852
|
+
}, [actualTimes, durationInFrames, from]);
|
|
853
|
+
return (jsx(Sequence, { durationInFrames: durationInFrames, from: from, name: name, loopDisplay: loopDisplay, layout: props.layout, style: style, children: children }));
|
|
827
854
|
};
|
|
828
855
|
|
|
829
856
|
const validateMediaProps = (props, component) => {
|
|
@@ -1067,26 +1094,6 @@ const random = (seed, dummy) => {
|
|
|
1067
1094
|
throw new Error('random() argument must be a number or a string');
|
|
1068
1095
|
};
|
|
1069
1096
|
|
|
1070
|
-
/**
|
|
1071
|
-
* @description Get the current frame of the video. Frames are 0-indexed, meaning the first frame is 0, the last frame is the duration of the composition in frames minus one.
|
|
1072
|
-
* @see [Documentation](https://remotion.dev/docs/use-current-frame)
|
|
1073
|
-
*/
|
|
1074
|
-
const useCurrentFrame = () => {
|
|
1075
|
-
const canUseRemotionHooks = useContext(CanUseRemotionHooks);
|
|
1076
|
-
if (!canUseRemotionHooks) {
|
|
1077
|
-
if (typeof window !== 'undefined' && window.remotion_isPlayer) {
|
|
1078
|
-
throw new Error(`useCurrentFrame can only be called inside a component that was passed to <Player>. See: https://www.remotion.dev/docs/player/examples`);
|
|
1079
|
-
}
|
|
1080
|
-
throw new Error(`useCurrentFrame() can only be called inside a component that was registered as a composition. See https://www.remotion.dev/docs/the-fundamentals#defining-compositions`);
|
|
1081
|
-
}
|
|
1082
|
-
const frame = useTimelinePosition();
|
|
1083
|
-
const context = useContext(SequenceContext);
|
|
1084
|
-
const contextOffset = context
|
|
1085
|
-
? context.cumulatedFrom + context.relativeFrom
|
|
1086
|
-
: 0;
|
|
1087
|
-
return frame - contextOffset;
|
|
1088
|
-
};
|
|
1089
|
-
|
|
1090
1097
|
const useMediaStartsAt = () => {
|
|
1091
1098
|
var _a;
|
|
1092
1099
|
const parentSequence = useContext(SequenceContext);
|
|
@@ -1248,7 +1255,7 @@ const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, pla
|
|
|
1248
1255
|
nonce,
|
|
1249
1256
|
startMediaFrom: 0 - startsAt,
|
|
1250
1257
|
doesVolumeChange,
|
|
1251
|
-
|
|
1258
|
+
loopDisplay: undefined,
|
|
1252
1259
|
playbackRate,
|
|
1253
1260
|
});
|
|
1254
1261
|
return () => {
|
|
@@ -1505,12 +1512,21 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
|
|
|
1505
1512
|
warnAboutNonSeekableMedia(mediaRef.current, onlyWarnForMediaSeekingError ? 'console-warning' : 'console-error');
|
|
1506
1513
|
}
|
|
1507
1514
|
}
|
|
1515
|
+
// Only perform a seek if the time is not already the same.
|
|
1516
|
+
// Chrome rounds to 6 digits, so 0.033333333 -> 0.033333,
|
|
1517
|
+
// therefore a threshold is allowed.
|
|
1518
|
+
// Refer to the https://github.com/remotion-dev/video-buffering-example
|
|
1519
|
+
// which is fixed by only seeking conditionally.
|
|
1520
|
+
const makesSenseToSeek = Math.abs(mediaRef.current.currentTime - shouldBeTime) > 0.00001;
|
|
1508
1521
|
if (!playing || absoluteFrame === 0) {
|
|
1509
|
-
|
|
1522
|
+
if (makesSenseToSeek) {
|
|
1523
|
+
mediaRef.current.currentTime = shouldBeTime;
|
|
1524
|
+
}
|
|
1510
1525
|
}
|
|
1511
1526
|
if (mediaRef.current.paused && !mediaRef.current.ended && playing) {
|
|
1512
|
-
|
|
1513
|
-
|
|
1527
|
+
if (makesSenseToSeek) {
|
|
1528
|
+
mediaRef.current.currentTime = shouldBeTime;
|
|
1529
|
+
}
|
|
1514
1530
|
playAndHandleNotAllowedError(mediaRef, mediaType);
|
|
1515
1531
|
}
|
|
1516
1532
|
}, [
|
|
@@ -3562,6 +3578,7 @@ function measureSpring({ fps, config = {}, threshold = 0.005, from = 0, to = 1,
|
|
|
3562
3578
|
* @see [Documentation](https://www.remotion.dev/docs/spring)
|
|
3563
3579
|
* @param {number} frame The current time value. Most of the time you want to pass in the return value of useCurrentFrame.
|
|
3564
3580
|
* @param {number} fps The framerate at which the animation runs. Pass in the value obtained by `useVideoConfig()`.
|
|
3581
|
+
* @param {?boolean} reverse Whether the animation plays in reverse or not. Default `false`.
|
|
3565
3582
|
* @param {?Object} config optional object that allows you to customize the physical properties of the animation.
|
|
3566
3583
|
* @param {number} [config.mass=1] The weight of the spring. If you reduce the mass, the animation becomes faster!
|
|
3567
3584
|
* @param {number} [config.damping=10] How hard the animation decelerates.
|
|
@@ -3573,29 +3590,42 @@ function measureSpring({ fps, config = {}, threshold = 0.005, from = 0, to = 1,
|
|
|
3573
3590
|
* @param {?number} [config.durationThreshold] How close to the end the animation is considered to be done. Default `0.005`
|
|
3574
3591
|
* @param {?number} [config.delay] Delay the animation for this amount of frames. Default `0`
|
|
3575
3592
|
*/
|
|
3576
|
-
function spring({ frame: passedFrame, fps, config = {}, from = 0, to = 1, durationInFrames, durationRestThreshold, delay = 0, }) {
|
|
3577
|
-
validateSpringDuration(
|
|
3593
|
+
function spring({ frame: passedFrame, fps, config = {}, from = 0, to = 1, durationInFrames: passedDurationInFrames, durationRestThreshold, delay = 0, reverse = false, }) {
|
|
3594
|
+
validateSpringDuration(passedDurationInFrames);
|
|
3578
3595
|
validateFrame({
|
|
3579
3596
|
frame: passedFrame,
|
|
3580
3597
|
durationInFrames: Infinity,
|
|
3581
3598
|
allowFloats: true,
|
|
3582
3599
|
});
|
|
3583
3600
|
validateFps(fps, 'to spring()', false);
|
|
3584
|
-
const
|
|
3585
|
-
|
|
3586
|
-
|
|
3587
|
-
|
|
3588
|
-
|
|
3589
|
-
|
|
3590
|
-
|
|
3591
|
-
|
|
3592
|
-
|
|
3593
|
-
|
|
3594
|
-
|
|
3595
|
-
|
|
3601
|
+
const needsToCalculateNaturalDuration = reverse || typeof passedDurationInFrames !== 'undefined';
|
|
3602
|
+
const naturalDuration = needsToCalculateNaturalDuration
|
|
3603
|
+
? measureSpring({
|
|
3604
|
+
fps,
|
|
3605
|
+
config,
|
|
3606
|
+
from,
|
|
3607
|
+
to,
|
|
3608
|
+
threshold: durationRestThreshold,
|
|
3609
|
+
})
|
|
3610
|
+
: undefined;
|
|
3611
|
+
const naturalDurationGetter = needsToCalculateNaturalDuration
|
|
3612
|
+
? {
|
|
3613
|
+
get: () => naturalDuration,
|
|
3614
|
+
}
|
|
3615
|
+
: {
|
|
3616
|
+
get: () => {
|
|
3617
|
+
throw new Error('did not calculate natural duration, this is an error with Remotion. Please report');
|
|
3618
|
+
},
|
|
3619
|
+
};
|
|
3620
|
+
const frame = reverse
|
|
3621
|
+
? (passedDurationInFrames !== null && passedDurationInFrames !== void 0 ? passedDurationInFrames : naturalDurationGetter.get()) - passedFrame
|
|
3622
|
+
: passedFrame;
|
|
3596
3623
|
const spr = springCalculation({
|
|
3597
3624
|
fps,
|
|
3598
|
-
frame:
|
|
3625
|
+
frame: (passedDurationInFrames === undefined
|
|
3626
|
+
? frame
|
|
3627
|
+
: frame / (passedDurationInFrames / naturalDurationGetter.get())) -
|
|
3628
|
+
delay,
|
|
3599
3629
|
config,
|
|
3600
3630
|
from,
|
|
3601
3631
|
to,
|
package/dist/esm/version.mjs
CHANGED
package/package.json
CHANGED
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
declare type Props = Record<string, object>;
|
|
3
|
-
export declare type EditorPropsContextType = {
|
|
4
|
-
props: Props;
|
|
5
|
-
updateProps: (options: {
|
|
6
|
-
id: string;
|
|
7
|
-
defaultProps: object;
|
|
8
|
-
newProps: object;
|
|
9
|
-
}) => void;
|
|
10
|
-
};
|
|
11
|
-
export declare const EditorPropsContext: React.Context<EditorPropsContextType>;
|
|
12
|
-
export declare const EditorPropsProvider: React.FC<{
|
|
13
|
-
children: React.ReactNode;
|
|
14
|
-
}>;
|
|
15
|
-
export {};
|
package/dist/cjs/EditorProps.js
DELETED
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
-
}) : function(o, v) {
|
|
16
|
-
o["default"] = v;
|
|
17
|
-
});
|
|
18
|
-
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
-
if (mod && mod.__esModule) return mod;
|
|
20
|
-
var result = {};
|
|
21
|
-
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
-
__setModuleDefault(result, mod);
|
|
23
|
-
return result;
|
|
24
|
-
};
|
|
25
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
|
-
exports.EditorPropsProvider = exports.EditorPropsContext = void 0;
|
|
27
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
28
|
-
const react_1 = __importStar(require("react"));
|
|
29
|
-
exports.EditorPropsContext = (0, react_1.createContext)({
|
|
30
|
-
props: {},
|
|
31
|
-
updateProps: () => {
|
|
32
|
-
throw new Error('Not implemented');
|
|
33
|
-
},
|
|
34
|
-
});
|
|
35
|
-
const EditorPropsProvider = ({ children }) => {
|
|
36
|
-
const [props, setProps] = react_1.default.useState({});
|
|
37
|
-
const updateProps = (0, react_1.useCallback)(({ defaultProps, id, newProps, }) => {
|
|
38
|
-
setProps((prev) => {
|
|
39
|
-
var _a;
|
|
40
|
-
return {
|
|
41
|
-
...prev,
|
|
42
|
-
[id]: typeof newProps === 'function'
|
|
43
|
-
? newProps((_a = prev[id]) !== null && _a !== void 0 ? _a : defaultProps)
|
|
44
|
-
: newProps,
|
|
45
|
-
};
|
|
46
|
-
});
|
|
47
|
-
}, []);
|
|
48
|
-
const ctx = (0, react_1.useMemo)(() => {
|
|
49
|
-
return { props, updateProps };
|
|
50
|
-
}, [props, updateProps]);
|
|
51
|
-
return ((0, jsx_runtime_1.jsx)(exports.EditorPropsContext.Provider, { value: ctx, children: children }));
|
|
52
|
-
};
|
|
53
|
-
exports.EditorPropsProvider = EditorPropsProvider;
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import type { z } from 'zod';
|
|
2
|
-
export declare type PropsIfHasProps<Schema extends z.ZodTypeAny, Props> = z.ZodTypeAny extends Schema ? {} extends Props ? {
|
|
3
|
-
defaultProps?: Props;
|
|
4
|
-
} : {
|
|
5
|
-
defaultProps: Props;
|
|
6
|
-
} : {} extends Props ? {
|
|
7
|
-
defaultProps: z.infer<Schema>;
|
|
8
|
-
} : {
|
|
9
|
-
defaultProps: z.infer<Schema> & Props;
|
|
10
|
-
};
|
package/dist/cjs/z-color.d.ts
DELETED
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { z } from 'zod';
|
|
2
|
-
export declare const REMOTION_COLOR_BRAND = "__remotion-color";
|
|
3
|
-
export declare const parseColor: (value: string) => {
|
|
4
|
-
a: number;
|
|
5
|
-
r: number;
|
|
6
|
-
g: number;
|
|
7
|
-
b: number;
|
|
8
|
-
};
|
|
9
|
-
export declare const zColor: () => z.ZodEffects<z.ZodString, string, string>;
|
package/dist/cjs/z-color.js
DELETED
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.zColor = exports.parseColor = exports.REMOTION_COLOR_BRAND = void 0;
|
|
4
|
-
const zod_1 = require("zod");
|
|
5
|
-
const interpolate_colors_js_1 = require("./interpolate-colors.js");
|
|
6
|
-
exports.REMOTION_COLOR_BRAND = '__remotion-color';
|
|
7
|
-
const parseColor = (value) => {
|
|
8
|
-
const colored = (0, interpolate_colors_js_1.processColor)(value).toString(16).padStart(8, '0');
|
|
9
|
-
const opacity = parseInt(colored.slice(0, 2), 16);
|
|
10
|
-
const r = parseInt(colored.slice(2, 4), 16);
|
|
11
|
-
const g = parseInt(colored.slice(4, 6), 16);
|
|
12
|
-
const b = parseInt(colored.slice(6, 8), 16);
|
|
13
|
-
return { a: opacity, r, g, b };
|
|
14
|
-
};
|
|
15
|
-
exports.parseColor = parseColor;
|
|
16
|
-
const zColor = () => zod_1.z
|
|
17
|
-
.string()
|
|
18
|
-
.refine((value) => {
|
|
19
|
-
try {
|
|
20
|
-
(0, exports.parseColor)(value);
|
|
21
|
-
return true;
|
|
22
|
-
}
|
|
23
|
-
catch (err) {
|
|
24
|
-
return false;
|
|
25
|
-
}
|
|
26
|
-
}, { message: 'Invalid color' })
|
|
27
|
-
.describe(exports.REMOTION_COLOR_BRAND);
|
|
28
|
-
exports.zColor = zColor;
|