@thestatic-tv/dcl-sdk 2.5.11 → 2.5.14

package/dist/index.d.mts

@@ -846,11 +846,16 @@ declare class AdminPanelUIModule {
     private TabBtn;
     private VideoTab;
     private ModTab;
+    /**
+     * Render a scaled notification banner
+     * Uses same layout as NotificationBanner but with scaled font size
+     */
+    private renderScaledNotification;
     /**
      * Get the React-ECS component for the admin panel
-     * Always renders NotificationBanner (for broadcasts), admin panel only for admins
+     * Always renders notification (scaled), admin panel only for admins
      */
-    getComponent: () => ReactEcs.JSX.Element;
+    getComponent: () => ReactEcs.JSX.Element | null;
 }
 
 /**

package/dist/index.d.ts

@@ -846,11 +846,16 @@ declare class AdminPanelUIModule {
     private TabBtn;
     private VideoTab;
     private ModTab;
+    /**
+     * Render a scaled notification banner
+     * Uses same layout as NotificationBanner but with scaled font size
+     */
+    private renderScaledNotification;
     /**
      * Get the React-ECS component for the admin panel
-     * Always renders NotificationBanner (for broadcasts), admin panel only for admins
+     * Always renders notification (scaled), admin panel only for admins
      */
-    getComponent: () => ReactEcs.JSX.Element;
+    getComponent: () => ReactEcs.JSX.Element | null;
 }
 
 /**

package/dist/index.js

@@ -670,16 +670,16 @@ var UI_DIMENSIONS = {
     buttonHeightSmall: 30,
     inputHeight: 36
   },
-  // Notification banner - next to DCL native chat panel
+  // Notification banner - centered, aligned with toggle buttons
   notification: {
     width: 340,
-    height: 44,
-    bottom: 55,
-    // Above the chat input area
-    left: 400,
-    // Right of DCL native chat (chat is ~380px wide)
+    height: 36,
+    // Same as toggle buttons
+    bottom: 10,
+    // Same as toggle buttons
     borderWidth: 2,
     fontSize: 14
+    // Same as toggle buttons (14)
   },
   // Shared
   closeButton: {
@@ -2330,6 +2330,9 @@ function showNotification(message, durationMs = 5e3) {
 function hideNotification() {
   notificationVisible = false;
 }
+function getNotificationState() {
+  return { text: notificationText, visible: notificationVisible };
+}
 function initNotificationSystem() {
   if (notificationInitialized) return;
   notificationInitialized = true;
@@ -2342,60 +2345,73 @@ function initNotificationSystem() {
 function NotificationBanner() {
   initNotificationSystem();
   if (!notificationVisible) return null;
-  return /* @__PURE__ */ import_react_ecs4.default.createElement(
-    import_react_ecs4.UiEntity,
-    {
-      uiTransform: {
-        positionType: "absolute",
-        position: { bottom: N.bottom, left: N.left },
-        width: N.width,
-        height: N.height,
-        flexDirection: "row",
-        alignItems: "center"
-      },
-      uiBackground: { color: C.panel }
-    },
-    /* @__PURE__ */ import_react_ecs4.default.createElement(
-      import_react_ecs4.UiEntity,
-      {
-        uiTransform: {
-          width: N.borderWidth,
-          height: "100%"
-        },
-        uiBackground: { color: C.cyan }
-      }
-    ),
+  return (
+    // Full-width container to center the notification
     /* @__PURE__ */ import_react_ecs4.default.createElement(
       import_react_ecs4.UiEntity,
       {
         uiTransform: {
-          flexGrow: 1,
-          height: "100%",
-          padding: { left: 12, right: 12 },
+          positionType: "absolute",
+          position: { bottom: N.bottom, left: 0, right: 0 },
+          height: N.height,
           justifyContent: "center",
-          alignItems: "flex-start"
+          alignItems: "center"
         }
       },
       /* @__PURE__ */ import_react_ecs4.default.createElement(
-        import_react_ecs4.Label,
+        import_react_ecs4.UiEntity,
         {
-          value: notificationText,
-          fontSize: N.fontSize,
-          color: C.white,
-          textAlign: "middle-left"
-        }
-      )
-    ),
-    /* @__PURE__ */ import_react_ecs4.default.createElement(
-      import_react_ecs4.UiEntity,
-      {
-        uiTransform: {
-          width: 6,
-          height: 6,
-          margin: { right: 12 }
+          uiTransform: {
+            width: N.width,
+            height: N.height,
+            flexDirection: "row",
+            alignItems: "center"
+          },
+          uiBackground: { color: C.panel }
         },
-        uiBackground: { color: C.cyan }
-      }
+        /* @__PURE__ */ import_react_ecs4.default.createElement(
+          import_react_ecs4.UiEntity,
+          {
+            uiTransform: {
+              width: N.borderWidth,
+              height: "100%"
+            },
+            uiBackground: { color: C.cyan }
+          }
+        ),
+        /* @__PURE__ */ import_react_ecs4.default.createElement(
+          import_react_ecs4.UiEntity,
+          {
+            uiTransform: {
+              flexGrow: 1,
+              height: "100%",
+              padding: { left: 10, right: 10 },
+              justifyContent: "center",
+              alignItems: "flex-start"
+            }
+          },
+          /* @__PURE__ */ import_react_ecs4.default.createElement(
+            import_react_ecs4.Label,
+            {
+              value: notificationText,
+              fontSize: N.fontSize,
+              color: C.white,
+              textAlign: "middle-left"
+            }
+          )
+        ),
+        /* @__PURE__ */ import_react_ecs4.default.createElement(
+          import_react_ecs4.UiEntity,
+          {
+            uiTransform: {
+              width: 5,
+              height: 5,
+              margin: { right: 10 }
+            },
+            uiBackground: { color: C.cyan }
+          }
+        )
+      )
     )
   );
 }
@@ -2867,11 +2883,11 @@ var AdminPanelUIModule = class {
     };
     /**
      * Get the React-ECS component for the admin panel
-     * Always renders NotificationBanner (for broadcasts), admin panel only for admins
+     * Always renders notification (scaled), admin panel only for admins
      */
     this.getComponent = () => {
       if (!this.isAdmin) {
-        return /* @__PURE__ */ import_react_ecs5.default.createElement(NotificationBanner, null);
+        return this.renderScaledNotification();
       }
       const t = this.theme;
       const tabs = [];
@@ -2896,7 +2912,7 @@ var AdminPanelUIModule = class {
             positionType: "absolute"
           }
         },
-        /* @__PURE__ */ import_react_ecs5.default.createElement(NotificationBanner, null),
+        this.renderScaledNotification(),
         /* @__PURE__ */ import_react_ecs5.default.createElement(
           import_react_ecs5.UiEntity,
           {
@@ -3631,6 +3647,76 @@ var AdminPanelUIModule = class {
       this.stopStreamPolling();
     }
   }
+  /**
+   * Render a scaled notification banner
+   * Uses same layout as NotificationBanner but with scaled font size
+   */
+  renderScaledNotification() {
+    initNotificationSystem();
+    const state = getNotificationState();
+    if (!state.visible) return null;
+    const N2 = UI_DIMENSIONS.notification;
+    const colors = THEME.colors;
+    return /* @__PURE__ */ import_react_ecs5.default.createElement(
+      import_react_ecs5.UiEntity,
+      {
+        uiTransform: {
+          positionType: "absolute",
+          position: { bottom: N2.bottom, left: 0, right: 0 },
+          height: this.s(N2.height),
+          justifyContent: "center",
+          alignItems: "center"
+        }
+      },
+      /* @__PURE__ */ import_react_ecs5.default.createElement(
+        import_react_ecs5.UiEntity,
+        {
+          uiTransform: {
+            width: this.s(N2.width),
+            height: this.s(N2.height),
+            flexDirection: "row",
+            alignItems: "center"
+          },
+          uiBackground: { color: colors.panel }
+        },
+        /* @__PURE__ */ import_react_ecs5.default.createElement(
+          import_react_ecs5.UiEntity,
+          {
+            uiTransform: { width: N2.borderWidth, height: "100%" },
+            uiBackground: { color: colors.cyan }
+          }
+        ),
+        /* @__PURE__ */ import_react_ecs5.default.createElement(
+          import_react_ecs5.UiEntity,
+          {
+            uiTransform: {
+              flexGrow: 1,
+              height: "100%",
+              padding: { left: 10, right: 10 },
+              justifyContent: "center",
+              alignItems: "flex-start"
+            }
+          },
+          /* @__PURE__ */ import_react_ecs5.default.createElement(
+            import_react_ecs5.Label,
+            {
+              value: state.text,
+              fontSize: this.s(N2.fontSize),
+              color: colors.white,
+              textAlign: "middle-left"
+            }
+          )
+        ),
+        /* @__PURE__ */ import_react_ecs5.default.createElement(
+          import_react_ecs5.UiEntity,
+          {
+            uiTransform: { width: 5, height: 5, margin: { right: 10 } },
+            uiBackground: { color: colors.cyan }
+          }
+        )
+      )
+    );
+  }
 };
 
 // src/StaticTVClient.ts

package/dist/index.mjs

@@ -625,16 +625,16 @@ var UI_DIMENSIONS = {
     buttonHeightSmall: 30,
     inputHeight: 36
   },
-  // Notification banner - next to DCL native chat panel
+  // Notification banner - centered, aligned with toggle buttons
   notification: {
     width: 340,
-    height: 44,
-    bottom: 55,
-    // Above the chat input area
-    left: 400,
-    // Right of DCL native chat (chat is ~380px wide)
+    height: 36,
+    // Same as toggle buttons
+    bottom: 10,
+    // Same as toggle buttons
     borderWidth: 2,
     fontSize: 14
+    // Same as toggle buttons (14)
   },
   // Shared
   closeButton: {
@@ -2285,6 +2285,9 @@ function showNotification(message, durationMs = 5e3) {
 function hideNotification() {
   notificationVisible = false;
 }
+function getNotificationState() {
+  return { text: notificationText, visible: notificationVisible };
+}
 function initNotificationSystem() {
   if (notificationInitialized) return;
   notificationInitialized = true;
@@ -2297,60 +2300,73 @@ function initNotificationSystem() {
 function NotificationBanner() {
   initNotificationSystem();
   if (!notificationVisible) return null;
-  return /* @__PURE__ */ ReactEcs4.createElement(
-    UiEntity4,
-    {
-      uiTransform: {
-        positionType: "absolute",
-        position: { bottom: N.bottom, left: N.left },
-        width: N.width,
-        height: N.height,
-        flexDirection: "row",
-        alignItems: "center"
-      },
-      uiBackground: { color: C.panel }
-    },
-    /* @__PURE__ */ ReactEcs4.createElement(
-      UiEntity4,
-      {
-        uiTransform: {
-          width: N.borderWidth,
-          height: "100%"
-        },
-        uiBackground: { color: C.cyan }
-      }
-    ),
+  return (
+    // Full-width container to center the notification
     /* @__PURE__ */ ReactEcs4.createElement(
       UiEntity4,
       {
         uiTransform: {
-          flexGrow: 1,
-          height: "100%",
-          padding: { left: 12, right: 12 },
+          positionType: "absolute",
+          position: { bottom: N.bottom, left: 0, right: 0 },
+          height: N.height,
           justifyContent: "center",
-          alignItems: "flex-start"
+          alignItems: "center"
         }
       },
       /* @__PURE__ */ ReactEcs4.createElement(
-        Label4,
+        UiEntity4,
         {
-          value: notificationText,
-          fontSize: N.fontSize,
-          color: C.white,
-          textAlign: "middle-left"
-        }
-      )
-    ),
-    /* @__PURE__ */ ReactEcs4.createElement(
-      UiEntity4,
-      {
-        uiTransform: {
-          width: 6,
-          height: 6,
-          margin: { right: 12 }
+          uiTransform: {
+            width: N.width,
+            height: N.height,
+            flexDirection: "row",
+            alignItems: "center"
+          },
+          uiBackground: { color: C.panel }
         },
-        uiBackground: { color: C.cyan }
-      }
+        /* @__PURE__ */ ReactEcs4.createElement(
+          UiEntity4,
+          {
+            uiTransform: {
+              width: N.borderWidth,
+              height: "100%"
+            },
+            uiBackground: { color: C.cyan }
+          }
+        ),
+        /* @__PURE__ */ ReactEcs4.createElement(
+          UiEntity4,
+          {
+            uiTransform: {
+              flexGrow: 1,
+              height: "100%",
+              padding: { left: 10, right: 10 },
+              justifyContent: "center",
+              alignItems: "flex-start"
+            }
+          },
+          /* @__PURE__ */ ReactEcs4.createElement(
+            Label4,
+            {
+              value: notificationText,
+              fontSize: N.fontSize,
+              color: C.white,
+              textAlign: "middle-left"
+            }
+          )
+        ),
+        /* @__PURE__ */ ReactEcs4.createElement(
+          UiEntity4,
+          {
+            uiTransform: {
+              width: 5,
+              height: 5,
+              margin: { right: 10 }
+            },
+            uiBackground: { color: C.cyan }
+          }
+        )
+      )
     )
   );
 }
@@ -2822,11 +2838,11 @@ var AdminPanelUIModule = class {
     };
     /**
      * Get the React-ECS component for the admin panel
-     * Always renders NotificationBanner (for broadcasts), admin panel only for admins
+     * Always renders notification (scaled), admin panel only for admins
      */
     this.getComponent = () => {
       if (!this.isAdmin) {
-        return /* @__PURE__ */ ReactEcs5.createElement(NotificationBanner, null);
+        return this.renderScaledNotification();
       }
       const t = this.theme;
       const tabs = [];
@@ -2851,7 +2867,7 @@ var AdminPanelUIModule = class {
             positionType: "absolute"
           }
         },
-        /* @__PURE__ */ ReactEcs5.createElement(NotificationBanner, null),
+        this.renderScaledNotification(),
         /* @__PURE__ */ ReactEcs5.createElement(
           UiEntity5,
           {
@@ -3586,6 +3602,76 @@ var AdminPanelUIModule = class {
       this.stopStreamPolling();
     }
   }
+  /**
+   * Render a scaled notification banner
+   * Uses same layout as NotificationBanner but with scaled font size
+   */
+  renderScaledNotification() {
+    initNotificationSystem();
+    const state = getNotificationState();
+    if (!state.visible) return null;
+    const N2 = UI_DIMENSIONS.notification;
+    const colors = THEME.colors;
+    return /* @__PURE__ */ ReactEcs5.createElement(
+      UiEntity5,
+      {
+        uiTransform: {
+          positionType: "absolute",
+          position: { bottom: N2.bottom, left: 0, right: 0 },
+          height: this.s(N2.height),
+          justifyContent: "center",
+          alignItems: "center"
+        }
+      },
+      /* @__PURE__ */ ReactEcs5.createElement(
+        UiEntity5,
+        {
+          uiTransform: {
+            width: this.s(N2.width),
+            height: this.s(N2.height),
+            flexDirection: "row",
+            alignItems: "center"
+          },
+          uiBackground: { color: colors.panel }
+        },
+        /* @__PURE__ */ ReactEcs5.createElement(
+          UiEntity5,
+          {
+            uiTransform: { width: N2.borderWidth, height: "100%" },
+            uiBackground: { color: colors.cyan }
+          }
+        ),
+        /* @__PURE__ */ ReactEcs5.createElement(
+          UiEntity5,
+          {
+            uiTransform: {
+              flexGrow: 1,
+              height: "100%",
+              padding: { left: 10, right: 10 },
+              justifyContent: "center",
+              alignItems: "flex-start"
+            }
+          },
+          /* @__PURE__ */ ReactEcs5.createElement(
+            Label5,
+            {
+              value: state.text,
+              fontSize: this.s(N2.fontSize),
+              color: colors.white,
+              textAlign: "middle-left"
+            }
+          )
+        ),
+        /* @__PURE__ */ ReactEcs5.createElement(
+          UiEntity5,
+          {
+            uiTransform: { width: 5, height: 5, margin: { right: 10 } },
+            uiBackground: { color: colors.cyan }
+          }
+        )
+      )
+    );
+  }
 };
 
 // src/StaticTVClient.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thestatic-tv/dcl-sdk",
-  "version": "2.5.11",
+  "version": "2.5.14",
   "description": "Connect your Decentraland scene to thestatic.tv - full channel lineup, metrics tracking, and interactions",
   "main": "dist/index.js",
   "module": "dist/index.mjs",