feat: refactoring

furumi-node-player/client/src/FurumiPlayer.tsx

@@ -10,16 +10,14 @@ import {
   getTrackInfo,
   preloadStream,
 } from './furumiApi'
-import { SearchDropdown } from './components/SearchDropdown'
-import { Breadcrumbs } from './components/Breadcrumbs'
-import { LibraryList } from './components/LibraryList'
-import { QueueList, type QueueItem } from './components/QueueList'
-import { NowPlaying } from './components/NowPlaying'
-
-type Crumb = { label: string; action?: () => void }
+import { fmt } from './utils'
+import { Header } from './components/Header'
+import { MainPanel, type Crumb } from './components/MainPanel'
+import { PlayerBar } from './components/PlayerBar'
+import type { QueueItem } from './components/QueueList'
 
 export function FurumiPlayer() {
-  const [breadcrumbs, setBreadcrumbs] = useState<Array<{ label: string; action?: () => void }>>(
+  const [breadcrumbs, setBreadcrumbs] = useState<Crumb[]>(
     [],
   )
   const [libraryLoading, setLibraryLoading] = useState(false)
@@ -47,6 +45,7 @@ export function FurumiPlayer() {
   const [queueOrderView, setQueueOrderView] = useState<number[]>([])
   const [queuePlayingOrigIdxView, setQueuePlayingOrigIdxView] = useState<number>(-1)
   const [queueScrollSignal, setQueueScrollSignal] = useState(0)
+  const [queue, setQueue] = useState<QueueItem[]>([])
 
   const queueActionsRef = useRef<{
     playIndex: (i: number) => void
@@ -54,12 +53,14 @@ export function FurumiPlayer() {
     moveQueueItem: (fromPos: number, toPos: number) => void
   } | null>(null)
 
+  const audioRef = useRef<HTMLAudioElement>(null)
+
   useEffect(() => {
     // --- Original player script adapted for React environment ---
-    const audio = document.getElementById('audioEl') as HTMLAudioElement
-    if (!audio) return
+    const audioEl = audioRef.current
+    if (!audioEl) return
+    const audio = audioEl
 
-    let queue: QueueItem[] = []
     let queueIndex = -1
     let shuffle = false
     let repeatAll = true
@@ -253,7 +254,7 @@ export function FurumiPlayer() {
         if (playNow) playIndex(existing)
         return
       }
-      queue.push(track)
+      setQueue((q) => [...q, track]);
       updateQueueModel()
       if (playNow || (queueIndex === -1 && queue.length === 1)) {
         playIndex(queue.length - 1)
@@ -267,13 +268,7 @@ export function FurumiPlayer() {
       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,
-        })
+        setQueue((q) => [...q, t])
       })
       updateQueueModel()
       if (playFirst || queueIndex === -1) playIndex(firstIdx)
@@ -356,7 +351,7 @@ export function FurumiPlayer() {
 
     function updateQueueModel() {
       const order = currentOrder()
-      setQueueItemsView(queue.slice())
+      setQueueItemsView(queue)
       setQueueOrderView(order.slice())
       setQueuePlayingOrigIdxView(queueIndex)
     }
@@ -370,7 +365,10 @@ export function FurumiPlayer() {
       } else if (queueIndex > idx) {
         queueIndex--
       }
-      queue.splice(idx, 1)
+
+      // queue.splice(idx, 1)
+      setQueue((q) => q.filter((_, i) => i !== idx));
+
       if (shuffle) {
         const si = shuffleOrder.indexOf(idx)
         if (si !== -1) shuffleOrder.splice(si, 1)
@@ -403,7 +401,7 @@ export function FurumiPlayer() {
     }
 
     function clearQueue() {
-      queue = []
+      setQueue([]);
       queueIndex = -1
       shuffleOrder = []
       audio.pause()
@@ -526,21 +524,6 @@ export function FurumiPlayer() {
     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 showToast(msg: string) {
       const t = document.getElementById('toast')
       if (!t) return
@@ -652,115 +635,34 @@ export function FurumiPlayer() {
 
   return (
     <div className="furumi-root">
-      <header className="header">
-        <div className="header-logo">
-          <button className="btn-menu">&#9776;</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>
+      <Header
+        searchOpen={searchOpen}
+        searchResults={searchResults}
+        onSearchSelect={(type, slug) => searchSelectRef.current(type, slug)}
+      />
 
-      <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>
+      <MainPanel
+        breadcrumbs={breadcrumbs}
+        libraryLoading={libraryLoading}
+        libraryError={libraryError}
+        libraryItems={libraryItems}
+        queueItemsView={queueItemsView}
+        queueOrderView={queueOrderView}
+        queuePlayingOrigIdxView={queuePlayingOrigIdxView}
+        queueScrollSignal={queueScrollSignal}
+        onQueuePlay={(origIdx) => queueActionsRef.current?.playIndex(origIdx)}
+        onQueueRemove={(origIdx) =>
+          queueActionsRef.current?.removeFromQueue(origIdx)
+        }
+        onQueueMove={(fromPos, toPos) =>
+          queueActionsRef.current?.moveQueueItem(fromPos, toPos)
+        }
+      />
 
-        <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">
-            <QueueList
-              queue={queueItemsView}
-              order={queueOrderView}
-              playingOrigIdx={queuePlayingOrigIdxView}
-              scrollSignal={queueScrollSignal}
-              onPlay={(origIdx) => queueActionsRef.current?.playIndex(origIdx)}
-              onRemove={(origIdx) =>
-                queueActionsRef.current?.removeFromQueue(origIdx)
-              }
-              onMove={(fromPos, toPos) =>
-                queueActionsRef.current?.moveQueueItem(fromPos, toPos)
-              }
-            />
-          </div>
-        </section>
-      </div>
-
-      <div className="player-bar">
-        <NowPlaying track={nowPlayingTrack} />
-        <div className="controls">
-          <div className="ctrl-btns">
-            <button className="ctrl-btn" id="btnPrev">
-              &#9198;
-            </button>
-            <button className="ctrl-btn ctrl-btn-main" id="btnPlayPause">
-              &#9654;
-            </button>
-            <button className="ctrl-btn" id="btnNext">
-              &#9197;
-            </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">
-            &#128266;
-          </span>
-          <input
-            type="range"
-            className="volume-slider"
-            id="volSlider"
-            min={0}
-            max={100}
-            defaultValue={80}
-          />
-        </div>
-      </div>
+      <PlayerBar track={nowPlayingTrack} />
 
       <div className="toast" id="toast" />
-      <audio id="audioEl" />
+      <audio ref={audioRef} />
     </div>
   )
 }

furumi-node-player/client/src/components/Header.tsx

@@ -0,0 +1,45 @@
+import { SearchDropdown } from './SearchDropdown'
+
+type SearchResultItem = {
+  result_type: string
+  slug: string
+  name: string
+  detail?: string
+}
+
+type HeaderProps = {
+  searchOpen: boolean
+  searchResults: SearchResultItem[]
+  onSearchSelect: (type: string, slug: string) => void
+}
+
+export function Header({
+  searchOpen,
+  searchResults,
+  onSearchSelect,
+}: HeaderProps) {
+  return (
+    <header className="header">
+      <div className="header-logo">
+        <button className="btn-menu">&#9776;</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={onSearchSelect}
+          />
+        </div>
+      </div>
+    </header>
+  )
+}

furumi-node-player/client/src/components/MainPanel.tsx

@@ -0,0 +1,86 @@
+import type { MouseEvent as ReactMouseEvent } from 'react'
+import { Breadcrumbs } from './Breadcrumbs'
+import { LibraryList } from './LibraryList'
+import { QueueList, type QueueItem } from './QueueList'
+
+export type Crumb = { label: string; action?: () => void }
+
+export type LibraryListItem = {
+  key: string
+  className: string
+  icon: string
+  name: string
+  detail?: string
+  nameClassName?: string
+  onClick: () => void
+  button?: { title: string; onClick: (ev: ReactMouseEvent<HTMLButtonElement>) => void }
+}
+
+type MainPanelProps = {
+  breadcrumbs: Crumb[]
+  libraryLoading: boolean
+  libraryError: string | null
+  libraryItems: LibraryListItem[]
+  queueItemsView: QueueItem[]
+  queueOrderView: number[]
+  queuePlayingOrigIdxView: number
+  queueScrollSignal: number
+  onQueuePlay: (origIdx: number) => void
+  onQueueRemove: (origIdx: number) => void
+  onQueueMove: (fromPos: number, toPos: number) => void
+}
+
+export function MainPanel({
+  breadcrumbs,
+  libraryLoading,
+  libraryError,
+  libraryItems,
+  queueItemsView,
+  queueOrderView,
+  queuePlayingOrigIdxView,
+  queueScrollSignal,
+  onQueuePlay,
+  onQueueRemove,
+  onQueueMove,
+}: MainPanelProps) {
+  return (
+    <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">
+          <QueueList
+            queue={queueItemsView}
+            order={queueOrderView}
+            playingOrigIdx={queuePlayingOrigIdxView}
+            scrollSignal={queueScrollSignal}
+            onPlay={onQueuePlay}
+            onRemove={onQueueRemove}
+            onMove={onQueueMove}
+          />
+        </div>
+      </section>
+    </div>
+  )
+}

furumi-node-player/client/src/components/PlayerBar.tsx

@@ -0,0 +1,47 @@
+import { NowPlaying } from './NowPlaying'
+import type { QueueItem } from './QueueList'
+
+export function PlayerBar({ track }: { track: QueueItem | null }) {
+  return (
+    <div className="player-bar">
+      <NowPlaying track={track} />
+      <div className="controls">
+        <div className="ctrl-btns">
+          <button className="ctrl-btn" id="btnPrev">
+            &#9198;
+          </button>
+          <button className="ctrl-btn ctrl-btn-main" id="btnPlayPause">
+            &#9654;
+          </button>
+          <button className="ctrl-btn" id="btnNext">
+            &#9197;
+          </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">
+          &#128266;
+        </span>
+        <input
+          type="range"
+          className="volume-slider"
+          id="volSlider"
+          min={0}
+          max={100}
+          defaultValue={80}
+        />
+      </div>
+    </div>
+  )
+}

furumi-node-player/client/src/utils.ts

@@ -0,0 +1,14 @@
+function pad(n: number) {
+  return String(n).padStart(2, '0')
+}
+
+export 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)}`
+}