import { useEffect, useState, useRef } from "react"; import { observer } from "mobx-react-lite"; import { useNavigate, useParams } from "react-router-dom"; import { Box, Button, CircularProgress, FormControl, InputLabel, MenuItem, Paper, Select, TextField, Typography, Alert, Snackbar, } from "@mui/material"; import { Save, ArrowLeft } from "lucide-react"; import { authInstance, mediaStore, MEDIA_TYPE_LABELS } from "@shared"; import { MediaViewer } from "@widgets"; export const MediaEditPage = observer(() => { const { id } = useParams<{ id: string }>(); const navigate = useNavigate(); const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(null); const [success, setSuccess] = useState(false); const fileInputRef = useRef(null); const [newFile, setNewFile] = useState(null); const [uploadDialogOpen, setUploadDialogOpen] = useState(false); // State for the upload dialog const media = id ? mediaStore.media.find((m) => m.id === id) : null; const [mediaName, setMediaName] = useState(media?.media_name ?? ""); const [mediaFilename, setMediaFilename] = useState(media?.filename ?? ""); const [mediaType, setMediaType] = useState(media?.media_type ?? 1); const [availableMediaTypes, setAvailableMediaTypes] = useState([]); useEffect(() => { if (id) { mediaStore.getOneMedia(id); } console.log(newFile); console.log(uploadDialogOpen); }, [id]); useEffect(() => { if (media) { setMediaName(media.media_name); setMediaFilename(media.filename); setMediaType(media.media_type); // Set available media types based on current file extension const extension = media.filename.split(".").pop()?.toLowerCase(); if (extension) { if (["glb", "gltf"].includes(extension)) { setAvailableMediaTypes([6]); // 3D model } else if (["jpg", "jpeg", "png", "gif"].includes(extension)) { setAvailableMediaTypes([1, 3, 4, 5]); // Photo, Icon, Watermark, Panorama } else if (["mp4", "webm", "mov"].includes(extension)) { setAvailableMediaTypes([2]); // Video } } } }, [media]); // const handleDrop = (e: DragEvent) => { // e.preventDefault(); // e.stopPropagation(); // setIsDragging(false); // const files = Array.from(e.dataTransfer.files); // if (files.length > 0) { // setNewFile(files[0]); // setMediaFilename(files[0].name); // setUploadDialogOpen(true); // Open dialog on file drop // } // }; // const handleDragOver = (e: DragEvent) => { // e.preventDefault(); // setIsDragging(true); // }; // const handleDragLeave = () => { // setIsDragging(false); // }; const handleFileSelect = (e: React.ChangeEvent) => { const files = e.target.files; if (files && files.length > 0) { const file = files[0]; setNewFile(file); setMediaFilename(file.name); // Determine media type based on file extension const extension = file.name.split(".").pop()?.toLowerCase(); if (extension) { if (["glb", "gltf"].includes(extension)) { setAvailableMediaTypes([6]); // 3D model setMediaType(6); } else if (["jpg", "jpeg", "png", "gif"].includes(extension)) { setAvailableMediaTypes([1, 3, 4, 5]); // Photo, Icon, Watermark, Panorama setMediaType(1); // Default to Photo } else if (["mp4", "webm", "mov"].includes(extension)) { setAvailableMediaTypes([2]); // Video setMediaType(2); } } setUploadDialogOpen(true); // Open dialog on file selection } }; const handleSave = async () => { if (!id) return; setIsLoading(true); setError(null); try { await authInstance.patch(`/media/${id}`, { media_name: mediaName, filename: mediaFilename, type: mediaType, }); // If a new file was selected, the actual file upload will happen // via the UploadMediaDialog. We just need to make sure the metadata // is updated correctly before or after. // Since the dialog handles the actual upload, we don't call updateMediaFile here. setSuccess(true); handleUploadSuccess(); } catch (err) { setError(err instanceof Error ? err.message : "Failed to save media"); } finally { setIsLoading(false); } }; const handleUploadSuccess = () => { // After successful upload in the dialog, refresh media data if needed if (id) { mediaStore.getOneMedia(id); } setNewFile(null); // Clear the new file state after successful upload setUploadDialogOpen(false); setSuccess(true); }; if (!media && id) { // Only show loading if an ID is present and media is not yet loaded return ( ); } return ( Редактирование медиа setMediaName(e.target.value)} label="Название медиа" disabled={isLoading} /> setMediaFilename(e.target.value)} label="Название файла" disabled={isLoading} /> Тип медиа {/* Only show "Replace file" button if no new file is currently selected */} {error && ( {error} )} {success && ( Медиа успешно сохранено )} setError(null)} > setError(null)}> {error} setSuccess(false)} > setSuccess(false)}> Медиа успешно сохранено ); });