@thestatic-tv/dcl-sdk 2.3.0-beta.0 → 2.3.0-beta.2

package/dist/index.d.mts

@@ -1,3 +1,4 @@
+import { Entity as Entity$1 } from '@dcl/sdk/ecs';
 import ReactEcs from '@dcl/sdk/react-ecs';
 
 /**
@@ -19,12 +20,57 @@ interface PlayerData {
     /** Player's display name */
     name?: string;
 }
+
+type Entity = Entity$1;
 /**
  * Configuration options for StaticTVClient
  */
 interface StaticTVConfig {
     /** Your channel's API key from thestatic.tv studio */
     apiKey: string;
+    /**
+     * Video screen entity - SDK automatically manages VideoPlayer on this entity.
+     * When user selects a video from Guide or Admin plays a URL, it plays here.
+     *
+     * @example
+     * ```typescript
+     * const screen = engine.addEntity()
+     * Transform.create(screen, { position: Vector3.create(8, 3, 14), scale: Vector3.create(8, 4.5, 0.1) })
+     * MeshRenderer.setPlane(screen)
+     *
+     * const staticTV = new StaticTVClient({
+     *   apiKey: 'dcls_...',
+     *   videoScreen: screen  // SDK handles all video playback!
+     * })
+     * ```
+     */
+    videoScreen?: Entity;
+    /**
+     * Scene ID for Admin Panel API calls.
+     * Optional - defaults to API key ID if not provided.
+     */
+    sceneId?: string;
+    /**
+     * Callback when video URL should be played (Pro tier).
+     * If videoScreen is set, this is called AFTER SDK plays the video.
+     * Use for custom logic like logging, UI updates, etc.
+     */
+    onVideoPlay?: (url: string) => void;
+    /**
+     * Callback when video playback should stop (Pro tier).
+     * If videoScreen is set, this is called AFTER SDK stops the video.
+     */
+    onVideoStop?: () => void;
+    /**
+     * Callback for broadcast messages (Pro tier).
+     * Default: shows notification via staticTV.showNotification()
+     */
+    onBroadcast?: (text: string) => void;
+    /**
+     * Command handler for scene-specific commands (Pro tier).
+     * Called when admin triggers a command from the panel.
+     */
+    onCommand?: (type: string, payload?: Record<string, unknown>) => void;
     /** Automatically start session tracking on init (default: true) */
     autoStartSession?: boolean;
     /** Interval for session heartbeats in ms (default: 30000) */
@@ -47,11 +93,11 @@ interface StaticTVConfig {
      */
     player?: PlayerData;
     /**
-     * Guide UI configuration (channel keys only)
+     * Guide UI configuration
      */
     guideUI?: GuideUIConfig;
     /**
-     * Chat UI configuration (channel keys only)
+     * Chat UI configuration
      */
     chatUI?: ChatUIConfig;
 }
@@ -840,16 +886,28 @@ declare class StaticTVClient {
      *
      * @param config Configuration options
      *
-     * @example
+     * @example Free tier (session tracking only):
      * ```typescript
-     * let staticTV: StaticTVClient
+     * const staticTV = new StaticTVClient({
+     *   apiKey: 'dcls_your_key_here'
+     * })
+     * ```
+     *
+     * @example Standard/Pro with video screen (SDK handles playback):
+     * ```typescript
+     * // Create your video screen
+     * const screen = engine.addEntity()
+     * Transform.create(screen, { position: Vector3.create(8, 3, 14), scale: Vector3.create(8, 4.5, 0.1) })
+     * MeshRenderer.setPlane(screen)
+     *
+     * // SDK handles everything - Guide selection + Pro admin controls just work
+     * const staticTV = new StaticTVClient({
+     *   apiKey: 'dcls_your_key_here',
+     *   videoScreen: screen  // That's it! SDK manages video playback
+     * })
      *
      * export function main() {
-     *   // All keys use dcls_ prefix - features determined by subscription
-     *   staticTV = new StaticTVClient({
-     *     apiKey: 'dcls_your_key_here'
-     *   })
-     *   // Session tracking starts automatically!
+     *   staticTV.setupUI()
      * }
      * ```
      */
@@ -900,6 +958,33 @@ declare class StaticTVClient {
      * @internal
      */
     getConfig(): StaticTVConfig;
+    private _currentVideoUrl;
+    /**
+     * Play a video on the configured videoScreen entity.
+     * Called by Guide UI and Admin Panel.
+     *
+     * @param url Video URL to play
+     */
+    playVideo(url: string): void;
+    /**
+     * Stop video playback on the configured videoScreen entity.
+     * Called by Admin Panel.
+     */
+    stopVideo(): void;
+    /**
+     * Get the currently playing video URL
+     */
+    get currentVideoUrl(): string;
+    /**
+     * Internal handler for Guide video selection
+     * @internal
+     */
+    _handleGuideVideoSelect(video: GuideVideo): void;
+    /**
+     * Internal handler for broadcast messages
+     * @internal
+     */
+    _handleBroadcast(text: string): void;
     /**
      * Initialize standard feature modules (guide, heartbeat, interactions, UI)
      * @internal
@@ -939,28 +1024,30 @@ declare class StaticTVClient {
     get sdkType(): 'lite' | 'full';
     /**
      * Configure Pro features (Admin Panel with Video + Mod tabs)
-     * Call this after creating the client to configure admin panel.
-     * The panel will auto-enable when server confirms Pro tier.
      *
-     * @param config Admin panel configuration (optional - defaults work for basic usage)
+     * **OPTIONAL**: If you set `videoScreen` in the constructor, you don't need
+     * to call this method - the Admin Panel will auto-enable with sensible defaults.
      *
-     * @example
-     * ```typescript
-     * const staticTV = new StaticTVClient({ apiKey: 'dcls_...' })
+     * Use this method only if you need:
+     * - Custom scene tab UI
+     * - Custom panel title/styling
+     * - Advanced command handlers
      *
-     * // Simplest usage - just enable with callbacks:
-     * staticTV.enableProFeatures({
-     *   onVideoPlay: (url) => videoPlayer.play(url),
-     *   onVideoStop: () => videoPlayer.stop()
+     * @param config Admin panel configuration
+     *
+     * @example Using videoScreen (recommended - no enableProFeatures needed):
+     * ```typescript
+     * const staticTV = new StaticTVClient({
+     *   apiKey: 'dcls_...',
+     *   videoScreen: myScreen  // Admin Panel auto-enabled for Pro tier!
      * })
+     * ```
      *
-     * // Advanced usage - custom sceneId and title:
+     * @example Advanced: Custom scene tabs
+     * ```typescript
      * staticTV.enableProFeatures({
-     *   sceneId: 'my-scene', // optional - defaults to API key ID
      *   title: 'MY SCENE ADMIN',
-     *   onVideoPlay: (url) => videoPlayer.play(url),
-     *   onVideoStop: () => videoPlayer.stop(),
-     *   onBroadcast: (text) => showNotification(text)
+     *   sceneTabs: [{ label: 'LIGHTS', id: 'lights', render: () => <LightsTab /> }]
      * })
      * ```
      */

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import { Entity as Entity$1 } from '@dcl/sdk/ecs';
 import ReactEcs from '@dcl/sdk/react-ecs';
 
 /**
@@ -19,12 +20,57 @@ interface PlayerData {
     /** Player's display name */
     name?: string;
 }
+
+type Entity = Entity$1;
 /**
  * Configuration options for StaticTVClient
  */
 interface StaticTVConfig {
     /** Your channel's API key from thestatic.tv studio */
     apiKey: string;
+    /**
+     * Video screen entity - SDK automatically manages VideoPlayer on this entity.
+     * When user selects a video from Guide or Admin plays a URL, it plays here.
+     *
+     * @example
+     * ```typescript
+     * const screen = engine.addEntity()
+     * Transform.create(screen, { position: Vector3.create(8, 3, 14), scale: Vector3.create(8, 4.5, 0.1) })
+     * MeshRenderer.setPlane(screen)
+     *
+     * const staticTV = new StaticTVClient({
+     *   apiKey: 'dcls_...',
+     *   videoScreen: screen  // SDK handles all video playback!
+     * })
+     * ```
+     */
+    videoScreen?: Entity;
+    /**
+     * Scene ID for Admin Panel API calls.
+     * Optional - defaults to API key ID if not provided.
+     */
+    sceneId?: string;
+    /**
+     * Callback when video URL should be played (Pro tier).
+     * If videoScreen is set, this is called AFTER SDK plays the video.
+     * Use for custom logic like logging, UI updates, etc.
+     */
+    onVideoPlay?: (url: string) => void;
+    /**
+     * Callback when video playback should stop (Pro tier).
+     * If videoScreen is set, this is called AFTER SDK stops the video.
+     */
+    onVideoStop?: () => void;
+    /**
+     * Callback for broadcast messages (Pro tier).
+     * Default: shows notification via staticTV.showNotification()
+     */
+    onBroadcast?: (text: string) => void;
+    /**
+     * Command handler for scene-specific commands (Pro tier).
+     * Called when admin triggers a command from the panel.
+     */
+    onCommand?: (type: string, payload?: Record<string, unknown>) => void;
     /** Automatically start session tracking on init (default: true) */
     autoStartSession?: boolean;
     /** Interval for session heartbeats in ms (default: 30000) */
@@ -47,11 +93,11 @@ interface StaticTVConfig {
      */
     player?: PlayerData;
     /**
-     * Guide UI configuration (channel keys only)
+     * Guide UI configuration
      */
     guideUI?: GuideUIConfig;
     /**
-     * Chat UI configuration (channel keys only)
+     * Chat UI configuration
      */
     chatUI?: ChatUIConfig;
 }
@@ -840,16 +886,28 @@ declare class StaticTVClient {
      *
      * @param config Configuration options
      *
-     * @example
+     * @example Free tier (session tracking only):
      * ```typescript
-     * let staticTV: StaticTVClient
+     * const staticTV = new StaticTVClient({
+     *   apiKey: 'dcls_your_key_here'
+     * })
+     * ```
+     *
+     * @example Standard/Pro with video screen (SDK handles playback):
+     * ```typescript
+     * // Create your video screen
+     * const screen = engine.addEntity()
+     * Transform.create(screen, { position: Vector3.create(8, 3, 14), scale: Vector3.create(8, 4.5, 0.1) })
+     * MeshRenderer.setPlane(screen)
+     *
+     * // SDK handles everything - Guide selection + Pro admin controls just work
+     * const staticTV = new StaticTVClient({
+     *   apiKey: 'dcls_your_key_here',
+     *   videoScreen: screen  // That's it! SDK manages video playback
+     * })
      *
      * export function main() {
-     *   // All keys use dcls_ prefix - features determined by subscription
-     *   staticTV = new StaticTVClient({
-     *     apiKey: 'dcls_your_key_here'
-     *   })
-     *   // Session tracking starts automatically!
+     *   staticTV.setupUI()
      * }
      * ```
      */
@@ -900,6 +958,33 @@ declare class StaticTVClient {
      * @internal
      */
     getConfig(): StaticTVConfig;
+    private _currentVideoUrl;
+    /**
+     * Play a video on the configured videoScreen entity.
+     * Called by Guide UI and Admin Panel.
+     *
+     * @param url Video URL to play
+     */
+    playVideo(url: string): void;
+    /**
+     * Stop video playback on the configured videoScreen entity.
+     * Called by Admin Panel.
+     */
+    stopVideo(): void;
+    /**
+     * Get the currently playing video URL
+     */
+    get currentVideoUrl(): string;
+    /**
+     * Internal handler for Guide video selection
+     * @internal
+     */
+    _handleGuideVideoSelect(video: GuideVideo): void;
+    /**
+     * Internal handler for broadcast messages
+     * @internal
+     */
+    _handleBroadcast(text: string): void;
     /**
      * Initialize standard feature modules (guide, heartbeat, interactions, UI)
      * @internal
@@ -939,28 +1024,30 @@ declare class StaticTVClient {
     get sdkType(): 'lite' | 'full';
     /**
      * Configure Pro features (Admin Panel with Video + Mod tabs)
-     * Call this after creating the client to configure admin panel.
-     * The panel will auto-enable when server confirms Pro tier.
      *
-     * @param config Admin panel configuration (optional - defaults work for basic usage)
+     * **OPTIONAL**: If you set `videoScreen` in the constructor, you don't need
+     * to call this method - the Admin Panel will auto-enable with sensible defaults.
      *
-     * @example
-     * ```typescript
-     * const staticTV = new StaticTVClient({ apiKey: 'dcls_...' })
+     * Use this method only if you need:
+     * - Custom scene tab UI
+     * - Custom panel title/styling
+     * - Advanced command handlers
      *
-     * // Simplest usage - just enable with callbacks:
-     * staticTV.enableProFeatures({
-     *   onVideoPlay: (url) => videoPlayer.play(url),
-     *   onVideoStop: () => videoPlayer.stop()
+     * @param config Admin panel configuration
+     *
+     * @example Using videoScreen (recommended - no enableProFeatures needed):
+     * ```typescript
+     * const staticTV = new StaticTVClient({
+     *   apiKey: 'dcls_...',
+     *   videoScreen: myScreen  // Admin Panel auto-enabled for Pro tier!
      * })
+     * ```
      *
-     * // Advanced usage - custom sceneId and title:
+     * @example Advanced: Custom scene tabs
+     * ```typescript
      * staticTV.enableProFeatures({
-     *   sceneId: 'my-scene', // optional - defaults to API key ID
      *   title: 'MY SCENE ADMIN',
-     *   onVideoPlay: (url) => videoPlayer.play(url),
-     *   onVideoStop: () => videoPlayer.stop(),
-     *   onBroadcast: (text) => showNotification(text)
+     *   sceneTabs: [{ label: 'LIGHTS', id: 'lights', render: () => <LightsTab /> }]
      * })
      * ```
      */

package/dist/index.js

@@ -1441,7 +1441,7 @@ var GuideUIModule = class {
   renderToggleButton() {
     const buttonText = this._isVisible ? "CLOSE" : "GUIDE";
     const buttonColor = this._isVisible ? import_math3.Color4.create(0.2, 0.2, 0.28, 0.9) : import_math3.Color4.create(0, 0.5, 0.5, 0.9);
-    const buttonPos = 20 + this.s(100) + 10 + this.s(100) + 10;
+    const buttonPos = 20 + this.s(100) + 10;
     return import_react_ecs2.default.createElement(import_react_ecs2.UiEntity, {
       uiTransform: {
         positionType: "absolute",
@@ -2734,7 +2734,7 @@ var AdminPanelUIModule = class {
           import_react_ecs4.UiEntity,
           {
             uiTransform: {
-              position: { right: 20 + this.s(100) + 10, bottom: 10 },
+              position: { right: 20 + this.s(100) + 10 + this.s(100) + 10, bottom: 10 },
               positionType: "absolute"
             }
           },
@@ -3492,6 +3492,7 @@ function setupStaticUI(client) {
 }
 
 // src/StaticTVClient.ts
+var import_ecs3 = require("@dcl/sdk/ecs");
 var DEFAULT_BASE_URL = "https://thestatic.tv/api/v1/dcl";
 var KEY_TYPE_CHANNEL = "channel";
 var KEY_TYPE_SCENE = "scene";
@@ -3501,16 +3502,28 @@ var StaticTVClient = class {
    *
    * @param config Configuration options
    *
-   * @example
+   * @example Free tier (session tracking only):
+   * ```typescript
+   * const staticTV = new StaticTVClient({
+   *   apiKey: 'dcls_your_key_here'
+   * })
+   * ```
+   *
+   * @example Standard/Pro with video screen (SDK handles playback):
    * ```typescript
-   * let staticTV: StaticTVClient
+   * // Create your video screen
+   * const screen = engine.addEntity()
+   * Transform.create(screen, { position: Vector3.create(8, 3, 14), scale: Vector3.create(8, 4.5, 0.1) })
+   * MeshRenderer.setPlane(screen)
+   *
+   * // SDK handles everything - Guide selection + Pro admin controls just work
+   * const staticTV = new StaticTVClient({
+   *   apiKey: 'dcls_your_key_here',
+   *   videoScreen: screen  // That's it! SDK manages video playback
+   * })
    *
    * export function main() {
-   *   // All keys use dcls_ prefix - features determined by subscription
-   *   staticTV = new StaticTVClient({
-   *     apiKey: 'dcls_your_key_here'
-   *   })
-   *   // Session tracking starts automatically!
+   *   staticTV.setupUI()
    * }
    * ```
    */
@@ -3538,6 +3551,10 @@ var StaticTVClient = class {
     this.adminPanel = null;
     /** UI scale - fixed at 1.0. DCL's UI system auto-scales based on viewport. */
     this.uiScale = 1;
+    // =============================================================================
+    // --- VIDEO PLAYBACK (Internal handler for videoScreen) ---
+    // =============================================================================
+    this._currentVideoUrl = "";
     this.config = {
       autoStartSession: true,
       sessionHeartbeatInterval: 3e4,
@@ -3667,6 +3684,84 @@ var StaticTVClient = class {
   getConfig() {
     return this.config;
   }
+  /**
+   * Play a video on the configured videoScreen entity.
+   * Called by Guide UI and Admin Panel.
+   *
+   * @param url Video URL to play
+   */
+  playVideo(url) {
+    const screen = this.config.videoScreen;
+    if (screen !== void 0) {
+      this.log(`Playing video: ${url}`);
+      this._currentVideoUrl = url;
+      if (import_ecs3.VideoPlayer.has(screen)) {
+        import_ecs3.VideoPlayer.deleteFrom(screen);
+      }
+      import_ecs3.VideoPlayer.create(screen, {
+        src: url,
+        playing: true,
+        volume: 1
+      });
+      import_ecs3.Material.setBasicMaterial(screen, {
+        texture: import_ecs3.Material.Texture.Video({ videoPlayerEntity: screen })
+      });
+      if (this.guideUI) {
+        const videos = this.guideUI.getVideos();
+        const video = videos.find((v) => v.src === url);
+        if (video) {
+          this.guideUI.currentVideoId = video.id;
+        }
+      }
+    }
+    if (this.config.onVideoPlay) {
+      this.config.onVideoPlay(url);
+    }
+  }
+  /**
+   * Stop video playback on the configured videoScreen entity.
+   * Called by Admin Panel.
+   */
+  stopVideo() {
+    const screen = this.config.videoScreen;
+    if (screen !== void 0 && import_ecs3.VideoPlayer.has(screen)) {
+      this.log("Stopping video");
+      import_ecs3.VideoPlayer.getMutable(screen).playing = false;
+      this._currentVideoUrl = "";
+      if (this.guideUI) {
+        this.guideUI.currentVideoId = null;
+      }
+    }
+    if (this.config.onVideoStop) {
+      this.config.onVideoStop();
+    }
+  }
+  /**
+   * Get the currently playing video URL
+   */
+  get currentVideoUrl() {
+    return this._currentVideoUrl;
+  }
+  /**
+   * Internal handler for Guide video selection
+   * @internal
+   */
+  _handleGuideVideoSelect(video) {
+    if (video.src) {
+      this.playVideo(video.src);
+    }
+  }
+  /**
+   * Internal handler for broadcast messages
+   * @internal
+   */
+  _handleBroadcast(text) {
+    if (this.config.onBroadcast) {
+      this.config.onBroadcast(text);
+    } else {
+      this.showNotification(text);
+    }
+  }
   /**
    * Initialize standard feature modules (guide, heartbeat, interactions, UI)
    * @internal
@@ -3676,7 +3771,18 @@ var StaticTVClient = class {
     this.guide = new GuideModule(this);
     this.heartbeat = new HeartbeatModule(this);
     this.interactions = new InteractionsModule(this);
-    this.guideUI = new GuideUIModule(this, this.config.guideUI);
+    const guideConfig = {
+      ...this.config.guideUI,
+      onVideoSelect: (video) => {
+        if (this.config.videoScreen !== void 0 || this.config.onVideoPlay) {
+          this._handleGuideVideoSelect(video);
+        }
+        if (this.config.guideUI?.onVideoSelect) {
+          this.config.guideUI.onVideoSelect(video);
+        }
+      }
+    };
+    this.guideUI = new GuideUIModule(this, guideConfig);
     this.chatUI = new ChatUIModule(this, this.config.chatUI);
     this._standardFeaturesEnabled = true;
     this.chatUI.init().catch((err) => {
@@ -3689,21 +3795,28 @@ var StaticTVClient = class {
    * @internal
    */
   _initProModules() {
-    if (this._proFeaturesEnabled || !this._pendingProConfig) return;
-    const configWithDefaults = {
-      ...this._pendingProConfig,
-      sceneId: this._pendingProConfig.sceneId || this._keyId || void 0
-    };
-    if (!configWithDefaults.sceneId) {
+    if (this._proFeaturesEnabled) return;
+    const sceneId = this._pendingProConfig?.sceneId || this.config.sceneId || this._keyId || void 0;
+    if (!sceneId) {
       this.log("Pro features: No sceneId and no keyId available - admin panel disabled");
       return;
     }
-    this.adminPanel = new AdminPanelUIModule(this, configWithDefaults);
+    const adminConfig = {
+      sceneId,
+      // Use internal handlers that manage videoScreen + call user callbacks
+      onVideoPlay: (url) => this.playVideo(url),
+      onVideoStop: () => this.stopVideo(),
+      onBroadcast: (text) => this._handleBroadcast(text),
+      onCommand: this.config.onCommand || this._pendingProConfig?.onCommand,
+      // Merge other settings from enableProFeatures if provided
+      ...this._pendingProConfig
+    };
+    this.adminPanel = new AdminPanelUIModule(this, adminConfig);
     this._proFeaturesEnabled = true;
     this.adminPanel.init().catch((err) => {
       this.log(`Admin panel init failed: ${err}`);
     });
-    this.log(`Pro features enabled (admin panel) - sceneId: ${configWithDefaults.sceneId}`);
+    this.log(`Pro features enabled (admin panel) - sceneId: ${sceneId}`);
   }
   /**
    * Called by SessionModule when server returns the tier
@@ -3718,8 +3831,13 @@ var StaticTVClient = class {
     if (tier === "standard" || tier === "pro") {
       this._initStandardModules();
     }
-    if (tier === "pro" && this._pendingProConfig) {
-      this._initProModules();
+    if (tier === "pro") {
+      const hasVideoConfig = this.config.videoScreen !== void 0 || this.config.onVideoPlay !== void 0 || this.config.sceneId !== void 0 || this._pendingProConfig !== null;
+      if (hasVideoConfig) {
+        this._initProModules();
+      } else {
+        this.log("Pro tier detected but no video config - call enableProFeatures() or set videoScreen to enable admin panel");
+      }
     }
   }
   /**
@@ -3755,28 +3873,30 @@ var StaticTVClient = class {
   }
   /**
    * Configure Pro features (Admin Panel with Video + Mod tabs)
-   * Call this after creating the client to configure admin panel.
-   * The panel will auto-enable when server confirms Pro tier.
    *
-   * @param config Admin panel configuration (optional - defaults work for basic usage)
+   * **OPTIONAL**: If you set `videoScreen` in the constructor, you don't need
+   * to call this method - the Admin Panel will auto-enable with sensible defaults.
    *
-   * @example
-   * ```typescript
-   * const staticTV = new StaticTVClient({ apiKey: 'dcls_...' })
+   * Use this method only if you need:
+   * - Custom scene tab UI
+   * - Custom panel title/styling
+   * - Advanced command handlers
    *
-   * // Simplest usage - just enable with callbacks:
-   * staticTV.enableProFeatures({
-   *   onVideoPlay: (url) => videoPlayer.play(url),
-   *   onVideoStop: () => videoPlayer.stop()
+   * @param config Admin panel configuration
+   *
+   * @example Using videoScreen (recommended - no enableProFeatures needed):
+   * ```typescript
+   * const staticTV = new StaticTVClient({
+   *   apiKey: 'dcls_...',
+   *   videoScreen: myScreen  // Admin Panel auto-enabled for Pro tier!
    * })
+   * ```
    *
-   * // Advanced usage - custom sceneId and title:
+   * @example Advanced: Custom scene tabs
+   * ```typescript
    * staticTV.enableProFeatures({
-   *   sceneId: 'my-scene', // optional - defaults to API key ID
    *   title: 'MY SCENE ADMIN',
-   *   onVideoPlay: (url) => videoPlayer.play(url),
-   *   onVideoStop: () => videoPlayer.stop(),
-   *   onBroadcast: (text) => showNotification(text)
+   *   sceneTabs: [{ label: 'LIGHTS', id: 'lights', render: () => <LightsTab /> }]
    * })
    * ```
    */

package/dist/index.mjs

@@ -1398,7 +1398,7 @@ var GuideUIModule = class {
   renderToggleButton() {
     const buttonText = this._isVisible ? "CLOSE" : "GUIDE";
     const buttonColor = this._isVisible ? Color43.create(0.2, 0.2, 0.28, 0.9) : Color43.create(0, 0.5, 0.5, 0.9);
-    const buttonPos = 20 + this.s(100) + 10 + this.s(100) + 10;
+    const buttonPos = 20 + this.s(100) + 10;
     return ReactEcs2.createElement(UiEntity2, {
       uiTransform: {
         positionType: "absolute",
@@ -2691,7 +2691,7 @@ var AdminPanelUIModule = class {
           UiEntity4,
           {
             uiTransform: {
-              position: { right: 20 + this.s(100) + 10, bottom: 10 },
+              position: { right: 20 + this.s(100) + 10 + this.s(100) + 10, bottom: 10 },
               positionType: "absolute"
             }
           },
@@ -3449,6 +3449,7 @@ function setupStaticUI(client) {
 }
 
 // src/StaticTVClient.ts
+import { VideoPlayer, Material } from "@dcl/sdk/ecs";
 var DEFAULT_BASE_URL = "https://thestatic.tv/api/v1/dcl";
 var KEY_TYPE_CHANNEL = "channel";
 var KEY_TYPE_SCENE = "scene";
@@ -3458,16 +3459,28 @@ var StaticTVClient = class {
    *
    * @param config Configuration options
    *
-   * @example
+   * @example Free tier (session tracking only):
+   * ```typescript
+   * const staticTV = new StaticTVClient({
+   *   apiKey: 'dcls_your_key_here'
+   * })
+   * ```
+   *
+   * @example Standard/Pro with video screen (SDK handles playback):
    * ```typescript
-   * let staticTV: StaticTVClient
+   * // Create your video screen
+   * const screen = engine.addEntity()
+   * Transform.create(screen, { position: Vector3.create(8, 3, 14), scale: Vector3.create(8, 4.5, 0.1) })
+   * MeshRenderer.setPlane(screen)
+   *
+   * // SDK handles everything - Guide selection + Pro admin controls just work
+   * const staticTV = new StaticTVClient({
+   *   apiKey: 'dcls_your_key_here',
+   *   videoScreen: screen  // That's it! SDK manages video playback
+   * })
    *
    * export function main() {
-   *   // All keys use dcls_ prefix - features determined by subscription
-   *   staticTV = new StaticTVClient({
-   *     apiKey: 'dcls_your_key_here'
-   *   })
-   *   // Session tracking starts automatically!
+   *   staticTV.setupUI()
    * }
    * ```
    */
@@ -3495,6 +3508,10 @@ var StaticTVClient = class {
     this.adminPanel = null;
     /** UI scale - fixed at 1.0. DCL's UI system auto-scales based on viewport. */
     this.uiScale = 1;
+    // =============================================================================
+    // --- VIDEO PLAYBACK (Internal handler for videoScreen) ---
+    // =============================================================================
+    this._currentVideoUrl = "";
     this.config = {
       autoStartSession: true,
       sessionHeartbeatInterval: 3e4,
@@ -3624,6 +3641,84 @@ var StaticTVClient = class {
   getConfig() {
     return this.config;
   }
+  /**
+   * Play a video on the configured videoScreen entity.
+   * Called by Guide UI and Admin Panel.
+   *
+   * @param url Video URL to play
+   */
+  playVideo(url) {
+    const screen = this.config.videoScreen;
+    if (screen !== void 0) {
+      this.log(`Playing video: ${url}`);
+      this._currentVideoUrl = url;
+      if (VideoPlayer.has(screen)) {
+        VideoPlayer.deleteFrom(screen);
+      }
+      VideoPlayer.create(screen, {
+        src: url,
+        playing: true,
+        volume: 1
+      });
+      Material.setBasicMaterial(screen, {
+        texture: Material.Texture.Video({ videoPlayerEntity: screen })
+      });
+      if (this.guideUI) {
+        const videos = this.guideUI.getVideos();
+        const video = videos.find((v) => v.src === url);
+        if (video) {
+          this.guideUI.currentVideoId = video.id;
+        }
+      }
+    }
+    if (this.config.onVideoPlay) {
+      this.config.onVideoPlay(url);
+    }
+  }
+  /**
+   * Stop video playback on the configured videoScreen entity.
+   * Called by Admin Panel.
+   */
+  stopVideo() {
+    const screen = this.config.videoScreen;
+    if (screen !== void 0 && VideoPlayer.has(screen)) {
+      this.log("Stopping video");
+      VideoPlayer.getMutable(screen).playing = false;
+      this._currentVideoUrl = "";
+      if (this.guideUI) {
+        this.guideUI.currentVideoId = null;
+      }
+    }
+    if (this.config.onVideoStop) {
+      this.config.onVideoStop();
+    }
+  }
+  /**
+   * Get the currently playing video URL
+   */
+  get currentVideoUrl() {
+    return this._currentVideoUrl;
+  }
+  /**
+   * Internal handler for Guide video selection
+   * @internal
+   */
+  _handleGuideVideoSelect(video) {
+    if (video.src) {
+      this.playVideo(video.src);
+    }
+  }
+  /**
+   * Internal handler for broadcast messages
+   * @internal
+   */
+  _handleBroadcast(text) {
+    if (this.config.onBroadcast) {
+      this.config.onBroadcast(text);
+    } else {
+      this.showNotification(text);
+    }
+  }
   /**
    * Initialize standard feature modules (guide, heartbeat, interactions, UI)
    * @internal
@@ -3633,7 +3728,18 @@ var StaticTVClient = class {
     this.guide = new GuideModule(this);
     this.heartbeat = new HeartbeatModule(this);
     this.interactions = new InteractionsModule(this);
-    this.guideUI = new GuideUIModule(this, this.config.guideUI);
+    const guideConfig = {
+      ...this.config.guideUI,
+      onVideoSelect: (video) => {
+        if (this.config.videoScreen !== void 0 || this.config.onVideoPlay) {
+          this._handleGuideVideoSelect(video);
+        }
+        if (this.config.guideUI?.onVideoSelect) {
+          this.config.guideUI.onVideoSelect(video);
+        }
+      }
+    };
+    this.guideUI = new GuideUIModule(this, guideConfig);
     this.chatUI = new ChatUIModule(this, this.config.chatUI);
     this._standardFeaturesEnabled = true;
     this.chatUI.init().catch((err) => {
@@ -3646,21 +3752,28 @@ var StaticTVClient = class {
    * @internal
    */
   _initProModules() {
-    if (this._proFeaturesEnabled || !this._pendingProConfig) return;
-    const configWithDefaults = {
-      ...this._pendingProConfig,
-      sceneId: this._pendingProConfig.sceneId || this._keyId || void 0
-    };
-    if (!configWithDefaults.sceneId) {
+    if (this._proFeaturesEnabled) return;
+    const sceneId = this._pendingProConfig?.sceneId || this.config.sceneId || this._keyId || void 0;
+    if (!sceneId) {
       this.log("Pro features: No sceneId and no keyId available - admin panel disabled");
       return;
     }
-    this.adminPanel = new AdminPanelUIModule(this, configWithDefaults);
+    const adminConfig = {
+      sceneId,
+      // Use internal handlers that manage videoScreen + call user callbacks
+      onVideoPlay: (url) => this.playVideo(url),
+      onVideoStop: () => this.stopVideo(),
+      onBroadcast: (text) => this._handleBroadcast(text),
+      onCommand: this.config.onCommand || this._pendingProConfig?.onCommand,
+      // Merge other settings from enableProFeatures if provided
+      ...this._pendingProConfig
+    };
+    this.adminPanel = new AdminPanelUIModule(this, adminConfig);
     this._proFeaturesEnabled = true;
     this.adminPanel.init().catch((err) => {
       this.log(`Admin panel init failed: ${err}`);
     });
-    this.log(`Pro features enabled (admin panel) - sceneId: ${configWithDefaults.sceneId}`);
+    this.log(`Pro features enabled (admin panel) - sceneId: ${sceneId}`);
   }
   /**
    * Called by SessionModule when server returns the tier
@@ -3675,8 +3788,13 @@ var StaticTVClient = class {
     if (tier === "standard" || tier === "pro") {
       this._initStandardModules();
     }
-    if (tier === "pro" && this._pendingProConfig) {
-      this._initProModules();
+    if (tier === "pro") {
+      const hasVideoConfig = this.config.videoScreen !== void 0 || this.config.onVideoPlay !== void 0 || this.config.sceneId !== void 0 || this._pendingProConfig !== null;
+      if (hasVideoConfig) {
+        this._initProModules();
+      } else {
+        this.log("Pro tier detected but no video config - call enableProFeatures() or set videoScreen to enable admin panel");
+      }
     }
   }
   /**
@@ -3712,28 +3830,30 @@ var StaticTVClient = class {
   }
   /**
    * Configure Pro features (Admin Panel with Video + Mod tabs)
-   * Call this after creating the client to configure admin panel.
-   * The panel will auto-enable when server confirms Pro tier.
    *
-   * @param config Admin panel configuration (optional - defaults work for basic usage)
+   * **OPTIONAL**: If you set `videoScreen` in the constructor, you don't need
+   * to call this method - the Admin Panel will auto-enable with sensible defaults.
    *
-   * @example
-   * ```typescript
-   * const staticTV = new StaticTVClient({ apiKey: 'dcls_...' })
+   * Use this method only if you need:
+   * - Custom scene tab UI
+   * - Custom panel title/styling
+   * - Advanced command handlers
    *
-   * // Simplest usage - just enable with callbacks:
-   * staticTV.enableProFeatures({
-   *   onVideoPlay: (url) => videoPlayer.play(url),
-   *   onVideoStop: () => videoPlayer.stop()
+   * @param config Admin panel configuration
+   *
+   * @example Using videoScreen (recommended - no enableProFeatures needed):
+   * ```typescript
+   * const staticTV = new StaticTVClient({
+   *   apiKey: 'dcls_...',
+   *   videoScreen: myScreen  // Admin Panel auto-enabled for Pro tier!
    * })
+   * ```
    *
-   * // Advanced usage - custom sceneId and title:
+   * @example Advanced: Custom scene tabs
+   * ```typescript
    * staticTV.enableProFeatures({
-   *   sceneId: 'my-scene', // optional - defaults to API key ID
    *   title: 'MY SCENE ADMIN',
-   *   onVideoPlay: (url) => videoPlayer.play(url),
-   *   onVideoStop: () => videoPlayer.stop(),
-   *   onBroadcast: (text) => showNotification(text)
+   *   sceneTabs: [{ label: 'LIGHTS', id: 'lights', render: () => <LightsTab /> }]
    * })
    * ```
    */

package/package.json

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