From 5c97165eb0e87aa656a39feb67a24eb2a77d8c23 Mon Sep 17 00:00:00 2001
From: HxxxxxS <16c52527@opayq.com>
Date: Thu, 31 Oct 2024 23:09:25 +0100
Subject: [PATCH] define BlendEffect and ScaleEffect

---
 src/effects/BlendEffect.js | 34 ++++++++++++++++++++++++++++++++++
 src/effects/ScaleEffect.js | 37 +++++++++++++++++++++++++++++++++++++
 2 files changed, 71 insertions(+)
 create mode 100644 src/effects/BlendEffect.js
 create mode 100644 src/effects/ScaleEffect.js

diff --git a/src/effects/BlendEffect.js b/src/effects/BlendEffect.js
new file mode 100644
index 0000000..749330c
--- /dev/null
+++ b/src/effects/BlendEffect.js
@@ -0,0 +1,34 @@
+import Effect from './Effect.js';
+
+export default class BlendEffect extends Effect {
+    constructor(options = {}) {
+        super(options);
+        this.setDefaults({
+            blendMode: "screen",
+            opacity: 1.0
+        });
+    }
+
+    apply(ctx, video, params = {}) {
+        if (!this.enabled) return;
+        
+        this.beforeApply(ctx, video, params);
+        
+        // Retrieve blend mode and opacity, defaulting to "screen" and 1.0
+        const blendMode = this.getParam("blendMode", params.blendMode);
+        const opacity = this.getParam("opacity", params.opacity);
+
+        // Set blend mode and opacity
+        ctx.globalCompositeOperation = blendMode;
+        ctx.globalAlpha = opacity;
+
+        // Draw the video frame onto the canvas
+        ctx.drawImage(video, 0, 0, ctx.canvas.width, ctx.canvas.height);
+
+        // Reset to default values for further drawing
+        ctx.globalCompositeOperation = "source-over";
+        ctx.globalAlpha = 1.0;
+
+        this.afterApply(ctx, video, params);
+    }
+}
diff --git a/src/effects/ScaleEffect.js b/src/effects/ScaleEffect.js
new file mode 100644
index 0000000..51bcda5
--- /dev/null
+++ b/src/effects/ScaleEffect.js
@@ -0,0 +1,37 @@
+import Effect from './Effect.js';
+
+export default class ScaleEffect extends Effect {
+    constructor(options = {}) {
+        super(options);
+        this.setDefaults({
+            scaleMode: "fit"  // Scale mode, e.g., "fit" or "fill"
+        });
+    }
+
+    apply(ctx, video, params = {}) {
+        if (!this.enabled) return;
+
+        this.beforeApply(ctx, video, params);
+
+        const scaleMode = this.getParam("scaleMode", params.scaleMode);
+        
+        // Determine the scale to either fit or fill the canvas
+        let scale;
+        if (scaleMode === "fill") {
+            scale = Math.min(ctx.canvas.width / video.videoWidth, ctx.canvas.height / video.videoHeight);
+        } else {  // Default to "fit" mode
+            scale = Math.max(ctx.canvas.width / video.videoWidth, ctx.canvas.height / video.videoHeight);
+        }
+
+        // Calculate scaled dimensions and offset for centering
+        const scaledWidth = video.videoWidth * scale;
+        const scaledHeight = video.videoHeight * scale;
+        const offsetX = (ctx.canvas.width - scaledWidth) / 2;
+        const offsetY = (ctx.canvas.height - scaledHeight) / 2;
+
+        // Draw the scaled video onto the canvas
+        ctx.drawImage(video, offsetX, offsetY, scaledWidth, scaledHeight);
+
+        this.afterApply(ctx, video, params);
+    }
+}