diff --git a/package.json b/package.json index 50ce7a0f..ca44eab3 100755 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ "@emotion/react": "^11.10.5", "@emotion/styled": "^11.10.5", "@frontend/kitui": "^1.0.82", - "@frontend/squzanswerer": "^1.0.44", + "@frontend/squzanswerer": "^1.0.45", "@mui/icons-material": "^5.10.14", "@mui/material": "^5.10.14", "@mui/x-charts": "^6.19.5", diff --git a/src/model/questionTypes/page.ts b/src/model/questionTypes/page.ts index ba6eb261..7c7ee461 100644 --- a/src/model/questionTypes/page.ts +++ b/src/model/questionTypes/page.ts @@ -12,7 +12,7 @@ export interface QuizQuestionPage extends QuizQuestionBase { picture: string; originalPicture: string; useImage: boolean; - video: string; + video: string | null; hint: QuestionHint; rule: PreviewRule; back: string; diff --git a/src/model/questionTypes/result.ts b/src/model/questionTypes/result.ts index 5b084765..16564007 100644 --- a/src/model/questionTypes/result.ts +++ b/src/model/questionTypes/result.ts @@ -1,8 +1,4 @@ -import type { - QuizQuestionBase, - QuestionBranchingRule, - QuestionHint, -} from "./shared"; +import type { QuizQuestionBase, QuestionBranchingRule, QuestionHint } from "./shared"; export interface QuizQuestionResult extends QuizQuestionBase { type: "result"; @@ -10,7 +6,7 @@ export interface QuizQuestionResult extends QuizQuestionBase { id: string; back: string; originalBack: string; - video: string; + video: string | null; innerName: string; text: string; price: [number] | [number, number]; diff --git a/src/pages/Questions/PageOptions/PageOptions.tsx b/src/pages/Questions/PageOptions/PageOptions.tsx index ac9b4b48..d1811a09 100644 --- a/src/pages/Questions/PageOptions/PageOptions.tsx +++ b/src/pages/Questions/PageOptions/PageOptions.tsx @@ -1,18 +1,5 @@ -import { - Box, - Button, - IconButton, - Modal, - Typography, - useMediaQuery, - useTheme, -} from "@mui/material"; -import { - copyQuestion, - deleteQuestion, - deleteQuestionWithTimeout, - updateQuestion, -} from "@root/questions/actions"; +import { Box, Button, IconButton, Modal, Typography, useMediaQuery, useTheme } from "@mui/material"; +import { copyQuestion, deleteQuestion, deleteQuestionWithTimeout, updateQuestion } from "@root/questions/actions"; import CustomTextField from "@ui_kit/CustomTextField"; import { CopyIcon } from "@icons/questionsPage/CopyIcon"; @@ -71,7 +58,7 @@ export default function PageOptions({ disableInput, question }: Props) { @@ -107,16 +94,17 @@ export default function PageOptions({ disableInput, question }: Props) { if (question.content.rule.parentId.length !== 0) { setOpenDelete(true); } else { - deleteQuestionWithTimeout(question.id, () => - DeleteFunction(question.id), - ); + deleteQuestionWithTimeout(question.id, () => DeleteFunction(question.id)); } }} data-cy="delete-question" > - setOpenDelete(false)}> + setOpenDelete(false)} + > - - Вы удаляете вопрос, участвующий в ветвлении. Все его потомки - потеряют данные ветвления. Вы уверены, что хотите удалить - вопрос? + + Вы удаляете вопрос, участвующий в ветвлении. Все его потомки потеряют данные ветвления. Вы уверены, что + хотите удалить вопрос? { - deleteQuestionWithTimeout(question.id, () => - DeleteFunction(question.id), - ); + deleteQuestionWithTimeout(question.id, () => DeleteFunction(question.id)); }} > Подтвердить diff --git a/src/pages/Questions/UploadVideoModal.tsx b/src/pages/Questions/UploadVideoModal.tsx index 0adb6d0a..374c86f2 100644 --- a/src/pages/Questions/UploadVideoModal.tsx +++ b/src/pages/Questions/UploadVideoModal.tsx @@ -1,16 +1,8 @@ -import { - Box, - Button, - ButtonBase, - Modal, - Typography, - useTheme, -} from "@mui/material"; -import SelectableButton from "@ui_kit/SelectableButton"; +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"; @@ -18,18 +10,12 @@ type BackgroundTypeModal = "linkVideo" | "ownVideo"; type HelpQuestionsProps = { open: boolean; onClose: () => void; - video: string; + video: string | null; onUpload: (number: string) => void; }; -export const UploadVideoModal = ({ - open, - onClose, - video, - onUpload, -}: HelpQuestionsProps) => { - const [backgroundTypeModal, setBackgroundTypeModal] = - useState("linkVideo"); +export default function UploadVideoModal({ open, onClose, video, onUpload }: HelpQuestionsProps) { + const [backgroundTypeModal, setBackgroundTypeModal] = useState("linkVideo"); const theme = useTheme(); const handleDrop = (event: DragEvent) => { @@ -42,118 +28,102 @@ export const UploadVideoModal = ({ }; 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мб - - - - - - )} + Готово + - + + 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мб + + + + + )} + ); -}; +} diff --git a/src/pages/Questions/helpQuestions.tsx b/src/pages/Questions/helpQuestions.tsx index ede9b174..c811bccf 100644 --- a/src/pages/Questions/helpQuestions.tsx +++ b/src/pages/Questions/helpQuestions.tsx @@ -5,7 +5,7 @@ import SelectableButton from "@ui_kit/SelectableButton"; import UploadBox from "@ui_kit/UploadBox"; import { memo, useState } from "react"; import UploadIcon from "../../assets/icons/UploadIcon"; -import { UploadVideoModal } from "./UploadVideoModal"; +import UploadVideoModal from "./UploadVideoModal"; type BackgroundType = "text" | "video"; @@ -15,11 +15,7 @@ type HelpQuestionsProps = { hintText: string; }; -const HelpQuestions = memo(function ({ - questionId, - hintVideo, - hintText, -}) { +const HelpQuestions = memo(function ({ questionId, hintVideo, hintText }) { const [open, setOpen] = useState(false); const [backgroundType, setBackgroundType] = useState("text"); @@ -71,15 +67,17 @@ const HelpQuestions = memo(function ({ ) : ( - - Загрузите видео - + Загрузите видео setOpen(true)} sx={{ justifyContent: "flex-start" }} > {hintVideo ? ( -