SQuiz/frontPanel
2
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: drag&drop video

Browse Source
This commit is contained in:
IlyaDoronin 2023-08-15 14:00:45 +03:00
parent f3e2f23a35
commit 1de71c73d2
1 changed files with 21 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/pages/Questions/helpQuestions.tsx
View File

@ -13,27 +13,36 @@ import { useState } from "react";
import UploadIcon from "../../assets/icons/UploadIcon";
import UploadBox from "@ui_kit/UploadBox";
import type { DragEvent } from "react";
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 [open, setOpen] = useState(false);
const [video, setVideo] = useState("");
const [backgroundType, setBackgroundType] = useState<BackgroundType>("text");
const [backgroundTypeModal, setBackgroundTypeModal] =
useState<BackgroundTypeModal>("linkVideo");
const theme = useTheme();
const videoHC = (videoInp: HTMLInputElement) => {
const fileList = videoInp.files;
if (fileList !== null) {
const handleOpen = () => setOpen(true);
const handleClose = () => setOpen(false);
const videoHC = (fileList: FileList | null) => {
if (fileList?.length) {
const file = fileList[0];
setVideo(URL.createObjectURL(file));
handleClose();
}
};
const [video, setVideo] = React.useState("");
const handleDrop = (event: DragEvent<HTMLDivElement>) => {
event.preventDefault();
event.stopPropagation();
videoHC(event.dataTransfer.files);
};
return (
<Box
@ -161,13 +170,17 @@ export default function HelpQuestions() {
sx={{ justifyContent: "flex-start", width: "100%" }}
>
<input
onChange={(event) => videoHC(event.target)}
onChange={(event) => videoHC(event.target.files)}
hidden
accept="video/*"
multiple
type="file"
/>
<Box
onDragOver={(event: DragEvent<HTMLDivElement>) =>
event.preventDefault()
}
onDrop={handleDrop}
sx={{
width: "580px",
padding: "33px 33px 33px 50px",