Upload panel: drag-drop multi-file queue, parallel uploads, MP4+AVI support, styled UI

index.html

@@ -87,6 +87,40 @@
     .encode-body progress { flex: 1; height: 4px; accent-color: var(--accent); }
     .encode-body .enc-status { font-size: 12px; color: var(--dim); min-width: 180px; text-align: right; }
 
+    /* upload panel */
+    .upload-toggle svg { fill: #8ab4ff; }
+    .upload-toggle::before { content: ""; display: block; width: 8px; height: 8px; border-radius: 50%; background: #3ea6ff; box-shadow: 0 0 8px #3ea6ff; }
+    .upload-body { border-top: 1px solid #1c1c1c; }
+    .upload-drop { flex: 1; min-width: 240px; border: 2px dashed #555; border-radius: 8px; padding: 22px 16px; text-align: center; color: var(--dim); font-size: 13px; cursor: pointer; transition: border-color .15s, background .15s; }
+    .upload-drop:hover, .upload-drop.drag { border-color: var(--accent); background: rgba(62,166,255,.08); color: var(--text); }
+    .upload-drop b { color: var(--accent); font-weight: 500; }
+    .upload-drop input { display: none; }
+    .upload-file-chip { display: none; align-items: center; gap: 8px; background: #1a1a1a; border: 1px solid #3ea6ff55; border-radius: 6px; padding: 8px 12px; font-size: 12px; max-width: 320px; }
+    .upload-file-chip.show { display: flex; }
+    .upload-file-chip .chip-name { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .upload-file-chip .chip-size { color: var(--dim); white-space: nowrap; }
+    .upload-file-chip .chip-x { background: none; border: none; color: var(--dim); cursor: pointer; font-size: 14px; padding: 0 2px; }
+    .upload-file-chip .chip-x:hover { color: var(--red); }
+    .upload-queue { display: none; flex-direction: column; gap: 4px; flex: 1 1 100%; min-width: 260px; max-height: 240px; overflow-y: auto; }
+    .upload-queue.show { display: flex; }
+    .q-count { color: var(--dim); font-size: 11px; padding: 2px 0; }
+    .q-item { display: flex; align-items: center; gap: 8px; font-size: 12px; background: #1a1a1a; border-radius: 4px; padding: 5px 8px; }
+    .q-item .q-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .q-item .q-size { color: var(--dim); white-space: nowrap; }
+    .q-item .q-state { min-width: 70px; text-align: right; color: var(--dim); white-space: nowrap; }
+    .q-item.ok .q-state { color: #7bd97b; }
+    .q-item.err .q-state { color: var(--red); }
+    .q-item.busy .q-state { color: var(--accent); }
+    .q-item .q-bar { position: relative; width: 60px; height: 3px; background: #333; border-radius: 2px; overflow: hidden; flex: 0 0 60px; }
+    .q-item .q-bar i { position: absolute; inset: 0; background: var(--accent); transform-origin: left; transform: scaleX(0); display: block; }
+    .upload-btn { position: relative; overflow: hidden; }
+    .upload-btn.busy { color: transparent; pointer-events: none; }
+    .upload-btn.busy::after { content: ""; position: absolute; inset: 0; margin: auto; width: 14px; height: 14px; border: 2px solid rgba(0,0,0,.3); border-top-color: #000; border-radius: 50%; animation: spin .7s linear infinite; }
+    @keyframes spin { to { transform: rotate(360deg); } }
+    .upload-status { transition: color .2s; }
+    .upload-status.ok { color: #7bd97b; }
+    .upload-status.err { color: var(--red); }
+
     @media (max-width: 600px) {
       .page { padding: 8px; }
       .ctrl-row { gap: 3px; }
@@ -169,6 +203,20 @@
     <div class="highlight-list" id="highlight-list"><span style="color:var(--dim);font-size:12px">No highlights yet.</span></div>
   </section>
 
+  <div class="encode-panel">
+    <button class="encode-toggle upload-toggle" id="upload-toggle"><svg viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>Upload</button>
+    <div class="encode-body upload-body" id="upload-body" style="flex-wrap:wrap;gap:14px">
+      <div class="upload-drop" id="upload-drop" title="Click to browse, or drag MP4/AVI files here">
+        Drop MP4/AVI files here or <b>browse</b><br><span style="font-size:11px">named HH.MM.SS.mp4 or .avi, multiple files allowed</span>
+        <input type="file" id="upload-file" accept="video/mp4,video/x-msvideo,.avi" multiple>
+      </div>
+      <div class="upload-queue" id="upload-queue"></div>
+      <span class="enc-status" style="min-width:110px">Date: <b id="upload-date" style="color:var(--text)">-</b></span>
+      <button id="upload-btn" class="upload-btn" disabled>Upload all</button>
+      <span class="enc-status upload-status" id="upload-status" style="min-width:200px;text-align:left">Ready</span>
+    </div>
+  </div>
+
   <div class="encode-panel">
     <button class="encode-toggle" id="encode-toggle"><svg viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>Encoding</button>
     <div class="encode-body" id="encode-body">
@@ -512,6 +560,121 @@
     else if (e.code === "KeyM") { video.muted = !video.muted; updateVolIcon(); }
   });
 
+  // upload
+  const uploadToggle = document.querySelector("#upload-toggle");
+  uploadToggle.addEventListener("click", () => {
+    uploadToggle.classList.toggle("open");
+    document.querySelector("#upload-body").classList.toggle("show");
+    document.querySelector("#upload-date").textContent = dateSelect.value || "-";
+  });
+  const uploadFile = document.querySelector("#upload-file");
+  const uploadBtn = document.querySelector("#upload-btn");
+  const uploadDrop = document.querySelector("#upload-drop");
+  const uploadQueue = document.querySelector("#upload-queue");
+  const uploadStatus = document.querySelector("#upload-status");
+  let queue = [];
+  function setStatus(msg, cls) {
+    uploadStatus.textContent = msg;
+    uploadStatus.className = "enc-status upload-status" + (cls ? " " + cls : "");
+  }
+  function renderQueue() {
+    uploadQueue.replaceChildren();
+    uploadQueue.classList.toggle("show", queue.length > 0);
+    if (!queue.length) return;
+    const counts = queue.reduce((acc, e) => (acc[e.state || "queued"] = (acc[e.state || "queued"] || 0) + 1, acc), {});
+    const summary = document.createElement("div");
+    summary.className = "q-count";
+    summary.textContent = `${queue.length} file${queue.length > 1 ? "s" : ""}: ${counts.queued || 0} queued, ${counts.busy || 0} sending, ${counts.ok || 0} stored, ${counts.err || 0} failed`;
+    uploadQueue.append(summary);
+    queue.forEach(entry => {
+      const row = document.createElement("div");
+      row.className = "q-item" + (entry.state ? " " + entry.state : "");
+      const name = document.createElement("span"); name.className = "q-name"; name.textContent = entry.file.name;
+      const size = document.createElement("span"); size.className = "q-size"; size.textContent = (entry.file.size / 1048576).toFixed(1) + " MB";
+      const bar = document.createElement("span"); bar.className = "q-bar";
+      const fill = document.createElement("i"); bar.append(fill);
+      entry.bar = fill;
+      const state = document.createElement("span"); state.className = "q-state";
+      state.textContent = entry.state === "ok" ? "stored" : entry.state === "err" ? entry.msg : entry.state === "busy" ? "sending" : "queued";
+      row.append(name, size, bar, state);
+      uploadQueue.append(row);
+    });
+    uploadBtn.disabled = !queue.some(e => e.state === "queued");
+  }
+  function addFiles(files) {
+    for (const file of files) {
+      if (!/\.(mp4|avi)$/i.test(file.name)) continue;
+      queue.push({file, state: "queued"});
+    }
+    renderQueue();
+  }
+  function clearDone() {
+    queue = queue.filter(e => e.state === "err");
+    renderQueue();
+  }
+  uploadDrop.addEventListener("click", () => uploadFile.click());
+  uploadFile.addEventListener("change", () => addFiles(uploadFile.files));
+  ["dragover", "dragenter"].forEach(ev => uploadDrop.addEventListener(ev, e => { e.preventDefault(); uploadDrop.classList.add("drag"); }));
+  ["dragleave", "drop"].forEach(ev => uploadDrop.addEventListener(ev, e => { e.preventDefault(); uploadDrop.classList.remove("drag"); }));
+  uploadDrop.addEventListener("drop", e => addFiles(e.dataTransfer.files));
+  function normName(name) {
+    const dot = name.lastIndexOf(".");
+    if (dot <= 0) return null;
+    const base = name.slice(0, dot).padStart(8, "0").slice(-8);
+    const ext = name.slice(dot).toLowerCase();
+    return /^\d{2}\.\d{2}\.\d{2}\.(mp4|avi)$/.test(base + ext) ? base + ext : null;
+  }
+  async function uploadOne(entry) {
+    const filename = normName(entry.file.name);
+    if (!filename) {
+      entry.state = "err"; entry.msg = "bad name";
+      renderQueue();
+      return false;
+    }
+    entry.state = "busy"; renderQueue();
+    return new Promise(resolve => {
+      const xhr = new XMLHttpRequest();
+      xhr.open("POST", `/api/upload?date=${dateSelect.value}&filename=${encodeURIComponent(filename)}`);
+      xhr.upload.addEventListener("progress", e => {
+        if (e.lengthComputable && entry.bar) entry.bar.style.transform = `scaleX(${e.loaded / e.total})`;
+      });
+      xhr.addEventListener("load", () => {
+        let d = {};
+        try { d = JSON.parse(xhr.responseText); } catch {}
+        entry.state = xhr.status < 300 ? "ok" : "err";
+        entry.msg = xhr.status < 300 ? "stored" : (d.message || `HTTP ${xhr.status}`).slice(0, 40);
+        if (entry.bar) entry.bar.style.transform = "scaleX(1)";
+        renderQueue();
+        resolve(xhr.status < 300);
+      });
+      xhr.addEventListener("error", () => {
+        entry.state = "err"; entry.msg = "network";
+        renderQueue();
+        resolve(false);
+      });
+      xhr.send(entry.file);
+    });
+  }
+  uploadBtn.addEventListener("click", async () => {
+    const pending = queue.filter(e => e.state === "queued");
+    if (!pending.length) return;
+    uploadBtn.disabled = true;
+    let okCount = 0, done = 0;
+    const workers = Array.from({length: Math.min(3, pending.length)}, async () => {
+      while (pending.length) {
+        const entry = pending.shift();
+        if (await uploadOne(entry)) okCount++;
+        done++;
+        setStatus(`${done}/${pending.length + done} sent...`);
+      }
+    });
+    await Promise.all(workers);
+    const errs = queue.filter(e => e.state === "err").length;
+    setStatus(okCount && !errs ? `All ${okCount} stored` : `${okCount} stored${errs ? `, ${errs} failed` : ""}`, errs ? "err" : "ok");
+    if (okCount) loadDate(dateSelect.value);
+    if (!errs) clearDone();
+  });
+
   dateSelect.addEventListener("change", () => loadDate(dateSelect.value));
   addEventListener("resize", drawTimeline);
   loadDate("").catch(() => {});

server.py

@@ -109,7 +109,10 @@ class PlayerHandler(BaseHTTPRequestHandler):
         self.send_error(404)
 
     def do_POST(self):
-        if urlparse(self.path).path == "/api/encode":
+        path = urlparse(self.path).path
+        if path == "/api/upload":
+            return self.handle_upload()
+        if path == "/api/encode":
             if not self.server.encode_status["running"]:
                 threading.Thread(target=run_encoding, args=(self.server,), daemon=True).start()
             return self.send_json(self.server.encode_status)
@@ -140,6 +143,63 @@ class PlayerHandler(BaseHTTPRequestHandler):
             return self.send_json(highlight)
         self.send_error(404)
 
+    def handle_upload(self):
+        try:
+            length = int(self.headers.get("Content-Length", "0"))
+        except ValueError:
+            return self.send_error(400, "Invalid content length")
+        max_bytes = 2 * 1024 * 1024 * 1024
+        if not 0 < length <= max_bytes:
+            return self.send_error(413, "Missing or oversized body (limit 2 GiB)")
+        filename = parse_qs(urlparse(self.path).query).get("filename", [""])[0]
+        match = VIDEO_RE.fullmatch(filename)
+        if not match:
+            return self.send_error(400, "Filename must be HH.MM.SS.mp4 or HH.MM.SS.avi (e.g. 09.28.36.mp4)")
+        hour, minute, second = map(int, match.groups()[:3])
+        if hour > 23 or minute > 59 or second > 59:
+            return self.send_error(400, "Invalid time in filename")
+        try:
+            day = normalize_date(parse_qs(urlparse(self.path).query).get("date", [""])[0])
+        except ValueError:
+            return self.send_error(400, "date must be YYYYMMDD or YYYY-MM-DD")
+        suffix = match.group(4).lower()
+        if suffix not in ("mp4", "avi"):
+            return self.send_error(400, "Only .mp4 or .avi uploads are accepted")
+
+        target_dir = self.server.output_root / day
+        if suffix == "avi":
+            # AVI sources mirror the real recorder: stored in the source tree for the Encoding menu
+            target_dir = self.server.source_root / day
+        target = target_dir / f"{hour:02d}.{minute:02d}.{second:02d}.{suffix}"
+        temporary = target.with_suffix(f".uploading.{suffix}")
+        try:
+            target_dir.mkdir(parents=True, exist_ok=True)
+            received = 0
+            with temporary.open("wb") as sink:
+                while received < length:
+                    chunk = self.rfile.read(min(256 * 1024, length - received))
+                    if not chunk:
+                        raise OSError("client disconnected mid-upload")
+                    sink.write(chunk)
+                    received += len(chunk)
+            if target.exists():
+                temporary.unlink()
+                return self.send_error(409, "A recording already exists at that time; nothing was overwritten")
+            temporary.replace(target)
+        except OSError:
+            temporary.unlink(missing_ok=True)
+            return self.send_error(500, "Failed to store upload")
+        self.server.recordings.setdefault(day, [])
+        if suffix == "mp4" and not any(clip["name"] == target.name for clip in self.server.recordings[day]):
+            self.server.recordings[day].append({
+                "name": target.name,
+                "start": hour * 3600 + minute * 60 + second,
+                "duration": 120,
+                "path": target,
+            })
+            self.server.recordings[day].sort(key=lambda clip: clip["start"])
+        return self.send_json({"ok": True, "file": f"{day}/{target.name}"})
+
     def do_DELETE(self):
         request = urlparse(self.path)
         if request.path != "/api/highlights":