592 lines
31 KiB
HTML
592 lines
31 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Furumi Player</title>
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
|
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
:root {
|
|
--bg-base: #0a0c12;
|
|
--bg-panel: #111520;
|
|
--bg-card: #161d2e;
|
|
--bg-hover: #1e2740;
|
|
--bg-active: #252f4a;
|
|
--border: #1f2c45;
|
|
--accent: #7c6af7;
|
|
--accent-dim: #5a4fcf;
|
|
--accent-glow:rgba(124,106,247,0.3);
|
|
--text: #e2e8f0;
|
|
--text-muted: #64748b;
|
|
--text-dim: #94a3b8;
|
|
--success: #34d399;
|
|
--danger: #f87171;
|
|
}
|
|
|
|
html, body { height: 100%; overflow: hidden; }
|
|
body { font-family: 'Inter', system-ui, sans-serif; background: var(--bg-base); color: var(--text); display: flex; flex-direction: column; }
|
|
|
|
.header { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1.5rem; background: var(--bg-panel); border-bottom: 1px solid var(--border); flex-shrink: 0; z-index: 10; }
|
|
.header-logo { display: flex; align-items: center; gap: 0.75rem; font-weight: 700; font-size: 1.1rem; }
|
|
.header-logo svg { width: 22px; height: 22px; }
|
|
.header-version { font-size: 0.7rem; color: var(--text-muted); background: rgba(255,255,255,0.05); padding: 0.1rem 0.4rem; border-radius: 4px; margin-left: 0.25rem; font-weight: 500; text-decoration: none; }
|
|
.btn-menu { display: none; background: none; border: none; color: var(--text); font-size: 1.2rem; cursor: pointer; padding: 0.1rem 0.5rem; margin-right: 0.2rem; border-radius: 4px; }
|
|
|
|
/* Search bar */
|
|
.search-wrap { position: relative; }
|
|
.search-wrap input { background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; padding: 6px 12px 6px 30px; color: var(--text); font-size: 13px; width: 220px; font-family: inherit; }
|
|
.search-wrap::before { content: '🔍'; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); font-size: 12px; }
|
|
.search-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-card); border: 1px solid var(--border); border-radius: 0 0 6px 6px; max-height: 300px; overflow-y: auto; z-index: 50; display: none; }
|
|
.search-dropdown.open { display: block; }
|
|
.search-result { padding: 8px 12px; cursor: pointer; font-size: 13px; border-bottom: 1px solid var(--border); }
|
|
.search-result:hover { background: var(--bg-hover); }
|
|
.search-result .sr-type { font-size: 10px; color: var(--text-muted); text-transform: uppercase; margin-right: 6px; }
|
|
.search-result .sr-detail { font-size: 11px; color: var(--text-muted); margin-left: 4px; }
|
|
|
|
.main { display: flex; flex: 1; overflow: hidden; position: relative; }
|
|
.sidebar-overlay { display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); z-index: 20; }
|
|
.sidebar-overlay.show { display: block; }
|
|
|
|
.sidebar { width: 280px; min-width: 200px; max-width: 400px; flex-shrink: 0; display: flex; flex-direction: column; background: var(--bg-panel); border-right: 1px solid var(--border); overflow: hidden; resize: horizontal; }
|
|
.sidebar-header { padding: 0.85rem 1rem 0.6rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--border); flex-shrink: 0; display: flex; align-items: center; gap: 0.5rem; }
|
|
.breadcrumb { padding: 0.5rem 1rem; font-size: 0.78rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid var(--border); flex-shrink: 0; }
|
|
.breadcrumb span { color: var(--accent); cursor: pointer; }
|
|
.breadcrumb span:hover { text-decoration: underline; }
|
|
|
|
.file-list { flex: 1; overflow-y: auto; padding: 0.3rem 0; }
|
|
.file-list::-webkit-scrollbar { width: 4px; }
|
|
.file-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
|
|
|
|
.file-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 1rem; cursor: pointer; font-size: 0.875rem; color: var(--text-dim); user-select: none; transition: background 0.12s; }
|
|
.file-item:hover { background: var(--bg-hover); color: var(--text); }
|
|
.file-item.dir { color: var(--accent); }
|
|
.file-item .icon { font-size: 0.95rem; flex-shrink: 0; opacity: 0.8; }
|
|
.file-item .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.file-item .detail { font-size: 0.7rem; color: var(--text-muted); flex-shrink: 0; }
|
|
.file-item .add-btn { opacity: 0; font-size: 0.75rem; background: var(--bg-hover); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 0.2rem 0.4rem; cursor: pointer; flex-shrink: 0; }
|
|
.file-item:hover .add-btn { opacity: 1; }
|
|
.file-item .add-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
|
|
|
|
.queue-panel { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--bg-base); }
|
|
.queue-header { padding: 0.85rem 1.25rem 0.6rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--border); flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; }
|
|
.queue-actions { display: flex; gap: 0.5rem; }
|
|
.queue-btn { font-size: 0.7rem; padding: 0.2rem 0.55rem; background: none; border: 1px solid var(--border); border-radius: 5px; color: var(--text-muted); cursor: pointer; }
|
|
.queue-btn:hover { border-color: var(--accent); color: var(--accent); }
|
|
.queue-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
|
|
|
|
.queue-list { flex: 1; overflow-y: auto; padding: 0.3rem 0; }
|
|
.queue-list::-webkit-scrollbar { width: 4px; }
|
|
.queue-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
|
|
|
|
.queue-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 1.25rem; cursor: pointer; border-left: 2px solid transparent; transition: background 0.12s; }
|
|
.queue-item:hover { background: var(--bg-hover); }
|
|
.queue-item.playing { background: var(--bg-active); border-left-color: var(--accent); }
|
|
.queue-item.playing .qi-title { color: var(--accent); }
|
|
.queue-item .qi-index { font-size: 0.75rem; color: var(--text-muted); width: 1.5rem; text-align: right; flex-shrink: 0; }
|
|
.queue-item.playing .qi-index::before { content: '▶'; font-size: 0.6rem; color: var(--accent); }
|
|
.queue-item .qi-cover { width: 36px; height: 36px; border-radius: 5px; background: var(--bg-card); flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
|
|
.queue-item .qi-cover img { width: 100%; height: 100%; object-fit: cover; }
|
|
.queue-item .qi-info { flex: 1; overflow: hidden; }
|
|
.queue-item .qi-title { font-size: 0.875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.queue-item .qi-artist { font-size: 0.75rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.queue-item .qi-dur { font-size: 0.75rem; color: var(--text-muted); margin-left: auto; margin-right: 0.5rem; }
|
|
.qi-remove { background: none; border: none; font-size: 0.9rem; color: var(--text-muted); cursor: pointer; padding: 0.3rem; border-radius: 4px; opacity: 0; }
|
|
.queue-item:hover .qi-remove { opacity: 1; }
|
|
.qi-remove:hover { background: rgba(248,113,113,0.15); color: var(--danger); }
|
|
.queue-item.dragging { opacity: 0.5; }
|
|
.queue-item.drag-over { border-top: 2px solid var(--accent); margin-top: -2px; }
|
|
.queue-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-muted); font-size: 0.875rem; gap: 0.5rem; padding: 2rem; }
|
|
.queue-empty .empty-icon { font-size: 2.5rem; opacity: 0.3; }
|
|
|
|
.player-bar { background: var(--bg-panel); border-top: 1px solid var(--border); padding: 0.9rem 1.5rem; flex-shrink: 0; display: grid; grid-template-columns: 1fr 2fr 1fr; align-items: center; gap: 1rem; }
|
|
.np-info { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
|
|
.np-cover { width: 44px; height: 44px; border-radius: 6px; background: var(--bg-card); flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; }
|
|
.np-cover img { width: 100%; height: 100%; object-fit: cover; }
|
|
.np-text { min-width: 0; }
|
|
.np-title { font-size: 0.875rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.np-artist { font-size: 0.75rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
|
|
.controls { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
|
|
.ctrl-btns { display: flex; align-items: center; gap: 0.5rem; }
|
|
.ctrl-btn { background: none; border: none; color: var(--text-dim); cursor: pointer; padding: 0.35rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1rem; }
|
|
.ctrl-btn:hover { color: var(--text); background: var(--bg-hover); }
|
|
.ctrl-btn.active { color: var(--accent); }
|
|
.ctrl-btn-main { width: 38px; height: 38px; background: var(--accent); color: #fff !important; font-size: 1.1rem; box-shadow: 0 0 14px var(--accent-glow); }
|
|
.ctrl-btn-main:hover { background: var(--accent-dim) !important; }
|
|
|
|
.progress-row { display: flex; align-items: center; gap: 0.6rem; width: 100%; }
|
|
.time { font-size: 0.7rem; color: var(--text-muted); flex-shrink: 0; font-variant-numeric: tabular-nums; min-width: 2.5rem; text-align: center; }
|
|
.progress-bar { flex: 1; height: 4px; background: var(--bg-hover); border-radius: 2px; cursor: pointer; position: relative; }
|
|
.progress-fill { height: 100%; background: var(--accent); border-radius: 2px; pointer-events: none; }
|
|
.progress-fill::after { content: ''; position: absolute; right: -5px; top: 50%; transform: translateY(-50%); width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px var(--accent-glow); opacity: 0; transition: opacity 0.15s; }
|
|
.progress-bar:hover .progress-fill::after { opacity: 1; }
|
|
|
|
.volume-row { display: flex; align-items: center; gap: 0.5rem; justify-content: flex-end; }
|
|
.vol-icon { font-size: 0.9rem; color: var(--text-muted); cursor: pointer; }
|
|
.volume-slider { -webkit-appearance: none; appearance: none; width: 80px; height: 4px; border-radius: 2px; background: var(--bg-hover); cursor: pointer; outline: none; }
|
|
.volume-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); cursor: pointer; }
|
|
|
|
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
|
|
@keyframes spin { to { transform: rotate(360deg); } }
|
|
.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.7s linear infinite; }
|
|
.toast { position: fixed; bottom: 90px; right: 1.5rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 0.6rem 1rem; font-size: 0.8rem; color: var(--text-dim); box-shadow: 0 8px 24px rgba(0,0,0,0.4); opacity: 0; transform: translateY(8px); transition: all 0.25s; pointer-events: none; z-index: 100; }
|
|
.toast.show { opacity: 1; transform: translateY(0); }
|
|
|
|
@media (max-width: 768px) {
|
|
.btn-menu { display: inline-block; }
|
|
.header { padding: 0.75rem 1rem; }
|
|
.sidebar { position: absolute; top: 0; bottom: 0; left: -100%; width: 85%; max-width: 320px; z-index: 30; transition: left 0.3s; box-shadow: 4px 0 20px rgba(0,0,0,0.6); }
|
|
.sidebar.open { left: 0; }
|
|
.player-bar { grid-template-columns: 1fr; gap: 0.75rem; padding: 0.75rem 1rem; }
|
|
.volume-row { display: none; }
|
|
.search-wrap input { width: 140px; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<header class="header">
|
|
<div class="header-logo">
|
|
<button class="btn-menu" onclick="toggleSidebar()">☰</button>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="9" cy="18" r="3"/><circle cx="18" cy="15" r="3"/><path d="M12 18V6l9-3v3"/></svg>
|
|
Furumi
|
|
<span class="header-version">v<!-- VERSION_PLACEHOLDER --></span>
|
|
</div>
|
|
<div style="display:flex;align-items:center;gap:1rem">
|
|
<div class="search-wrap">
|
|
<input id="searchInput" placeholder="Search..." oninput="onSearch(this.value)" onkeydown="if(event.key==='Escape'){closeSearch();}">
|
|
<div class="search-dropdown" id="searchDropdown"></div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="main">
|
|
<div class="sidebar-overlay" id="sidebarOverlay" onclick="toggleSidebar()"></div>
|
|
<aside class="sidebar" id="sidebar">
|
|
<div class="sidebar-header">Library</div>
|
|
<div class="breadcrumb" id="breadcrumb"><span onclick="showArtists()">Artists</span></div>
|
|
<div class="file-list" id="fileList"></div>
|
|
</aside>
|
|
|
|
<section class="queue-panel">
|
|
<div class="queue-header">
|
|
<span>Queue</span>
|
|
<div class="queue-actions">
|
|
<button class="queue-btn active" id="btnShuffle" onclick="toggleShuffle()">Shuffle</button>
|
|
<button class="queue-btn active" id="btnRepeat" onclick="toggleRepeat()">Repeat</button>
|
|
<button class="queue-btn" onclick="clearQueue()">Clear</button>
|
|
</div>
|
|
</div>
|
|
<div class="queue-list" id="queueList">
|
|
<div class="queue-empty"><div class="empty-icon">🎵</div><div>Select an album to start</div></div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<div class="player-bar">
|
|
<div class="np-info">
|
|
<div class="np-cover" id="npCover">🎵</div>
|
|
<div class="np-text">
|
|
<div class="np-title" id="npTitle">Nothing playing</div>
|
|
<div class="np-artist" id="npArtist">—</div>
|
|
</div>
|
|
</div>
|
|
<div class="controls">
|
|
<div class="ctrl-btns">
|
|
<button class="ctrl-btn" onclick="prevTrack()">⏮</button>
|
|
<button class="ctrl-btn ctrl-btn-main" id="btnPlayPause" onclick="togglePlay()">▶</button>
|
|
<button class="ctrl-btn" onclick="nextTrack()">⏭</button>
|
|
</div>
|
|
<div class="progress-row">
|
|
<span class="time" id="timeElapsed">0:00</span>
|
|
<div class="progress-bar" id="progressBar" onclick="seekTo(event)">
|
|
<div class="progress-fill" id="progressFill" style="width:0%"></div>
|
|
</div>
|
|
<span class="time" id="timeDuration">0:00</span>
|
|
</div>
|
|
</div>
|
|
<div class="volume-row">
|
|
<span class="vol-icon" onclick="toggleMute()" id="volIcon">🔊</span>
|
|
<input type="range" class="volume-slider" id="volSlider" min="0" max="100" value="80" oninput="setVolume(this.value)">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="toast" id="toast"></div>
|
|
<audio id="audioEl"></audio>
|
|
|
|
<script>
|
|
const audio = document.getElementById('audioEl');
|
|
let queue = []; // [{slug, title, artist, album_slug, duration, cover}]
|
|
let queueIndex = -1;
|
|
let shuffle = false;
|
|
let repeatAll = true;
|
|
let shuffleOrder = [];
|
|
let searchTimer = null;
|
|
|
|
// Restore prefs
|
|
try {
|
|
const v = localStorage.getItem('furumi_vol');
|
|
if (v !== null) { audio.volume = v / 100; document.getElementById('volSlider').value = v; }
|
|
shuffle = localStorage.getItem('furumi_shuffle') === '1';
|
|
repeatAll = localStorage.getItem('furumi_repeat') !== '0';
|
|
document.getElementById('btnShuffle').classList.toggle('active', shuffle);
|
|
document.getElementById('btnRepeat').classList.toggle('active', repeatAll);
|
|
} catch(e) {}
|
|
|
|
// --- Audio events ---
|
|
audio.addEventListener('timeupdate', () => {
|
|
if (audio.duration) {
|
|
document.getElementById('progressFill').style.width = (audio.currentTime / audio.duration * 100) + '%';
|
|
document.getElementById('timeElapsed').textContent = fmt(audio.currentTime);
|
|
document.getElementById('timeDuration').textContent = fmt(audio.duration);
|
|
}
|
|
});
|
|
audio.addEventListener('ended', () => nextTrack());
|
|
audio.addEventListener('play', () => document.getElementById('btnPlayPause').innerHTML = '⏸');
|
|
audio.addEventListener('pause', () => document.getElementById('btnPlayPause').innerHTML = '▶');
|
|
audio.addEventListener('error', () => { showToast('Playback error'); nextTrack(); });
|
|
|
|
// --- API helper ---
|
|
const _base = location.pathname.replace(/\/+$/, '');
|
|
const API = _base + '/api';
|
|
async function api(path) {
|
|
const r = await fetch(API + path);
|
|
if (!r.ok) return null;
|
|
return r.json();
|
|
}
|
|
|
|
// --- Library navigation ---
|
|
async function showArtists() {
|
|
setBreadcrumb([{label: 'Artists', action: 'showArtists()'}]);
|
|
const el = document.getElementById('fileList');
|
|
el.innerHTML = '<div style="padding:2rem;text-align:center"><div class="spinner"></div></div>';
|
|
const artists = await api('/artists');
|
|
if (!artists) { el.innerHTML = '<div style="padding:1rem;color:var(--danger)">Error</div>'; return; }
|
|
el.innerHTML = '';
|
|
artists.forEach(a => {
|
|
const div = document.createElement('div');
|
|
div.className = 'file-item dir';
|
|
div.innerHTML = `<span class="icon">👤</span><span class="name">${esc(a.name)}</span><span class="detail">${a.album_count} albums</span>`;
|
|
div.onclick = () => showArtistAlbums(a.slug, a.name);
|
|
el.appendChild(div);
|
|
});
|
|
}
|
|
|
|
async function showArtistAlbums(artistSlug, artistName) {
|
|
setBreadcrumb([
|
|
{label: 'Artists', action: 'showArtists()'},
|
|
{label: artistName, action: `showArtistAlbums('${artistSlug}','${esc(artistName)}')`}
|
|
]);
|
|
const el = document.getElementById('fileList');
|
|
el.innerHTML = '<div style="padding:2rem;text-align:center"><div class="spinner"></div></div>';
|
|
const albums = await api('/artists/' + artistSlug + '/albums');
|
|
if (!albums) { el.innerHTML = '<div style="padding:1rem;color:var(--danger)">Error</div>'; return; }
|
|
el.innerHTML = '';
|
|
|
|
// "Play all" button
|
|
const allBtn = document.createElement('div');
|
|
allBtn.className = 'file-item';
|
|
allBtn.innerHTML = '<span class="icon">▶</span><span class="name" style="color:var(--accent);font-weight:500">Play all tracks</span>';
|
|
allBtn.onclick = () => playAllArtistTracks(artistSlug);
|
|
el.appendChild(allBtn);
|
|
|
|
albums.forEach(a => {
|
|
const div = document.createElement('div');
|
|
div.className = 'file-item dir';
|
|
const year = a.year ? `(${a.year})` : '';
|
|
div.innerHTML = `<span class="icon">💿</span><span class="name">${esc(a.name)} ${year}</span>
|
|
<span class="detail">${a.track_count} tracks</span>
|
|
<button class="add-btn" title="Add album to queue">➕</button>`;
|
|
div.querySelector('.add-btn').onclick = (ev) => { ev.stopPropagation(); addAlbumToQueue(a.slug); };
|
|
div.onclick = () => showAlbumTracks(a.slug, a.name, artistSlug, artistName);
|
|
el.appendChild(div);
|
|
});
|
|
}
|
|
|
|
async function showAlbumTracks(albumSlug, albumName, artistSlug, artistName) {
|
|
setBreadcrumb([
|
|
{label: 'Artists', action: 'showArtists()'},
|
|
{label: artistName, action: `showArtistAlbums('${artistSlug}','${esc(artistName)}')`},
|
|
{label: albumName}
|
|
]);
|
|
const el = document.getElementById('fileList');
|
|
el.innerHTML = '<div style="padding:2rem;text-align:center"><div class="spinner"></div></div>';
|
|
const tracks = await api('/albums/' + albumSlug);
|
|
if (!tracks) { el.innerHTML = '<div style="padding:1rem;color:var(--danger)">Error</div>'; return; }
|
|
el.innerHTML = '';
|
|
|
|
// "Play album" button
|
|
const allBtn = document.createElement('div');
|
|
allBtn.className = 'file-item';
|
|
allBtn.innerHTML = '<span class="icon">▶</span><span class="name" style="color:var(--accent);font-weight:500">Play album</span>';
|
|
allBtn.onclick = () => addAlbumToQueue(albumSlug, true);
|
|
el.appendChild(allBtn);
|
|
|
|
const coverUrl = API + '/albums/' + albumSlug + '/cover';
|
|
|
|
tracks.forEach(t => {
|
|
const div = document.createElement('div');
|
|
div.className = 'file-item';
|
|
const num = t.track_number ? t.track_number + '. ' : '';
|
|
const dur = t.duration_secs ? fmt(t.duration_secs) : '';
|
|
div.innerHTML = `<span class="icon">🎵</span><span class="name">${num}${esc(t.title)}</span>
|
|
<span class="detail">${dur}</span>`;
|
|
div.onclick = () => {
|
|
addTrackToQueue({slug: t.slug, title: t.title, artist: t.artist_name, album_slug: albumSlug, duration: t.duration_secs}, true);
|
|
};
|
|
el.appendChild(div);
|
|
});
|
|
}
|
|
|
|
function setBreadcrumb(parts) {
|
|
const el = document.getElementById('breadcrumb');
|
|
el.innerHTML = parts.map((p, i) => {
|
|
if (i < parts.length - 1 && p.action) {
|
|
return `<span onclick="${p.action}">${esc(p.label)}</span>`;
|
|
}
|
|
return esc(p.label);
|
|
}).join(' / ');
|
|
}
|
|
|
|
// --- Queue management ---
|
|
function addTrackToQueue(track, playNow) {
|
|
const existing = queue.findIndex(t => t.slug === track.slug);
|
|
if (existing !== -1) {
|
|
if (playNow) playIndex(existing);
|
|
return;
|
|
}
|
|
queue.push(track);
|
|
renderQueue();
|
|
if (playNow || (queueIndex === -1 && queue.length === 1)) {
|
|
playIndex(queue.length - 1);
|
|
}
|
|
}
|
|
|
|
async function addAlbumToQueue(albumSlug, playFirst) {
|
|
const tracks = await api('/albums/' + albumSlug);
|
|
if (!tracks || !tracks.length) return;
|
|
let firstIdx = queue.length;
|
|
tracks.forEach(t => {
|
|
if (queue.find(q => q.slug === t.slug)) return;
|
|
queue.push({slug: t.slug, title: t.title, artist: t.artist_name, album_slug: albumSlug, duration: t.duration_secs});
|
|
});
|
|
renderQueue();
|
|
if (playFirst || queueIndex === -1) playIndex(firstIdx);
|
|
showToast(`Added ${tracks.length} tracks`);
|
|
}
|
|
|
|
async function playAllArtistTracks(artistSlug) {
|
|
const tracks = await api('/artists/' + artistSlug + '/tracks');
|
|
if (!tracks || !tracks.length) return;
|
|
clearQueue();
|
|
tracks.forEach(t => {
|
|
queue.push({slug: t.slug, title: t.title, artist: t.artist_name, album_slug: t.album_slug, duration: t.duration_secs});
|
|
});
|
|
renderQueue();
|
|
playIndex(0);
|
|
showToast(`Added ${tracks.length} tracks`);
|
|
}
|
|
|
|
function playIndex(i) {
|
|
if (i < 0 || i >= queue.length) return;
|
|
queueIndex = i;
|
|
const track = queue[i];
|
|
audio.src = API + '/stream/' + track.slug;
|
|
audio.play().catch(() => {});
|
|
updateNowPlaying(track);
|
|
renderQueue();
|
|
scrollQueueToActive();
|
|
history.replaceState(null, '', '?t=' + track.slug);
|
|
}
|
|
|
|
function updateNowPlaying(track) {
|
|
if (!track) { document.getElementById('npTitle').textContent = 'Nothing playing'; document.getElementById('npArtist').textContent = '\u2014'; return; }
|
|
document.getElementById('npTitle').textContent = track.title;
|
|
document.getElementById('npArtist').textContent = track.artist || '\u2014';
|
|
document.title = track.title + ' \u2014 Furumi';
|
|
|
|
const cover = document.getElementById('npCover');
|
|
const coverUrl = API + '/tracks/' + track.slug + '/cover';
|
|
cover.innerHTML = `<img src="${coverUrl}" alt="" onerror="this.parentElement.innerHTML='🎵'">`;
|
|
|
|
if ('mediaSession' in navigator) {
|
|
navigator.mediaSession.metadata = new MediaMetadata({
|
|
title: track.title,
|
|
artist: track.artist || '',
|
|
album: '',
|
|
artwork: [{src: coverUrl, sizes: '512x512'}]
|
|
});
|
|
}
|
|
}
|
|
|
|
function renderQueue() {
|
|
const el = document.getElementById('queueList');
|
|
if (!queue.length) {
|
|
el.innerHTML = '<div class="queue-empty"><div class="empty-icon">🎵</div><div>Select an album to start</div></div>';
|
|
return;
|
|
}
|
|
const order = currentOrder();
|
|
el.innerHTML = '';
|
|
order.forEach((origIdx, pos) => {
|
|
const t = queue[origIdx];
|
|
const isPlaying = origIdx === queueIndex;
|
|
const div = document.createElement('div');
|
|
div.className = 'queue-item' + (isPlaying ? ' playing' : '');
|
|
|
|
const coverSrc = t.album_slug ? `${API}/tracks/${t.slug}/cover` : '';
|
|
const coverHtml = coverSrc
|
|
? `<img src="${coverSrc}" alt="" onerror="this.parentElement.innerHTML='🎵'">`
|
|
: '🎵';
|
|
const dur = t.duration ? fmt(t.duration) : '';
|
|
|
|
div.innerHTML = `
|
|
<span class="qi-index">${isPlaying ? '' : pos + 1}</span>
|
|
<div class="qi-cover">${coverHtml}</div>
|
|
<div class="qi-info"><div class="qi-title">${esc(t.title)}</div><div class="qi-artist">${esc(t.artist || '')}</div></div>
|
|
<span class="qi-dur">${dur}</span>
|
|
<button class="qi-remove" onclick="removeFromQueue(${origIdx},event)">✕</button>
|
|
`;
|
|
div.addEventListener('click', () => playIndex(origIdx));
|
|
|
|
// Drag & drop
|
|
div.draggable = true;
|
|
div.addEventListener('dragstart', e => { e.dataTransfer.setData('text/plain', pos); div.classList.add('dragging'); });
|
|
div.addEventListener('dragend', () => { div.classList.remove('dragging'); el.querySelectorAll('.queue-item').forEach(x => x.classList.remove('drag-over')); });
|
|
div.addEventListener('dragover', e => { e.preventDefault(); });
|
|
div.addEventListener('dragenter', () => div.classList.add('drag-over'));
|
|
div.addEventListener('dragleave', () => div.classList.remove('drag-over'));
|
|
div.addEventListener('drop', e => { e.preventDefault(); div.classList.remove('drag-over'); const from = parseInt(e.dataTransfer.getData('text/plain')); if (!isNaN(from)) moveQueueItem(from, pos); });
|
|
|
|
el.appendChild(div);
|
|
});
|
|
}
|
|
|
|
function scrollQueueToActive() {
|
|
const el = document.querySelector('.queue-item.playing');
|
|
if (el) el.scrollIntoView({behavior: 'smooth', block: 'nearest'});
|
|
}
|
|
|
|
function removeFromQueue(idx, ev) {
|
|
if (ev) ev.stopPropagation();
|
|
if (idx === queueIndex) { queueIndex = -1; audio.pause(); audio.src = ''; updateNowPlaying(null); }
|
|
else if (queueIndex > idx) queueIndex--;
|
|
queue.splice(idx, 1);
|
|
if (shuffle) { const si = shuffleOrder.indexOf(idx); if (si !== -1) shuffleOrder.splice(si, 1); for (let i = 0; i < shuffleOrder.length; i++) if (shuffleOrder[i] > idx) shuffleOrder[i]--; }
|
|
renderQueue();
|
|
}
|
|
|
|
function moveQueueItem(from, to) {
|
|
if (from === to) return;
|
|
if (shuffle) { const item = shuffleOrder.splice(from, 1)[0]; shuffleOrder.splice(to, 0, item); }
|
|
else { const item = queue.splice(from, 1)[0]; queue.splice(to, 0, item); if (queueIndex === from) queueIndex = to; else if (from < queueIndex && to >= queueIndex) queueIndex--; else if (from > queueIndex && to <= queueIndex) queueIndex++; }
|
|
renderQueue();
|
|
}
|
|
|
|
function clearQueue() {
|
|
queue = []; queueIndex = -1; shuffleOrder = [];
|
|
audio.pause(); audio.src = '';
|
|
updateNowPlaying(null);
|
|
document.title = 'Furumi Player';
|
|
renderQueue();
|
|
}
|
|
|
|
// --- Playback controls ---
|
|
function togglePlay() {
|
|
if (!audio.src && queue.length) { playIndex(queueIndex === -1 ? 0 : queueIndex); return; }
|
|
if (audio.paused) audio.play(); else audio.pause();
|
|
}
|
|
function nextTrack() {
|
|
if (!queue.length) return;
|
|
const order = currentOrder();
|
|
const pos = order.indexOf(queueIndex);
|
|
if (pos < order.length - 1) playIndex(order[pos + 1]);
|
|
else if (repeatAll) { if (shuffle) buildShuffleOrder(); playIndex(currentOrder()[0]); }
|
|
}
|
|
function prevTrack() {
|
|
if (!queue.length) return;
|
|
if (audio.currentTime > 3) { audio.currentTime = 0; return; }
|
|
const order = currentOrder();
|
|
const pos = order.indexOf(queueIndex);
|
|
if (pos > 0) playIndex(order[pos - 1]);
|
|
else if (repeatAll) playIndex(order[order.length - 1]);
|
|
}
|
|
function toggleShuffle() { shuffle = !shuffle; if (shuffle) buildShuffleOrder(); document.getElementById('btnShuffle').classList.toggle('active', shuffle); localStorage.setItem('furumi_shuffle', shuffle ? '1' : '0'); renderQueue(); }
|
|
function toggleRepeat() { repeatAll = !repeatAll; document.getElementById('btnRepeat').classList.toggle('active', repeatAll); localStorage.setItem('furumi_repeat', repeatAll ? '1' : '0'); }
|
|
function buildShuffleOrder() { shuffleOrder = [...Array(queue.length).keys()]; for (let i = shuffleOrder.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [shuffleOrder[i], shuffleOrder[j]] = [shuffleOrder[j], shuffleOrder[i]]; } if (queueIndex !== -1) { const ci = shuffleOrder.indexOf(queueIndex); if (ci > 0) { shuffleOrder.splice(ci, 1); shuffleOrder.unshift(queueIndex); } } }
|
|
function currentOrder() { if (!shuffle) return [...Array(queue.length).keys()]; if (shuffleOrder.length !== queue.length) buildShuffleOrder(); return shuffleOrder; }
|
|
|
|
// --- Seek & Volume ---
|
|
function seekTo(e) { if (!audio.duration) return; const bar = document.getElementById('progressBar'); const pct = (e.clientX - bar.getBoundingClientRect().left) / bar.offsetWidth; audio.currentTime = pct * audio.duration; }
|
|
let muted = false;
|
|
function toggleMute() { muted = !muted; audio.muted = muted; document.getElementById('volIcon').innerHTML = muted ? '🔇' : '🔊'; }
|
|
function setVolume(v) { audio.volume = v / 100; document.getElementById('volIcon').innerHTML = v == 0 ? '🔇' : '🔊'; localStorage.setItem('furumi_vol', v); }
|
|
|
|
// --- Search ---
|
|
function onSearch(q) {
|
|
clearTimeout(searchTimer);
|
|
if (q.length < 2) { closeSearch(); return; }
|
|
searchTimer = setTimeout(async () => {
|
|
const results = await api('/search?q=' + encodeURIComponent(q));
|
|
if (!results || !results.length) { closeSearch(); return; }
|
|
const dd = document.getElementById('searchDropdown');
|
|
dd.innerHTML = results.map(r => {
|
|
const detail = r.detail ? `<span class="sr-detail">${esc(r.detail)}</span>` : '';
|
|
return `<div class="search-result" onclick="onSearchSelect('${r.result_type}','${r.slug}')"><span class="sr-type">${r.result_type}</span>${esc(r.name)}${detail}</div>`;
|
|
}).join('');
|
|
dd.classList.add('open');
|
|
}, 250);
|
|
}
|
|
function closeSearch() { document.getElementById('searchDropdown').classList.remove('open'); }
|
|
function onSearchSelect(type, slug) {
|
|
closeSearch();
|
|
document.getElementById('searchInput').value = '';
|
|
if (type === 'artist') showArtistAlbums(slug, '');
|
|
else if (type === 'album') addAlbumToQueue(slug, true);
|
|
else if (type === 'track') {
|
|
addTrackToQueue({slug, title: '', artist: '', album_slug: null, duration: null}, true);
|
|
// Fetch full info
|
|
api('/stream/' + slug).catch(() => {});
|
|
}
|
|
}
|
|
|
|
// --- Helpers ---
|
|
function fmt(secs) { if (!secs || isNaN(secs)) return '0:00'; const s = Math.floor(secs); const m = Math.floor(s / 60); const h = Math.floor(m / 60); if (h > 0) return h + ':' + pad(m % 60) + ':' + pad(s % 60); return m + ':' + pad(s % 60); }
|
|
function pad(n) { return String(n).padStart(2, '0'); }
|
|
function esc(s) { return String(s||'').replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"').replace(/'/g,'''); }
|
|
let toastTimer;
|
|
function showToast(msg) { const t = document.getElementById('toast'); t.textContent = msg; t.classList.add('show'); clearTimeout(toastTimer); toastTimer = setTimeout(() => t.classList.remove('show'), 2500); }
|
|
function toggleSidebar() { document.getElementById('sidebar').classList.toggle('open'); document.getElementById('sidebarOverlay').classList.toggle('show'); }
|
|
|
|
// --- MediaSession ---
|
|
if ('mediaSession' in navigator) {
|
|
navigator.mediaSession.setActionHandler('play', togglePlay);
|
|
navigator.mediaSession.setActionHandler('pause', togglePlay);
|
|
navigator.mediaSession.setActionHandler('previoustrack', prevTrack);
|
|
navigator.mediaSession.setActionHandler('nexttrack', nextTrack);
|
|
navigator.mediaSession.setActionHandler('seekto', d => { audio.currentTime = d.seekTime; });
|
|
}
|
|
|
|
// --- Init ---
|
|
(async () => {
|
|
const urlSlug = new URLSearchParams(window.location.search).get('t');
|
|
if (urlSlug) {
|
|
const info = await api('/tracks/' + urlSlug);
|
|
if (info) {
|
|
addTrackToQueue({
|
|
slug: info.slug,
|
|
title: info.title,
|
|
artist: info.artist_name,
|
|
album_slug: info.album_slug,
|
|
duration: info.duration_secs
|
|
}, true);
|
|
}
|
|
}
|
|
showArtists();
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|