1  <!-- index.html -->
   2  <!DOCTYPE html>
   3  <html lang="en">
   4  <head>
   5    <meta charset="UTF-8">
   6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   7    <title>Magnet Streamer</title>
   8    <style>
   9      body {
  10        font-family: Arial, sans-serif;
  11        background: #121212;
  12        color: white;
  13        text-align: center;
  14        padding: 50px;
  15      }
  16      input[type="text"] {
  17        width: 60%;
  18        padding: 12px;
  19        font-size: 16px;
  20        border: none;
  21        border-radius: 4px;
  22        margin-bottom: 20px;
  23      }
  24      button {
  25        padding: 12px 24px;
  26        font-size: 16px;
  27        background-color: #4CAF50;
  28        color: white;
  29        border: none;
  30        border-radius: 4px;
  31        cursor: pointer;
  32      }
  33      button:hover {
  34        background-color: #45a049;
  35      }
  36      #status, #log, #meta {
  37        margin-top: 30px;
  38        font-size: 14px;
  39        white-space: pre-line;
  40      }
  41      ul {
  42        list-style-type: none;
  43        padding-left: 0;
  44      }
  45      li {
  46        text-align: left;
  47        padding: 4px 0;
  48      }
  49    </style>
  50  </head>
  51  <body>
  52    <h1>🎬 Stream a Magnet Link</h1>
  53    <form id="magnetForm">
  54      <input type="text" id="magnetInput" name="magnet" placeholder="Paste magnet link here" required />
  55      <br />
  56      <button type="submit">▶️ Play</button>
  57    </form>
  58  
  59    <div id="status"></div>
  60    <div id="log"></div>
  61    <ul id="meta"></ul>
  62  
  63    <script>
  64      const form = document.getElementById('magnetForm');
  65      const input = document.getElementById('magnetInput');
  66      const statusEl = document.getElementById("status");
  67      const metaEl = document.getElementById("meta");
  68      const logEl = document.getElementById("log");
  69      let magnet = null;
  70  
  71      form.addEventListener('submit', function (e) {
  72        e.preventDefault();
  73        magnet = input.value.trim();
  74        if (!magnet.startsWith("magnet:?")) {
  75          alert("Please enter a valid magnet link");
  76          return;
  77        }
  78  
  79        const formElem = document.createElement('form');
  80        formElem.method = 'POST';
  81        formElem.action = '/';
  82        const inputElem = document.createElement('input');
  83        inputElem.type = 'hidden';
  84        inputElem.name = 'magnet';
  85        inputElem.value = magnet;
  86        formElem.appendChild(inputElem);
  87        document.body.appendChild(formElem);
  88        formElem.submit();
  89      });
  90  
  91      // If we're already on the /player page with magnet param, start polling
  92      window.addEventListener('DOMContentLoaded', () => {
  93        const params = new URLSearchParams(window.location.search);
  94        if (params.has("magnet")) {
  95          magnet = params.get("magnet");
  96          pollStatus();
  97        }
  98      });
  99  
 100      async function pollStatus() {
 101        const res = await fetch(`/status?magnet=${encodeURIComponent(magnet)}`);
 102        const data = await res.json();
 103  
 104        statusEl.textContent = `📦 Downloading… ${data.progress}%`;
 105        logEl.textContent = data.log || '';
 106  
 107        if (data.metadata && metaEl.innerHTML === "") {
 108          data.meta.files.forEach(f => {
 109            const li = document.createElement("li");
 110            li.textContent = `${f.name} (${(f.size / (1024 * 1024)).toFixed(2)} MB)`;
 111            metaEl.appendChild(li);
 112          });
 113        }
 114  
 115        if (data.ready) {
 116          window.location.href = `/stream?magnet=${encodeURIComponent(magnet)}`;
 117        } else {
 118          setTimeout(pollStatus, 3000);
 119        }
 120      }
 121    </script>
 122  </body>
 123  </html>