feat: initial implementation of navidrome-music-sync with Yandex, Spotify, Apple, YouTube support and Web UI

app/static/app.js

@@ -0,0 +1,126 @@
+document.addEventListener("DOMContentLoaded", () => {
+  const downloadForm = document.getElementById("downloadForm");
+  const urlInput = document.getElementById("urlInput");
+  const syncLikesBtn = document.getElementById("syncLikesBtn");
+  const tasksList = document.getElementById("tasksList");
+  const historyBody = document.getElementById("historyBody");
+  const tracksCount = document.getElementById("tracksCount");
+
+  // Load history and active tasks
+  fetchHistory();
+  fetchTasks();
+  setInterval(fetchTasks, 2000);
+  setInterval(fetchHistory, 10000);
+
+  // Form submit
+  downloadForm.addEventListener("submit", async (e) => {
+    e.preventDefault();
+    const url = urlInput.value.trim();
+    if (!url) return;
+
+    try {
+      const res = await fetch("/api/download", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ url })
+      });
+      const data = await res.json();
+      if (data.task_id) {
+        urlInput.value = "";
+        fetchTasks();
+      } else {
+        alert(data.error || "Ошибка запуска загрузки");
+      }
+    } catch (err) {
+      alert("Ошибка сети: " + err);
+    }
+  });
+
+  // Sync likes button
+  syncLikesBtn.addEventListener("click", async () => {
+    if (!confirm("Запустить синхронизацию плейлиста «Мне нравится» из Яндекс Музыки?")) return;
+    try {
+      const res = await fetch("/api/sync/yandex-likes", { method: "POST" });
+      const data = await res.json();
+      if (data.task_id) {
+        fetchTasks();
+      }
+    } catch (err) {
+      alert("Ошибка запуска синхронизации: " + err);
+    }
+  });
+
+  async function fetchTasks() {
+    try {
+      const res = await fetch("/api/tasks");
+      const tasks = await res.json();
+      renderTasks(tasks);
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  function renderTasks(tasks) {
+    if (!tasks || tasks.length === 0) {
+      tasksList.innerHTML = `<p class="empty-state">Нет активных загрузок</p>`;
+      return;
+    }
+
+    tasksList.innerHTML = tasks.map(t => {
+      const percent = t.total > 0 ? Math.round((t.progress / t.total) * 100) : 0;
+      return `
+        <div class="task-item">
+          <div class="task-header">
+            <strong>${escapeHtml(t.target)}</strong>
+            <span class="badge ${t.status === 'completed' ? 'badge-success' : 'badge-info'}">${t.status}</span>
+          </div>
+          <div class="task-progress-bar">
+            <div class="task-progress-fill" style="width: ${percent}%;"></div>
+          </div>
+          <div class="task-current">
+            ${t.progress}/${t.total} (${percent}%) • ${escapeHtml(t.current_item || '')}
+          </div>
+        </div>
+      `;
+    }).join("");
+  }
+
+  async function fetchHistory() {
+    try {
+      const res = await fetch("/api/history");
+      const data = await res.json();
+      if (tracksCount) tracksCount.textContent = `Загружено: ${data.total || 0}`;
+      renderHistory(data.tracks || []);
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  function renderHistory(tracks) {
+    if (!tracks || tracks.length === 0) {
+      historyBody.innerHTML = `<tr><td colspan="5" class="empty-state">Пока нет загрузок</td></tr>`;
+      return;
+    }
+
+    historyBody.innerHTML = tracks.map(t => `
+      <tr>
+        <td><span class="tag-badge tag-${t.service}">${t.service}</span></td>
+        <td><strong>${escapeHtml(t.artist)}</strong></td>
+        <td>${escapeHtml(t.title)}</td>
+        <td>${escapeHtml(t.album || 'Singles')}</td>
+        <td style="color: var(--text-secondary);">${formatDate(t.downloaded_at)}</td>
+      </tr>
+    `).join("");
+  }
+
+  function escapeHtml(str) {
+    if (!str) return "";
+    return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+  }
+
+  function formatDate(isoStr) {
+    if (!isoStr) return "";
+    const d = new Date(isoStr);
+    return d.toLocaleDateString() + " " + d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+  }
+});