621 lines
24 KiB
TypeScript
621 lines
24 KiB
TypeScript
// frontend/src/Uploader.tsx
|
||
import React from 'react'
|
||
import { api, WhoAmI } from './api'
|
||
import * as tus from 'tus-js-client'
|
||
|
||
type FileRow = { name: string; path: string; is_dir: boolean; size: number; mtime: number }
|
||
type Sel = { file: File; desc: string; date: string; finalName: string; progress?: number; err?: string }
|
||
|
||
console.log('[Pegasus] FE bundle activated at', new Date().toISOString())
|
||
|
||
// ---------- helpers ----------
|
||
function sanitizeDesc(s:string){
|
||
s = s.trim().replace(/\s+/g,'_').replace(/[^A-Za-z0-9._-]+/g,'_')
|
||
if(!s) s = 'upload'
|
||
return s.slice(0,64)
|
||
}
|
||
function sanitizeFolderName(s:string){
|
||
// 1 level only; convert whitespace -> underscores; allow [A-Za-z0-9_.-]
|
||
s = s.trim().replace(/[\/]+/g, '/').replace(/^\//,'').replace(/\/.*$/,'')
|
||
s = s.replace(/\s+/g, '_').replace(/[^\w.\-]/g,'_').replace(/_+/g,'_')
|
||
return s.slice(0,64)
|
||
}
|
||
function extOf(n:string){ const i=n.lastIndexOf('.'); return i>-1 ? n.slice(i+1).toLowerCase() : '' }
|
||
function composeName(date:string, desc:string, orig:string){
|
||
const d = date || new Date().toISOString().slice(0,10)
|
||
const [Y,M,D] = d.split('-'); return `${Y}.${M}.${D}.${sanitizeDesc(desc)}.${extOf(orig)}`
|
||
}
|
||
function clampOneLevel(p:string){ if(!p) return ''; return p.replace(/^\/+|\/+$/g,'').split('/')[0] || '' }
|
||
function normalizeRows(listRaw:any[]): FileRow[] {
|
||
return (Array.isArray(listRaw) ? listRaw : []).map((r:any)=>({
|
||
name: r?.name ?? r?.Name ?? '',
|
||
path: r?.path ?? r?.Path ?? '',
|
||
is_dir: Boolean(r?.is_dir ?? r?.IsDir ?? r?.isDir ?? false),
|
||
size: Number(r?.size ?? r?.Size ?? 0),
|
||
mtime: Number(r?.mtime ?? r?.Mtime ?? 0),
|
||
}))
|
||
}
|
||
const videoExt = new Set(['mp4','mkv','mov','avi','m4v','webm','mpg','mpeg','ts','m2ts'])
|
||
const imageExt = new Set(['jpg','jpeg','png','gif','heic','heif','webp','bmp','tif','tiff'])
|
||
const extLower = (n:string)=> (n.includes('.') ? n.split('.').pop()!.toLowerCase() : '')
|
||
const isVideoFile = (f:File)=> f.type.startsWith('video/') || videoExt.has(extLower(f.name))
|
||
const isImageFile = (f:File)=> f.type.startsWith('image/') || imageExt.has(extLower(f.name))
|
||
|
||
function isDetailedError(e: unknown): e is tus.DetailedError {
|
||
return typeof e === 'object' && e !== null && ('originalRequest' in (e as any) || 'originalResponse' in (e as any))
|
||
}
|
||
|
||
function isLikelyMobileUA(): boolean {
|
||
if (typeof window === 'undefined') return false
|
||
const ua = navigator.userAgent || ''
|
||
const coarse = window.matchMedia && window.matchMedia('(pointer: coarse)').matches
|
||
return coarse || /Mobi|Android|iPhone|iPad|iPod/i.test(ua)
|
||
}
|
||
function useIsMobile(): boolean {
|
||
const [mobile, setMobile] = React.useState(false)
|
||
React.useEffect(()=>{ setMobile(isLikelyMobileUA()) }, [])
|
||
return mobile
|
||
}
|
||
|
||
// Disable tus resume completely (v2 API: addUpload/removeUpload/listUploads)
|
||
const NoResumeUrlStorage: any = {
|
||
addUpload: async (_u: any) => {},
|
||
removeUpload: async (_u: any) => {},
|
||
listUploads: async () => [],
|
||
// compatibility:
|
||
findUploadsByFingerprint: async (_fp: string) => []
|
||
}
|
||
const NoResumeFingerprint = async () => `noresume-${Date.now()}-${Math.random().toString(36).slice(2)}`
|
||
|
||
// ---------- thumbnail ----------
|
||
function PreviewThumb({ file, size = 96 }: { file: File; size?: number }) {
|
||
const [url, setUrl] = React.useState<string>()
|
||
React.useEffect(()=>{
|
||
const u = URL.createObjectURL(file); setUrl(u)
|
||
return () => { try { URL.revokeObjectURL(u) } catch {} }
|
||
}, [file])
|
||
if (!url) return null
|
||
const baseStyle: React.CSSProperties = { width: size, height: size, objectFit: 'cover', borderRadius: 12 }
|
||
if (isImageFile(file)) return <img src={url} alt="" style={baseStyle} className="preview-thumb" />
|
||
if (isVideoFile(file)) return <video src={url} muted preload="metadata" playsInline style={baseStyle} className="preview-thumb" />
|
||
return <div style={{...baseStyle, display:'grid', placeItems:'center'}} className="preview-thumb">📄</div>
|
||
}
|
||
|
||
// ---------- component ----------
|
||
export default function Uploader(){
|
||
const mobile = useIsMobile()
|
||
|
||
const [me, setMe] = React.useState<WhoAmI|undefined>()
|
||
const [libs, setLibs] = React.useState<string[]>([])
|
||
const [lib, setLib] = React.useState<string>('')
|
||
|
||
const [sub, setSub] = React.useState<string>('')
|
||
const [rootDirs, setRootDirs] = React.useState<string[]>([])
|
||
const [rows, setRows] = React.useState<FileRow[]>([])
|
||
|
||
const [status, setStatus] = React.useState<string>('')
|
||
const [globalDate, setGlobalDate] = React.useState<string>(new Date().toISOString().slice(0,10))
|
||
const [uploading, setUploading] = React.useState<boolean>(false)
|
||
const [sel, setSel] = React.useState<Sel[]>([])
|
||
const [bulkDesc, setBulkDesc] = React.useState<string>('') // helper: apply to all videos
|
||
const folderInputRef = React.useRef<HTMLInputElement>(null)
|
||
|
||
React.useEffect(() => {
|
||
const el = folderInputRef.current
|
||
if (!el) return
|
||
if (mobile) {
|
||
el.removeAttribute('webkitdirectory')
|
||
el.removeAttribute('directory')
|
||
} else {
|
||
el.setAttribute('webkitdirectory','')
|
||
el.setAttribute('directory','')
|
||
}
|
||
}, [mobile])
|
||
|
||
// initial load
|
||
React.useEffect(()=>{
|
||
(async ()=>{
|
||
try{
|
||
setStatus('Loading profile…')
|
||
const m = await api<WhoAmI>('/api/whoami'); setMe(m as any)
|
||
const mm:any = m
|
||
const L: string[] =
|
||
Array.isArray(mm?.roots) ? mm.roots :
|
||
Array.isArray(mm?.libs) ? mm.libs :
|
||
(typeof mm?.root === 'string' && mm.root ? [mm.root] : [])
|
||
setLibs(L)
|
||
const def = L[0] || ''
|
||
setLib(def)
|
||
setSub('')
|
||
if (def) { await refresh(def, '') }
|
||
setStatus(def ? `Ready · Destination: /${def}` : 'Choose a library to start')
|
||
} catch(e:any) {
|
||
const msg = String(e?.message || e || '')
|
||
setStatus(`Profile error: ${msg}`)
|
||
if (msg.toLowerCase().includes('no mapping')) {
|
||
alert('Your account is not linked to any upload library yet. Please contact the admin to be granted access.')
|
||
try { await api('/api/logout', { method:'POST' }) } catch {}
|
||
location.replace('/')
|
||
}
|
||
}
|
||
})()
|
||
}, [])
|
||
|
||
React.useEffect(()=>{
|
||
(async ()=>{
|
||
if (!lib) return
|
||
try {
|
||
setStatus(`Loading library “${lib}”…`)
|
||
await refresh(lib, sub)
|
||
} catch(e:any){
|
||
console.error('[Pegasus] refresh error', e)
|
||
setStatus(`List error: ${e?.message || e}`)
|
||
}
|
||
})()
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, [lib])
|
||
|
||
async function refresh(currLib:string, currSub:string){
|
||
const one = clampOneLevel(currSub)
|
||
const listRoot = normalizeRows(await api<any[]>(`/api/list?${new URLSearchParams({ lib: currLib, path: '' })}`))
|
||
const rootDirNames = listRoot.filter(e=>e.is_dir).map(e=>e.name).filter(Boolean)
|
||
setRootDirs(rootDirNames.sort((a,b)=>a.localeCompare(b)))
|
||
const subOk = one && rootDirNames.includes(one) ? one : ''
|
||
if (subOk !== currSub) setSub(subOk)
|
||
|
||
const path = subOk ? subOk : ''
|
||
const list = subOk ? await api<any[]>(`/api/list?${new URLSearchParams({ lib: currLib, path })}`) : listRoot
|
||
setRows(normalizeRows(list))
|
||
|
||
const show = `/${[currLib, path].filter(Boolean).join('/')}`
|
||
setStatus(`Ready · Destination: ${show}`)
|
||
}
|
||
|
||
function handleChoose(files: FileList){
|
||
const arr = Array.from(files).map(f=>{
|
||
const base = (f as any).webkitRelativePath || f.name
|
||
const name = base.split('/').pop() || f.name
|
||
const desc = '' // start empty; required later for videos only
|
||
return { file:f, desc, date: globalDate, finalName: composeName(globalDate, sanitizeDesc(desc), name), progress: 0 }
|
||
})
|
||
console.log('[Pegasus] selected files', arr.map(a=>a.file.name))
|
||
setSel(arr)
|
||
}
|
||
|
||
// recompute finalName when global date changes
|
||
React.useEffect(()=>{
|
||
setSel(old => old.map(x=> ({...x, date: globalDate, finalName: composeName(globalDate, x.desc, x.file.name)})))
|
||
}, [globalDate])
|
||
|
||
// Warn before closing mid-upload
|
||
React.useEffect(()=>{
|
||
const handler = (e: BeforeUnloadEvent) => { if (uploading) { e.preventDefault(); e.returnValue = '' } }
|
||
window.addEventListener('beforeunload', handler); return () => window.removeEventListener('beforeunload', handler)
|
||
}, [uploading])
|
||
|
||
// Apply description to all videos helper
|
||
function applyDescToAllVideos() {
|
||
if (!bulkDesc.trim()) return
|
||
setSel(old => old.map(x =>
|
||
isVideoFile(x.file)
|
||
? ({...x, desc: bulkDesc, finalName: composeName(x.date, bulkDesc, x.file.name)})
|
||
: x
|
||
))
|
||
}
|
||
|
||
async function doUpload(){
|
||
if(!me) { setStatus('Not signed in'); return }
|
||
if(!lib) { alert('Please select a Library to upload into.'); return }
|
||
// Require description only for videos:
|
||
const missingVideos = sel.filter(s => isVideoFile(s.file) && !s.desc.trim()).length
|
||
if (missingVideos > 0) {
|
||
alert(`Please add a short description for all videos. ${missingVideos} video(s) missing a description.`)
|
||
return
|
||
}
|
||
|
||
setStatus('Starting upload…')
|
||
setUploading(true)
|
||
try{
|
||
for(const s of sel){
|
||
// eslint-disable-next-line no-await-in-loop
|
||
await new Promise<void>((resolve,reject)=>{
|
||
const opts: tus.UploadOptions & { withCredentials?: boolean } = {
|
||
endpoint: '/tus/',
|
||
chunkSize: 5*1024*1024,
|
||
retryDelays: [0, 1000, 3000, 5000, 10000],
|
||
metadata: {
|
||
filename: s.file.name,
|
||
lib: lib,
|
||
subdir: sub || "",
|
||
date: s.date,
|
||
desc: s.desc // server enforces: required for videos only
|
||
},
|
||
onError: (err: Error | tus.DetailedError)=>{
|
||
let msg = String(err)
|
||
if (isDetailedError(err)) {
|
||
const status = (err.originalRequest as any)?.status
|
||
const statusText = (err.originalRequest as any)?.statusText
|
||
if (status) msg = `HTTP ${status} ${statusText || ''}`.trim()
|
||
}
|
||
console.error('[Pegasus] tus error', s.file.name, err)
|
||
setSel(old => old.map(x => x.file===s.file ? ({...x, err: msg}) : x))
|
||
setStatus(`✖ ${s.file.name}: ${msg}`)
|
||
alert(`Upload failed: ${s.file.name}\n\n${msg}`)
|
||
reject(err as any)
|
||
},
|
||
onProgress: (sent: number, total: number)=>{
|
||
const pct = Math.floor(sent/Math.max(total,1)*100)
|
||
setSel(old => old.map(x => x.file===s.file ? ({...x, progress: pct}) : x))
|
||
setStatus(`⬆ ${s.finalName}: ${pct}%`)
|
||
},
|
||
onSuccess: ()=>{
|
||
setSel(old => old.map(x => x.file===s.file ? ({...x, progress: 100, err: undefined}) : x))
|
||
setStatus(`✔ ${s.finalName} uploaded`)
|
||
console.log('[Pegasus] tus success', s.file.name)
|
||
resolve()
|
||
},
|
||
}
|
||
opts.withCredentials = true
|
||
;(opts as any).urlStorage = NoResumeUrlStorage
|
||
;(opts as any).fingerprint = NoResumeFingerprint
|
||
|
||
const up = new tus.Upload(s.file, opts)
|
||
console.log('[Pegasus] tus.start', { name: s.file.name, size: s.file.size, type: s.file.type, lib, sub })
|
||
up.start()
|
||
})
|
||
}
|
||
setStatus('All uploads complete')
|
||
setSel([])
|
||
await refresh(lib, sub)
|
||
} finally {
|
||
setUploading(false)
|
||
}
|
||
}
|
||
|
||
// -------- one-level subfolder ops --------
|
||
async function createSubfolder(nameRaw:string){
|
||
const name = sanitizeFolderName(nameRaw)
|
||
if (!name) return
|
||
try{
|
||
await api(`/api/mkdir`, {
|
||
method:'POST',
|
||
headers:{'content-type':'application/json'},
|
||
body: JSON.stringify({ lib: lib, path: name })
|
||
})
|
||
await refresh(lib, name) // jump into new folder
|
||
setSub(name)
|
||
} catch(e:any){
|
||
console.error('[Pegasus] mkdir error', e)
|
||
alert(`Create folder failed:\n${e?.message || e}`)
|
||
}
|
||
}
|
||
async function renameFolder(oldName:string){
|
||
const nn = prompt('New folder name:', oldName)
|
||
const newName = sanitizeFolderName(nn || '')
|
||
if (!newName || newName === oldName) return
|
||
try{
|
||
await api('/api/rename', {
|
||
method:'POST',
|
||
headers:{'content-type':'application/json'},
|
||
body: JSON.stringify({ lib: lib, from: oldName, to: newName })
|
||
})
|
||
const newSub = (sub === oldName) ? newName : sub
|
||
setSub(newSub)
|
||
await refresh(lib, newSub)
|
||
} catch(e:any){
|
||
console.error('[Pegasus] rename folder error', e)
|
||
alert(`Rename failed:\n${e?.message || e}`)
|
||
}
|
||
}
|
||
async function deleteFolder(name:string){
|
||
if(!confirm(`Delete folder “${name}” (and its contents)?`)) return
|
||
try{
|
||
await api(`/api/file?${new URLSearchParams({ lib: lib, path: name, recursive:'true' })}`, { method:'DELETE' })
|
||
const newSub = (sub === name) ? '' : sub
|
||
setSub(newSub)
|
||
await refresh(lib, newSub)
|
||
} catch(e:any){
|
||
console.error('[Pegasus] delete folder error', e)
|
||
alert(`Delete failed:\n${e?.message || e}`)
|
||
}
|
||
}
|
||
|
||
// destination listing (actions: rename files only at library root)
|
||
async function renamePath(oldp:string){
|
||
const base = (oldp.split('/').pop()||'')
|
||
const name = prompt('New name (YYYY.MM.DD.description.ext):', base); if(!name) return
|
||
try{
|
||
await api('/api/rename', {
|
||
method:'POST',
|
||
headers:{'content-type':'application/json'},
|
||
body: JSON.stringify({ lib: lib, from: oldp, to: (oldp.split('/').slice(0,-1).concat(sanitizeFolderName(name))).join('/') })
|
||
})
|
||
await refresh(lib, sub)
|
||
} catch(e:any){
|
||
console.error('[Pegasus] rename error', e)
|
||
alert(`Rename failed:\n${e?.message || e}`)
|
||
}
|
||
}
|
||
async function deletePath(p:string, recursive:boolean){
|
||
if(!confirm(`Delete ${p}${recursive?' (recursive)':''}?`)) return
|
||
try{
|
||
await api(`/api/file?${new URLSearchParams({ lib: lib, path: p, recursive: recursive?'true':'false' })}`, { method:'DELETE' })
|
||
await refresh(lib, sub)
|
||
} catch(e:any){
|
||
console.error('[Pegasus] delete error', e)
|
||
alert(`Delete failed:\n${e?.message || e}`)
|
||
}
|
||
}
|
||
|
||
// sort rows
|
||
const sortedRows = React.useMemo(()=>{
|
||
const arr = Array.isArray(rows) ? rows.slice() : []
|
||
return arr.sort((a,b)=>{
|
||
const dirFirst = (Number(b?.is_dir ? 1:0) - Number(a?.is_dir ? 1:0))
|
||
if (dirFirst !== 0) return dirFirst
|
||
const an = (a?.name ?? '')
|
||
const bn = (b?.name ?? '')
|
||
return an.localeCompare(bn)
|
||
})
|
||
}, [rows])
|
||
|
||
const destPath = `/${[lib, sub].filter(Boolean).join('/')}`
|
||
const videosNeedingDesc = sel.filter(s => isVideoFile(s.file) && !s.desc.trim()).length
|
||
|
||
const [newFolder, setNewFolder] = React.useState('')
|
||
|
||
return (
|
||
<>
|
||
{/* Header context */}
|
||
<section>
|
||
<hgroup>
|
||
<h2>Signed in: {me?.username}</h2>
|
||
<p className="meta">Destination: <strong>{destPath || '/(choose a library)'}</strong></p>
|
||
</hgroup>
|
||
</section>
|
||
|
||
{/* Add files */}
|
||
<section>
|
||
<h3>Add files</h3>
|
||
<div className="grid-3">
|
||
<label>
|
||
Default date (applied to new selections)
|
||
<input type="date" value={globalDate} onChange={e=> setGlobalDate(e.target.value)} />
|
||
</label>
|
||
</div>
|
||
<div className="file-picker">
|
||
{mobile ? (
|
||
<>
|
||
<label>
|
||
Gallery/Photos
|
||
<input type="file" multiple accept="image/*,video/*"
|
||
onChange={e => e.target.files && handleChoose(e.target.files)} disabled={!lib} />
|
||
</label>
|
||
<label>
|
||
Camera (optional)
|
||
<input type="file" accept="image/*,video/*" capture="environment"
|
||
onChange={e => e.target.files && handleChoose(e.target.files)} disabled={!lib} />
|
||
</label>
|
||
</>
|
||
) : (
|
||
<>
|
||
<label>
|
||
Select file(s)
|
||
<input type="file" multiple accept="image/*,video/*"
|
||
onChange={e => e.target.files && handleChoose(e.target.files)} disabled={!lib} />
|
||
</label>
|
||
<label>
|
||
Select folder(s)
|
||
<input type="file" multiple ref={folderInputRef}
|
||
onChange={e => e.target.files && handleChoose(e.target.files)} disabled={!lib} />
|
||
</label>
|
||
</>
|
||
)}
|
||
</div>
|
||
</section>
|
||
|
||
{/* Review & upload */}
|
||
<section>
|
||
<h3>Review & Upload → <span className="meta">{destPath || '/(choose a library)'}</span></h3>
|
||
|
||
{sel.length === 0 ? (
|
||
<p className="meta">Select at least one file.</p>
|
||
) : (
|
||
<>
|
||
<article>
|
||
<div style={{display:'grid', gap:12}}>
|
||
<label>
|
||
Description for all videos (optional)
|
||
<input
|
||
placeholder="Short video description"
|
||
value={bulkDesc}
|
||
onChange={e=> setBulkDesc(e.target.value)}
|
||
/>
|
||
</label>
|
||
<button type="button" className="stretch" onClick={applyDescToAllVideos} disabled={!bulkDesc.trim()}>
|
||
Apply to all videos
|
||
</button>
|
||
{videosNeedingDesc > 0
|
||
? <small className="meta bad">{videosNeedingDesc} video(s) need a description</small>
|
||
: <small className="meta">All videos have descriptions</small>
|
||
}
|
||
</div>
|
||
</article>
|
||
|
||
{sel.map((s,i)=>(
|
||
<article key={i} className="video-card">
|
||
<div className="thumb-row">
|
||
<PreviewThumb file={s.file} size={isVideoFile(s.file) ? 176 : 128} />
|
||
</div>
|
||
|
||
<h4 className="filename ellipsis">{s.file.name}</h4>
|
||
|
||
<label>
|
||
{isVideoFile(s.file) ? 'Short description (required for video)' : 'Description (optional for image)'}
|
||
<input
|
||
required={isVideoFile(s.file)}
|
||
aria-invalid={isVideoFile(s.file) && !s.desc.trim()}
|
||
placeholder={isVideoFile(s.file) ? 'Required for video' : 'Optional for image'}
|
||
value={s.desc}
|
||
onChange={e=>{
|
||
const v=e.target.value
|
||
setSel(old => old.map((x,idx)=> idx===i ? ({...x, desc:v, finalName: composeName(x.date, v, x.file.name)}) : x))
|
||
}}
|
||
/>
|
||
</label>
|
||
|
||
<label>
|
||
Date
|
||
<input
|
||
type="date"
|
||
value={s.date}
|
||
onChange={e=>{
|
||
const v = e.target.value
|
||
setSel(old => old.map((x,idx)=> idx===i ? ({...x, date:v, finalName: composeName(v, x.desc, x.file.name)}) : x))
|
||
}}
|
||
/>
|
||
</label>
|
||
|
||
<small className="meta">→ {s.finalName}</small>
|
||
{typeof s.progress === 'number' && <progress max={100} value={s.progress}></progress>}
|
||
{s.err && <small className="meta bad">Error: {s.err}</small>}
|
||
</article>
|
||
))}
|
||
</>
|
||
)}
|
||
</section>
|
||
|
||
{/* Folder (one-level manager) */}
|
||
<section>
|
||
<h3>Library</h3>
|
||
<div className="grid-3">
|
||
<label>
|
||
Library
|
||
<select value={lib} onChange={e=>{ setLib(e.target.value); setSub('') }}>
|
||
<option value="" disabled>— Select a library —</option>
|
||
{libs.map(L => <option key={L} value={L}>{L}</option>)}
|
||
</select>
|
||
{libs.length<=1 && <small className="meta">Auto-selected</small>}
|
||
</label>
|
||
|
||
<label>
|
||
Subfolder (optional, 1 level)
|
||
<select
|
||
value={sub}
|
||
onChange={e=>{ const v = clampOneLevel(e.target.value); setSub(v); void refresh(lib, v) }}
|
||
disabled={!lib}
|
||
>
|
||
<option value="">(Library root)</option>
|
||
{rootDirs.map(d => <option key={d} value={d}>{d}</option>)}
|
||
</select>
|
||
</label>
|
||
</div>
|
||
|
||
<div className="grid-3">
|
||
<label>
|
||
New subfolder name (optional)
|
||
<input
|
||
placeholder="letters, numbers, underscores, dashes"
|
||
value={newFolder}
|
||
onChange={e=> setNewFolder(sanitizeFolderName(e.target.value))}
|
||
disabled={!lib}
|
||
inputMode="text"
|
||
pattern="[A-Za-z0-9_.-]+"
|
||
title="Use letters, numbers, underscores, dashes or dots"
|
||
/>
|
||
</label>
|
||
|
||
{Boolean(sanitizeFolderName(newFolder)) && (
|
||
<div className="center-actions">
|
||
<button
|
||
type="button"
|
||
onClick={()=>{ const n = sanitizeFolderName(newFolder); if (n) { void createSubfolder(n); setNewFolder('') } }}
|
||
>
|
||
Create
|
||
</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<article>
|
||
<div style={{display:'flex', gap:8, alignItems:'center', justifyContent:'space-between'}}>
|
||
<div>Current: <strong>{sub || '(library root)'}</strong></div>
|
||
{sub && (
|
||
<div style={{display:'flex', gap:8}}>
|
||
<button onClick={()=> void renameFolder(sub)}>Rename</button>
|
||
<button onClick={()=> void deleteFolder(sub)} className="bad">Delete</button>
|
||
<button onClick={()=>{ setSub(''); void refresh(lib, '') }}>Clear</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</article>
|
||
|
||
<details open style={{marginTop:8}}>
|
||
<summary>Subfolders</summary>
|
||
{rootDirs.length === 0 ? (
|
||
<p className="meta">No subfolders yet. You’ll upload into <b>/{lib}</b>.</p>
|
||
) : (
|
||
<div style={{display:'grid', gap:8}}>
|
||
{rootDirs.map(d=>(
|
||
<article key={d} style={{display:'flex', alignItems:'center', justifyContent:'space-between'}}>
|
||
<div>📁 {d}</div>
|
||
<div style={{display:'flex', gap:8}}>
|
||
<button onClick={()=>{ setSub(d); void refresh(lib, d) }}>Select</button>
|
||
<button onClick={()=> void renameFolder(d)}>Rename</button>
|
||
<button onClick={()=> void deleteFolder(d)} className="bad">Delete</button>
|
||
</div>
|
||
</article>
|
||
))}
|
||
</div>
|
||
)}
|
||
</details>
|
||
|
||
<details open style={{marginTop:8}}>
|
||
<summary>Contents of {destPath || '/(choose)'}</summary>
|
||
{sortedRows.length === 0 ? (
|
||
<p className="meta">Empty.</p>
|
||
) : (
|
||
<div style={{display:'grid', gap:8}}>
|
||
{sortedRows.map(f =>
|
||
<article key={f.path} style={{display:'flex', alignItems:'center', justifyContent:'space-between'}}>
|
||
<div>
|
||
<div className="ellipsis">{f.is_dir ? '📁' : '🎞️'} {f.name || '(unnamed)'}</div>
|
||
<small className="meta">{f.is_dir?'folder':fmt(f.size)} · {f.mtime ? new Date(f.mtime * 1000).toLocaleString() : ''}</small>
|
||
</div>
|
||
<div style={{display:'flex', gap:8}}>
|
||
{f.is_dir ? (
|
||
<>
|
||
<button onClick={()=>{ setSub(f.name); void refresh(lib, f.name) }}>Open</button>
|
||
<button onClick={()=> void renameFolder(f.name)}>Rename</button>
|
||
<button onClick={()=> void deleteFolder(f.name)} className="bad">Delete</button>
|
||
</>
|
||
) : (
|
||
<>
|
||
{sub === '' && <button onClick={()=> void renamePath(f.path)}>Rename</button>}
|
||
<button onClick={()=> void deletePath(f.path, false)} className="bad">Delete</button>
|
||
</>
|
||
)}
|
||
</div>
|
||
</article>
|
||
)}
|
||
</div>
|
||
)}
|
||
</details>
|
||
</section>
|
||
|
||
<footer style={{display:'flex', gap:12, alignItems:'center', justifyContent:'space-between', marginTop:8}}>
|
||
<small className="meta" aria-live="polite">{status}</small>
|
||
<button
|
||
type="button"
|
||
onClick={()=>{ const disabled = !lib || !sel.length || uploading || videosNeedingDesc>0; if (!disabled) void doUpload() }}
|
||
disabled={!lib || !sel.length || uploading || videosNeedingDesc>0}
|
||
>
|
||
Upload {sel.length? `(${sel.length})` : ''}
|
||
</button>
|
||
</footer>
|
||
</>
|
||
)
|
||
}
|
||
|
||
function fmt(n:number){ if(n<1024) return n+' B'; const u=['KB','MB','GB','TB']; let i=-1; do{ n/=1024; i++ }while(n>=1024&&i<u.length-1); return n.toFixed(1)+' '+u[i] }
|