2026-03-18 02:44:59 +00:00
<!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 ---
2026-03-18 03:36:20 +00:00
const _base = location.pathname.replace(/\/+$/, '');
const API = _base + '/api';
2026-03-18 02:44:59 +00:00
async function api(path) {
2026-03-18 03:36:20 +00:00
const r = await fetch(API + path);
2026-03-18 02:44:59 +00:00
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);
2026-03-18 03:36:20 +00:00
const coverUrl = API + '/albums/' + albumSlug + '/cover';
2026-03-18 02:44:59 +00:00
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];
2026-03-18 03:36:20 +00:00
audio.src = API + '/stream/' + track.slug;
2026-03-18 02:44:59 +00:00
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');
2026-03-18 03:36:20 +00:00
const coverUrl = API + '/tracks/' + track.slug + '/cover';
2026-03-18 02:44:59 +00:00
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' : '');
2026-03-18 03:36:20 +00:00
const coverSrc = t.album_slug ? `${API}/tracks/${t.slug}/cover` : '';
2026-03-18 02:44:59 +00:00
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 >
