@remotion/effects 4.0.465 → 4.0.467

package/dist/esm/halftone.mjs

@@ -1,18 +1,92 @@
-var __defProp = Object.defineProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, {
-      get: all[name],
-      enumerable: true,
-      configurable: true,
-      set: (newValue) => all[name] = () => newValue
-    });
+// src/halftone.ts
+import { Internals } from "remotion";
+
+// src/validate-effect-param.ts
+var assertEffectParamsObject = (params, effectLabel) => {
+  if (params === null || typeof params !== "object") {
+    throw new TypeError(`${effectLabel} effect requires a parameters object, but got ${JSON.stringify(params)}`);
+  }
+};
+var assertRequiredFiniteNumber = (value, name) => {
+  if (typeof value !== "number" || !Number.isFinite(value)) {
+    throw new TypeError(`"${name}" must be a finite number, but got ${JSON.stringify(value)}`);
+  }
+};
+var assertRequiredColor = (value, name) => {
+  if (typeof value !== "string" || value.length === 0) {
+    throw new TypeError(`"${name}" must be a non-empty string, but got ${JSON.stringify(value)}`);
+  }
+};
+
+// src/color-utils.ts
+var DEFAULT_AMOUNT = 1;
+var DEFAULT_BRIGHTNESS_AMOUNT = 0;
+var DEFAULT_HUE_DEGREES = 0;
+var colorAmountSchema = {
+  type: "number",
+  min: 0,
+  max: 1,
+  step: 0.01,
+  default: DEFAULT_AMOUNT,
+  description: "Amount"
+};
+var colorMultiplierSchema = {
+  type: "number",
+  min: 0,
+  step: 0.01,
+  default: DEFAULT_AMOUNT,
+  description: "Amount"
+};
+var brightnessAmountSchema = {
+  type: "number",
+  min: -1,
+  max: 1,
+  step: 0.01,
+  default: DEFAULT_BRIGHTNESS_AMOUNT,
+  description: "Amount"
+};
+var hueDegreesSchema = {
+  type: "number",
+  step: 1,
+  default: DEFAULT_HUE_DEGREES,
+  description: "Degrees"
+};
+var assertOptionalFiniteNumber = (value, name) => {
+  if (value === undefined) {
+    return;
+  }
+  assertRequiredFiniteNumber(value, name);
+};
+var validateUnitInterval = (value, name) => {
+  if (value < 0) {
+    throw new TypeError(`"${name}" must be >= 0, but got ${JSON.stringify(value)}`);
+  }
+  if (value > 1) {
+    throw new TypeError(`"${name}" must be <= 1, but got ${JSON.stringify(value)}`);
+  }
+};
+var validateNonNegative = (value, name) => {
+  if (value < 0) {
+    throw new TypeError(`"${name}" must be >= 0, but got ${JSON.stringify(value)}`);
+  }
+};
+var validateSignedUnitInterval = (value, name) => {
+  if (value < -1) {
+    throw new TypeError(`"${name}" must be >= -1, but got ${JSON.stringify(value)}`);
+  }
+  if (value > 1) {
+    throw new TypeError(`"${name}" must be <= 1, but got ${JSON.stringify(value)}`);
+  }
+};
+var clampColorChannel = (value) => {
+  return Math.max(0, Math.min(255, value));
 };
 
 // src/halftone.ts
-import { Internals } from "remotion";
 var { createEffect, createWebGL2ContextError } = Internals;
-var SHADE_OUTSIDE_DOT_SCALE = 0.5;
+var HALFTONE_SHAPES = ["circle", "square", "line"];
+var HALFTONE_SAMPLING = ["bilinear", "nearest"];
+var HALFTONE_COLOR_MODES = ["solid", "source"];
 var halftoneSchema = {
   dotSize: {
     type: "number",
@@ -59,6 +133,56 @@ var halftoneSchema = {
     },
     default: "circle",
     description: "Shape"
+  },
+  invert: {
+    type: "boolean",
+    default: false,
+    description: "Invert"
+  },
+  colorMode: {
+    type: "enum",
+    default: "solid",
+    description: "Color mode",
+    variants: {
+      solid: {
+        dotColor: {
+          type: "color",
+          default: "red",
+          description: "Dot color"
+        }
+      },
+      source: {}
+    }
+  }
+};
+var formatEnum = (variants) => {
+  if (variants.length === 2) {
+    return `"${variants[0]}" or "${variants[1]}"`;
+  }
+  return `${variants.slice(0, -1).map((variant) => `"${variant}"`).join(", ")} or "${variants[variants.length - 1]}"`;
+};
+var assertOptionalEnum = (value, name, variants) => {
+  if (value === undefined) {
+    return;
+  }
+  if (typeof value !== "string" || !variants.includes(value)) {
+    throw new TypeError(`"${name}" must be ${formatEnum(variants)}`);
+  }
+};
+var assertOptionalBoolean = (value, name) => {
+  if (value === undefined) {
+    return;
+  }
+  if (typeof value !== "boolean") {
+    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) => ({
@@ -69,9 +193,35 @@ var resolve = (p) => ({
   offsetX: p.offsetX ?? 0,
   offsetY: p.offsetY ?? 0,
   sampling: p.sampling ?? "bilinear",
-  color: p.color ?? "black",
-  shadeOutside: p.shadeOutside ?? false
+  colorMode: p.colorMode ?? "solid",
+  dotColor: "dotColor" in p ? p.dotColor ?? "red" : "red",
+  invert: p.invert ?? false
 });
+var validateHalftoneParams = (params) => {
+  assertEffectParamsObject(params, "Halftone");
+  assertOptionalFiniteNumber(params.dotSize, "dotSize");
+  assertOptionalFiniteNumber(params.dotSpacing, "dotSpacing");
+  assertOptionalFiniteNumber(params.rotation, "rotation");
+  assertOptionalFiniteNumber(params.offsetX, "offsetX");
+  assertOptionalFiniteNumber(params.offsetY, "offsetY");
+  assertOptionalEnum(params.shape, "shape", HALFTONE_SHAPES);
+  assertOptionalEnum(params.sampling, "sampling", HALFTONE_SAMPLING);
+  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)}`);
+  }
+  if (params.dotSpacing !== undefined && params.dotSpacing < 1) {
+    throw new TypeError(`"dotSpacing" must be >= 1, but got ${JSON.stringify(params.dotSpacing)}`);
+  }
+};
 var HALFTONE_VS = `#version 300 es
 in vec2 aPos;
 in vec2 aUv;
@@ -96,8 +246,7 @@ uniform vec2 uOffset;
 uniform vec4 uColor;
 uniform int uShape;
 uniform bool uShadeOutside;
-
-const float SHADE_OUTSIDE_SCALE = ${SHADE_OUTSIDE_DOT_SCALE.toFixed(1)};
+uniform bool uUseSourceColor;
 
 void main() {
 	vec2 fragPos = vUv * uResolution;
@@ -130,7 +279,7 @@ void main() {
 
 	float lumDefault = lum * alpha + (1.0 - alpha);
 	float dotScale = uShadeOutside
-		? (1.0 - alpha) * SHADE_OUTSIDE_SCALE
+		? lumDefault
 		: 1.0 - lumDefault;
 
 	if (dotScale <= 0.01) {
@@ -156,7 +305,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 = {
@@ -203,10 +352,11 @@ var parseColorRgba = (ctx, color) => {
 var halftone = createEffect({
   type: "remotion/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.shadeOutside ? 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", {
@@ -218,7 +368,6 @@ var halftone = createEffect({
       throw createWebGL2ContextError("halftone effect");
     }
     gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
-    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
     const vs = compileShader(gl, gl.VERTEX_SHADER, HALFTONE_VS);
     const fs = compileShader(gl, gl.FRAGMENT_SHADER, HALFTONE_FS);
     const program = linkProgram(gl, vs, fs);
@@ -290,17 +439,18 @@ 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]
     };
   },
-  apply: ({ source, width, height, params, state }) => {
+  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 filter = r.sampling === "nearest" ? gl.NEAREST : gl.LINEAR;
@@ -313,6 +463,7 @@ var halftone = createEffect({
     gl.bindTexture(gl.TEXTURE_2D, texture);
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, filter);
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, filter);
+    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipSourceY);
     gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
     if (state.uSource)
       gl.uniform1i(state.uSource, 0);
@@ -331,7 +482,9 @@ var halftone = createEffect({
     if (state.uShape)
       gl.uniform1i(state.uShape, SHAPE_INDEX[r.shape]);
     if (state.uShadeOutside)
-      gl.uniform1i(state.uShadeOutside, r.shadeOutside ? 1 : 0);
+      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);
@@ -344,7 +497,7 @@ var halftone = createEffect({
     gl.deleteTexture(texture);
   },
   schema: halftoneSchema,
-  validateParams: () => {}
+  validateParams: validateHalftoneParams
 });
 export {
   halftoneSchema,

package/dist/esm/hue.mjs

@@ -0,0 +1,126 @@
+// src/hue.ts
+import { Internals } from "remotion";
+
+// src/validate-effect-param.ts
+var assertEffectParamsObject = (params, effectLabel) => {
+  if (params === null || typeof params !== "object") {
+    throw new TypeError(`${effectLabel} effect requires a parameters object, but got ${JSON.stringify(params)}`);
+  }
+};
+var assertRequiredFiniteNumber = (value, name) => {
+  if (typeof value !== "number" || !Number.isFinite(value)) {
+    throw new TypeError(`"${name}" must be a finite number, but got ${JSON.stringify(value)}`);
+  }
+};
+var assertRequiredColor = (value, name) => {
+  if (typeof value !== "string" || value.length === 0) {
+    throw new TypeError(`"${name}" must be a non-empty string, but got ${JSON.stringify(value)}`);
+  }
+};
+
+// src/color-utils.ts
+var DEFAULT_AMOUNT = 1;
+var DEFAULT_BRIGHTNESS_AMOUNT = 0;
+var DEFAULT_HUE_DEGREES = 0;
+var colorAmountSchema = {
+  type: "number",
+  min: 0,
+  max: 1,
+  step: 0.01,
+  default: DEFAULT_AMOUNT,
+  description: "Amount"
+};
+var colorMultiplierSchema = {
+  type: "number",
+  min: 0,
+  step: 0.01,
+  default: DEFAULT_AMOUNT,
+  description: "Amount"
+};
+var brightnessAmountSchema = {
+  type: "number",
+  min: -1,
+  max: 1,
+  step: 0.01,
+  default: DEFAULT_BRIGHTNESS_AMOUNT,
+  description: "Amount"
+};
+var hueDegreesSchema = {
+  type: "number",
+  step: 1,
+  default: DEFAULT_HUE_DEGREES,
+  description: "Degrees"
+};
+var assertOptionalFiniteNumber = (value, name) => {
+  if (value === undefined) {
+    return;
+  }
+  assertRequiredFiniteNumber(value, name);
+};
+var validateUnitInterval = (value, name) => {
+  if (value < 0) {
+    throw new TypeError(`"${name}" must be >= 0, but got ${JSON.stringify(value)}`);
+  }
+  if (value > 1) {
+    throw new TypeError(`"${name}" must be <= 1, but got ${JSON.stringify(value)}`);
+  }
+};
+var validateNonNegative = (value, name) => {
+  if (value < 0) {
+    throw new TypeError(`"${name}" must be >= 0, but got ${JSON.stringify(value)}`);
+  }
+};
+var validateSignedUnitInterval = (value, name) => {
+  if (value < -1) {
+    throw new TypeError(`"${name}" must be >= -1, but got ${JSON.stringify(value)}`);
+  }
+  if (value > 1) {
+    throw new TypeError(`"${name}" must be <= 1, but got ${JSON.stringify(value)}`);
+  }
+};
+var clampColorChannel = (value) => {
+  return Math.max(0, Math.min(255, value));
+};
+
+// src/hue.ts
+var { createEffect } = Internals;
+var hueSchema = {
+  degrees: hueDegreesSchema
+};
+var resolve = (p) => ({
+  degrees: p.degrees ?? DEFAULT_HUE_DEGREES
+});
+var validateHueParams = (params) => {
+  assertEffectParamsObject(params, "Hue");
+  assertOptionalFiniteNumber(params.degrees, "degrees");
+};
+var hue = createEffect({
+  type: "remotion/hue",
+  label: "Hue",
+  documentationLink: "https://www.remotion.dev/docs/effects/hue",
+  backend: "2d",
+  calculateKey: (params) => {
+    const r = resolve(params);
+    return `hue-${r.degrees}`;
+  },
+  setup: () => null,
+  apply: ({ source, target, width, height, params }) => {
+    const ctx = target.getContext("2d");
+    if (!ctx) {
+      throw new Error("Failed to acquire 2D context for hue effect. The canvas may have been assigned a different context type.");
+    }
+    const r = resolve(params);
+    ctx.clearRect(0, 0, width, height);
+    ctx.filter = `hue-rotate(${r.degrees}deg)`;
+    ctx.drawImage(source, 0, 0, width, height);
+    ctx.filter = "none";
+  },
+  cleanup: () => {
+    return;
+  },
+  schema: hueSchema,
+  validateParams: validateHueParams
+});
+export {
+  hue
+};