49 lines
1.6 KiB
TypeScript
49 lines
1.6 KiB
TypeScript
|
import { useWaste } from '../store'
|
||
|
|
import { BrowserAdapter } from '../adapter/browser'
|
||
|
|
|
||
|
|
function fmt(bytes: number): string {
|
||
|
|
if (bytes < 1024) return `${bytes} B`
|
||
|
|
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
|
||
|
|
return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
|
||
|
|
}
|
||
|
|
|
||
|
|
export function FileBrowser() {
|
||
|
|
const { activeFilePeer, fileLists, setActiveFilePeer, adapter, connectedPeers } = useWaste()
|
||
|
|
|
||
|
|
if (!activeFilePeer) return null
|
||
|
|
|
||
|
|
const peer = connectedPeers.find(p => p.id === activeFilePeer)
|
||
|
|
const files = fileLists[activeFilePeer] ?? null
|
||
|
|
|
||
|
|
function download(name: string) {
|
||
|
|
if (adapter instanceof BrowserAdapter) {
|
||
|
|
adapter.requestGet(activeFilePeer!, name)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="file-browser">
|
||
|
|
<div className="file-browser-header">
|
||
|
|
<span className="file-browser-title">Files · {peer?.alias ?? activeFilePeer.slice(0, 8)}</span>
|
||
|
|
<button className="file-browser-close" onClick={() => setActiveFilePeer(null)}>✕</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{files === null ? (
|
||
|
|
<div className="file-browser-empty">Loading…</div>
|
||
|
|
) : files.length === 0 ? (
|
||
|
|
<div className="file-browser-empty">No files shared</div>
|
||
|
|
) : (
|
||
|
|
<ul className="file-list">
|
||
|
|
{files.map(f => (
|
||
|
|
<li key={f.name} className="file-entry">
|
||
|
|
<span className="file-entry-name">{f.name}</span>
|
||
|
|
<span className="file-entry-size">{fmt(f.size_bytes)}</span>
|
||
|
|
<button className="file-entry-dl" onClick={() => download(f.name)}>↓</button>
|
||
|
|
</li>
|
||
|
|
))}
|
||
|
|
</ul>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|