130 lines
4.3 KiB
TypeScript
130 lines
4.3 KiB
TypeScript
import { Box, Button, ButtonBase, Dialog, Typography, useTheme } from "@mui/material";
|
||
import CustomTextField from "@ui_kit/CustomTextField";
|
||
import SelectableButton from "@ui_kit/SelectableButton";
|
||
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 | null;
|
||
onUpload: (number: string) => void;
|
||
};
|
||
|
||
export default function UploadVideoModal({ open, onClose, video, onUpload }: HelpQuestionsProps) {
|
||
const [backgroundTypeModal, setBackgroundTypeModal] = useState<BackgroundTypeModal>("linkVideo");
|
||
const theme = useTheme();
|
||
|
||
const handleDrop = (event: DragEvent<HTMLDivElement>) => {
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
|
||
if (event.dataTransfer.files.length) {
|
||
onUpload(URL.createObjectURL(event.dataTransfer.files[0]));
|
||
}
|
||
};
|
||
|
||
return (
|
||
<Dialog
|
||
open={open}
|
||
onClose={onClose}
|
||
PaperProps={{
|
||
sx: {
|
||
maxWidth: "640px",
|
||
borderRadius: "12px",
|
||
boxShadow: 24,
|
||
p: 0,
|
||
overflow: "hidden",
|
||
},
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
padding: "20px",
|
||
background: theme.palette.background.default,
|
||
}}
|
||
>
|
||
<Typography sx={{ color: "#9A9AAF" }}>
|
||
Видео можно вставить с любого хостинга: YouTube, Vimeo или загрузить собственное
|
||
</Typography>
|
||
<Button
|
||
onClick={onClose}
|
||
variant="contained"
|
||
>
|
||
Готово
|
||
</Button>
|
||
</Box>
|
||
<Box sx={{ padding: "20px", gap: "10px", display: "flex" }}>
|
||
<SelectableButton
|
||
isSelected={backgroundTypeModal === "linkVideo"}
|
||
onClick={() => setBackgroundTypeModal("linkVideo")}
|
||
sx={{ maxWidth: "170px", padding: "10px" }}
|
||
>
|
||
Ссылка на видео
|
||
</SelectableButton>
|
||
<SelectableButton
|
||
isSelected={backgroundTypeModal === "ownVideo"}
|
||
onClick={() => setBackgroundTypeModal("ownVideo")}
|
||
sx={{ maxWidth: "170px", padding: "10px" }}
|
||
>
|
||
Загрузить свое
|
||
</SelectableButton>
|
||
</Box>
|
||
{backgroundTypeModal === "linkVideo" ? (
|
||
<Box sx={{ padding: "20px" }}>
|
||
<Typography sx={{ paddingBottom: "15px", fontWeight: "500" }}>Ссылка на видео</Typography>
|
||
<CustomTextField
|
||
placeholder={"http://example.com"}
|
||
value={video || ""}
|
||
onChange={({ target }) => onUpload(target.value || " ")}
|
||
/>
|
||
</Box>
|
||
) : (
|
||
<Box sx={{ padding: "20px" }}>
|
||
<Typography sx={{ paddingBottom: "15px", fontWeight: "500" }}>Загрузите видео</Typography>
|
||
<ButtonBase
|
||
component="label"
|
||
sx={{ justifyContent: "flex-start", width: "100%" }}
|
||
>
|
||
<input
|
||
onChange={({ target }) => {
|
||
if (target.files?.length) {
|
||
onUpload(URL.createObjectURL(target.files[0] || " "));
|
||
}
|
||
}}
|
||
hidden
|
||
accept="video/*"
|
||
multiple
|
||
type="file"
|
||
/>
|
||
<Box
|
||
onDragOver={(event: DragEvent<HTMLDivElement>) => 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",
|
||
}}
|
||
>
|
||
<UploadIcon />
|
||
<Box sx={{ color: "#9A9AAF" }}>
|
||
<Typography sx={{ fontWeight: "500" }}>Добавить видео</Typography>
|
||
<Typography sx={{ fontSize: "16px" }}>Принимает .mp4 и .mov формат — максимум 100мб</Typography>
|
||
</Box>
|
||
</Box>
|
||
</ButtonBase>
|
||
</Box>
|
||
)}
|
||
</Dialog>
|
||
);
|
||
}
|