Add web-based admin panel for library management, playlists, and track organization
This commit is contained in:
2
.vscode/settings.json
vendored
Normal file
2
.vscode/settings.json
vendored
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
{
|
||||||
|
}
|
||||||
298
public/app.js
Normal file
298
public/app.js
Normal file
@@ -0,0 +1,298 @@
|
|||||||
|
// API Base URL
|
||||||
|
const API_BASE = window.location.origin;
|
||||||
|
|
||||||
|
// Load dashboard stats on page load
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
loadDashboard();
|
||||||
|
updateSubsonicUrl();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Switch between tabs
|
||||||
|
function switchTab(tabName) {
|
||||||
|
// Hide all tabs
|
||||||
|
document.querySelectorAll('.tab-content').forEach(tab => {
|
||||||
|
tab.classList.remove('active');
|
||||||
|
});
|
||||||
|
document.querySelectorAll('.tab').forEach(tab => {
|
||||||
|
tab.classList.remove('active');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Show selected tab
|
||||||
|
document.getElementById(tabName).classList.add('active');
|
||||||
|
event.target.classList.add('active');
|
||||||
|
|
||||||
|
// Load data for the tab
|
||||||
|
if (tabName === 'tracks') loadTracks();
|
||||||
|
if (tabName === 'albums') loadAlbums();
|
||||||
|
if (tabName === 'playlists') loadPlaylists();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Load dashboard statistics
|
||||||
|
async function loadDashboard() {
|
||||||
|
try {
|
||||||
|
const [tracksRes, albumsRes, playlistsRes] = await Promise.all([
|
||||||
|
fetch(`${API_BASE}/api/tracks`),
|
||||||
|
fetch(`${API_BASE}/api/albums`),
|
||||||
|
fetch(`${API_BASE}/api/playlists`)
|
||||||
|
]);
|
||||||
|
|
||||||
|
const tracks = await tracksRes.json();
|
||||||
|
const albums = await albumsRes.json();
|
||||||
|
const playlists = await playlistsRes.json();
|
||||||
|
|
||||||
|
const singles = tracks.tracks.filter(t => t.isSingle).length;
|
||||||
|
|
||||||
|
document.getElementById('totalTracks').textContent = tracks.tracks.length;
|
||||||
|
document.getElementById('totalAlbums').textContent = albums.albums.length;
|
||||||
|
document.getElementById('totalSingles').textContent = singles;
|
||||||
|
document.getElementById('totalPlaylists').textContent = playlists.playlists.length;
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error loading dashboard:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Load all tracks
|
||||||
|
async function loadTracks() {
|
||||||
|
const trackList = document.getElementById('trackList');
|
||||||
|
trackList.innerHTML = '<li class="loading">Loading tracks...</li>';
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await fetch(`${API_BASE}/api/tracks`);
|
||||||
|
const data = await res.json();
|
||||||
|
|
||||||
|
if (data.tracks.length === 0) {
|
||||||
|
trackList.innerHTML = '<li class="loading">No tracks found. Scan your library first.</li>';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
trackList.innerHTML = data.tracks.map(track => `
|
||||||
|
<li class="track-item">
|
||||||
|
<div class="track-info">
|
||||||
|
<div class="track-title">
|
||||||
|
${track.title}
|
||||||
|
<span class="badge ${track.isSingle ? 'badge-single' : 'badge-album'}">
|
||||||
|
${track.isSingle ? 'Single' : 'Album'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="track-meta">${track.artist} • ${track.album}</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<button class="btn btn-secondary" onclick="toggleSingle('${track.id}', ${!track.isSingle})">
|
||||||
|
Mark as ${track.isSingle ? 'Album' : 'Single'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
`).join('');
|
||||||
|
} catch (error) {
|
||||||
|
trackList.innerHTML = '<li class="loading">Error loading tracks</li>';
|
||||||
|
console.error('Error loading tracks:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Search tracks
|
||||||
|
function searchTracks() {
|
||||||
|
const searchTerm = document.getElementById('searchTracks').value.toLowerCase();
|
||||||
|
const items = document.querySelectorAll('.track-item');
|
||||||
|
|
||||||
|
items.forEach(item => {
|
||||||
|
const text = item.textContent.toLowerCase();
|
||||||
|
item.style.display = text.includes(searchTerm) ? 'flex' : 'none';
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Toggle single/album status
|
||||||
|
async function toggleSingle(trackId, isSingle) {
|
||||||
|
try {
|
||||||
|
const res = await fetch(`${API_BASE}/api/tracks/${trackId}`, {
|
||||||
|
method: 'PATCH',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({ isSingle })
|
||||||
|
});
|
||||||
|
|
||||||
|
if (res.ok) {
|
||||||
|
loadTracks();
|
||||||
|
loadDashboard();
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error updating track:', error);
|
||||||
|
alert('Failed to update track');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Load albums
|
||||||
|
async function loadAlbums() {
|
||||||
|
const albumList = document.getElementById('albumList');
|
||||||
|
albumList.innerHTML = '<li class="loading">Loading albums...</li>';
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await fetch(`${API_BASE}/api/albums`);
|
||||||
|
const data = await res.json();
|
||||||
|
|
||||||
|
if (data.albums.length === 0) {
|
||||||
|
albumList.innerHTML = '<li class="loading">No albums found</li>';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
albumList.innerHTML = data.albums.map(album => `
|
||||||
|
<li class="track-item">
|
||||||
|
<div class="track-info">
|
||||||
|
<div class="track-title">${album.name}</div>
|
||||||
|
<div class="track-meta">${album.artist} • ${album.trackCount} tracks</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
`).join('');
|
||||||
|
} catch (error) {
|
||||||
|
albumList.innerHTML = '<li class="loading">Error loading albums</li>';
|
||||||
|
console.error('Error loading albums:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Load playlists
|
||||||
|
async function loadPlaylists() {
|
||||||
|
const playlistList = document.getElementById('playlistList');
|
||||||
|
playlistList.innerHTML = '<li class="loading">Loading playlists...</li>';
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await fetch(`${API_BASE}/api/playlists`);
|
||||||
|
const data = await res.json();
|
||||||
|
|
||||||
|
if (data.playlists.length === 0) {
|
||||||
|
playlistList.innerHTML = '<li class="loading">No playlists yet. Create one!</li>';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
playlistList.innerHTML = data.playlists.map(playlist => `
|
||||||
|
<li class="playlist-item">
|
||||||
|
<div class="track-info">
|
||||||
|
<div class="track-title">${playlist.name}</div>
|
||||||
|
<div class="track-meta">${playlist.trackCount} tracks</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<button class="btn btn-danger" onclick="deletePlaylist('${playlist.id}')">Delete</button>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
`).join('');
|
||||||
|
} catch (error) {
|
||||||
|
playlistList.innerHTML = '<li class="loading">Error loading playlists</li>';
|
||||||
|
console.error('Error loading playlists:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Show create playlist modal
|
||||||
|
function showCreatePlaylist() {
|
||||||
|
document.getElementById('createPlaylistModal').classList.add('active');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Close modal
|
||||||
|
function closeModal() {
|
||||||
|
document.getElementById('createPlaylistModal').classList.remove('active');
|
||||||
|
document.getElementById('playlistName').value = '';
|
||||||
|
document.getElementById('playlistDescription').value = '';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create playlist
|
||||||
|
async function createPlaylist() {
|
||||||
|
const name = document.getElementById('playlistName').value;
|
||||||
|
const description = document.getElementById('playlistDescription').value;
|
||||||
|
|
||||||
|
if (!name) {
|
||||||
|
alert('Please enter a playlist name');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await fetch(`${API_BASE}/api/playlists`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({ name, description })
|
||||||
|
});
|
||||||
|
|
||||||
|
if (res.ok) {
|
||||||
|
closeModal();
|
||||||
|
loadPlaylists();
|
||||||
|
loadDashboard();
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error creating playlist:', error);
|
||||||
|
alert('Failed to create playlist');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Delete playlist
|
||||||
|
async function deletePlaylist(playlistId) {
|
||||||
|
if (!confirm('Are you sure you want to delete this playlist?')) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await fetch(`${API_BASE}/api/playlists/${playlistId}`, {
|
||||||
|
method: 'DELETE'
|
||||||
|
});
|
||||||
|
|
||||||
|
if (res.ok) {
|
||||||
|
loadPlaylists();
|
||||||
|
loadDashboard();
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error deleting playlist:', error);
|
||||||
|
alert('Failed to delete playlist');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Scan library
|
||||||
|
async function scanLibrary() {
|
||||||
|
const scanStatus = document.getElementById('scanStatus');
|
||||||
|
scanStatus.style.display = 'block';
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Note: This would need a scan endpoint on the server
|
||||||
|
alert('Library scanning is currently done via CLI: npm run scan\n\nWe can add a web-based scan button if needed!');
|
||||||
|
scanStatus.style.display = 'none';
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error scanning library:', error);
|
||||||
|
alert('Failed to scan library');
|
||||||
|
scanStatus.style.display = 'none';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Upload audio file
|
||||||
|
async function uploadAudio() {
|
||||||
|
const fileInput = document.getElementById('uploadFile');
|
||||||
|
const file = fileInput.files[0];
|
||||||
|
|
||||||
|
if (!file) return;
|
||||||
|
|
||||||
|
const isSingle = confirm('Is this a single track? (Click Cancel if it\'s part of an album)');
|
||||||
|
|
||||||
|
const formData = new FormData();
|
||||||
|
formData.append('audio', file);
|
||||||
|
formData.append('isSingle', isSingle);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await fetch(`${API_BASE}/api/upload`, {
|
||||||
|
method: 'POST',
|
||||||
|
body: formData
|
||||||
|
});
|
||||||
|
|
||||||
|
if (res.ok) {
|
||||||
|
alert('File uploaded successfully!');
|
||||||
|
loadDashboard();
|
||||||
|
if (document.getElementById('tracks').classList.contains('active')) {
|
||||||
|
loadTracks();
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
alert('Failed to upload file');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error uploading file:', error);
|
||||||
|
alert('Failed to upload file');
|
||||||
|
}
|
||||||
|
|
||||||
|
fileInput.value = '';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update Subsonic URL
|
||||||
|
function updateSubsonicUrl() {
|
||||||
|
const url = `${window.location.protocol}//${window.location.hostname}:${window.location.port}/rest`;
|
||||||
|
document.getElementById('subsonicUrl').value = url;
|
||||||
|
}
|
||||||
407
public/index.html
Normal file
407
public/index.html
Normal file
@@ -0,0 +1,407 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>CarPlay Audio Server - Admin</title>
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||||||
|
background: #f5f5f7;
|
||||||
|
color: #1d1d1f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
background: white;
|
||||||
|
border-bottom: 1px solid #d2d2d7;
|
||||||
|
padding: 20px;
|
||||||
|
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header h1 {
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
background: white;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab {
|
||||||
|
padding: 10px 20px;
|
||||||
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 15px;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab:hover {
|
||||||
|
background: #f5f5f7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab.active {
|
||||||
|
background: #007aff;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-content {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-content.active {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
background: white;
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 20px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card h2 {
|
||||||
|
font-size: 22px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||||
|
gap: 15px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-card {
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
color: white;
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-card h3 {
|
||||||
|
font-size: 14px;
|
||||||
|
opacity: 0.9;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-card .value {
|
||||||
|
font-size: 32px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
padding: 10px 20px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background: #007aff;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:hover {
|
||||||
|
background: #0051d5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
background: #f5f5f7;
|
||||||
|
color: #1d1d1f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary:hover {
|
||||||
|
background: #e8e8ed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-danger {
|
||||||
|
background: #ff3b30;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
input, select {
|
||||||
|
padding: 10px;
|
||||||
|
border: 1px solid #d2d2d7;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 15px;
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.track-list, .playlist-list {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.track-item, .playlist-item {
|
||||||
|
padding: 15px;
|
||||||
|
border-bottom: 1px solid #f5f5f7;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.track-item:hover, .playlist-item:hover {
|
||||||
|
background: #f5f5f7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.track-info {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.track-title {
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.track-meta {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #86868b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 3px 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge-single {
|
||||||
|
background: #ff9500;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge-album {
|
||||||
|
background: #34c759;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading {
|
||||||
|
text-align: center;
|
||||||
|
padding: 40px;
|
||||||
|
color: #86868b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert {
|
||||||
|
padding: 15px;
|
||||||
|
border-radius: 6px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-success {
|
||||||
|
background: #d1f4e0;
|
||||||
|
color: #0f5132;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-error {
|
||||||
|
background: #f8d7da;
|
||||||
|
color: #842029;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(0,0,0,0.5);
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal.active {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-content {
|
||||||
|
background: white;
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 30px;
|
||||||
|
max-width: 500px;
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-buttons {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="header">
|
||||||
|
<div class="container">
|
||||||
|
<h1>🎵 CarPlay Audio Server</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="tabs">
|
||||||
|
<button class="tab active" onclick="switchTab('dashboard')">Dashboard</button>
|
||||||
|
<button class="tab" onclick="switchTab('tracks')">Tracks</button>
|
||||||
|
<button class="tab" onclick="switchTab('albums')">Albums</button>
|
||||||
|
<button class="tab" onclick="switchTab('playlists')">Playlists</button>
|
||||||
|
<button class="tab" onclick="switchTab('settings')">Settings</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Dashboard Tab -->
|
||||||
|
<div id="dashboard" class="tab-content active">
|
||||||
|
<div class="stats">
|
||||||
|
<div class="stat-card">
|
||||||
|
<h3>Total Tracks</h3>
|
||||||
|
<div class="value" id="totalTracks">-</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-card" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
|
||||||
|
<h3>Albums</h3>
|
||||||
|
<div class="value" id="totalAlbums">-</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-card" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
|
||||||
|
<h3>Singles</h3>
|
||||||
|
<div class="value" id="totalSingles">-</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-card" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
|
||||||
|
<h3>Playlists</h3>
|
||||||
|
<div class="value" id="totalPlaylists">-</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<h2>Quick Actions</h2>
|
||||||
|
<div style="display: flex; gap: 10px; flex-wrap: wrap;">
|
||||||
|
<button class="btn btn-primary" onclick="scanLibrary()">🔍 Scan Library</button>
|
||||||
|
<button class="btn btn-secondary" onclick="switchTab('playlists')">📋 Manage Playlists</button>
|
||||||
|
<button class="btn btn-secondary" onclick="document.getElementById('uploadFile').click()">📤 Upload File</button>
|
||||||
|
<input type="file" id="uploadFile" accept="audio/*" style="display: none;" onchange="uploadAudio()">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="scanStatus" style="display: none;" class="card">
|
||||||
|
<h2>Scanning Library...</h2>
|
||||||
|
<div class="loading">Please wait while we scan your audio files...</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Tracks Tab -->
|
||||||
|
<div id="tracks" class="tab-content">
|
||||||
|
<div class="card">
|
||||||
|
<h2>All Tracks</h2>
|
||||||
|
<div style="margin-bottom: 15px;">
|
||||||
|
<input type="text" id="searchTracks" placeholder="Search tracks..." onkeyup="searchTracks()">
|
||||||
|
</div>
|
||||||
|
<ul class="track-list" id="trackList">
|
||||||
|
<li class="loading">Loading tracks...</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Albums Tab -->
|
||||||
|
<div id="albums" class="tab-content">
|
||||||
|
<div class="card">
|
||||||
|
<h2>Albums</h2>
|
||||||
|
<ul class="track-list" id="albumList">
|
||||||
|
<li class="loading">Loading albums...</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Playlists Tab -->
|
||||||
|
<div id="playlists" class="tab-content">
|
||||||
|
<div class="card">
|
||||||
|
<h2>Playlists</h2>
|
||||||
|
<button class="btn btn-primary" onclick="showCreatePlaylist()" style="margin-bottom: 15px;">+ Create Playlist</button>
|
||||||
|
<ul class="playlist-list" id="playlistList">
|
||||||
|
<li class="loading">Loading playlists...</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Settings Tab -->
|
||||||
|
<div id="settings" class="tab-content">
|
||||||
|
<div class="card">
|
||||||
|
<h2>Library Settings</h2>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Library Path</label>
|
||||||
|
<input type="text" id="libraryPath" value="./audio_library" readonly>
|
||||||
|
<small style="color: #86868b;">Audio files location on server</small>
|
||||||
|
</div>
|
||||||
|
<button class="btn btn-primary" onclick="scanLibrary()">Scan Library Now</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<h2>Subsonic API</h2>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Server URL</label>
|
||||||
|
<input type="text" id="subsonicUrl" readonly>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Username</label>
|
||||||
|
<input type="text" value="admin" readonly>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Password</label>
|
||||||
|
<input type="password" value="admin" readonly>
|
||||||
|
</div>
|
||||||
|
<small style="color: #86868b;">⚠️ Change default credentials in src/routes/subsonic.js</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Create Playlist Modal -->
|
||||||
|
<div id="createPlaylistModal" class="modal">
|
||||||
|
<div class="modal-content">
|
||||||
|
<h2>Create Playlist</h2>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Playlist Name</label>
|
||||||
|
<input type="text" id="playlistName" placeholder="My Playlist">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Description (optional)</label>
|
||||||
|
<input type="text" id="playlistDescription" placeholder="Description">
|
||||||
|
</div>
|
||||||
|
<div class="modal-buttons">
|
||||||
|
<button class="btn btn-primary" onclick="createPlaylist()">Create</button>
|
||||||
|
<button class="btn btn-secondary" onclick="closeModal()">Cancel</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="app.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -31,6 +31,9 @@ app.use('/api/upload', uploadRouter);
|
|||||||
// Subsonic API
|
// Subsonic API
|
||||||
app.use('/rest', subsonicRouter);
|
app.use('/rest', subsonicRouter);
|
||||||
|
|
||||||
|
// Serve static files
|
||||||
|
app.use(express.static('public'));
|
||||||
|
|
||||||
// Serve audio files
|
// Serve audio files
|
||||||
app.use('/audio', express.static(path.join(process.cwd(), 'audio_library')));
|
app.use('/audio', express.static(path.join(process.cwd(), 'audio_library')));
|
||||||
app.use('/artwork', express.static(path.join(process.cwd(), 'artwork')));
|
app.use('/artwork', express.static(path.join(process.cwd(), 'artwork')));
|
||||||
|
|||||||
Reference in New Issue
Block a user