@remotion/transitions 4.0.518 → 4.0.520

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.
Files changed (14) hide show
  1. package/dist/esm/book-flip.mjs +50 -39
  2. package/dist/esm/cross-zoom.mjs +50 -39
  3. package/dist/esm/crosswarp.mjs +50 -39
  4. package/dist/esm/dissolve.mjs +50 -39
  5. package/dist/esm/dreamy-zoom.mjs +50 -39
  6. package/dist/esm/film-burn.mjs +50 -39
  7. package/dist/esm/index.mjs +50 -39
  8. package/dist/esm/linear-blur.mjs +50 -39
  9. package/dist/esm/ripple.mjs +50 -39
  10. package/dist/esm/swap.mjs +50 -39
  11. package/dist/esm/zoom-blur.mjs +50 -39
  12. package/dist/esm/zoom-in-out.mjs +50 -39
  13. package/dist/html-in-canvas-presentation.js +50 -38
  14. package/package.json +8 -8
package/dist/esm/index.mjs CHANGED
@@ -158,54 +158,65 @@ var HtmlInCanvasPresentation = ({
158
158
  };
159
159
  }, [instance]);
160
160
  const chainState = Internals.useEffectChainState();
161
- const { delayRender, continueRender } = useDelayRender();
161
+ const { delayRender, continueRender, cancelRender } = useDelayRender();
162
162
  const draw = useCallback(async (prevImage, nextImage, progress) => {
163
163
  const outputCanvas = outputCanvasRef.current;
164
164
  if (!outputCanvas) {
165
165
  throw new Error("Canvas not found");
166
166
  }
167
167
  const handle = delayRender("onPaint");
168
- const clearOutput = () => {
169
- const context = outputCanvas.getContext("2d");
170
- if (!context) {
171
- throw new Error("Failed to create output canvas context");
168
+ try {
169
+ const clearOutput = () => {
170
+ const context = outputCanvas.getContext("2d");
171
+ if (!context) {
172
+ throw new Error("Failed to create output canvas context");
173
+ }
174
+ context.clearRect(0, 0, outputCanvas.width, outputCanvas.height);
175
+ };
176
+ if (!prevImage && !nextImage) {
177
+ instance.clear();
178
+ clearOutput();
179
+ continueRender(handle);
180
+ return;
172
181
  }
173
- context.clearRect(0, 0, outputCanvas.width, outputCanvas.height);
174
- };
175
- if (!prevImage && !nextImage) {
176
- instance.clear();
177
- clearOutput();
178
- continueRender(handle);
179
- return;
180
- }
181
- const width = prevImage?.width ?? nextImage?.width ?? 0;
182
- const height = prevImage?.height ?? nextImage?.height ?? 0;
183
- if (width === 0 || height === 0) {
184
- instance.clear();
185
- clearOutput();
182
+ const width = prevImage?.width ?? nextImage?.width ?? 0;
183
+ const height = prevImage?.height ?? nextImage?.height ?? 0;
184
+ if (width === 0 || height === 0) {
185
+ instance.clear();
186
+ clearOutput();
187
+ continueRender(handle);
188
+ return;
189
+ }
190
+ shaderCanvas.width = width;
191
+ shaderCanvas.height = height;
192
+ instance.draw({
193
+ prevImage,
194
+ nextImage,
195
+ width,
196
+ height,
197
+ time: progress,
198
+ passedProps: passedPropsRef.current
199
+ });
200
+ await Internals.runEffectChain({
201
+ state: chainState.get(width, height),
202
+ source: shaderCanvas,
203
+ effects: effectsRef.current ?? [],
204
+ width,
205
+ height,
206
+ output: outputCanvas
207
+ });
186
208
  continueRender(handle);
187
- return;
209
+ } catch (error) {
210
+ cancelRender(error);
188
211
  }
189
- shaderCanvas.width = width;
190
- shaderCanvas.height = height;
191
- instance.draw({
192
- prevImage,
193
- nextImage,
194
- width,
195
- height,
196
- time: progress,
197
- passedProps: passedPropsRef.current
198
- });
199
- await Internals.runEffectChain({
200
- state: chainState.get(width, height),
201
- source: shaderCanvas,
202
- effects: effectsRef.current ?? [],
203
- width,
204
- height,
205
- output: outputCanvas
206
- });
207
- continueRender(handle);
208
- }, [chainState, continueRender, delayRender, instance, shaderCanvas]);
212
+ }, [
213
+ cancelRender,
214
+ chainState,
215
+ continueRender,
216
+ delayRender,
217
+ instance,
218
+ shaderCanvas
219
+ ]);
209
220
  const passThrough = bothEnteringAndExiting && presentationDirection === "exiting";
210
221
  useLayoutEffect(() => {
211
222
  if (passThrough) {
package/dist/esm/linear-blur.mjs CHANGED
@@ -80,54 +80,65 @@ var HtmlInCanvasPresentation = ({
80
80
  };
81
81
  }, [instance]);
82
82
  const chainState = Internals.useEffectChainState();
83
- const { delayRender, continueRender } = useDelayRender();
83
+ const { delayRender, continueRender, cancelRender } = useDelayRender();
84
84
  const draw = useCallback(async (prevImage, nextImage, progress) => {
85
85
  const outputCanvas = outputCanvasRef.current;
86
86
  if (!outputCanvas) {
87
87
  throw new Error("Canvas not found");
88
88
  }
89
89
  const handle = delayRender("onPaint");
90
- const clearOutput = () => {
91
- const context = outputCanvas.getContext("2d");
92
- if (!context) {
93
- throw new Error("Failed to create output canvas context");
90
+ try {
91
+ const clearOutput = () => {
92
+ const context = outputCanvas.getContext("2d");
93
+ if (!context) {
94
+ throw new Error("Failed to create output canvas context");
95
+ }
96
+ context.clearRect(0, 0, outputCanvas.width, outputCanvas.height);
97
+ };
98
+ if (!prevImage && !nextImage) {
99
+ instance.clear();
100
+ clearOutput();
101
+ continueRender(handle);
102
+ return;
94
103
  }
95
- context.clearRect(0, 0, outputCanvas.width, outputCanvas.height);
96
- };
97
- if (!prevImage && !nextImage) {
98
- instance.clear();
99
- clearOutput();
100
- continueRender(handle);
101
- return;
102
- }
103
- const width = prevImage?.width ?? nextImage?.width ?? 0;
104
- const height = prevImage?.height ?? nextImage?.height ?? 0;
105
- if (width === 0 || height === 0) {
106
- instance.clear();
107
- clearOutput();
104
+ const width = prevImage?.width ?? nextImage?.width ?? 0;
105
+ const height = prevImage?.height ?? nextImage?.height ?? 0;
106
+ if (width === 0 || height === 0) {
107
+ instance.clear();
108
+ clearOutput();
109
+ continueRender(handle);
110
+ return;
111
+ }
112
+ shaderCanvas.width = width;
113
+ shaderCanvas.height = height;
114
+ instance.draw({
115
+ prevImage,
116
+ nextImage,
117
+ width,
118
+ height,
119
+ time: progress,
120
+ passedProps: passedPropsRef.current
121
+ });
122
+ await Internals.runEffectChain({
123
+ state: chainState.get(width, height),
124
+ source: shaderCanvas,
125
+ effects: effectsRef.current ?? [],
126
+ width,
127
+ height,
128
+ output: outputCanvas
129
+ });
108
130
  continueRender(handle);
109
- return;
131
+ } catch (error) {
132
+ cancelRender(error);
110
133
  }
111
- shaderCanvas.width = width;
112
- shaderCanvas.height = height;
113
- instance.draw({
114
- prevImage,
115
- nextImage,
116
- width,
117
- height,
118
- time: progress,
119
- passedProps: passedPropsRef.current
120
- });
121
- await Internals.runEffectChain({
122
- state: chainState.get(width, height),
123
- source: shaderCanvas,
124
- effects: effectsRef.current ?? [],
125
- width,
126
- height,
127
- output: outputCanvas
128
- });
129
- continueRender(handle);
130
- }, [chainState, continueRender, delayRender, instance, shaderCanvas]);
134
+ }, [
135
+ cancelRender,
136
+ chainState,
137
+ continueRender,
138
+ delayRender,
139
+ instance,
140
+ shaderCanvas
141
+ ]);
131
142
  const passThrough = bothEnteringAndExiting && presentationDirection === "exiting";
132
143
  useLayoutEffect(() => {
133
144
  if (passThrough) {
package/dist/esm/ripple.mjs CHANGED
@@ -80,54 +80,65 @@ var HtmlInCanvasPresentation = ({
80
80
  };
81
81
  }, [instance]);
82
82
  const chainState = Internals.useEffectChainState();
83
- const { delayRender, continueRender } = useDelayRender();
83
+ const { delayRender, continueRender, cancelRender } = useDelayRender();
84
84
  const draw = useCallback(async (prevImage, nextImage, progress) => {
85
85
  const outputCanvas = outputCanvasRef.current;
86
86
  if (!outputCanvas) {
87
87
  throw new Error("Canvas not found");
88
88
  }
89
89
  const handle = delayRender("onPaint");
90
- const clearOutput = () => {
91
- const context = outputCanvas.getContext("2d");
92
- if (!context) {
93
- throw new Error("Failed to create output canvas context");
90
+ try {
91
+ const clearOutput = () => {
92
+ const context = outputCanvas.getContext("2d");
93
+ if (!context) {
94
+ throw new Error("Failed to create output canvas context");
95
+ }
96
+ context.clearRect(0, 0, outputCanvas.width, outputCanvas.height);
97
+ };
98
+ if (!prevImage && !nextImage) {
99
+ instance.clear();
100
+ clearOutput();
101
+ continueRender(handle);
102
+ return;
94
103
  }
95
- context.clearRect(0, 0, outputCanvas.width, outputCanvas.height);
96
- };
97
- if (!prevImage && !nextImage) {
98
- instance.clear();
99
- clearOutput();
100
- continueRender(handle);
101
- return;
102
- }
103
- const width = prevImage?.width ?? nextImage?.width ?? 0;
104
- const height = prevImage?.height ?? nextImage?.height ?? 0;
105
- if (width === 0 || height === 0) {
106
- instance.clear();
107
- clearOutput();
104
+ const width = prevImage?.width ?? nextImage?.width ?? 0;
105
+ const height = prevImage?.height ?? nextImage?.height ?? 0;
106
+ if (width === 0 || height === 0) {
107
+ instance.clear();
108
+ clearOutput();
109
+ continueRender(handle);
110
+ return;
111
+ }
112
+ shaderCanvas.width = width;
113
+ shaderCanvas.height = height;
114
+ instance.draw({
115
+ prevImage,
116
+ nextImage,
117
+ width,
118
+ height,
119
+ time: progress,
120
+ passedProps: passedPropsRef.current
121
+ });
122
+ await Internals.runEffectChain({
123
+ state: chainState.get(width, height),
124
+ source: shaderCanvas,
125
+ effects: effectsRef.current ?? [],
126
+ width,
127
+ height,
128
+ output: outputCanvas
129
+ });
108
130
  continueRender(handle);
109
- return;
131
+ } catch (error) {
132
+ cancelRender(error);
110
133
  }
111
- shaderCanvas.width = width;
112
- shaderCanvas.height = height;
113
- instance.draw({
114
- prevImage,
115
- nextImage,
116
- width,
117
- height,
118
- time: progress,
119
- passedProps: passedPropsRef.current
120
- });
121
- await Internals.runEffectChain({
122
- state: chainState.get(width, height),
123
- source: shaderCanvas,
124
- effects: effectsRef.current ?? [],
125
- width,
126
- height,
127
- output: outputCanvas
128
- });
129
- continueRender(handle);
130
- }, [chainState, continueRender, delayRender, instance, shaderCanvas]);
134
+ }, [
135
+ cancelRender,
136
+ chainState,
137
+ continueRender,
138
+ delayRender,
139
+ instance,
140
+ shaderCanvas
141
+ ]);
131
142
  const passThrough = bothEnteringAndExiting && presentationDirection === "exiting";
132
143
  useLayoutEffect(() => {
133
144
  if (passThrough) {
package/dist/esm/swap.mjs CHANGED
@@ -80,54 +80,65 @@ var HtmlInCanvasPresentation = ({
80
80
  };
81
81
  }, [instance]);
82
82
  const chainState = Internals.useEffectChainState();
83
- const { delayRender, continueRender } = useDelayRender();
83
+ const { delayRender, continueRender, cancelRender } = useDelayRender();
84
84
  const draw = useCallback(async (prevImage, nextImage, progress) => {
85
85
  const outputCanvas = outputCanvasRef.current;
86
86
  if (!outputCanvas) {
87
87
  throw new Error("Canvas not found");
88
88
  }
89
89
  const handle = delayRender("onPaint");
90
- const clearOutput = () => {
91
- const context = outputCanvas.getContext("2d");
92
- if (!context) {
93
- throw new Error("Failed to create output canvas context");
90
+ try {
91
+ const clearOutput = () => {
92
+ const context = outputCanvas.getContext("2d");
93
+ if (!context) {
94
+ throw new Error("Failed to create output canvas context");
95
+ }
96
+ context.clearRect(0, 0, outputCanvas.width, outputCanvas.height);
97
+ };
98
+ if (!prevImage && !nextImage) {
99
+ instance.clear();
100
+ clearOutput();
101
+ continueRender(handle);
102
+ return;
94
103
  }
95
- context.clearRect(0, 0, outputCanvas.width, outputCanvas.height);
96
- };
97
- if (!prevImage && !nextImage) {
98
- instance.clear();
99
- clearOutput();
100
- continueRender(handle);
101
- return;
102
- }
103
- const width = prevImage?.width ?? nextImage?.width ?? 0;
104
- const height = prevImage?.height ?? nextImage?.height ?? 0;
105
- if (width === 0 || height === 0) {
106
- instance.clear();
107
- clearOutput();
104
+ const width = prevImage?.width ?? nextImage?.width ?? 0;
105
+ const height = prevImage?.height ?? nextImage?.height ?? 0;
106
+ if (width === 0 || height === 0) {
107
+ instance.clear();
108
+ clearOutput();
109
+ continueRender(handle);
110
+ return;
111
+ }
112
+ shaderCanvas.width = width;
113
+ shaderCanvas.height = height;
114
+ instance.draw({
115
+ prevImage,
116
+ nextImage,
117
+ width,
118
+ height,
119
+ time: progress,
120
+ passedProps: passedPropsRef.current
121
+ });
122
+ await Internals.runEffectChain({
123
+ state: chainState.get(width, height),
124
+ source: shaderCanvas,
125
+ effects: effectsRef.current ?? [],
126
+ width,
127
+ height,
128
+ output: outputCanvas
129
+ });
108
130
  continueRender(handle);
109
- return;
131
+ } catch (error) {
132
+ cancelRender(error);
110
133
  }
111
- shaderCanvas.width = width;
112
- shaderCanvas.height = height;
113
- instance.draw({
114
- prevImage,
115
- nextImage,
116
- width,
117
- height,
118
- time: progress,
119
- passedProps: passedPropsRef.current
120
- });
121
- await Internals.runEffectChain({
122
- state: chainState.get(width, height),
123
- source: shaderCanvas,
124
- effects: effectsRef.current ?? [],
125
- width,
126
- height,
127
- output: outputCanvas
128
- });
129
- continueRender(handle);
130
- }, [chainState, continueRender, delayRender, instance, shaderCanvas]);
134
+ }, [
135
+ cancelRender,
136
+ chainState,
137
+ continueRender,
138
+ delayRender,
139
+ instance,
140
+ shaderCanvas
141
+ ]);
131
142
  const passThrough = bothEnteringAndExiting && presentationDirection === "exiting";
132
143
  useLayoutEffect(() => {
133
144
  if (passThrough) {
package/dist/esm/zoom-blur.mjs CHANGED
@@ -80,54 +80,65 @@ var HtmlInCanvasPresentation = ({
80
80
  };
81
81
  }, [instance]);
82
82
  const chainState = Internals.useEffectChainState();
83
- const { delayRender, continueRender } = useDelayRender();
83
+ const { delayRender, continueRender, cancelRender } = useDelayRender();
84
84
  const draw = useCallback(async (prevImage, nextImage, progress) => {
85
85
  const outputCanvas = outputCanvasRef.current;
86
86
  if (!outputCanvas) {
87
87
  throw new Error("Canvas not found");
88
88
  }
89
89
  const handle = delayRender("onPaint");
90
- const clearOutput = () => {
91
- const context = outputCanvas.getContext("2d");
92
- if (!context) {
93
- throw new Error("Failed to create output canvas context");
90
+ try {
91
+ const clearOutput = () => {
92
+ const context = outputCanvas.getContext("2d");
93
+ if (!context) {
94
+ throw new Error("Failed to create output canvas context");
95
+ }
96
+ context.clearRect(0, 0, outputCanvas.width, outputCanvas.height);
97
+ };
98
+ if (!prevImage && !nextImage) {
99
+ instance.clear();
100
+ clearOutput();
101
+ continueRender(handle);
102
+ return;
94
103
  }
95
- context.clearRect(0, 0, outputCanvas.width, outputCanvas.height);
96
- };
97
- if (!prevImage && !nextImage) {
98
- instance.clear();
99
- clearOutput();
100
- continueRender(handle);
101
- return;
102
- }
103
- const width = prevImage?.width ?? nextImage?.width ?? 0;
104
- const height = prevImage?.height ?? nextImage?.height ?? 0;
105
- if (width === 0 || height === 0) {
106
- instance.clear();
107
- clearOutput();
104
+ const width = prevImage?.width ?? nextImage?.width ?? 0;
105
+ const height = prevImage?.height ?? nextImage?.height ?? 0;
106
+ if (width === 0 || height === 0) {
107
+ instance.clear();
108
+ clearOutput();
109
+ continueRender(handle);
110
+ return;
111
+ }
112
+ shaderCanvas.width = width;
113
+ shaderCanvas.height = height;
114
+ instance.draw({
115
+ prevImage,
116
+ nextImage,
117
+ width,
118
+ height,
119
+ time: progress,
120
+ passedProps: passedPropsRef.current
121
+ });
122
+ await Internals.runEffectChain({
123
+ state: chainState.get(width, height),
124
+ source: shaderCanvas,
125
+ effects: effectsRef.current ?? [],
126
+ width,
127
+ height,
128
+ output: outputCanvas
129
+ });
108
130
  continueRender(handle);
109
- return;
131
+ } catch (error) {
132
+ cancelRender(error);
110
133
  }
111
- shaderCanvas.width = width;
112
- shaderCanvas.height = height;
113
- instance.draw({
114
- prevImage,
115
- nextImage,
116
- width,
117
- height,
118
- time: progress,
119
- passedProps: passedPropsRef.current
120
- });
121
- await Internals.runEffectChain({
122
- state: chainState.get(width, height),
123
- source: shaderCanvas,
124
- effects: effectsRef.current ?? [],
125
- width,
126
- height,
127
- output: outputCanvas
128
- });
129
- continueRender(handle);
130
- }, [chainState, continueRender, delayRender, instance, shaderCanvas]);
134
+ }, [
135
+ cancelRender,
136
+ chainState,
137
+ continueRender,
138
+ delayRender,
139
+ instance,
140
+ shaderCanvas
141
+ ]);
131
142
  const passThrough = bothEnteringAndExiting && presentationDirection === "exiting";
132
143
  useLayoutEffect(() => {
133
144
  if (passThrough) {
package/dist/esm/zoom-in-out.mjs CHANGED
@@ -80,54 +80,65 @@ var HtmlInCanvasPresentation = ({
80
80
  };
81
81
  }, [instance]);
82
82
  const chainState = Internals.useEffectChainState();
83
- const { delayRender, continueRender } = useDelayRender();
83
+ const { delayRender, continueRender, cancelRender } = useDelayRender();
84
84
  const draw = useCallback(async (prevImage, nextImage, progress) => {
85
85
  const outputCanvas = outputCanvasRef.current;
86
86
  if (!outputCanvas) {
87
87
  throw new Error("Canvas not found");
88
88
  }
89
89
  const handle = delayRender("onPaint");
90
- const clearOutput = () => {
91
- const context = outputCanvas.getContext("2d");
92
- if (!context) {
93
- throw new Error("Failed to create output canvas context");
90
+ try {
91
+ const clearOutput = () => {
92
+ const context = outputCanvas.getContext("2d");
93
+ if (!context) {
94
+ throw new Error("Failed to create output canvas context");
95
+ }
96
+ context.clearRect(0, 0, outputCanvas.width, outputCanvas.height);
97
+ };
98
+ if (!prevImage && !nextImage) {
99
+ instance.clear();
100
+ clearOutput();
101
+ continueRender(handle);
102
+ return;
94
103
  }
95
- context.clearRect(0, 0, outputCanvas.width, outputCanvas.height);
96
- };
97
- if (!prevImage && !nextImage) {
98
- instance.clear();
99
- clearOutput();
100
- continueRender(handle);
101
- return;
102
- }
103
- const width = prevImage?.width ?? nextImage?.width ?? 0;
104
- const height = prevImage?.height ?? nextImage?.height ?? 0;
105
- if (width === 0 || height === 0) {
106
- instance.clear();
107
- clearOutput();
104
+ const width = prevImage?.width ?? nextImage?.width ?? 0;
105
+ const height = prevImage?.height ?? nextImage?.height ?? 0;
106
+ if (width === 0 || height === 0) {
107
+ instance.clear();
108
+ clearOutput();
109
+ continueRender(handle);
110
+ return;
111
+ }
112
+ shaderCanvas.width = width;
113
+ shaderCanvas.height = height;
114
+ instance.draw({
115
+ prevImage,
116
+ nextImage,
117
+ width,
118
+ height,
119
+ time: progress,
120
+ passedProps: passedPropsRef.current
121
+ });
122
+ await Internals.runEffectChain({
123
+ state: chainState.get(width, height),
124
+ source: shaderCanvas,
125
+ effects: effectsRef.current ?? [],
126
+ width,
127
+ height,
128
+ output: outputCanvas
129
+ });
108
130
  continueRender(handle);
109
- return;
131
+ } catch (error) {
132
+ cancelRender(error);
110
133
  }
111
- shaderCanvas.width = width;
112
- shaderCanvas.height = height;
113
- instance.draw({
114
- prevImage,
115
- nextImage,
116
- width,
117
- height,
118
- time: progress,
119
- passedProps: passedPropsRef.current
120
- });
121
- await Internals.runEffectChain({
122
- state: chainState.get(width, height),
123
- source: shaderCanvas,
124
- effects: effectsRef.current ?? [],
125
- width,
126
- height,
127
- output: outputCanvas
128
- });
129
- continueRender(handle);
130
- }, [chainState, continueRender, delayRender, instance, shaderCanvas]);
134
+ }, [
135
+ cancelRender,
136
+ chainState,
137
+ continueRender,
138
+ delayRender,
139
+ instance,
140
+ shaderCanvas
141
+ ]);
131
142
  const passThrough = bothEnteringAndExiting && presentationDirection === "exiting";
132
143
  useLayoutEffect(() => {
133
144
  if (passThrough) {