@remotion/effects 4.0.466 → 4.0.468

package/dist/esm/halftone.mjs

@@ -17,6 +17,12 @@ var assertRequiredColor = (value, name) => {
     throw new TypeError(`"${name}" must be a non-empty string, but got ${JSON.stringify(value)}`);
   }
 };
+var assertOptionalColor = (value, name) => {
+  if (value === undefined) {
+    return;
+  }
+  assertRequiredColor(value, name);
+};
 
 // src/color-utils.ts
 var DEFAULT_AMOUNT = 1;
@@ -81,11 +87,19 @@ var validateSignedUnitInterval = (value, name) => {
 var clampColorChannel = (value) => {
   return Math.max(0, Math.min(255, value));
 };
+var parseColorRgba = (ctx, color) => {
+  ctx.clearRect(0, 0, 1, 1);
+  ctx.fillStyle = color;
+  ctx.fillRect(0, 0, 1, 1);
+  const { data } = ctx.getImageData(0, 0, 1, 1);
+  return [data[0], data[1], data[2], data[3]];
+};
 
 // src/halftone.ts
 var { createEffect, createWebGL2ContextError } = Internals;
 var HALFTONE_SHAPES = ["circle", "square", "line"];
 var HALFTONE_SAMPLING = ["bilinear", "nearest"];
+var HALFTONE_COLOR_MODES = ["solid", "source"];
 var halftoneSchema = {
   dotSize: {
     type: "number",
@@ -138,10 +152,20 @@ var halftoneSchema = {
     default: false,
     description: "Invert"
   },
-  color: {
-    type: "color",
-    default: "black",
-    description: "Color"
+  colorMode: {
+    type: "enum",
+    default: "solid",
+    description: "Color mode",
+    variants: {
+      solid: {
+        dotColor: {
+          type: "color",
+          default: "red",
+          description: "Dot color"
+        }
+      },
+      source: {}
+    }
   }
 };
 var formatEnum = (variants) => {
@@ -166,14 +190,6 @@ var assertOptionalBoolean = (value, name) => {
     throw new TypeError(`"${name}" must be a boolean, but got ${JSON.stringify(value)}`);
   }
 };
-var assertOptionalColor = (value, name) => {
-  if (value === undefined) {
-    return;
-  }
-  if (typeof value !== "string" || value.length === 0) {
-    throw new TypeError(`"${name}" must be a non-empty string, but got ${JSON.stringify(value)}`);
-  }
-};
 var resolve = (p) => ({
   shape: p.shape ?? "circle",
   dotSize: p.dotSize ?? 20,
@@ -182,7 +198,8 @@ var resolve = (p) => ({
   offsetX: p.offsetX ?? 0,
   offsetY: p.offsetY ?? 0,
   sampling: p.sampling ?? "bilinear",
-  color: p.color ?? "black",
+  colorMode: p.colorMode ?? "solid",
+  dotColor: "dotColor" in p ? p.dotColor ?? "red" : "red",
   invert: p.invert ?? false
 });
 var validateHalftoneParams = (params) => {
@@ -194,7 +211,14 @@ var validateHalftoneParams = (params) => {
   assertOptionalFiniteNumber(params.offsetY, "offsetY");
   assertOptionalEnum(params.shape, "shape", HALFTONE_SHAPES);
   assertOptionalEnum(params.sampling, "sampling", HALFTONE_SAMPLING);
-  assertOptionalColor(params.color, "color");
+  assertOptionalEnum(params.colorMode, "colorMode", HALFTONE_COLOR_MODES);
+  if ("color" in params && params.color !== undefined) {
+    throw new TypeError('"color" has been renamed to "dotColor"');
+  }
+  if (params.colorMode === "source" && "dotColor" in params) {
+    throw new TypeError('"dotColor" can only be set when "colorMode" is "solid"');
+  }
+  assertOptionalColor("dotColor" in params ? params.dotColor : undefined, "dotColor");
   assertOptionalBoolean(params.invert, "invert");
   if (params.dotSize !== undefined && params.dotSize < 1) {
     throw new TypeError(`"dotSize" must be >= 1, but got ${JSON.stringify(params.dotSize)}`);
@@ -227,6 +251,7 @@ uniform vec2 uOffset;
 uniform vec4 uColor;
 uniform int uShape;
 uniform bool uShadeOutside;
+uniform bool uUseSourceColor;
 
 void main() {
 	vec2 fragPos = vUv * uResolution;
@@ -285,7 +310,7 @@ void main() {
 				 * (1.0 - smoothstep(lineHalf - 0.5, lineHalf + 0.5, abs(diff.y)));
 	}
 
-	fragColor = uColor * coverage;
+	fragColor = (uUseSourceColor ? texColor : uColor) * coverage;
 }
 `;
 var SHAPE_INDEX = {
@@ -322,21 +347,14 @@ var linkProgram = (gl, vs, fs) => {
   }
   return program;
 };
-var parseColorRgba = (ctx, color) => {
-  ctx.clearRect(0, 0, 1, 1);
-  ctx.fillStyle = color;
-  ctx.fillRect(0, 0, 1, 1);
-  const { data } = ctx.getImageData(0, 0, 1, 1);
-  return [data[0] / 255, data[1] / 255, data[2] / 255, data[3] / 255];
-};
 var halftone = createEffect({
   type: "remotion/halftone",
-  label: "Halftone",
+  label: "halftone()",
   documentationLink: "https://www.remotion.dev/docs/effects/halftone",
   backend: "webgl2",
   calculateKey: (params) => {
     const r = resolve(params);
-    return `halftone-${r.shape}-${r.dotSize}-${r.dotSpacing}-${r.rotation}-${r.offsetX}-${r.offsetY}-${r.sampling}-${r.color}-${r.invert ? 1 : 0}`;
+    return `halftone-${r.shape}-${r.dotSize}-${r.dotSpacing}-${r.rotation}-${r.offsetX}-${r.offsetY}-${r.sampling}-${r.colorMode}-${r.dotColor}-${r.invert ? 1 : 0}`;
   },
   setup: (target) => {
     const gl = target.getContext("webgl2", {
@@ -419,19 +437,21 @@ var halftone = createEffect({
       uColor: gl.getUniformLocation(program, "uColor"),
       uShape: gl.getUniformLocation(program, "uShape"),
       uShadeOutside: gl.getUniformLocation(program, "uShadeOutside"),
+      uUseSourceColor: gl.getUniformLocation(program, "uUseSourceColor"),
       colorCtx,
       cachedColorStr: "",
-      cachedColorRgba: [0, 0, 0, 1]
+      cachedColorRgba: [0, 0, 0, 255]
     };
   },
   apply: ({ source, width, height, params, state, flipSourceY }) => {
     const r = resolve(params);
     const { gl, program, vao, texture } = state;
-    if (state.cachedColorStr !== r.color) {
-      state.cachedColorStr = r.color;
-      state.cachedColorRgba = parseColorRgba(state.colorCtx, r.color);
+    if (state.cachedColorStr !== r.dotColor) {
+      state.cachedColorStr = r.dotColor;
+      state.cachedColorRgba = parseColorRgba(state.colorCtx, r.dotColor);
     }
     const [cr, cg, cb, ca] = state.cachedColorRgba;
+    const caNormalized = ca / 255;
     const filter = r.sampling === "nearest" ? gl.NEAREST : gl.LINEAR;
     gl.viewport(0, 0, width, height);
     gl.clearColor(0, 0, 0, 0);
@@ -457,11 +477,13 @@ var halftone = createEffect({
     if (state.uOffset)
       gl.uniform2f(state.uOffset, r.offsetX, r.offsetY);
     if (state.uColor)
-      gl.uniform4f(state.uColor, cr * ca, cg * ca, cb * ca, ca);
+      gl.uniform4f(state.uColor, cr / 255 * caNormalized, cg / 255 * caNormalized, cb / 255 * caNormalized, caNormalized);
     if (state.uShape)
       gl.uniform1i(state.uShape, SHAPE_INDEX[r.shape]);
     if (state.uShadeOutside)
       gl.uniform1i(state.uShadeOutside, r.invert ? 1 : 0);
+    if (state.uUseSourceColor)
+      gl.uniform1i(state.uUseSourceColor, r.colorMode === "source" ? 1 : 0);
     gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
     gl.bindVertexArray(null);
     gl.bindTexture(gl.TEXTURE_2D, null);

package/dist/esm/hue.mjs

@@ -17,6 +17,12 @@ var assertRequiredColor = (value, name) => {
     throw new TypeError(`"${name}" must be a non-empty string, but got ${JSON.stringify(value)}`);
   }
 };
+var assertOptionalColor = (value, name) => {
+  if (value === undefined) {
+    return;
+  }
+  assertRequiredColor(value, name);
+};
 
 // src/color-utils.ts
 var DEFAULT_AMOUNT = 1;
@@ -81,6 +87,13 @@ var validateSignedUnitInterval = (value, name) => {
 var clampColorChannel = (value) => {
   return Math.max(0, Math.min(255, value));
 };
+var parseColorRgba = (ctx, color) => {
+  ctx.clearRect(0, 0, 1, 1);
+  ctx.fillStyle = color;
+  ctx.fillRect(0, 0, 1, 1);
+  const { data } = ctx.getImageData(0, 0, 1, 1);
+  return [data[0], data[1], data[2], data[3]];
+};
 
 // src/hue.ts
 var { createEffect } = Internals;
@@ -96,7 +109,7 @@ var validateHueParams = (params) => {
 };
 var hue = createEffect({
   type: "remotion/hue",
-  label: "Hue",
+  label: "hue()",
   documentationLink: "https://www.remotion.dev/docs/effects/hue",
   backend: "2d",
   calculateKey: (params) => {

package/dist/esm/invert.mjs

@@ -17,6 +17,12 @@ var assertRequiredColor = (value, name) => {
     throw new TypeError(`"${name}" must be a non-empty string, but got ${JSON.stringify(value)}`);
   }
 };
+var assertOptionalColor = (value, name) => {
+  if (value === undefined) {
+    return;
+  }
+  assertRequiredColor(value, name);
+};
 
 // src/color-utils.ts
 var DEFAULT_AMOUNT = 1;
@@ -81,6 +87,13 @@ var validateSignedUnitInterval = (value, name) => {
 var clampColorChannel = (value) => {
   return Math.max(0, Math.min(255, value));
 };
+var parseColorRgba = (ctx, color) => {
+  ctx.clearRect(0, 0, 1, 1);
+  ctx.fillStyle = color;
+  ctx.fillRect(0, 0, 1, 1);
+  const { data } = ctx.getImageData(0, 0, 1, 1);
+  return [data[0], data[1], data[2], data[3]];
+};
 
 // src/invert.ts
 var { createEffect } = Internals;
@@ -98,7 +111,7 @@ var validateInvertParams = (params) => {
 };
 var invert = createEffect({
   type: "remotion/invert",
-  label: "Invert",
+  label: "invert()",
   documentationLink: "https://www.remotion.dev/docs/effects/invert",
   backend: "2d",
   calculateKey: (params) => {

package/dist/esm/mirror.mjs

@@ -17,6 +17,12 @@ var assertRequiredColor = (value, name) => {
     throw new TypeError(`"${name}" must be a non-empty string, but got ${JSON.stringify(value)}`);
   }
 };
+var assertOptionalColor = (value, name) => {
+  if (value === undefined) {
+    return;
+  }
+  assertRequiredColor(value, name);
+};
 
 // src/color-utils.ts
 var DEFAULT_AMOUNT = 1;
@@ -81,6 +87,13 @@ var validateSignedUnitInterval = (value, name) => {
 var clampColorChannel = (value) => {
   return Math.max(0, Math.min(255, value));
 };
+var parseColorRgba = (ctx, color) => {
+  ctx.clearRect(0, 0, 1, 1);
+  ctx.fillStyle = color;
+  ctx.fillRect(0, 0, 1, 1);
+  const { data } = ctx.getImageData(0, 0, 1, 1);
+  return [data[0], data[1], data[2], data[3]];
+};
 
 // src/mirror/mirror-runtime.ts
 import { Internals } from "remotion";
@@ -328,7 +341,7 @@ var validateMirrorParams = (params) => {
 };
 var mirror = createEffect({
   type: "remotion/mirror",
-  label: "Mirror",
+  label: "mirror()",
   documentationLink: "https://www.remotion.dev/docs/effects/mirror",
   backend: "webgl2",
   calculateKey: (params) => {

package/dist/esm/saturation.mjs

@@ -17,6 +17,12 @@ var assertRequiredColor = (value, name) => {
     throw new TypeError(`"${name}" must be a non-empty string, but got ${JSON.stringify(value)}`);
   }
 };
+var assertOptionalColor = (value, name) => {
+  if (value === undefined) {
+    return;
+  }
+  assertRequiredColor(value, name);
+};
 
 // src/color-utils.ts
 var DEFAULT_AMOUNT = 1;
@@ -81,6 +87,13 @@ var validateSignedUnitInterval = (value, name) => {
 var clampColorChannel = (value) => {
   return Math.max(0, Math.min(255, value));
 };
+var parseColorRgba = (ctx, color) => {
+  ctx.clearRect(0, 0, 1, 1);
+  ctx.fillStyle = color;
+  ctx.fillRect(0, 0, 1, 1);
+  const { data } = ctx.getImageData(0, 0, 1, 1);
+  return [data[0], data[1], data[2], data[3]];
+};
 
 // src/saturation.ts
 var { createEffect } = Internals;
@@ -98,7 +111,7 @@ var validateSaturationParams = (params) => {
 };
 var saturation = createEffect({
   type: "remotion/saturation",
-  label: "Saturation",
+  label: "saturation()",
   documentationLink: "https://www.remotion.dev/docs/effects/saturation",
   backend: "2d",
   calculateKey: (params) => {

package/dist/esm/scale.mjs

@@ -17,6 +17,12 @@ var assertRequiredColor = (value, name) => {
     throw new TypeError(`"${name}" must be a non-empty string, but got ${JSON.stringify(value)}`);
   }
 };
+var assertOptionalColor = (value, name) => {
+  if (value === undefined) {
+    return;
+  }
+  assertRequiredColor(value, name);
+};
 
 // src/scale/index.ts
 var { createEffect } = Internals;
@@ -61,7 +67,7 @@ var validateScaleParams = (params) => {
 };
 var scale = createEffect({
   type: "remotion/scale",
-  label: "Scale",
+  label: "scale()",
   documentationLink: "https://www.remotion.dev/docs/effects/scale",
   backend: "2d",
   calculateKey: (params) => {