@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/book-flip.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/cross-zoom.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/crosswarp.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/dissolve.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/dreamy-zoom.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/film-burn.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) {