@xiboplayer/core 0.1.0

package/public/sw.js

@@ -0,0 +1,218 @@
+/**
+ * Service Worker for offline cache
+ */
+
+const CACHE_VERSION = 'v1';
+const STATIC_CACHE = `xibo-static-${CACHE_VERSION}`;
+
+/**
+ * Handle Range requests for video/audio seeking
+ * Required for HTML5 video element to support seeking/scrubbing
+ * For streaming files, downloads chunks on-demand
+ */
+async function handleRangeRequest(cachedResponse, rangeHeader, cacheKey, originalUrl) {
+  const blob = await cachedResponse.blob();
+  const fileSize = blob.size;
+
+  // Parse Range header: "bytes=START-END" or "bytes=START-"
+  const rangeParts = rangeHeader.replace(/bytes=/, '').split('-');
+  const start = parseInt(rangeParts[0], 10);
+  const end = rangeParts[1] ? parseInt(rangeParts[1], 10) : fileSize - 1;
+
+  // Extract requested range from blob
+  const rangeBlob = blob.slice(start, end + 1);
+
+  return new Response(rangeBlob, {
+    status: 206, // Partial Content
+    statusText: 'Partial Content',
+    headers: {
+      'Content-Type': cachedResponse.headers.get('Content-Type') || 'video/mp4',
+      'Content-Length': rangeBlob.size,
+      'Content-Range': `bytes ${start}-${end}/${fileSize}`,
+      'Accept-Ranges': 'bytes',
+      'Access-Control-Allow-Origin': '*'
+    }
+  });
+}
+
+/**
+ * Fetch and cache a chunk from the original URL on-demand
+ * Used for streaming large video files
+ */
+async function fetchAndCacheChunk(originalUrl, rangeHeader, cacheKey, cache) {
+  console.log('[SW] Fetching chunk on-demand:', rangeHeader);
+
+  const response = await fetch(originalUrl, {
+    headers: { 'Range': rangeHeader }
+  });
+
+  if (!response.ok && response.status !== 206) {
+    throw new Error(`Failed to fetch chunk: ${response.status}`);
+  }
+
+  // Cache this chunk for future requests
+  const responseClone = response.clone();
+  await cache.put(cacheKey + '#' + rangeHeader, responseClone);
+
+  return response;
+}
+
+// Files to cache on install (with /player/ prefix)
+const STATIC_FILES = [
+  '/player/',
+  '/player/index.html',
+  '/player/setup.html',
+  '/player/manifest.json'
+];
+
+// Install event - cache static files
+self.addEventListener('install', (event) => {
+  console.log('[SW] Installing...');
+  event.waitUntil(
+    caches.open(STATIC_CACHE).then((cache) => {
+      console.log('[SW] Caching static files');
+      return cache.addAll(STATIC_FILES);
+    })
+  );
+  self.skipWaiting();
+});
+
+// Activate event - clean up old caches
+self.addEventListener('activate', (event) => {
+  console.log('[SW] Activating...');
+  event.waitUntil(
+    caches.keys().then((cacheNames) => {
+      return Promise.all(
+        cacheNames
+          .filter((name) => name.startsWith('xibo-') && name !== STATIC_CACHE && name !== 'xibo-media-v1')
+          .map((name) => {
+            console.log('[SW] Deleting old cache:', name);
+            return caches.delete(name);
+          })
+      );
+    })
+  );
+  self.clients.claim();
+});
+
+// Fetch event - serve from cache, fallback to network
+self.addEventListener('fetch', (event) => {
+  const url = new URL(event.request.url);
+
+  // IMPORTANT: Let XMDS downloads bypass Service Worker
+  // Large video files (2GB+) cause timeouts if intercepted
+  // The cache.js module handles downloads directly
+  if (url.pathname.includes('xmds.php') && url.searchParams.has('file')) {
+    // Don't intercept - let it go directly to network
+    return;
+  }
+
+  // Handle widget HTML requests (/player/cache/widget/*)
+  if (url.pathname.startsWith('/player/cache/widget/')) {
+    console.log('[SW] Widget HTML request:', url.pathname);
+    // Strip /player/ prefix to match cached keys
+    const cacheKey = url.pathname.replace('/player', '');
+    const cacheUrl = new URL(cacheKey, url.origin);
+    event.respondWith(
+      caches.open('xibo-media-v1').then((cache) => {
+        return cache.match(cacheUrl).then((response) => {
+          if (response) {
+            console.log('[SW] Serving widget HTML from cache:', cacheKey);
+            return new Response(response.body, {
+              headers: {
+                'Content-Type': 'text/html; charset=utf-8',
+                'Access-Control-Allow-Origin': '*',
+                'Cache-Control': 'public, max-age=31536000'
+              }
+            });
+          }
+          console.warn('[SW] Widget HTML not found in cache:', cacheKey);
+          return new Response('<!DOCTYPE html><html><body>Widget not found</body></html>', {
+            status: 404,
+            headers: { 'Content-Type': 'text/html' }
+          });
+        });
+      })
+    );
+    return;
+  }
+
+  // Handle cache URLs (/player/cache/*)
+  if (url.pathname.startsWith('/player/cache/')) {
+    // Strip /player/ prefix to match cached keys
+    const cacheKey = url.pathname.replace('/player', '');
+    console.log('[SW] Request for:', url.pathname, '→ Cache key:', cacheKey);
+
+    event.respondWith(
+      caches.open('xibo-media-v1').then((cache) => {
+        return cache.match(cacheKey).then(async (response) => {
+          if (response) {
+            console.log('[SW] Serving from cache:', cacheKey);
+
+            // Handle Range requests for video/audio seeking
+            const rangeHeader = event.request.headers.get('Range');
+            if (rangeHeader) {
+              return handleRangeRequest(response, rangeHeader, cacheKey, event.request.url);
+            }
+
+            // Regular response
+            return new Response(response.body, {
+              status: 200,
+              statusText: 'OK',
+              headers: {
+                'Content-Type': response.headers.get('Content-Type') || 'application/octet-stream',
+                'Content-Length': response.headers.get('Content-Length') || '',
+                'Accept-Ranges': 'bytes',
+                'Access-Control-Allow-Origin': '*'
+              }
+            });
+          }
+
+          // Cache miss - might be background download in progress
+          // For media files, show a loading message instead of 404
+          console.warn('[SW] Cache miss for:', cacheKey, '(might be downloading in background)');
+
+          // Return a placeholder for videos being downloaded
+          if (cacheKey.includes('.mp4') || cacheKey.includes('.mov') || cacheKey.includes('.avi')) {
+            return new Response('Downloading video in background...', {
+              status: 202,
+              statusText: 'Accepted',
+              headers: { 'Content-Type': 'text/plain' }
+            });
+          }
+
+          return new Response('Not found', { status: 404 });
+        });
+      }).catch(err => {
+        console.error('[SW] Error serving:', cacheKey, err);
+        return new Response('Error: ' + err.message, { status: 500 });
+      })
+    );
+    return;
+  }
+
+  // For other requests, try cache first, then network
+  event.respondWith(
+    caches.match(event.request).then((response) => {
+      if (response) {
+        return response;
+      }
+      return fetch(event.request).then((networkResponse) => {
+        // Cache successful GET responses only (can't cache POST)
+        if (networkResponse.ok && event.request.method === 'GET') {
+          const responseClone = networkResponse.clone();
+          caches.open(STATIC_CACHE).then((cache) => {
+            cache.put(event.request, responseClone);
+          });
+        }
+        return networkResponse;
+      });
+    }).catch(() => {
+      // Network failed and not in cache
+      if (event.request.destination === 'document') {
+        return caches.match('/player/index.html');
+      }
+      return new Response('Offline', { status: 503 });
+    })
+  );
+});

package/setup.html

@@ -0,0 +1,220 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Xibo Player Setup</title>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      min-height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 20px;
+    }
+
+    .container {
+      background: white;
+      border-radius: 12px;
+      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
+      padding: 40px;
+      max-width: 500px;
+      width: 100%;
+    }
+
+    h1 {
+      margin-bottom: 10px;
+      color: #333;
+      font-size: 28px;
+    }
+
+    p {
+      color: #666;
+      margin-bottom: 30px;
+      line-height: 1.5;
+    }
+
+    .form-group {
+      margin-bottom: 20px;
+    }
+
+    label {
+      display: block;
+      margin-bottom: 8px;
+      color: #333;
+      font-weight: 500;
+    }
+
+    input {
+      width: 100%;
+      padding: 12px;
+      border: 2px solid #e1e8ed;
+      border-radius: 6px;
+      font-size: 16px;
+      transition: border-color 0.3s;
+    }
+
+    input:focus {
+      outline: none;
+      border-color: #667eea;
+    }
+
+    button {
+      width: 100%;
+      padding: 14px;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      color: white;
+      border: none;
+      border-radius: 6px;
+      font-size: 16px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: transform 0.2s, box-shadow 0.2s;
+    }
+
+    button:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
+    }
+
+    button:active {
+      transform: translateY(0);
+    }
+
+    .info {
+      margin-top: 20px;
+      padding: 15px;
+      background: #f8f9fa;
+      border-radius: 6px;
+      font-size: 14px;
+      color: #666;
+    }
+
+    .info code {
+      background: white;
+      padding: 2px 6px;
+      border-radius: 3px;
+      font-family: monospace;
+      color: #e83e8c;
+    }
+
+    .error {
+      margin-top: 15px;
+      padding: 12px;
+      background: #fee;
+      border: 1px solid #fcc;
+      border-radius: 6px;
+      color: #c33;
+      display: none;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <h1>Xibo Player Setup</h1>
+    <p>Configure your connection to the Xibo CMS.</p>
+
+    <form id="setup-form">
+      <div class="form-group">
+        <label for="cms-address">CMS Address</label>
+        <input
+          type="url"
+          id="cms-address"
+          placeholder="https://cms.example.com"
+          required
+        >
+      </div>
+
+      <div class="form-group">
+        <label for="cms-key">CMS Key</label>
+        <input
+          type="text"
+          id="cms-key"
+          placeholder="Your CMS secret key"
+          required
+        >
+      </div>
+
+      <div class="form-group">
+        <label for="display-name">Display Name</label>
+        <input
+          type="text"
+          id="display-name"
+          placeholder="My Display"
+          required
+        >
+      </div>
+
+      <button type="submit">Connect</button>
+    </form>
+
+    <div id="error" class="error"></div>
+  </div>
+
+  <script type="module">
+    import { config } from './src/config.js';
+    import { XmdsClient } from './src/xmds.js';
+
+    const form = document.getElementById('setup-form');
+    const errorEl = document.getElementById('error');
+
+    // Pre-fill if already configured
+    if (config.isConfigured()) {
+      document.getElementById('cms-address').value = config.cmsAddress;
+      document.getElementById('cms-key').value = config.cmsKey;
+      document.getElementById('display-name').value = config.displayName;
+    }
+
+    form.addEventListener('submit', async (e) => {
+      e.preventDefault();
+      errorEl.style.display = 'none';
+
+      const cmsAddress = document.getElementById('cms-address').value.trim().replace(/\/$/, '');
+      const cmsKey = document.getElementById('cms-key').value.trim();
+      const displayName = document.getElementById('display-name').value.trim();
+
+      // Save config
+      config.cmsAddress = cmsAddress;
+      config.cmsKey = cmsKey;
+      config.displayName = displayName;
+
+      // Test connection
+      try {
+        const button = form.querySelector('button');
+        button.textContent = 'Connecting...';
+        button.disabled = true;
+
+        const xmds = new XmdsClient(config);
+        const result = await xmds.registerDisplay();
+
+        if (result.code === 'READY') {
+          // Success!
+          window.location.href = '/player/';
+        } else {
+          // Not yet authorized
+          errorEl.textContent = `Display registered but not authorized yet. Please authorize "${displayName}" in your CMS, then refresh this page.`;
+          errorEl.style.display = 'block';
+        }
+
+        button.textContent = 'Connect';
+        button.disabled = false;
+      } catch (error) {
+        errorEl.textContent = `Connection failed: ${error.message}`;
+        errorEl.style.display = 'block';
+
+        const button = form.querySelector('button');
+        button.textContent = 'Connect';
+        button.disabled = false;
+      }
+    });
+  </script>
+</body>
+</html>

package/src/data-connectors.js

@@ -0,0 +1,198 @@
+/**
+ * DataConnectorManager - Manages real-time data connectors from CMS
+ *
+ * Data connectors allow widgets to receive real-time data from CMS-configured
+ * data sources. The CMS sends data connector configuration via the schedule XML,
+ * and this manager periodically polls the data source URLs, stores the data,
+ * and emits events so the IC /realtime route can serve it to widgets.
+ *
+ * Usage:
+ *   const manager = new DataConnectorManager();
+ *   manager.setConnectors(schedule.dataConnectors);
+ *   manager.startPolling();
+ *
+ *   // Get data for a widget
+ *   const data = manager.getData('weather_data');
+ *
+ *   // Listen for updates
+ *   manager.on('data-updated', (dataKey, data) => { ... });
+ */
+
+import { EventEmitter, createLogger, fetchWithRetry } from '@xiboplayer/utils';
+
+const log = createLogger('DataConnector');
+
+export class DataConnectorManager extends EventEmitter {
+  constructor() {
+    super();
+
+    // dataKey -> { config, data, timer, lastFetch }
+    this.connectors = new Map();
+  }
+
+  /**
+   * Set active connectors from schedule
+   * Stops any existing polling and reconfigures with new connector list.
+   * @param {Array} connectors - Array of connector config objects from schedule XML
+   *   Each: { id, dataConnectorId, dataKey, url, updateInterval }
+   */
+  setConnectors(connectors) {
+    // Stop existing polling before reconfiguring
+    this.stopPolling();
+
+    // Clear previous connectors
+    this.connectors.clear();
+
+    if (!connectors || connectors.length === 0) {
+      log.debug('No data connectors configured');
+      return;
+    }
+
+    for (const connector of connectors) {
+      if (!connector.dataKey || !connector.url) {
+        log.warn('Skipping data connector with missing dataKey or url:', connector);
+        continue;
+      }
+
+      this.connectors.set(connector.dataKey, {
+        config: connector,
+        data: null,
+        timer: null,
+        lastFetch: null
+      });
+
+      log.info(`Registered data connector: ${connector.dataKey} (interval: ${connector.updateInterval}s)`);
+    }
+
+    log.info(`${this.connectors.size} data connector(s) configured`);
+  }
+
+  /**
+   * Start polling for all active connectors
+   * Performs an initial fetch immediately, then sets up periodic polling.
+   */
+  startPolling() {
+    for (const [dataKey, entry] of this.connectors.entries()) {
+      const { config } = entry;
+      const intervalMs = (config.updateInterval || 300) * 1000;
+
+      // Fetch immediately on start
+      this.fetchData(entry).catch(err => {
+        log.error(`Initial fetch failed for ${dataKey}:`, err);
+      });
+
+      // Set up periodic polling
+      entry.timer = setInterval(() => {
+        this.fetchData(entry).catch(err => {
+          log.error(`Polling fetch failed for ${dataKey}:`, err);
+        });
+      }, intervalMs);
+
+      log.debug(`Started polling for ${dataKey} every ${config.updateInterval}s`);
+    }
+  }
+
+  /**
+   * Stop all polling timers
+   */
+  stopPolling() {
+    for (const [dataKey, entry] of this.connectors.entries()) {
+      if (entry.timer) {
+        clearInterval(entry.timer);
+        entry.timer = null;
+        log.debug(`Stopped polling for ${dataKey}`);
+      }
+    }
+  }
+
+  /**
+   * Get current data for a dataKey
+   * @param {string} dataKey - The data key to look up
+   * @returns {Object|null} The stored data, or null if not available
+   */
+  getData(dataKey) {
+    const entry = this.connectors.get(dataKey);
+    if (!entry) {
+      log.debug(`No data connector found for key: ${dataKey}`);
+      return null;
+    }
+    return entry.data;
+  }
+
+  /**
+   * Get all data keys that have data available
+   * @returns {string[]} Array of data keys with data
+   */
+  getAvailableKeys() {
+    const keys = [];
+    for (const [dataKey, entry] of this.connectors.entries()) {
+      if (entry.data !== null) {
+        keys.push(dataKey);
+      }
+    }
+    return keys;
+  }
+
+  /**
+   * Internal: fetch data from CMS data source
+   * @param {Object} entry - Connector entry from this.connectors
+   */
+  async fetchData(entry) {
+    const { config } = entry;
+    const { dataKey, url } = config;
+
+    log.debug(`Fetching data for ${dataKey}: ${url}`);
+
+    try {
+      const response = await fetchWithRetry(url, {
+        method: 'GET',
+        headers: {
+          'Accept': 'application/json'
+        }
+      }, { maxRetries: 2, baseDelayMs: 2000 });
+
+      if (!response.ok) {
+        log.warn(`Data connector ${dataKey} returned ${response.status}: ${response.statusText}`);
+        return;
+      }
+
+      const contentType = response.headers.get('Content-Type') || '';
+      let data;
+
+      if (contentType.includes('application/json')) {
+        data = await response.json();
+      } else {
+        // Store as raw text if not JSON
+        data = await response.text();
+      }
+
+      const previousData = entry.data;
+      entry.data = data;
+      entry.lastFetch = Date.now();
+
+      log.debug(`Data updated for ${dataKey} (fetched at ${new Date(entry.lastFetch).toISOString()})`);
+
+      // Emit event for listeners (IC route, platform layer)
+      this.emit('data-updated', dataKey, data);
+
+      // Emit a specific event if data actually changed
+      if (JSON.stringify(previousData) !== JSON.stringify(data)) {
+        this.emit('data-changed', dataKey, data);
+      }
+
+    } catch (error) {
+      log.error(`Failed to fetch data for ${dataKey}:`, error);
+      this.emit('fetch-error', dataKey, error);
+    }
+  }
+
+  /**
+   * Cleanup - stop all polling and remove listeners
+   */
+  cleanup() {
+    this.stopPolling();
+    this.connectors.clear();
+    this.removeAllListeners();
+    log.debug('DataConnectorManager cleaned up');
+  }
+}

package/src/index.js

@@ -0,0 +1,4 @@
+// @xiboplayer/core - Player core orchestration
+export { PlayerCore } from './player-core.js';
+export { PlayerState } from './state.js';
+export { DataConnectorManager } from './data-connectors.js';