Compare commits
No commits in common. "a56492f36a74cc0633fc95e64eb6f192cba313df" and "44aedcbee61f8cd03245ad33ead665a933f460fa" have entirely different histories.
a56492f36a
...
44aedcbee6
|
|
@ -107,23 +107,13 @@ const FolderViewerPage = () => {
|
|||
const directory = path.substring(0, lastSeparatorIndex);
|
||||
const filename = path.substring(lastSeparatorIndex + 1);
|
||||
|
||||
// If the full path is short enough, show it all
|
||||
if (path.length <= 80) {
|
||||
return path;
|
||||
}
|
||||
|
||||
// If directory is short enough, show directory + truncated filename
|
||||
if (directory.length <= 50) {
|
||||
const maxFilenameLength = 80 - directory.length - 1; // -1 for "/"
|
||||
if (filename.length <= maxFilenameLength) {
|
||||
// If directory is short enough, show it all
|
||||
if (directory.length <= 30) {
|
||||
return `${directory}/${filename}`;
|
||||
} else {
|
||||
return `${directory}/${filename.substring(0, maxFilenameLength - 3)}...`;
|
||||
}
|
||||
}
|
||||
|
||||
// For longer paths, show more of the directory structure
|
||||
const maxDirLength = 45;
|
||||
// Truncate directory with ellipsis in the middle
|
||||
const maxDirLength = 25;
|
||||
const startLength = Math.floor(maxDirLength / 2);
|
||||
const endLength = maxDirLength - startLength - 3; // -3 for "..."
|
||||
|
||||
|
|
@ -131,25 +121,7 @@ const FolderViewerPage = () => {
|
|||
? `${directory.substring(0, startLength)}...${directory.substring(directory.length - endLength)}`
|
||||
: directory;
|
||||
|
||||
// Add filename if there's space
|
||||
const remainingSpace = 80 - truncatedDir.length - 1; // -1 for "/"
|
||||
if (remainingSpace > 3) {
|
||||
return `${truncatedDir}/${filename.length > remainingSpace ? filename.substring(0, remainingSpace - 3) + '...' : filename}`;
|
||||
}
|
||||
|
||||
return `${truncatedDir}/...`;
|
||||
};
|
||||
|
||||
const formatTitle = (title: string) => {
|
||||
if (!title) return '';
|
||||
|
||||
// If title is short enough, return as is
|
||||
if (title.length <= 40) {
|
||||
return title;
|
||||
}
|
||||
|
||||
// For longer titles, truncate to prevent awkward third-line display
|
||||
return title.length > 60 ? title.substring(0, 60) + '...' : title;
|
||||
return `${truncatedDir}/${filename}`;
|
||||
};
|
||||
|
||||
const getLibraryRoot = (currentPath: string): string | null => {
|
||||
|
|
@ -379,7 +351,7 @@ const FolderViewerPage = () => {
|
|||
</h1>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-4">
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 gap-4">
|
||||
{error && (
|
||||
<div className="col-span-full text-center py-12">
|
||||
<div className="max-w-sm mx-auto">
|
||||
|
|
@ -402,9 +374,9 @@ const FolderViewerPage = () => {
|
|||
|
||||
{!error && Array.isArray(items) && items.map((item) => (
|
||||
<div key={item.name}
|
||||
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') ? 'cursor-pointer' : ''}`}>
|
||||
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 ${(item.type === 'video' || item.type === 'photo') ? 'cursor-pointer' : ''}`}>
|
||||
<Link href={item.isDirectory ? `/folder-viewer?path=${item.path}` : '#'}
|
||||
className="block h-full flex flex-col"
|
||||
className="block"
|
||||
onClick={(e) => {
|
||||
if (item.type === 'video' && item.id) {
|
||||
e.preventDefault();
|
||||
|
|
@ -415,7 +387,7 @@ const FolderViewerPage = () => {
|
|||
handlePhotoClick(item, photoIndex);
|
||||
}
|
||||
}}>
|
||||
<div className="aspect-[4/3] relative overflow-hidden">
|
||||
<div className="aspect-square 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"
|
||||
|
|
@ -424,29 +396,44 @@ const FolderViewerPage = () => {
|
|||
</div>
|
||||
</div>
|
||||
) : isMediaFile(item) ? (
|
||||
<div className="relative overflow-hidden aspect-[4/3] bg-black rounded-t-xl">
|
||||
<div className={`relative overflow-hidden ${item.type === 'video' ? 'aspect-video' : 'aspect-[4/3]'}`}>
|
||||
<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"
|
||||
className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
|
||||
<div className="absolute bottom-2 left-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||
{item.type === 'video' ? (
|
||||
<div className="bg-white/90 backdrop-blur-sm rounded-full p-2 shadow-lg">
|
||||
<Film className="h-4 w-4 text-slate-800" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-white/90 backdrop-blur-sm rounded-full p-2 shadow-lg">
|
||||
<Image className="h-4 w-4 text-slate-800" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{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" />
|
||||
{/* Always visible small play icon */}
|
||||
<div className="absolute top-2 right-2 bg-black/70 backdrop-blur-sm rounded-full p-1.5">
|
||||
<Play className="h-3 w-3 text-white" />
|
||||
</div>
|
||||
{/* Large play button on hover */}
|
||||
<div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||
<div className="bg-white/90 backdrop-blur-sm rounded-full p-3 shadow-lg">
|
||||
<Play className="h-6 w-6 text-slate-800" />
|
||||
</div>
|
||||
</div>
|
||||
{/* Loading overlay when video is being opened */}
|
||||
{isVideoLoading && selectedVideo?.id === item.id && (
|
||||
<div className="absolute inset-0 bg-black/50 flex items-center justify-center">
|
||||
<div className="animate-spin rounded-full h-6 w-6 border-2 border-white border-t-transparent"></div>
|
||||
<div className="absolute inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-2 border-white border-t-transparent"></div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{item.type === 'photo' && (
|
||||
<div className="absolute top-2 right-2 bg-black/60 text-white rounded-full p-1">
|
||||
<Image 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"
|
||||
|
|
@ -458,27 +445,32 @@ const FolderViewerPage = () => {
|
|||
</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="p-3">
|
||||
<p className="text-sm font-semibold text-slate-900 dark:text-slate-100 truncate mb-1">{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>
|
||||
{/* Star Rating for media files */}
|
||||
{isMediaFile(item) && (item.avg_rating || 0) > 0 && (
|
||||
<div className="mb-2">
|
||||
<StarRating
|
||||
rating={item.avg_rating || 0}
|
||||
count={item.star_count || 0}
|
||||
size="xs"
|
||||
showCount={false}
|
||||
size="sm"
|
||||
showCount={true}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-xs text-slate-600 dark:text-slate-400">{formatFileSize(item.size)}</p>
|
||||
{!item.isDirectory && (
|
||||
<p
|
||||
className="text-xs text-slate-500 dark:text-slate-400 line-clamp-2 leading-tight cursor-help flex-1"
|
||||
className="text-xs text-slate-500 dark:text-slate-500 truncate ml-2 cursor-help"
|
||||
title={item.path}
|
||||
>
|
||||
{formatFilePath(item.path)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ interface InfiniteVirtualGridProps {
|
|||
onRate: (id: number, rating: number) => Promise<void>;
|
||||
}
|
||||
|
||||
const ITEM_HEIGHT = 220;
|
||||
const ITEM_HEIGHT = 300;
|
||||
const ITEMS_PER_BATCH = 50;
|
||||
const BUFFER_SIZE = 200;
|
||||
|
||||
|
|
@ -70,11 +70,11 @@ export default function InfiniteVirtualGrid({
|
|||
const directory = path.substring(0, lastSeparatorIndex);
|
||||
const filename = path.substring(lastSeparatorIndex + 1);
|
||||
|
||||
if (directory.length <= 40) {
|
||||
if (directory.length <= 30) {
|
||||
return `${directory}/${filename}`;
|
||||
}
|
||||
|
||||
const maxDirLength = 35;
|
||||
const maxDirLength = 25;
|
||||
const startLength = Math.floor(maxDirLength / 2);
|
||||
const endLength = maxDirLength - startLength - 3;
|
||||
|
||||
|
|
@ -354,7 +354,7 @@ export default function InfiniteVirtualGrid({
|
|||
className="group hover:shadow-lg transition-all duration-300 hover:-translate-y-1 cursor-pointer border-border overflow-hidden h-full"
|
||||
onClick={() => onItemClick(item)}
|
||||
>
|
||||
<div className="relative overflow-hidden bg-muted aspect-video">
|
||||
<div className={`relative overflow-hidden bg-muted ${type === 'video' ? 'aspect-video' : 'aspect-square'}`}>
|
||||
<img
|
||||
src={item.thumbnail || (type === 'video' ? "/placeholder-video.svg" : "/placeholder-photo.svg")}
|
||||
alt={item.title}
|
||||
|
|
@ -384,54 +384,34 @@ export default function InfiniteVirtualGrid({
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<CardContent className="p-2.5">
|
||||
<div className="flex items-start justify-between min-h-[2rem]">
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="font-medium text-foreground text-xs line-clamp-2 group-hover:text-primary transition-colors leading-tight">
|
||||
<CardContent className="p-3">
|
||||
<h3 className="font-medium text-foreground text-sm line-clamp-2 mb-2 group-hover:text-primary transition-colors">
|
||||
{item.title || item.path.split('/').pop()}
|
||||
</h3>
|
||||
|
||||
{(item.avg_rating > 0 || item.star_count > 0) && (
|
||||
<div className="mt-0.5">
|
||||
<div className="mb-2">
|
||||
<StarRating
|
||||
rating={item.avg_rating || 0}
|
||||
count={item.star_count}
|
||||
size="xs"
|
||||
showCount={false}
|
||||
size="sm"
|
||||
showCount={true}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex gap-1 ml-1 flex-shrink-0">
|
||||
{type === 'video' && item.bookmark_count > 0 && (
|
||||
<div className="text-xs text-yellow-500">
|
||||
<Bookmark className="h-2.5 w-2.5 fill-yellow-500" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-1 space-y-0.5">
|
||||
<div className="flex items-center justify-between text-xs text-muted-foreground">
|
||||
<div className="flex items-center gap-2 text-xs text-muted-foreground">
|
||||
<div className="flex items-center gap-1">
|
||||
<HardDrive className="h-2.5 w-2.5" />
|
||||
<HardDrive className="h-3 w-3" />
|
||||
<span>{formatFileSize(item.size)}</span>
|
||||
</div>
|
||||
{type === 'video' && item.bookmark_count > 0 && (
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{item.bookmark_count}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<p
|
||||
className="text-xs text-muted-foreground line-clamp-1 cursor-help hover:text-foreground transition-colors"
|
||||
className="text-xs text-muted-foreground mt-1 line-clamp-1 cursor-help"
|
||||
title={item.path}
|
||||
>
|
||||
{formatFilePath(item.path)}
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import { cn } from '@/lib/utils';
|
|||
interface StarRatingProps {
|
||||
rating: number;
|
||||
count?: number;
|
||||
size?: 'xs' | 'sm' | 'md' | 'lg';
|
||||
size?: 'sm' | 'md' | 'lg';
|
||||
showCount?: boolean;
|
||||
interactive?: boolean;
|
||||
onRate?: (rating: number) => void;
|
||||
|
|
@ -23,7 +23,6 @@ export function StarRating({
|
|||
className
|
||||
}: StarRatingProps) {
|
||||
const sizeClasses = {
|
||||
xs: 'h-2.5 w-2.5',
|
||||
sm: 'h-3 w-3',
|
||||
md: 'h-4 w-4',
|
||||
lg: 'h-5 w-5'
|
||||
|
|
|
|||
|
|
@ -242,34 +242,8 @@ export default function VideoViewer({
|
|||
|
||||
{/* Title overlay */}
|
||||
<div className={`absolute top-0 left-0 right-0 bg-gradient-to-b from-black/60 to-transparent p-4 transition-opacity duration-300 ${showControls ? 'opacity-100' : 'opacity-0'}`}>
|
||||
<h2 className="text-white text-lg font-semibold">{getVideoTitle()}</h2>
|
||||
</div>
|
||||
|
||||
{/* Controls overlay */}
|
||||
<div className={`absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent p-4 transition-opacity duration-300 ${showControls ? 'opacity-100' : 'opacity-0'}`}>
|
||||
{/* Progress bar */}
|
||||
<div className="mb-4">
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max={duration || 0}
|
||||
value={currentTime}
|
||||
onChange={handleSeek}
|
||||
className="w-full h-1 bg-gray-600 rounded-lg appearance-none cursor-pointer slider"
|
||||
/>
|
||||
<div className="flex justify-between text-white text-sm mt-1">
|
||||
<span>{formatTime(currentTime)}</span>
|
||||
<span>{formatTime(duration)}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Video Info Bar (similar to photo viewer) */}
|
||||
<div className="bg-black/70 backdrop-blur-sm rounded-lg p-4 mb-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h3 className="text-white font-medium">{getVideoTitle()}</h3>
|
||||
<p className="text-gray-300 text-sm">{getVideoSize()}</p>
|
||||
</div>
|
||||
<h2 className="text-white text-lg font-semibold">{getVideoTitle()}</h2>
|
||||
{(showBookmarks || showRatings) && (
|
||||
<div className="flex items-center gap-4">
|
||||
{showBookmarks && (
|
||||
|
|
@ -298,6 +272,24 @@ export default function VideoViewer({
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{/* Controls overlay */}
|
||||
<div className={`absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent p-4 transition-opacity duration-300 ${showControls ? 'opacity-100' : 'opacity-0'}`}>
|
||||
{/* Progress bar */}
|
||||
<div className="mb-4">
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max={duration || 0}
|
||||
value={currentTime}
|
||||
onChange={handleSeek}
|
||||
className="w-full h-1 bg-gray-600 rounded-lg appearance-none cursor-pointer slider"
|
||||
/>
|
||||
<div className="flex justify-between text-white text-sm mt-1">
|
||||
<span>{formatTime(currentTime)}</span>
|
||||
<span>{formatTime(duration)}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Control buttons */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
|
|
|
|||
|
|
@ -80,11 +80,11 @@ export default function VirtualizedMediaGrid({
|
|||
const directory = path.substring(0, lastSeparatorIndex);
|
||||
const filename = path.substring(lastSeparatorIndex + 1);
|
||||
|
||||
if (directory.length <= 40) {
|
||||
if (directory.length <= 30) {
|
||||
return `${directory}/${filename}`;
|
||||
}
|
||||
|
||||
const maxDirLength = 35;
|
||||
const maxDirLength = 25;
|
||||
const startLength = Math.floor(maxDirLength / 2);
|
||||
const endLength = maxDirLength - startLength - 3;
|
||||
|
||||
|
|
@ -231,13 +231,13 @@ export default function VirtualizedMediaGrid({
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<CardContent className="p-2.5">
|
||||
<h3 className="font-medium text-foreground text-sm line-clamp-2 mb-1.5 group-hover:text-primary transition-colors">
|
||||
<CardContent className="p-3">
|
||||
<h3 className="font-medium text-foreground text-sm line-clamp-2 mb-2 group-hover:text-primary transition-colors">
|
||||
{item.title || item.path.split('/').pop()}
|
||||
</h3>
|
||||
|
||||
{(item.avg_rating > 0 || item.star_count > 0) && (
|
||||
<div className="mb-1.5">
|
||||
<div className="mb-2">
|
||||
<StarRating
|
||||
rating={item.avg_rating || 0}
|
||||
count={item.star_count}
|
||||
|
|
|
|||
Loading…
Reference in New Issue