144 lines
7.4 KiB
TypeScript
144 lines
7.4 KiB
TypeScript
import {Box, ButtonBase, Modal, Typography, useTheme} from "@mui/material";
|
||
import * as React from 'react';
|
||
import SelectableButton from "../../components/CreateQuiz/SelectableButton";
|
||
import CustomTextField from "@ui_kit/CustomTextField";
|
||
import {useState} from "react";
|
||
import UploadIcon from "@icons/UploadIcon";
|
||
import UploadBox from "../../components/CreateQuiz/UploadBox";
|
||
import CustomButton from "../../components/CustomButton";
|
||
|
||
type BackgroundType = "text" | "video";
|
||
type BackgroundTypeModal = "linkVideo" | "ownVideo"
|
||
|
||
export default function HelpQuestions() {
|
||
const [open, setOpen] = React.useState(false);
|
||
const handleOpen = () => setOpen(true);
|
||
const handleClose = () => setOpen(false);
|
||
const [backgroundType, setBackgroundType] = useState<BackgroundType>("text");
|
||
const [backgroundTypeModal, setBackgroundTypeModal] = useState<BackgroundTypeModal>("linkVideo");
|
||
const theme = useTheme()
|
||
|
||
const videoHC = (videoInp:any) => {
|
||
const [file] = videoInp.files
|
||
setVideo(URL.createObjectURL(file))
|
||
handleClose()
|
||
}
|
||
const [video, setVideo] = React.useState("");
|
||
return (
|
||
<Box sx={{padding: '20px', display: 'flex', flexDirection: 'column', gap: '20px'}}>
|
||
<Typography>Подсказка консультанта</Typography>
|
||
<Box sx={{
|
||
display: "flex",
|
||
gap: "10px",
|
||
}}>
|
||
<SelectableButton isSelected={backgroundType === "text"} onClick={() => setBackgroundType("text")}>
|
||
Текст
|
||
</SelectableButton>
|
||
<SelectableButton isSelected={backgroundType === "video"} onClick={() => setBackgroundType("video")}>
|
||
Видео
|
||
</SelectableButton>
|
||
</Box>
|
||
{backgroundType === "text" ?
|
||
<>
|
||
<CustomTextField placeholder={"Текст консультанта"} text={""}/>
|
||
</>
|
||
:
|
||
<Box>
|
||
<Typography sx={{paddingBottom: '15px'}}>Загрузите видео</Typography>
|
||
<ButtonBase onClick={handleOpen} sx={{justifyContent: 'flex-start'}} >
|
||
{video ?
|
||
<video src={video} width="400" controls/>
|
||
:
|
||
<>
|
||
<UploadBox
|
||
icon={<UploadIcon />}
|
||
sx={{
|
||
height: "48px",
|
||
width: "48px",
|
||
}}
|
||
/>
|
||
</>
|
||
}
|
||
</ButtonBase>
|
||
<Modal
|
||
open={open}
|
||
onClose={handleClose}
|
||
aria-labelledby="modal-modal-title"
|
||
aria-describedby="modal-modal-description"
|
||
>
|
||
<Box sx={{position: 'absolute' as 'absolute',
|
||
top: '50%',
|
||
left: '50%',
|
||
transform: 'translate(-50%, -50%)',
|
||
maxWidth: '690px',
|
||
bgcolor: 'background.paper',
|
||
borderRadius: '12px',
|
||
|
||
boxShadow: 24,
|
||
p: 0,}}>
|
||
<Box
|
||
sx={{display: 'flex',
|
||
padding: '20px',
|
||
background: theme.palette.background.default,
|
||
}}
|
||
>
|
||
<Typography>Видео можно вставить с любого хостинга:
|
||
YouTube, Vimeo или загрузить собственное</Typography>
|
||
<CustomButton
|
||
variant="contained"
|
||
sx={{
|
||
backgroundColor: theme.palette.brightPurple.main,
|
||
color: "white",
|
||
width: "auto",
|
||
px: "20px",
|
||
py: "9px",
|
||
}}
|
||
>Готово</CustomButton>
|
||
</Box>
|
||
<Box sx={{padding: '20px', gap: '10px', display: 'flex'}}>
|
||
<SelectableButton isSelected={backgroundTypeModal === "linkVideo"} onClick={() => setBackgroundTypeModal("linkVideo")}>
|
||
Ссылка на видео
|
||
</SelectableButton>
|
||
<SelectableButton isSelected={backgroundTypeModal === "ownVideo"} onClick={() => setBackgroundTypeModal("ownVideo")}>
|
||
Загрузить свое
|
||
</SelectableButton>
|
||
</Box>
|
||
{backgroundTypeModal === "linkVideo" ?
|
||
<Box sx={{padding: '20px'}}>
|
||
<Typography sx={{paddingBottom: '15px'}}>Ссылка на видео</Typography>
|
||
<CustomTextField placeholder={"http://example.com"} text={""}/>
|
||
</Box>
|
||
:
|
||
<Box sx={{padding: '20px'}}>
|
||
<Typography sx={{paddingBottom: '15px'}}>Загрузите видео</Typography>
|
||
<ButtonBase component="label" sx={{justifyContent: 'flex-start'}} >
|
||
<input onChange={event => videoHC(event.target) } hidden accept="video/*" multiple type="file" />
|
||
<Box
|
||
sx={{
|
||
width: '580px',
|
||
padding: '33px',
|
||
display: "flex",
|
||
justifyContent: "space-between",
|
||
alignItems: "center",
|
||
backgroundColor: theme.palette.background.default,
|
||
border: `1px solid ${theme.palette.grey2.main}`,
|
||
borderRadius: "8px",
|
||
}}
|
||
|
||
>
|
||
<UploadIcon />
|
||
<Box>
|
||
<Typography>Добавить видео</Typography>
|
||
<Typography>Принимает .mp4 и .mov формат — максимум 100мб</Typography>
|
||
</Box>
|
||
</Box>
|
||
</ButtonBase>
|
||
</Box>
|
||
}
|
||
</Box>
|
||
</Modal>
|
||
</Box>
|
||
}
|
||
</Box>
|
||
);
|
||
}; |