From adf466d5a924d7abc0b8997f6a02b4442a0a7240 Mon Sep 17 00:00:00 2001
From: dennisrijsdijk <git@dennis.gg>
Date: Sun, 18 Aug 2024 11:33:05 +0200
Subject: [PATCH 1/4] fix(effects): add alpha padding to rgb color codes in obs
 color source

---
 .../builtin/obs/effects/set-obs-color-source-color.ts           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/backend/integrations/builtin/obs/effects/set-obs-color-source-color.ts b/src/backend/integrations/builtin/obs/effects/set-obs-color-source-color.ts
index a53e4da01..a16cef25a 100644
--- a/src/backend/integrations/builtin/obs/effects/set-obs-color-source-color.ts
+++ b/src/backend/integrations/builtin/obs/effects/set-obs-color-source-color.ts
@@ -80,7 +80,7 @@ export const SetOBSColorSourceColorEffectType: EffectType<{
         if (hexColor.length === 8) {
             obsFormattedHexColor = `${hexColor.substring(0, 2)}${hexColor.substring(6, 8)}${hexColor.substring(4, 6)}${hexColor.substring(2, 4)}`;
         } else {
-            obsFormattedHexColor = `${hexColor.substring(4, 6)}${hexColor.substring(2, 4)}${hexColor.substring(0, 2)}`;
+            obsFormattedHexColor = `FF${hexColor.substring(4, 6)}${hexColor.substring(2, 4)}${hexColor.substring(0, 2)}`;
         }
 
         const intColorValue = parseInt(obsFormattedHexColor, 16);

From fef4aca22a3756a2b402e4bc934d7a45adb7f797 Mon Sep 17 00:00:00 2001
From: dennisrijsdijk <git@dennis.gg>
Date: Sun, 18 Aug 2024 11:34:35 +0200
Subject: [PATCH 2/4] feat(effects): support color picker and variables for obs
 color source

---
 .../obs/effects/set-obs-color-source-color.ts | 85 +++++++++++++++++--
 .../directives/controls/color-picker-input.js |  5 +-
 2 files changed, 81 insertions(+), 9 deletions(-)

diff --git a/src/backend/integrations/builtin/obs/effects/set-obs-color-source-color.ts b/src/backend/integrations/builtin/obs/effects/set-obs-color-source-color.ts
index a16cef25a..ceffa16fb 100644
--- a/src/backend/integrations/builtin/obs/effects/set-obs-color-source-color.ts
+++ b/src/backend/integrations/builtin/obs/effects/set-obs-color-source-color.ts
@@ -1,9 +1,11 @@
+import logger from "../../../../logwrapper";
 import { EffectType } from "../../../../../types/effects";
 import { OBSSource, setColorSourceSettings } from "../obs-remote";
 
 export const SetOBSColorSourceColorEffectType: EffectType<{
     colorSourceName: string;
     color: string;
+    customColor: boolean;
 }> = {
     definition: {
         id: "firebot:obs-set-color-source-color",
@@ -35,10 +37,39 @@ export const SetOBSColorSourceColorEffectType: EffectType<{
     </eos-container>
 
     <eos-container ng-if="colorSources != null && effect.colorSourceName != null" header="Color" style="margin-top: 10px;" pad-top="true">
-        <firebot-input model="effect.color" placeholder-text="Format: #0066FF or #FF336699"></firebot-input>
+        <firebot-checkbox
+            label="Use Custom Color"
+            tooltip="Allow entering custom hex colors or variables. Will fail if variables don't resolve to hex color"
+            model="effect.customColor"
+            ng-click="toggleCustomColor()"
+            class="mb4"
+        />
+        <firebot-input ng-if="effect.customColor" model="effect.color" placeholder-text="Format: #0066FF or #FF336699"></firebot-input>
+        <color-picker-input ng-if="!effect.customColor" model="effect.color" alpha="true" lg-input="true"></color-picker-input>
     </eos-container>
   `,
     optionsController: ($scope: any, backendCommunicator: any, $q: any) => {
+        const rgbRegexp = /^#?[0-9a-f]{6}$/i;
+        const argbRegexp = /^#?[0-9a-f]{8}$/i;
+
+        if ($scope.effect.color != null && $scope.effect.customColor == null) {
+            $scope.effect.customColor = true;
+        }
+
+        function argbToRgba(hexColor: string) {
+            hexColor = hexColor.replace("#", "");
+            return `${hexColor.substring(2, 4)}${hexColor.substring(4, 6)}${hexColor.substring(6, 8)}${hexColor.substring(0, 2)}`;
+        }
+
+        function rgbaToArgb(hexColor: string) {
+            hexColor = hexColor.replace("#", "");
+            return `${hexColor.substring(6, 8)}${hexColor.substring(0, 2)}${hexColor.substring(2, 4)}${hexColor.substring(4, 6)}`;
+        }
+
+        if ($scope.effect.color == null) {
+            $scope.effect.color = "#FF0000FF";
+        }
+
         $scope.isObsConfigured = false;
 
         $scope.colorSources = [];
@@ -47,6 +78,29 @@ export const SetOBSColorSourceColorEffectType: EffectType<{
             $scope.effect.colorSourceName = colorSourceName;
         };
 
+        $scope.toggleCustomColor = () => {
+            if ($scope.debounce) {
+                return;
+            }
+
+            $scope.debounce = true;
+
+            setTimeout(() => $scope.debounce = false, 5);
+
+            const value = !$scope.effect.customColor;
+            if (
+                (!value &&
+                !rgbRegexp.test($scope.effect.color) &&
+                !argbRegexp.test($scope.effect.color)) ||
+                $scope.effect.color.length !== 9
+            ) {
+                //$scope.effect.color = "#FF0000FF";
+                return;
+            }
+
+            $scope.effect.color = `#${value ? rgbaToArgb($scope.effect.color) : argbToRgba($scope.effect.color)}`;
+        };
+
         $scope.getColorSources = () => {
             $scope.isObsConfigured = backendCommunicator.fireEventSync("obs-is-configured");
 
@@ -61,26 +115,43 @@ export const SetOBSColorSourceColorEffectType: EffectType<{
     },
     optionsValidator: (effect) => {
         const errors: string[] = [];
-        const rgbRegexp = /^#?[0-9a-f]{6}$/ig;
-        const argbRegexp = /^#?[0-9a-f]{8}$/ig;
+        const rgbRegexp = /^#?[0-9a-f]{6}$/i;
+        const argbRegexp = /^#?[0-9a-f]{8}$/i;
 
         if (effect.colorSourceName == null) {
             errors.push("Please select a color source");
-        } else if (!rgbRegexp.test(effect.color) && !argbRegexp.test(effect.color)) {
+        } else if (!effect.customColor && !rgbRegexp.test(effect.color) && !argbRegexp.test(effect.color)) {
             errors.push("Color must be in RGB format (#0066FF) or ARGB format (#FF336699)");
         }
 
         return errors;
     },
     onTriggerEvent: async ({ effect }) => {
+        const rgbRegexp = /^#?[0-9a-f]{6}$/i;
+        const argbRegexp = /^#?[0-9a-f]{8}$/i;
+
+        function argbToAbgr(hexColor: string) {
+            return `${hexColor.substring(0, 2)}${hexColor.substring(6, 8)}${hexColor.substring(4, 6)}${hexColor.substring(2, 4)}`;
+        }
+
+        function rgbaToAbgr(hexColor: string) {
+            return `${hexColor.substring(6, 8)}${hexColor.substring(4, 6)}${hexColor.substring(2, 4)}${hexColor.substring(0, 2)}`;
+        }
+
+        if (!rgbRegexp.test(effect.color) && !argbRegexp.test(effect.color)) {
+            logger.error(`Set OBS Color Source: '${effect.color}' is not a valid (A)RGB color code.`);
+            return false;
+        }
         const hexColor = effect.color.replace("#", "");
         let obsFormattedHexColor = "";
 
         // OBS likes the color values in the OTHER direction
-        if (hexColor.length === 8) {
-            obsFormattedHexColor = `${hexColor.substring(0, 2)}${hexColor.substring(6, 8)}${hexColor.substring(4, 6)}${hexColor.substring(2, 4)}`;
+        if (!effect.customColor) {
+            obsFormattedHexColor = rgbaToAbgr(hexColor);
+        } else if (hexColor.length === 8) {
+            obsFormattedHexColor = argbToAbgr(hexColor);
         } else {
-            obsFormattedHexColor = `FF${hexColor.substring(4, 6)}${hexColor.substring(2, 4)}${hexColor.substring(0, 2)}`;
+            obsFormattedHexColor = argbToAbgr(`FF${hexColor}`);
         }
 
         const intColorValue = parseInt(obsFormattedHexColor, 16);
diff --git a/src/gui/app/directives/controls/color-picker-input.js b/src/gui/app/directives/controls/color-picker-input.js
index 85d5df1a9..b5c28711f 100644
--- a/src/gui/app/directives/controls/color-picker-input.js
+++ b/src/gui/app/directives/controls/color-picker-input.js
@@ -8,6 +8,7 @@
             bindings: {
                 model: "=",
                 label: "@?",
+                alpha: "<",
                 style: "@",
                 lgInput: "<",
                 showClear: "<"
@@ -39,10 +40,10 @@
                         required: true,
                         inputClass: `form-control ${$ctrl.lgInput ? 'input-lg' : ''}`,
                         allowEmpty: false,
-                        format: "hexString",
+                        format: $ctrl.alpha ? "hex8String" : "hexString",
                         placeholder: "#ffffff",
                         case: "lower",
-                        alpha: false,
+                        alpha: $ctrl.alpha,
                         clear: {
                             show: $ctrl.showClear !== false,
                             label: 'Clear',

From ddded3ef04a1707679dcea71417ffd9ab3911599 Mon Sep 17 00:00:00 2001
From: dennisrijsdijk <git@dennis.gg>
Date: Sun, 18 Aug 2024 13:11:03 +0200
Subject: [PATCH 3/4] chore: verbiage and checkbox on-change

---
 .../obs/effects/set-obs-color-source-color.ts | 39 +++++++++----------
 1 file changed, 18 insertions(+), 21 deletions(-)

diff --git a/src/backend/integrations/builtin/obs/effects/set-obs-color-source-color.ts b/src/backend/integrations/builtin/obs/effects/set-obs-color-source-color.ts
index ceffa16fb..5c9923c08 100644
--- a/src/backend/integrations/builtin/obs/effects/set-obs-color-source-color.ts
+++ b/src/backend/integrations/builtin/obs/effects/set-obs-color-source-color.ts
@@ -39,13 +39,18 @@ export const SetOBSColorSourceColorEffectType: EffectType<{
     <eos-container ng-if="colorSources != null && effect.colorSourceName != null" header="Color" style="margin-top: 10px;" pad-top="true">
         <firebot-checkbox
             label="Use Custom Color"
-            tooltip="Allow entering custom hex colors or variables. Will fail if variables don't resolve to hex color"
+            tooltip="Allow entering custom hex colors or replace variables. Will fail if the result is not a valid hex color."
             model="effect.customColor"
-            ng-click="toggleCustomColor()"
+            on-change="toggleCustomColor(newValue)"
             class="mb4"
         />
-        <firebot-input ng-if="effect.customColor" model="effect.color" placeholder-text="Format: #0066FF or #FF336699"></firebot-input>
-        <color-picker-input ng-if="!effect.customColor" model="effect.color" alpha="true" lg-input="true"></color-picker-input>
+        <firebot-input
+            input-title="#ARGB"
+            ng-if="effect.customColor"
+            model="effect.color"
+            placeholder-text="Format: #0066FF or #FF336699"
+        />
+        <color-picker-input label="#RGBA" ng-if="!effect.customColor" model="effect.color" alpha="true" lg-input="true"></color-picker-input>
     </eos-container>
   `,
     optionsController: ($scope: any, backendCommunicator: any, $q: any) => {
@@ -78,27 +83,19 @@ export const SetOBSColorSourceColorEffectType: EffectType<{
             $scope.effect.colorSourceName = colorSourceName;
         };
 
-        $scope.toggleCustomColor = () => {
-            if ($scope.debounce) {
-                return;
-            }
-
-            $scope.debounce = true;
-
-            setTimeout(() => $scope.debounce = false, 5);
-
-            const value = !$scope.effect.customColor;
-            if (
-                (!value &&
+        $scope.toggleCustomColor = (newValue: boolean) => {
+            // Ignore the conversion when variables are included or when only RGB is provided
+            if ((
                 !rgbRegexp.test($scope.effect.color) &&
-                !argbRegexp.test($scope.effect.color)) ||
-                $scope.effect.color.length !== 9
-            ) {
-                //$scope.effect.color = "#FF0000FF";
+                !argbRegexp.test($scope.effect.color)
+            ) || (
+                rgbRegexp.test($scope.effect.color) &&
+                !argbRegexp.test($scope.effect.color)
+            )) {
                 return;
             }
 
-            $scope.effect.color = `#${value ? rgbaToArgb($scope.effect.color) : argbToRgba($scope.effect.color)}`;
+            $scope.effect.color = `#${newValue ? rgbaToArgb($scope.effect.color) : argbToRgba($scope.effect.color)}`;
         };
 
         $scope.getColorSources = () => {

From de46f58b64e560f1a39fd4e3c26f2968ef2389b1 Mon Sep 17 00:00:00 2001
From: dennisrijsdijk <git@dennis.gg>
Date: Sun, 18 Aug 2024 13:23:40 +0200
Subject: [PATCH 4/4] fix: ensure proper handling between pre-existing and new
 effects

---
 .../builtin/obs/effects/set-obs-color-source-color.ts       | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/backend/integrations/builtin/obs/effects/set-obs-color-source-color.ts b/src/backend/integrations/builtin/obs/effects/set-obs-color-source-color.ts
index 5c9923c08..c9f5a5d50 100644
--- a/src/backend/integrations/builtin/obs/effects/set-obs-color-source-color.ts
+++ b/src/backend/integrations/builtin/obs/effects/set-obs-color-source-color.ts
@@ -61,6 +61,10 @@ export const SetOBSColorSourceColorEffectType: EffectType<{
             $scope.effect.customColor = true;
         }
 
+        if ($scope.effect.customColor == null) {
+            $scope.effect.customColor = false;
+        }
+
         function argbToRgba(hexColor: string) {
             hexColor = hexColor.replace("#", "");
             return `${hexColor.substring(2, 4)}${hexColor.substring(4, 6)}${hexColor.substring(6, 8)}${hexColor.substring(0, 2)}`;
@@ -143,7 +147,7 @@ export const SetOBSColorSourceColorEffectType: EffectType<{
         let obsFormattedHexColor = "";
 
         // OBS likes the color values in the OTHER direction
-        if (!effect.customColor) {
+        if (effect.customColor === false) {
             obsFormattedHexColor = rgbaToAbgr(hexColor);
         } else if (hexColor.length === 8) {
             obsFormattedHexColor = argbToAbgr(hexColor);