initial version
This commit is contained in:
210
src/components/mixed/MixedView.tsx
Normal file
210
src/components/mixed/MixedView.tsx
Normal file
@@ -0,0 +1,210 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useState, useCallback } 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 aspect-square"
|
||||
style={{ borderColor: 'var(--border)', backgroundColor: 'var(--surface)', color: 'var(--text-secondary)' }}
|
||||
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 }) {
|
||||
const icon = entry.type === 'directory'
|
||||
? '📁'
|
||||
: entry.mediaType === 'video'
|
||||
? '▶'
|
||||
: entry.mediaType === 'image'
|
||||
? '🖼'
|
||||
: '📄'
|
||||
|
||||
const isVideo = entry.type === 'file' && entry.mediaType === 'video'
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={() => onOpen(entry)}
|
||||
className="group flex flex-col items-center gap-2 rounded-xl border p-3 text-xs transition-all text-center overflow-hidden"
|
||||
style={{ borderColor: 'var(--border)', backgroundColor: 'var(--surface)' }}
|
||||
onMouseEnter={(e) => {
|
||||
;(e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface-hover)'
|
||||
;(e.currentTarget as HTMLElement).style.borderColor = 'var(--accent)'
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
;(e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface)'
|
||||
;(e.currentTarget as HTMLElement).style.borderColor = 'var(--border)'
|
||||
}}
|
||||
>
|
||||
<span
|
||||
className="text-3xl"
|
||||
style={isVideo ? { color: 'var(--accent)' } : undefined}
|
||||
>
|
||||
{icon}
|
||||
</span>
|
||||
<span
|
||||
className="w-full truncate text-center"
|
||||
style={{ color: 'var(--text-primary)' }}
|
||||
title={entry.name}
|
||||
>
|
||||
{entry.name}
|
||||
</span>
|
||||
</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 aspect-square animate-pulse"
|
||||
style={{ backgroundColor: 'var(--surface)' }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user