124 lines
3.7 KiB
TypeScript
124 lines
3.7 KiB
TypeScript
import React from 'react';
|
|
import toast from '@/utils/toast';
|
|
import { FileDetailsView } from '../FileDetailsView';
|
|
import { AutoMetadataDetectionModal } from '@/components/library/AutoMetadataDetectionModal';
|
|
import { WatermarkSettingsModal } from '@/components/library/WatermarkSettingsModal';
|
|
import { useFileManagerView } from './useFileManagerView';
|
|
import { FileManagerViewHeader } from './FileManagerViewHeader';
|
|
import { FileManagerViewToolbar } from './FileManagerViewToolbar';
|
|
import { FileManagerViewTable } from './FileManagerViewTable';
|
|
import { FileManagerViewGrid } from './FileManagerViewGrid';
|
|
import { FileManagerViewEmpty } from './FileManagerViewEmpty';
|
|
import { FileManagerViewSkeleton } from './FileManagerViewSkeleton';
|
|
import type { FileNode } from './types';
|
|
|
|
export interface FileManagerViewProps {
|
|
filesOverride?: FileNode[];
|
|
isLoading?: boolean;
|
|
}
|
|
|
|
export const FileManagerView: React.FC<FileManagerViewProps> = (props) => {
|
|
const { addToast } = useToast();
|
|
const {
|
|
viewMode,
|
|
setViewMode,
|
|
searchQuery,
|
|
setSearchQuery,
|
|
selectedFiles,
|
|
currentFolder,
|
|
setCurrentFolder,
|
|
selectedFileId,
|
|
setSelectedFileId,
|
|
showMetadataModal,
|
|
setShowMetadataModal,
|
|
showWatermarkModal,
|
|
setShowWatermarkModal,
|
|
filteredFiles,
|
|
handleFileClick,
|
|
toggleSelection,
|
|
selectAll,
|
|
handleBulkAction,
|
|
files,
|
|
isLoading,
|
|
} = useFileManagerView({
|
|
filesOverride: props.filesOverride,
|
|
isLoading: props.isLoading,
|
|
});
|
|
|
|
if (isLoading) {
|
|
return <FileManagerViewSkeleton />;
|
|
}
|
|
|
|
if (selectedFileId) {
|
|
return (
|
|
<FileDetailsView
|
|
fileId={selectedFileId}
|
|
onBack={() => setSelectedFileId(null)}
|
|
/>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-8 animate-in fade-in pb-20">
|
|
<FileManagerViewHeader
|
|
currentFolder={currentFolder}
|
|
onFolderRoot={() => setCurrentFolder('Root')}
|
|
viewMode={viewMode}
|
|
onViewModeChange={setViewMode}
|
|
onOpenMetadataModal={() => setShowMetadataModal(true)}
|
|
onOpenWatermarkModal={() => setShowWatermarkModal(true)}
|
|
/>
|
|
|
|
<FileManagerViewToolbar
|
|
searchQuery={searchQuery}
|
|
onSearchChange={setSearchQuery}
|
|
selectedCount={selectedFiles.length}
|
|
onBulkDownload={() => handleBulkAction('Downloaded')}
|
|
onBulkMove={() => handleBulkAction('Moved')}
|
|
onBulkDelete={() => handleBulkAction('Deleted')}
|
|
/>
|
|
|
|
<div className="min-h-layout-page-sm">
|
|
{filteredFiles.length === 0 ? (
|
|
<FileManagerViewEmpty />
|
|
) : viewMode === 'list' ? (
|
|
<FileManagerViewTable
|
|
files={filteredFiles}
|
|
selectedIds={selectedFiles}
|
|
onSelectAll={selectAll}
|
|
onToggleSelect={toggleSelection}
|
|
onFileClick={handleFileClick}
|
|
/>
|
|
) : (
|
|
<FileManagerViewGrid
|
|
files={filteredFiles}
|
|
selectedIds={selectedFiles}
|
|
onToggleSelect={toggleSelection}
|
|
onFileClick={handleFileClick}
|
|
/>
|
|
)}
|
|
</div>
|
|
|
|
{showMetadataModal && (
|
|
<AutoMetadataDetectionModal
|
|
fileName={
|
|
selectedFileId
|
|
? files.find((f) => f.id === selectedFileId)?.name ?? 'Selected File'
|
|
: 'Scan Library'
|
|
}
|
|
onClose={() => setShowMetadataModal(false)}
|
|
onApply={(data) => {
|
|
toast.success(`Applied: ${data.genre} - ${data.bpm}BPM`);
|
|
setShowMetadataModal(false);
|
|
}}
|
|
/>
|
|
)}
|
|
{showWatermarkModal && (
|
|
<WatermarkSettingsModal
|
|
onClose={() => setShowWatermarkModal(false)}
|
|
onSave={() => toast.success('Watermark settings updated')}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|