87 lines
2.4 KiB
TypeScript
87 lines
2.4 KiB
TypeScript
|
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>
|
||
|
|
)
|
||
|
|
}
|