@thestatic-tv/dcl-sdk 2.5.10 → 2.5.11

package/dist/index.mjs

@@ -625,6 +625,17 @@ var UI_DIMENSIONS = {
     buttonHeightSmall: 30,
     inputHeight: 36
   },
+  // Notification banner - next to DCL native chat panel
+  notification: {
+    width: 340,
+    height: 44,
+    bottom: 55,
+    // Above the chat input area
+    left: 400,
+    // Right of DCL native chat (chat is ~380px wide)
+    borderWidth: 2,
+    fontSize: 14
+  },
   // Shared
   closeButton: {
     size: 40,
@@ -2252,12 +2263,131 @@ var ChatUIModule = class {
 };
 
 // src/ui/admin-panel-ui.tsx
-import ReactEcs4, { UiEntity as UiEntity4, Button as Button3, Label as Label4, Input as Input4 } from "@dcl/sdk/react-ecs";
+import ReactEcs5, { UiEntity as UiEntity5, Button as Button3, Label as Label5, Input as Input4 } from "@dcl/sdk/react-ecs";
 import { Color4 as Color45, Vector3 } from "@dcl/sdk/math";
 import { getPlayer as getPlayer2 } from "@dcl/sdk/players";
 import { movePlayerTo, openExternalUrl as openExternalUrl3 } from "~system/RestrictedActions";
+
+// src/ui/ui-renderer.tsx
+import ReactEcs4, { ReactEcsRenderer, UiEntity as UiEntity4, Label as Label4 } from "@dcl/sdk/react-ecs";
+import { engine as engine2 } from "@dcl/sdk/ecs";
+var notificationText = "";
+var notificationVisible = false;
+var notificationEndTime = 0;
+var notificationInitialized = false;
+var C = THEME.colors;
+var N = UI_DIMENSIONS.notification;
+function showNotification(message, durationMs = 5e3) {
+  notificationText = message;
+  notificationVisible = true;
+  notificationEndTime = Date.now() + durationMs;
+}
+function hideNotification() {
+  notificationVisible = false;
+}
+function initNotificationSystem() {
+  if (notificationInitialized) return;
+  notificationInitialized = true;
+  engine2.addSystem(() => {
+    if (notificationVisible && Date.now() > notificationEndTime) {
+      notificationVisible = false;
+    }
+  });
+}
+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 }
+      }
+    ),
+    /* @__PURE__ */ ReactEcs4.createElement(
+      UiEntity4,
+      {
+        uiTransform: {
+          flexGrow: 1,
+          height: "100%",
+          padding: { left: 12, right: 12 },
+          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: 6,
+          height: 6,
+          margin: { right: 12 }
+        },
+        uiBackground: { color: C.cyan }
+      }
+    )
+  );
+}
+function createStaticUI(client) {
+  initNotificationSystem();
+  return function StaticUI() {
+    const currentScale = client.uiScale;
+    const guideComponent = client.guideUI?.getComponent() ?? null;
+    const chatComponent = client.chatUI?.getComponent() ?? null;
+    const adminComponent = client.adminPanel?.getComponent() ?? null;
+    return /* @__PURE__ */ ReactEcs4.createElement(
+      UiEntity4,
+      {
+        key: `static-ui-root-${currentScale}`,
+        uiTransform: {
+          width: "100%",
+          height: "100%",
+          positionType: "absolute",
+          flexDirection: "column",
+          alignItems: "center"
+        }
+      },
+      /* @__PURE__ */ ReactEcs4.createElement(NotificationBanner, null),
+      guideComponent,
+      chatComponent,
+      adminComponent
+    );
+  };
+}
+function setupStaticUI(client) {
+  const StaticUI = createStaticUI(client);
+  ReactEcsRenderer.setUiRenderer(StaticUI);
+}
+
+// src/ui/admin-panel-ui.tsx
 var BAN_KICK_POSITION = Vector3.create(16, -50, 16);
-var C = {
+var C2 = {
   bg: Color45.create(0.08, 0.08, 0.12, 0.98),
   header: Color45.create(0.9, 0.15, 0.15, 1),
   tabActive: Color45.create(0, 0.7, 0.7, 1),
@@ -2298,6 +2428,8 @@ var AdminPanelUIModule = class {
     this.streamControlling = false;
     this.streamControlStatus = "";
     this.pollIntervalId = null;
+    this.commandPollIntervalId = null;
+    this.lastCommandTimestamp = 0;
     this.trialClaiming = false;
     this.trialClaimError = "";
     // Mod tab state
@@ -2309,22 +2441,22 @@ var AdminPanelUIModule = class {
     this.modStatus = "";
     this.modsFetched = false;
     // --- UI Components ---
-    this.SectionHead = ({ label, color }) => /* @__PURE__ */ ReactEcs4.createElement(
-      UiEntity4,
+    this.SectionHead = ({ label, color }) => /* @__PURE__ */ ReactEcs5.createElement(
+      UiEntity5,
       {
         uiTransform: { width: "100%", height: this.s(UI_DIMENSIONS.admin.sectionHeadHeight), margin: { bottom: 8 }, padding: { left: 10 }, alignItems: "center" },
         uiBackground: { color: Color45.create(color.r * 0.3, color.g * 0.3, color.b * 0.3, 0.5) }
       },
-      /* @__PURE__ */ ReactEcs4.createElement(Label4, { value: label, fontSize: this.theme.sectionHead, color })
+      /* @__PURE__ */ ReactEcs5.createElement(Label5, { value: label, fontSize: this.theme.sectionHead, color })
     );
-    this.TabBtn = ({ label, tab }) => /* @__PURE__ */ ReactEcs4.createElement(
+    this.TabBtn = ({ label, tab }) => /* @__PURE__ */ ReactEcs5.createElement(
       Button3,
       {
         uiTransform: { flexGrow: 1, height: this.s(UI_DIMENSIONS.admin.tabHeight), justifyContent: "center", alignItems: "center" },
-        uiBackground: { color: this.activeTab === tab ? C.tabActive : C.tabInactive },
+        uiBackground: { color: this.activeTab === tab ? C2.tabActive : C2.tabInactive },
         value: label,
         fontSize: this.theme.tabButton,
-        color: this.activeTab === tab ? Color45.Black() : C.text,
+        color: this.activeTab === tab ? Color45.Black() : C2.text,
         textAlign: "middle-center",
         onMouseDown: () => this.setActiveTab(tab)
       }
@@ -2334,365 +2466,368 @@ var AdminPanelUIModule = class {
         this.fetchStreamData();
       }
       const t = this.theme;
-      return /* @__PURE__ */ ReactEcs4.createElement(UiEntity4, { uiTransform: { flexDirection: "column", width: "100%", padding: 10 } }, !this.streamData?.hasChannel && /* @__PURE__ */ ReactEcs4.createElement(UiEntity4, { uiTransform: { flexDirection: "column", margin: { bottom: 14 } } }, /* @__PURE__ */ ReactEcs4.createElement(this.SectionHead, { label: "LIVE STREAM", color: C.btn }), /* @__PURE__ */ ReactEcs4.createElement(Label4, { value: "No streaming channel linked", fontSize: t.labelSmall, color: C.textDim, uiTransform: { margin: { bottom: 8 } } }), this.isOwner && /* @__PURE__ */ ReactEcs4.createElement(UiEntity4, { uiTransform: { flexDirection: "column" } }, this.streamData?.trialAvailable && /* @__PURE__ */ ReactEcs4.createElement(UiEntity4, { uiTransform: { flexDirection: "column", margin: { bottom: 10 } } }, /* @__PURE__ */ ReactEcs4.createElement(
+      return /* @__PURE__ */ ReactEcs5.createElement(UiEntity5, { uiTransform: { flexDirection: "column", width: "100%", padding: 10 } }, !this.streamData?.hasChannel && /* @__PURE__ */ ReactEcs5.createElement(UiEntity5, { uiTransform: { flexDirection: "column", margin: { bottom: 14 } } }, /* @__PURE__ */ ReactEcs5.createElement(this.SectionHead, { label: "LIVE STREAM", color: C2.btn }), /* @__PURE__ */ ReactEcs5.createElement(Label5, { value: "No streaming channel linked", fontSize: t.labelSmall, color: C2.textDim, uiTransform: { margin: { bottom: 8 } } }), this.isOwner && /* @__PURE__ */ ReactEcs5.createElement(UiEntity5, { uiTransform: { flexDirection: "column" } }, this.streamData?.trialAvailable && /* @__PURE__ */ ReactEcs5.createElement(UiEntity5, { uiTransform: { flexDirection: "column", margin: { bottom: 10 } } }, /* @__PURE__ */ ReactEcs5.createElement(
         Button3,
         {
           uiTransform: { width: this.s(200), height: this.s(UI_DIMENSIONS.admin.buttonHeight), margin: { bottom: 6 } },
-          uiBackground: { color: this.trialClaiming ? C.btn : C.green },
+          uiBackground: { color: this.trialClaiming ? C2.btn : C2.green },
           value: this.trialClaiming ? "Claiming..." : "Start Free 4-Hour Trial",
           fontSize: t.button,
-          color: C.text,
+          color: C2.text,
           onMouseDown: () => this.claimTrial()
         }
-      ), this.trialClaimError && /* @__PURE__ */ ReactEcs4.createElement(Label4, { value: this.trialClaimError, fontSize: t.status, color: C.red }), /* @__PURE__ */ ReactEcs4.createElement(Label4, { value: "One-time trial \u2022 4 hours of streaming", fontSize: t.labelSmall, color: C.textDim, uiTransform: { margin: { top: 4 } } })), !this.streamData?.trialAvailable && /* @__PURE__ */ ReactEcs4.createElement(UiEntity4, { uiTransform: { flexDirection: "column" } }, /* @__PURE__ */ ReactEcs4.createElement(
+      ), this.trialClaimError && /* @__PURE__ */ ReactEcs5.createElement(Label5, { value: this.trialClaimError, fontSize: t.status, color: C2.red }), /* @__PURE__ */ ReactEcs5.createElement(Label5, { value: "One-time trial \u2022 4 hours of streaming", fontSize: t.labelSmall, color: C2.textDim, uiTransform: { margin: { top: 4 } } })), !this.streamData?.trialAvailable && /* @__PURE__ */ ReactEcs5.createElement(UiEntity5, { uiTransform: { flexDirection: "column" } }, /* @__PURE__ */ ReactEcs5.createElement(
         Button3,
         {
           uiTransform: { width: this.s(170), height: this.s(UI_DIMENSIONS.admin.buttonHeight), margin: { bottom: 6 } },
-          uiBackground: { color: this.channelCreating ? C.btn : C.cyan },
+          uiBackground: { color: this.channelCreating ? C2.btn : C2.cyan },
           value: this.channelCreating ? "Creating..." : "+ Create Channel",
           fontSize: t.button,
-          color: C.text,
+          color: C2.text,
           onMouseDown: () => this.createChannel()
         }
-      ), this.channelCreateError && /* @__PURE__ */ ReactEcs4.createElement(Label4, { value: this.channelCreateError, fontSize: t.status, color: C.red }), /* @__PURE__ */ ReactEcs4.createElement(Label4, { value: "Relay tier \u2022 $25/mo \u2022 8 hours streaming", fontSize: t.labelSmall, color: C.textDim, uiTransform: { margin: { top: 4 } } })))), this.streamData?.hasChannel && this.isOwner && /* @__PURE__ */ ReactEcs4.createElement(UiEntity4, { uiTransform: { flexDirection: "column", margin: { bottom: 14 } } }, /* @__PURE__ */ ReactEcs4.createElement(this.SectionHead, { label: this.streamData.isLive ? "LIVE STREAM" : "STREAM SETTINGS", color: this.streamData.isLive ? C.red : C.yellow }), /* @__PURE__ */ ReactEcs4.createElement(UiEntity4, { uiTransform: { flexDirection: "row", alignItems: "center", margin: { bottom: 8 } } }, /* @__PURE__ */ ReactEcs4.createElement(
-        Label4,
+      ), this.channelCreateError && /* @__PURE__ */ ReactEcs5.createElement(Label5, { value: this.channelCreateError, fontSize: t.status, color: C2.red }), /* @__PURE__ */ ReactEcs5.createElement(Label5, { value: "Relay tier \u2022 $25/mo \u2022 8 hours streaming", fontSize: t.labelSmall, color: C2.textDim, uiTransform: { margin: { top: 4 } } })))), this.streamData?.hasChannel && this.isOwner && /* @__PURE__ */ ReactEcs5.createElement(UiEntity5, { uiTransform: { flexDirection: "column", margin: { bottom: 14 } } }, /* @__PURE__ */ ReactEcs5.createElement(this.SectionHead, { label: this.streamData.isLive ? "LIVE STREAM" : "STREAM SETTINGS", color: this.streamData.isLive ? C2.red : C2.yellow }), /* @__PURE__ */ ReactEcs5.createElement(UiEntity5, { uiTransform: { flexDirection: "row", alignItems: "center", margin: { bottom: 8 } } }, /* @__PURE__ */ ReactEcs5.createElement(
+        Label5,
         {
           value: this.streamData.isLive ? `LIVE \u2022 ${this.streamData.currentViewers || 0} viewers` : "OFFLINE",
           fontSize: t.label,
-          color: this.streamData.isLive ? C.red : C.textDim
+          color: this.streamData.isLive ? C2.red : C2.textDim
         }
-      ), /* @__PURE__ */ ReactEcs4.createElement(Label4, { value: ` \u2022 ${this.streamData.tier?.toUpperCase() || "RELAY"}`, fontSize: t.labelSmall, color: C.cyan }), /* @__PURE__ */ ReactEcs4.createElement(Label4, { value: ` \u2022 ${this.streamData.sparksBalance || 0} Sparks`, fontSize: t.labelSmall, color: C.textDim })), /* @__PURE__ */ ReactEcs4.createElement(
-        Label4,
+      ), /* @__PURE__ */ ReactEcs5.createElement(Label5, { value: ` \u2022 ${this.streamData.tier?.toUpperCase() || "RELAY"}`, fontSize: t.labelSmall, color: C2.cyan }), /* @__PURE__ */ ReactEcs5.createElement(Label5, { value: ` \u2022 ${this.streamData.sparksBalance || 0} Sparks`, fontSize: t.labelSmall, color: C2.textDim })), /* @__PURE__ */ ReactEcs5.createElement(
+        Label5,
         {
           value: `Channel: ${this.streamData.channelName || this.streamData.channelId}`,
           fontSize: t.labelSmall,
-          color: C.textDim,
+          color: C2.textDim,
           uiTransform: { margin: { bottom: 10 } }
         }
-      ), /* @__PURE__ */ ReactEcs4.createElement(UiEntity4, { uiTransform: { flexDirection: "column", margin: { bottom: 6 } } }, /* @__PURE__ */ ReactEcs4.createElement(Label4, { value: "RTMP Server:", fontSize: t.labelSmall, color: C.textDim }), /* @__PURE__ */ ReactEcs4.createElement(
-        Label4,
+      ), /* @__PURE__ */ ReactEcs5.createElement(UiEntity5, { uiTransform: { flexDirection: "column", margin: { bottom: 6 } } }, /* @__PURE__ */ ReactEcs5.createElement(Label5, { value: "RTMP Server:", fontSize: t.labelSmall, color: C2.textDim }), /* @__PURE__ */ ReactEcs5.createElement(
+        Label5,
         {
           value: this.streamData.rtmpUrl || "Loading...",
           fontSize: t.label,
-          color: this.streamData.rtmpUrl ? C.text : C.textDim,
+          color: this.streamData.rtmpUrl ? C2.text : C2.textDim,
           uiTransform: { margin: { left: 6 } }
         }
-      )), /* @__PURE__ */ ReactEcs4.createElement(UiEntity4, { uiTransform: { flexDirection: "column", margin: { bottom: 6 } } }, /* @__PURE__ */ ReactEcs4.createElement(Label4, { value: "Stream Key:", fontSize: t.labelSmall, color: C.textDim }), /* @__PURE__ */ ReactEcs4.createElement(
-        Label4,
+      )), /* @__PURE__ */ ReactEcs5.createElement(UiEntity5, { uiTransform: { flexDirection: "column", margin: { bottom: 6 } } }, /* @__PURE__ */ ReactEcs5.createElement(Label5, { value: "Stream Key:", fontSize: t.labelSmall, color: C2.textDim }), /* @__PURE__ */ ReactEcs5.createElement(
+        Label5,
         {
           value: this.streamData.streamKey || "Loading...",
           fontSize: t.label,
-          color: this.streamData.streamKey ? C.cyan : C.textDim,
+          color: this.streamData.streamKey ? C2.cyan : C2.textDim,
           uiTransform: { margin: { left: 6 } }
         }
-      )), /* @__PURE__ */ ReactEcs4.createElement(UiEntity4, { uiTransform: { flexDirection: "column", margin: { bottom: 10 } } }, /* @__PURE__ */ ReactEcs4.createElement(Label4, { value: "HLS Playback:", fontSize: t.labelSmall, color: C.textDim }), /* @__PURE__ */ ReactEcs4.createElement(
-        Label4,
+      )), /* @__PURE__ */ ReactEcs5.createElement(UiEntity5, { uiTransform: { flexDirection: "column", margin: { bottom: 10 } } }, /* @__PURE__ */ ReactEcs5.createElement(Label5, { value: "HLS Playback:", fontSize: t.labelSmall, color: C2.textDim }), /* @__PURE__ */ ReactEcs5.createElement(
+        Label5,
         {
           value: this.streamData.hlsUrl || "Not available",
           fontSize: t.label,
-          color: this.streamData.hlsUrl ? C.green : C.textDim,
+          color: this.streamData.hlsUrl ? C2.green : C2.textDim,
           uiTransform: { margin: { left: 6 } }
         }
-      )), /* @__PURE__ */ ReactEcs4.createElement(UiEntity4, { uiTransform: { flexDirection: "row", flexWrap: "wrap", margin: { bottom: 6 } } }, !this.streamData.isLive && /* @__PURE__ */ ReactEcs4.createElement(
+      )), /* @__PURE__ */ ReactEcs5.createElement(UiEntity5, { uiTransform: { flexDirection: "row", flexWrap: "wrap", margin: { bottom: 6 } } }, !this.streamData.isLive && /* @__PURE__ */ ReactEcs5.createElement(
         Button3,
         {
           uiTransform: { width: this.s(110), height: this.s(UI_DIMENSIONS.admin.buttonHeightSmall), margin: 4 },
-          uiBackground: { color: this.streamControlling ? C.btn : C.green },
+          uiBackground: { color: this.streamControlling ? C2.btn : C2.green },
           value: this.streamControlling ? "Starting..." : "Start Stream",
           fontSize: t.buttonSmall,
-          color: C.text,
+          color: C2.text,
           onMouseDown: () => this.startStream()
         }
-      ), this.streamData.isLive && /* @__PURE__ */ ReactEcs4.createElement(
+      ), this.streamData.isLive && /* @__PURE__ */ ReactEcs5.createElement(
         Button3,
         {
           uiTransform: { width: this.s(110), height: this.s(UI_DIMENSIONS.admin.buttonHeightSmall), margin: 4 },
-          uiBackground: { color: this.streamControlling ? C.btn : C.red },
+          uiBackground: { color: this.streamControlling ? C2.btn : C2.red },
           value: this.streamControlling ? "Stopping..." : "Stop Stream",
           fontSize: t.buttonSmall,
-          color: C.text,
+          color: C2.text,
           onMouseDown: () => this.stopStream()
         }
-      ), this.streamData.isLive && this.streamData.hlsUrl && /* @__PURE__ */ ReactEcs4.createElement(
+      ), this.streamData.isLive && this.streamData.hlsUrl && /* @__PURE__ */ ReactEcs5.createElement(
         Button3,
         {
           uiTransform: { width: this.s(100), height: this.s(UI_DIMENSIONS.admin.buttonHeightSmall), margin: 4 },
-          uiBackground: { color: C.cyan },
+          uiBackground: { color: C2.cyan },
           value: "Play on Screen",
           fontSize: t.buttonSmall,
-          color: C.text,
+          color: C2.text,
           onMouseDown: () => this.config.onVideoPlay?.(this.streamData.hlsUrl)
         }
-      )), /* @__PURE__ */ ReactEcs4.createElement(UiEntity4, { uiTransform: { flexDirection: "row", flexWrap: "wrap", margin: { bottom: 6 } } }, /* @__PURE__ */ ReactEcs4.createElement(
+      )), /* @__PURE__ */ ReactEcs5.createElement(UiEntity5, { uiTransform: { flexDirection: "row", flexWrap: "wrap", margin: { bottom: 6 } } }, /* @__PURE__ */ ReactEcs5.createElement(
         Button3,
         {
           uiTransform: { width: this.s(80), height: this.s(UI_DIMENSIONS.admin.buttonHeightSmall), margin: 4 },
-          uiBackground: { color: C.btn },
+          uiBackground: { color: C2.btn },
           value: "Refresh",
           fontSize: t.buttonSmall,
-          color: C.text,
+          color: C2.text,
           onMouseDown: () => this.refreshStreamStatus()
         }
-      ), /* @__PURE__ */ ReactEcs4.createElement(
+      ), /* @__PURE__ */ ReactEcs5.createElement(
         Button3,
         {
           uiTransform: { width: this.s(95), height: this.s(UI_DIMENSIONS.admin.buttonHeightSmall), margin: 4 },
-          uiBackground: { color: this.keyRotating ? C.btn : C.yellow },
+          uiBackground: { color: this.keyRotating ? C2.btn : C2.yellow },
           value: this.keyRotating ? "..." : "Rotate Key",
           fontSize: t.buttonSmall,
-          color: C.text,
+          color: C2.text,
           onMouseDown: () => this.rotateStreamKey()
         }
-      ), !this.streamData.isLive && /* @__PURE__ */ ReactEcs4.createElement(
+      ), !this.streamData.isLive && /* @__PURE__ */ ReactEcs5.createElement(
         Button3,
         {
           uiTransform: { width: this.s(70), height: this.s(UI_DIMENSIONS.admin.buttonHeightSmall), margin: 4 },
-          uiBackground: { color: this.channelDeleting ? C.btn : C.red },
+          uiBackground: { color: this.channelDeleting ? C2.btn : C2.red },
           value: this.channelDeleting ? "..." : "Delete",
           fontSize: t.buttonSmall,
-          color: C.text,
+          color: C2.text,
           onMouseDown: () => this.deleteChannel()
         }
-      )), this.streamControlStatus === "started" && /* @__PURE__ */ ReactEcs4.createElement(Label4, { value: "Stream started - begin broadcasting in OBS", fontSize: t.status, color: C.green }), this.streamControlStatus === "stopped" && /* @__PURE__ */ ReactEcs4.createElement(Label4, { value: "Stream stopped", fontSize: t.status, color: C.textDim }), this.keyRotateStatus === "success" && /* @__PURE__ */ ReactEcs4.createElement(Label4, { value: "Key rotated! Update OBS", fontSize: t.status, color: C.green }), this.keyRotateStatus === "error" && /* @__PURE__ */ ReactEcs4.createElement(Label4, { value: "Failed to rotate key", fontSize: t.status, color: C.red }), this.channelDeleteError && /* @__PURE__ */ ReactEcs4.createElement(Label4, { value: this.channelDeleteError, fontSize: t.status, color: C.red }), this.streamControlStatus === "error" && /* @__PURE__ */ ReactEcs4.createElement(Label4, { value: "Stream control failed", fontSize: t.status, color: C.red })), /* @__PURE__ */ ReactEcs4.createElement(this.SectionHead, { label: "PLAY NOW", color: C.orange }), /* @__PURE__ */ ReactEcs4.createElement(UiEntity4, { uiTransform: { flexDirection: "row", alignItems: "center", margin: { bottom: 14 } } }, /* @__PURE__ */ ReactEcs4.createElement(
+      )), this.streamControlStatus === "started" && /* @__PURE__ */ ReactEcs5.createElement(Label5, { value: "Stream started - begin broadcasting in OBS", fontSize: t.status, color: C2.green }), this.streamControlStatus === "stopped" && /* @__PURE__ */ ReactEcs5.createElement(Label5, { value: "Stream stopped", fontSize: t.status, color: C2.textDim }), this.keyRotateStatus === "success" && /* @__PURE__ */ ReactEcs5.createElement(Label5, { value: "Key rotated! Update OBS", fontSize: t.status, color: C2.green }), this.keyRotateStatus === "error" && /* @__PURE__ */ ReactEcs5.createElement(Label5, { value: "Failed to rotate key", fontSize: t.status, color: C2.red }), this.channelDeleteError && /* @__PURE__ */ ReactEcs5.createElement(Label5, { value: this.channelDeleteError, fontSize: t.status, color: C2.red }), this.streamControlStatus === "error" && /* @__PURE__ */ ReactEcs5.createElement(Label5, { value: "Stream control failed", fontSize: t.status, color: C2.red })), /* @__PURE__ */ ReactEcs5.createElement(this.SectionHead, { label: "PLAY NOW", color: C2.orange }), /* @__PURE__ */ ReactEcs5.createElement(UiEntity5, { uiTransform: { flexDirection: "row", alignItems: "center", margin: { bottom: 14 } } }, /* @__PURE__ */ ReactEcs5.createElement(
         Input4,
         {
           uiTransform: { width: this.s(230), height: this.s(UI_DIMENSIONS.admin.inputHeight) },
           uiBackground: { color: Color45.create(0.15, 0.15, 0.2, 1) },
           placeholder: "Video URL...",
-          placeholderColor: C.textDim,
-          color: C.text,
+          placeholderColor: C2.textDim,
+          color: C2.text,
           fontSize: t.input,
           value: this.customVideoUrl,
           onChange: (val) => {
             this.customVideoUrl = val;
           }
         }
-      ), /* @__PURE__ */ ReactEcs4.createElement(
+      ), /* @__PURE__ */ ReactEcs5.createElement(
         Button3,
         {
           uiTransform: { width: this.s(75), height: this.s(UI_DIMENSIONS.admin.inputHeight), margin: { left: 8 } },
-          uiBackground: { color: C.green },
+          uiBackground: { color: C2.green },
           value: "Play",
           fontSize: t.button,
-          color: C.text,
+          color: C2.text,
           onMouseDown: () => {
             if (this.customVideoUrl) this.config.onVideoPlay?.(this.customVideoUrl);
           }
         }
-      ), /* @__PURE__ */ ReactEcs4.createElement(
+      ), /* @__PURE__ */ ReactEcs5.createElement(
         Button3,
         {
           uiTransform: { width: this.s(65), height: this.s(UI_DIMENSIONS.admin.inputHeight), margin: { left: 6 } },
-          uiBackground: { color: C.btn },
+          uiBackground: { color: C2.btn },
           value: "Clear",
           fontSize: t.button,
-          color: C.text,
+          color: C2.text,
           onMouseDown: () => {
             this.customVideoUrl = "";
           }
         }
-      )), /* @__PURE__ */ ReactEcs4.createElement(this.SectionHead, { label: "PLAYBACK", color: C.green }), /* @__PURE__ */ ReactEcs4.createElement(UiEntity4, { uiTransform: { flexDirection: "row", flexWrap: "wrap", margin: { bottom: 14 } } }, /* @__PURE__ */ ReactEcs4.createElement(
+      )), /* @__PURE__ */ ReactEcs5.createElement(this.SectionHead, { label: "PLAYBACK", color: C2.green }), /* @__PURE__ */ ReactEcs5.createElement(UiEntity5, { uiTransform: { flexDirection: "row", flexWrap: "wrap", margin: { bottom: 14 } } }, /* @__PURE__ */ ReactEcs5.createElement(
         Button3,
         {
           uiTransform: { width: this.s(75), height: this.s(UI_DIMENSIONS.admin.buttonHeightSmall), margin: 4 },
-          uiBackground: { color: C.green },
+          uiBackground: { color: C2.green },
           value: "Play",
           fontSize: t.button,
-          color: C.text,
+          color: C2.text,
           onMouseDown: () => this.config.onCommand?.("videoPlay", { playing: true })
         }
-      ), /* @__PURE__ */ ReactEcs4.createElement(
+      ), /* @__PURE__ */ ReactEcs5.createElement(
         Button3,
         {
           uiTransform: { width: this.s(75), height: this.s(UI_DIMENSIONS.admin.buttonHeightSmall), margin: 4 },
-          uiBackground: { color: C.red },
+          uiBackground: { color: C2.red },
           value: "Stop",
           fontSize: t.button,
-          color: C.text,
+          color: C2.text,
           onMouseDown: () => this.config.onVideoStop?.()
         }
-      ), /* @__PURE__ */ ReactEcs4.createElement(
+      ), /* @__PURE__ */ ReactEcs5.createElement(
         Button3,
         {
           uiTransform: { width: this.s(100), height: this.s(UI_DIMENSIONS.admin.buttonHeightSmall), margin: 4 },
-          uiBackground: { color: C.btn },
+          uiBackground: { color: C2.btn },
           value: "Reset Default",
           fontSize: t.buttonSmall,
-          color: C.text,
+          color: C2.text,
           onMouseDown: () => this.config.onCommand?.("videoClear", {})
         }
-      )), /* @__PURE__ */ ReactEcs4.createElement(this.SectionHead, { label: "VIDEO SLOTS", color: C.cyan }), /* @__PURE__ */ ReactEcs4.createElement(UiEntity4, { uiTransform: { flexDirection: "row", flexWrap: "wrap", margin: { bottom: 10 } } }, /* @__PURE__ */ ReactEcs4.createElement(Button3, { uiTransform: { width: this.s(70), height: this.s(UI_DIMENSIONS.admin.buttonHeightSmall), margin: 4 }, uiBackground: { color: C.cyan }, value: "Play 1", fontSize: t.button, color: C.text, onMouseDown: () => this.playSlot("slot1") }), /* @__PURE__ */ ReactEcs4.createElement(Button3, { uiTransform: { width: this.s(70), height: this.s(UI_DIMENSIONS.admin.buttonHeightSmall), margin: 4 }, uiBackground: { color: C.cyan }, value: "Play 2", fontSize: t.button, color: C.text, onMouseDown: () => this.playSlot("slot2") }), /* @__PURE__ */ ReactEcs4.createElement(Button3, { uiTransform: { width: this.s(70), height: this.s(UI_DIMENSIONS.admin.buttonHeightSmall), margin: 4 }, uiBackground: { color: C.cyan }, value: "Play 3", fontSize: t.button, color: C.text, onMouseDown: () => this.playSlot("slot3") }), /* @__PURE__ */ ReactEcs4.createElement(Button3, { uiTransform: { width: this.s(70), height: this.s(UI_DIMENSIONS.admin.buttonHeightSmall), margin: 4 }, uiBackground: { color: C.cyan }, value: "Play 4", fontSize: t.button, color: C.text, onMouseDown: () => this.playSlot("slot4") }), /* @__PURE__ */ ReactEcs4.createElement(Button3, { uiTransform: { width: this.s(70), height: this.s(UI_DIMENSIONS.admin.buttonHeightSmall), margin: 4 }, uiBackground: { color: C.cyan }, value: "Play 5", fontSize: t.button, color: C.text, onMouseDown: () => this.playSlot("slot5") })), /* @__PURE__ */ ReactEcs4.createElement(
+      )), /* @__PURE__ */ ReactEcs5.createElement(this.SectionHead, { label: "VIDEO SLOTS", color: C2.cyan }), /* @__PURE__ */ ReactEcs5.createElement(UiEntity5, { uiTransform: { flexDirection: "row", flexWrap: "wrap", margin: { bottom: 10 } } }, /* @__PURE__ */ ReactEcs5.createElement(Button3, { uiTransform: { width: this.s(70), height: this.s(UI_DIMENSIONS.admin.buttonHeightSmall), margin: 4 }, uiBackground: { color: C2.cyan }, value: "Play 1", fontSize: t.button, color: C2.text, onMouseDown: () => this.playSlot("slot1") }), /* @__PURE__ */ ReactEcs5.createElement(Button3, { uiTransform: { width: this.s(70), height: this.s(UI_DIMENSIONS.admin.buttonHeightSmall), margin: 4 }, uiBackground: { color: C2.cyan }, value: "Play 2", fontSize: t.button, color: C2.text, onMouseDown: () => this.playSlot("slot2") }), /* @__PURE__ */ ReactEcs5.createElement(Button3, { uiTransform: { width: this.s(70), height: this.s(UI_DIMENSIONS.admin.buttonHeightSmall), margin: 4 }, uiBackground: { color: C2.cyan }, value: "Play 3", fontSize: t.button, color: C2.text, onMouseDown: () => this.playSlot("slot3") }), /* @__PURE__ */ ReactEcs5.createElement(Button3, { uiTransform: { width: this.s(70), height: this.s(UI_DIMENSIONS.admin.buttonHeightSmall), margin: 4 }, uiBackground: { color: C2.cyan }, value: "Play 4", fontSize: t.button, color: C2.text, onMouseDown: () => this.playSlot("slot4") }), /* @__PURE__ */ ReactEcs5.createElement(Button3, { uiTransform: { width: this.s(70), height: this.s(UI_DIMENSIONS.admin.buttonHeightSmall), margin: 4 }, uiBackground: { color: C2.cyan }, value: "Play 5", fontSize: t.button, color: C2.text, onMouseDown: () => this.playSlot("slot5") })), /* @__PURE__ */ ReactEcs5.createElement(
         Button3,
         {
           uiTransform: { height: this.s(24) },
           uiBackground: { color: Color45.create(0, 0, 0, 0) },
           value: "Edit slots at thestatic.tv",
           fontSize: t.labelSmall,
-          color: C.cyan,
+          color: C2.cyan,
           onMouseDown: () => openExternalUrl3({ url: this.config.footerLink || `https://thestatic.tv/scene/${this.config.sceneId}` })
         }
       ));
     };
     this.ModTab = () => {
       const t = this.theme;
-      return /* @__PURE__ */ ReactEcs4.createElement(UiEntity4, { uiTransform: { flexDirection: "column", width: "100%", padding: 10 } }, this.modStatus === "loading" && /* @__PURE__ */ ReactEcs4.createElement(Label4, { value: "Loading...", fontSize: t.status, color: C.yellow }), this.modStatus === "saved" && /* @__PURE__ */ ReactEcs4.createElement(Label4, { value: "Saved!", fontSize: t.status, color: C.green }), this.modStatus === "error" && /* @__PURE__ */ ReactEcs4.createElement(Label4, { value: "Error - check input", fontSize: t.status, color: C.red }), /* @__PURE__ */ ReactEcs4.createElement(this.SectionHead, { label: "BROADCAST", color: C.orange }), /* @__PURE__ */ ReactEcs4.createElement(UiEntity4, { uiTransform: { flexDirection: "row", alignItems: "center", margin: { bottom: 14 } } }, /* @__PURE__ */ ReactEcs4.createElement(
+      return /* @__PURE__ */ ReactEcs5.createElement(UiEntity5, { uiTransform: { flexDirection: "column", width: "100%", padding: 10 } }, this.modStatus === "loading" && /* @__PURE__ */ ReactEcs5.createElement(Label5, { value: "Loading...", fontSize: t.status, color: C2.yellow }), this.modStatus === "saved" && /* @__PURE__ */ ReactEcs5.createElement(Label5, { value: "Saved!", fontSize: t.status, color: C2.green }), this.modStatus === "error" && /* @__PURE__ */ ReactEcs5.createElement(Label5, { value: "Error - check input", fontSize: t.status, color: C2.red }), /* @__PURE__ */ ReactEcs5.createElement(this.SectionHead, { label: "BROADCAST", color: C2.orange }), /* @__PURE__ */ ReactEcs5.createElement(UiEntity5, { uiTransform: { flexDirection: "row", alignItems: "center", margin: { bottom: 14 } } }, /* @__PURE__ */ ReactEcs5.createElement(
         Input4,
         {
           uiTransform: { width: this.s(230), height: this.s(UI_DIMENSIONS.admin.inputHeight) },
           uiBackground: { color: Color45.create(0.15, 0.15, 0.2, 1) },
           placeholder: "Message to all players...",
-          placeholderColor: C.textDim,
-          color: C.text,
+          placeholderColor: C2.textDim,
+          color: C2.text,
           fontSize: t.input,
           value: this.broadcastText,
           onChange: (val) => {
             this.broadcastText = val;
           }
         }
-      ), /* @__PURE__ */ ReactEcs4.createElement(
+      ), /* @__PURE__ */ ReactEcs5.createElement(
         Button3,
         {
           uiTransform: { width: this.s(65), height: this.s(UI_DIMENSIONS.admin.inputHeight), margin: { left: 8 } },
-          uiBackground: { color: C.orange },
+          uiBackground: { color: C2.orange },
           value: "Send",
           fontSize: t.button,
-          color: C.text,
+          color: C2.text,
           onMouseDown: () => this.sendBroadcast()
         }
-      )), /* @__PURE__ */ ReactEcs4.createElement(this.SectionHead, { label: "CHAOS MODE", color: C.red }), /* @__PURE__ */ ReactEcs4.createElement(UiEntity4, { uiTransform: { flexDirection: "row", flexWrap: "wrap", margin: { bottom: 14 } } }, /* @__PURE__ */ ReactEcs4.createElement(
+      )), /* @__PURE__ */ ReactEcs5.createElement(this.SectionHead, { label: "CHAOS MODE", color: C2.red }), /* @__PURE__ */ ReactEcs5.createElement(UiEntity5, { uiTransform: { flexDirection: "row", flexWrap: "wrap", margin: { bottom: 14 } } }, /* @__PURE__ */ ReactEcs5.createElement(
         Button3,
         {
           uiTransform: { width: this.s(130), height: this.s(UI_DIMENSIONS.admin.buttonHeight), margin: 4 },
-          uiBackground: { color: C.red },
+          uiBackground: { color: C2.red },
           value: "KICK ALL",
           fontSize: t.button,
-          color: C.text,
+          color: C2.text,
           onMouseDown: () => {
             this.log("KICK ALL clicked");
             this.config.onCommand?.("kickAll", {});
           }
         }
-      )), /* @__PURE__ */ ReactEcs4.createElement(this.SectionHead, { label: "SCENE ADMINS", color: C.purple }), /* @__PURE__ */ ReactEcs4.createElement(UiEntity4, { uiTransform: { flexDirection: "column", margin: { bottom: 6 } } }, this.sceneAdmins.length === 0 && this.modStatus !== "loading" && /* @__PURE__ */ ReactEcs4.createElement(Label4, { value: "No scene admins", fontSize: t.labelSmall, color: C.textDim }), this.sceneAdmins.map((wallet, i) => /* @__PURE__ */ ReactEcs4.createElement(
-        UiEntity4,
+      )), /* @__PURE__ */ ReactEcs5.createElement(this.SectionHead, { label: "SCENE ADMINS", color: C2.purple }), /* @__PURE__ */ ReactEcs5.createElement(UiEntity5, { uiTransform: { flexDirection: "column", margin: { bottom: 6 } } }, this.sceneAdmins.length === 0 && this.modStatus !== "loading" && /* @__PURE__ */ ReactEcs5.createElement(Label5, { value: "No scene admins", fontSize: t.labelSmall, color: C2.textDim }), this.sceneAdmins.map((wallet, i) => /* @__PURE__ */ ReactEcs5.createElement(
+        UiEntity5,
         {
           key: `admin-${i}`,
           uiTransform: { flexDirection: "row", alignItems: "center", margin: { bottom: 5 }, width: "100%" }
         },
-        /* @__PURE__ */ ReactEcs4.createElement(
-          Label4,
+        /* @__PURE__ */ ReactEcs5.createElement(
+          Label5,
           {
             value: `${wallet.slice(0, 6)}...${wallet.slice(-4)}`,
             fontSize: t.label,
-            color: C.text,
+            color: C2.text,
             uiTransform: { width: this.s(130) }
           }
         ),
-        /* @__PURE__ */ ReactEcs4.createElement(
+        /* @__PURE__ */ ReactEcs5.createElement(
           Button3,
           {
             uiTransform: { width: this.s(70), height: this.s(28), margin: { left: 8 } },
-            uiBackground: { color: C.btn },
+            uiBackground: { color: C2.btn },
             value: "Remove",
             fontSize: t.buttonSmall,
-            color: C.text,
+            color: C2.text,
             onMouseDown: () => this.removeSceneAdmin(wallet)
           }
         )
-      ))), /* @__PURE__ */ ReactEcs4.createElement(UiEntity4, { uiTransform: { flexDirection: "row", alignItems: "center", margin: { bottom: 14 } } }, /* @__PURE__ */ ReactEcs4.createElement(
+      ))), /* @__PURE__ */ ReactEcs5.createElement(UiEntity5, { uiTransform: { flexDirection: "row", alignItems: "center", margin: { bottom: 14 } } }, /* @__PURE__ */ ReactEcs5.createElement(
         Input4,
         {
           uiTransform: { width: this.s(230), height: this.s(UI_DIMENSIONS.admin.inputHeight) },
           uiBackground: { color: Color45.create(0.15, 0.15, 0.2, 1) },
           placeholder: "0x... add admin",
-          placeholderColor: C.textDim,
-          color: C.text,
+          placeholderColor: C2.textDim,
+          color: C2.text,
           fontSize: t.input,
           value: this.newAdminWallet,
           onChange: (val) => {
             this.newAdminWallet = val;
           }
         }
-      ), /* @__PURE__ */ ReactEcs4.createElement(
+      ), /* @__PURE__ */ ReactEcs5.createElement(
         Button3,
         {
           uiTransform: { width: this.s(60), height: this.s(UI_DIMENSIONS.admin.inputHeight), margin: { left: 8 } },
-          uiBackground: { color: C.purple },
+          uiBackground: { color: C2.purple },
           value: "Add",
           fontSize: t.button,
-          color: C.text,
+          color: C2.text,
           onMouseDown: () => {
             if (this.newAdminWallet) this.addSceneAdmin(this.newAdminWallet);
           }
         }
-      )), /* @__PURE__ */ ReactEcs4.createElement(this.SectionHead, { label: "BANNED WALLETS", color: C.red }), /* @__PURE__ */ ReactEcs4.createElement(UiEntity4, { uiTransform: { flexDirection: "column", margin: { bottom: 6 } } }, this.bannedWallets.length === 0 && this.modStatus !== "loading" && /* @__PURE__ */ ReactEcs4.createElement(Label4, { value: "No banned wallets", fontSize: t.labelSmall, color: C.textDim }), this.bannedWallets.map((wallet, i) => /* @__PURE__ */ ReactEcs4.createElement(
-        UiEntity4,
+      )), /* @__PURE__ */ ReactEcs5.createElement(this.SectionHead, { label: "BANNED WALLETS", color: C2.red }), /* @__PURE__ */ ReactEcs5.createElement(UiEntity5, { uiTransform: { flexDirection: "column", margin: { bottom: 6 } } }, this.bannedWallets.length === 0 && this.modStatus !== "loading" && /* @__PURE__ */ ReactEcs5.createElement(Label5, { value: "No banned wallets", fontSize: t.labelSmall, color: C2.textDim }), this.bannedWallets.map((wallet, i) => /* @__PURE__ */ ReactEcs5.createElement(
+        UiEntity5,
         {
           key: `ban-${i}`,
           uiTransform: { flexDirection: "row", alignItems: "center", margin: { bottom: 5 }, width: "100%" }
         },
-        /* @__PURE__ */ ReactEcs4.createElement(
-          Label4,
+        /* @__PURE__ */ ReactEcs5.createElement(
+          Label5,
           {
             value: `${wallet.slice(0, 6)}...${wallet.slice(-4)}`,
             fontSize: t.label,
-            color: C.red,
+            color: C2.red,
             uiTransform: { width: this.s(130) }
           }
         ),
-        /* @__PURE__ */ ReactEcs4.createElement(
+        /* @__PURE__ */ ReactEcs5.createElement(
           Button3,
           {
             uiTransform: { width: this.s(70), height: this.s(28), margin: { left: 8 } },
-            uiBackground: { color: C.green },
+            uiBackground: { color: C2.green },
             value: "Unban",
             fontSize: t.buttonSmall,
-            color: C.text,
+            color: C2.text,
             onMouseDown: () => this.unbanWallet(wallet)
           }
         )
-      ))), /* @__PURE__ */ ReactEcs4.createElement(UiEntity4, { uiTransform: { flexDirection: "row", alignItems: "center", margin: { bottom: 10 } } }, /* @__PURE__ */ ReactEcs4.createElement(
+      ))), /* @__PURE__ */ ReactEcs5.createElement(UiEntity5, { uiTransform: { flexDirection: "row", alignItems: "center", margin: { bottom: 10 } } }, /* @__PURE__ */ ReactEcs5.createElement(
         Input4,
         {
           uiTransform: { width: this.s(230), height: this.s(UI_DIMENSIONS.admin.inputHeight) },
           uiBackground: { color: Color45.create(0.15, 0.15, 0.2, 1) },
           placeholder: "0x... ban wallet",
-          placeholderColor: C.textDim,
-          color: C.text,
+          placeholderColor: C2.textDim,
+          color: C2.text,
           fontSize: t.input,
           value: this.newBanWallet,
           onChange: (val) => {
             this.newBanWallet = val;
           }
         }
-      ), /* @__PURE__ */ ReactEcs4.createElement(
+      ), /* @__PURE__ */ ReactEcs5.createElement(
         Button3,
         {
           uiTransform: { width: this.s(60), height: this.s(UI_DIMENSIONS.admin.inputHeight), margin: { left: 8 } },
-          uiBackground: { color: C.red },
+          uiBackground: { color: C2.red },
           value: "Ban",
           fontSize: t.button,
-          color: C.text,
+          color: C2.text,
           onMouseDown: () => {
             if (this.newBanWallet) this.banWallet(this.newBanWallet);
           }
         }
-      )), /* @__PURE__ */ ReactEcs4.createElement(
+      )), /* @__PURE__ */ ReactEcs5.createElement(
         Button3,
         {
           uiTransform: { height: this.s(24) },
           uiBackground: { color: Color45.create(0, 0, 0, 0) },
           value: "Manage at thestatic.tv",
           fontSize: t.labelSmall,
-          color: C.cyan,
+          color: C2.cyan,
           onMouseDown: () => openExternalUrl3({ url: this.config.footerLink || `https://thestatic.tv/scene/${this.config.sceneId}` })
         }
       ));
     };
     /**
      * Get the React-ECS component for the admin panel
+     * Always renders NotificationBanner (for broadcasts), admin panel only for admins
      */
     this.getComponent = () => {
-      if (!this.isAdmin) return null;
+      if (!this.isAdmin) {
+        return /* @__PURE__ */ ReactEcs5.createElement(NotificationBanner, null);
+      }
       const t = this.theme;
       const tabs = [];
       if (this.config.sceneTabs && this.config.sceneTabs.length > 0) {
@@ -2707,8 +2842,8 @@ var AdminPanelUIModule = class {
       if (!tabs.find((tab) => tab.id === this.activeTab) && tabs.length > 0) {
         this.activeTab = tabs[0].id;
       }
-      return /* @__PURE__ */ ReactEcs4.createElement(
-        UiEntity4,
+      return /* @__PURE__ */ ReactEcs5.createElement(
+        UiEntity5,
         {
           uiTransform: {
             width: "100%",
@@ -2716,28 +2851,29 @@ var AdminPanelUIModule = class {
             positionType: "absolute"
           }
         },
-        /* @__PURE__ */ ReactEcs4.createElement(
-          UiEntity4,
+        /* @__PURE__ */ ReactEcs5.createElement(NotificationBanner, null),
+        /* @__PURE__ */ ReactEcs5.createElement(
+          UiEntity5,
           {
             uiTransform: {
               position: { right: 20 + this.s(100) + 10 + this.s(100) + 10, bottom: 10 },
               positionType: "absolute"
             }
           },
-          /* @__PURE__ */ ReactEcs4.createElement(
+          /* @__PURE__ */ ReactEcs5.createElement(
             Button3,
             {
               uiTransform: { width: this.s(100), height: this.s(45) },
-              uiBackground: { color: this.panelOpen ? C.btn : C.header },
+              uiBackground: { color: this.panelOpen ? C2.btn : C2.header },
               value: this.panelOpen ? "CLOSE" : "ADMIN",
               fontSize: this.s(14),
-              color: C.text,
+              color: C2.text,
               onMouseDown: () => this.toggle()
             }
           )
         ),
-        this.panelOpen && /* @__PURE__ */ ReactEcs4.createElement(
-          UiEntity4,
+        this.panelOpen && /* @__PURE__ */ ReactEcs5.createElement(
+          UiEntity5,
           {
             key: `admin-panel-${this.client.uiScale}`,
             uiTransform: {
@@ -2748,10 +2884,10 @@ var AdminPanelUIModule = class {
               positionType: "absolute",
               flexDirection: "column"
             },
-            uiBackground: { color: C.bg }
+            uiBackground: { color: C2.bg }
           },
-          /* @__PURE__ */ ReactEcs4.createElement(
-            UiEntity4,
+          /* @__PURE__ */ ReactEcs5.createElement(
+            UiEntity5,
             {
               uiTransform: {
                 width: "100%",
@@ -2761,10 +2897,10 @@ var AdminPanelUIModule = class {
                 flexDirection: "row",
                 padding: { left: 12, right: 8 }
               },
-              uiBackground: { color: C.header }
+              uiBackground: { color: C2.header }
             },
-            /* @__PURE__ */ ReactEcs4.createElement(Label4, { value: this.config.title || "ADMIN PANEL", fontSize: t.header, color: C.text }),
-            /* @__PURE__ */ ReactEcs4.createElement(
+            /* @__PURE__ */ ReactEcs5.createElement(Label5, { value: this.config.title || "ADMIN PANEL", fontSize: t.header, color: C2.text }),
+            /* @__PURE__ */ ReactEcs5.createElement(
               Button3,
               {
                 uiTransform: { width: this.s(28), height: this.s(28) },
@@ -2776,9 +2912,9 @@ var AdminPanelUIModule = class {
               }
             )
           ),
-          /* @__PURE__ */ ReactEcs4.createElement(UiEntity4, { uiTransform: { width: "100%", height: this.s(UI_DIMENSIONS.admin.tabHeight), flexDirection: "row" } }, tabs.map((tab) => /* @__PURE__ */ ReactEcs4.createElement(this.TabBtn, { label: tab.label, tab: tab.id }))),
-          /* @__PURE__ */ ReactEcs4.createElement(
-            UiEntity4,
+          /* @__PURE__ */ ReactEcs5.createElement(UiEntity5, { uiTransform: { width: "100%", height: this.s(UI_DIMENSIONS.admin.tabHeight), flexDirection: "row" } }, tabs.map((tab) => /* @__PURE__ */ ReactEcs5.createElement(this.TabBtn, { label: tab.label, tab: tab.id }))),
+          /* @__PURE__ */ ReactEcs5.createElement(
+            UiEntity5,
             {
               uiTransform: {
                 width: "100%",
@@ -2787,12 +2923,12 @@ var AdminPanelUIModule = class {
                 flexDirection: "column"
               }
             },
-            this.activeTab === "video" && /* @__PURE__ */ ReactEcs4.createElement(this.VideoTab, null),
-            this.activeTab === "mod" && this.isOwner && /* @__PURE__ */ ReactEcs4.createElement(this.ModTab, null),
+            this.activeTab === "video" && /* @__PURE__ */ ReactEcs5.createElement(this.VideoTab, null),
+            this.activeTab === "mod" && this.isOwner && /* @__PURE__ */ ReactEcs5.createElement(this.ModTab, null),
             this.config.sceneTabs?.map((tab) => this.activeTab === tab.id && tab.render())
           ),
-          /* @__PURE__ */ ReactEcs4.createElement(
-            UiEntity4,
+          /* @__PURE__ */ ReactEcs5.createElement(
+            UiEntity5,
             {
               uiTransform: {
                 width: "100%",
@@ -2800,16 +2936,16 @@ var AdminPanelUIModule = class {
                 justifyContent: "center",
                 alignItems: "center"
               },
-              uiBackground: { color: C.section }
+              uiBackground: { color: C2.section }
             },
-            /* @__PURE__ */ ReactEcs4.createElement(
+            /* @__PURE__ */ ReactEcs5.createElement(
               Button3,
               {
                 uiTransform: { height: this.s(24) },
                 uiBackground: { color: Color45.create(0, 0, 0, 0) },
                 value: `thestatic.tv/scene/${this.config.sceneId}`,
                 fontSize: t.labelSmall,
-                color: C.cyan,
+                color: C2.cyan,
                 onMouseDown: () => openExternalUrl3({ url: this.config.footerLink || `https://thestatic.tv/scene/${this.config.sceneId}` })
               }
             )
@@ -2832,7 +2968,7 @@ var AdminPanelUIModule = class {
     };
     this.baseUrl = client.getBaseUrl();
     if (config.headerColor) {
-      C.header = Color45.create(
+      C2.header = Color45.create(
         config.headerColor.r,
         config.headerColor.g,
         config.headerColor.b,
@@ -2860,6 +2996,7 @@ var AdminPanelUIModule = class {
     await this.checkAdminStatus();
     await this.fetchVideoState();
     this.autoPlayDefault();
+    this.startCommandPolling();
     this.log("Initialized");
   }
   /**
@@ -2965,6 +3102,61 @@ var AdminPanelUIModule = class {
       this.log("Stream polling stopped");
     }
   }
+  // --- Command Polling (receives broadcasts from website) ---
+  startCommandPolling() {
+    if (this.commandPollIntervalId !== null) return;
+    this.commandPollIntervalId = dclSetInterval(() => {
+      this.pollCommands();
+    }, 5e3);
+    this.pollCommands();
+    this.log("Command polling started");
+  }
+  stopCommandPolling() {
+    if (this.commandPollIntervalId !== null) {
+      dclClearInterval(this.commandPollIntervalId);
+      this.commandPollIntervalId = null;
+      this.log("Command polling stopped");
+    }
+  }
+  async pollCommands() {
+    try {
+      const res = await fetch(`${this.baseUrl}/scene/${this.config.sceneId}/commands`);
+      if (!res.ok) return;
+      const data = await res.json();
+      const commands = data.commands || [];
+      for (const cmd of commands) {
+        if (cmd.timestamp <= this.lastCommandTimestamp) continue;
+        this.lastCommandTimestamp = cmd.timestamp;
+        if (cmd.type === "broadcast" && cmd.payload?.text) {
+          const msg = cmd.payload.from ? `${cmd.payload.from}: ${cmd.payload.text}` : cmd.payload.text;
+          this.log("Received broadcast:", msg);
+          this.config.onBroadcast?.(msg);
+        } else if (cmd.type === "clearBroadcast") {
+          this.log("Received clearBroadcast");
+          hideNotification();
+        } else if ((cmd.type === "videoPlay" || cmd.type === "videoSetUrl") && cmd.payload?.url) {
+          this.log("Received video play:", cmd.type, cmd.payload.url);
+          this.config.onVideoPlay?.(cmd.payload.url);
+        } else if (cmd.type === "videoStop" || cmd.type === "videoClear") {
+          this.log("Received video stop/clear:", cmd.type);
+          this.config.onVideoStop?.();
+        } else if (cmd.type === "videoPlaySlot" && cmd.payload?.slot) {
+          const slotId = cmd.payload.slot;
+          if (cmd.payload.url) {
+            this.log("Received videoPlaySlot with URL:", slotId, cmd.payload.url);
+            this.config.onVideoPlay?.(cmd.payload.url);
+          } else {
+            this.log("Received videoPlaySlot:", slotId);
+            this.playSlot(slotId);
+          }
+        } else if (this.config.onCommand) {
+          this.log("Received command:", cmd.type, cmd.payload);
+          this.config.onCommand(cmd.type, cmd.payload);
+        }
+      }
+    } catch (err) {
+    }
+  }
   // --- Stream API Calls ---
   async fetchStreamData() {
     if (this.streamFetched || !this.playerWallet) return;
@@ -3396,87 +3588,6 @@ var AdminPanelUIModule = class {
   }
 };
 
-// src/ui/ui-renderer.tsx
-import ReactEcs5, { ReactEcsRenderer, UiEntity as UiEntity5, Label as Label5 } from "@dcl/sdk/react-ecs";
-import { Color4 as Color46 } from "@dcl/sdk/math";
-import { engine as engine2 } from "@dcl/sdk/ecs";
-var notificationText = "";
-var notificationVisible = false;
-var notificationEndTime = 0;
-var notificationInitialized = false;
-function showNotification(message, durationMs = 5e3) {
-  notificationText = message;
-  notificationVisible = true;
-  notificationEndTime = Date.now() + durationMs;
-}
-function initNotificationSystem() {
-  if (notificationInitialized) return;
-  notificationInitialized = true;
-  engine2.addSystem(() => {
-    if (notificationVisible && Date.now() > notificationEndTime) {
-      notificationVisible = false;
-    }
-  });
-}
-function NotificationBanner() {
-  if (!notificationVisible) return null;
-  return /* @__PURE__ */ ReactEcs5.createElement(
-    UiEntity5,
-    {
-      uiTransform: {
-        positionType: "absolute",
-        position: { top: 80 },
-        width: 500,
-        height: 60,
-        padding: 16,
-        alignSelf: "center",
-        justifyContent: "center",
-        alignItems: "center"
-      },
-      uiBackground: { color: Color46.create(0.1, 0.1, 0.15, 0.95) }
-    },
-    /* @__PURE__ */ ReactEcs5.createElement(
-      Label5,
-      {
-        value: notificationText,
-        fontSize: 18,
-        color: Color46.create(0, 1, 1, 1),
-        textAlign: "middle-center"
-      }
-    )
-  );
-}
-function createStaticUI(client) {
-  initNotificationSystem();
-  return function StaticUI() {
-    const currentScale = client.uiScale;
-    const guideComponent = client.guideUI?.getComponent() ?? null;
-    const chatComponent = client.chatUI?.getComponent() ?? null;
-    const adminComponent = client.adminPanel?.getComponent() ?? null;
-    return /* @__PURE__ */ ReactEcs5.createElement(
-      UiEntity5,
-      {
-        key: `static-ui-root-${currentScale}`,
-        uiTransform: {
-          width: "100%",
-          height: "100%",
-          positionType: "absolute",
-          flexDirection: "column",
-          alignItems: "center"
-        }
-      },
-      /* @__PURE__ */ ReactEcs5.createElement(NotificationBanner, null),
-      guideComponent,
-      chatComponent,
-      adminComponent
-    );
-  };
-}
-function setupStaticUI(client) {
-  const StaticUI = createStaticUI(client);
-  ReactEcsRenderer.setUiRenderer(StaticUI);
-}
-
 // src/StaticTVClient.ts
 import { VideoPlayer, videoEventsSystem, VideoState } from "@dcl/sdk/ecs";
 import * as utils from "@dcl-sdk/utils";
@@ -3757,10 +3868,13 @@ var StaticTVClient = class {
    */
   stopVideo() {
     const screen = this.config.videoScreen;
+    this._pendingVideoData = null;
+    this._streamVerified = false;
+    this._clearVerificationTimeout();
+    if (this.guideUI) {
+      this.guideUI.currentVideoId = null;
+    }
     if (screen !== void 0) {
-      if (this.guideUI) {
-        this.guideUI.currentVideoId = null;
-      }
       const fallbackUrl = this.config.fallbackVideoUrl;
       const fallbackDisabled = fallbackUrl === "";
       if (fallbackDisabled) {
@@ -3916,20 +4030,60 @@ var StaticTVClient = class {
   }
   /**
    * Play video with stream verification for live content
+   * Works with both videoScreen (SDK-managed) and onVideoPlay (user-managed) modes.
    * @internal
    */
   _playVideoWithVerification(video, isLiveStream) {
     const screen = this.config.videoScreen;
+    const hasCallback = this.config.onVideoPlay !== void 0;
+    this.log(`Playing video: ${video.src} (live: ${isLiveStream}, screen: ${screen !== void 0}, callback: ${hasCallback})`);
+    this._currentVideoUrl = video.src;
+    this._clearVerificationTimeout();
+    this._streamVerified = false;
     if (screen !== void 0) {
-      this.log(`Playing video: ${video.src} (live: ${isLiveStream})`);
-      this._currentVideoUrl = video.src;
       this._playVideoInternal(video.src, false, isLiveStream);
-      if (this.guideUI) {
-        this.guideUI.currentVideoId = video.id;
-      }
     }
-    if (this.config.onVideoPlay) {
+    if (hasCallback) {
       this.config.onVideoPlay(video.src);
+      if (isLiveStream) {
+        this._startCallbackVerification(video);
+      }
+    }
+    if (this.guideUI) {
+      this.guideUI.currentVideoId = video.id;
+    }
+  }
+  /**
+   * Start stream verification for callback-based video playback
+   * Shows CONNECTING state and triggers fallback if verification times out
+   * @internal
+   */
+  _startCallbackVerification(video) {
+    this.showNotification(`Connecting to ${video.name}...`, 6e3);
+    this._verificationTimeoutId = utils.timers.setTimeout(() => {
+      if (!this._streamVerified && this._pendingVideoData) {
+        this.log(`Stream verification timeout (callback mode): ${video.name}`);
+        this._handleStreamOffline();
+      }
+    }, 5e3);
+  }
+  /**
+   * Call this to confirm that a video stream is playing successfully.
+   * Use this when you're managing video playback yourself (onVideoPlay callback).
+   *
+   * @example
+   * ```typescript
+   * // In your video player's onReady or similar event:
+   * videoPlayer.events.on('playing', () => {
+   *   staticTV.confirmVideoPlaying()
+   * })
+   * ```
+   */
+  confirmVideoPlaying() {
+    if (this._pendingVideoData && !this._streamVerified) {
+      this._streamVerified = true;
+      this._clearVerificationTimeout();
+      this.log(`Stream confirmed playing: ${this._pendingVideoData.name}`);
     }
   }
   /**
@@ -4203,11 +4357,13 @@ export {
   InteractionsModule,
   KEY_TYPE_CHANNEL,
   KEY_TYPE_SCENE,
+  NotificationBanner,
   SessionModule,
   StaticTVClient,
   fetchUserData,
   getPlayerDisplayName,
   getPlayerWallet,
+  hideNotification,
   setupStaticUI,
   showNotification
 };