From ef389f97b1df4908af1b05468b15be6fa73ab3be Mon Sep 17 00:00:00 2001
From: nflnkr <molohov.eugeny@yandex.ru>
Date: Fri, 8 Dec 2023 14:57:11 +0300
Subject: [PATCH 1/5] remove edit modal from favicon dropzone

---
 src/model/quizSettings.ts                 |   2 -
 src/pages/startPage/FaviconDropZone.tsx   | 125 ++++++++++++++++++++++
 src/pages/startPage/StartPageSettings.tsx |  53 +--------
 3 files changed, 129 insertions(+), 51 deletions(-)
 create mode 100644 src/pages/startPage/FaviconDropZone.tsx

diff --git a/src/model/quizSettings.ts b/src/model/quizSettings.ts
index c2a84ffa..510438de 100644
--- a/src/model/quizSettings.ts
+++ b/src/model/quizSettings.ts
@@ -38,7 +38,6 @@ export interface QuizConfig {
         button: string;
         position: QuizStartpageAlignType;
         favIcon: string | null;
-        originalFavIcon: string | null;
         logo: string | null;
         originalLogo: string | null;
         background: {
@@ -72,7 +71,6 @@ export const defaultQuizConfig: QuizConfig = {
         button: "",
         position: "left",
         favIcon: null,
-        originalFavIcon: null,
         logo: null,
         originalLogo: null,
         background: {
diff --git a/src/pages/startPage/FaviconDropZone.tsx b/src/pages/startPage/FaviconDropZone.tsx
new file mode 100644
index 00000000..c37ae46f
--- /dev/null
+++ b/src/pages/startPage/FaviconDropZone.tsx
@@ -0,0 +1,125 @@
+import UploadIcon from "@icons/UploadIcon";
+import { Box, ButtonBase, Typography, useTheme } from "@mui/material";
+import { useCurrentQuiz } from "@root/quizes/hooks";
+import { enqueueSnackbar } from "notistack";
+import { useState } from "react";
+import { UploadImageModal } from "../../pages/Questions/UploadImage/UploadImageModal";
+import { useDisclosure } from "../../utils/useDisclosure";
+
+
+const allowedFileTypes = ["image/png", "image/jpeg", "image/gif"];
+
+interface Props {
+    imageUrl: string | null;
+    onImageUploadClick: (image: Blob) => void;
+    onDeleteClick: () => void;
+}
+
+export default function FaviconDropZone({ imageUrl, onImageUploadClick, onDeleteClick }: Props) {
+    const theme = useTheme();
+    const quiz = useCurrentQuiz();
+    const [isDropReady, setIsDropReady] = useState<boolean>(false);
+    const [isImageUploadOpen, openImageUploadModal, closeImageUploadModal] = useDisclosure();
+
+    if (!quiz) return null; // TODO throw and catch with error boundary 
+
+    async function handleImageUpload(file: File) {
+        if (file.size > 5 * 2 ** 20) return enqueueSnackbar("Размер картинки слишком велик");
+        if (!allowedFileTypes.includes(file.type)) return enqueueSnackbar("Допустимые форматы изображений: png, jpeg, gif");
+
+        onImageUploadClick(file);
+        closeImageUploadModal();
+    }
+
+    const onDrop = (event: React.DragEvent<HTMLDivElement>) => {
+        event.preventDefault();
+        setIsDropReady(false);
+
+        const file = event.dataTransfer.files[0];
+        if (!file || imageUrl) return;
+
+        handleImageUpload(file);
+    };
+
+    return (
+        <Box sx={{
+            display: "flex",
+            gap: "10px",
+        }}>
+            <UploadImageModal
+                isOpen={isImageUploadOpen}
+                onClose={closeImageUploadModal}
+                handleImageChange={handleImageUpload}
+            />
+            <Box
+                onDragEnter={() => !imageUrl && setIsDropReady(true)}
+                onDragExit={() => setIsDropReady(false)}
+                onDragOver={e => e.preventDefault()}
+                onDrop={onDrop}
+                sx={{
+                    width: "48px",
+                    height: "48px",
+                    backgroundColor: theme.palette.background.default,
+                    border: `1px solid ${isDropReady ? "red" : theme.palette.grey2.main}`,
+                    borderRadius: "8px",
+                }}>
+                <ButtonBase
+                    onClick={imageUrl ? undefined : openImageUploadModal}
+                    sx={{
+                        width: "100%",
+                        height: "100%",
+                        display: "flex",
+                        justifyContent: "center",
+                        alignItems: "center",
+                        borderRadius: "8px",
+                        overflow: "hidden",
+                    }}
+                >
+                    {imageUrl ?
+                        <img
+                            src={imageUrl}
+                            style={{
+                                width: "100%",
+                                height: "100%",
+                                objectFit: "scale-down",
+                            }}
+                        />
+                        :
+                        <UploadIcon />
+                    }
+                </ButtonBase>
+            </Box>
+            <Box sx={{
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "start",
+            }}>
+                {imageUrl &&
+                    <ButtonBase onClick={onDeleteClick}>
+                        <Typography
+                            sx={{
+                                color: theme.palette.orange.main,
+                                fontSize: "16px",
+                                lineHeight: "19px",
+                                textDecoration: "underline",
+                            }}
+                        >
+                            Удалить
+                        </Typography>
+                    </ButtonBase>
+                }
+                <Typography
+                    sx={{
+                        color: theme.palette.orange.main,
+                        fontSize: "16px",
+                        lineHeight: "19px",
+                        textDecoration: "underline",
+                        mt: "auto",
+                    }}
+                >
+                    5 MB максимум
+                </Typography>
+            </Box>
+        </Box>
+    );
+};
diff --git a/src/pages/startPage/StartPageSettings.tsx b/src/pages/startPage/StartPageSettings.tsx
index e51ae8a0..e77be9b4 100755
--- a/src/pages/startPage/StartPageSettings.tsx
+++ b/src/pages/startPage/StartPageSettings.tsx
@@ -37,6 +37,7 @@ import SelectableIconButton from "./SelectableIconButton";
 import { DropZone } from "./dropZone";
 import Extra from "./extra";
 import { resizeFavIcon } from "@ui_kit/reactImageFileResizer";
+import FaviconDropZone from "./FaviconDropZone";
 
 
 const designTypes = [
@@ -86,19 +87,9 @@ export default function StartPageSettings() {
     if (!quiz) return null; // TODO throw and catch with error boundary
 
     const favIconDropZoneElement = (
-        <DropZone
-            sx={{ height: "48px", width: "48px" }}
-            deleteIconSx={{ right: -40, top: -10 }}
+        <FaviconDropZone
             imageUrl={quiz.config.startpage.favIcon}
-            originalImageUrl={quiz.config.startpage.originalFavIcon}
             onImageUploadClick={async file => {
-                const resizedImage = await resizeFavIcon(file);
-                uploadQuizImage(quiz.id, resizedImage, (quiz, url) => {
-                    quiz.config.startpage.favIcon = url;
-                    quiz.config.startpage.originalFavIcon = url;
-                });
-            }}
-            onImageSaveClick={async file => {
                 const resizedImage = await resizeFavIcon(file);
                 uploadQuizImage(quiz.id, resizedImage, (quiz, url) => {
                     quiz.config.startpage.favIcon = url;
@@ -613,25 +604,7 @@ export default function StartPageSettings() {
                                 >
                                     Favicon
                                 </Typography>
-                                <Box
-                                    sx={{
-                                        display: "flex",
-                                        alignItems: "end",
-                                        gap: "10px",
-                                    }}
-                                >
-                                    {favIconDropZoneElement}
-                                    <Typography
-                                        sx={{
-                                            color: theme.palette.orange.main,
-                                            fontSize: "16px",
-                                            lineHeight: "19px",
-                                            textDecoration: "underline",
-                                        }}
-                                    >
-                                        5 MB максимум
-                                    </Typography>
-                                </Box>
+                                {favIconDropZoneElement}
                             </>
                         )}
                     </Box>
@@ -695,25 +668,7 @@ export default function StartPageSettings() {
                             >
                                 Favicon
                             </Typography>
-                            <Box
-                                sx={{
-                                    display: "flex",
-                                    alignItems: "end",
-                                    gap: "10px",
-                                }}
-                            >
-                                {favIconDropZoneElement}
-                                <Typography
-                                    sx={{
-                                        color: theme.palette.orange.main,
-                                        fontSize: "16px",
-                                        lineHeight: "19px",
-                                        textDecoration: "underline",
-                                    }}
-                                >
-                                    5 MB максимум
-                                </Typography>
-                            </Box>
+                            {favIconDropZoneElement}
                         </>
                     )}
                     {(!isSmallMonitor || (isSmallMonitor && formState === "content")) && (

From a5e76a20eaff6057c47fdc4960486c1761c6135a Mon Sep 17 00:00:00 2001
From: nflnkr <molohov.eugeny@yandex.ru>
Date: Fri, 8 Dec 2023 15:22:52 +0300
Subject: [PATCH 2/5] use favicon on quiz view page

---
 src/pages/ViewPublicationPage/index.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/pages/ViewPublicationPage/index.tsx b/src/pages/ViewPublicationPage/index.tsx
index d14ca886..e1212e42 100644
--- a/src/pages/ViewPublicationPage/index.tsx
+++ b/src/pages/ViewPublicationPage/index.tsx
@@ -1,4 +1,4 @@
-import { useLayoutEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { Box } from "@mui/material";
 
 import { StartPageViewPublication } from "./StartPageViewPublication";
@@ -13,6 +13,13 @@ export const ViewPage = () => {
   const { questions } = useQuestions();
   const [visualStartPage, setVisualStartPage] = useState<boolean>(!quiz?.config.noStartPage);
 
+  useEffect(() => {
+    const link = document.querySelector('link[rel="icon"]');
+
+    if (link && quiz?.config.startpage.favIcon) {
+      link.setAttribute("href", quiz.config.startpage.favIcon);
+    }
+  }, [quiz?.config.startpage.favIcon]);
 
   const filteredQuestions = questions.filter(
     ({ type }) => type

From 6fb6b7dae3f810d789f51c3c0e8be176e6e49aa7 Mon Sep 17 00:00:00 2001
From: nflnkr <molohov.eugeny@yandex.ru>
Date: Fri, 8 Dec 2023 16:36:00 +0300
Subject: [PATCH 3/5] save order of questions

---
 .../DraggableList/QuestionPageCard.tsx        | 48 +++++-----
 src/stores/questions/actions.ts               | 96 ++++++++++++-------
 2 files changed, 86 insertions(+), 58 deletions(-)

diff --git a/src/pages/Questions/DraggableList/QuestionPageCard.tsx b/src/pages/Questions/DraggableList/QuestionPageCard.tsx
index 1a64c47b..4d167b4f 100644
--- a/src/pages/Questions/DraggableList/QuestionPageCard.tsx
+++ b/src/pages/Questions/DraggableList/QuestionPageCard.tsx
@@ -39,7 +39,7 @@ import SwitchQuestionsPage from "../SwitchQuestionsPage";
 import { ChooseAnswerModal } from "./ChooseAnswerModal";
 import TypeQuestions from "../TypeQuestions";
 import { QuestionType } from "@model/question/question";
-import { useCurrentQuiz } from "@root/quizes/hooks"
+import { useCurrentQuiz } from "@root/quizes/hooks";
 
 interface Props {
     question: AnyTypedQuizQuestion | UntypedQuizQuestion;
@@ -98,7 +98,7 @@ export default function QuestionsPageCard({ question, draggableProps, isDragging
                         <TextField
                             defaultValue={question.title}
                             placeholder={"Заголовок вопроса"}
-                            onChange={({ target }: { target: HTMLInputElement }) => setTitle(target.value)}
+                            onChange={({ target }: { target: HTMLInputElement; }) => setTitle(target.value)}
                             InputProps={{
                                 startAdornment: (
                                     <Box>
@@ -238,7 +238,7 @@ export default function QuestionsPageCard({ question, draggableProps, isDragging
                                         margin: "0 5px 0 10px",
                                     }}
                                     onClick={() => { // TODO
-                                         const removedId = question.id;
+                                        const removedId = question.id;
                                         // if (question.deleteTimeoutId) {
                                         //     clearTimeout(question.deleteTimeoutId);
                                         // }
@@ -264,26 +264,28 @@ export default function QuestionsPageCard({ question, draggableProps, isDragging
                                 </IconButton>
                             </Box>
                         )}
-                        <Box
-                            style={{
-                                display: "flex",
-                                alignItems: "center",
-                                justifyContent: "center",
-                                height: "30px",
-                                width: "30px",
-                                marginLeft: "3px",
-                                borderRadius: "50%",
-                                fontSize: "16px",
-                                color: question.expanded
-                                    ? theme.palette.brightPurple.main
-                                    : "#FFF",
-                                background: question.expanded
-                                    ? "#EEE4FC"
-                                    : theme.palette.brightPurple.main,
-                            }}
-                        >
-                            {index + 1}
-                        </Box>
+                        {question.type !== null &&
+                            <Box
+                                style={{
+                                    display: "flex",
+                                    alignItems: "center",
+                                    justifyContent: "center",
+                                    height: "30px",
+                                    width: "30px",
+                                    marginLeft: "3px",
+                                    borderRadius: "50%",
+                                    fontSize: "16px",
+                                    color: question.expanded
+                                        ? theme.palette.brightPurple.main
+                                        : "#FFF",
+                                    background: question.expanded
+                                        ? "#EEE4FC"
+                                        : theme.palette.brightPurple.main,
+                                }}
+                            >
+                                {question.page + 1}
+                            </Box>
+                        }
                         <IconButton
                             disableRipple
                             sx={{
diff --git a/src/stores/questions/actions.ts b/src/stores/questions/actions.ts
index c552ac83..35708313 100644
--- a/src/stores/questions/actions.ts
+++ b/src/stores/questions/actions.ts
@@ -4,14 +4,13 @@ import { devlog } from "@frontend/kitui";
 import { questionToEditQuestionRequest } from "@model/question/edit";
 import { QuestionType, RawQuestion, rawQuestionToQuestion } from "@model/question/question";
 import { AnyTypedQuizQuestion, QuestionVariant, UntypedQuizQuestion, createQuestionVariant } from "@model/questionTypes/shared";
-import { defaultQuestionByType } from "../../constants/default";
+import { updateRootContentId } from "@root/quizes/actions";
 import { produce } from "immer";
 import { nanoid } from "nanoid";
 import { enqueueSnackbar } from "notistack";
+import { defaultQuestionByType } from "../../constants/default";
 import { isAxiosCanceledError } from "../../utils/isAxiosCanceledError";
 import { RequestQueue } from "../../utils/requestQueue";
-import { updateRootContentId } from "@root/quizes/actions"
-import { useCurrentQuiz } from "@root/quizes/hooks"
 import { QuestionsStore, useQuestionsStore } from "./store";
 
 
@@ -85,6 +84,18 @@ const setQuestionBackendId = (questionId: string, backendId: number) => setProdu
     backendId,
 });
 
+const updateQuestionOrders = () => {
+    const questions = useQuestionsStore.getState().questions.filter(
+        (question): question is AnyTypedQuizQuestion => question.type !== null
+    );
+
+    questions.forEach((question, index) => {
+        updateQuestion(question.id, question => {
+            question.page = index;
+        }, true);
+    });
+};
+
 export const reorderQuestions = (
     sourceIndex: number,
     destinationIndex: number,
@@ -99,6 +110,8 @@ export const reorderQuestions = (
         sourceIndex,
         destinationIndex,
     });
+
+    updateQuestionOrders();
 };
 
 export const toggleExpandQuestion = (questionId: string) => setProducedState(state => {
@@ -123,6 +136,7 @@ let requestTimeoutId: ReturnType<typeof setTimeout>;
 export const updateQuestion = (
     questionId: string,
     updateFn: (question: AnyTypedQuizQuestion) => void,
+    skipQueue = false,
 ) => {
     setProducedState(state => {
         const question = state.questions.find(q => q.id === questionId) || state.questions.find(q => q.type !== null && q.content.id === questionId);
@@ -137,21 +151,31 @@ export const updateQuestion = (
     });
 
     // clearTimeout(requestTimeoutId);
-    // requestTimeoutId = setTimeout(() => {
-    requestQueue.enqueue(async () => {
+
+    const request = async () => {
         const q = useQuestionsStore.getState().questions.find(q => q.id === questionId) || useQuestionsStore.getState().questions.find(q => q.type !== null && q.content.id === questionId);
         if (!q) return;
         if (q.type === null) throw new Error("Cannot send update request for untyped question");
 
-        const response = await questionApi.edit(questionToEditQuestionRequest(q));
+        try {
+            const response = await questionApi.edit(questionToEditQuestionRequest(q));
 
-        setQuestionBackendId(questionId, response.updated);
-    }).catch(error => {
-        if (isAxiosCanceledError(error)) return;
+            setQuestionBackendId(questionId, response.updated);
+        } catch (error) {
+            if (isAxiosCanceledError(error)) return;
 
-        devlog("Error editing question", { error, questionId });
-        enqueueSnackbar("Не удалось сохранить вопрос");
-    });
+            devlog("Error editing question", { error, questionId });
+            enqueueSnackbar("Не удалось сохранить вопрос");
+        }
+    };
+
+    if (skipQueue) {
+        request();
+        return;
+    }
+
+    // requestTimeoutId = setTimeout(() => {
+    requestQueue.enqueue(request);
     // }, REQUEST_DEBOUNCE);
 };
 
@@ -261,13 +285,13 @@ export const changeQuestionType = (
     type: QuestionType,
 ) => {
     updateQuestion(questionId, question => {
-        const oldId = question.content.id
-        const oldRule = question.content.rule
-        oldRule.main = []
+        const oldId = question.content.id;
+        const oldRule = question.content.rule;
+        oldRule.main = [];
         question.type = type;
         question.content = defaultQuestionByType[type].content;
-        question.content.id = oldId
-        question.content.rule = oldRule
+        question.content.id = oldId;
+        question.content.rule = oldRule;
     });
 };
 
@@ -275,7 +299,8 @@ export const createTypedQuestion = async (
     questionId: string,
     type: QuestionType,
 ) => requestQueue.enqueue(async () => {
-    const question = useQuestionsStore.getState().questions.find(q => q.id === questionId);
+    const questions = useQuestionsStore.getState().questions;
+    const question = questions.find(q => q.id === questionId);
     if (!question) return;
     if (question.type !== null) throw new Error("Cannot upgrade already typed question");
 
@@ -285,7 +310,7 @@ export const createTypedQuestion = async (
             type,
             title: question.title,
             description: question.description,
-            page: 0,
+            page: questions.length,
             required: true,
             content: JSON.stringify(defaultQuestionByType[type].content),
         });
@@ -320,8 +345,8 @@ export const deleteQuestion = async (questionId: string, quizId: string) => requ
     try {
         await questionApi.delete(question.backendId);
         if (question.content.rule.parentId === "root") { //удалить из стора root и очистить rule всем вопросам
-            updateRootContentId(quizId, "")
-            clearRoleForAll()
+            updateRootContentId(quizId, "");
+            clearRoleForAll();
         }
 
         removeQuestion(questionId);
@@ -338,8 +363,7 @@ export const copyQuestion = async (questionId: string, quizId: number) => reques
     const frontId = nanoid();
     if (question.type === null) {
         const copiedQuestion = structuredClone(question);
-        copiedQuestion.id = frontId
-        copiedQuestion.content.id = frontId
+        copiedQuestion.id = frontId;
 
         setProducedState(state => {
             state.questions.push(copiedQuestion);
@@ -357,9 +381,9 @@ export const copyQuestion = async (questionId: string, quizId: number) => reques
 
         const copiedQuestion = structuredClone(question);
         copiedQuestion.backendId = newQuestionId;
-        copiedQuestion.id = frontId
-        copiedQuestion.content.id = frontId
-        copiedQuestion.content.rule = { main: [], parentId: "", default: "" }
+        copiedQuestion.id = frontId;
+        copiedQuestion.content.id = frontId;
+        copiedQuestion.content.rule = { main: [], parentId: "", default: "" };
 
         setProducedState(state => {
             state.questions.push(copiedQuestion);
@@ -368,6 +392,8 @@ export const copyQuestion = async (questionId: string, quizId: number) => reques
             questionId,
             quizId,
         });
+
+        updateQuestionOrders();
     } catch (error) {
         devlog("Error copying question", error);
         enqueueSnackbar("Не удалось скопировать вопрос");
@@ -394,7 +420,7 @@ export const getQuestionByContentId = (questionContentId: string | null) => {
     if (questionContentId === null) return null;
     return useQuestionsStore.getState().questions.find(q => {
         if (q.type === null) return false;
-        
+
         return (q.content.id === questionContentId);
     }) || null;
 };
@@ -402,19 +428,19 @@ export const getQuestionByContentId = (questionContentId: string | null) => {
 export const updateOpenedModalSettingsId = (id?: string) => useQuestionsStore.setState({ openedModalSettingsId: id ? id : null });
 export const updateDragQuestionContentId = (contentId?: string) => {
     useQuestionsStore.setState({ dragQuestionContentId: contentId ? contentId : null });
-}
+};
 
 export const clearRoleForAll = () => {
-    const { questions } = useQuestionsStore.getState()
+    const { questions } = useQuestionsStore.getState();
     questions.forEach(question => {
         if (question.type !== null && (question.content.rule.main.length > 0 || question.content.rule.default.length > 0 || question.content.rule.parentId.length > 0)) {
             updateQuestion(question.content.id, question => {
-                question.content.rule.parentId = ""
-                question.content.rule.main = []
-                question.content.rule.default = ""
-            })
+                question.content.rule.parentId = "";
+                question.content.rule.main = [];
+                question.content.rule.default = "";
+            });
         }
     });
-}
+};
 
-export const updateOpenBranchingPanel = (value: boolean) => useQuestionsStore.setState({openBranchingPanel: !value});
+export const updateOpenBranchingPanel = (value: boolean) => useQuestionsStore.setState({ openBranchingPanel: !value });

From 1bbfe804d3cc842b32ae4e664b7bebbcdd6a1b4c Mon Sep 17 00:00:00 2001
From: nflnkr <molohov.eugeny@yandex.ru>
Date: Fri, 8 Dec 2023 19:23:06 +0300
Subject: [PATCH 4/5] add quiz startpage video iframe

---
 src/pages/startPage/StartPageSettings.tsx     | 80 ++++---------------
 src/stores/quizes/actions.ts                  |  2 +-
 .../StartPagePreview/QuizPreviewLayout.tsx    | 33 +++-----
 .../StartPagePreview/YoutubeEmbedIframe.tsx   | 34 ++++++++
 4 files changed, 64 insertions(+), 85 deletions(-)
 create mode 100644 src/ui_kit/StartPagePreview/YoutubeEmbedIframe.tsx

diff --git a/src/pages/startPage/StartPageSettings.tsx b/src/pages/startPage/StartPageSettings.tsx
index e77be9b4..c1b0d330 100755
--- a/src/pages/startPage/StartPageSettings.tsx
+++ b/src/pages/startPage/StartPageSettings.tsx
@@ -2,7 +2,6 @@ import AlignCenterIcon from "@icons/AlignCenterIcon";
 import AlignLeftIcon from "@icons/AlignLeftIcon";
 import AlignRightIcon from "@icons/AlignRightIcon";
 import ArrowDown from "@icons/ArrowDownIcon";
-import InfoIcon from "@icons/InfoIcon";
 import LayoutCenteredIcon from "@icons/LayoutCenteredIcon";
 import LayoutExpandedIcon from "@icons/LayoutExpandedIcon";
 import LayoutStandartIcon from "@icons/LayoutStandartIcon";
@@ -11,16 +10,14 @@ import { QuizStartpageType } from "@model/quizSettings";
 import {
     Box,
     Button,
-    ButtonBase,
     Checkbox,
     FormControl,
     FormControlLabel,
     MenuItem,
     Select,
-    Tooltip,
     Typography,
     useMediaQuery,
-    useTheme,
+    useTheme
 } from "@mui/material";
 import { incrementCurrentStep, updateQuiz, uploadQuizImage } from "@root/quizes/actions";
 import { useCurrentQuiz } from "@root/quizes/hooks";
@@ -28,16 +25,14 @@ import CustomCheckbox from "@ui_kit/CustomCheckbox";
 import CustomTextField from "@ui_kit/CustomTextField";
 import SelectableButton from "@ui_kit/SelectableButton";
 import { StartPagePreview } from "@ui_kit/StartPagePreview";
-import UploadBox from "@ui_kit/UploadBox";
+import { resizeFavIcon } from "@ui_kit/reactImageFileResizer";
 import { useState } from "react";
 import { createPortal } from "react-dom";
-import UploadIcon from "../../assets/icons/UploadIcon";
+import FaviconDropZone from "./FaviconDropZone";
 import ModalSizeImage from "./ModalSizeImage";
 import SelectableIconButton from "./SelectableIconButton";
 import { DropZone } from "./dropZone";
 import Extra from "./extra";
-import { resizeFavIcon } from "@ui_kit/reactImageFileResizer";
-import FaviconDropZone from "./FaviconDropZone";
 
 
 const designTypes = [
@@ -66,25 +61,15 @@ export default function StartPageSettings() {
     const isTablet = useMediaQuery(theme.breakpoints.down(950));
     const quiz = useCurrentQuiz();
     const [formState, setFormState] = useState<"design" | "content">("design");
-
-    const designType = quiz?.config?.startpageType;
-
-    const videoHC = (videoInp: HTMLInputElement) => {
-        const file = videoInp.files?.[0];
-
-        if (file) {
-            setVideo(URL.createObjectURL(file));
-        }
-    };
-
-    const [video, setVideo] = useState("");
-
     const [mobileVersion, setMobileVersion] = useState(false);
+
+    if (!quiz) return null; // TODO throw and catch with error boundary
+    
     const MobileVersionHC = (bool: boolean) => {
         setMobileVersion(bool);
     };
-
-    if (!quiz) return null; // TODO throw and catch with error boundary
+    
+    const designType = quiz?.config?.startpageType;
 
     const favIconDropZoneElement = (
         <FaviconDropZone
@@ -420,49 +405,16 @@ export default function StartPageSettings() {
                             sx={{
                                 display: quiz.config.startpage.background.type === "image" ? "none" : "flex",
                                 flexDirection: "column",
+                                mt: "20px",
                             }}
                         >
-                            <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: "flex-start" }}
-                            >
-                                <input
-                                    onChange={(event) => videoHC(event.target)}
-                                    hidden
-                                    accept=".mp4"
-                                    multiple
-                                    type="file"
-                                />
-                                <UploadBox
-                                    icon={<UploadIcon />}
-                                    sx={{
-                                        height: "48px",
-                                        width: "48px",
-                                        marginBottom: "20px",
-                                    }}
-                                />
-                            </ButtonBase>
-                            {video ? <video src={video} width="400" controls /> : null}
+                            <CustomTextField
+                                placeholder="URL видео"
+                                text={quiz.config.startpage.background.video ?? ""}
+                                onChange={e => updateQuiz(quiz.id, quiz => {
+                                    quiz.config.startpage.background.video = e.target.value;
+                                })}
+                            />
                             <Typography
                                 sx={{
                                     fontWeight: 500,
diff --git a/src/stores/quizes/actions.ts b/src/stores/quizes/actions.ts
index 2bf90a90..e0367bfd 100644
--- a/src/stores/quizes/actions.ts
+++ b/src/stores/quizes/actions.ts
@@ -107,7 +107,7 @@ const REQUEST_DEBOUNCE = 200;
 const requestQueue = new RequestQueue();
 let requestTimeoutId: ReturnType<typeof setTimeout>;
 
-export const updateQuiz = async (
+export const updateQuiz = (
     quizId: string | null | undefined,
     updateFn: (quiz: Quiz) => void,
 ) => {
diff --git a/src/ui_kit/StartPagePreview/QuizPreviewLayout.tsx b/src/ui_kit/StartPagePreview/QuizPreviewLayout.tsx
index cc1eb167..bc9b9ee3 100644
--- a/src/ui_kit/StartPagePreview/QuizPreviewLayout.tsx
+++ b/src/ui_kit/StartPagePreview/QuizPreviewLayout.tsx
@@ -7,6 +7,7 @@ import {
     useTheme,
 } from "@mui/material";
 import { useCurrentQuiz } from "@root/quizes/hooks";
+import YoutubeEmbedIframe from "./YoutubeEmbedIframe";
 
 
 export default function QuizPreviewLayout() {
@@ -52,18 +53,17 @@ export default function QuizPreviewLayout() {
                             gap: "20px",
                         }}
                     >
-                        {quiz.config.startpage.background.type === "image" &&
-                            quiz.config.startpage.logo && (
-                                <img
-                                    src={quiz.config.startpage.logo}
-                                    style={{
-                                        height: "30px",
-                                        maxWidth: "50px",
-                                        objectFit: "cover",
-                                    }}
-                                    alt=""
-                                />
-                            )}
+                        {quiz.config.startpage.logo && (
+                            <img
+                                src={quiz.config.startpage.logo}
+                                style={{
+                                    height: "30px",
+                                    maxWidth: "50px",
+                                    objectFit: "cover",
+                                }}
+                                alt=""
+                            />
+                        )}
                         <Typography sx={{ fontSize: "12px" }}>
                             {quiz.config.info.orgname}
                         </Typography>
@@ -122,14 +122,7 @@ export default function QuizPreviewLayout() {
                             )}
                         {quiz.config.startpage.background.type === "video" &&
                             quiz.config.startpage.background.video && (
-                                <video
-                                    src={quiz.config.startpage.background.video}
-                                    style={{
-                                        width: "100%",
-                                        height: "100%",
-                                        objectFit: "cover",
-                                    }}
-                                />
+                                <YoutubeEmbedIframe videoUrl={quiz.config.startpage.background.video} />
                             )}
                     </Box>
                 )}
diff --git a/src/ui_kit/StartPagePreview/YoutubeEmbedIframe.tsx b/src/ui_kit/StartPagePreview/YoutubeEmbedIframe.tsx
new file mode 100644
index 00000000..6f43440f
--- /dev/null
+++ b/src/ui_kit/StartPagePreview/YoutubeEmbedIframe.tsx
@@ -0,0 +1,34 @@
+import { Box } from "@mui/material";
+
+
+
+interface Props {
+    videoUrl: string;
+}
+
+export default function YoutubeEmbedIframe({ videoUrl }: Props) {
+    const extractYoutubeVideoId = /(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/gi;
+    const videoId = extractYoutubeVideoId.exec(videoUrl)?.[1];
+    if (!videoId) return null;
+
+    const embedUrl = `https://www.youtube.com/embed/${videoId}?controls=0&autoplay=1&modestbranding=0&showinfo=0&disablekb=1&mute=1&loop=1`;
+
+    return (
+        <Box sx={{
+            width: "100%",
+            height: "100%",
+            "& iframe": {
+                width: "100%",
+                height: "100%",
+            }
+        }}>
+            <iframe
+                src={embedUrl}
+                title="YouTube video player"
+                frameBorder="0"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                allowFullScreen
+            />
+        </Box>
+    );
+}

From 108857292d0f412233b32ed887ff8948f4ddb501 Mon Sep 17 00:00:00 2001
From: Tamara <tamara.zelenko555@yandex.ru>
Date: Sat, 9 Dec 2023 03:22:19 +0300
Subject: [PATCH 5/5] =?UTF-8?q?=D0=BF=D1=80=D0=B5=D0=B4=D0=BF=D1=80=D0=BE?=
 =?UTF-8?q?=D1=81=D0=BC=D0=BE=D1=82=D1=80=20=D0=B8=20=D0=BF=D1=83=D0=B1?=
 =?UTF-8?q?=D0=BB=D0=B8=D0=BA=D0=B0=D1=86=D0=B8=D1=8F,=20=D1=86=D0=B2?=
 =?UTF-8?q?=D0=B5=D1=82=20=D0=BA=D0=B0=D1=80=D0=B0=D0=BD=D0=B4=D0=B0=D1=88?=
 =?UTF-8?q?=D0=B8=D0=BA=D0=B0=20=D0=B8=20=D0=B7=D0=B0=D0=B3=D0=BE=D0=BB?=
 =?UTF-8?q?=D0=BE=D0=B2=D0=BE=D0=BA=20=D0=BA=D0=B2=D0=B8=D0=B7=D0=B0=20?=
 =?UTF-8?q?=D0=B8=D0=B7=20=D1=81=D1=82=D0=B0=D1=80=D1=82=D0=BE=D0=B2=D0=BE?=
 =?UTF-8?q?=D0=B9=20=D1=81=D1=82=D1=80=D0=B0=D0=BD=D0=B8=D1=86=D1=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Questions/QuestionsPage.tsx         |  3 +-
 .../SwitchBranchingPanel/QuestionsList.tsx    |  2 +-
 .../ViewPublicationPage/questions/Emoji.tsx   | 64 +++++++++-----
 .../ViewPublicationPage/questions/Images.tsx  |  2 +-
 .../ViewPublicationPage/questions/Varimg.tsx  |  7 +-
 .../QuizPreviewQuestionTypes/Emoji.tsx        | 83 +++++++++++++------
 .../QuizPreviewQuestionTypes/Varimg.tsx       | 41 ++++++---
 7 files changed, 136 insertions(+), 66 deletions(-)

diff --git a/src/pages/Questions/QuestionsPage.tsx b/src/pages/Questions/QuestionsPage.tsx
index 54235391..5a8b21c5 100755
--- a/src/pages/Questions/QuestionsPage.tsx
+++ b/src/pages/Questions/QuestionsPage.tsx
@@ -48,7 +48,8 @@ export default function QuestionsPage() {
                     margin: "60px 0 40px 0",
                 }}
             >
-                <Typography variant={"h5"}>Заголовок квиза</Typography>
+                <Typography variant={"h5"}>{
+                    quiz.name ? quiz.name : "Заголовок квиза" }</Typography>
                 <Button
                     sx={{
                         display: openBranchingPanel ? "none" : "flex",
diff --git a/src/pages/Questions/SwitchBranchingPanel/QuestionsList.tsx b/src/pages/Questions/SwitchBranchingPanel/QuestionsList.tsx
index 3fda3354..ef97597d 100644
--- a/src/pages/Questions/SwitchBranchingPanel/QuestionsList.tsx
+++ b/src/pages/Questions/SwitchBranchingPanel/QuestionsList.tsx
@@ -85,7 +85,7 @@ export const QuestionsList = () => {
                 updateEditSomeQuestion(content.id)
               }}
             >
-              <Pencil />
+              <Pencil style={{color: "#7e2aea"}}/>
             </IconButton>
             {content.rule.parentId && <CheckedIcon />}
           </Button>
diff --git a/src/pages/ViewPublicationPage/questions/Emoji.tsx b/src/pages/ViewPublicationPage/questions/Emoji.tsx
index c9cde6fc..da34a1b5 100644
--- a/src/pages/ViewPublicationPage/questions/Emoji.tsx
+++ b/src/pages/ViewPublicationPage/questions/Emoji.tsx
@@ -5,7 +5,7 @@ import {
   RadioGroup,
   FormControlLabel,
   Radio,
-  useTheme,
+  useTheme, FormControl,
 } from "@mui/material";
 
 import { useQuizViewStore, updateAnswer } from "@root/quizView";
@@ -50,31 +50,49 @@ export const Emoji = ({ currentQuestion }: EmojiProps) => {
           marginTop: "20px",
         }}
       >
-        <Box sx={{ display: "flex", flexDirection: "column", width: "100%" }}>
+        <Box sx={{ display: "flex", width: "100%", gap: "42px" }}>
           {currentQuestion.content.variants.map(
             ({ id, answer, extendedText }, index) => (
-              <FormControlLabel
-                key={id}
-                sx={{
-                  marginBottom: "15px",
-                  borderRadius: "5px",
-                  padding: "15px",
-                  color: theme.palette.grey2.main,
-                  border: `1px solid ${theme.palette.grey2.main}`,
-                  display: "flex",
-                  gap: "10px",
-                }}
-                value={index}
-                control={
-                  <Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />
-                }
-                label={
-                  <Box sx={{ display: "flex", gap: "10px" }}>
-                    <Typography>{extendedText}</Typography>
-                    <Typography>{answer}</Typography>
+                <FormControl
+                    key={id}
+                    sx={{
+                      borderRadius: "12px",
+                      border: `1px solid ${theme.palette.grey2.main}`,
+                      overflow: "hidden",
+                      maxWidth: "317px",
+                      width: "100%",
+                      height: "255px"
+                    }}
+                >
+                  <Box
+                      sx={{ display: "flex", alignItems: "center", height: "193px", background: "#ffffff" }}
+                  >
+                    <Box sx={{ width: "100%", display: "flex", justifyContent: "center" }}>
+                      {extendedText && (
+                          <Typography fontSize={"100px"}>{extendedText}</Typography>
+                      )}
+                    </Box>
                   </Box>
-                }
-              />
+                  <FormControlLabel
+                      key={id}
+                      sx={{
+                        margin: 0,
+                        padding: "15px",
+                        color: "#4D4D4D",
+                        display: "flex",
+                        gap: "10px",
+                      }}
+                      value={index}
+                      control={
+                        <Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />
+                      }
+                      label={
+                        <Box sx={{ display: "flex", gap: "10px" }}>
+                          <Typography>{answer}</Typography>
+                        </Box>
+                      }
+                  />
+                </FormControl>
             )
           )}
         </Box>
diff --git a/src/pages/ViewPublicationPage/questions/Images.tsx b/src/pages/ViewPublicationPage/questions/Images.tsx
index ed42ffc2..cdf07d89 100644
--- a/src/pages/ViewPublicationPage/questions/Images.tsx
+++ b/src/pages/ViewPublicationPage/questions/Images.tsx
@@ -91,7 +91,7 @@ export const Images = ({ currentQuestion }: ImagesProps) => {
                     )}
                   </Box>
                 </Box>
-                <FormControl
+                <FormControlLabel
                   key={id}
                   sx={{
                     display: "block",
diff --git a/src/pages/ViewPublicationPage/questions/Varimg.tsx b/src/pages/ViewPublicationPage/questions/Varimg.tsx
index c2845adb..83dee1d9 100644
--- a/src/pages/ViewPublicationPage/questions/Varimg.tsx
+++ b/src/pages/ViewPublicationPage/questions/Varimg.tsx
@@ -34,7 +34,7 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
   return (
     <Box>
       <Typography variant="h5">{currentQuestion.title}</Typography>
-      <Box sx={{ display: "flex" }}>
+      <Box sx={{ display: "flex", marginTop: "20px", }}>
         <RadioGroup
           name={currentQuestion.id}
           value={currentQuestion.content.variants.findIndex(({ id }) => answer === id)}
@@ -50,7 +50,6 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
             flexDirection: "row",
             justifyContent: "space-between",
             flexBasis: "100%",
-            marginTop: "20px",
           }}
         >
           <Box sx={{ display: "flex", flexDirection: "column", width: "100%" }}>
@@ -61,7 +60,7 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
                   marginBottom: "15px",
                   borderRadius: "5px",
                   padding: "15px",
-                  color: theme.palette.grey2.main,
+                  color: "#4D4D4D",
                   border: `1px solid ${theme.palette.grey2.main}`,
                   display: "flex",
                 }}
@@ -75,7 +74,7 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
           </Box>
         </RadioGroup>
         {(variant?.extendedText || currentQuestion.content.back) && (
-          <Box sx={{ maxWidth: "400px", width: "100%", height: "300px" }}>
+          <Box sx={{ maxWidth: "450px", width: "100%", height: "450px", border: "1px solid #E3E3E3", borderRadius: "12px", overflow: "hidden", }}>
             <img
               src={answer ? variant?.extendedText : currentQuestion.content.back}
               style={{ width: "100%", height: "100%", objectFit: "cover" }}
diff --git a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Emoji.tsx b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Emoji.tsx
index 547c1d10..b660cd39 100644
--- a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Emoji.tsx
+++ b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Emoji.tsx
@@ -7,12 +7,14 @@ import {
   Radio,
   RadioGroup,
   Tooltip,
-  Typography,
+  Typography, useTheme,
 } from "@mui/material";
 
 import InfoIcon from "@icons/InfoIcon";
 
 import type { QuizQuestionEmoji } from "model/questionTypes/emoji";
+import RadioCheck from "@ui_kit/RadioCheck";
+import RadioIcon from "@ui_kit/RadioIcon";
 
 interface Props {
   question: QuizQuestionEmoji;
@@ -20,45 +22,78 @@ interface Props {
 
 export default function Emoji({ question }: Props) {
   const [value, setValue] = useState<string | null>(null);
-
+  const theme = useTheme();
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     setValue((event.target as HTMLInputElement).value);
   };
 
   return (
     <FormControl fullWidth>
-      <FormLabel id="quiz-question-radio-group" data-cy="question-title">{question.title}</FormLabel>
+      <FormLabel id="quiz-question-radio-group" data-cy="question-title" sx={{fontSize: "24px", fontWeight: 500, marginBottom: "25px"}}>{question.title}</FormLabel>
       <RadioGroup
         aria-labelledby="quiz-question-radio-group"
         value={value}
         onChange={handleChange}
+        sx={{display: "flex",
+        flexDirection: "row", gap: "42px"}}
       >
         {question.content.variants
           .filter(({ answer }) => answer)
           .map((variant, index) => (
-            <FormControlLabel
-              key={index}
-              value={variant.answer}
-              control={
-                <Radio
-                  inputProps={{
-                    "data-cy": "variant-radio",
+              <Box
+                  key={index}
+                  sx={{
+                    borderRadius: "12px",
+                    border: `1px solid ${theme.palette.grey2.main}`,
+                    overflow: "hidden",
+                    maxWidth: "317px",
+                    width: "100%",
+                    height: "255px"
                   }}
-                />
-              }
-              label={
-                <Box sx={{ display: "flex", alignItems: "center", gap: 2 }} data-cy="variant-answer">
-                  <Typography>{`${variant.extendedText} ${variant.answer}`}</Typography>
-                  {variant.hints && (
-                    <Tooltip title="Подсказка" placement="right">
-                      <Box>
-                        <InfoIcon />
-                      </Box>
-                    </Tooltip>
-                  )}
+              >
+                <Box
+                    sx={{ display: "flex", alignItems: "center", height: "193px", background: "#ffffff" }}
+                >
+                  <Box sx={{ width: "100%", display: "flex", justifyContent: "center" }}>
+                    {variant.extendedText && (
+                        <Typography fontSize={"100px"}>{`${variant.extendedText}`}</Typography>
+                    )}
+                  </Box>
                 </Box>
-              }
-            />
+                <FormControlLabel
+                    key={index}
+                    value={variant.answer}
+                    sx={{
+                      margin: 0,
+                      padding: "15px",
+                      color: "#4D4D4D",
+                      display: "flex",
+                      gap: "10px",
+                      background: "#f2f3f7"
+                    }}
+                    control={
+                      <Radio
+                          inputProps={{
+                            "data-cy": "variant-radio",
+                          }}
+                          checkedIcon={<RadioCheck />} icon={<RadioIcon />}
+
+                      />
+                    }
+                    label={
+                      <Box sx={{ display: "flex", alignItems: "center", gap: 2 }} data-cy="variant-answer">
+                        <Typography>{`${variant.answer}`}</Typography>
+                        {variant.hints && (
+                            <Tooltip title="Подсказка" placement="right">
+                              <Box>
+                                <InfoIcon />
+                              </Box>
+                            </Tooltip>
+                        )}
+                      </Box>
+                    }
+                />
+              </Box>
           ))}
       </RadioGroup>
     </FormControl>
diff --git a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Varimg.tsx b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Varimg.tsx
index fdfa6b50..de202922 100644
--- a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Varimg.tsx
+++ b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Varimg.tsx
@@ -1,19 +1,21 @@
 import { useState, ChangeEvent } from "react";
 import {
-  Box,
-  FormControl,
-  FormControlLabel,
-  FormLabel,
-  Radio,
-  RadioGroup,
-  Tooltip,
-  Typography,
+    Box,
+    FormControl,
+    FormControlLabel,
+    FormLabel,
+    Radio,
+    RadioGroup,
+    Tooltip,
+    Typography, useTheme,
 } from "@mui/material";
 
 import InfoIcon from "@icons/InfoIcon";
 
 import type { QuestionVariant } from "model/questionTypes/shared";
 import type { QuizQuestionVarImg } from "model/questionTypes/varimg";
+import RadioCheck from "@ui_kit/RadioCheck";
+import RadioIcon from "@ui_kit/RadioIcon";
 
 interface Props {
   question: QuizQuestionVarImg;
@@ -21,7 +23,7 @@ interface Props {
 
 export default function Varimg({ question }: Props) {
   const [selectedVariantIndex, setSelectedVariantIndex] = useState<number>(-1);
-
+    const theme = useTheme();
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     setSelectedVariantIndex(
       question.content.variants.findIndex(
@@ -38,13 +40,15 @@ export default function Varimg({ question }: Props) {
       sx={{
         display: "flex",
         flexWrap: "wrap",
-        gap: 2,
+        gap: "40px",
       }}
     >
-      <FormControl>
+      <FormControl sx={{maxWidth: "900px",
+          width: "100%", gap: "25px"}}>
         <FormLabel 
             id="quiz-question-radio-group"
             data-cy="question-title"
+            sx={{fontSize: "24px", fontWeight: 500}}
         >
             {question.title}
         </FormLabel>
@@ -52,6 +56,7 @@ export default function Varimg({ question }: Props) {
           aria-labelledby="quiz-question-radio-group"
           value={currentVariant?.answer ?? ""}
           onChange={handleChange}
+          sx={{gap: "20px"}}
         >
           {question.content.variants
             .filter(({ answer }) => answer)
@@ -60,11 +65,20 @@ export default function Varimg({ question }: Props) {
                 key={index}
                 value={variant.answer}
                 data-cy="variant-answer"
+                sx={{
+                    margin: 0,
+                    borderRadius: "5px",
+                    padding: "15px",
+                    color: "#4D4D4D",
+                    border: `1px solid ${theme.palette.grey2.main}`,
+                    display: "flex",
+                }}
                 control={
                     <Radio 
                         inputProps={{
                             "data-cy": "variant-radio",
                         }}
+                        checkedIcon={<RadioCheck />} icon={<RadioIcon />}
                     />
                 }
                 label={
@@ -87,10 +101,13 @@ export default function Varimg({ question }: Props) {
         sx={{
           border: "1px solid #E3E3E3",
           maxWidth: "400px",
+          height: "400px",
           display: "flex",
           justifyContent: "center",
           alignItems: "center",
-          borderRadius: "8px",
+          borderRadius: "12px",
+          marginTop: "50px",
+          overflow: "hidden",
         }}
       >
         {currentVariant?.extendedText ? (