841 lines
27 KiB
TypeScript
841 lines
27 KiB
TypeScript
|
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>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|