add quiz startpage video iframe

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
+                            <CustomTextField
-                                sx={{
+                                placeholder="URL видео"
-                                    display: "flex",
+                                text={quiz.config.startpage.background.video ?? ""}
-                                    alignItems: "center",
+                                onChange={e => updateQuiz(quiz.id, quiz => {
-                                    gap: "7px",
+                                    quiz.config.startpage.background.video = e.target.value;
-                                    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}
                             <Typography
                                 sx={{
                                     fontWeight: 500,

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,
 ) => {

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 && (
-                            quiz.config.startpage.logo && (
+                            <img
-                                <img
+                                src={quiz.config.startpage.logo}
-                                    src={quiz.config.startpage.logo}
+                                style={{
-                                    style={{
+                                    height: "30px",
-                                        height: "30px",
+                                    maxWidth: "50px",
-                                        maxWidth: "50px",
+                                    objectFit: "cover",
-                                        objectFit: "cover",
+                                }}
-                                    }}
+                                alt=""
-                                    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
+                                <YoutubeEmbedIframe videoUrl={quiz.config.startpage.background.video} />
-                                    src={quiz.config.startpage.background.video}
-                                    style={{
-                                        width: "100%",
-                                        height: "100%",
-                                        objectFit: "cover",
-                                    }}
-                                />
                             )}
                     </Box>
                 )}

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>
+    );
+}