@thestatic-tv/dcl-sdk 2.5.7 → 2.5.8

package/dist/index.d.mts

@@ -1042,6 +1042,11 @@ declare class StaticTVClient {
      * Get the currently playing video URL
      */
     get currentVideoUrl(): string;
+    /**
+     * Get the video ID currently being connected/verified (for "CONNECTING" indicator)
+     * Returns null if no stream verification is in progress
+     */
+    get connectingVideoId(): string | null;
     /**
      * Internal handler for Guide video selection
      * Tries to play the stream and verifies it's working (like M1D-HQ behavior)

package/dist/index.d.ts

@@ -1042,6 +1042,11 @@ declare class StaticTVClient {
      * Get the currently playing video URL
      */
     get currentVideoUrl(): string;
+    /**
+     * Get the video ID currently being connected/verified (for "CONNECTING" indicator)
+     * Returns null if no stream verification is in progress
+     */
+    get connectingVideoId(): string | null;
     /**
      * Internal handler for Guide video selection
      * Tries to play the stream and verifies it's working (like M1D-HQ behavior)

package/dist/index.js

@@ -1341,6 +1341,13 @@ var GuideUIModule = class {
     const cardW = this.s(UI_DIMENSIONS.guide.content.cardWidth);
     const cardH = this.s(UI_DIMENSIONS.guide.content.cardHeight);
     const isActive = this._currentVideoId === video.id;
+    const isConnecting = this.client.connectingVideoId === video.id;
+    let cardBgColor = import_math3.Color4.create(0.15, 0.15, 0.15, 0.8);
+    if (isActive && !isConnecting) {
+      cardBgColor = import_math3.Color4.create(0, 0.4, 0, 0.5);
+    } else if (isConnecting) {
+      cardBgColor = import_math3.Color4.create(0.4, 0.3, 0, 0.5);
+    }
     return import_react_ecs2.default.createElement(import_react_ecs2.UiEntity, {
       key: video.id,
       uiTransform: {
@@ -1353,7 +1360,7 @@ var GuideUIModule = class {
         flexDirection: "column",
         margin: 4
       },
-      uiBackground: { color: isActive ? import_math3.Color4.create(0, 0.4, 0, 0.5) : import_math3.Color4.create(0.15, 0.15, 0.15, 0.8) },
+      uiBackground: { color: cardBgColor },
       children: [
         // Main click area
         import_react_ecs2.default.createElement(import_react_ecs2.UiEntity, {
@@ -1373,7 +1380,17 @@ var GuideUIModule = class {
                 color: THEME.colors.white
               }
             }),
-            ...isActive ? [
+            // Status indicator: CONNECTING > PLAYING > LIVE
+            ...isConnecting ? [
+              import_react_ecs2.default.createElement(import_react_ecs2.UiEntity, {
+                key: "connecting",
+                uiText: {
+                  value: "CONNECTING...",
+                  fontSize: this.s(UI_DIMENSIONS.guide.content.bodySize),
+                  color: THEME.colors.yellow
+                }
+              })
+            ] : isActive ? [
               import_react_ecs2.default.createElement(import_react_ecs2.UiEntity, {
                 key: "playing",
                 uiText: {
@@ -3891,6 +3908,13 @@ var StaticTVClient = class {
   get currentVideoUrl() {
     return this._currentVideoUrl;
   }
+  /**
+   * Get the video ID currently being connected/verified (for "CONNECTING" indicator)
+   * Returns null if no stream verification is in progress
+   */
+  get connectingVideoId() {
+    return this._pendingVideoData && !this._streamVerified ? this._pendingVideoData.id : null;
+  }
   /**
    * Internal handler for Guide video selection
    * Tries to play the stream and verifies it's working (like M1D-HQ behavior)

package/dist/index.mjs

@@ -1298,6 +1298,13 @@ var GuideUIModule = class {
     const cardW = this.s(UI_DIMENSIONS.guide.content.cardWidth);
     const cardH = this.s(UI_DIMENSIONS.guide.content.cardHeight);
     const isActive = this._currentVideoId === video.id;
+    const isConnecting = this.client.connectingVideoId === video.id;
+    let cardBgColor = Color43.create(0.15, 0.15, 0.15, 0.8);
+    if (isActive && !isConnecting) {
+      cardBgColor = Color43.create(0, 0.4, 0, 0.5);
+    } else if (isConnecting) {
+      cardBgColor = Color43.create(0.4, 0.3, 0, 0.5);
+    }
     return ReactEcs2.createElement(UiEntity2, {
       key: video.id,
       uiTransform: {
@@ -1310,7 +1317,7 @@ var GuideUIModule = class {
         flexDirection: "column",
         margin: 4
       },
-      uiBackground: { color: isActive ? Color43.create(0, 0.4, 0, 0.5) : Color43.create(0.15, 0.15, 0.15, 0.8) },
+      uiBackground: { color: cardBgColor },
       children: [
         // Main click area
         ReactEcs2.createElement(UiEntity2, {
@@ -1330,7 +1337,17 @@ var GuideUIModule = class {
                 color: THEME.colors.white
               }
             }),
-            ...isActive ? [
+            // Status indicator: CONNECTING > PLAYING > LIVE
+            ...isConnecting ? [
+              ReactEcs2.createElement(UiEntity2, {
+                key: "connecting",
+                uiText: {
+                  value: "CONNECTING...",
+                  fontSize: this.s(UI_DIMENSIONS.guide.content.bodySize),
+                  color: THEME.colors.yellow
+                }
+              })
+            ] : isActive ? [
               ReactEcs2.createElement(UiEntity2, {
                 key: "playing",
                 uiText: {
@@ -3848,6 +3865,13 @@ var StaticTVClient = class {
   get currentVideoUrl() {
     return this._currentVideoUrl;
   }
+  /**
+   * Get the video ID currently being connected/verified (for "CONNECTING" indicator)
+   * Returns null if no stream verification is in progress
+   */
+  get connectingVideoId() {
+    return this._pendingVideoData && !this._streamVerified ? this._pendingVideoData.id : null;
+  }
   /**
    * Internal handler for Guide video selection
    * Tries to play the stream and verifies it's working (like M1D-HQ behavior)

package/package.json

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