feat: Add preview_video for sights

2025-07-13 20:26:45 +03:00
parent ced3067915
commit bf117ef048
11 changed files with 437 additions and 38 deletions
--- a/src/widgets/VideoPreviewCard/index.tsx
+++ b/src/widgets/VideoPreviewCard/index.tsx
@@ -0,0 +1,203 @@
+import React, { useRef, useState, DragEvent, useEffect } from "react";
+import { Paper, Box, Typography, Button, Tooltip } from "@mui/material";
+import { X, Info, Plus, Play } from "lucide-react";
+
+import { toast } from "react-toastify";
+
+interface VideoPreviewCardProps {
+  title: string;
+  videoId: string | null | undefined;
+  onVideoClick: () => void;
+  onDeleteVideoClick: () => void;
+  onSelectVideoClick: (file?: File) => void;
+  tooltipText?: string;
+}
+
+export const VideoPreviewCard: React.FC<VideoPreviewCardProps> = ({
+  title,
+  videoId,
+  onVideoClick,
+  onDeleteVideoClick,
+  onSelectVideoClick,
+  tooltipText,
+}) => {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [isDragOver, setIsDragOver] = useState(false);
+  const token = localStorage.getItem("token");
+
+  useEffect(() => {}, [isDragOver]);
+  // --- Click to select file ---
+  const handleZoneClick = () => {
+    // Trigger the hidden file input click
+    fileInputRef.current?.click();
+  };
+
+  const handleFileInputChange = async (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      if (file.type.startsWith("video/")) {
+        // Открываем диалог загрузки медиа с файлом видео
+        onSelectVideoClick(file);
+      } else {
+        toast.error("Пожалуйста, выберите видео файл");
+      }
+    }
+    // Reset the input value so selecting the same file again triggers change
+    event.target.value = "";
+  };
+
+  // --- Drag and Drop Handlers ---
+  const handleDragOver = (event: DragEvent<HTMLDivElement>) => {
+    event.preventDefault(); // Crucial to allow a drop
+    event.stopPropagation();
+    setIsDragOver(true);
+  };
+
+  const handleDragLeave = (event: DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+    setIsDragOver(false);
+  };
+
+  const handleDrop = async (event: DragEvent<HTMLDivElement>) => {
+    event.preventDefault(); // Crucial to allow a drop
+    event.stopPropagation();
+    setIsDragOver(false);
+
+    const files = event.dataTransfer.files;
+    if (files && files.length > 0) {
+      const file = files[0];
+      if (file.type.startsWith("video/")) {
+        // Открываем диалог загрузки медиа с файлом видео
+        onSelectVideoClick(file);
+      } else {
+        toast.error("Пожалуйста, выберите видео файл");
+      }
+    }
+  };
+
+  return (
+    <Paper
+      elevation={2}
+      sx={{
+        padding: 2,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: 1,
+        flex: 1,
+        minWidth: 150,
+      }}
+    >
+      <Box sx={{ display: "flex", alignItems: "center" }}>
+        <Typography variant="subtitle2" gutterBottom sx={{ mb: 0, mr: 0.5 }}>
+          {title}
+        </Typography>
+        {tooltipText && (
+          <Tooltip title={tooltipText}>
+            <Info size={16} color="gray" style={{ cursor: "pointer" }} />
+          </Tooltip>
+        )}
+      </Box>
+      <Box
+        sx={{
+          position: "relative",
+          width: "200px",
+          height: "200px",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          borderRadius: 1,
+          mb: 1,
+          cursor: videoId ? "pointer" : "default",
+        }}
+        onClick={onVideoClick}
+      >
+        {videoId && (
+          <button
+            className="absolute top-2 right-2 z-10"
+            onClick={(e) => {
+              e.stopPropagation();
+              onDeleteVideoClick();
+            }}
+          >
+            <X color="red" />
+          </button>
+        )}
+        {videoId ? (
+          <Box sx={{ position: "relative", width: "100%", height: "100%" }}>
+            <video
+              src={`${
+                import.meta.env.VITE_KRBL_MEDIA
+              }${videoId}/download?token=${token}`}
+              style={{
+                width: "100%",
+                height: "100%",
+                objectFit: "cover",
+                borderRadius: 4,
+              }}
+              muted
+            />
+            <Box
+              sx={{
+                position: "absolute",
+                top: "50%",
+                left: "50%",
+                transform: "translate(-50%, -50%)",
+                backgroundColor: "rgba(0, 0, 0, 0.5)",
+                borderRadius: "50%",
+                width: 40,
+                height: 40,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+              }}
+            >
+              <Play size={20} color="white" />
+            </Box>
+          </Box>
+        ) : (
+          <div className="w-full flex flex-col items-center justify-center gap-3">
+            <div
+              className="flex flex-col p-5 items-center justify-center gap-3"
+              style={{
+                border: "2px dashed #ccc",
+                borderRadius: 1,
+                cursor: "pointer",
+              }}
+              onClick={handleZoneClick} // Click handler for the zone
+              onDragOver={handleDragOver}
+              onDragLeave={handleDragLeave}
+              onDrop={handleDrop}
+            >
+              <p className="text-center">Перетащите файл</p>
+            </div>
+
+            <p>или</p>
+            <Button
+              variant="contained"
+              color="primary"
+              startIcon={<Plus color="white" size={18} />}
+              onClick={(e) => {
+                e.stopPropagation(); // Prevent `handleZoneClick` from firing
+                onSelectVideoClick(); // This button triggers the media selection dialog
+              }}
+            >
+              Выбрать файл
+            </Button>
+            {/* Hidden file input */}
+            <input
+              type="file"
+              ref={fileInputRef}
+              onChange={handleFileInputChange}
+              style={{ display: "none" }}
+              accept="video/*" // Accept only video files
+            />
+          </div>
+        )}
+      </Box>
+    </Paper>
+  );
+};