@remotion/transitions 4.0.306 → 4.0.308
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/package.json +8 -8
- package/.rollup.cache/Users/jonathanburger/remotion/packages/transitions/dist/TransitionSeries.js +0 -148
- package/.rollup.cache/Users/jonathanburger/remotion/packages/transitions/dist/flatten-children.js +0 -12
- package/.rollup.cache/Users/jonathanburger/remotion/packages/transitions/dist/index.js +0 -5
- package/.rollup.cache/Users/jonathanburger/remotion/packages/transitions/dist/presentations/clock-wipe.js +0 -42
- package/.rollup.cache/Users/jonathanburger/remotion/packages/transitions/dist/presentations/fade.js +0 -27
- package/.rollup.cache/Users/jonathanburger/remotion/packages/transitions/dist/presentations/flip.js +0 -45
- package/.rollup.cache/Users/jonathanburger/remotion/packages/transitions/dist/presentations/slide.js +0 -72
- package/.rollup.cache/Users/jonathanburger/remotion/packages/transitions/dist/presentations/wipe.js +0 -159
- package/.rollup.cache/Users/jonathanburger/remotion/packages/transitions/dist/test/transitions.test.js +0 -33
- package/.rollup.cache/Users/jonathanburger/remotion/packages/transitions/dist/timings/linear-timing.js +0 -15
- package/.rollup.cache/Users/jonathanburger/remotion/packages/transitions/dist/timings/spring-timing.js +0 -30
- package/.rollup.cache/Users/jonathanburger/remotion/packages/transitions/dist/types.js +0 -1
- package/.rollup.cache/Users/jonathanburger/remotion/packages/transitions/dist/validate.js +0 -3
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"url": "https://github.com/remotion-dev/remotion/tree/main/packages/transitions"
|
|
4
4
|
},
|
|
5
5
|
"name": "@remotion/transitions",
|
|
6
|
-
"version": "4.0.
|
|
6
|
+
"version": "4.0.308",
|
|
7
7
|
"description": "Library for creating transitions in Remotion",
|
|
8
8
|
"sideEffects": false,
|
|
9
9
|
"main": "dist/esm/index.mjs",
|
|
@@ -16,19 +16,19 @@
|
|
|
16
16
|
"url": "https://github.com/remotion-dev/remotion/issues"
|
|
17
17
|
},
|
|
18
18
|
"dependencies": {
|
|
19
|
-
"remotion": "4.0.
|
|
20
|
-
"@remotion/
|
|
21
|
-
"@remotion/
|
|
19
|
+
"remotion": "4.0.308",
|
|
20
|
+
"@remotion/shapes": "4.0.308",
|
|
21
|
+
"@remotion/paths": "4.0.308"
|
|
22
22
|
},
|
|
23
23
|
"devDependencies": {
|
|
24
24
|
"@happy-dom/global-registrator": "14.5.1",
|
|
25
25
|
"react": "19.0.0",
|
|
26
26
|
"react-dom": "19.0.0",
|
|
27
27
|
"eslint": "9.19.0",
|
|
28
|
-
"remotion": "4.0.
|
|
29
|
-
"@remotion/test-utils": "4.0.
|
|
30
|
-
"@remotion/
|
|
31
|
-
"@remotion/
|
|
28
|
+
"remotion": "4.0.308",
|
|
29
|
+
"@remotion/test-utils": "4.0.308",
|
|
30
|
+
"@remotion/player": "4.0.308",
|
|
31
|
+
"@remotion/eslint-config-internal": "4.0.308"
|
|
32
32
|
},
|
|
33
33
|
"peerDependencies": {
|
|
34
34
|
"react": ">=16.8.0",
|
package/.rollup.cache/Users/jonathanburger/remotion/packages/transitions/dist/TransitionSeries.js
DELETED
|
@@ -1,148 +0,0 @@
|
|
|
1
|
-
import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { Children, useMemo } from 'react';
|
|
3
|
-
import { Internals, Sequence, useCurrentFrame, useVideoConfig } from 'remotion';
|
|
4
|
-
import { flattenChildren } from './flatten-children.js';
|
|
5
|
-
import { slide } from './presentations/slide.js';
|
|
6
|
-
import { validateDurationInFrames } from './validate.js';
|
|
7
|
-
// eslint-disable-next-line react/function-component-definition
|
|
8
|
-
const TransitionSeriesTransition = function (
|
|
9
|
-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
10
|
-
_props) {
|
|
11
|
-
return null;
|
|
12
|
-
};
|
|
13
|
-
const SeriesSequence = ({ children }) => {
|
|
14
|
-
// eslint-disable-next-line react/jsx-no-useless-fragment
|
|
15
|
-
return _jsx(_Fragment, { children: children });
|
|
16
|
-
};
|
|
17
|
-
const TransitionSeriesChildren = ({ children, }) => {
|
|
18
|
-
const { fps } = useVideoConfig();
|
|
19
|
-
const frame = useCurrentFrame();
|
|
20
|
-
const childrenValue = useMemo(() => {
|
|
21
|
-
let transitionOffsets = 0;
|
|
22
|
-
let startFrame = 0;
|
|
23
|
-
const flattedChildren = flattenChildren(children);
|
|
24
|
-
return Children.map(flattedChildren, (child, i) => {
|
|
25
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
26
|
-
const current = child;
|
|
27
|
-
if (typeof current === 'string') {
|
|
28
|
-
// Don't throw if it's just some accidential whitespace
|
|
29
|
-
if (current.trim() === '') {
|
|
30
|
-
return null;
|
|
31
|
-
}
|
|
32
|
-
throw new TypeError(`The <TransitionSeries /> component only accepts a list of <TransitionSeries.Sequence /> components as its children, but you passed a string "${current}"`);
|
|
33
|
-
}
|
|
34
|
-
const hasPrev = flattedChildren[i - 1];
|
|
35
|
-
const nextPrev = flattedChildren[i + 1];
|
|
36
|
-
const prev = typeof hasPrev === 'string' || typeof hasPrev === 'undefined'
|
|
37
|
-
? null
|
|
38
|
-
: hasPrev.type === TransitionSeriesTransition
|
|
39
|
-
? hasPrev
|
|
40
|
-
: null;
|
|
41
|
-
const next = typeof nextPrev === 'string' || typeof nextPrev === 'undefined'
|
|
42
|
-
? null
|
|
43
|
-
: nextPrev.type === TransitionSeriesTransition
|
|
44
|
-
? nextPrev
|
|
45
|
-
: null;
|
|
46
|
-
const prevIsTransition = typeof hasPrev === 'string' || typeof hasPrev === 'undefined'
|
|
47
|
-
? false
|
|
48
|
-
: hasPrev.type === TransitionSeriesTransition;
|
|
49
|
-
if (current.type === TransitionSeriesTransition) {
|
|
50
|
-
if (prevIsTransition) {
|
|
51
|
-
throw new TypeError(`A <TransitionSeries.Transition /> component must not be followed by another <TransitionSeries.Transition /> component (nth children = ${i - 1} and ${i})`);
|
|
52
|
-
}
|
|
53
|
-
return null;
|
|
54
|
-
}
|
|
55
|
-
if (current.type !== SeriesSequence) {
|
|
56
|
-
throw new TypeError(`The <TransitionSeries /> component only accepts a list of <TransitionSeries.Sequence /> and <TransitionSeries.Transition /> components as its children, but got ${current} instead`);
|
|
57
|
-
}
|
|
58
|
-
const castedChildAgain = current;
|
|
59
|
-
const debugInfo = `index = ${i}, duration = ${castedChildAgain.props.durationInFrames}`;
|
|
60
|
-
if (!(castedChildAgain === null || castedChildAgain === void 0 ? void 0 : castedChildAgain.props.children)) {
|
|
61
|
-
throw new TypeError(`A <TransitionSeries.Sequence /> component (${debugInfo}) was detected to not have any children. Delete it to fix this error.`);
|
|
62
|
-
}
|
|
63
|
-
const durationInFramesProp = castedChildAgain.props.durationInFrames;
|
|
64
|
-
const { durationInFrames, children: _children, ...passedProps } = castedChildAgain.props;
|
|
65
|
-
validateDurationInFrames(durationInFramesProp, {
|
|
66
|
-
component: `of a <TransitionSeries.Sequence /> component`,
|
|
67
|
-
allowFloats: true,
|
|
68
|
-
});
|
|
69
|
-
const offset = (_a = castedChildAgain.props.offset) !== null && _a !== void 0 ? _a : 0;
|
|
70
|
-
if (Number.isNaN(offset)) {
|
|
71
|
-
throw new TypeError(`The "offset" property of a <TransitionSeries.Sequence /> must not be NaN, but got NaN (${debugInfo}).`);
|
|
72
|
-
}
|
|
73
|
-
if (!Number.isFinite(offset)) {
|
|
74
|
-
throw new TypeError(`The "offset" property of a <TransitionSeries.Sequence /> must be finite, but got ${offset} (${debugInfo}).`);
|
|
75
|
-
}
|
|
76
|
-
if (offset % 1 !== 0) {
|
|
77
|
-
throw new TypeError(`The "offset" property of a <TransitionSeries.Sequence /> must be finite, but got ${offset} (${debugInfo}).`);
|
|
78
|
-
}
|
|
79
|
-
const currentStartFrame = startFrame + offset;
|
|
80
|
-
let duration = 0;
|
|
81
|
-
if (prev) {
|
|
82
|
-
duration = prev.props.timing.getDurationInFrames({
|
|
83
|
-
fps,
|
|
84
|
-
});
|
|
85
|
-
transitionOffsets -= duration;
|
|
86
|
-
}
|
|
87
|
-
let actualStartFrame = currentStartFrame + transitionOffsets;
|
|
88
|
-
startFrame += durationInFramesProp + offset;
|
|
89
|
-
// Handle the case where the first item is a transition
|
|
90
|
-
if (actualStartFrame < 0) {
|
|
91
|
-
startFrame -= actualStartFrame;
|
|
92
|
-
actualStartFrame = 0;
|
|
93
|
-
}
|
|
94
|
-
const nextProgress = next
|
|
95
|
-
? next.props.timing.getProgress({
|
|
96
|
-
frame: frame -
|
|
97
|
-
actualStartFrame -
|
|
98
|
-
durationInFrames +
|
|
99
|
-
next.props.timing.getDurationInFrames({ fps }),
|
|
100
|
-
fps,
|
|
101
|
-
})
|
|
102
|
-
: null;
|
|
103
|
-
const prevProgress = prev
|
|
104
|
-
? prev.props.timing.getProgress({
|
|
105
|
-
frame: frame - actualStartFrame,
|
|
106
|
-
fps,
|
|
107
|
-
})
|
|
108
|
-
: null;
|
|
109
|
-
if (next &&
|
|
110
|
-
durationInFramesProp < next.props.timing.getDurationInFrames({ fps })) {
|
|
111
|
-
throw new Error(`The duration of a <TransitionSeries.Sequence /> must not be shorter than the duration of the next <TransitionSeries.Transition />. The transition is ${next.props.timing.getDurationInFrames({ fps })} frames long, but the sequence is only ${durationInFramesProp} frames long (${debugInfo})`);
|
|
112
|
-
}
|
|
113
|
-
if (prev &&
|
|
114
|
-
durationInFramesProp < prev.props.timing.getDurationInFrames({ fps })) {
|
|
115
|
-
throw new Error(`The duration of a <TransitionSeries.Sequence /> must not be shorter than the duration of the previous <TransitionSeries.Transition />. The transition is ${prev.props.timing.getDurationInFrames({ fps })} frames long, but the sequence is only ${durationInFramesProp} frames long (${debugInfo})`);
|
|
116
|
-
}
|
|
117
|
-
if (next && prev && nextProgress !== null && prevProgress !== null) {
|
|
118
|
-
const nextPresentation = (_b = next.props.presentation) !== null && _b !== void 0 ? _b : slide();
|
|
119
|
-
const prevPresentation = (_c = prev.props.presentation) !== null && _c !== void 0 ? _c : slide();
|
|
120
|
-
const UppercaseNextPresentation = nextPresentation.component;
|
|
121
|
-
const UppercasePrevPresentation = prevPresentation.component;
|
|
122
|
-
return (_jsx(Sequence, { name: passedProps.name || '<TS.Sequence>', from: Math.floor(actualStartFrame), durationInFrames: durationInFramesProp, layout: "none", stack: passedProps.stack, children: _jsx(UppercaseNextPresentation, { passedProps: (_d = nextPresentation.props) !== null && _d !== void 0 ? _d : {}, presentationDirection: "exiting", presentationProgress: nextProgress, children: _jsx(UppercasePrevPresentation, { passedProps: (_e = prevPresentation.props) !== null && _e !== void 0 ? _e : {}, presentationDirection: "entering", presentationProgress: prevProgress, children: _jsx(Sequence, { showInTimeline: false, ...passedProps, children: child }) }) }) }));
|
|
123
|
-
}
|
|
124
|
-
if (prevProgress !== null && prev) {
|
|
125
|
-
const prevPresentation = (_f = prev.props.presentation) !== null && _f !== void 0 ? _f : slide();
|
|
126
|
-
const UppercasePrevPresentation = prevPresentation.component;
|
|
127
|
-
return (_jsx(Sequence, { name: passedProps.name || '<TS.Sequence>', from: Math.floor(actualStartFrame), durationInFrames: durationInFramesProp, layout: "none", stack: passedProps.stack, children: _jsx(UppercasePrevPresentation, { passedProps: (_g = prevPresentation.props) !== null && _g !== void 0 ? _g : {}, presentationDirection: "entering", presentationProgress: prevProgress, children: _jsx(Sequence, { showInTimeline: false, ...passedProps, children: child }) }) }));
|
|
128
|
-
}
|
|
129
|
-
if (nextProgress !== null && next) {
|
|
130
|
-
const nextPresentation = (_h = next.props.presentation) !== null && _h !== void 0 ? _h : slide();
|
|
131
|
-
const UppercaseNextPresentation = nextPresentation.component;
|
|
132
|
-
return (_jsx(Sequence, { name: passedProps.name || '<TS.Sequence>', from: Math.floor(actualStartFrame), durationInFrames: durationInFramesProp, layout: "none", stack: passedProps.stack, children: _jsx(UppercaseNextPresentation, { passedProps: (_j = nextPresentation.props) !== null && _j !== void 0 ? _j : {}, presentationDirection: "exiting", presentationProgress: nextProgress, children: _jsx(Sequence, { showInTimeline: false, ...passedProps, children: child }) }) }));
|
|
133
|
-
}
|
|
134
|
-
return (_jsx(Sequence, { name: passedProps.name || '<TS.Sequence>', from: Math.floor(actualStartFrame), durationInFrames: durationInFramesProp, ...passedProps, children: child }));
|
|
135
|
-
});
|
|
136
|
-
}, [children, fps, frame]);
|
|
137
|
-
// eslint-disable-next-line react/jsx-no-useless-fragment
|
|
138
|
-
return _jsx(_Fragment, { children: childrenValue });
|
|
139
|
-
};
|
|
140
|
-
const TransitionSeries = ({ children, name, ...otherProps }) => {
|
|
141
|
-
const displayName = name !== null && name !== void 0 ? name : '<TransitionSeries>';
|
|
142
|
-
return (_jsx(Sequence, { name: displayName, ...otherProps, children: _jsx(TransitionSeriesChildren, { children: children }) }));
|
|
143
|
-
};
|
|
144
|
-
TransitionSeries.Sequence = SeriesSequence;
|
|
145
|
-
TransitionSeries.Transition = TransitionSeriesTransition;
|
|
146
|
-
export { TransitionSeries };
|
|
147
|
-
Internals.addSequenceStackTraces(TransitionSeries);
|
|
148
|
-
Internals.addSequenceStackTraces(SeriesSequence);
|
package/.rollup.cache/Users/jonathanburger/remotion/packages/transitions/dist/flatten-children.js
DELETED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
export const flattenChildren = (children) => {
|
|
3
|
-
const childrenArray = React.Children.toArray(children);
|
|
4
|
-
return childrenArray.reduce((flatChildren, child) => {
|
|
5
|
-
if (child.type === React.Fragment) {
|
|
6
|
-
return flatChildren.concat(flattenChildren(child.props
|
|
7
|
-
.children));
|
|
8
|
-
}
|
|
9
|
-
flatChildren.push(child);
|
|
10
|
-
return flatChildren;
|
|
11
|
-
}, []);
|
|
12
|
-
};
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { translatePath } from '@remotion/paths';
|
|
3
|
-
import { makePie } from '@remotion/shapes';
|
|
4
|
-
import { useMemo, useState } from 'react';
|
|
5
|
-
import { AbsoluteFill, random } from 'remotion';
|
|
6
|
-
const ClockWipePresentation = ({ children, presentationDirection, presentationProgress, passedProps }) => {
|
|
7
|
-
const finishedRadius = Math.sqrt(passedProps.width ** 2 + passedProps.height ** 2) / 2;
|
|
8
|
-
const { path } = makePie({
|
|
9
|
-
radius: finishedRadius,
|
|
10
|
-
progress: presentationProgress,
|
|
11
|
-
});
|
|
12
|
-
const translatedPath = translatePath(path, -(finishedRadius * 2 - passedProps.width) / 2, -(finishedRadius * 2 - passedProps.height) / 2);
|
|
13
|
-
const [clipId] = useState(() => String(random(null)));
|
|
14
|
-
const style = useMemo(() => {
|
|
15
|
-
return {
|
|
16
|
-
width: '100%',
|
|
17
|
-
height: '100%',
|
|
18
|
-
clipPath: presentationDirection === 'exiting' ? undefined : `url(#${clipId})`,
|
|
19
|
-
...(presentationDirection === 'entering'
|
|
20
|
-
? passedProps.innerEnterStyle
|
|
21
|
-
: passedProps.innerExitStyle),
|
|
22
|
-
};
|
|
23
|
-
}, [
|
|
24
|
-
clipId,
|
|
25
|
-
passedProps.innerEnterStyle,
|
|
26
|
-
passedProps.innerExitStyle,
|
|
27
|
-
presentationDirection,
|
|
28
|
-
]);
|
|
29
|
-
const outerStyle = useMemo(() => {
|
|
30
|
-
return presentationDirection === 'entering'
|
|
31
|
-
? passedProps.outerEnterStyle
|
|
32
|
-
: passedProps.outerExitStyle;
|
|
33
|
-
}, [
|
|
34
|
-
passedProps.outerEnterStyle,
|
|
35
|
-
passedProps.outerExitStyle,
|
|
36
|
-
presentationDirection,
|
|
37
|
-
]);
|
|
38
|
-
return (_jsxs(AbsoluteFill, { style: outerStyle, children: [_jsx(AbsoluteFill, { style: style, children: children }), presentationDirection === 'exiting' ? null : (_jsx(AbsoluteFill, { children: _jsx("svg", { children: _jsx("defs", { children: _jsx("clipPath", { id: clipId, children: _jsx("path", { d: translatedPath, fill: "black" }) }) }) }) }))] }));
|
|
39
|
-
};
|
|
40
|
-
export const clockWipe = (props) => {
|
|
41
|
-
return { component: ClockWipePresentation, props: props !== null && props !== void 0 ? props : {} };
|
|
42
|
-
};
|
package/.rollup.cache/Users/jonathanburger/remotion/packages/transitions/dist/presentations/fade.js
DELETED
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { useMemo } from 'react';
|
|
3
|
-
import { AbsoluteFill } from 'remotion';
|
|
4
|
-
const FadePresentation = ({ children, presentationDirection, presentationProgress, passedProps }) => {
|
|
5
|
-
const isEntering = presentationDirection === 'entering';
|
|
6
|
-
const style = useMemo(() => {
|
|
7
|
-
return {
|
|
8
|
-
opacity: isEntering ? presentationProgress : 1,
|
|
9
|
-
...(presentationDirection === 'entering'
|
|
10
|
-
? passedProps.enterStyle
|
|
11
|
-
: passedProps.exitStyle),
|
|
12
|
-
};
|
|
13
|
-
}, [
|
|
14
|
-
isEntering,
|
|
15
|
-
passedProps.enterStyle,
|
|
16
|
-
passedProps.exitStyle,
|
|
17
|
-
presentationDirection,
|
|
18
|
-
presentationProgress,
|
|
19
|
-
]);
|
|
20
|
-
return _jsx(AbsoluteFill, { style: style, children: children });
|
|
21
|
-
};
|
|
22
|
-
export const fade = (props) => {
|
|
23
|
-
return {
|
|
24
|
-
component: FadePresentation,
|
|
25
|
-
props: props !== null && props !== void 0 ? props : {},
|
|
26
|
-
};
|
|
27
|
-
};
|
package/.rollup.cache/Users/jonathanburger/remotion/packages/transitions/dist/presentations/flip.js
DELETED
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { useMemo } from 'react';
|
|
3
|
-
import { AbsoluteFill, interpolate } from 'remotion';
|
|
4
|
-
const Flip = ({ children, presentationDirection, presentationProgress, passedProps: { direction = 'from-left', perspective = 1000, innerEnterStyle, innerExitStyle, outerEnterStyle, outerExitStyle, }, }) => {
|
|
5
|
-
const style = useMemo(() => {
|
|
6
|
-
const startRotationEntering = direction === 'from-right' || direction === 'from-top' ? 180 : -180;
|
|
7
|
-
const endRotationEntering = direction === 'from-right' || direction === 'from-top' ? -180 : 180;
|
|
8
|
-
const rotation = presentationDirection === 'entering'
|
|
9
|
-
? interpolate(presentationProgress, [0, 1], [startRotationEntering, 0])
|
|
10
|
-
: interpolate(presentationProgress, [0, 1], [0, endRotationEntering]);
|
|
11
|
-
const rotateProperty = direction === 'from-top' || direction === 'from-bottom'
|
|
12
|
-
? 'rotateX'
|
|
13
|
-
: 'rotateY';
|
|
14
|
-
return {
|
|
15
|
-
width: '100%',
|
|
16
|
-
height: '100%',
|
|
17
|
-
transform: `${rotateProperty}(${rotation}deg)`,
|
|
18
|
-
backfaceVisibility: 'hidden',
|
|
19
|
-
WebkitBackfaceVisibility: 'hidden',
|
|
20
|
-
...(presentationDirection === 'entering'
|
|
21
|
-
? innerEnterStyle
|
|
22
|
-
: innerExitStyle),
|
|
23
|
-
};
|
|
24
|
-
}, [
|
|
25
|
-
direction,
|
|
26
|
-
innerEnterStyle,
|
|
27
|
-
innerExitStyle,
|
|
28
|
-
presentationDirection,
|
|
29
|
-
presentationProgress,
|
|
30
|
-
]);
|
|
31
|
-
const outer = useMemo(() => {
|
|
32
|
-
return {
|
|
33
|
-
perspective,
|
|
34
|
-
// Make children also their backface hidden
|
|
35
|
-
transformStyle: 'preserve-3d',
|
|
36
|
-
...(presentationDirection === 'entering'
|
|
37
|
-
? outerEnterStyle
|
|
38
|
-
: outerExitStyle),
|
|
39
|
-
};
|
|
40
|
-
}, [outerEnterStyle, outerExitStyle, perspective, presentationDirection]);
|
|
41
|
-
return (_jsx(AbsoluteFill, { style: outer, children: _jsx(AbsoluteFill, { style: style, children: children }) }));
|
|
42
|
-
};
|
|
43
|
-
export const flip = (props) => {
|
|
44
|
-
return { component: Flip, props: props !== null && props !== void 0 ? props : {} };
|
|
45
|
-
};
|
package/.rollup.cache/Users/jonathanburger/remotion/packages/transitions/dist/presentations/slide.js
DELETED
|
@@ -1,72 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { useMemo } from 'react';
|
|
3
|
-
import { AbsoluteFill } from 'remotion';
|
|
4
|
-
const epsilon = 0.01;
|
|
5
|
-
const SlidePresentation = ({ children, presentationProgress, presentationDirection, passedProps: { direction = 'from-left', enterStyle, exitStyle }, }) => {
|
|
6
|
-
const directionStyle = useMemo(() => {
|
|
7
|
-
// Overlay the two slides barely to avoid a white line between them
|
|
8
|
-
// Remove the correction once the presentation progress is 1
|
|
9
|
-
const presentationProgressWithEpsilonCorrection = presentationProgress === 1
|
|
10
|
-
? presentationProgress * 100
|
|
11
|
-
: presentationProgress * 100 - epsilon;
|
|
12
|
-
if (presentationDirection === 'exiting') {
|
|
13
|
-
switch (direction) {
|
|
14
|
-
case 'from-left':
|
|
15
|
-
return {
|
|
16
|
-
transform: `translateX(${presentationProgressWithEpsilonCorrection}%)`,
|
|
17
|
-
};
|
|
18
|
-
case 'from-right':
|
|
19
|
-
return {
|
|
20
|
-
transform: `translateX(-${presentationProgress * 100}%)`,
|
|
21
|
-
};
|
|
22
|
-
case 'from-top':
|
|
23
|
-
return {
|
|
24
|
-
transform: `translateY(${presentationProgressWithEpsilonCorrection}%)`,
|
|
25
|
-
};
|
|
26
|
-
case 'from-bottom':
|
|
27
|
-
return {
|
|
28
|
-
transform: `translateY(-${presentationProgress * 100}%)`,
|
|
29
|
-
};
|
|
30
|
-
default:
|
|
31
|
-
throw new Error(`Invalid direction: ${direction}`);
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
switch (direction) {
|
|
35
|
-
case 'from-left':
|
|
36
|
-
return {
|
|
37
|
-
transform: `translateX(${-100 + presentationProgress * 100}%)`,
|
|
38
|
-
};
|
|
39
|
-
case 'from-right':
|
|
40
|
-
return {
|
|
41
|
-
transform: `translateX(${100 - presentationProgressWithEpsilonCorrection}%)`,
|
|
42
|
-
};
|
|
43
|
-
case 'from-top':
|
|
44
|
-
return {
|
|
45
|
-
transform: `translateY(${-100 + presentationProgress * 100}%)`,
|
|
46
|
-
};
|
|
47
|
-
case 'from-bottom':
|
|
48
|
-
return {
|
|
49
|
-
transform: `translateY(${100 - presentationProgressWithEpsilonCorrection}%)`,
|
|
50
|
-
};
|
|
51
|
-
default:
|
|
52
|
-
throw new Error(`Invalid direction: ${direction}`);
|
|
53
|
-
}
|
|
54
|
-
}, [presentationDirection, presentationProgress, direction]);
|
|
55
|
-
const style = useMemo(() => {
|
|
56
|
-
return {
|
|
57
|
-
width: '100%',
|
|
58
|
-
height: '100%',
|
|
59
|
-
justifyContent: 'center',
|
|
60
|
-
alignItems: 'center',
|
|
61
|
-
...directionStyle,
|
|
62
|
-
...(presentationDirection === 'entering' ? enterStyle : exitStyle),
|
|
63
|
-
};
|
|
64
|
-
}, [directionStyle, enterStyle, exitStyle, presentationDirection]);
|
|
65
|
-
return _jsx(AbsoluteFill, { style: style, children: children });
|
|
66
|
-
};
|
|
67
|
-
export const slide = (props) => {
|
|
68
|
-
return {
|
|
69
|
-
component: SlidePresentation,
|
|
70
|
-
props: props !== null && props !== void 0 ? props : {},
|
|
71
|
-
};
|
|
72
|
-
};
|
package/.rollup.cache/Users/jonathanburger/remotion/packages/transitions/dist/presentations/wipe.js
DELETED
|
@@ -1,159 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useMemo, useState } from 'react';
|
|
3
|
-
import { AbsoluteFill, random } from 'remotion';
|
|
4
|
-
const makePathIn = (progress, direction) => {
|
|
5
|
-
switch (direction) {
|
|
6
|
-
case 'from-left':
|
|
7
|
-
return `
|
|
8
|
-
M 0 0
|
|
9
|
-
L ${progress} 0
|
|
10
|
-
L ${progress} 1
|
|
11
|
-
L 0 1
|
|
12
|
-
Z`;
|
|
13
|
-
case 'from-top-left':
|
|
14
|
-
return `
|
|
15
|
-
M 0 0
|
|
16
|
-
L ${progress * 2} 0
|
|
17
|
-
L 0 ${progress * 2}
|
|
18
|
-
Z`;
|
|
19
|
-
case 'from-top':
|
|
20
|
-
return `
|
|
21
|
-
M 0 0
|
|
22
|
-
L 1 0
|
|
23
|
-
L 1 ${progress}
|
|
24
|
-
L 0 ${progress}
|
|
25
|
-
Z`;
|
|
26
|
-
case 'from-top-right':
|
|
27
|
-
return `
|
|
28
|
-
M 1 0
|
|
29
|
-
L ${1 - progress * 2} 0
|
|
30
|
-
L 1 ${progress * 2}
|
|
31
|
-
Z`;
|
|
32
|
-
case 'from-right':
|
|
33
|
-
return `
|
|
34
|
-
M 1 0
|
|
35
|
-
L 1 1
|
|
36
|
-
L ${1 - progress} 1
|
|
37
|
-
L ${1 - progress} 0
|
|
38
|
-
Z`;
|
|
39
|
-
case 'from-bottom-right':
|
|
40
|
-
return `
|
|
41
|
-
M 1 1
|
|
42
|
-
L ${1 - progress * 2} 1
|
|
43
|
-
L 1 ${1 - progress * 2}
|
|
44
|
-
Z`;
|
|
45
|
-
case 'from-bottom':
|
|
46
|
-
return `
|
|
47
|
-
M 0 1
|
|
48
|
-
L 1 1
|
|
49
|
-
L 1 ${1 - progress}
|
|
50
|
-
L 0 ${1 - progress}
|
|
51
|
-
Z`;
|
|
52
|
-
case 'from-bottom-left':
|
|
53
|
-
return `
|
|
54
|
-
M 0 1
|
|
55
|
-
L 0 ${1 - progress * 2}
|
|
56
|
-
L ${progress * 2} 1
|
|
57
|
-
Z`;
|
|
58
|
-
default:
|
|
59
|
-
throw new Error(`Unknown direction ${JSON.stringify(direction)}`);
|
|
60
|
-
}
|
|
61
|
-
};
|
|
62
|
-
const makePathOut = (progress, direction) => {
|
|
63
|
-
switch (direction) {
|
|
64
|
-
case 'from-left':
|
|
65
|
-
return `
|
|
66
|
-
M 1 1
|
|
67
|
-
L ${1 - progress} 1
|
|
68
|
-
L ${1 - progress} 0
|
|
69
|
-
L 1 0
|
|
70
|
-
Z`;
|
|
71
|
-
case 'from-top-left':
|
|
72
|
-
return `
|
|
73
|
-
M 1 1
|
|
74
|
-
L ${1 - 2 * progress} 1
|
|
75
|
-
L 1 ${1 - 2 * progress}
|
|
76
|
-
Z`;
|
|
77
|
-
case 'from-top':
|
|
78
|
-
return `
|
|
79
|
-
M 1 1
|
|
80
|
-
L 0 1
|
|
81
|
-
L 0 ${1 - progress}
|
|
82
|
-
L 1 ${1 - progress}
|
|
83
|
-
Z`;
|
|
84
|
-
case 'from-top-right':
|
|
85
|
-
return `
|
|
86
|
-
M 0 1
|
|
87
|
-
L ${progress * 2} 1
|
|
88
|
-
L 0 ${1 - progress * 2}
|
|
89
|
-
Z`;
|
|
90
|
-
case 'from-right':
|
|
91
|
-
return `
|
|
92
|
-
M 0 0
|
|
93
|
-
L ${progress} 0
|
|
94
|
-
L ${progress} 1
|
|
95
|
-
L 0 1
|
|
96
|
-
Z`;
|
|
97
|
-
case 'from-bottom-right':
|
|
98
|
-
return `
|
|
99
|
-
M 0 0
|
|
100
|
-
L ${progress * 2} 0
|
|
101
|
-
L 0 ${progress * 2}
|
|
102
|
-
Z`;
|
|
103
|
-
case 'from-bottom':
|
|
104
|
-
return `
|
|
105
|
-
M 1 0
|
|
106
|
-
L 0 0
|
|
107
|
-
L 0 ${progress}
|
|
108
|
-
L 1 ${progress}
|
|
109
|
-
Z`;
|
|
110
|
-
case 'from-bottom-left':
|
|
111
|
-
return `
|
|
112
|
-
M 1 0
|
|
113
|
-
L ${1 - progress * 2} 0
|
|
114
|
-
L 1 ${progress * 2}
|
|
115
|
-
Z`;
|
|
116
|
-
default:
|
|
117
|
-
throw new Error(`Unknown direction ${JSON.stringify(direction)}`);
|
|
118
|
-
}
|
|
119
|
-
};
|
|
120
|
-
const WipePresentation = ({ children, presentationProgress, presentationDirection, passedProps: { direction = 'from-left', innerEnterStyle, innerExitStyle, outerEnterStyle, outerExitStyle, }, }) => {
|
|
121
|
-
const [clipId] = useState(() => String(random(null)));
|
|
122
|
-
const progressInDirection = presentationDirection === 'entering'
|
|
123
|
-
? presentationProgress
|
|
124
|
-
: 1 - presentationProgress;
|
|
125
|
-
const path = presentationDirection === 'entering'
|
|
126
|
-
? makePathIn(progressInDirection, direction)
|
|
127
|
-
: makePathOut(progressInDirection, direction);
|
|
128
|
-
const style = useMemo(() => {
|
|
129
|
-
return {
|
|
130
|
-
width: '100%',
|
|
131
|
-
height: '100%',
|
|
132
|
-
justifyContent: 'center',
|
|
133
|
-
alignItems: 'center',
|
|
134
|
-
clipPath: `url(#${clipId})`,
|
|
135
|
-
...(presentationDirection === 'entering'
|
|
136
|
-
? innerEnterStyle
|
|
137
|
-
: innerExitStyle),
|
|
138
|
-
};
|
|
139
|
-
}, [clipId, innerEnterStyle, innerExitStyle, presentationDirection]);
|
|
140
|
-
const outerStyle = useMemo(() => {
|
|
141
|
-
return presentationDirection === 'entering'
|
|
142
|
-
? outerEnterStyle
|
|
143
|
-
: outerExitStyle;
|
|
144
|
-
}, [outerEnterStyle, outerExitStyle, presentationDirection]);
|
|
145
|
-
const svgStyle = useMemo(() => {
|
|
146
|
-
return {
|
|
147
|
-
width: '100%',
|
|
148
|
-
height: '100%',
|
|
149
|
-
pointerEvents: 'none',
|
|
150
|
-
};
|
|
151
|
-
}, []);
|
|
152
|
-
return (_jsxs(AbsoluteFill, { style: outerStyle, children: [_jsx(AbsoluteFill, { style: style, children: children }), _jsx(AbsoluteFill, { children: _jsx("svg", { viewBox: "0 0 1 1", style: svgStyle, children: _jsx("defs", { children: _jsx("clipPath", { id: clipId, clipPathUnits: "objectBoundingBox", children: _jsx("path", { d: path, fill: "black" }) }) }) }) })] }));
|
|
153
|
-
};
|
|
154
|
-
export const wipe = (props) => {
|
|
155
|
-
return {
|
|
156
|
-
component: WipePresentation,
|
|
157
|
-
props: props !== null && props !== void 0 ? props : {},
|
|
158
|
-
};
|
|
159
|
-
};
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
/**
|
|
3
|
-
* @vitest-environment jsdom
|
|
4
|
-
*/
|
|
5
|
-
import { makeMockCompositionManagerContext, makeTimelineContext, } from '@remotion/test-utils';
|
|
6
|
-
import { renderToString } from 'react-dom/server';
|
|
7
|
-
import { AbsoluteFill, Internals } from 'remotion';
|
|
8
|
-
import { expect, test } from 'vitest';
|
|
9
|
-
import { fade } from '../presentations/fade.js';
|
|
10
|
-
import { linearTiming } from '../timings/linear-timing.js';
|
|
11
|
-
import { TransitionSeries } from '../TransitionSeries.js';
|
|
12
|
-
const renderForFrame = (frame, markup) => {
|
|
13
|
-
return renderToString(_jsx(Internals.CanUseRemotionHooksProvider, { children: _jsx(Internals.CompositionManager.Provider, { value: makeMockCompositionManagerContext(), children: _jsx(Internals.Timeline.TimelineContext.Provider, { value: makeTimelineContext(frame), children: markup }) }) }));
|
|
14
|
-
};
|
|
15
|
-
const Letter = ({ children, color }) => {
|
|
16
|
-
return (_jsx(AbsoluteFill, { style: {
|
|
17
|
-
backgroundColor: color,
|
|
18
|
-
opacity: 0.9,
|
|
19
|
-
justifyContent: 'center',
|
|
20
|
-
alignItems: 'center',
|
|
21
|
-
fontSize: 200,
|
|
22
|
-
color: 'white',
|
|
23
|
-
}, children: children }));
|
|
24
|
-
};
|
|
25
|
-
test('Should throw if two transitions in a row', () => {
|
|
26
|
-
expect(() => {
|
|
27
|
-
return renderForFrame(10, _jsxs(TransitionSeries, { children: [_jsx(TransitionSeries.Sequence, { durationInFrames: 60, children: _jsx(Letter, { color: "green", children: "C" }) }), _jsx(TransitionSeries.Transition, { presentation: fade({}), timing: linearTiming({
|
|
28
|
-
durationInFrames: 40,
|
|
29
|
-
}) }), _jsx(TransitionSeries.Transition, { presentation: fade({}), timing: linearTiming({
|
|
30
|
-
durationInFrames: 40,
|
|
31
|
-
}) })] }));
|
|
32
|
-
}).toThrow('A <TransitionSeries.Transition /> component must not be followed by another <TransitionSeries.Transition /> component (nth children = 1 and 2)');
|
|
33
|
-
});
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { interpolate } from 'remotion';
|
|
2
|
-
export const linearTiming = (options) => {
|
|
3
|
-
return {
|
|
4
|
-
getDurationInFrames: () => {
|
|
5
|
-
return options.durationInFrames;
|
|
6
|
-
},
|
|
7
|
-
getProgress: ({ frame }) => {
|
|
8
|
-
return interpolate(frame, [0, options.durationInFrames], [0, 1], {
|
|
9
|
-
easing: options.easing,
|
|
10
|
-
extrapolateLeft: 'clamp',
|
|
11
|
-
extrapolateRight: 'clamp',
|
|
12
|
-
});
|
|
13
|
-
},
|
|
14
|
-
};
|
|
15
|
-
};
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import { measureSpring, spring } from 'remotion';
|
|
2
|
-
const springWithInvalidArgumentRejection = (args) => {
|
|
3
|
-
if (args.to || args.from) {
|
|
4
|
-
throw new Error('to / from values are not supported by springWithRoundUpIfThreshold');
|
|
5
|
-
}
|
|
6
|
-
return spring(args);
|
|
7
|
-
};
|
|
8
|
-
export const springTiming = (options = {}) => {
|
|
9
|
-
return {
|
|
10
|
-
getDurationInFrames: ({ fps }) => {
|
|
11
|
-
if (options.durationInFrames) {
|
|
12
|
-
return options.durationInFrames;
|
|
13
|
-
}
|
|
14
|
-
return measureSpring({
|
|
15
|
-
config: options.config,
|
|
16
|
-
threshold: options.durationRestThreshold,
|
|
17
|
-
fps,
|
|
18
|
-
});
|
|
19
|
-
},
|
|
20
|
-
getProgress: ({ fps, frame }) => {
|
|
21
|
-
return springWithInvalidArgumentRejection({
|
|
22
|
-
fps,
|
|
23
|
-
frame,
|
|
24
|
-
config: options.config,
|
|
25
|
-
durationInFrames: options.durationInFrames,
|
|
26
|
-
durationRestThreshold: options.durationRestThreshold,
|
|
27
|
-
});
|
|
28
|
-
},
|
|
29
|
-
};
|
|
30
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|