fix(app): Fix music block and added playing now model

static/js/ym.js

@@ -4,22 +4,20 @@
     const list = document.getElementById("ymHistory");
     const updated = document.getElementById("ymUpdated");
     const refresh = document.getElementById("ymRefresh");
-    const tabs = Array.from(document.querySelectorAll(".ym-tab"));
+    const nowBody = document.getElementById("ymNowBody");
     if (!list || !updated) return;
 
-    const SOURCES = {
-        lb: "/api/listenbrainz/recent",
-        ym: "/api/ym/history",
-    };
+    const SOURCE = "/api/listenbrainz/recent";
+    const NOW_SOURCE = "/api/listenbrainz/now";
     const POLL_MS = 30000;
+    const NOW_POLL_MS = 10000;
 
-    let current = "lb";
     let timer = null;
+    let nowTimer = null;
     let busy = false;
-    const state = {
-        lb: { seen: new Set(), firstLoad: true },
-        ym: { seen: new Set(), firstLoad: true },
-    };
+    let nowBusy = false;
+    const seen = new Set();
+    let firstLoad = true;
 
     const escapeHtml = (s) =>
         String(s).replace(/[&<>"']/g, (c) => ({
@@ -38,13 +36,12 @@
     };
 
     const render = (tracks) => {
-        const st = state[current];
         const fresh = [];
         const html = tracks.map((t) => {
             const key = `${t.id}:${t.album_id || ""}:${t.day || ""}`;
-            if (!st.seen.has(key)) {
-                st.seen.add(key);
-                if (!st.firstLoad) fresh.push(key);
+            if (!seen.has(key)) {
+                seen.add(key);
+                if (!firstLoad) fresh.push(key);
             }
             const isNew = fresh.includes(key);
             const cover = t.cover
@@ -69,18 +66,40 @@
         }).join("");
 
         list.innerHTML = html || '<li class="ym-status">Пока нет прослушиваний</li>';
-        st.firstLoad = false;
+        firstLoad = false;
     };
 
     const setStatus = (msg, isError) => {
         list.innerHTML = `<li class="ym-status${isError ? " ym-error" : ""}">${escapeHtml(msg)}</li>`;
     };
 
+    const renderNow = (track) => {
+        if (!nowBody) return;
+        if (!track) {
+            nowBody.innerHTML = '<span class="ym-now-idle">ничего не играет</span>';
+            return;
+        }
+        const cover = track.cover
+            ? `<img class="ym-now-cover" src="${escapeHtml(track.cover)}" alt="" loading="lazy" width="72" height="72">`
+            : `<span class="ym-now-cover ym-cover-empty" aria-hidden="true">♪</span>`;
+        const artists = (track.artists || []).map(escapeHtml).join(", ");
+        const context = track.context ? ` <span class="ym-context">· ${escapeHtml(track.context)}</span>` : "";
+        const inner = `
+            ${cover}
+            <span class="ym-now-info">
+                <span class="ym-track-title">${escapeHtml(track.title)}</span>
+                <span class="ym-artists">${artists || "—"}${context}</span>
+            </span>`;
+        nowBody.innerHTML = track.url
+            ? `<a class="ym-now-link" href="${escapeHtml(track.url)}" target="_blank" rel="noopener">${inner}</a>`
+            : `<div class="ym-now-link">${inner}</div>`;
+    };
+
     const tick = async () => {
         if (busy) return;
         busy = true;
         try {
-            const res = await fetch(SOURCES[current], { headers: { Accept: "application/json" } });
+            const res = await fetch(SOURCE, { headers: { Accept: "application/json" } });
             const data = await res.json();
             if (!res.ok || !data.ok) {
                 setStatus(data.error || `Ошибка ${res.status}`, true);
@@ -98,18 +117,32 @@
         }
     };
 
-    const poke = () => { if (timer) clearTimeout(timer); tick(); };
+    const tickNow = async () => {
+        if (nowBusy) return;
+        nowBusy = true;
+        try {
+            const res = await fetch(NOW_SOURCE, { headers: { Accept: "application/json" } });
+            const data = await res.json();
+            if (!res.ok || !data.ok) {
+                if (nowBody) nowBody.innerHTML = `<span class="ym-now-idle">${escapeHtml(data.error || `Ошибка ${res.status}`)}</span>`;
+                return;
+            }
+            renderNow(data.track);
+        } catch (e) {
+            if (nowBody) nowBody.innerHTML = '<span class="ym-now-idle">нет связи</span>';
+        } finally {
+            nowBusy = false;
+            if (nowTimer) clearTimeout(nowTimer);
+            nowTimer = setTimeout(tickNow, NOW_POLL_MS);
+        }
+    };
 
-    tabs.forEach((tab) => {
-        tab.addEventListener("click", () => {
-            const source = tab.dataset.source;
-            if (!source || source === current) return;
-            current = source;
-            tabs.forEach((t) => t.classList.toggle("active", t === tab));
-            updated.textContent = "подключение…";
-            poke();
-        });
-    });
+    const poke = () => {
+        if (timer) clearTimeout(timer);
+        if (nowTimer) clearTimeout(nowTimer);
+        tick();
+        tickNow();
+    };
 
     if (refresh) refresh.addEventListener("click", poke);
     document.addEventListener("visibilitychange", () => {
@@ -117,4 +150,5 @@
     });
 
     tick();
+    tickNow();
 })();