feat: refactoring modules
This commit is contained in:
Boris Cherepanov
@@ -0,0 +1,840 @@
|
||||
import { useEffect, useRef, useState, type MouseEvent as ReactMouseEvent } from 'react'
|
||||
import './furumi-player.css'
|
||||
import { createFurumiApiClient } from './furumiApi'
|
||||
import { SearchDropdown } from './components/SearchDropdown'
|
||||
import { Breadcrumbs } from './components/Breadcrumbs'
|
||||
import { LibraryList } from './components/LibraryList'
|
||||
|
||||
type FurumiPlayerProps = {
|
||||
apiRoot: string
|
||||
}
|
||||
|
||||
type Crumb = { label: string; action?: () => void }
|
||||
|
||||
export function FurumiPlayer({ apiRoot }: FurumiPlayerProps) {
|
||||
const [breadcrumbs, setBreadcrumbs] = useState<Array<{ label: string; action?: () => void }>>(
|
||||
[],
|
||||
)
|
||||
const [libraryLoading, setLibraryLoading] = useState(false)
|
||||
const [libraryError, setLibraryError] = useState<string | null>(null)
|
||||
const [libraryItems, setLibraryItems] = useState<
|
||||
Array<{
|
||||
key: string
|
||||
className: string
|
||||
icon: string
|
||||
name: string
|
||||
detail?: string
|
||||
nameClassName?: string
|
||||
onClick: () => void
|
||||
button?: { title: string; onClick: (ev: ReactMouseEvent<HTMLButtonElement>) => void }
|
||||
}>
|
||||
>([])
|
||||
const [searchResults, setSearchResults] = useState<
|
||||
Array<{ result_type: string; slug: string; name: string; detail?: string }>
|
||||
>([])
|
||||
const [searchOpen, setSearchOpen] = useState(false)
|
||||
const searchSelectRef = useRef<(type: string, slug: string) => void>(() => {})
|
||||
|
||||
useEffect(() => {
|
||||
// --- Original player script adapted for React environment ---
|
||||
const audio = document.getElementById('audioEl') as HTMLAudioElement
|
||||
if (!audio) return
|
||||
|
||||
let queue: Array<{
|
||||
slug: string
|
||||
title: string
|
||||
artist: string
|
||||
album_slug: string | null
|
||||
duration: number | null
|
||||
}> = []
|
||||
let queueIndex = -1
|
||||
let shuffle = false
|
||||
let repeatAll = true
|
||||
let shuffleOrder: number[] = []
|
||||
let searchTimer: number | null = null
|
||||
let toastTimer: number | null = null
|
||||
let muted = false
|
||||
|
||||
// Restore prefs
|
||||
try {
|
||||
const v = window.localStorage.getItem('furumi_vol')
|
||||
const volSlider = document.getElementById('volSlider') as HTMLInputElement | null
|
||||
if (v !== null && volSlider) {
|
||||
audio.volume = Number(v) / 100
|
||||
volSlider.value = v
|
||||
}
|
||||
const btnShuffle = document.getElementById('btnShuffle')
|
||||
const btnRepeat = document.getElementById('btnRepeat')
|
||||
shuffle = window.localStorage.getItem('furumi_shuffle') === '1'
|
||||
repeatAll = window.localStorage.getItem('furumi_repeat') !== '0'
|
||||
btnShuffle?.classList.toggle('active', shuffle)
|
||||
btnRepeat?.classList.toggle('active', repeatAll)
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
|
||||
// --- Audio events ---
|
||||
audio.addEventListener('timeupdate', () => {
|
||||
if (audio.duration) {
|
||||
const fill = document.getElementById('progressFill')
|
||||
const timeElapsed = document.getElementById('timeElapsed')
|
||||
const timeDuration = document.getElementById('timeDuration')
|
||||
if (fill) fill.style.width = `${(audio.currentTime / audio.duration) * 100}%`
|
||||
if (timeElapsed) timeElapsed.textContent = fmt(audio.currentTime)
|
||||
if (timeDuration) timeDuration.textContent = fmt(audio.duration)
|
||||
}
|
||||
})
|
||||
audio.addEventListener('ended', () => nextTrack())
|
||||
audio.addEventListener('play', () => {
|
||||
const btn = document.getElementById('btnPlayPause')
|
||||
if (btn) btn.innerHTML = '⏸'
|
||||
})
|
||||
audio.addEventListener('pause', () => {
|
||||
const btn = document.getElementById('btnPlayPause')
|
||||
if (btn) btn.innerHTML = '▶'
|
||||
})
|
||||
audio.addEventListener('error', () => {
|
||||
showToast('Playback error')
|
||||
nextTrack()
|
||||
})
|
||||
|
||||
// --- API helper ---
|
||||
const API = apiRoot
|
||||
const api = createFurumiApiClient(API)
|
||||
|
||||
// --- Library navigation ---
|
||||
async function showArtists() {
|
||||
setBreadcrumb([{ label: 'Artists', action: showArtists }])
|
||||
setLibraryLoading(true)
|
||||
setLibraryError(null)
|
||||
const artists = await api('/artists')
|
||||
if (!artists) {
|
||||
setLibraryLoading(false)
|
||||
setLibraryError('Error')
|
||||
return
|
||||
}
|
||||
setLibraryLoading(false)
|
||||
setLibraryItems(
|
||||
(artists as any[]).map((a) => ({
|
||||
key: `artist:${a.slug}`,
|
||||
className: 'file-item dir',
|
||||
icon: '👤',
|
||||
name: a.name,
|
||||
detail: `${a.album_count} albums`,
|
||||
onClick: () => void showArtistAlbums(a.slug, a.name),
|
||||
})),
|
||||
)
|
||||
}
|
||||
|
||||
async function showArtistAlbums(artistSlug: string, artistName: string) {
|
||||
setBreadcrumb([
|
||||
{ label: 'Artists', action: showArtists },
|
||||
{ label: artistName, action: () => showArtistAlbums(artistSlug, artistName) },
|
||||
])
|
||||
setLibraryLoading(true)
|
||||
setLibraryError(null)
|
||||
const albums = await api('/artists/' + artistSlug + '/albums')
|
||||
if (!albums) {
|
||||
setLibraryLoading(false)
|
||||
setLibraryError('Error')
|
||||
return
|
||||
}
|
||||
setLibraryLoading(false)
|
||||
const allTracksItem = {
|
||||
key: `artist-all:${artistSlug}`,
|
||||
className: 'file-item',
|
||||
icon: '▶',
|
||||
name: 'Play all tracks',
|
||||
nameClassName: 'name',
|
||||
onClick: () => void playAllArtistTracks(artistSlug),
|
||||
}
|
||||
const albumItems = (albums as any[]).map((a) => {
|
||||
const year = a.year ? ` (${a.year})` : ''
|
||||
return {
|
||||
key: `album:${a.slug}`,
|
||||
className: 'file-item dir',
|
||||
icon: '💿',
|
||||
name: `${a.name}${year}`,
|
||||
detail: `${a.track_count} tracks`,
|
||||
onClick: () => void showAlbumTracks(a.slug, a.name, artistSlug, artistName),
|
||||
button: {
|
||||
title: 'Add album to queue',
|
||||
onClick: (ev: ReactMouseEvent<HTMLButtonElement>) => {
|
||||
ev.stopPropagation()
|
||||
void addAlbumToQueue(a.slug)
|
||||
},
|
||||
},
|
||||
}
|
||||
})
|
||||
setLibraryItems([allTracksItem, ...albumItems])
|
||||
}
|
||||
|
||||
async function showAlbumTracks(
|
||||
albumSlug: string,
|
||||
albumName: string,
|
||||
artistSlug: string,
|
||||
artistName: string,
|
||||
) {
|
||||
setBreadcrumb([
|
||||
{ label: 'Artists', action: showArtists },
|
||||
{ label: artistName, action: () => showArtistAlbums(artistSlug, artistName) },
|
||||
{ label: albumName },
|
||||
])
|
||||
setLibraryLoading(true)
|
||||
setLibraryError(null)
|
||||
const tracks = await api('/albums/' + albumSlug)
|
||||
if (!tracks) {
|
||||
setLibraryLoading(false)
|
||||
setLibraryError('Error')
|
||||
return
|
||||
}
|
||||
setLibraryLoading(false)
|
||||
const playAlbumItem = {
|
||||
key: `album-play:${albumSlug}`,
|
||||
className: 'file-item',
|
||||
icon: '▶',
|
||||
name: 'Play album',
|
||||
onClick: () => {
|
||||
void addAlbumToQueue(albumSlug, true)
|
||||
},
|
||||
}
|
||||
const trackItems = (tracks as any[]).map((t) => {
|
||||
const num = t.track_number ? `${t.track_number}. ` : ''
|
||||
const dur = t.duration_secs ? fmt(t.duration_secs) : ''
|
||||
return {
|
||||
key: `track:${t.slug}`,
|
||||
className: 'file-item',
|
||||
icon: '🎵',
|
||||
name: `${num}${t.title}`,
|
||||
detail: dur,
|
||||
onClick: () => {
|
||||
addTrackToQueue(
|
||||
{
|
||||
slug: t.slug,
|
||||
title: t.title,
|
||||
artist: t.artist_name,
|
||||
album_slug: albumSlug,
|
||||
duration: t.duration_secs,
|
||||
},
|
||||
true,
|
||||
)
|
||||
},
|
||||
}
|
||||
})
|
||||
setLibraryItems([playAlbumItem, ...trackItems])
|
||||
}
|
||||
|
||||
function setBreadcrumb(parts: Crumb[]) {
|
||||
setBreadcrumbs(parts)
|
||||
}
|
||||
|
||||
// --- Queue management ---
|
||||
function addTrackToQueue(
|
||||
track: {
|
||||
slug: string
|
||||
title: string
|
||||
artist: string
|
||||
album_slug: string | null
|
||||
duration: number | null
|
||||
},
|
||||
playNow?: boolean,
|
||||
) {
|
||||
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: string, playFirst?: boolean) {
|
||||
const tracks = await api('/albums/' + albumSlug)
|
||||
if (!tracks || !(tracks as any[]).length) return
|
||||
const list = tracks as any[]
|
||||
let firstIdx = queue.length
|
||||
list.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 ${list.length} tracks`)
|
||||
}
|
||||
|
||||
async function playAllArtistTracks(artistSlug: string) {
|
||||
const tracks = await api('/artists/' + artistSlug + '/tracks')
|
||||
if (!tracks || !(tracks as any[]).length) return
|
||||
const list = tracks as any[]
|
||||
clearQueue()
|
||||
list.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 ${list.length} tracks`)
|
||||
}
|
||||
|
||||
function playIndex(i: number) {
|
||||
if (i < 0 || i >= queue.length) return
|
||||
queueIndex = i
|
||||
const track = queue[i]
|
||||
audio.src = `${API}/stream/${track.slug}`
|
||||
void audio.play().catch(() => {})
|
||||
updateNowPlaying(track)
|
||||
renderQueue()
|
||||
scrollQueueToActive()
|
||||
if (window.history && window.history.replaceState) {
|
||||
const url = new URL(window.location.href)
|
||||
url.searchParams.set('t', track.slug)
|
||||
window.history.replaceState(null, '', url.toString())
|
||||
}
|
||||
}
|
||||
|
||||
function updateNowPlaying(track: (typeof queue)[number] | null) {
|
||||
const npTitle = document.getElementById('npTitle')
|
||||
const npArtist = document.getElementById('npArtist')
|
||||
if (!track) {
|
||||
if (npTitle) npTitle.textContent = 'Nothing playing'
|
||||
if (npArtist) npArtist.textContent = '—'
|
||||
return
|
||||
}
|
||||
if (npTitle) npTitle.textContent = track.title
|
||||
if (npArtist) npArtist.textContent = track.artist || '—'
|
||||
document.title = `${track.title} — Furumi`
|
||||
|
||||
const cover = document.getElementById('npCover')
|
||||
const coverUrl = `${API}/tracks/${track.slug}/cover`
|
||||
if (cover) {
|
||||
cover.innerHTML = `<img src="${coverUrl}" alt="" onerror="this.parentElement.innerHTML='🎵'">`
|
||||
}
|
||||
|
||||
if ('mediaSession' in navigator) {
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
navigator.mediaSession.metadata = new window.MediaMetadata({
|
||||
title: track.title,
|
||||
artist: track.artist || '',
|
||||
album: '',
|
||||
artwork: [{ src: coverUrl, sizes: '512x512' }],
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function currentOrder() {
|
||||
if (!shuffle) return [...Array(queue.length).keys()]
|
||||
if (shuffleOrder.length !== queue.length) buildShuffleOrder()
|
||||
return shuffleOrder
|
||||
}
|
||||
|
||||
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 renderQueue() {
|
||||
const el = document.getElementById('queueList')
|
||||
if (!el) return
|
||||
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">✕</button>
|
||||
`
|
||||
div.addEventListener('click', () => playIndex(origIdx))
|
||||
|
||||
const removeBtn = div.querySelector('.qi-remove') as HTMLButtonElement | null
|
||||
if (removeBtn) {
|
||||
removeBtn.onclick = (ev) => {
|
||||
ev.stopPropagation()
|
||||
removeFromQueue(origIdx)
|
||||
}
|
||||
}
|
||||
|
||||
div.draggable = true
|
||||
div.addEventListener('dragstart', (e) => {
|
||||
e.dataTransfer?.setData('text/plain', String(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') ?? '', 10)
|
||||
if (!Number.isNaN(from)) moveQueueItem(from, pos)
|
||||
})
|
||||
|
||||
el.appendChild(div)
|
||||
})
|
||||
}
|
||||
|
||||
function scrollQueueToActive() {
|
||||
const el = document.querySelector('.queue-item.playing') as HTMLElement | null
|
||||
if (el) el.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
|
||||
}
|
||||
|
||||
function removeFromQueue(idx: number) {
|
||||
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: number, to: number) {
|
||||
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) void 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()
|
||||
const btn = document.getElementById('btnShuffle')
|
||||
btn?.classList.toggle('active', shuffle)
|
||||
window.localStorage.setItem('furumi_shuffle', shuffle ? '1' : '0')
|
||||
renderQueue()
|
||||
}
|
||||
|
||||
function toggleRepeat() {
|
||||
repeatAll = !repeatAll
|
||||
const btn = document.getElementById('btnRepeat')
|
||||
btn?.classList.toggle('active', repeatAll)
|
||||
window.localStorage.setItem('furumi_repeat', repeatAll ? '1' : '0')
|
||||
}
|
||||
|
||||
// --- Seek & Volume ---
|
||||
function seekTo(e: MouseEvent) {
|
||||
if (!audio.duration) return
|
||||
const bar = document.getElementById('progressBar') as HTMLDivElement | null
|
||||
if (!bar) return
|
||||
const rect = bar.getBoundingClientRect()
|
||||
const pct = (e.clientX - rect.left) / rect.width
|
||||
audio.currentTime = pct * audio.duration
|
||||
}
|
||||
|
||||
function toggleMute() {
|
||||
muted = !muted
|
||||
audio.muted = muted
|
||||
const volIcon = document.getElementById('volIcon')
|
||||
if (volIcon) volIcon.innerHTML = muted ? '🔇' : '🔊'
|
||||
}
|
||||
|
||||
function setVolume(v: number) {
|
||||
audio.volume = v / 100
|
||||
const volIcon = document.getElementById('volIcon')
|
||||
if (volIcon) volIcon.innerHTML = v === 0 ? '🔇' : '🔊'
|
||||
window.localStorage.setItem('furumi_vol', String(v))
|
||||
}
|
||||
|
||||
// --- Search ---
|
||||
function onSearch(q: string) {
|
||||
if (searchTimer) {
|
||||
window.clearTimeout(searchTimer)
|
||||
}
|
||||
if (q.length < 2) {
|
||||
closeSearch()
|
||||
return
|
||||
}
|
||||
searchTimer = window.setTimeout(async () => {
|
||||
const results = await api('/search?q=' + encodeURIComponent(q))
|
||||
if (!results || !(results as any[]).length) {
|
||||
closeSearch()
|
||||
return
|
||||
}
|
||||
setSearchResults(results as any[])
|
||||
setSearchOpen(true)
|
||||
}, 250)
|
||||
}
|
||||
|
||||
function closeSearch() {
|
||||
setSearchOpen(false)
|
||||
setSearchResults([])
|
||||
}
|
||||
|
||||
function onSearchSelect(type: string, slug: string) {
|
||||
closeSearch()
|
||||
if (type === 'artist') void showArtistAlbums(slug, '')
|
||||
else if (type === 'album') void addAlbumToQueue(slug, true)
|
||||
else if (type === 'track') {
|
||||
addTrackToQueue(
|
||||
{ slug, title: '', artist: '', album_slug: null, duration: null },
|
||||
true,
|
||||
)
|
||||
void api('/stream/' + slug).catch(() => null)
|
||||
}
|
||||
}
|
||||
searchSelectRef.current = onSearchSelect
|
||||
|
||||
// --- Helpers ---
|
||||
function fmt(secs: number) {
|
||||
if (!secs || Number.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: number) {
|
||||
return String(n).padStart(2, '0')
|
||||
}
|
||||
|
||||
function esc(s: string | null | undefined) {
|
||||
return String(s ?? '')
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/"/g, '"')
|
||||
.replace(/'/g, ''')
|
||||
}
|
||||
|
||||
function showToast(msg: string) {
|
||||
const t = document.getElementById('toast')
|
||||
if (!t) return
|
||||
t.textContent = msg
|
||||
t.classList.add('show')
|
||||
if (toastTimer) window.clearTimeout(toastTimer)
|
||||
toastTimer = window.setTimeout(() => t.classList.remove('show'), 2500)
|
||||
}
|
||||
|
||||
function toggleSidebar() {
|
||||
const sidebar = document.getElementById('sidebar')
|
||||
const overlay = document.getElementById('sidebarOverlay')
|
||||
sidebar?.classList.toggle('open')
|
||||
overlay?.classList.toggle('show')
|
||||
}
|
||||
|
||||
// --- MediaSession ---
|
||||
if ('mediaSession' in navigator) {
|
||||
try {
|
||||
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: any) => {
|
||||
if (typeof d.seekTime === 'number') {
|
||||
audio.currentTime = d.seekTime
|
||||
}
|
||||
})
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
}
|
||||
|
||||
// --- Wire DOM events that were inline in HTML ---
|
||||
const btnMenu = document.querySelector('.btn-menu')
|
||||
btnMenu?.addEventListener('click', () => toggleSidebar())
|
||||
|
||||
const sidebarOverlay = document.getElementById('sidebarOverlay')
|
||||
sidebarOverlay?.addEventListener('click', () => toggleSidebar())
|
||||
|
||||
const searchInput = document.getElementById('searchInput') as HTMLInputElement | null
|
||||
if (searchInput) {
|
||||
searchInput.addEventListener('input', (e) => {
|
||||
onSearch((e.target as HTMLInputElement).value)
|
||||
})
|
||||
searchInput.addEventListener('keydown', (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') closeSearch()
|
||||
})
|
||||
}
|
||||
|
||||
const btnShuffle = document.getElementById('btnShuffle')
|
||||
btnShuffle?.addEventListener('click', () => toggleShuffle())
|
||||
const btnRepeat = document.getElementById('btnRepeat')
|
||||
btnRepeat?.addEventListener('click', () => toggleRepeat())
|
||||
const btnClear = document.getElementById('btnClearQueue')
|
||||
btnClear?.addEventListener('click', () => clearQueue())
|
||||
|
||||
const btnPrev = document.getElementById('btnPrev')
|
||||
btnPrev?.addEventListener('click', () => prevTrack())
|
||||
const btnPlay = document.getElementById('btnPlayPause')
|
||||
btnPlay?.addEventListener('click', () => togglePlay())
|
||||
const btnNext = document.getElementById('btnNext')
|
||||
btnNext?.addEventListener('click', () => nextTrack())
|
||||
|
||||
const progressBar = document.getElementById('progressBar')
|
||||
progressBar?.addEventListener('click', (e) => seekTo(e as MouseEvent))
|
||||
|
||||
const volIcon = document.getElementById('volIcon')
|
||||
volIcon?.addEventListener('click', () => toggleMute())
|
||||
const volSlider = document.getElementById('volSlider') as HTMLInputElement | null
|
||||
if (volSlider) {
|
||||
volSlider.addEventListener('input', (e) => {
|
||||
const v = Number((e.target as HTMLInputElement).value)
|
||||
setVolume(v)
|
||||
})
|
||||
}
|
||||
|
||||
const clearQueueBtn = document.getElementById('btnClearQueue')
|
||||
clearQueueBtn?.addEventListener('click', () => clearQueue())
|
||||
|
||||
// --- Init ---
|
||||
;(async () => {
|
||||
const url = new URL(window.location.href)
|
||||
const urlSlug = url.searchParams.get('t')
|
||||
if (urlSlug) {
|
||||
const info = await api('/tracks/' + urlSlug)
|
||||
if (info) {
|
||||
addTrackToQueue(
|
||||
{
|
||||
slug: (info as any).slug,
|
||||
title: (info as any).title,
|
||||
artist: (info as any).artist_name,
|
||||
album_slug: (info as any).album_slug,
|
||||
duration: (info as any).duration_secs,
|
||||
},
|
||||
true,
|
||||
)
|
||||
}
|
||||
}
|
||||
void showArtists()
|
||||
})()
|
||||
|
||||
// Cleanup: best-effort remove listeners on unmount
|
||||
return () => {
|
||||
audio.pause()
|
||||
}
|
||||
}, [apiRoot])
|
||||
|
||||
return (
|
||||
<div className="furumi-root">
|
||||
<header className="header">
|
||||
<div className="header-logo">
|
||||
<button className="btn-menu">☰</button>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<circle cx="9" cy="18" r="3" />
|
||||
<circle cx="18" cy="15" r="3" />
|
||||
<path d="M12 18V6l9-3v3" />
|
||||
</svg>
|
||||
Furumi
|
||||
<span className="header-version">v</span>
|
||||
</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
|
||||
<div className="search-wrap">
|
||||
<input id="searchInput" placeholder="Search..." />
|
||||
<SearchDropdown
|
||||
isOpen={searchOpen}
|
||||
results={searchResults}
|
||||
onSelect={(type, slug) => searchSelectRef.current(type, slug)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="main">
|
||||
<div className="sidebar-overlay" id="sidebarOverlay" />
|
||||
<aside className="sidebar" id="sidebar">
|
||||
<div className="sidebar-header">Library</div>
|
||||
<Breadcrumbs items={breadcrumbs} />
|
||||
<div className="file-list" id="fileList">
|
||||
<LibraryList loading={libraryLoading} error={libraryError} items={libraryItems} />
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<section className="queue-panel">
|
||||
<div className="queue-header">
|
||||
<span>Queue</span>
|
||||
<div className="queue-actions">
|
||||
<button className="queue-btn active" id="btnShuffle">
|
||||
Shuffle
|
||||
</button>
|
||||
<button className="queue-btn active" id="btnRepeat">
|
||||
Repeat
|
||||
</button>
|
||||
<button className="queue-btn" id="btnClearQueue">
|
||||
Clear
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="queue-list" id="queueList">
|
||||
<div className="queue-empty">
|
||||
<div className="empty-icon">🎵</div>
|
||||
<div>Select an album to start</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div className="player-bar">
|
||||
<div className="np-info">
|
||||
<div className="np-cover" id="npCover">
|
||||
🎵
|
||||
</div>
|
||||
<div className="np-text">
|
||||
<div className="np-title" id="npTitle">
|
||||
Nothing playing
|
||||
</div>
|
||||
<div className="np-artist" id="npArtist">
|
||||
—
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="controls">
|
||||
<div className="ctrl-btns">
|
||||
<button className="ctrl-btn" id="btnPrev">
|
||||
⏮
|
||||
</button>
|
||||
<button className="ctrl-btn ctrl-btn-main" id="btnPlayPause">
|
||||
▶
|
||||
</button>
|
||||
<button className="ctrl-btn" id="btnNext">
|
||||
⏭
|
||||
</button>
|
||||
</div>
|
||||
<div className="progress-row">
|
||||
<span className="time" id="timeElapsed">
|
||||
0:00
|
||||
</span>
|
||||
<div className="progress-bar" id="progressBar">
|
||||
<div className="progress-fill" id="progressFill" style={{ width: '0%' }} />
|
||||
</div>
|
||||
<span className="time" id="timeDuration">
|
||||
0:00
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="volume-row">
|
||||
<span className="vol-icon" id="volIcon">
|
||||
🔊
|
||||
</span>
|
||||
<input
|
||||
type="range"
|
||||
className="volume-slider"
|
||||
id="volSlider"
|
||||
min={0}
|
||||
max={100}
|
||||
defaultValue={80}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="toast" id="toast" />
|
||||
<audio id="audioEl" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user