From 4f45f3d4e2a0199f39c3f064cbae03dbe15af40b Mon Sep 17 00:00:00 2001
From: Nastya <nastyab015@yandex.ru>
Date: Fri, 5 Jan 2024 00:42:05 +0300
Subject: [PATCH] 200~touchstart

---
 .../Questions/BranchingMap/hooks/usePopper.ts |  8 +-
 src/pages/ResultPage/cards/ResultCard.tsx     |  4 +-
 src/pages/startPage/StartPageSettings.tsx     |  2 +-
 src/ui_kit/MediaSelectionAndDisplay.tsx       | 89 ++++++++++++++-----
 4 files changed, 75 insertions(+), 28 deletions(-)

diff --git a/src/pages/Questions/BranchingMap/hooks/usePopper.ts b/src/pages/Questions/BranchingMap/hooks/usePopper.ts
index cd9fa3e4..5e6a4bc6 100644
--- a/src/pages/Questions/BranchingMap/hooks/usePopper.ts
+++ b/src/pages/Questions/BranchingMap/hooks/usePopper.ts
@@ -135,7 +135,7 @@ export const usePopper = ({
               setModalQuestionParentContentId(item.id());
               setOpenedModalQuestions(true);
             });
-            layoutElement.addEventListener("ontouchend", () => {
+            layoutElement.addEventListener("touchstart", () => {
               //Узнаём грани, идущие от этой ноды
               setModalQuestionParentContentId(item.id());
               setOpenedModalQuestions(true);
@@ -167,7 +167,7 @@ export const usePopper = ({
             plusElement.addEventListener("mouseup", () => {
               setStartCreate(node.id());
             });
-            plusElement.addEventListener("ontouchend", () => {
+            plusElement.addEventListener("touchstart", () => {
               setStartCreate(node.id());
             });
 
@@ -199,7 +199,7 @@ export const usePopper = ({
             crossElement.addEventListener("mouseup", () => {
               setStartRemove(node.id());
             });
-            crossElement.addEventListener("ontouchend", () => {
+            crossElement.addEventListener("touchstart", () => {
               setStartRemove(node.id());
             });
 
@@ -236,7 +236,7 @@ export const usePopper = ({
               gearElement.addEventListener("mouseup", () => {
                 updateOpenedModalSettingsId(item.id());
               });
-              gearElement.addEventListener("ontouchend", () => {
+              gearElement.addEventListener("touchstart", () => {
                 updateOpenedModalSettingsId(item.id());
               });
 
diff --git a/src/pages/ResultPage/cards/ResultCard.tsx b/src/pages/ResultPage/cards/ResultCard.tsx
index 17db9c9f..fd7d3a3a 100644
--- a/src/pages/ResultPage/cards/ResultCard.tsx
+++ b/src/pages/ResultPage/cards/ResultCard.tsx
@@ -360,7 +360,7 @@ export const ResultCard = ({ resultContract, resultData }: Props) => {
                     border: "1px solid #9A9AAF",
                     background: " #F2F3F7",
                     color: "#9A9AAF",
-                    mb: "30px",
+                  my: "30px",
                   }}
                 >
                   Кнопка +
@@ -368,7 +368,7 @@ export const ResultCard = ({ resultContract, resultData }: Props) => {
               ) : (
                 <Box
                   sx={{
-                    mb: "30px",
+                    my: "30px",
                   }}
                 >
                   <Box>
diff --git a/src/pages/startPage/StartPageSettings.tsx b/src/pages/startPage/StartPageSettings.tsx
index 7c962837..625ec00e 100755
--- a/src/pages/startPage/StartPageSettings.tsx
+++ b/src/pages/startPage/StartPageSettings.tsx
@@ -6,13 +6,13 @@ import ArrowLeft from "@icons/ArrowLeftSP";
 import LayoutCenteredIcon from "@icons/LayoutCenteredIcon";
 import LayoutExpandedIcon from "@icons/LayoutExpandedIcon";
 import LayoutStandartIcon from "@icons/LayoutStandartIcon";
-import UploadIcon from "../../assets/icons/UploadIcon";
 
 import MobilePhoneIcon from "@icons/MobilePhoneIcon";
 import { QuizStartpageType } from "@model/quizSettings";
 import InfoIcon from "@icons/InfoIcon";
 
 import UploadBox from "@ui_kit/UploadBox";
+import UploadIcon from "../../assets/icons/UploadIcon";
 
 import {
   Box,
diff --git a/src/ui_kit/MediaSelectionAndDisplay.tsx b/src/ui_kit/MediaSelectionAndDisplay.tsx
index 4f58f778..ee8d39db 100644
--- a/src/ui_kit/MediaSelectionAndDisplay.tsx
+++ b/src/ui_kit/MediaSelectionAndDisplay.tsx
@@ -1,5 +1,5 @@
 import { FC } from "react";
-import { Box, Button } from "@mui/material";
+import { Box, Button, ButtonBase, Tooltip, Typography, useTheme } from "@mui/material";
 import CustomTextField from "./CustomTextField";
 import { updateQuestion, uploadQuestionImage } from "@root/questions/actions";
 import { CropModal, useCropModalState } from "@ui_kit/Modal/CropModal";
@@ -9,6 +9,9 @@ import { UploadImageModal } from "../pages/Questions/UploadImage/UploadImageModa
 import { useDisclosure } from "../utils/useDisclosure";
 import { useCurrentQuiz } from "../stores/quizes/hooks";
 import { AnyTypedQuizQuestion } from "@model/questionTypes/shared";
+import UploadBox from "@ui_kit/UploadBox";
+import UploadIcon from "@icons/UploadIcon";
+import InfoIcon from "@icons/InfoIcon";
 
 interface Iprops {
   resultData: AnyTypedQuizQuestion;
@@ -16,6 +19,7 @@ interface Iprops {
 
 export const MediaSelectionAndDisplay: FC<Iprops> = ({ resultData }) => {
   const quizQid = useCurrentQuiz()?.qid;
+  const theme = useTheme()
   const {
     isCropModalOpen,
     openCropModal,
@@ -26,7 +30,7 @@ export const MediaSelectionAndDisplay: FC<Iprops> = ({ resultData }) => {
   } = useCropModalState();
   const [isImageUploadOpen, openImageUploadModal, closeImageUploadModal] =
     useDisclosure();
-
+  console.log(resultData)
   async function handleImageUpload(file: File) {
     const url = await uploadQuestionImage(
       resultData.id,
@@ -149,25 +153,68 @@ export const MediaSelectionAndDisplay: FC<Iprops> = ({ resultData }) => {
         </Box>
       )}
       {!resultData.content.useImage && (
-        <Box
-          sx={{
-            cursor: "pointer",
-            display: "flex",
-            alignItems: "center",
-            gap: "20px",
-            mb: "30px",
-          }}
-        >
-          <CustomTextField
-            placeholder="URL видео"
-            text={resultData.content.video ?? ""}
-            onChange={(e) =>
-              updateQuestion(resultData.id, (q) => {
-                q.content.video = e.target.value;
-              })
-            }
-          />
-        </Box>
+        <>
+          <Box
+            sx={{
+              display: "flex",
+              alignItems: "center",
+              gap: "7px",
+              mt: "20px",
+              mb: "14px",
+            }}
+          >
+            <Typography
+              sx={{ fontWeight: 500, color: theme.palette.grey3.main }}
+            >
+              Добавить видео
+            </Typography>
+            <Tooltip title="Можно загрузить видео." placement="top">
+              <Box>
+                <InfoIcon />
+              </Box>
+            </Tooltip>
+          </Box>
+          <ButtonBase
+            component="label"
+            sx={{
+              justifyContent: "center",
+              height: "48px",
+              width: "48px",
+              display: "flex",
+              alignItems: "center",
+              my: "20px"
+            }}
+          >
+            <input
+              onChange={(event) => {
+                const file = event.target.files?.[0];
+                if (file) {
+                  uploadQuestionImage(
+                    resultData.id,
+                    quizQid,
+                    file,
+                    (question, url) => {
+                      question.content.video = url;
+                    },
+                  );
+                }
+
+              }}
+              hidden
+              accept=".mp4"
+              multiple
+              type="file"
+            />
+            <UploadBox
+              icon={<UploadIcon />}
+              sx={{
+                height: "48px",
+                width: "48px",
+              }}
+            />
+          </ButtonBase>
+          {resultData.content.video ? <video src={resultData.content.video} width="400" controls /> : null}
+        </>
       )}
     </Box>
   );