@tomorrowos/sdk 0.4.2 → 0.4.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tomorrowos/sdk",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "description": "TomorrowOS CMS server SDK — WebSocket transport, pairing, device commands, optional static CMS UI. Includes CLI (tomorrowos init / build) and starter templates.",
   "type": "module",
   "main": "./dist/index.js",

package/templates/cms-starter/package.json

@@ -1,6 +1,6 @@
 {
   "name": "my-cms",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "description": "CMS server on @tomorrowos/sdk. Add your UI (React, static files, etc.) alongside this server.",
   "private": true,
   "type": "module",
@@ -10,7 +10,7 @@
     "build-player": "tomorrowos build --platform tizen"
   },
   "dependencies": {
-    "@tomorrowos/sdk": "^0.4.2"
+    "@tomorrowos/sdk": "^0.4.3"
   },
   "devDependencies": {
     "@types/node": "^20.0.0",

package/templates/cms-starter/public/index.html

@@ -116,7 +116,15 @@
           id="fileInput"
           class="hidden"
           accept="image/*,video/*,.wgt,.zip"
+          multiple
         />
+        <div id="uploadStatusShell" class="upload-status hidden" aria-live="polite">
+          <div id="uploadStatusText" class="upload-status-text">Uploading...</div>
+          <div class="upload-progress-track">
+            <div id="uploadProgressBar" class="upload-progress-bar"></div>
+          </div>
+          <div id="uploadQueueText" class="upload-queue-text"></div>
+        </div>
         <ul id="playlistList" class="playlist-list">
           <li class="playlist-empty" id="playlistEmpty">Select or create a playlist, then add assets.</li>
         </ul>

package/templates/cms-starter/public/methods.js

@@ -19,6 +19,11 @@ let editorItems = [];
 let publishModalDeviceId = null;
 
 let devicePollTimer = null;
+let uploadQueue = [];
+let uploadInProgress = false;
+
+const UPLOAD_MAX_RETRIES = 3;
+const UPLOAD_TIMEOUT_MS = 120000;
 
 function escapeHtml(value) {
   return String(value ?? "")
@@ -71,6 +76,34 @@ function showResult(data) {
   document.getElementById("result").textContent = JSON.stringify(data, null, 2);
 }
 
+function setAssetUploadBusy(isBusy) {
+  const addBtn = document.getElementById("addAssetBtn");
+  if (addBtn) {
+    addBtn.disabled = isBusy;
+    addBtn.textContent = isBusy ? "Uploading..." : "+";
+  }
+}
+
+function updateUploadStatusUi(status) {
+  const shell = document.getElementById("uploadStatusShell");
+  const text = document.getElementById("uploadStatusText");
+  const bar = document.getElementById("uploadProgressBar");
+  const queue = document.getElementById("uploadQueueText");
+  if (!shell || !text || !bar || !queue) return;
+
+  if (!status || status.hidden) {
+    shell.classList.add("hidden");
+    bar.style.width = "0%";
+    return;
+  }
+
+  shell.classList.remove("hidden");
+  text.textContent = status.text || "Uploading...";
+  queue.textContent = status.queueText || "";
+  const percent = Math.max(0, Math.min(100, Number(status.percent) || 0));
+  bar.style.width = `${percent}%`;
+}
+
 function isLocalPanelHost(hostname) {
   const h = String(hostname || "").toLowerCase();
   return h === "localhost" || h === "127.0.0.1" || h === "[::1]";
@@ -846,26 +879,68 @@ async function removePlaylistFromDevice(deviceId, playlistId) {
   await fetchDevices();
 }
 
-async function uploadFile(file) {
-  const q = new URLSearchParams({ filename: file.name });
-  const res = await fetch(`/media/upload?${q.toString()}`, {
-    method: "POST",
-    headers: { "Content-Type": "application/octet-stream" },
-    body: file
+function uploadFileWithProgress(file, { onProgress, attempt }) {
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+    const q = new URLSearchParams({ filename: file.name });
+    xhr.open("POST", `/media/upload?${q.toString()}`, true);
+    xhr.timeout = UPLOAD_TIMEOUT_MS;
+    xhr.setRequestHeader("Content-Type", "application/octet-stream");
+
+    xhr.upload.onprogress = (event) => {
+      if (!event.lengthComputable) return;
+      const percent = Math.round((event.loaded / event.total) * 100);
+      if (typeof onProgress === "function") onProgress(percent);
+    };
+
+    xhr.onerror = () => reject(new Error(`Network error on attempt ${attempt}`));
+    xhr.ontimeout = () => reject(new Error(`Upload timed out after ${UPLOAD_TIMEOUT_MS / 1000}s`));
+
+    xhr.onload = () => {
+      let payload = {};
+      try {
+        payload = xhr.responseText ? JSON.parse(xhr.responseText) : {};
+      } catch {
+        payload = {};
+      }
+      if (xhr.status >= 200 && xhr.status < 300 && payload.status !== "failed") {
+        resolve(payload);
+        return;
+      }
+      reject(new Error(payload.error || `Upload failed (${xhr.status})`));
+    };
+
+    xhr.send(file);
   });
-  const data = await res.json();
-  if (!res.ok || data.status === "failed") {
-    throw new Error(data.error || `Upload failed (${res.status})`);
+}
+
+async function uploadFile(file, onProgress) {
+  let lastErr = null;
+  for (let attempt = 1; attempt <= UPLOAD_MAX_RETRIES; attempt += 1) {
+    try {
+      const payload = await uploadFileWithProgress(file, { onProgress, attempt });
+      return payload;
+    } catch (err) {
+      lastErr = err;
+      if (attempt >= UPLOAD_MAX_RETRIES) break;
+      await new Promise((resolve) => setTimeout(resolve, 500 * attempt));
+    }
   }
-  return data;
+  throw lastErr || new Error("Upload failed");
 }
 
-async function addAssetFromFile(file) {
+async function addAssetFromFile(file, queueIndex, queueTotal) {
   if (!isPlaylistEditorOpen()) {
     newPlaylistDraft();
   }
   const type = inferMediaType(file.name, file.type);
-  const data = await uploadFile(file);
+  const data = await uploadFile(file, (percent) => {
+    updateUploadStatusUi({
+      text: `Uploading ${file.name} (${percent}%)`,
+      percent,
+      queueText: `File ${queueIndex}/${queueTotal}`
+    });
+  });
   const durationMs = await resolveVideoDurationMs(file, type, data);
   editorItems.push({
     id: crypto.randomUUID(),
@@ -878,11 +953,51 @@ async function addAssetFromFile(file) {
   showResult({
     status: "uploaded",
     ...data,
+    fileName: file.name,
     detectedDurationMs: durationMs,
     detectedDurationSec: Math.round(durationMs / 1000)
   });
 }
 
+async function processUploadQueue() {
+  if (uploadInProgress) return;
+  if (uploadQueue.length === 0) {
+    updateUploadStatusUi({ hidden: true });
+    setAssetUploadBusy(false);
+    return;
+  }
+
+  uploadInProgress = true;
+  setAssetUploadBusy(true);
+  const total = uploadQueue.length;
+  const failures = [];
+
+  try {
+    for (let i = 0; i < total; i += 1) {
+      const file = uploadQueue[i];
+      try {
+        await addAssetFromFile(file, i + 1, total);
+      } catch (err) {
+        failures.push({ file: file.name, error: err?.message || String(err) });
+      }
+    }
+  } finally {
+    uploadQueue = [];
+    uploadInProgress = false;
+    setAssetUploadBusy(false);
+    updateUploadStatusUi({ hidden: true });
+  }
+
+  if (failures.length > 0) {
+    showResult({ status: "upload_completed_with_failures", failures });
+    alert(
+      `Uploaded with ${failures.length} failure(s). Check result panel for details.`
+    );
+  } else {
+    showResult({ status: "upload_completed", total });
+  }
+}
+
 async function verify() {
   const code = String(document.getElementById("code").value || "")
     .trim()
@@ -982,6 +1097,7 @@ document.addEventListener("DOMContentLoaded", () => {
   });
 
   document.getElementById("addAssetBtn")?.addEventListener("click", () => {
+    if (uploadInProgress) return;
     if (!isPlaylistEditorOpen()) {
       newPlaylistDraft();
     }
@@ -991,11 +1107,8 @@ document.addEventListener("DOMContentLoaded", () => {
   document.getElementById("fileInput")?.addEventListener("change", async (ev) => {
     const files = ev.target.files;
     if (!files?.length) return;
-    try {
-      for (const file of files) await addAssetFromFile(file);
-    } catch (err) {
-      alert(err.message);
-    }
+    uploadQueue.push(...Array.from(files));
+    void processUploadQueue();
     ev.target.value = "";
   });
 });

package/templates/cms-starter/public/panel.css

@@ -306,6 +306,42 @@ button.danger {
   overflow-y: auto;
 }
 
+.upload-status {
+  margin: 0.25rem 0.75rem 0.5rem;
+  padding: 0.55rem 0.6rem;
+  border: 1px solid #e4e1dc;
+  border-radius: 8px;
+  background: #fafaf9;
+}
+
+.upload-status-text {
+  font-size: 0.78rem;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 0.35rem;
+}
+
+.upload-progress-track {
+  width: 100%;
+  height: 8px;
+  border-radius: 999px;
+  overflow: hidden;
+  background: #ece8e2;
+}
+
+.upload-progress-bar {
+  width: 0%;
+  height: 100%;
+  background: #ff8a3d;
+  transition: width 120ms linear;
+}
+
+.upload-queue-text {
+  margin-top: 0.35rem;
+  font-size: 0.72rem;
+  color: #666;
+}
+
 .playlist-empty {
   padding: 1.5rem 1rem;
   text-align: center;