484 lines
19 KiB
TypeScript
484 lines
19 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect, useCallback, useRef } from 'react';
|
|
import { FixedSizeGrid } from 'react-window';
|
|
import { Card, CardContent } from '@/components/ui/card';
|
|
import { StarRating } from '@/components/star-rating';
|
|
import { Film, Image as ImageIcon, HardDrive, Search, Folder, Play, ChevronLeft, Home, FileText } from 'lucide-react';
|
|
import { Button } from '@/components/ui/button';
|
|
import Link from 'next/link';
|
|
import { useRouter } from 'next/navigation';
|
|
|
|
interface FileSystemItem {
|
|
name: string;
|
|
path: string;
|
|
isDirectory: boolean;
|
|
size: number;
|
|
thumbnail?: string;
|
|
type?: string;
|
|
id?: number;
|
|
avg_rating?: number;
|
|
star_count?: number;
|
|
}
|
|
|
|
interface BreadcrumbItem {
|
|
name: string;
|
|
path: string;
|
|
}
|
|
|
|
interface VirtualizedFolderGridProps {
|
|
currentPath: string;
|
|
onVideoClick: (item: FileSystemItem) => void;
|
|
onPhotoClick: (item: FileSystemItem, index: number) => void;
|
|
onTextClick: (item: FileSystemItem) => void;
|
|
onBackClick: () => void;
|
|
onBreadcrumbClick: (path: string) => void;
|
|
breadcrumbs: BreadcrumbItem[];
|
|
libraries: {id: number, path: string}[];
|
|
onItemsLoaded?: (items: FileSystemItem[]) => void;
|
|
}
|
|
|
|
const ITEM_HEIGHT = 280; // Increased for folder cards
|
|
|
|
export default function VirtualizedFolderGrid({
|
|
currentPath,
|
|
onVideoClick,
|
|
onPhotoClick,
|
|
onTextClick,
|
|
onBackClick,
|
|
onBreadcrumbClick,
|
|
breadcrumbs,
|
|
libraries,
|
|
onItemsLoaded
|
|
}: VirtualizedFolderGridProps) {
|
|
const [items, setItems] = useState<FileSystemItem[]>([]);
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState<string>('');
|
|
const [containerWidth, setContainerWidth] = useState(0);
|
|
const router = useRouter();
|
|
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
|
|
const formatFileSize = (bytes: number) => {
|
|
if (bytes === 0) return '0 Bytes';
|
|
const k = 1024;
|
|
const sizes = ['Bytes', 'KB', 'MB', 'GB'];
|
|
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
|
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
|
};
|
|
|
|
const formatFilePath = (path: string) => {
|
|
if (!path) return '';
|
|
|
|
const lastSlashIndex = path.lastIndexOf('/');
|
|
const lastBackslashIndex = path.lastIndexOf('\\');
|
|
const lastSeparatorIndex = Math.max(lastSlashIndex, lastBackslashIndex);
|
|
|
|
if (lastSeparatorIndex === -1) {
|
|
return path;
|
|
}
|
|
|
|
const directory = path.substring(0, lastSeparatorIndex);
|
|
const filename = path.substring(lastSeparatorIndex + 1);
|
|
|
|
if (directory.length <= 40) {
|
|
return `${directory}/${filename}`;
|
|
}
|
|
|
|
const maxDirLength = 35;
|
|
const startLength = Math.floor(maxDirLength / 2);
|
|
const endLength = maxDirLength - startLength - 3;
|
|
|
|
const truncatedDir = directory.length > maxDirLength
|
|
? `${directory.substring(0, startLength)}...${directory.substring(directory.length - endLength)}`
|
|
: directory;
|
|
|
|
return `${truncatedDir}/${filename}`;
|
|
};
|
|
|
|
const formatTitle = (title: string) => {
|
|
if (!title) return '';
|
|
|
|
if (title.length <= 40) {
|
|
return title;
|
|
}
|
|
|
|
return title.length > 60 ? title.substring(0, 60) + '...' : title;
|
|
};
|
|
|
|
const getLibraryRoot = (currentPath: string): string | null => {
|
|
if (!currentPath || libraries.length === 0) return null;
|
|
|
|
for (const library of libraries) {
|
|
if (currentPath.startsWith(library.path)) {
|
|
return library.path;
|
|
}
|
|
}
|
|
return null;
|
|
};
|
|
|
|
const getParentPath = (currentPath: string): string => {
|
|
if (!currentPath) return '';
|
|
|
|
const libraryRoot = getLibraryRoot(currentPath);
|
|
if (!libraryRoot) return '';
|
|
|
|
if (currentPath === libraryRoot) return '';
|
|
|
|
const pathParts = currentPath.split('/');
|
|
const libraryParts = libraryRoot.split('/').filter(part => part.length > 0);
|
|
|
|
const filteredPathParts = pathParts.filter(part => part.length > 0);
|
|
|
|
if (filteredPathParts.length <= libraryParts.length) return '';
|
|
|
|
const parentParts = filteredPathParts.slice(0, -1);
|
|
return '/' + parentParts.join('/');
|
|
};
|
|
|
|
const fetchItems = useCallback(async (path: string) => {
|
|
setLoading(true);
|
|
setError('');
|
|
try {
|
|
const res = await fetch(`/api/files?path=${encodeURIComponent(path)}`);
|
|
const data = await res.json();
|
|
|
|
if (!Array.isArray(data)) {
|
|
console.error('Invalid response format:', data);
|
|
setItems([]);
|
|
setError('Invalid response from server');
|
|
} else {
|
|
setItems(data);
|
|
}
|
|
} catch (error) {
|
|
console.error('Error fetching items:', error);
|
|
setItems([]);
|
|
setError('Failed to load directory contents');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, []);
|
|
|
|
const getFileIcon = (item: FileSystemItem) => {
|
|
if (item.isDirectory) return <Folder className="text-blue-500" size={48} />;
|
|
if (item.type === 'photo') return <ImageIcon className="text-green-500" size={48} />;
|
|
if (item.type === 'video') return <Film className="text-red-500" size={48} />;
|
|
if (item.type === 'text') return <FileText className="text-purple-500" size={48} />;
|
|
return <HardDrive className="text-gray-500" size={48} />;
|
|
};
|
|
|
|
const isMediaFile = (item: FileSystemItem) => {
|
|
return item.type === 'video' || item.type === 'photo' || item.type === 'text';
|
|
};
|
|
|
|
// Calculate responsive column count and width
|
|
const getColumnCount = useCallback(() => {
|
|
if (containerWidth === 0) return 6;
|
|
if (containerWidth < 640) return 2;
|
|
if (containerWidth < 768) return 3;
|
|
if (containerWidth < 1024) return 4;
|
|
if (containerWidth < 1280) return 5;
|
|
if (containerWidth < 1536) return 6;
|
|
return 7;
|
|
}, [containerWidth]);
|
|
|
|
const getColumnWidth = useCallback(() => {
|
|
const cols = getColumnCount();
|
|
const availableWidth = containerWidth - 32;
|
|
const gapWidth = (cols - 1) * 16;
|
|
return Math.floor((availableWidth - gapWidth) / cols);
|
|
}, [containerWidth, getColumnCount]);
|
|
|
|
// Update container width on resize
|
|
useEffect(() => {
|
|
const updateWidth = () => {
|
|
if (containerRef.current) {
|
|
setContainerWidth(containerRef.current.offsetWidth);
|
|
}
|
|
};
|
|
|
|
updateWidth();
|
|
window.addEventListener('resize', updateWidth);
|
|
return () => window.removeEventListener('resize', updateWidth);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (currentPath) {
|
|
fetchItems(currentPath);
|
|
}
|
|
}, [currentPath, fetchItems]);
|
|
|
|
useEffect(() => {
|
|
if (onItemsLoaded) {
|
|
onItemsLoaded(items);
|
|
}
|
|
}, [items, onItemsLoaded]);
|
|
|
|
const Cell = ({ columnIndex, rowIndex, style }: any) => {
|
|
const columnCount = getColumnCount();
|
|
const index = rowIndex * columnCount + columnIndex;
|
|
const item = items[index];
|
|
|
|
if (!item) return null;
|
|
|
|
return (
|
|
<div style={style} className="p-2">
|
|
<div className={`group relative bg-white dark:bg-slate-800 rounded-xl shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-1 overflow-hidden min-h-[240px] ${(item.type === 'video' || item.type === 'photo' || item.type === 'text') ? 'cursor-pointer' : ''}`}>
|
|
<Link href={item.isDirectory ? `/folder-viewer?path=${item.path}` : '#'}
|
|
className="block h-full flex flex-col"
|
|
onClick={(e) => {
|
|
if (item.type === 'video' && item.id) {
|
|
e.preventDefault();
|
|
onVideoClick(item);
|
|
} else if (item.type === 'photo' && item.id) {
|
|
e.preventDefault();
|
|
const photoIndex = items.filter(i => i.type === 'photo' && i.id).findIndex(i => i.id === item.id);
|
|
onPhotoClick(item, photoIndex);
|
|
} else if (item.type === 'text' && item.id) {
|
|
e.preventDefault();
|
|
onTextClick(item);
|
|
}
|
|
}}>
|
|
<div className="aspect-[4/3] relative overflow-hidden">
|
|
{item.isDirectory ? (
|
|
<div className="absolute inset-0 bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-blue-900/20 dark:to-indigo-900/20 flex items-center justify-center">
|
|
<div className="w-16 h-16 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-2xl flex items-center justify-center shadow-lg"
|
|
style={{ transform: 'perspective(100px) rotateY(-5deg) rotateX(5deg)' }}>
|
|
<Folder className="h-8 w-8 text-white" />
|
|
</div>
|
|
</div>
|
|
) : isMediaFile(item) ? (
|
|
<div className="relative overflow-hidden aspect-[4/3] bg-black rounded-t-xl">
|
|
{item.type === 'text' ? (
|
|
// For text files, show a text icon instead of thumbnail
|
|
<div className="absolute inset-0 bg-gradient-to-br from-purple-50 to-indigo-100 dark:from-purple-900/20 dark:to-indigo-900/20 flex items-center justify-center">
|
|
<div className="w-16 h-16 bg-gradient-to-br from-purple-500 to-indigo-600 rounded-2xl flex items-center justify-center shadow-lg"
|
|
style={{ transform: 'perspective(100px) rotateY(-5deg) rotateX(5deg)' }}>
|
|
<FileText className="h-8 w-8 text-white" />
|
|
</div>
|
|
</div>
|
|
) : (
|
|
// For photos and videos, show thumbnail
|
|
<img
|
|
src={item.thumbnail || (item.type === 'video' ? '/placeholder-video.svg' : '/placeholder-photo.svg')}
|
|
alt={item.name}
|
|
className="w-full h-full object-contain transition-transform duration-300 group-hover:scale-105"
|
|
/>
|
|
)}
|
|
{item.type === 'video' && (
|
|
<div className="absolute top-2 right-2 bg-black/60 text-white rounded-full p-1">
|
|
<Play className="h-3 w-3" />
|
|
</div>
|
|
)}
|
|
{item.type === 'photo' && (
|
|
<div className="absolute top-2 right-2 bg-black/60 text-white rounded-full p-1">
|
|
<ImageIcon className="h-3 w-3" />
|
|
</div>
|
|
)}
|
|
{item.type === 'text' && (
|
|
<div className="absolute top-2 right-2 bg-black/60 text-white rounded-full p-1">
|
|
<FileText className="h-3 w-3" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<div className="absolute inset-0 bg-gradient-to-br from-slate-100 to-slate-200 dark:from-slate-700 dark:to-slate-800 flex items-center justify-center"
|
|
style={{ background: 'linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%)' }}>
|
|
<div className="w-16 h-16 bg-gradient-to-br from-slate-400 to-slate-600 rounded-2xl flex items-center justify-center shadow-lg"
|
|
style={{ transform: 'perspective(100px) rotateY(-5deg) rotateX(5deg)' }}>
|
|
{getFileIcon(item)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="p-2.5 flex flex-col flex-1 bg-slate-50 dark:bg-slate-800/50 border-t border-slate-200 dark:border-slate-700">
|
|
<p className="text-sm font-semibold text-slate-900 dark:text-slate-100 line-clamp-2 leading-tight mb-1 min-h-[2rem]" title={item.name}>{formatTitle(item.name)}</p>
|
|
|
|
<div className="flex items-center justify-between text-xs mb-1">
|
|
<span className="text-slate-600 dark:text-slate-400">{formatFileSize(item.size)}</span>
|
|
{isMediaFile(item) && (item.avg_rating || 0) > 0 && (
|
|
<StarRating
|
|
rating={item.avg_rating || 0}
|
|
count={item.star_count || 0}
|
|
size="xs"
|
|
showCount={false}
|
|
/>
|
|
)}
|
|
</div>
|
|
|
|
<p
|
|
className="text-xs text-slate-500 dark:text-slate-400 line-clamp-2 leading-tight cursor-help flex-1"
|
|
title={item.path}
|
|
>
|
|
{formatFilePath(item.path)}
|
|
</p>
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const columnCount = getColumnCount();
|
|
const columnWidth = getColumnWidth();
|
|
const rowCount = Math.ceil(items.length / columnCount);
|
|
|
|
// Calculate available height for the grid
|
|
const getAvailableHeight = useCallback(() => {
|
|
if (typeof window === 'undefined') return 600;
|
|
|
|
// Calculate the actual header height and other UI elements
|
|
const headerHeight = 200; // Title, breadcrumbs, back button
|
|
const bottomPadding = 20;
|
|
const availableHeight = window.innerHeight - headerHeight - bottomPadding;
|
|
|
|
return Math.max(Math.min(availableHeight, window.innerHeight - 100), 400);
|
|
}, []);
|
|
|
|
if (!currentPath) {
|
|
return (
|
|
<div className="h-screen flex flex-col overflow-hidden">
|
|
<div className="flex-1 flex items-center justify-center">
|
|
<div className="text-center max-w-md">
|
|
<div className="w-20 h-20 bg-zinc-900 rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-lg">
|
|
<Folder className="h-10 w-10 text-blue-500" />
|
|
</div>
|
|
<h2 className="text-2xl font-bold text-white mb-2">Select a Library</h2>
|
|
<p className="text-zinc-400">
|
|
Choose a media library from the sidebar to browse your files
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (loading && items.length === 0) {
|
|
return (
|
|
<div className="h-screen flex flex-col overflow-hidden">
|
|
<div className="flex-1 flex items-center justify-center">
|
|
<div className="text-center">
|
|
<div className="w-16 h-16 bg-gradient-to-br from-primary to-primary/80 rounded-2xl flex items-center justify-center mx-auto mb-4 animate-pulse shadow-lg">
|
|
<Folder className="h-8 w-8 text-primary-foreground" />
|
|
</div>
|
|
<p className="text-muted-foreground font-medium">Loading directory...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="h-screen flex flex-col overflow-hidden">
|
|
<div ref={containerRef} className="flex-1 flex flex-col max-w-7xl mx-auto w-full overflow-hidden">
|
|
{/* Header */}
|
|
<div className="flex-shrink-0 p-6 pb-4">
|
|
{/* Back Button */}
|
|
<div className="flex items-center gap-4 mb-4">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={onBackClick}
|
|
className="text-zinc-400 hover:text-white hover:bg-zinc-800/50 transition-colors"
|
|
disabled={!getParentPath(currentPath)}
|
|
title={getParentPath(currentPath) ? 'Go to parent directory' : 'Already at library root'}
|
|
>
|
|
<ChevronLeft className="h-4 w-4 mr-2" />
|
|
Back
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Breadcrumb Navigation */}
|
|
<nav className="flex items-center flex-wrap gap-2 text-sm font-medium text-zinc-400 mb-4">
|
|
{breadcrumbs.map((breadcrumb, index) => (
|
|
<div key={breadcrumb.path} className="flex items-center gap-2">
|
|
{index > 0 && <span className="text-zinc-600">/</span>}
|
|
<button
|
|
onClick={() => onBreadcrumbClick(breadcrumb.path)}
|
|
className={`hover:text-white transition-colors ${
|
|
index === breadcrumbs.length - 1
|
|
? 'text-white font-semibold cursor-default'
|
|
: 'hover:underline cursor-pointer'
|
|
}`}
|
|
disabled={index === breadcrumbs.length - 1}
|
|
title={breadcrumb.path}
|
|
>
|
|
{index === 0 ? (
|
|
<div className="flex items-center gap-1">
|
|
<Home className="h-3 w-3" />
|
|
<span>{breadcrumb.name}</span>
|
|
</div>
|
|
) : (
|
|
breadcrumb.name
|
|
)}
|
|
</button>
|
|
</div>
|
|
))}
|
|
</nav>
|
|
|
|
{/* Current Directory Title */}
|
|
<h1 className="text-3xl font-bold text-white tracking-tight">
|
|
{currentPath ? currentPath.split('/').pop() : 'Libraries'}
|
|
</h1>
|
|
</div>
|
|
|
|
{/* Folder Grid Container */}
|
|
<div className="flex-1 relative overflow-hidden">
|
|
{error ? (
|
|
<div className="flex items-center justify-center h-full">
|
|
<div className="text-center max-w-sm">
|
|
<div className="w-16 h-16 bg-red-900/20 rounded-2xl flex items-center justify-center mx-auto mb-4">
|
|
<Folder className="h-8 w-8 text-red-500" />
|
|
</div>
|
|
<h3 className="text-lg font-semibold text-red-400 mb-2">Error Loading Directory</h3>
|
|
<p className="text-sm text-red-500 mb-4">{error}</p>
|
|
<Button
|
|
onClick={() => currentPath && fetchItems(currentPath)}
|
|
variant="outline"
|
|
size="sm"
|
|
className="border-red-500 text-red-500 hover:bg-red-500/10"
|
|
>
|
|
Try Again
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
) : items.length > 0 && containerWidth > 0 ? (
|
|
<div className="h-full relative overflow-hidden">
|
|
<FixedSizeGrid
|
|
columnCount={columnCount}
|
|
columnWidth={columnWidth}
|
|
height={getAvailableHeight()}
|
|
rowCount={rowCount}
|
|
rowHeight={ITEM_HEIGHT}
|
|
width={containerWidth}
|
|
itemData={items}
|
|
className="custom-scrollbar"
|
|
>
|
|
{Cell}
|
|
</FixedSizeGrid>
|
|
|
|
{/* Fancy scroll indicator */}
|
|
<div className="absolute right-2 top-1/2 transform -translate-y-1/2 w-2 h-32 bg-gradient-to-b from-primary/20 via-primary/40 to-primary/20 rounded-full opacity-0 hover:opacity-100 transition-opacity duration-300 pointer-events-none">
|
|
<div className="w-full h-full bg-gradient-to-b from-primary/60 via-primary to-primary/60 rounded-full scroll-indicator"></div>
|
|
</div>
|
|
</div>
|
|
) : items.length === 0 ? (
|
|
<div className="flex items-center justify-center h-full">
|
|
<div className="text-center max-w-sm">
|
|
<div className="w-16 h-16 bg-slate-100 dark:bg-slate-800 rounded-2xl flex items-center justify-center mx-auto mb-4">
|
|
<Folder className="h-8 w-8 text-slate-400" />
|
|
</div>
|
|
<h3 className="text-lg font-semibold text-slate-700 dark:text-slate-300 mb-2">Empty Directory</h3>
|
|
<p className="text-sm text-slate-500 dark:text-slate-400">No files or folders found in this location.</p>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="flex items-center justify-center h-full">
|
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |