feat: OBS Color Picker, Raw/Variable Color Entry

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,48 @@ 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 replace variables. Will fail if the result is not a valid hex color."
+            model="effect.customColor"
+            on-change="toggleCustomColor(newValue)"
+            class="mb4"
+        />
+        <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) => {
+        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;
+        }
+
+        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)}`;
+        }
+
+        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 +87,21 @@ export const SetOBSColorSourceColorEffectType: EffectType<{
             $scope.effect.colorSourceName = colorSourceName;
         };
 
+        $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)
+            ) || (
+                rgbRegexp.test($scope.effect.color) &&
+                !argbRegexp.test($scope.effect.color)
+            )) {
+                return;
+            }
+
+            $scope.effect.color = `#${newValue ? rgbaToArgb($scope.effect.color) : argbToRgba($scope.effect.color)}`;
+        };
+
         $scope.getColorSources = () => {
             $scope.isObsConfigured = backendCommunicator.fireEventSync("obs-is-configured");
 
@@ -61,26 +116,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 === false) {
+            obsFormattedHexColor = rgbaToAbgr(hexColor);
+        } else if (hexColor.length === 8) {
+            obsFormattedHexColor = argbToAbgr(hexColor);
         } else {
-            obsFormattedHexColor = `${hexColor.substring(4, 6)}${hexColor.substring(2, 4)}${hexColor.substring(0, 2)}`;
+            obsFormattedHexColor = argbToAbgr(`FF${hexColor}`);
         }
 
         const intColorValue = parseInt(obsFormattedHexColor, 16);

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',