264 lines
9.0 KiB
TypeScript
264 lines
9.0 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect, useState, useCallback, useRef } from 'react'
|
|
import type { DirectoryListing, FileEntry } from '@/types'
|
|
import VideoPlayerModal from './VideoPlayerModal'
|
|
import ImageLightbox from './ImageLightbox'
|
|
|
|
interface Props {
|
|
libraryId: string
|
|
initialPath: string
|
|
}
|
|
|
|
type ModalState =
|
|
| { type: 'video'; url: string; name: string }
|
|
| { type: 'image'; url: string; name: string }
|
|
| null
|
|
|
|
export default function MixedView({ libraryId, initialPath }: Props) {
|
|
const [currentPath, setCurrentPath] = useState(initialPath)
|
|
const [listing, setListing] = useState<DirectoryListing | null>(null)
|
|
const [loading, setLoading] = useState(true)
|
|
const [error, setError] = useState<string | null>(null)
|
|
const [modal, setModal] = useState<ModalState>(null)
|
|
|
|
const loadPath = useCallback(
|
|
(path: string) => {
|
|
setLoading(true)
|
|
setError(null)
|
|
fetch(
|
|
`/api/browse?libraryId=${encodeURIComponent(libraryId)}&path=${encodeURIComponent(path)}`
|
|
)
|
|
.then((r) => r.json())
|
|
.then((data: DirectoryListing) => {
|
|
setListing(data)
|
|
setCurrentPath(path)
|
|
setLoading(false)
|
|
})
|
|
.catch(() => {
|
|
setError('Failed to load directory')
|
|
setLoading(false)
|
|
})
|
|
},
|
|
[libraryId]
|
|
)
|
|
|
|
useEffect(() => {
|
|
loadPath(initialPath)
|
|
}, [loadPath, initialPath])
|
|
|
|
const handleEntry = (entry: FileEntry) => {
|
|
if (entry.type === 'directory') {
|
|
const newPath = currentPath ? `${currentPath}/${entry.name}` : entry.name
|
|
loadPath(newPath)
|
|
return
|
|
}
|
|
if (!entry.url) return
|
|
if (entry.mediaType === 'video') {
|
|
setModal({ type: 'video', url: entry.url, name: entry.name })
|
|
} else if (entry.mediaType === 'image') {
|
|
setModal({ type: 'image', url: entry.url, name: entry.name })
|
|
} else {
|
|
// Download other file types
|
|
window.open(entry.url, '_blank')
|
|
}
|
|
}
|
|
|
|
const navigateUp = () => {
|
|
const parts = currentPath.split('/').filter(Boolean)
|
|
parts.pop()
|
|
loadPath(parts.join('/'))
|
|
}
|
|
|
|
// Build breadcrumb segments
|
|
const breadcrumbs = currentPath
|
|
? currentPath.split('/').filter(Boolean)
|
|
: []
|
|
|
|
return (
|
|
<>
|
|
{/* Breadcrumb */}
|
|
<nav className="flex items-center gap-1 mb-6 flex-wrap text-sm">
|
|
<button
|
|
onClick={() => loadPath('')}
|
|
className="transition-colors"
|
|
style={{ color: breadcrumbs.length === 0 ? 'var(--text-primary)' : 'var(--text-secondary)' }}
|
|
>
|
|
Root
|
|
</button>
|
|
{breadcrumbs.map((segment, i) => {
|
|
const isLast = i === breadcrumbs.length - 1
|
|
const pathTo = breadcrumbs.slice(0, i + 1).join('/')
|
|
return (
|
|
<span key={i} className="flex items-center gap-1">
|
|
<span style={{ color: 'var(--border)' }}>/</span>
|
|
<button
|
|
onClick={() => !isLast && loadPath(pathTo)}
|
|
className="transition-colors"
|
|
style={{
|
|
color: isLast ? 'var(--text-primary)' : 'var(--text-secondary)',
|
|
cursor: isLast ? 'default' : 'pointer',
|
|
}}
|
|
>
|
|
{segment}
|
|
</button>
|
|
</span>
|
|
)
|
|
})}
|
|
</nav>
|
|
|
|
{loading && <LoadingSkeleton />}
|
|
{error && (
|
|
<div className="rounded-lg border p-8 text-center" style={{ borderColor: 'var(--border)', color: 'var(--text-secondary)' }}>
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
{!loading && !error && listing && (
|
|
<>
|
|
{listing.entries.length === 0 ? (
|
|
<div className="rounded-lg border p-12 text-center" style={{ borderColor: 'var(--border)', color: 'var(--text-secondary)' }}>
|
|
This folder is empty.
|
|
</div>
|
|
) : (
|
|
<div className="grid gap-2 grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6">
|
|
{/* Up button */}
|
|
{breadcrumbs.length > 0 && (
|
|
<button
|
|
onClick={navigateUp}
|
|
className="flex flex-col items-center justify-center gap-2 rounded-xl border p-4 text-xs transition-colors"
|
|
style={{ borderColor: 'var(--border)', backgroundColor: 'var(--surface)', color: 'var(--text-secondary)', aspectRatio: '1 / 1' }}
|
|
onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface-hover)')}
|
|
onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface)')}
|
|
>
|
|
<span className="text-2xl">↑</span>
|
|
<span>Up</span>
|
|
</button>
|
|
)}
|
|
{listing.entries.map((entry) => (
|
|
<EntryTile key={entry.name} entry={entry} onOpen={handleEntry} />
|
|
))}
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
|
|
{modal?.type === 'video' && (
|
|
<VideoPlayerModal url={modal.url} name={modal.name} onClose={() => setModal(null)} />
|
|
)}
|
|
{modal?.type === 'image' && (
|
|
<ImageLightbox url={modal.url} name={modal.name} onClose={() => setModal(null)} />
|
|
)}
|
|
</>
|
|
)
|
|
}
|
|
|
|
function EntryTile({ entry, onOpen }: { entry: FileEntry; onOpen: (e: FileEntry) => void }) {
|
|
type ImgState = 'loading' | 'loaded' | 'error'
|
|
const [imgState, setImgState] = useState<ImgState>(
|
|
entry.thumbnailUrl ? 'loading' : 'error'
|
|
)
|
|
// Reset image state when the entry changes (e.g. navigating to a new folder)
|
|
const prevUrl = useRef(entry.thumbnailUrl)
|
|
if (prevUrl.current !== entry.thumbnailUrl) {
|
|
prevUrl.current = entry.thumbnailUrl
|
|
if (entry.thumbnailUrl) setImgState('loading')
|
|
else setImgState('error')
|
|
}
|
|
|
|
const isDir = entry.type === 'directory'
|
|
const isVideo = entry.mediaType === 'video'
|
|
const showThumbnail = !isDir && imgState !== 'error' && entry.thumbnailUrl
|
|
|
|
// Icon shown when no thumbnail available or while loading
|
|
const icon = isDir ? '📁' : isVideo ? '▶' : entry.mediaType === 'image' ? '🖼' : '📄'
|
|
|
|
return (
|
|
<button
|
|
onClick={() => onOpen(entry)}
|
|
className="group relative flex flex-col rounded-xl border overflow-hidden text-xs transition-all focus:outline-none text-left"
|
|
style={{ borderColor: 'var(--border)', backgroundColor: 'var(--surface)', aspectRatio: '1 / 1' }}
|
|
onMouseEnter={(e) => {
|
|
;(e.currentTarget as HTMLElement).style.borderColor = 'var(--accent)'
|
|
;(e.currentTarget as HTMLElement).style.transform = 'translateY(-1px)'
|
|
}}
|
|
onMouseLeave={(e) => {
|
|
;(e.currentTarget as HTMLElement).style.borderColor = 'var(--border)'
|
|
;(e.currentTarget as HTMLElement).style.transform = 'translateY(0)'
|
|
}}
|
|
>
|
|
{/* Thumbnail image — hidden until loaded */}
|
|
{entry.thumbnailUrl && (
|
|
// eslint-disable-next-line @next/next/no-img-element
|
|
<img
|
|
src={entry.thumbnailUrl}
|
|
alt=""
|
|
aria-hidden
|
|
className="absolute inset-0 w-full h-full object-cover transition-opacity duration-300"
|
|
style={{ opacity: imgState === 'loaded' ? 1 : 0 }}
|
|
onLoad={() => setImgState('loaded')}
|
|
onError={() => setImgState('error')}
|
|
/>
|
|
)}
|
|
|
|
{/* Skeleton pulse shown while image is loading */}
|
|
{imgState === 'loading' && (
|
|
<div
|
|
className="absolute inset-0 animate-pulse"
|
|
style={{ backgroundColor: 'var(--border)' }}
|
|
/>
|
|
)}
|
|
|
|
{/* Icon fallback — shown for dirs, other files, and failed thumbnails */}
|
|
{!showThumbnail && imgState !== 'loading' && (
|
|
<div className="absolute inset-0 flex items-center justify-center text-3xl"
|
|
style={isVideo && imgState === 'error' ? { color: 'var(--accent)' } : undefined}>
|
|
{icon}
|
|
</div>
|
|
)}
|
|
|
|
{/* Bottom label — always shown */}
|
|
<div
|
|
className="absolute bottom-0 left-0 right-0 px-2 py-1.5"
|
|
style={{
|
|
background: showThumbnail
|
|
? 'linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 100%)'
|
|
: undefined,
|
|
}}
|
|
>
|
|
<span
|
|
className="block w-full truncate"
|
|
style={{ color: showThumbnail ? '#fff' : 'var(--text-primary)' }}
|
|
title={entry.name}
|
|
>
|
|
{entry.name}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Video play badge — top-right overlay */}
|
|
{isVideo && imgState === 'loaded' && (
|
|
<div
|
|
className="absolute top-2 right-2 w-6 h-6 rounded-full flex items-center justify-center text-xs"
|
|
style={{ backgroundColor: 'rgba(0,0,0,0.55)', color: '#fff' }}
|
|
>
|
|
▶
|
|
</div>
|
|
)}
|
|
</button>
|
|
)
|
|
}
|
|
|
|
function LoadingSkeleton() {
|
|
return (
|
|
<div className="grid gap-2 grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6">
|
|
{Array.from({ length: 12 }).map((_, i) => (
|
|
<div
|
|
key={i}
|
|
className="rounded-xl animate-pulse"
|
|
style={{ backgroundColor: 'var(--surface)', aspectRatio: '1 / 1' }}
|
|
/>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|