feat: 添加网易云音乐同步到Navidrome的功能
新增NetEase-sync模块，实现将网易云音乐歌单同步到Navidrome的功能 修复iOS设备自动播放问题，优化播放器体验
This commit is contained in:
史悦
219
Netease-sync/public/app.js
Normal file
219
Netease-sync/public/app.js
Normal file
@@ -0,0 +1,219 @@
|
||||
const API_BASE = '/api';
|
||||
|
||||
let playlists = [];
|
||||
|
||||
function showError(message) {
|
||||
const errorDiv = document.getElementById('errorMessage');
|
||||
errorDiv.textContent = message;
|
||||
errorDiv.style.display = 'block';
|
||||
setTimeout(() => {
|
||||
errorDiv.style.display = 'none';
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
function showSuccess(message) {
|
||||
const successDiv = document.getElementById('successMessage');
|
||||
successDiv.textContent = message;
|
||||
successDiv.style.display = 'block';
|
||||
setTimeout(() => {
|
||||
successDiv.style.display = 'none';
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
function formatTimestamp(timestamp) {
|
||||
if (!timestamp) return '从未同步';
|
||||
const date = new Date(timestamp);
|
||||
return date.toLocaleString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
}
|
||||
|
||||
function getStatusClass(status) {
|
||||
switch (status) {
|
||||
case 'syncing':
|
||||
return 'status-syncing';
|
||||
case 'success':
|
||||
return 'status-success';
|
||||
case 'error':
|
||||
return 'status-error';
|
||||
default:
|
||||
return 'status-idle';
|
||||
}
|
||||
}
|
||||
|
||||
function getStatusText(status) {
|
||||
switch (status) {
|
||||
case 'syncing':
|
||||
return '同步中';
|
||||
case 'success':
|
||||
return '同步成功';
|
||||
case 'error':
|
||||
return '同步失败';
|
||||
default:
|
||||
return '待同步';
|
||||
}
|
||||
}
|
||||
|
||||
function renderPlaylists() {
|
||||
const container = document.getElementById('playlistList');
|
||||
|
||||
if (playlists.length === 0) {
|
||||
container.innerHTML = `
|
||||
<div class="empty-state">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M9 18V5l12-2v13"/>
|
||||
<circle cx="6" cy="18" r="3"/>
|
||||
<circle cx="18" cy="16" r="3"/>
|
||||
</svg>
|
||||
<p>还没有添加任何歌单</p>
|
||||
<p>在上方输入网易云音乐歌单ID或分享链接开始同步</p>
|
||||
</div>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
|
||||
container.innerHTML = playlists.map(playlist => `
|
||||
<div class="playlist-item">
|
||||
<div class="playlist-info">
|
||||
<div class="playlist-name">${playlist.name}</div>
|
||||
<div class="playlist-meta">
|
||||
<span>🆔 ${playlist.neteaseId}</span>
|
||||
<span>🎵 ${playlist.songs.length} 首歌曲</span>
|
||||
<span>⏰ ${formatTimestamp(playlist.lastSyncTime)}</span>
|
||||
<span class="status-badge ${getStatusClass(playlist.status)}">${getStatusText(playlist.status)}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="playlist-actions">
|
||||
<button class="btn-sync" onclick="syncPlaylist('${playlist.id}')" ${playlist.status === 'syncing' ? 'disabled' : ''}>
|
||||
${playlist.status === 'syncing' ? '<span class="spinner"></span>' : '立即同步'}
|
||||
</button>
|
||||
<button class="btn-delete" onclick="deletePlaylist('${playlist.id}')">删除</button>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
async function loadPlaylists() {
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/playlists`);
|
||||
if (!response.ok) throw new Error('加载歌单失败');
|
||||
playlists = await response.json();
|
||||
renderPlaylists();
|
||||
} catch (error) {
|
||||
console.error('加载歌单失败:', error);
|
||||
showError('加载歌单失败: ' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
async function addPlaylist() {
|
||||
const input = document.getElementById('playlistInput');
|
||||
const value = input.value.trim();
|
||||
|
||||
if (!value) {
|
||||
showError('请输入歌单ID或分享链接');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/playlists`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({ url: value })
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const error = await response.json();
|
||||
throw new Error(error.error || '添加歌单失败');
|
||||
}
|
||||
|
||||
const playlist = await response.json();
|
||||
playlists.push(playlist);
|
||||
renderPlaylists();
|
||||
input.value = '';
|
||||
showSuccess('歌单添加成功');
|
||||
} catch (error) {
|
||||
console.error('添加歌单失败:', error);
|
||||
showError('添加歌单失败: ' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
async function deletePlaylist(id) {
|
||||
if (!confirm('确定要删除这个歌单吗？')) return;
|
||||
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/playlists/${id}`, {
|
||||
method: 'DELETE'
|
||||
});
|
||||
|
||||
if (!response.ok) throw new Error('删除歌单失败');
|
||||
|
||||
playlists = playlists.filter(p => p.id !== id);
|
||||
renderPlaylists();
|
||||
showSuccess('歌单删除成功');
|
||||
} catch (error) {
|
||||
console.error('删除歌单失败:', error);
|
||||
showError('删除歌单失败: ' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
async function syncPlaylist(id) {
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/playlists/${id}/sync`, {
|
||||
method: 'POST'
|
||||
});
|
||||
|
||||
if (!response.ok) throw new Error('启动同步失败');
|
||||
|
||||
const playlist = await response.json();
|
||||
const index = playlists.findIndex(p => p.id === id);
|
||||
if (index !== -1) {
|
||||
playlists[index] = playlist;
|
||||
}
|
||||
renderPlaylists();
|
||||
showSuccess('同步已启动');
|
||||
} catch (error) {
|
||||
console.error('启动同步失败:', error);
|
||||
showError('启动同步失败: ' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
async function updatePlaylistStatus(id) {
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/status/${id}`);
|
||||
if (!response.ok) return;
|
||||
|
||||
const playlist = await response.json();
|
||||
const index = playlists.findIndex(p => p.id === id);
|
||||
if (index !== -1) {
|
||||
playlists[index] = playlist;
|
||||
renderPlaylists();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('更新状态失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
function startStatusPolling() {
|
||||
setInterval(() => {
|
||||
playlists.forEach(playlist => {
|
||||
if (playlist.status === 'syncing') {
|
||||
updatePlaylistStatus(playlist.id);
|
||||
}
|
||||
});
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
document.getElementById('playlistInput').addEventListener('keypress', (e) => {
|
||||
if (e.key === 'Enter') {
|
||||
addPlaylist();
|
||||
}
|
||||
});
|
||||
|
||||
loadPlaylists();
|
||||
startStatusPolling();
|
||||
Reference in New Issue
Block a user