DisplayX/player.html at main · rupesh2k/DisplayX · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="Content-Security-Policy" content="default-src 'self' https:; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' https: blob: data:; media-src 'self' https: blob:; connect-src 'self' https: http://localhost:* http://127.0.0.1:* blob:;">
  <title>DisplayX Player</title>
  <link rel="stylesheet" href="css/player.css">
</head>
<body>
  <!-- Loading State -->
  <div id="loading-screen" class="screen active">
    <div class="spinner"></div>
    <p id="loading-message">Loading content...</p>
    <p id="loading-progress"></p>
  </div>

  <!-- Error State -->
  <div id="error-screen" class="screen">
    <svg class="error-icon" viewBox="0 0 64 64" aria-hidden="true">
      <path d="M32 8 L56 56 L8 56 Z" fill="none" stroke="#ea580c" stroke-width="2"/>
      <text x="32" y="48" text-anchor="middle" font-size="24" fill="#ea580c">!</text>
    </svg>
    <h1>Configuration Error</h1>
    <p id="error-message">Failed to load configuration</p>
    <div class="button-group">
      <button id="retry-btn" class="btn btn-primary">Retry</button>
      <button id="use-cached-btn" class="btn btn-secondary">Use Cached</button>
    </div>
  </div>

  <!-- Player State (Normal Playback) -->
  <div id="player-screen" class="screen">
    <!-- Offline Badge -->
    <div id="offline-badge" class="badge" role="status" aria-live="polite">
      <svg class="badge-icon" viewBox="0 0 16 16" aria-hidden="true">
        <path d="M8 2 L8 10 M4 6 L8 10 L12 6" fill="none" stroke="white" stroke-width="2"/>
      </svg>
      <span>Offline</span>
    </div>

    <!-- Asset Error Overlay -->
    <div id="asset-error-overlay" class="asset-error-overlay" style="display: none;">
      <div class="asset-error-content">
        <svg class="error-icon" viewBox="0 0 64 64" aria-hidden="true">
          <circle cx="32" cy="32" r="28" fill="none" stroke="#ea580c" stroke-width="2"/>
          <path d="M32 20 L32 36 M32 44 L32 46" stroke="#ea580c" stroke-width="3" stroke-linecap="round"/>
        </svg>
        <h2 id="asset-error-title">Asset Load Failed</h2>
        <p id="asset-error-message"></p>
        <p class="asset-error-detail">Will retry with next asset...</p>
      </div>
    </div>

    <!-- Asset Display -->
    <img id="asset-image" class="asset" alt="Signage content" crossorigin="anonymous" style="display: none;">
    <video id="asset-video" class="asset" aria-label="Signage content" crossorigin="anonymous" playsinline preload="auto" style="display: none;"></video>

    <!-- Watermark -->
    <div class="watermark" aria-label="Powered by DisplayX">
      <span class="watermark-text">Powered by <strong>DisplayX</strong></span>
    </div>
  </div>

  <!-- HLS.js for livestream support -->
  <script src="node_modules/hls.js/dist/hls.min.js"></script>

  <script type="module" src="js/player.js"></script>
</body>
</html>