add search page
This commit is contained in:
smanylov
@@ -0,0 +1,22 @@
|
|||||||
|
import SectionSearchFile from '@/app/components/section-search-file';
|
||||||
|
export default function Page() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="block-wrapper">
|
||||||
|
<h1 className="page-title">
|
||||||
|
Поиск защищенного контента
|
||||||
|
</h1>
|
||||||
|
<p className="page-description">
|
||||||
|
Загрузите файл для поиска похожего защищенного контента в вашей библиотеке и в интернете
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="search-grid">
|
||||||
|
<SectionSearchFile maxFileSize={1024000000} allowedExtensions={[]} fileType="video"/>
|
||||||
|
<div className="search-sidebar">
|
||||||
|
test
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,425 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import { useRef, useState, useCallback, ChangeEvent, DragEvent, useEffect, useMemo } from 'react';
|
||||||
|
import { IconShieldAdd } from '@/app/ui/icons/icons';
|
||||||
|
import { fileUpload, cancelUpload, chunkUpload, checkChunkStatus } from '@/app/actions/fileUpload';
|
||||||
|
import { useTranslations } from 'next-intl';
|
||||||
|
import { useNavigationBlocker } from '@/app/hooks/useNavigationBlocker';
|
||||||
|
import { useQueryClient } from '@tanstack/react-query';
|
||||||
|
interface SelectedFile {
|
||||||
|
file: File;
|
||||||
|
preview: string | undefined;
|
||||||
|
name: string;
|
||||||
|
size: string;
|
||||||
|
dimensions?: {
|
||||||
|
width: number;
|
||||||
|
height: number;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
interface FileUploadInitResponse {
|
||||||
|
upload_id: string,
|
||||||
|
file_name: string,
|
||||||
|
total_chunks: number,
|
||||||
|
chunk_size: number,
|
||||||
|
status: string
|
||||||
|
}
|
||||||
|
|
||||||
|
interface SectionSearchFile {
|
||||||
|
fileType: string
|
||||||
|
allowedExtensions: string[]
|
||||||
|
maxFileSize: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function SectionSearchFile({ fileType, allowedExtensions, maxFileSize }: SectionSearchFile) {
|
||||||
|
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||||
|
const [isDragging, setIsDragging] = useState<boolean>(false);
|
||||||
|
const [selectedFile, setSelectedFile] = useState<SelectedFile | null>(null);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
const [uploadId, setUploadId] = useState<string | null>(null);
|
||||||
|
const [isFileUploaded, setIsFileUploaded] = useState<boolean>(false);
|
||||||
|
const [uploadProgress, setUploadProgress] = useState<number>(0);
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
const isCancelledRef = useRef(false);
|
||||||
|
|
||||||
|
const t = useTranslations('Global');
|
||||||
|
|
||||||
|
const acceptString = useMemo(() => {
|
||||||
|
if (!allowedExtensions || !Array.isArray(allowedExtensions)) {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
return allowedExtensions.map(e => `.${e}`).join(', ');
|
||||||
|
}, [allowedExtensions]);
|
||||||
|
|
||||||
|
const validateFile = (file: File): { isValid: boolean; errorMessage?: string } => {
|
||||||
|
if (!allowedExtensions.includes(file.type as string)) {
|
||||||
|
const extension = file.name.split('.').pop()?.toLowerCase();
|
||||||
|
if (!extension || !allowedExtensions.includes(extension as string)) {
|
||||||
|
return {
|
||||||
|
isValid: false,
|
||||||
|
errorMessage: t('unsupported-file-format')
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const MAX_SIZE = maxFileSize;
|
||||||
|
|
||||||
|
if (file.size > MAX_SIZE) {
|
||||||
|
return {
|
||||||
|
isValid: false,
|
||||||
|
errorMessage: t('the-file-is-too-large')
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
return { isValid: true };
|
||||||
|
};
|
||||||
|
|
||||||
|
const getImageDimensions = (file: File): Promise<{ width: number; height: number }> => {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const img = new Image();
|
||||||
|
const objectUrl = URL.createObjectURL(file);
|
||||||
|
|
||||||
|
img.onload = () => {
|
||||||
|
const dimensions = {
|
||||||
|
width: img.width,
|
||||||
|
height: img.height
|
||||||
|
};
|
||||||
|
URL.revokeObjectURL(objectUrl);
|
||||||
|
resolve(dimensions);
|
||||||
|
};
|
||||||
|
|
||||||
|
img.onerror = () => {
|
||||||
|
URL.revokeObjectURL(objectUrl);
|
||||||
|
reject(new Error(t('error-uploading-file')));
|
||||||
|
};
|
||||||
|
|
||||||
|
img.src = objectUrl;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleFileSelect = useCallback(async (file: File | null): Promise<void> => {
|
||||||
|
if (!file) {
|
||||||
|
setError(null);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setError(null);
|
||||||
|
setIsFileUploaded(false);
|
||||||
|
setUploadProgress(0);
|
||||||
|
|
||||||
|
const validation = validateFile(file);
|
||||||
|
|
||||||
|
if (!validation.isValid) {
|
||||||
|
setError(validation.errorMessage || t('unknown-validation-error'));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let dimensions = undefined;
|
||||||
|
if (fileType === "image") {
|
||||||
|
try {
|
||||||
|
dimensions = await getImageDimensions(file) as { width: number, height: number };
|
||||||
|
if (dimensions.width < 100 || dimensions.height < 100 ||
|
||||||
|
dimensions.width > 10000 || dimensions.height > 10000) {
|
||||||
|
setError(`${t('image-size')}: ${dimensions.width}x${dimensions.height}. ${t('acceptable-range')}: 100x100 - 10000x10000 ${t('pixels')}.`);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
setError(t('error-reading-image'));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
setSelectedFile({
|
||||||
|
file,
|
||||||
|
name: file.name,
|
||||||
|
size: `${(file.size / 1024 / 1024).toFixed(2)} MB`,
|
||||||
|
dimensions,
|
||||||
|
preview: file.size < 10 * 1024 * 1024 ? URL.createObjectURL(file) : undefined
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log('Файл выбран:', file.name, file.size);
|
||||||
|
}, [fileType, t]);
|
||||||
|
|
||||||
|
const handleFileInputChange = (event: ChangeEvent<HTMLInputElement>): void => {
|
||||||
|
const file = event.target.files?.[0] || null;
|
||||||
|
handleFileSelect(file);
|
||||||
|
|
||||||
|
if (fileInputRef.current) {
|
||||||
|
fileInputRef.current.value = '';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleButtonClick = (): void => {
|
||||||
|
if (fileInputRef.current) {
|
||||||
|
fileInputRef.current.click();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDragOver = (event: DragEvent<HTMLDivElement>): void => {
|
||||||
|
event.preventDefault();
|
||||||
|
setIsDragging(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDragLeave = (): void => {
|
||||||
|
setIsDragging(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDrop = (event: DragEvent<HTMLDivElement>): void => {
|
||||||
|
event.preventDefault();
|
||||||
|
setIsDragging(false);
|
||||||
|
|
||||||
|
const file = event.dataTransfer.files[0];
|
||||||
|
handleFileSelect(file);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleClearFile = async (): Promise<void> => {
|
||||||
|
if (selectedFile && selectedFile.preview) {
|
||||||
|
URL.revokeObjectURL(selectedFile.preview);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (uploadId) {
|
||||||
|
await cancelUpload(uploadId);
|
||||||
|
}
|
||||||
|
|
||||||
|
isCancelledRef.current = true;
|
||||||
|
|
||||||
|
setIsFileUploaded(false);
|
||||||
|
setSelectedFile(null);
|
||||||
|
setError(null);
|
||||||
|
setUploadProgress(0);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handlerFileUpload = useCallback(async (fileInfo: SelectedFile): Promise<void> => {
|
||||||
|
if (uploadId) return;
|
||||||
|
|
||||||
|
setError(null);
|
||||||
|
isCancelledRef.current = false;
|
||||||
|
const file = fileInfo.file;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const extension = file.name.split('.').pop() || '';
|
||||||
|
const initMessageBody = {
|
||||||
|
file_name: file.name,
|
||||||
|
file_type: fileType,
|
||||||
|
extension: extension,
|
||||||
|
file_size: file.size
|
||||||
|
};
|
||||||
|
|
||||||
|
const response = await fileUpload(initMessageBody) as FileUploadInitResponse;
|
||||||
|
|
||||||
|
if (!response?.upload_id) {
|
||||||
|
throw new Error('Failed to get upload_id');
|
||||||
|
}
|
||||||
|
|
||||||
|
const CHUNK_SIZE = response.chunk_size;
|
||||||
|
const totalChunks = response.total_chunks;
|
||||||
|
|
||||||
|
setUploadId(response.upload_id);
|
||||||
|
|
||||||
|
for (let chunkIndex = 0; chunkIndex < totalChunks; chunkIndex++) {
|
||||||
|
if (isCancelledRef.current) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const start = chunkIndex * CHUNK_SIZE;
|
||||||
|
const end = Math.min(start + CHUNK_SIZE, file.size);
|
||||||
|
const chunk = file.slice(start, end);
|
||||||
|
const formData = new FormData();
|
||||||
|
|
||||||
|
formData.append('upload_id', response.upload_id);
|
||||||
|
formData.append('chunk_number', chunkIndex.toString());
|
||||||
|
formData.append('chunk', chunk);
|
||||||
|
/* formData.append('findSimilar', '0'); */
|
||||||
|
|
||||||
|
const chunkResponse = await chunkUpload(formData);
|
||||||
|
|
||||||
|
if (chunkResponse.message_desc !== 'Chunk uploaded successfully') {
|
||||||
|
throw new Error(`Chunk ${chunkIndex} upload failed`);
|
||||||
|
}
|
||||||
|
|
||||||
|
setUploadProgress(Math.floor((chunkIndex + 1) / totalChunks * 100));
|
||||||
|
}
|
||||||
|
|
||||||
|
const chunkStatus = await checkChunkStatus(response.upload_id);
|
||||||
|
if (chunkStatus.message_body.missing_chunks === 0) {
|
||||||
|
setIsFileUploaded(true);
|
||||||
|
await queryClient.invalidateQueries({ queryKey: ['userFilesData'] });
|
||||||
|
await queryClient.invalidateQueries({ queryKey: ['userFilesInfo'] });
|
||||||
|
} else {
|
||||||
|
throw new Error('Not all chunks were uploaded');
|
||||||
|
}
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
if (!isCancelledRef.current) {
|
||||||
|
setError(t('error-uploading-file'));
|
||||||
|
console.error('Upload error:', error);
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
setUploadId(null);
|
||||||
|
}
|
||||||
|
}, [uploadId, fileType, t]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// Обработка закрытия вкладки
|
||||||
|
// Тут можно попробовать изучить вопрос с navigator.sendBeacon('', blob)
|
||||||
|
// он нужен для того что бы послать запрос на бек при закрытии вкладки,
|
||||||
|
// но у него есть свои особенности и стандартные запросы не работают.
|
||||||
|
const handleUnload = () => {
|
||||||
|
if (uploadId) {
|
||||||
|
//const data = JSON.stringify({ uploadId, reason: 'tab_closed' });
|
||||||
|
//const blob = new Blob([data], { type: 'application/json' });
|
||||||
|
//navigator.sendBeacon('/api/v1/data/cancel', blob);
|
||||||
|
console.log('sendBeacon');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
if (uploadId) {
|
||||||
|
window.addEventListener('unload', handleUnload);
|
||||||
|
}
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('unload', handleUnload);
|
||||||
|
};
|
||||||
|
}, [uploadId]);
|
||||||
|
|
||||||
|
useNavigationBlocker({
|
||||||
|
shouldBlock: !!uploadId,
|
||||||
|
message: t('have-unsaved-changes'),
|
||||||
|
onConfirm: async () => {
|
||||||
|
console.log('User confirmed navigation');
|
||||||
|
if (uploadId) {
|
||||||
|
await cancelUpload(uploadId);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onCancel: () => {
|
||||||
|
console.log('User cancelled navigation');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="upload-section">
|
||||||
|
<h3>
|
||||||
|
{t('upload-for-protection', { fileType: t(fileType.toLocaleLowerCase()) })}
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<div
|
||||||
|
className={`drag-drop-zone ${isDragging ? 'dragging' : ''}`}
|
||||||
|
onDragOver={handleDragOver}
|
||||||
|
onDragLeave={handleDragLeave}
|
||||||
|
onDrop={handleDrop}
|
||||||
|
>
|
||||||
|
<IconShieldAdd />
|
||||||
|
<h4>
|
||||||
|
{t('drag-the-file-here')}
|
||||||
|
</h4>
|
||||||
|
{/* <p className="mb-2.5 text-[#6b7280]">
|
||||||
|
{t('or')}
|
||||||
|
</p> */}
|
||||||
|
|
||||||
|
{fileType === "image" && (
|
||||||
|
<p className="description">
|
||||||
|
{t('image-resolution')}: 100x100 - 10000x10000 {t('pixels')}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
<p className="description">
|
||||||
|
{t('file-format')}: {acceptString}
|
||||||
|
</p>
|
||||||
|
<p className="description">
|
||||||
|
{t('file-size')}: {t('to')} {(maxFileSize / 1024 / 1024)} {t('mb')}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<input
|
||||||
|
ref={fileInputRef}
|
||||||
|
type="file"
|
||||||
|
accept={acceptString}
|
||||||
|
style={{ display: 'none' }}
|
||||||
|
onChange={handleFileInputChange}
|
||||||
|
aria-label="Выбор файла для защиты"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<button
|
||||||
|
className="btn btn-primary"
|
||||||
|
onClick={handleButtonClick}
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
{t('select-files-to-protect')}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{error && (
|
||||||
|
<div className="mt-4 p-3 bg-red-50 border border-red-200 rounded-lg">
|
||||||
|
<p className="text-red-600 font-medium">{error}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{selectedFile && (
|
||||||
|
<div
|
||||||
|
className={`selected-file ${isFileUploaded ? 'done' : ''}`}
|
||||||
|
>
|
||||||
|
<div className="selected-file-file-info">
|
||||||
|
<div>
|
||||||
|
<p className="text-gray-700">
|
||||||
|
<span className="font-medium">
|
||||||
|
{t('file')}:
|
||||||
|
</span> {selectedFile.name}
|
||||||
|
</p>
|
||||||
|
<p className="text-gray-700">
|
||||||
|
<span className="font-medium">
|
||||||
|
{t('size')}:
|
||||||
|
</span> {selectedFile.size}
|
||||||
|
</p>
|
||||||
|
<p className="text-gray-700">
|
||||||
|
<span className="font-medium">{t('cost-of-protection')}:</span> 0
|
||||||
|
</p>
|
||||||
|
<p className="text-gray-700">
|
||||||
|
<span className="font-medium">{t('current-balance')}:</span> 0
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
{isFileUploaded && (
|
||||||
|
<div className="font-medium text-green-600 text-2xl">
|
||||||
|
{t('file-successfully-uploaded')}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{(fileType === 'image' && selectedFile.preview) && (
|
||||||
|
<img
|
||||||
|
src={selectedFile.preview}
|
||||||
|
alt="Предпросмотр загруженного изображения"
|
||||||
|
className="uploaded-image"
|
||||||
|
onError={() => setError('Не удалось загрузить превью изображения')}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="mt-4 flex gap-3 justify-center relative">
|
||||||
|
<button
|
||||||
|
className="btn btn-cancel"
|
||||||
|
onClick={handleClearFile}
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
{isFileUploaded ? t('close') : t('cancel')}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className={`btn btn-confirm ${error || isFileUploaded || uploadId ? 'disabled' : ''}`}
|
||||||
|
onClick={() => {
|
||||||
|
handlerFileUpload(selectedFile);
|
||||||
|
}}
|
||||||
|
type="button"
|
||||||
|
disabled={error || isFileUploaded || uploadId ? true : false}
|
||||||
|
>
|
||||||
|
{t('upload-file')}
|
||||||
|
</button>
|
||||||
|
{uploadProgress !== 0 && (
|
||||||
|
<div
|
||||||
|
className={`absolute top-5 right-5 font-medium ${isFileUploaded ? "text-green-600" : ""}`}
|
||||||
|
>
|
||||||
|
{uploadProgress}%
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -229,6 +229,7 @@ export default function UploadSectionFile({ fileType, allowedExtensions, maxFile
|
|||||||
formData.append('upload_id', response.upload_id);
|
formData.append('upload_id', response.upload_id);
|
||||||
formData.append('chunk_number', chunkIndex.toString());
|
formData.append('chunk_number', chunkIndex.toString());
|
||||||
formData.append('chunk', chunk);
|
formData.append('chunk', chunk);
|
||||||
|
/* formData.append('findSimilar', '0'); */
|
||||||
|
|
||||||
const chunkResponse = await chunkUpload(formData);
|
const chunkResponse = await chunkUpload(formData);
|
||||||
|
|
||||||
|
|||||||
@@ -2759,4 +2759,17 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 300px;
|
||||||
|
gap: 24px;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
max-width: calc(100vw - var(--side-bar-width) - 60px);
|
||||||
|
|
||||||
|
@media (max-width: 440px) {
|
||||||
|
grid-template-columns: auto;
|
||||||
|
max-width: calc(100vw - var(--side-bar-width) - 30px);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@@ -26,7 +26,7 @@
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "search",
|
"name": "search",
|
||||||
"href": "/pages/emptypage",
|
"href": "/pages/search",
|
||||||
"img": "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
|
"img": "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
Reference in New Issue
Block a user