@tomorrowos/sdk 0.8.4 → 0.8.6

package/REPLIT_SETUP.md

@@ -232,7 +232,7 @@ Allowed extras (optional): `"build-player": "tomorrowos build --platform tizen"`
     "node": ">=20"
   },
   "dependencies": {
-    "@tomorrowos/sdk": "^0.8.4",
+    "@tomorrowos/sdk": "^0.8.6",
     "dotenv": "^17.2.3",
     "tsx": "^4.19.0"
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tomorrowos/sdk",
-  "version": "0.8.4",
+  "version": "0.8.6",
   "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.8.4",
+  "version": "0.8.6",
   "description": "CMS server on @tomorrowos/sdk. Add your UI (React, static files, etc.) alongside this server.",
   "private": true,
   "type": "module",
@@ -13,7 +13,7 @@
     "build-player": "tomorrowos build --platform tizen"
   },
   "dependencies": {
-    "@tomorrowos/sdk": "^0.8.4",
+    "@tomorrowos/sdk": "^0.8.6",
     "dotenv": "^17.2.3",
     "tsx": "^4.19.0"
   },

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

@@ -155,6 +155,23 @@
       </div>
     </div>
 
+    <div id="downloadFailedModal" class="modal hidden" role="dialog" aria-modal="true">
+      <div class="modal-backdrop" data-close-download-failed-modal="1"></div>
+      <div class="modal-card">
+        <h2>Download failed</h2>
+        <p class="hint" id="downloadFailedModalMessage">Could not download this asset.</p>
+        <p class="hint">
+          For permanent, reliable storage of media assets, configure
+          <strong>Cloudinary</strong> on your CMS server (<code>CLOUDINARY_CLOUD_NAME</code>,
+          <code>CLOUDINARY_API_KEY</code>, <code>CLOUDINARY_API_SECRET</code>). Uploads stored on
+          Cloudinary use stable public URLs that are easier to download and share.
+        </p>
+        <div class="modal-actions">
+          <button type="button" data-close-download-failed-modal="1">Close</button>
+        </div>
+      </div>
+    </div>
+
     <script src="./methods.js" defer></script>
   </body>
 </html>

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

@@ -808,9 +808,16 @@ function renderEditorAssets() {
       meta.textContent = `${item.type} · ${Math.round(item.durationMs / 1000)}s`;
     });
 
+    const downloadBtn = document.createElement("button");
+    downloadBtn.type = "button";
+    downloadBtn.className = "playlist-item-btn";
+    downloadBtn.textContent = "Download";
+    downloadBtn.title = "Download asset";
+    downloadBtn.addEventListener("click", () => void downloadMediaAsset(item));
+
     const removeBtn = document.createElement("button");
     removeBtn.type = "button";
-    removeBtn.className = "danger";
+    removeBtn.className = "danger playlist-item-btn";
     removeBtn.textContent = "Remove";
     removeBtn.addEventListener("click", () => {
       editorItems = editorItems.filter((x) => x.id !== item.id);
@@ -818,6 +825,7 @@ function renderEditorAssets() {
     });
 
     actions.appendChild(durInput);
+    actions.appendChild(downloadBtn);
     actions.appendChild(removeBtn);
     li.appendChild(name);
     li.appendChild(meta);
@@ -1679,6 +1687,70 @@ function closeScreenshotModal() {
   modal?.classList.add("hidden");
 }
 
+function openDownloadFailedModal(detail) {
+  const modal = document.getElementById("downloadFailedModal");
+  const message = document.getElementById("downloadFailedModalMessage");
+  if (!modal) return;
+  if (message) {
+    message.textContent = detail
+      ? `Could not download this asset: ${detail}`
+      : "Could not download this asset.";
+  }
+  modal.classList.remove("hidden");
+}
+
+function closeDownloadFailedModal() {
+  document.getElementById("downloadFailedModal")?.classList.add("hidden");
+}
+
+function sanitizeDownloadFilename(name) {
+  const base = String(name || "asset").trim() || "asset";
+  return base.replace(/[<>:"/\\|?*\x00-\x1f]/g, "_");
+}
+
+async function downloadMediaAsset(item) {
+  const candidates = [];
+  const sameOriginPath = resolveVerificationMediaUrl(item.url);
+  if (sameOriginPath) candidates.push(sameOriginPath);
+  try {
+    const absolute = absoluteMediaUrl(item.url);
+    if (absolute && !candidates.includes(absolute)) candidates.push(absolute);
+  } catch (_) {}
+
+  if (candidates.length === 0) {
+    openDownloadFailedModal("Media URL is not available.");
+    return;
+  }
+
+  const filename = sanitizeDownloadFilename(item.name || item.url.split("/").pop() || "asset");
+
+  let lastError = "Network or browser error.";
+  for (const url of candidates) {
+    try {
+      const res = await fetch(url);
+      if (!res.ok) {
+        lastError = `HTTP ${res.status}`;
+        continue;
+      }
+      const blob = await res.blob();
+      const objectUrl = URL.createObjectURL(blob);
+      const anchor = document.createElement("a");
+      anchor.href = objectUrl;
+      anchor.download = filename;
+      anchor.style.display = "none";
+      document.body.appendChild(anchor);
+      anchor.click();
+      anchor.remove();
+      URL.revokeObjectURL(objectUrl);
+      return;
+    } catch (err) {
+      lastError = err?.message || lastError;
+    }
+  }
+
+  openDownloadFailedModal(lastError);
+}
+
 function startDevicePolling() {
   if (devicePollTimer) clearInterval(devicePollTimer);
   void fetchDevices();
@@ -1710,6 +1782,9 @@ document.addEventListener("DOMContentLoaded", () => {
   document.querySelectorAll("[data-close-screenshot-modal]").forEach((el) => {
     el.addEventListener("click", closeScreenshotModal);
   });
+  document.querySelectorAll("[data-close-download-failed-modal]").forEach((el) => {
+    el.addEventListener("click", closeDownloadFailedModal);
+  });
 
   document.getElementById("addAssetBtn")?.addEventListener("click", () => {
     if (uploadInProgress) return;

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

@@ -430,8 +430,10 @@ button.danger {
 }
 
 .playlist-assets-hint {
-  margin: 0 0 0.75rem;
+  margin: 0;
+  padding: 0.65rem 1rem 0.75rem;
   font-size: 0.78rem;
+  line-height: 1.45;
 }
 
 .playlist-item {
@@ -441,6 +443,8 @@ button.danger {
   margin-bottom: 0.5rem;
   background: #fafaf9;
   position: relative;
+  min-width: 0;
+  overflow: hidden;
 }
 
 .playlist-item--dragging {
@@ -501,19 +505,34 @@ button.danger {
 }
 
 .playlist-item-actions {
-  display: flex;
+  display: grid;
+  grid-template-columns: minmax(0, 4.25rem) minmax(0, 1fr) minmax(0, 1fr);
   gap: 0.35rem;
-  align-items: center;
+  align-items: stretch;
+  width: 100%;
+  min-width: 0;
 }
 
 .playlist-item-actions input[type="number"] {
-  width: 5rem;
+  width: 100%;
+  min-width: 0;
   font: inherit;
-  padding: 0.25rem 0.4rem;
+  padding: 0.28rem 0.35rem;
   border: 1px solid #d6d2cb;
   border-radius: 4px;
 }
 
+.playlist-item-actions button {
+  min-width: 0;
+  padding: 0.28rem 0.35rem;
+  font-size: 0.72rem;
+  line-height: 1.2;
+  border-radius: 4px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .publish-bar {
   padding: 1rem 0 0;
 }