feat(overlay-widgets): Static Image Overlay Widget Type

Author: ebiggz

src/backend/overlay-widgets/builtin-types/image/image.ts

@@ -0,0 +1,67 @@
+import { OverlayWidgetType, IOverlayWidgetEventUtils, WidgetOverlayEvent } from "../../../../types/overlay-widgets";
+
+type Settings = {
+    filepath: string;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+type State = {};
+
+export const image: OverlayWidgetType<Settings, State> = {
+    id: "firebot:image",
+    name: "Image",
+    description: "A simple image widget that displays a static image in the overlay.",
+    icon: "fa-image",
+    settingsSchema: [
+        {
+            name: "filepath",
+            title: "Image File",
+            type: "filepath",
+            default: "",
+            fileOptions: {
+                title: "Select an Image File",
+                buttonLabel: "Select Image",
+                directoryOnly: false,
+                filters: [
+                    { name: 'Image', extensions: ['bmp', 'gif', 'jpg', 'jpeg', 'png', 'apng', 'svg', 'webp'] },
+                    { name: 'All Files', extensions: ['*'] }
+                ]
+            },
+            validation: {
+                required: true
+            }
+        }
+    ],
+    initialAspectRatio: { width: 3, height: 2 },
+    initialState: {},
+    supportsLivePreview: true,
+    livePreviewState: {},
+    resourceKeys: ["filepath"],
+    overlayExtension: {
+        eventHandler: (event: WidgetOverlayEvent<Settings, State>, utils: IOverlayWidgetEventUtils) => {
+            const generateWidgetHtml = (config: typeof event["data"]["widgetConfig"]) => {
+                const containerStyles = {
+                    "width": "100%",
+                    "height": "100%",
+                    "display": "flex",
+                    "justify-content": "center",
+                    "align-items": "center"
+                };
+
+                const imageStyles = {
+                    "max-width": "100%",
+                    "max-height": "100%",
+                    "object-fit": "contain"
+                };
+
+                return `
+                <div id="image-container" style="${utils.stylesToString(containerStyles)}">
+                    ${config.resourceTokens.filepath ? `<img src="http://${window.location.hostname}:7472/resource/${config.resourceTokens.filepath}" style="${utils.stylesToString(imageStyles)}" />` : ''}
+                </div>
+                `;
+            };
+
+            utils.handleOverlayEvent(generateWidgetHtml);
+        }
+    }
+};

src/backend/overlay-widgets/builtin-types/index.ts

@@ -6,6 +6,7 @@ import { counterDisplay } from "./counter-display/counter-display";
 import { text } from "./text/text";
 import { currentDateTime } from "./current-date-time/current-date-time";
 import { countdownToDate } from "./countdown-to-date/countdown-to-date";
+import { image } from "./image/image";
 
 export default [
     progressbar,
@@ -15,5 +16,6 @@ export default [
     custom,
     customAdvanced,
     currentDateTime,
-    text
+    text,
+    image
 ];

src/backend/overlay-widgets/overlay-widgets-manager.ts

@@ -5,6 +5,7 @@ import overlayWidgetConfigManager from "./overlay-widget-config-manager";
 import websocketServerManager from "../../server/websocket-server-manager";
 import { wait } from "../utils";
 import logger from "../logwrapper";
+import { ResourceTokenManager } from "../resource-token-manager";
 
 type Events = {
     "overlay-widget-type-registered": (overlayWidgetType: OverlayWidgetType) => void;
@@ -80,10 +81,23 @@ class OverlayWidgetsManager extends TypedEmitter<Events> {
             await handleWidgetEvent(widgetType.onRemove);
         }
 
+        const resourceTokens = {} as Record<string, string>;
+        if (!!widgetType.resourceKeys?.length) {
+            for (const key of widgetType.resourceKeys) {
+                const value = widgetConfig.settings[key];
+                if (typeof value === "string") {
+                    resourceTokens[key] = ResourceTokenManager.storeResourcePath(value, 30);
+                }
+            }
+        }
+
         websocketServerManager.sendWidgetEventToOverlay({
             name: eventName,
             data: {
-                widgetConfig,
+                widgetConfig: {
+                    ...widgetConfig,
+                    resourceTokens
+                },
                 widgetType,
                 previewMode,
                 ...messageInfo

src/types/overlay-widgets.d.ts

@@ -110,6 +110,12 @@ export type OverlayWidgetType<
      * State that is used when the widget is shown in live preview mode.
      */
     livePreviewState?: State;
+
+    /**
+     * Array of setting keys that reference local resource paths.
+     * These properties will be automatically converted to resource tokens when sent to the overlay,
+     */
+    resourceKeys?: Array<keyof Settings>;
     /**
      * Function that returns a short string representing the current state of the widget.
      * This is shown in the overlay widget list to give the user a quick overview of the widget's state.
@@ -185,7 +191,11 @@ type OverlayWidgetConfig<Settings = Record<string, unknown>, State = Record<stri
 export type WidgetOverlayEvent<Settings = Record<string, unknown>, State = Record<string, unknown>> = {
     name: "show" | "settings-update" | "state-update" | "message" | "remove";
     data: {
-        widgetConfig: Pick<OverlayWidgetConfig<Settings, State>, "id" | "name" | "type" | "position" | "entryAnimation" | "exitAnimation" | "settings" | "state" | "overlayInstance" | "zIndex">;
+        widgetConfig: Pick<OverlayWidgetConfig<Settings, State>, "id" | "name" | "type" | "position" | "entryAnimation" | "exitAnimation" | "settings" | "state" | "overlayInstance" | "zIndex"> & {
+            resourceTokens: {
+                [K in keyof Settings]: string;
+            };
+        };
         widgetType: Pick<OverlayWidgetType, "id" | "userCanConfigure">;
         previewMode: boolean;
         /**