@xiboplayer/core 0.1.3 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xiboplayer/core",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "description": "Xibo Player core orchestration and lifecycle management",
   "type": "module",
   "main": "./src/index.js",
@@ -11,13 +11,13 @@
   "dependencies": {
     "@xibosignage/xibo-communication-framework": "^0.0.6",
     "nanoevents": "^9.1.0",
-    "@xiboplayer/utils": "0.1.3"
+    "@xiboplayer/utils": "0.2.0"
   },
   "peerDependencies": {
-    "@xiboplayer/cache": "0.1.3",
-    "@xiboplayer/schedule": "0.1.3",
-    "@xiboplayer/renderer": "0.1.3",
-    "@xiboplayer/xmds": "0.1.3"
+    "@xiboplayer/cache": "0.2.0",
+    "@xiboplayer/renderer": "0.2.0",
+    "@xiboplayer/schedule": "0.2.0",
+    "@xiboplayer/xmds": "0.2.0"
   },
   "devDependencies": {
     "vite": "^7.3.1",

package/src/player-core.js

@@ -43,6 +43,7 @@
  */
 
 import { EventEmitter, createLogger, applyCmsLogLevel } from '@xiboplayer/utils';
+import { calculateTimeline, parseLayoutDuration } from '@xiboplayer/schedule';
 import { DataConnectorManager } from './data-connectors.js';
 
 const log = createLogger('PlayerCore');
@@ -52,6 +53,11 @@ const OFFLINE_DB_NAME = 'xibo-offline-cache';
 const OFFLINE_DB_VERSION = 1;
 const OFFLINE_STORE = 'cache';
 
+/** Extract layout ID from a schedule filename like "123.xlf" */
+function parseLayoutFile(f) {
+  return parseInt(String(f).replace('.xlf', ''), 10);
+}
+
 /** Open the offline cache IndexedDB (creates store on first use) */
 function openOfflineDb() {
   return new Promise((resolve, reject) => {
@@ -107,6 +113,9 @@ export class PlayerCore extends EventEmitter {
     this.syncConfig = null;
     this.syncManager = null; // Optional: set via setSyncManager() after RegisterDisplay
 
+    // Layout durations for timeline calculation (layoutFile/layoutId → seconds)
+    this._layoutDurations = new Map();
+
     // In-memory offline cache (populated from IndexedDB on first load)
     this._offlineCache = { schedule: null, settings: null, requiredFiles: null };
     this._offlineDbReady = this._initOfflineCache();
@@ -195,48 +204,61 @@ export class PlayerCore extends EventEmitter {
       this.emit('schedule-received', cachedSchedule);
     }
 
-    // Evaluate current schedule (same logic as online path)
+    // Evaluate current schedule
     const layoutFiles = this.schedule.getCurrentLayouts();
     log.info('Offline layouts:', layoutFiles);
     this.emit('layouts-scheduled', layoutFiles);
 
+    this._evaluateAndSwitchLayout(layoutFiles, 'Offline');
+
+    this.emit('collection-complete');
+  }
+
+  /**
+   * Evaluate the current schedule and switch layouts if needed.
+   * Shared by both collect() and collectOffline() after emitting 'layouts-scheduled'.
+   * @param {string[]} layoutFiles - Currently scheduled layout filenames
+   * @param {string} context - Log context label (e.g. 'Offline' or '')
+   */
+  async _evaluateAndSwitchLayout(layoutFiles, context) {
+    const prefix = context ? `${context}: ` : '';
+
     if (layoutFiles.length > 0) {
-      // If a layout is currently playing and still in the schedule, don't interrupt
       if (this.currentLayoutId) {
         const currentStillScheduled = layoutFiles.some(f =>
-          parseInt(String(f).replace('.xlf', ''), 10) === this.currentLayoutId
+          parseLayoutFile(f) === this.currentLayoutId
         );
         if (currentStillScheduled) {
           const idx = layoutFiles.findIndex(f =>
-            parseInt(String(f).replace('.xlf', ''), 10) === this.currentLayoutId
+            parseLayoutFile(f) === this.currentLayoutId
           );
           if (idx >= 0) this._currentLayoutIndex = idx;
-          log.debug(`Layout ${this.currentLayoutId} still in schedule (offline), continuing playback`);
+          log.debug(`Layout ${this.currentLayoutId} still in schedule${context ? ` (${context.toLowerCase()})` : ''}, continuing playback`);
           this.emit('layout-already-playing', this.currentLayoutId);
         } else {
-          // Current layout not in schedule — switch
           this._currentLayoutIndex = 0;
           const next = this.getNextLayout();
           if (next) {
-            log.info(`Offline: switching to layout ${next.layoutId}`);
+            log.info(`${prefix}switching to layout ${next.layoutId}${!context ? ` (from ${this.currentLayoutId})` : ''}`);
             this.emit('layout-prepare-request', next.layoutId);
           }
         }
       } else {
-        // No current layout — start the first one
         this._currentLayoutIndex = 0;
         const next = this.getNextLayout();
         if (next) {
-          log.info(`Offline: switching to layout ${next.layoutId}`);
+          log.info(`${prefix}switching to layout ${next.layoutId}`);
           this.emit('layout-prepare-request', next.layoutId);
         }
       }
     } else {
-      log.info('Offline: no layouts in cached schedule');
+      log.info(`${context ? `${context}: n` : 'N'}o layouts${context ? ' in cached schedule' : ' scheduled, falling back to default'}`);
       this.emit('no-layouts-scheduled');
     }
 
-    this.emit('collection-complete');
+    // Build layout durations and log upcoming timeline
+    await this._buildLayoutDurations();
+    this.logUpcomingTimeline();
   }
 
   /**
@@ -356,6 +378,7 @@ export class PlayerCore extends EventEmitter {
           this.schedule.setSchedule(schedule);
           this.updateDataConnectors();
           this._offlineSave('schedule', schedule);
+          this.logUpcomingTimeline();
         }
 
         log.debug('Collection step: download-request + mediaInventory');
@@ -379,6 +402,7 @@ export class PlayerCore extends EventEmitter {
           this.schedule.setSchedule(schedule);
           this.updateDataConnectors();
           this._offlineSave('schedule', schedule);
+          this.logUpcomingTimeline();
         } else if (checkSchedule) {
           log.info('Schedule CRC unchanged, skipping');
         }
@@ -390,51 +414,15 @@ export class PlayerCore extends EventEmitter {
       log.info('Current layouts:', layoutFiles);
       this.emit('layouts-scheduled', layoutFiles);
 
-      if (layoutFiles.length > 0) {
-        // If a layout is currently playing and it's still in the schedule, don't interrupt it.
-        // Let it finish its natural duration — advanceToNextLayout() handles the transition.
-        if (this.currentLayoutId) {
-          const currentStillScheduled = layoutFiles.some(f =>
-            parseInt(String(f).replace('.xlf', ''), 10) === this.currentLayoutId
-          );
-          if (currentStillScheduled) {
-            // Update round-robin index to match current layout's position
-            const idx = layoutFiles.findIndex(f =>
-              parseInt(String(f).replace('.xlf', ''), 10) === this.currentLayoutId
-            );
-            if (idx >= 0) this._currentLayoutIndex = idx;
-            log.debug(`Layout ${this.currentLayoutId} still in schedule, continuing playback`);
-            this.emit('layout-already-playing', this.currentLayoutId);
-          } else {
-            // Current layout is not in the schedule (unscheduled or filtered) — switch
-            this._currentLayoutIndex = 0;
-            const next = this.getNextLayout();
-            if (next) {
-              log.info(`Switching to layout ${next.layoutId} (from ${this.currentLayoutId})`);
-              this.emit('layout-prepare-request', next.layoutId);
-            }
-          }
-        } else {
-          // No current layout — start the first one
-          this._currentLayoutIndex = 0;
-          const next = this.getNextLayout();
-          if (next) {
-            log.info(`Switching to layout ${next.layoutId}`);
-            this.emit('layout-prepare-request', next.layoutId);
-          }
-        }
-      } else {
-        log.info('No layouts scheduled, falling back to default');
-        this.emit('no-layouts-scheduled');
+      this._evaluateAndSwitchLayout(layoutFiles, '');
 
-        // If we're currently playing a layout but schedule says no layouts (e.g., maxPlaysPerHour filtered it),
-        // force switch to default layout if available
-        if (this.currentLayoutId && this.schedule.schedule?.default) {
-          const defaultLayoutId = parseInt(this.schedule.schedule.default.replace('.xlf', ''), 10);
-          log.info(`Current layout filtered by schedule, switching to default layout ${defaultLayoutId}`);
-          this.currentLayoutId = null; // Clear to force switch
-          this.emit('layout-prepare-request', defaultLayoutId);
-        }
+      // If no layouts scheduled and we're playing one that was filtered (e.g., maxPlaysPerHour),
+      // force switch to default layout if available
+      if (layoutFiles.length === 0 && this.currentLayoutId && this.schedule.schedule?.default) {
+        const defaultLayoutId = parseLayoutFile(this.schedule.schedule.default);
+        log.info(`Current layout filtered by schedule, switching to default layout ${defaultLayoutId}`);
+        this.currentLayoutId = null; // Clear to force switch
+        this.emit('layout-prepare-request', defaultLayoutId);
       }
 
       // Submit stats if enabled and collector is available
@@ -538,18 +526,7 @@ export class PlayerCore extends EventEmitter {
       ? this.displaySettings.getCollectInterval()
       : parseInt(settings.collectInterval || '300', 10);
 
-    const collectIntervalMs = collectIntervalSeconds * 1000;
-
-    log.info(`Setting up collection interval: ${collectIntervalSeconds}s`);
-
-    this.collectionInterval = setInterval(() => {
-      log.debug('Running scheduled collection cycle...');
-      this.collect().catch(error => {
-        log.error('Collection error:', error);
-        this.emit('collection-error', error);
-      });
-    }, collectIntervalMs);
-
+    this._setCollectionTimer(collectIntervalSeconds);
     this.emit('collection-interval-set', collectIntervalSeconds);
   }
 
@@ -559,23 +536,24 @@ export class PlayerCore extends EventEmitter {
    */
   updateCollectionInterval(newIntervalSeconds) {
     if (this.collectionInterval) {
-      clearInterval(this.collectionInterval);
-      log.info(`Updating collection interval: ${newIntervalSeconds}s`);
-
-      const collectIntervalMs = newIntervalSeconds * 1000;
-
-      this.collectionInterval = setInterval(() => {
-        log.debug('Running scheduled collection cycle...');
-        this.collect().catch(error => {
-          log.error('Collection error:', error);
-          this.emit('collection-error', error);
-        });
-      }, collectIntervalMs);
-
+      this._setCollectionTimer(newIntervalSeconds);
       this.emit('collection-interval-updated', newIntervalSeconds);
     }
   }
 
+  /** Internal: (re)create the collection setInterval timer */
+  _setCollectionTimer(seconds) {
+    if (this.collectionInterval) clearInterval(this.collectionInterval);
+    log.info(`Collection interval: ${seconds}s`);
+    this.collectionInterval = setInterval(() => {
+      log.debug('Running scheduled collection cycle...');
+      this.collect().catch(error => {
+        log.error('Collection error:', error);
+        this.emit('collection-error', error);
+      });
+    }, seconds * 1000);
+  }
+
   /**
    * Request layout change (called by XMR or schedule)
    * Pure orchestration - emits events for platform to handle
@@ -597,6 +575,8 @@ export class PlayerCore extends EventEmitter {
     this.currentLayoutId = layoutId;
     this.pendingLayouts.delete(layoutId);
     this.emit('layout-current', layoutId);
+    // Re-log timeline from current time on each layout change
+    this.logUpcomingTimeline();
   }
 
   /**
@@ -633,7 +613,7 @@ export class PlayerCore extends EventEmitter {
     }
 
     const layoutFile = layoutFiles[this._currentLayoutIndex];
-    const layoutId = parseInt(layoutFile.replace('.xlf', ''), 10);
+    const layoutId = parseLayoutFile(layoutFile);
     return { layoutId, layoutFile };
   }
 
@@ -651,7 +631,7 @@ export class PlayerCore extends EventEmitter {
 
     const nextIndex = (this._currentLayoutIndex + 1) % layoutFiles.length;
     const layoutFile = layoutFiles[nextIndex];
-    const layoutId = parseInt(layoutFile.replace('.xlf', ''), 10);
+    const layoutId = parseLayoutFile(layoutFile);
 
     // Don't return if it's the same as current (no point preloading)
     if (layoutId === this.currentLayoutId) {
@@ -699,7 +679,7 @@ export class PlayerCore extends EventEmitter {
     this._currentLayoutIndex = (this._currentLayoutIndex + 1) % layoutFiles.length;
 
     const layoutFile = layoutFiles[this._currentLayoutIndex];
-    const layoutId = parseInt(layoutFile.replace('.xlf', ''), 10);
+    const layoutId = parseLayoutFile(layoutFile);
 
     // Multi-display sync: if this is a sync event and we have a SyncManager,
     // delegate layout transitions to the sync protocol
@@ -730,6 +710,37 @@ export class PlayerCore extends EventEmitter {
     this.emit('layout-prepare-request', layoutId);
   }
 
+  /**
+   * Go back to the previous layout in the schedule (round-robin, wraps around).
+   * Called by platform layer in response to manual navigation (keyboard/remote).
+   * Skips sync-manager logic — manual navigation is local only.
+   */
+  advanceToPreviousLayout() {
+    if (this._layoutOverride) {
+      log.info('Layout override active, not going back');
+      return;
+    }
+
+    const layoutFiles = this.schedule.getCurrentLayouts();
+    if (layoutFiles.length === 0) return;
+
+    // Decrement index (wrap around)
+    const prevIndex = (this._currentLayoutIndex - 1 + layoutFiles.length) % layoutFiles.length;
+
+    const layoutFile = layoutFiles[prevIndex];
+    const layoutId = parseLayoutFile(layoutFile);
+
+    // No-op if it's the same layout (single-layout schedule) — don't restart
+    if (layoutId === this.currentLayoutId) {
+      log.info('Only one layout in schedule, nothing to go back to');
+      return;
+    }
+
+    this._currentLayoutIndex = prevIndex;
+    log.info(`Going back to layout ${layoutId} (index ${this._currentLayoutIndex}/${layoutFiles.length})`);
+    this.emit('layout-prepare-request', layoutId);
+  }
+
   /**
    * Notify that a file is ready (called by platform for both layout and media files)
    * Checks if any pending layouts can now be rendered
@@ -808,7 +819,7 @@ export class PlayerCore extends EventEmitter {
     const layoutFiles = this.schedule.getCurrentLayouts();
     if (layoutFiles.length > 0) {
       const layoutFile = layoutFiles[0];
-      const layoutId = parseInt(layoutFile.replace('.xlf', ''), 10);
+      const layoutId = parseLayoutFile(layoutFile);
       this.emit('layout-prepare-request', layoutId);
     } else {
       this.emit('no-layouts-scheduled');
@@ -1029,6 +1040,74 @@ export class PlayerCore extends EventEmitter {
     return this.syncConfig;
   }
 
+  // ── Timeline (offline schedule prediction) ─────────────────────────
+
+  /**
+   * Parse all cached layout XLFs to extract durations for timeline calculation.
+   * Called after collection completes and layouts are known.
+   */
+  async _buildLayoutDurations() {
+    if (!this.cache?.getFile) return; // Cache doesn't support direct file access
+
+    const layoutFiles = this.schedule.getCurrentLayouts();
+    const defaultFile = this.schedule.schedule?.default;
+    const allFiles = [...new Set([...layoutFiles, ...(defaultFile ? [defaultFile] : [])])];
+
+    let parsed = 0;
+    for (const file of allFiles) {
+      const layoutId = parseLayoutFile(file);
+      try {
+        const xlfXml = await this.cache.getFile('layout', layoutId);
+        if (xlfXml) {
+          const duration = parseLayoutDuration(xlfXml);
+          this._layoutDurations.set(file, duration);
+          this._layoutDurations.set(String(layoutId), duration);
+          parsed++;
+        }
+      } catch (e) {
+        log.debug(`Could not parse duration for layout ${layoutId}:`, e.message);
+      }
+    }
+    if (parsed > 0) {
+      log.info(`[Timeline] Parsed durations for ${parsed} layouts`);
+    }
+  }
+
+  /**
+   * Calculate and log the upcoming playback timeline (next 2 hours).
+   * Emits 'timeline-updated' with the full timeline array.
+   */
+  logUpcomingTimeline() {
+    if (this._layoutDurations.size === 0) return;
+    if (!this.schedule.getLayoutsAtTime) return; // Schedule doesn't support time queries
+
+    const timeline = calculateTimeline(this.schedule, this._layoutDurations);
+    if (timeline.length === 0) return;
+
+    const lines = timeline.slice(0, 20).map(e => {
+      const s = e.startTime.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
+      const end = e.endTime.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
+      return `  ${s}-${end}  Layout ${e.layoutFile} (${e.duration}s)${e.isDefault ? ' [default]' : ''}`;
+    });
+    log.info(`[Timeline] Next ${timeline.length} plays:\n${lines.join('\n')}`);
+    this.emit('timeline-updated', timeline);
+  }
+
+  /**
+   * Record/correct a layout's actual duration (e.g., from video loadedmetadata).
+   * Updates the durations map and re-logs the timeline if it changed.
+   * @param {string} file - Layout file or layout ID string
+   * @param {number} duration - Actual duration in seconds
+   */
+  recordLayoutDuration(file, duration) {
+    const prev = this._layoutDurations.get(file);
+    if (prev === duration) return; // No change
+
+    this._layoutDurations.set(file, duration);
+    log.debug(`[Timeline] Duration corrected: layout ${file} ${prev || '?'}s → ${duration}s`);
+    this.logUpcomingTimeline();
+  }
+
   /**
    * Cleanup
    */
@@ -1091,7 +1170,7 @@ export class PlayerCore extends EventEmitter {
   prioritizeFilesByLayout(files, currentLayouts) {
     const currentLayoutIds = new Set();
     currentLayouts.forEach((layoutFile) => {
-      currentLayoutIds.add(parseInt(String(layoutFile).replace('.xlf', ''), 10));
+      currentLayoutIds.add(parseLayoutFile(layoutFile));
     });
 
     // Assign priority tiers

package/src/main.js

@@ -1,580 +0,0 @@
-/**
- * Main player orchestrator
- */
-
-import { config } from '@xiboplayer/utils';
-import { XmdsClient } from '@xiboplayer/xmds';
-import { cacheManager } from '@xiboplayer/cache';
-import { scheduleManager } from '@xiboplayer/schedule';
-import { LayoutTranslator } from '@xiboplayer/renderer';
-import { XmrWrapper } from './xmr-wrapper.js';
-
-class Player {
-  constructor() {
-    this.xmds = new XmdsClient(config);
-    this.layoutTranslator = new LayoutTranslator(this.xmds);
-    this.xmr = null; // XMR real-time messaging
-    this.settings = null;
-    this.collectInterval = 900000; // 15 minutes default
-    this.scheduleCheckInterval = 60000; // 1 minute
-    this.lastScheduleCheck = 0;
-    this.currentLayouts = [];
-    this.currentLayoutIndex = 0; // Track position in campaign
-    this.layoutChangeTimeout = null; // Timer for layout cycling
-    this.layoutScripts = []; // Track scripts from current layout
-  }
-
-  /**
-   * Initialize player
-   */
-  async init() {
-    console.log('[Player] Initializing...');
-
-    // Check configuration
-    if (!config.isConfigured()) {
-      console.log('[Player] Not configured, redirecting to setup');
-      window.location.href = '/player/setup.html';
-      return;
-    }
-
-    // Initialize cache
-    await cacheManager.init();
-    console.log('[Player] Cache initialized');
-
-    // Start collection cycle
-    await this.collect();
-    setInterval(() => this.collect(), this.collectInterval);
-
-    // Start schedule check cycle
-    setInterval(() => this.checkSchedule(), this.scheduleCheckInterval);
-  }
-
-  /**
-   * Collection cycle - sync with CMS
-   */
-  async collect() {
-    try {
-      console.log('[Player] Starting collection cycle');
-
-      // 1. Register display
-      const regResult = await this.xmds.registerDisplay();
-      console.log('[Player] RegisterDisplay:', regResult.code, regResult.message);
-
-      if (regResult.code !== 'READY') {
-        this.showMessage(`Display not authorized: ${regResult.message}`);
-        return;
-      }
-
-      // Save settings
-      if (regResult.settings) {
-        this.settings = regResult.settings;
-        if (this.settings.collectInterval) {
-          this.collectInterval = parseInt(this.settings.collectInterval) * 1000;
-        }
-        console.log('[Player] Settings updated:', this.settings);
-
-        // Initialize XMR if available and not already connected
-        if (!this.xmr && this.settings.xmrNetAddress) {
-          await this.initializeXmr();
-        }
-      }
-
-      // 2. Get required files
-      const files = await this.xmds.requiredFiles();
-      console.log('[Player] Required files:', files.length);
-
-      // 3. Download missing files
-      for (const file of files) {
-        try {
-          if (file.download === 'http' && file.path) {
-            await cacheManager.downloadFile(file);
-          } else if (file.download === 'xmds') {
-            // TODO: Implement XMDS GetFile for chunked downloads
-            console.warn('[Player] XMDS download not yet implemented for', file.id);
-          }
-
-          // Translate layouts to HTML
-          // Always re-translate to pick up code changes (layout files are small)
-          if (file.type === 'layout') {
-            await this.translateLayout(file);
-          }
-        } catch (error) {
-          console.error(`[Player] Failed to download ${file.type}/${file.id}:`, error);
-        }
-      }
-
-      // 4. Get schedule
-      const schedule = await this.xmds.schedule();
-      console.log('[Player] Schedule:', schedule);
-      scheduleManager.setSchedule(schedule);
-
-      // 5. Apply schedule
-      await this.checkSchedule();
-
-      // 6. Notify status
-      await this.xmds.notifyStatus({
-        currentLayoutId: this.currentLayouts[0] || null,
-        deviceName: config.displayName,
-        timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
-      });
-
-      console.log('[Player] Collection cycle complete');
-    } catch (error) {
-      console.error('[Player] Collection failed:', error);
-      this.showMessage(`Collection failed: ${error.message}`);
-    }
-  }
-
-  /**
-   * Translate layout XLF to HTML
-   */
-  async translateLayout(fileInfo) {
-    const xlfText = await cacheManager.getCachedFileText('layout', fileInfo.id);
-    if (!xlfText) {
-      console.warn('[Player] Layout XLF not found in cache:', fileInfo.id);
-      return;
-    }
-
-    try {
-      const html = await this.layoutTranslator.translateXLF(fileInfo.id, xlfText, cacheManager);
-
-      // Cache the translated HTML
-      const htmlBlob = new Blob([html], { type: 'text/html' });
-      const cacheKey = `/cache/layout-html/${fileInfo.id}`;
-      const cache = await caches.open('xibo-media-v1');
-      await cache.put(cacheKey, new Response(htmlBlob));
-
-      console.log('[Player] Translated layout:', fileInfo.id);
-    } catch (error) {
-      console.error('[Player] Failed to translate layout:', fileInfo.id, error);
-    }
-  }
-
-  /**
-   * Check schedule and update display
-   */
-  async checkSchedule() {
-    if (!scheduleManager.shouldCheckSchedule(this.lastScheduleCheck)) {
-      return;
-    }
-
-    this.lastScheduleCheck = Date.now();
-    const layouts = scheduleManager.getCurrentLayouts();
-
-    if (JSON.stringify(layouts) !== JSON.stringify(this.currentLayouts)) {
-      console.log('[Player] Schedule changed:', layouts);
-      this.currentLayouts = layouts;
-      this.currentLayoutIndex = 0;
-
-      // Clear any existing layout change timer
-      if (this.layoutChangeTimeout) {
-        clearTimeout(this.layoutChangeTimeout);
-      }
-
-      // Show first layout and start cycling
-      await this.showCurrentLayout();
-    }
-  }
-
-  /**
-   * Show the current layout in the campaign and schedule next layout
-   */
-  async showCurrentLayout() {
-    if (this.currentLayouts.length === 0) {
-      this.showMessage('No layout scheduled');
-      return;
-    }
-
-    const layoutFile = this.currentLayouts[this.currentLayoutIndex];
-    await this.showLayout(layoutFile);
-
-    // If there are multiple layouts, schedule the next one
-    if (this.currentLayouts.length > 1) {
-      // Get layout duration (default to 60 seconds if not specified)
-      const layoutDuration = await this.getLayoutDuration(layoutFile);
-      const duration = layoutDuration || 60000; // milliseconds
-
-      console.log(`[Player] Layout will change in ${duration}ms`);
-
-      // Schedule next layout
-      this.layoutChangeTimeout = setTimeout(() => {
-        this.advanceToNextLayout();
-      }, duration);
-    }
-  }
-
-  /**
-   * Advance to the next layout in the campaign
-   */
-  async advanceToNextLayout() {
-    if (this.currentLayouts.length <= 1) {
-      return; // Nothing to cycle to
-    }
-
-    // Advance index (loop back to 0 at end)
-    this.currentLayoutIndex = (this.currentLayoutIndex + 1) % this.currentLayouts.length;
-    console.log(`[Player] Advancing to layout ${this.currentLayoutIndex + 1}/${this.currentLayouts.length}`);
-
-    // Show the next layout
-    await this.showCurrentLayout();
-  }
-
-  /**
-   * Get layout duration from cache or default to 60 seconds
-   */
-  async getLayoutDuration(layoutFile) {
-    try {
-      const layoutId = layoutFile.replace('.xlf', '').replace(/^.*\//, '');
-      const xlfText = await cacheManager.getCachedFileText('layout', layoutId);
-
-      if (!xlfText) {
-        return 60000; // Default 60 seconds
-      }
-
-      // Parse XLF to get duration
-      const parser = new DOMParser();
-      const xlf = parser.parseFromString(xlfText, 'text/xml');
-      const layoutNode = xlf.querySelector('layout');
-
-      if (layoutNode) {
-        const duration = parseInt(layoutNode.getAttribute('duration')) || 60;
-        return duration * 1000; // Convert to milliseconds
-      }
-
-      return 60000; // Default
-    } catch (error) {
-      console.warn('[Player] Could not get layout duration:', error);
-      return 60000; // Default
-    }
-  }
-
-  /**
-   * Show a layout by loading HTML directly into page (not iframe)
-   */
-  async showLayout(layoutFile) {
-    if (!layoutFile) {
-      this.showMessage('No layout scheduled');
-      return;
-    }
-
-    // Extract layout ID from filename (e.g., "123.xlf" -> "123" or just "1")
-    const layoutId = layoutFile.replace('.xlf', '').replace(/^.*\//, '');
-
-    // Get the translated HTML from cache
-    const html = await cacheManager.cache.match(`/cache/layout-html/${layoutId}`);
-    if (!html) {
-      console.warn('[Player] Layout HTML not in cache:', layoutId);
-      this.showMessage(`Layout ${layoutId} not available`);
-      return;
-    }
-
-    const htmlText = await html.text();
-
-    console.log('[Player] Showing layout:', layoutId);
-
-    // Parse HTML
-    const parser = new DOMParser();
-    const doc = parser.parseFromString(htmlText, 'text/html');
-
-    // Get the container
-    const container = document.getElementById('layout-container');
-    if (!container) return;
-
-    // Extract all content except scripts
-    const bodyWithoutScripts = doc.body.cloneNode(true);
-    const scriptsInBody = bodyWithoutScripts.querySelectorAll('script');
-    scriptsInBody.forEach(s => s.remove());
-
-    // Remove previous layout's scripts to avoid variable redeclaration errors
-    this.layoutScripts.forEach(script => {
-      if (script.parentNode) {
-        script.parentNode.removeChild(script);
-      }
-    });
-    this.layoutScripts = [];
-
-    // Set HTML (styles + body content without scripts)
-    container.innerHTML = '';
-
-    // Add head styles
-    doc.querySelectorAll('head > style').forEach(style => {
-      container.appendChild(style.cloneNode(true));
-    });
-
-    // Add body content
-    while (bodyWithoutScripts.firstChild) {
-      container.appendChild(bodyWithoutScripts.firstChild);
-    }
-
-    // Execute scripts manually (innerHTML doesn't execute them)
-    // Wrap inline scripts in IIFE to prevent const redeclaration errors
-    const allScripts = [...doc.querySelectorAll('head > script'), ...doc.querySelectorAll('body > script')];
-    allScripts.forEach(oldScript => {
-      const newScript = document.createElement('script');
-      if (oldScript.src) {
-        newScript.src = oldScript.src;
-      } else {
-        // Wrap inline script in IIFE to create isolated scope
-        // This prevents const/let redeclaration errors when switching layouts
-        newScript.textContent = `(function() {\n${oldScript.textContent}\n})();`;
-      }
-      // Mark script with data attribute for tracking
-      newScript.setAttribute('data-layout-script', layoutId);
-      document.body.appendChild(newScript);
-      this.layoutScripts.push(newScript); // Track for cleanup
-    });
-  }
-
-  /**
-   * Initialize XMR real-time messaging
-   */
-  async initializeXmr() {
-    try {
-      // Construct XMR WebSocket URL
-      let xmrUrl = this.settings.xmrNetAddress;
-
-      // If xmrNetAddress is not a full WebSocket URL, construct it from CMS address
-      if (!xmrUrl || (!xmrUrl.startsWith('ws://') && !xmrUrl.startsWith('wss://'))) {
-        const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-        const cmsBase = config.cmsAddress || window.location.origin;
-        const cmsHost = cmsBase.replace(/^https?:\/\//, '').replace(/\/.*$/, '');
-        xmrUrl = `${protocol}//${cmsHost}/xmr`;
-      }
-
-      console.log('[Player] Initializing XMR with URL:', xmrUrl);
-
-      // Create and start XMR wrapper
-      this.xmr = new XmrWrapper(config, this);
-      const success = await this.xmr.start(xmrUrl, config.cmsKey);
-
-      if (success) {
-        console.log('[Player] XMR real-time messaging enabled');
-      } else {
-        console.log('[Player] Continuing without XMR (polling mode only)');
-      }
-    } catch (error) {
-      console.warn('[Player] XMR initialization failed:', error);
-      console.log('[Player] Continuing in polling mode (XMDS only)');
-    }
-  }
-
-  /**
-   * Update player status (called by XMR wrapper)
-   */
-  updateStatus(status) {
-    console.log('[Player] Status:', status);
-    // Could update UI status indicator here
-    const statusEl = document.getElementById('xmr-status');
-    if (statusEl) {
-      statusEl.textContent = status;
-      statusEl.className = status.includes('connected') ? 'status-connected' : 'status-disconnected';
-    }
-  }
-
-  /**
-   * Capture screenshot (called by XMR when CMS requests it)
-   */
-  async captureScreenshot() {
-    try {
-      console.log('[Player] Capturing screenshot...');
-
-      // Use html2canvas or native screenshot API if available
-      // For now, just log that we received the command
-      console.log('[Player] Screenshot capture not yet implemented');
-
-      // TODO: Implement screenshot capture
-      // 1. Use html2canvas to capture current layout
-      // 2. Convert to blob
-      // 3. Upload to CMS via SubmitScreenShot XMDS call
-
-      return true;
-    } catch (error) {
-      console.error('[Player] Screenshot capture failed:', error);
-      return false;
-    }
-  }
-
-  /**
-   * Change layout immediately (called by XMR)
-   */
-  async changeLayout(layoutId) {
-    console.log('[Player] Changing to layout:', layoutId);
-    try {
-      // Find layout file by ID
-      const layoutFile = `${layoutId}.xlf`;
-      await this.showLayout(layoutFile);
-      return true;
-    } catch (error) {
-      console.error('[Player] Change layout failed:', error);
-      return false;
-    }
-  }
-
-  /**
-   * Show a message to the user
-   */
-  showMessage(message) {
-    console.log('[Player]', message);
-    const messageEl = document.getElementById('message');
-    if (messageEl) {
-      messageEl.textContent = message;
-      messageEl.style.display = 'block';
-      setTimeout(() => {
-        messageEl.style.display = 'none';
-      }, 5000);
-    }
-  }
-}
-
-/**
- * Network Activity Tracker
- */
-class NetworkActivityTracker {
-  constructor() {
-    this.activities = [];
-    this.maxActivities = 100;
-  }
-
-  addActivity(filename, status, size = null) {
-    const activity = {
-      timestamp: new Date(),
-      filename,
-      status,
-      size
-    };
-    this.activities.unshift(activity);
-    if (this.activities.length > this.maxActivities) {
-      this.activities.pop();
-    }
-    this.updateUI();
-  }
-
-  updateUI() {
-    const list = document.getElementById('activity-list');
-    if (!list) return;
-
-    if (this.activities.length === 0) {
-      list.innerHTML = '<li class="empty">No network activity yet</li>';
-      return;
-    }
-
-    list.innerHTML = this.activities.map(activity => {
-      const time = activity.timestamp.toLocaleTimeString();
-      const statusClass = activity.status === 'success' ? 'success' :
-                          activity.status === 'error' ? 'error' : 'loading';
-      const sizeText = activity.size ? this.formatSize(activity.size) : '-';
-
-      return `
-        <li>
-          <span class="time">${time}</span>
-          <span class="file" title="${activity.filename}">${activity.filename}</span>
-          <span class="size">${sizeText}</span>
-          <span class="status ${statusClass}">${activity.status}</span>
-        </li>
-      `;
-    }).join('');
-  }
-
-  formatSize(bytes) {
-    if (bytes < 1024) return bytes + ' B';
-    if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
-    if (bytes < 1024 * 1024 * 1024) return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
-    return (bytes / (1024 * 1024 * 1024)).toFixed(2) + ' GB';
-  }
-}
-
-const networkTracker = new NetworkActivityTracker();
-
-/**
- * Setup download progress UI
- */
-function setupProgressUI() {
-  const progressEl = document.getElementById('download-progress');
-  const filenameEl = document.getElementById('progress-filename');
-  const fillEl = document.getElementById('progress-fill');
-  const percentEl = document.getElementById('progress-percent');
-  const sizeEl = document.getElementById('progress-size');
-
-  window.addEventListener('download-progress', (event) => {
-    const { filename, loaded, total, percent, complete, error } = event.detail;
-
-    if (error) {
-      // Show error
-      networkTracker.addActivity(filename, 'error', total);
-      fillEl.style.background = 'linear-gradient(90deg, #c62828, #e53935)';
-      setTimeout(() => {
-        progressEl.style.display = 'none';
-        fillEl.style.background = 'linear-gradient(90deg, #4CAF50, #66BB6A)';
-      }, 3000);
-    } else if (complete) {
-      // Show 100% briefly
-      fillEl.style.width = '100%';
-      percentEl.textContent = '100%';
-
-      // Hide progress after 2 seconds
-      setTimeout(() => {
-        progressEl.style.display = 'none';
-      }, 2000);
-      networkTracker.addActivity(filename, 'success', total);
-    } else {
-      // Show progress
-      progressEl.style.display = 'block';
-      filenameEl.textContent = filename;
-      fillEl.style.width = percent.toFixed(1) + '%';
-      percentEl.textContent = percent.toFixed(1) + '%';
-
-      const loadedMB = (loaded / 1024 / 1024).toFixed(1);
-      const totalMB = (total / 1024 / 1024).toFixed(1);
-      sizeEl.textContent = `${loadedMB} / ${totalMB} MB`;
-
-      if (percent === 0) {
-        networkTracker.addActivity(filename, 'loading', total);
-      }
-    }
-  });
-}
-
-/**
- * Setup network activity panel (Ctrl+N)
- */
-function setupNetworkPanel() {
-  const panel = document.getElementById('network-panel');
-  const closeBtn = document.getElementById('close-network');
-
-  // Keyboard shortcut: Ctrl+N
-  document.addEventListener('keydown', (event) => {
-    if (event.ctrlKey && event.key === 'n') {
-      event.preventDefault();
-      const isVisible = panel.style.display === 'block';
-      panel.style.display = isVisible ? 'none' : 'block';
-      if (!isVisible) {
-        networkTracker.updateUI(); // Refresh on open
-      }
-    }
-
-    // Also allow ESC to close
-    if (event.key === 'Escape' && panel.style.display === 'block') {
-      panel.style.display = 'none';
-    }
-  });
-
-  // Close button
-  closeBtn.addEventListener('click', () => {
-    panel.style.display = 'none';
-  });
-}
-
-// Auto-start player when DOM is ready
-if (document.readyState === 'loading') {
-  document.addEventListener('DOMContentLoaded', () => {
-    setupProgressUI();
-    setupNetworkPanel();
-    const player = new Player();
-    player.init();
-  });
-} else {
-  setupProgressUI();
-  setupNetworkPanel();
-  const player = new Player();
-  player.init();
-}