226 lines
8.3 KiB
JavaScript
226 lines
8.3 KiB
JavaScript
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");
|
||
|
||
// Search elements
|
||
const searchCard = document.getElementById("searchCard");
|
||
const searchQueryLabel = document.getElementById("searchQueryLabel");
|
||
const searchLoading = document.getElementById("searchLoading");
|
||
const searchTracksList = document.getElementById("searchTracksList");
|
||
const searchAlbumsList = document.getElementById("searchAlbumsList");
|
||
const closeSearchBtn = document.getElementById("closeSearchBtn");
|
||
|
||
// Load history and active tasks
|
||
fetchHistory();
|
||
fetchTasks();
|
||
setInterval(fetchTasks, 2000);
|
||
setInterval(fetchHistory, 10000);
|
||
|
||
// Form submit
|
||
downloadForm.addEventListener("submit", async (e) => {
|
||
e.preventDefault();
|
||
const val = urlInput.value.trim();
|
||
if (!val) return;
|
||
|
||
// Check if it's a direct URL
|
||
if (val.startsWith("http://") || val.startsWith("https://")) {
|
||
await startDownload(val);
|
||
urlInput.value = "";
|
||
} else {
|
||
// It's a search query!
|
||
await performSearch(val);
|
||
}
|
||
});
|
||
|
||
// Close search
|
||
closeSearchBtn.addEventListener("click", () => {
|
||
searchCard.style.display = "none";
|
||
});
|
||
|
||
// Perform search
|
||
async function performSearch(query) {
|
||
searchCard.style.display = "block";
|
||
searchQueryLabel.textContent = `«${query}»`;
|
||
searchLoading.style.display = "block";
|
||
searchTracksList.innerHTML = "";
|
||
searchAlbumsList.innerHTML = "";
|
||
|
||
try {
|
||
const res = await fetch(`api/search?q=${encodeURIComponent(query)}`);
|
||
const data = await res.json();
|
||
searchLoading.style.display = "none";
|
||
|
||
renderSearchResults(data);
|
||
} catch (err) {
|
||
searchLoading.style.display = "none";
|
||
searchTracksList.innerHTML = `<p class="empty-state">Ошибка поиска: ${err}</p>`;
|
||
}
|
||
}
|
||
|
||
function renderSearchResults(data) {
|
||
const tracks = data.tracks || [];
|
||
const albums = data.albums || [];
|
||
|
||
// Tracks
|
||
if (tracks.length === 0) {
|
||
searchTracksList.innerHTML = `<p class="empty-state">Треков не найдено</p>`;
|
||
} else {
|
||
searchTracksList.innerHTML = tracks.map(t => `
|
||
<div class="search-track-row">
|
||
<div class="track-left">
|
||
<img class="track-thumb" src="${t.cover || 'static/placeholder.png'}" onerror="this.src='data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'44\' height=\'44\' viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'%2364748b\' stroke-width=\'2\'><rect x=\'3\' y=\'3\' width=\'18\' height=\'18\' rx=\'2\'/><circle cx=\'12\' cy=\'12\' r=\'4\'/></svg>'">
|
||
<div class="track-details">
|
||
<span class="track-title">${escapeHtml(t.title)}</span>
|
||
<span class="track-meta">
|
||
<span class="tag-badge tag-${t.service}">${t.service_name}</span> • ${escapeHtml(t.artist)} • ${escapeHtml(t.album || 'Single')} (${t.duration})
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="track-actions">
|
||
<button class="btn-sm btn-import" onclick="handleImport('${escapeAttr(t.url)}')">📥 В Navidrome</button>
|
||
<a class="btn-sm btn-direct-dl" href="api/direct-download?url=${encodeURIComponent(t.url)}" download>💾 Скачать</a>
|
||
</div>
|
||
</div>
|
||
`).join("");
|
||
}
|
||
|
||
// Albums
|
||
if (albums.length === 0) {
|
||
document.getElementById("searchAlbumsSection").style.display = "none";
|
||
} else {
|
||
document.getElementById("searchAlbumsSection").style.display = "block";
|
||
searchAlbumsList.innerHTML = albums.map(a => `
|
||
<div class="album-card">
|
||
<img class="album-thumb" src="${a.cover || ''}" onerror="this.src='data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'120\' height=\'120\' viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'%2364748b\' stroke-width=\'2\'><circle cx=\'12\' cy=\'12\' r=\'10\'/><circle cx=\'12\' cy=\'12\' r=\'3\'/></svg>'">
|
||
<span class="album-title">${escapeHtml(a.title)}</span>
|
||
<span class="album-meta">
|
||
<span class="tag-badge tag-${a.service}">${a.service_name}</span> • ${a.year || ''} • ${a.track_count ? a.track_count + ' треков' : ''}
|
||
</span>
|
||
<button class="btn-sm btn-import" style="margin-top: auto;" onclick="handleImport('${escapeAttr(a.url)}')">📥 Импортировать альбом</button>
|
||
</div>
|
||
`).join("");
|
||
}
|
||
}
|
||
|
||
// Global handler for import button
|
||
window.handleImport = async function(url) {
|
||
await startDownload(url);
|
||
};
|
||
|
||
async function startDownload(url) {
|
||
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) {
|
||
fetchTasks();
|
||
window.scrollTo({ top: tasksList.offsetTop - 100, behavior: "smooth" });
|
||
} 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, "&").replace(/</g, "<").replace(/>/g, ">");
|
||
}
|
||
|
||
function escapeAttr(str) {
|
||
if (!str) return "";
|
||
return str.replace(/'/g, "\\'").replace(/"/g, """);
|
||
}
|
||
|
||
function formatDate(isoStr) {
|
||
if (!isoStr) return "";
|
||
const d = new Date(isoStr);
|
||
return d.toLocaleDateString() + " " + d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
|
||
}
|
||
});
|