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.
@@ -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
- showLoopTimesInTimeline: number | undefined;
49
+ loopDisplay: LoopDisplay | undefined;
45
50
  } & EnhancedTSequenceData;
46
51
  export declare type TAsset = {
47
52
  type: 'audio' | 'video';
@@ -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
- showLoopTimesInTimeline?: number;
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>.
@@ -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, showLoopTimesInTimeline, ...other }, ref) => {
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
- showLoopTimesInTimeline,
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
- showLoopTimesInTimeline,
102
+ loopDisplay,
103
103
  environment,
104
104
  ]);
105
105
  const endThreshold = cumulatedFrom + from + durationInFrames - 1;
@@ -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
- return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: new Array(actualTimes).fill(true).map((_, i) => {
32
- return ((0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence
33
- // eslint-disable-next-line react/no-array-index-key
34
- , { durationInFrames: durationInFrames, from: i * durationInFrames, name: name, showLoopTimesInTimeline: actualTimes, showInTimeline: i === 0, layout: props.layout, style: style, children: children }, `loop-${i}`));
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';
@@ -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)(durationInFrames);
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 durationRatio = durationInFrames === undefined
34
- ? 1
35
- : durationInFrames /
36
- (0, measure_spring_js_1.measureSpring)({
37
- fps,
38
- config,
39
- from,
40
- to,
41
- threshold: durationRestThreshold,
42
- });
43
- // Delay the spring by telling the calculation we're at an earlier frame.
44
- const frame = passedFrame - delay;
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: frame / durationRatio,
58
+ frame: (passedDurationInFrames === undefined
59
+ ? frame
60
+ : frame / (passedDurationInFrames / naturalDurationGetter.get())) -
61
+ delay,
48
62
  config,
49
63
  from,
50
64
  to,
@@ -84,7 +84,7 @@ const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, pla
84
84
  nonce,
85
85
  startMediaFrom: 0 - startsAt,
86
86
  doesVolumeChange,
87
- showLoopTimesInTimeline: undefined,
87
+ loopDisplay: undefined,
88
88
  playbackRate,
89
89
  });
90
90
  return () => {
@@ -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
- mediaRef.current.currentTime = shouldBeTime;
61
+ if (makesSenseToSeek) {
62
+ mediaRef.current.currentTime = shouldBeTime;
63
+ }
56
64
  }
57
65
  if (mediaRef.current.paused && !mediaRef.current.ended && playing) {
58
- const { current } = mediaRef;
59
- current.currentTime = shouldBeTime;
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
  }, [
@@ -1 +1 @@
1
- export declare const VERSION = "3.3.91";
1
+ export declare const VERSION = "3.3.93";
@@ -2,4 +2,4 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.VERSION = void 0;
4
4
  // Automatically generated on publish
5
- exports.VERSION = '3.3.91';
5
+ exports.VERSION = '3.3.93';
@@ -14,6 +14,7 @@ export declare type OffthreadVideoImageFormat = 'png' | 'jpeg';
14
14
  export declare type OffthreadVideoProps = {
15
15
  src: string;
16
16
  className?: string;
17
+ id?: string;
17
18
  style?: React.CSSProperties;
18
19
  volume?: VolumeProp;
19
20
  playbackRate?: number;
@@ -58,7 +58,7 @@ function truthy(value) {
58
58
  }
59
59
 
60
60
  // Automatically generated on publish
61
- const VERSION = '3.3.91';
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, showLoopTimesInTimeline, ...other }, ref) => {
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
- showLoopTimesInTimeline,
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
- showLoopTimesInTimeline,
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
- return (jsx(Fragment, { children: new Array(actualTimes).fill(true).map((_, i) => {
823
- return (jsx(Sequence
824
- // eslint-disable-next-line react/no-array-index-key
825
- , { durationInFrames: durationInFrames, from: i * durationInFrames, name: name, showLoopTimesInTimeline: actualTimes, showInTimeline: i === 0, layout: props.layout, style: style, children: children }, `loop-${i}`));
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
- showLoopTimesInTimeline: undefined,
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
- mediaRef.current.currentTime = shouldBeTime;
1522
+ if (makesSenseToSeek) {
1523
+ mediaRef.current.currentTime = shouldBeTime;
1524
+ }
1510
1525
  }
1511
1526
  if (mediaRef.current.paused && !mediaRef.current.ended && playing) {
1512
- const { current } = mediaRef;
1513
- current.currentTime = shouldBeTime;
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(durationInFrames);
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 durationRatio = durationInFrames === undefined
3585
- ? 1
3586
- : durationInFrames /
3587
- measureSpring({
3588
- fps,
3589
- config,
3590
- from,
3591
- to,
3592
- threshold: durationRestThreshold,
3593
- });
3594
- // Delay the spring by telling the calculation we're at an earlier frame.
3595
- const frame = passedFrame - delay;
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: frame / durationRatio,
3625
+ frame: (passedDurationInFrames === undefined
3626
+ ? frame
3627
+ : frame / (passedDurationInFrames / naturalDurationGetter.get())) -
3628
+ delay,
3599
3629
  config,
3600
3630
  from,
3601
3631
  to,
@@ -1,4 +1,4 @@
1
1
  // Automatically generated on publish
2
- const VERSION = '3.3.91';
2
+ const VERSION = '3.3.93';
3
3
 
4
4
  export { VERSION };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "remotion",
3
- "version": "3.3.91",
3
+ "version": "3.3.93",
4
4
  "description": "Render videos in React",
5
5
  "main": "dist/cjs/index.js",
6
6
  "types": "dist/cjs/index.d.ts",
@@ -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 {};
@@ -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
- };
@@ -1,2 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
@@ -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>;
@@ -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;