import { Box, Button, ButtonBase, Modal, Typography, useTheme, } from "@mui/material"; import SelectableButton from "@ui_kit/SelectableButton"; import CustomTextField from "@ui_kit/CustomTextField"; import { useState } from "react"; import UploadIcon from "../../assets/icons/UploadIcon"; import type { DragEvent } from "react"; type BackgroundTypeModal = "linkVideo" | "ownVideo"; type HelpQuestionsProps = { open: boolean; onClose: () => void; video: string; onUpload: (number: string) => void; }; export const UploadVideoModal = ({ open, onClose, video, onUpload, }: HelpQuestionsProps) => { const [backgroundTypeModal, setBackgroundTypeModal] = useState("linkVideo"); const theme = useTheme(); const handleDrop = (event: DragEvent) => { event.preventDefault(); event.stopPropagation(); if (event.dataTransfer.files.length) { onUpload(URL.createObjectURL(event.dataTransfer.files[0])); } }; return ( Видео можно вставить с любого хостинга: YouTube, Vimeo или загрузить собственное setBackgroundTypeModal("linkVideo")} sx={{ maxWidth: "170px", padding: "10px" }} > Ссылка на видео setBackgroundTypeModal("ownVideo")} sx={{ maxWidth: "170px", padding: "10px" }} > Загрузить свое {backgroundTypeModal === "linkVideo" ? ( Ссылка на видео onUpload(target.value || " ")} /> ) : ( Загрузите видео { if (target.files?.length) { onUpload(URL.createObjectURL(target.files[0] || " ")); } }} hidden accept="video/*" multiple type="file" /> ) => event.preventDefault() } onDrop={handleDrop} sx={{ width: "580px", padding: "33px 33px 33px 50px", display: "flex", alignItems: "center", backgroundColor: theme.palette.background.default, border: `1px solid ${theme.palette.grey2.main}`, borderRadius: "8px", gap: "50px", }} > Добавить видео Принимает .mp4 и .mov формат — максимум 100мб )} ); };