Merge branch 'fixes' into dev

src/pages/ViewPublicationPage/StartPageViewPublication.tsx

@@ -84,6 +84,8 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
       ) : null
     ) : null;
 
+    console.log(background)
+
   return (
     <Paper
       className="quiz-preview-draghandle"

src/pages/startPage/StartPageSettings.tsx

@@ -6,16 +6,24 @@ 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 {
   Box,
   Button,
+  ButtonBase,
   Checkbox,
   FormControl,
   FormControlLabel,
   MenuItem,
   Select,
+  Tooltip,
   Typography,
   useMediaQuery,
   useTheme,
@@ -294,6 +302,7 @@ export default function StartPageSettings() {
               </SelectableButton>
             </Box>
 
+{quiz.config.startpage.background.type === "image" &&
             <Box
               sx={{
                 display:
@@ -348,27 +357,67 @@ export default function StartPageSettings() {
               <ModalSizeImage />
             </Box>
 
-            <Box
-              sx={{
-                display:
-                  quiz.config.startpage.background.type === "image"
-                    ? "none"
-                    : "flex",
-                flexDirection: "column",
-                mt: "20px",
-              }}
-            >
-              <CustomTextField
-                placeholder="URL видео"
-                value={quiz.config.startpage.background.video ?? ""}
-                onChange={(e) =>
-                  updateQuiz(quiz.id, (quiz) => {
-                    quiz.config.startpage.background.video = e.target.value;
-                  })
-                }
-              />
-            </Box>
+}
 
+{quiz.config.startpage.background.type === "video" && <>
+            <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) {
+                      uploadQuizImage(quiz.id, file, (quiz, url) => {
+                        quiz.config.startpage.background.video = url;
+                      });
+                      // setVideo(URL.createObjectURL(file));
+                    }
+                
+                  }}
+                  hidden
+                  accept=".mp4"
+                  multiple
+                  type="file"
+                />
+                <UploadBox
+                  icon={<UploadIcon />}
+                  sx={{
+                    height: "48px",
+                    width: "48px",
+                  }}
+                />
+                </ButtonBase>
+                {quiz.config.startpage.background.video ? <video src={quiz.config.startpage.background.video} width="400" controls /> : null}
+
+
+</>}
             {designType !== "centered" && (
               <>
                 <Typography

src/ui_kit/StartPagePreview/YoutubeEmbedIframe.tsx

@@ -6,14 +6,16 @@ interface Props {
 }
 
 export default function YoutubeEmbedIframe({ videoUrl, containerSX }: Props) {
+
   const extractYoutubeVideoId =
     /(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/gi;
   const videoId = extractYoutubeVideoId.exec(videoUrl)?.[1];
-  if (!videoId) return null;
+  // 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`;
   // https://www.youtube.com/shorts/9VgqBPd6RPA
   // https://www.youtube.com/watch?v=I2N8hTHhvGY
+  console.log()
   return (
     <Box
       sx={{
@@ -27,13 +29,25 @@ export default function YoutubeEmbedIframe({ videoUrl, containerSX }: Props) {
         ...containerSX,
       }}
     >
-      <iframe
+      <Box
+        component="video"
+        sx={{
+          width: "100%",
+          height: "100%",
+
+        }}
+        autoPlay
+        muted
+
+        src={videoUrl}
+      />
+      {/* <iframe
         src={embedUrl}
         title="YouTube video player"
         frameBorder="0"
         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
         allowFullScreen
-      />
+      /> */}
     </Box>
   );
 }