@tomorrowos/sdk 0.3.0 → 0.3.1

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

@@ -9,6 +9,9 @@ let devicesCache = [];
 /** @type {string|null} */
 let selectedPlaylistId = null;
 
+/** True while creating a new playlist locally (assets allowed before Save). */
+let playlistDraftActive = false;
+
 /** @type {{ id: string, url: string, name: string, type: string, durationMs: number }[]} */
 let editorItems = [];
 
@@ -171,15 +174,36 @@ function getSelectedPlaylist() {
 }
 
 async function fetchPlaylists() {
-  const res = await fetch("/playlists");
-  const data = await res.json();
-  if (Array.isArray(data.playlists)) {
-    playlistsCatalog = data.playlists;
-    renderPlaylistCatalog();
-    if (selectedPlaylistId && !getSelectedPlaylist()) {
-      selectedPlaylistId = playlistsCatalog[0]?.id || null;
-      loadEditorFromSelection();
+  try {
+    const res = await fetch("/playlists");
+    let data = {};
+    try {
+      data = await res.json();
+    } catch {
+      data = {};
+    }
+    if (!res.ok) {
+      console.warn("[CMS] GET /playlists failed", res.status, data);
+      if (res.status === 404) {
+        showResult({
+          status: "failed",
+          error:
+            "CMS server is missing /playlists. Restart CMS with @tomorrowos/sdk 0.3.1 or newer."
+        });
+      }
+      return;
     }
+    if (Array.isArray(data.playlists)) {
+      playlistsCatalog = data.playlists;
+      renderPlaylistCatalog();
+      if (selectedPlaylistId && !getSelectedPlaylist()) {
+        selectedPlaylistId = playlistsCatalog[0]?.id || null;
+        loadEditorFromSelection();
+      }
+    }
+  } catch (err) {
+    console.error("[CMS] fetchPlaylists:", err);
+    showResult({ status: "failed", error: err.message });
   }
 }
 
@@ -202,6 +226,7 @@ function renderPlaylistCatalog() {
     if (pl.id === selectedPlaylistId) li.classList.add("playlist-catalog-item--active");
     li.innerHTML = `<strong>${escapeHtml(pl.name)}</strong><small>v${pl.version} · ${(pl.items || []).length} items</small>`;
     li.addEventListener("click", () => {
+      playlistDraftActive = false;
       selectedPlaylistId = pl.id;
       loadEditorFromSelection();
       renderPlaylistCatalog();
@@ -210,12 +235,22 @@ function renderPlaylistCatalog() {
   }
 }
 
+function isPlaylistEditorOpen() {
+  return playlistDraftActive || !!selectedPlaylistId;
+}
+
 function loadEditorFromSelection() {
   const pl = getSelectedPlaylist();
   const nameInput = document.getElementById("playlistName");
   const editorTitle = document.getElementById("editorTitle");
 
   if (!pl) {
+    if (playlistDraftActive) {
+      if (editorTitle) editorTitle.textContent = "New playlist";
+      renderEditorAssets();
+      return;
+    }
+    playlistDraftActive = false;
     if (editorTitle) editorTitle.textContent = "Playlist editor";
     if (nameInput) nameInput.value = "";
     editorItems = [];
@@ -224,6 +259,7 @@ function loadEditorFromSelection() {
     return;
   }
 
+  playlistDraftActive = false;
   if (editorTitle) editorTitle.textContent = `Edit: ${pl.name}`;
   if (nameInput) nameInput.value = pl.name || "";
   loadScheduleIntoForm(pl.schedule);
@@ -242,11 +278,15 @@ function renderEditorAssets() {
   const empty = document.getElementById("playlistEmpty");
   list.querySelectorAll(".playlist-item").forEach((el) => el.remove());
 
-  if (!selectedPlaylistId || editorItems.length === 0) {
+  if (!isPlaylistEditorOpen()) {
+    empty.classList.remove("hidden");
+    empty.textContent = "Select or create a playlist (Playlists +).";
+    return;
+  }
+
+  if (editorItems.length === 0) {
     empty.classList.remove("hidden");
-    empty.textContent = selectedPlaylistId
-      ? "No assets yet. Tap +."
-      : "Select or create a playlist.";
+    empty.textContent = "No assets yet. Tap + to upload.";
     return;
   }
 
@@ -352,6 +392,7 @@ async function saveCurrentPlaylist() {
     return;
   }
 
+  playlistDraftActive = false;
   selectedPlaylistId = data.playlist?.id || selectedPlaylistId;
   await fetchPlaylists();
   loadEditorFromSelection();
@@ -382,6 +423,7 @@ async function deleteCurrentPlaylist() {
   }
 
   selectedPlaylistId = null;
+  playlistDraftActive = false;
   editorItems = [];
   await fetchPlaylists();
   loadEditorFromSelection();
@@ -389,12 +431,23 @@ async function deleteCurrentPlaylist() {
 
 function newPlaylistDraft() {
   selectedPlaylistId = null;
-  document.getElementById("playlistName").value = "";
+  playlistDraftActive = true;
+  const nameInput = document.getElementById("playlistName");
+  if (nameInput) {
+    nameInput.value = "";
+    nameInput.focus();
+  }
   loadScheduleIntoForm(null);
   editorItems = [];
   renderPlaylistCatalog();
   renderEditorAssets();
-  document.getElementById("editorTitle").textContent = "New playlist";
+  const editorTitle = document.getElementById("editorTitle");
+  if (editorTitle) editorTitle.textContent = "New playlist";
+  document.getElementById("playlistEditorSection")?.scrollIntoView({ behavior: "smooth", block: "start" });
+  showResult({
+    status: "draft",
+    message: "New playlist — enter a name, add assets with + (right), then Save playlist."
+  });
 }
 
 async function fetchDevices() {
@@ -621,9 +674,8 @@ async function uploadFile(file) {
 }
 
 async function addAssetFromFile(file) {
-  if (!selectedPlaylistId) {
-    alert("Select or create a playlist first, then Save.");
-    return;
+  if (!isPlaylistEditorOpen()) {
+    newPlaylistDraft();
   }
   const data = await uploadFile(file);
   const type = inferMediaType(file.name, file.type);
@@ -711,7 +763,10 @@ document.addEventListener("DOMContentLoaded", () => {
   });
 
   document.getElementById("addAssetBtn")?.addEventListener("click", () => {
-    document.getElementById("fileInput").click();
+    if (!isPlaylistEditorOpen()) {
+      newPlaylistDraft();
+    }
+    document.getElementById("fileInput")?.click();
   });
 
   document.getElementById("fileInput")?.addEventListener("change", async (ev) => {