@remotion/transitions 4.0.177 → 4.0.178

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/README.md ADDED
@@ -0,0 +1,18 @@
1
+ # @remotion/transitions
2
+
3
+ Library for creating transitions in Remotion
4
+
5
+ [![NPM Downloads](https://img.shields.io/npm/dm/@remotion/transitions.svg?style=flat&color=black&label=Downloads)](https://npmcharts.com/compare/@remotion/transitions?minimal=true)
6
+
7
+ ## Installation
8
+
9
+ ```bash
10
+ npm install @remotion/transitions --save-exact
11
+ ```
12
+
13
+ When installing a Remotion package, make sure to align the version of all `remotion` and `@remotion/*` packages to the same version.
14
+ Remove the `^` character from the version number to use the exact version.
15
+
16
+ ## Usage
17
+
18
+ See the [documentation](https://www.remotion.dev/transitions) for more information.
package/bundle.ts CHANGED
@@ -5,7 +5,7 @@ if (process.env.NODE_ENV !== 'production') {
5
5
  throw new Error('This script must be run using NODE_ENV=production');
6
6
  }
7
7
 
8
- const presentations = ['slide', 'flip', 'wipe', 'fade', 'clock-wipe'];
8
+ const presentations = ['slide', 'flip', 'wipe', 'fade', 'clock-wipe', 'none'];
9
9
 
10
10
  const output = await build({
11
11
  entrypoints: [
@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
5
5
  const react_1 = require("react");
6
6
  const remotion_1 = require("remotion");
7
7
  const no_react_1 = require("remotion/no-react");
8
+ const context_js_1 = require("./context.js");
8
9
  const flatten_children_js_1 = require("./flatten-children.js");
9
10
  const slide_js_1 = require("./presentations/slide.js");
10
11
  const validate_js_1 = require("./validate.js");
@@ -125,21 +126,21 @@ const TransitionSeriesChildren = ({ children, }) => {
125
126
  const UppercasePrevPresentation = prevPresentation.component;
126
127
  return ((0, jsx_runtime_1.jsx)(remotion_1.Sequence
127
128
  // eslint-disable-next-line react/no-array-index-key
128
- , { from: Math.floor(actualStartFrame), durationInFrames: durationInFramesProp, ...passedProps, name: passedProps.name || '<TS.Sequence>', children: (0, jsx_runtime_1.jsx)(UppercaseNextPresentation, { passedProps: (_d = nextPresentation.props) !== null && _d !== void 0 ? _d : {}, presentationDirection: "exiting", presentationProgress: nextProgress, presentationDurationInFrames: next.props.timing.getDurationInFrames({ fps }), children: (0, jsx_runtime_1.jsx)(UppercasePrevPresentation, { passedProps: (_e = prevPresentation.props) !== null && _e !== void 0 ? _e : {}, presentationDirection: "entering", presentationProgress: prevProgress, presentationDurationInFrames: prev.props.timing.getDurationInFrames({ fps }), children: child }) }) }, i));
129
+ , { from: Math.floor(actualStartFrame), durationInFrames: durationInFramesProp, ...passedProps, name: passedProps.name || '<TS.Sequence>', children: (0, jsx_runtime_1.jsx)(UppercaseNextPresentation, { passedProps: (_d = nextPresentation.props) !== null && _d !== void 0 ? _d : {}, presentationDirection: "exiting", presentationProgress: nextProgress, presentationDurationInFrames: next.props.timing.getDurationInFrames({ fps }), children: (0, jsx_runtime_1.jsx)(context_js_1.WrapInExitingProgressContext, { presentationProgress: nextProgress, children: (0, jsx_runtime_1.jsx)(UppercasePrevPresentation, { passedProps: (_e = prevPresentation.props) !== null && _e !== void 0 ? _e : {}, presentationDirection: "entering", presentationProgress: prevProgress, presentationDurationInFrames: prev.props.timing.getDurationInFrames({ fps }), children: (0, jsx_runtime_1.jsx)(context_js_1.WrapInEnteringProgressContext, { presentationProgress: prevProgress, children: child }) }) }) }) }, i));
129
130
  }
130
131
  if (prevProgress !== null && prev) {
131
132
  const prevPresentation = (_f = prev.props.presentation) !== null && _f !== void 0 ? _f : (0, slide_js_1.slide)();
132
133
  const UppercasePrevPresentation = prevPresentation.component;
133
134
  return ((0, jsx_runtime_1.jsx)(remotion_1.Sequence
134
135
  // eslint-disable-next-line react/no-array-index-key
135
- , { from: Math.floor(actualStartFrame), durationInFrames: durationInFramesProp, ...passedProps, name: passedProps.name || '<TS.Sequence>', children: (0, jsx_runtime_1.jsx)(UppercasePrevPresentation, { passedProps: (_g = prevPresentation.props) !== null && _g !== void 0 ? _g : {}, presentationDirection: "entering", presentationProgress: prevProgress, presentationDurationInFrames: prev.props.timing.getDurationInFrames({ fps }), children: child }) }, i));
136
+ , { from: Math.floor(actualStartFrame), durationInFrames: durationInFramesProp, ...passedProps, name: passedProps.name || '<TS.Sequence>', children: (0, jsx_runtime_1.jsx)(UppercasePrevPresentation, { passedProps: (_g = prevPresentation.props) !== null && _g !== void 0 ? _g : {}, presentationDirection: "entering", presentationProgress: prevProgress, presentationDurationInFrames: prev.props.timing.getDurationInFrames({ fps }), children: (0, jsx_runtime_1.jsx)(context_js_1.WrapInEnteringProgressContext, { presentationProgress: prevProgress, children: child }) }) }, i));
136
137
  }
137
138
  if (nextProgress !== null && next) {
138
139
  const nextPresentation = (_h = next.props.presentation) !== null && _h !== void 0 ? _h : (0, slide_js_1.slide)();
139
140
  const UppercaseNextPresentation = nextPresentation.component;
140
141
  return ((0, jsx_runtime_1.jsx)(remotion_1.Sequence
141
142
  // eslint-disable-next-line react/no-array-index-key
142
- , { from: Math.floor(actualStartFrame), durationInFrames: durationInFramesProp, ...passedProps, name: passedProps.name || '<TS.Sequence>', children: (0, jsx_runtime_1.jsx)(UppercaseNextPresentation, { passedProps: (_j = nextPresentation.props) !== null && _j !== void 0 ? _j : {}, presentationDirection: "exiting", presentationProgress: nextProgress, presentationDurationInFrames: next.props.timing.getDurationInFrames({ fps }), children: child }) }, i));
143
+ , { from: Math.floor(actualStartFrame), durationInFrames: durationInFramesProp, ...passedProps, name: passedProps.name || '<TS.Sequence>', children: (0, jsx_runtime_1.jsx)(UppercaseNextPresentation, { passedProps: (_j = nextPresentation.props) !== null && _j !== void 0 ? _j : {}, presentationDirection: "exiting", presentationProgress: nextProgress, presentationDurationInFrames: next.props.timing.getDurationInFrames({ fps }), children: (0, jsx_runtime_1.jsx)(context_js_1.WrapInExitingProgressContext, { presentationProgress: nextProgress, children: child }) }) }, i));
143
144
  }
144
145
  return ((0, jsx_runtime_1.jsx)(remotion_1.Sequence
145
146
  // eslint-disable-next-line react/no-array-index-key
package/dist/context.d.ts CHANGED
@@ -1,9 +1,12 @@
1
1
  import React from 'react';
2
- export type TransitionState = {
3
- entering: number;
4
- exiting: number;
5
- isInTransitionSeries: boolean;
2
+ type EnteringState = {
3
+ enteringProgress: number;
6
4
  };
5
+ type ExitingState = {
6
+ exitingProgress: number;
7
+ };
8
+ export declare const EnteringContext: React.Context<EnteringState | null>;
9
+ export declare const ExitingContext: React.Context<ExitingState | null>;
7
10
  export declare const WrapInEnteringProgressContext: React.FC<{
8
11
  readonly presentationProgress: number;
9
12
  readonly children: React.ReactNode;
@@ -12,7 +15,4 @@ export declare const WrapInExitingProgressContext: React.FC<{
12
15
  readonly presentationProgress: number;
13
16
  readonly children: React.ReactNode;
14
17
  }>;
15
- /**
16
- * Gets the progress and direction of a transition with a context() presentation.
17
- */
18
- export declare const useTransitionProgress: () => TransitionState;
18
+ export {};
package/dist/context.js CHANGED
@@ -23,18 +23,18 @@ var __importStar = (this && this.__importStar) || function (mod) {
23
23
  return result;
24
24
  };
25
25
  Object.defineProperty(exports, "__esModule", { value: true });
26
- exports.useTransitionProgress = exports.WrapInExitingProgressContext = exports.WrapInEnteringProgressContext = void 0;
26
+ exports.WrapInExitingProgressContext = exports.WrapInEnteringProgressContext = exports.ExitingContext = exports.EnteringContext = void 0;
27
27
  const jsx_runtime_1 = require("react/jsx-runtime");
28
28
  const react_1 = __importStar(require("react"));
29
- const EnteringContext = react_1.default.createContext(null);
30
- const ExitingContext = react_1.default.createContext(null);
29
+ exports.EnteringContext = react_1.default.createContext(null);
30
+ exports.ExitingContext = react_1.default.createContext(null);
31
31
  const WrapInEnteringProgressContext = ({ presentationProgress, children }) => {
32
32
  const value = (0, react_1.useMemo)(() => {
33
33
  return {
34
34
  enteringProgress: presentationProgress,
35
35
  };
36
36
  }, [presentationProgress]);
37
- return ((0, jsx_runtime_1.jsx)(EnteringContext.Provider, { value: value, children: children }));
37
+ return ((0, jsx_runtime_1.jsx)(exports.EnteringContext.Provider, { value: value, children: children }));
38
38
  };
39
39
  exports.WrapInEnteringProgressContext = WrapInEnteringProgressContext;
40
40
  const WrapInExitingProgressContext = ({ presentationProgress, children }) => {
@@ -43,27 +43,6 @@ const WrapInExitingProgressContext = ({ presentationProgress, children }) => {
43
43
  exitingProgress: presentationProgress,
44
44
  };
45
45
  }, [presentationProgress]);
46
- return ((0, jsx_runtime_1.jsx)(ExitingContext.Provider, { value: value, children: children }));
46
+ return ((0, jsx_runtime_1.jsx)(exports.ExitingContext.Provider, { value: value, children: children }));
47
47
  };
48
48
  exports.WrapInExitingProgressContext = WrapInExitingProgressContext;
49
- /**
50
- * Gets the progress and direction of a transition with a context() presentation.
51
- */
52
- const useTransitionProgress = () => {
53
- var _a, _b;
54
- const entering = react_1.default.useContext(EnteringContext);
55
- const exiting = react_1.default.useContext(ExitingContext);
56
- if (!entering && !exiting) {
57
- return {
58
- isInTransitionSeries: false,
59
- entering: 1,
60
- exiting: 0,
61
- };
62
- }
63
- return {
64
- isInTransitionSeries: true,
65
- entering: (_a = entering === null || entering === void 0 ? void 0 : entering.enteringProgress) !== null && _a !== void 0 ? _a : 1,
66
- exiting: (_b = exiting === null || exiting === void 0 ? void 0 : exiting.exitingProgress) !== null && _b !== void 0 ? _b : 0,
67
- };
68
- };
69
- exports.useTransitionProgress = useTransitionProgress;
@@ -127,16 +127,46 @@ var springTiming = (options = {}) => {
127
127
  };
128
128
 
129
129
  // src/TransitionSeries.tsx
130
- import {Children, useMemo as useMemo2} from "react";
130
+ import {Children, useMemo as useMemo3} from "react";
131
131
  import {Internals, Sequence, useCurrentFrame, useVideoConfig} from "remotion";
132
132
  import {NoReactInternals as NoReactInternals2} from "remotion/no-react";
133
133
 
134
+ // src/context.tsx
135
+ import React2, {useMemo as useMemo2} from "react";
136
+ import {
137
+ jsx as jsx2
138
+ } from "react/jsx-runtime";
139
+ var EnteringContext = React2.createContext(null);
140
+ var ExitingContext = React2.createContext(null);
141
+ var WrapInEnteringProgressContext = ({ presentationProgress, children }) => {
142
+ const value = useMemo2(() => {
143
+ return {
144
+ enteringProgress: presentationProgress
145
+ };
146
+ }, [presentationProgress]);
147
+ return jsx2(EnteringContext.Provider, {
148
+ value,
149
+ children
150
+ });
151
+ };
152
+ var WrapInExitingProgressContext = ({ presentationProgress, children }) => {
153
+ const value = useMemo2(() => {
154
+ return {
155
+ exitingProgress: presentationProgress
156
+ };
157
+ }, [presentationProgress]);
158
+ return jsx2(ExitingContext.Provider, {
159
+ value,
160
+ children
161
+ });
162
+ };
163
+
134
164
  // src/flatten-children.ts
135
- import React2 from "react";
165
+ import React3 from "react";
136
166
  var flattenChildren = (children) => {
137
- const childrenArray = React2.Children.toArray(children);
167
+ const childrenArray = React3.Children.toArray(children);
138
168
  return childrenArray.reduce((flatChildren, child) => {
139
- if (child.type === React2.Fragment) {
169
+ if (child.type === React3.Fragment) {
140
170
  return flatChildren.concat(flattenChildren(child.props.children));
141
171
  }
142
172
  flatChildren.push(child);
@@ -150,14 +180,14 @@ var validateDurationInFrames = NoReactInternals.validateDurationInFrames;
150
180
 
151
181
  // src/TransitionSeries.tsx
152
182
  import {
153
- jsx as jsx2,
183
+ jsx as jsx3,
154
184
  Fragment
155
185
  } from "react/jsx-runtime";
156
186
  var TransitionSeriesTransition = function(_props) {
157
187
  return null;
158
188
  };
159
189
  var SeriesSequence = ({ children }) => {
160
- return jsx2(Fragment, {
190
+ return jsx3(Fragment, {
161
191
  children
162
192
  });
163
193
  };
@@ -166,7 +196,7 @@ var TransitionSeriesChildren = ({
166
196
  }) => {
167
197
  const { fps } = useVideoConfig();
168
198
  const frame = useCurrentFrame();
169
- const childrenValue = useMemo2(() => {
199
+ const childrenValue = useMemo3(() => {
170
200
  let transitionOffsets = 0;
171
201
  let startFrame = 0;
172
202
  const flattedChildren = flattenChildren(children);
@@ -250,22 +280,28 @@ var TransitionSeriesChildren = ({
250
280
  const prevPresentation = prev.props.presentation ?? slide();
251
281
  const UppercaseNextPresentation = nextPresentation.component;
252
282
  const UppercasePrevPresentation = prevPresentation.component;
253
- return jsx2(Sequence, {
283
+ return jsx3(Sequence, {
254
284
  from: Math.floor(actualStartFrame),
255
285
  durationInFrames: durationInFramesProp,
256
286
  ...passedProps,
257
287
  name: passedProps.name || "<TS.Sequence>",
258
- children: jsx2(UppercaseNextPresentation, {
288
+ children: jsx3(UppercaseNextPresentation, {
259
289
  passedProps: nextPresentation.props ?? {},
260
290
  presentationDirection: "exiting",
261
291
  presentationProgress: nextProgress,
262
292
  presentationDurationInFrames: next.props.timing.getDurationInFrames({ fps }),
263
- children: jsx2(UppercasePrevPresentation, {
264
- passedProps: prevPresentation.props ?? {},
265
- presentationDirection: "entering",
266
- presentationProgress: prevProgress,
267
- presentationDurationInFrames: prev.props.timing.getDurationInFrames({ fps }),
268
- children: child
293
+ children: jsx3(WrapInExitingProgressContext, {
294
+ presentationProgress: nextProgress,
295
+ children: jsx3(UppercasePrevPresentation, {
296
+ passedProps: prevPresentation.props ?? {},
297
+ presentationDirection: "entering",
298
+ presentationProgress: prevProgress,
299
+ presentationDurationInFrames: prev.props.timing.getDurationInFrames({ fps }),
300
+ children: jsx3(WrapInEnteringProgressContext, {
301
+ presentationProgress: prevProgress,
302
+ children: child
303
+ })
304
+ })
269
305
  })
270
306
  })
271
307
  }, i);
@@ -273,38 +309,44 @@ var TransitionSeriesChildren = ({
273
309
  if (prevProgress !== null && prev) {
274
310
  const prevPresentation = prev.props.presentation ?? slide();
275
311
  const UppercasePrevPresentation = prevPresentation.component;
276
- return jsx2(Sequence, {
312
+ return jsx3(Sequence, {
277
313
  from: Math.floor(actualStartFrame),
278
314
  durationInFrames: durationInFramesProp,
279
315
  ...passedProps,
280
316
  name: passedProps.name || "<TS.Sequence>",
281
- children: jsx2(UppercasePrevPresentation, {
317
+ children: jsx3(UppercasePrevPresentation, {
282
318
  passedProps: prevPresentation.props ?? {},
283
319
  presentationDirection: "entering",
284
320
  presentationProgress: prevProgress,
285
321
  presentationDurationInFrames: prev.props.timing.getDurationInFrames({ fps }),
286
- children: child
322
+ children: jsx3(WrapInEnteringProgressContext, {
323
+ presentationProgress: prevProgress,
324
+ children: child
325
+ })
287
326
  })
288
327
  }, i);
289
328
  }
290
329
  if (nextProgress !== null && next) {
291
330
  const nextPresentation = next.props.presentation ?? slide();
292
331
  const UppercaseNextPresentation = nextPresentation.component;
293
- return jsx2(Sequence, {
332
+ return jsx3(Sequence, {
294
333
  from: Math.floor(actualStartFrame),
295
334
  durationInFrames: durationInFramesProp,
296
335
  ...passedProps,
297
336
  name: passedProps.name || "<TS.Sequence>",
298
- children: jsx2(UppercaseNextPresentation, {
337
+ children: jsx3(UppercaseNextPresentation, {
299
338
  passedProps: nextPresentation.props ?? {},
300
339
  presentationDirection: "exiting",
301
340
  presentationProgress: nextProgress,
302
341
  presentationDurationInFrames: next.props.timing.getDurationInFrames({ fps }),
303
- children: child
342
+ children: jsx3(WrapInExitingProgressContext, {
343
+ presentationProgress: nextProgress,
344
+ children: child
345
+ })
304
346
  })
305
347
  }, i);
306
348
  }
307
- return jsx2(Sequence, {
349
+ return jsx3(Sequence, {
308
350
  from: Math.floor(actualStartFrame),
309
351
  durationInFrames: durationInFramesProp,
310
352
  ...passedProps,
@@ -313,7 +355,7 @@ var TransitionSeriesChildren = ({
313
355
  }, i);
314
356
  });
315
357
  }, [children, fps, frame]);
316
- return jsx2(Fragment, {
358
+ return jsx3(Fragment, {
317
359
  children: childrenValue
318
360
  });
319
361
  };
@@ -323,11 +365,11 @@ var TransitionSeries = ({ children, name, layout: passedLayout, ...otherProps })
323
365
  if (NoReactInternals2.ENABLE_V5_BREAKING_CHANGES && layout !== "absolute-fill") {
324
366
  throw new TypeError(`The "layout" prop of <TransitionSeries /> is not supported anymore in v5. TransitionSeries' must be absolutely positioned.`);
325
367
  }
326
- return jsx2(Sequence, {
368
+ return jsx3(Sequence, {
327
369
  name: displayName,
328
370
  layout,
329
371
  ...otherProps,
330
- children: jsx2(TransitionSeriesChildren, {
372
+ children: jsx3(TransitionSeriesChildren, {
331
373
  children
332
374
  })
333
375
  });
@@ -336,7 +378,27 @@ TransitionSeries.Sequence = SeriesSequence;
336
378
  TransitionSeries.Transition = TransitionSeriesTransition;
337
379
  Internals.addSequenceStackTraces(TransitionSeries);
338
380
  Internals.addSequenceStackTraces(SeriesSequence);
381
+
382
+ // src/use-transition-progress.ts
383
+ import React4 from "react";
384
+ var useTransitionProgress = () => {
385
+ const entering = React4.useContext(EnteringContext);
386
+ const exiting = React4.useContext(ExitingContext);
387
+ if (!entering && !exiting) {
388
+ return {
389
+ isInTransitionSeries: false,
390
+ entering: 1,
391
+ exiting: 0
392
+ };
393
+ }
394
+ return {
395
+ isInTransitionSeries: true,
396
+ entering: entering?.enteringProgress ?? 1,
397
+ exiting: exiting?.exitingProgress ?? 0
398
+ };
399
+ };
339
400
  export {
401
+ useTransitionProgress,
340
402
  springTiming,
341
403
  linearTiming,
342
404
  TransitionSeries
@@ -0,0 +1,26 @@
1
+ // src/presentations/none.tsx
2
+ import {useMemo} from "react";
3
+ import {AbsoluteFill} from "remotion";
4
+ import {
5
+ jsx
6
+ } from "react/jsx-runtime";
7
+ var NonePresentation = ({ children, presentationDirection, passedProps }) => {
8
+ const style = useMemo(() => {
9
+ return {
10
+ ...presentationDirection === "entering" ? passedProps.enterStyle : passedProps.exitStyle
11
+ };
12
+ }, [passedProps.enterStyle, passedProps.exitStyle, presentationDirection]);
13
+ return jsx(AbsoluteFill, {
14
+ style,
15
+ children
16
+ });
17
+ };
18
+ var none = (props) => {
19
+ return {
20
+ component: NonePresentation,
21
+ props: props ?? {}
22
+ };
23
+ };
24
+ export {
25
+ none
26
+ };
package/dist/index.d.ts CHANGED
@@ -2,3 +2,4 @@ export { linearTiming } from './timings/linear-timing.js';
2
2
  export { springTiming } from './timings/spring-timing.js';
3
3
  export { TransitionSeries } from './TransitionSeries.js';
4
4
  export { TransitionPresentation, TransitionPresentationComponentProps, TransitionTiming, } from './types.js';
5
+ export { TransitionState, useTransitionProgress, } from './use-transition-progress.js';
package/dist/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.TransitionSeries = exports.springTiming = exports.linearTiming = void 0;
3
+ exports.useTransitionProgress = exports.TransitionSeries = exports.springTiming = exports.linearTiming = void 0;
4
4
  // Timings
5
5
  var linear_timing_js_1 = require("./timings/linear-timing.js");
6
6
  Object.defineProperty(exports, "linearTiming", { enumerable: true, get: function () { return linear_timing_js_1.linearTiming; } });
@@ -9,3 +9,6 @@ Object.defineProperty(exports, "springTiming", { enumerable: true, get: function
9
9
  // Component
10
10
  var TransitionSeries_js_1 = require("./TransitionSeries.js");
11
11
  Object.defineProperty(exports, "TransitionSeries", { enumerable: true, get: function () { return TransitionSeries_js_1.TransitionSeries; } });
12
+ // Hooks
13
+ var use_transition_progress_js_1 = require("./use-transition-progress.js");
14
+ Object.defineProperty(exports, "useTransitionProgress", { enumerable: true, get: function () { return use_transition_progress_js_1.useTransitionProgress; } });
@@ -0,0 +1,13 @@
1
+ import React from 'react';
2
+ import type { TransitionPresentation } from '../types';
3
+ export type NoneProps = {
4
+ enterStyle?: React.CSSProperties;
5
+ exitStyle?: React.CSSProperties;
6
+ };
7
+ /**
8
+ * Wraps the transition in a context so that the progress can be read from the children using a hook.
9
+ * @see [Documentation](https://remotion.dev/docs/transitions/presentations/context)
10
+ * @param {NoneProps} [props] Optional properties to define 'enterStyle' and 'exitStyle'.
11
+ * @returns {TransitionPresentation<NoneProps>} The transition presentation component setup.
12
+ */
13
+ export declare const none: (props?: NoneProps) => TransitionPresentation<NoneProps>;
@@ -0,0 +1,29 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.none = void 0;
4
+ const jsx_runtime_1 = require("react/jsx-runtime");
5
+ const react_1 = require("react");
6
+ const remotion_1 = require("remotion");
7
+ const NonePresentation = ({ children, presentationDirection, passedProps }) => {
8
+ const style = (0, react_1.useMemo)(() => {
9
+ return {
10
+ ...(presentationDirection === 'entering'
11
+ ? passedProps.enterStyle
12
+ : passedProps.exitStyle),
13
+ };
14
+ }, [passedProps.enterStyle, passedProps.exitStyle, presentationDirection]);
15
+ return (0, jsx_runtime_1.jsx)(remotion_1.AbsoluteFill, { style: style, children: children });
16
+ };
17
+ /**
18
+ * Wraps the transition in a context so that the progress can be read from the children using a hook.
19
+ * @see [Documentation](https://remotion.dev/docs/transitions/presentations/context)
20
+ * @param {NoneProps} [props] Optional properties to define 'enterStyle' and 'exitStyle'.
21
+ * @returns {TransitionPresentation<NoneProps>} The transition presentation component setup.
22
+ */
23
+ const none = (props) => {
24
+ return {
25
+ component: NonePresentation,
26
+ props: props !== null && props !== void 0 ? props : {},
27
+ };
28
+ };
29
+ exports.none = none;
@@ -0,0 +1,9 @@
1
+ export type TransitionState = {
2
+ entering: number;
3
+ exiting: number;
4
+ isInTransitionSeries: boolean;
5
+ };
6
+ /**
7
+ * Gets the progress and direction of a transition with a context() presentation.
8
+ */
9
+ export declare const useTransitionProgress: () => TransitionState;
@@ -0,0 +1,29 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.useTransitionProgress = void 0;
7
+ const react_1 = __importDefault(require("react"));
8
+ const context_1 = require("./context");
9
+ /**
10
+ * Gets the progress and direction of a transition with a context() presentation.
11
+ */
12
+ const useTransitionProgress = () => {
13
+ var _a, _b;
14
+ const entering = react_1.default.useContext(context_1.EnteringContext);
15
+ const exiting = react_1.default.useContext(context_1.ExitingContext);
16
+ if (!entering && !exiting) {
17
+ return {
18
+ isInTransitionSeries: false,
19
+ entering: 1,
20
+ exiting: 0,
21
+ };
22
+ }
23
+ return {
24
+ isInTransitionSeries: true,
25
+ entering: (_a = entering === null || entering === void 0 ? void 0 : entering.enteringProgress) !== null && _a !== void 0 ? _a : 1,
26
+ exiting: (_b = exiting === null || exiting === void 0 ? void 0 : exiting.exitingProgress) !== null && _b !== void 0 ? _b : 0,
27
+ };
28
+ };
29
+ exports.useTransitionProgress = useTransitionProgress;
package/none.js ADDED
@@ -0,0 +1,2 @@
1
+ // For backwards compatibility when you use `esm-wallaby`
2
+ module.exports = require('./dist/presentations/none.js');
package/package.json CHANGED
@@ -1,7 +1,10 @@
1
1
  {
2
+ "repository": {
3
+ "url": "https://github.com/remotion-dev/remotion/tree/main/packages/transitions"
4
+ },
2
5
  "name": "@remotion/transitions",
3
- "version": "4.0.177",
4
- "description": "Transition presets for Remotion",
6
+ "version": "4.0.178",
7
+ "description": "Library for creating transitions in Remotion",
5
8
  "sideEffects": false,
6
9
  "main": "dist/esm/index.mjs",
7
10
  "module": "dist/esm/index.js",
@@ -9,31 +12,21 @@
9
12
  "author": "Jonny Burger",
10
13
  "contributors": [],
11
14
  "license": "UNLICENSED",
12
- "repository": {
13
- "url": "https://github.com/remotion-dev/remotion"
14
- },
15
15
  "bugs": {
16
16
  "url": "https://github.com/remotion-dev/remotion/issues"
17
17
  },
18
18
  "dependencies": {
19
- "remotion": "4.0.177",
20
- "@remotion/shapes": "4.0.177",
21
- "@remotion/paths": "4.0.177"
19
+ "remotion": "4.0.178",
20
+ "@remotion/paths": "4.0.178",
21
+ "@remotion/shapes": "4.0.178"
22
22
  },
23
23
  "devDependencies": {
24
- "@jonny/eslint-config": "3.0.281",
25
- "eslint": "8.56.0",
26
- "prettier": "3.2.5",
27
- "prettier-plugin-organize-imports": "3.2.4",
24
+ "@happy-dom/global-registrator": "14.5.1",
28
25
  "react": "18.3.1",
29
26
  "react-dom": "18.3.1",
30
- "vitest": "0.31.1",
31
- "@types/react": "18.3.1",
32
- "@types/react-dom": "18.3.0",
33
- "@types/bun": "1.0.12",
34
27
  "@vitejs/plugin-react": "^2.0.0",
35
- "remotion": "4.0.177",
36
- "@remotion/test-utils": "4.0.177"
28
+ "remotion": "4.0.178",
29
+ "@remotion/test-utils": "4.0.178"
37
30
  },
38
31
  "peerDependencies": {
39
32
  "react": ">=16.8.0",
@@ -83,6 +76,12 @@
83
76
  "require": "./dist/presentations/clock-wipe.js",
84
77
  "types": "./dist/presentations/clock-wipe.d.ts"
85
78
  },
79
+ "./none": {
80
+ "module": "./dist/esm/none.mjs",
81
+ "import": "./dist/esm/none.mjs",
82
+ "require": "./dist/presentations/none.js",
83
+ "types": "./dist/presentations/none.d.ts"
84
+ },
86
85
  "./package.json": "./package.json"
87
86
  },
88
87
  "typesVersions": {
@@ -99,13 +98,17 @@
99
98
  "fade": [
100
99
  "dist/presentations/fade.d.ts"
101
100
  ],
101
+ "none": [
102
+ "dist/presentations/none.d.ts"
103
+ ],
102
104
  "clock-wipe": [
103
105
  "dist/presentations/clock-wipe.d.ts"
104
106
  ]
105
107
  }
106
108
  },
109
+ "homepage": "https://www.remotion.dev/transitions",
107
110
  "scripts": {
108
- "test": "vitest src --run",
111
+ "test": "bun test src",
109
112
  "lint": "eslint src --ext ts,tsx",
110
113
  "formatting": "prettier src --check",
111
114
  "build": "bun --env-file=../.env.bundle bundle.ts"
package/.prettierrc.js DELETED
@@ -1,14 +0,0 @@
1
- module.exports = {
2
- singleQuote: true,
3
- bracketSpacing: false,
4
- useTabs: true,
5
- overrides: [
6
- {
7
- files: ['*.yml'],
8
- options: {
9
- singleQuote: false,
10
- },
11
- },
12
- ],
13
- plugins: [require.resolve('prettier-plugin-organize-imports')],
14
- };
package/vitest.config.mts DELETED
@@ -1,11 +0,0 @@
1
- import react from '@vitejs/plugin-react';
2
- import {defineConfig} from 'vitest/config';
3
-
4
- export default defineConfig({
5
- test: {
6
- testTimeout: 90000,
7
- maxConcurrency: 1,
8
- threads: false,
9
- },
10
- plugins: [react()],
11
- });