loader для видео на стартовой

CHANGELOG.md

@@ -1,3 +1,4 @@
+1.0.8 _ 2025-10-05 _ замена инпут на текстареа
 1.0.7 _ 2025-10-05 _ замена инпут на текстареа
 1.0.6 _ 2025-09-19 _ логика включения таймера
 1.0.5 _ 2025-09-18 _ особые условия для вывода картинок

src/pages/startPage/StartPageSettings/StartPageSettings.tsx

@@ -22,6 +22,7 @@ import {
   MenuItem,
   Select,
   Skeleton,
+  CircularProgress,
   Tooltip,
   Typography,
   useMediaQuery,
@@ -35,7 +36,7 @@ import QuestionTimerSettings from "./QuestionTimerSettings";
 import SelectableButton from "@ui_kit/SelectableButton";
 import { StartPagePreview } from "@ui_kit/StartPagePreview";
 import { resizeFavIcon } from "@ui_kit/reactImageFileResizer";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { createPortal } from "react-dom";
 import FaviconDropZone from "../FaviconDropZone";
 import ModalSizeImage from "../ModalSizeImage";
@@ -69,23 +70,36 @@ export default function StartPageSettings() {
 
   if (!quiz) return null;
 
+  // Диагностика видимости скелетона загрузки видео
+  useEffect(() => {
+    console.log("[StartPage] backgroundUploding state:", backgroundUploding, {
+      hasVideo: Boolean(quiz?.config.startpage.background.video),
+      type: quiz?.config.startpage.background.type,
+    });
+  }, [backgroundUploding, quiz?.config.startpage.background.video, quiz?.config.startpage.background.type]);
+
   async function handleVideoUpload(videoUrl: string) {
     if (!quiz) return;
 
+    console.log("[StartPage] Video upload start", { videoUrl });
     setBackgroundUploading(true);
 
     if (videoUrl.startsWith("blob:")) {
       const videoBlob = await (await fetch(videoUrl)).blob();
+      console.log("[StartPage] Uploading blob to backend", { size: videoBlob.size, type: videoBlob.type });
       uploadQuizImage(quiz.id, videoBlob, (quiz, url) => {
         quiz.config.startpage.background.video = url;
+        console.log("[StartPage] Backend returned video URL", { url });
       });
     } else {
       updateQuiz(quiz.id, (quiz) => {
         quiz.config.startpage.background.video = videoUrl;
       });
+      console.log("[StartPage] Set external video URL", { videoUrl });
     }
 
-    setBackgroundUploading(false);
+    // Не сбрасываем backgroundUploding здесь — ждём onLoaded от VideoElement
+    console.log("[StartPage] Waiting for video preview to load...");
   }
 
   const designType = quiz?.config?.startpageType;
@@ -376,14 +390,7 @@ export default function StartPageSettings() {
 
                         setBackgroundUploading(false);
                       }}
-                      onImageSaveClick={async (file) => {
-                        setBackgroundUploading(true);
-                        await uploadQuizImage(quiz.id, file, (quiz, url) => {
-                          quiz.config.startpage.background.desktop = url;
-                        });
                       
-                        setBackgroundUploading(false);
-                      }}
                       onDeleteClick={() => {
                         updateQuiz(quiz.id, (quiz) => {
                           quiz.config.startpage.background.desktop = null;
@@ -433,11 +440,12 @@ export default function StartPageSettings() {
                     </Box>
                     {backgroundUploding ? (
                       <Skeleton
+                        variant="rounded"
                         sx={{
-                          width: "48px",
+                          width: "300px",
-                          height: "48px",
+                          height: "168px",
                           transform: "none",
-                          margin: "20px 0",
+                          my: "20px",
                         }}
                       />
                     ) : (
@@ -465,16 +473,36 @@ export default function StartPageSettings() {
                     )}
                   </>
                 ) : (
-                  <Box sx={{ marginTop: "20px" }}>
+                  <Box sx={{ position: "relative", marginTop: "20px", overflow: "hidden" }}>
                     <VideoElement
                       videoSrc={quiz.config.startpage.background.video}
                       theme={theme}
+                      onLoaded={() => {
+                        console.log('[StartPage] VideoElement reported loaded');
+                        setBackgroundUploading(false);
+                      }}
                       onDeleteClick={() => {
                         updateQuiz(quiz.id, (quiz) => {
                           quiz.config.startpage.background.video = null;
                         });
                       }}
                     />
+                    {backgroundUploding && (
+                      <Skeleton
+                        variant="rounded"
+                        animation="wave"
+                        sx={{
+                          position: "absolute",
+                          inset: 0,
+                          width: "100%",
+                          height: "100%",
+                          borderRadius: "8px",
+                          zIndex: (t) => t.zIndex.modal + 1,
+                          bgcolor: (t) => t.palette.action.hover,
+                          pointerEvents: "none",
+                        }}
+                      />
+                    )}
                   </Box>
                 )}
               </>
@@ -570,14 +598,7 @@ export default function StartPageSettings() {
 
                         setLogoUploading(false);
                       }}
-                      onImageSaveClick={async (file) => {
-                        setLogoUploading(true);
-                        await uploadQuizImage(quiz.id, file, (quiz, url) => {
-                          quiz.config.startpage.logo = url;
-                        });
                       
-                        setLogoUploading(false);
-                      }}
                       onDeleteClick={() => {
                         updateQuiz(quiz.id, (quiz) => {
                           quiz.config.startpage.logo = null;
@@ -650,14 +671,7 @@ export default function StartPageSettings() {
 
                       setLogoUploading(false);
                     }}
-                    onImageSaveClick={async (file) => {
-                      setLogoUploading(true);
-                      await uploadQuizImage(quiz.id, file, (quiz, url) => {
-                        quiz.config.startpage.logo = url;
-                      });
                     
-                      setLogoUploading(false);
-                    }}
                     onDeleteClick={() => {
                       updateQuiz(quiz.id, (quiz) => {
                         quiz.config.startpage.logo = null;

src/pages/startPage/VideoElement.tsx

@@ -1,5 +1,6 @@
 import Box from "@mui/material/Box";
-import { FC } from "react";
+import { FC, useEffect, useRef, useState } from "react";
+import Skeleton from "@mui/material/Skeleton";
 import DeleteIcon from "@mui/icons-material/Delete";
 import { IconButton, SxProps, Theme } from "@mui/material";
 import { QuizVideo } from "@frontend/squzanswerer";
@@ -10,6 +11,7 @@ type VideoElementProps = {
   theme: Theme;
   onDeleteClick: () => void;
   deleteIconSx?: SxProps<Theme>;
+  onLoaded?: () => void;
 };
 
 export const VideoElement: FC<VideoElementProps> = ({
@@ -18,10 +20,61 @@ export const VideoElement: FC<VideoElementProps> = ({
   theme,
   onDeleteClick,
   deleteIconSx,
+  onLoaded,
 }) => {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const [isLoaded, setIsLoaded] = useState(false);
+
+  useEffect(() => {
+    console.log("[VideoElement] init for", { videoSrc });
+    setIsLoaded(false);
+
+    const container = containerRef.current;
+    if (!container) return;
+
+    const attach = (videoEl: HTMLVideoElement | null) => {
+      if (!videoEl) return;
+      console.log("[VideoElement] attach video element", videoEl);
+      const markLoaded = (e?: Event) => {
+        console.log("[VideoElement] markLoaded via", e?.type, { readyState: (videoEl as any).readyState });
+        setIsLoaded(true);
+        try { onLoaded && onLoaded(); } catch (err) { console.warn('[VideoElement] onLoaded error', err); }
+      };
+      if (typeof (videoEl as any).readyState === "number" && (videoEl as any).readyState >= 2) {
+        console.log("[VideoElement] already loaded", { readyState: (videoEl as any).readyState });
+        setIsLoaded(true);
+        return;
+      }
+      videoEl.addEventListener("loadeddata", markLoaded, { once: true });
+      videoEl.addEventListener("canplay", markLoaded, { once: true });
+      videoEl.addEventListener("loadedmetadata", markLoaded, { once: true });
+    };
+
+    const tryAttach = () => {
+      const videoEl = container.querySelector("video");
+      attach(videoEl as HTMLVideoElement | null);
+    };
+
+    tryAttach();
+
+    const observer = new MutationObserver((mutations) => {
+      console.log("[VideoElement] mutations", mutations.map(m => m.type));
+      tryAttach();
+    });
+    observer.observe(container, { childList: true, subtree: true, attributes: true });
+
+    return () => observer.disconnect();
+  }, [videoSrc]);
+
   return (
-    <Box sx={{ position: "relative", width: `${width}px` }}>
+    <Box ref={containerRef} sx={{ position: "relative", width: `${width}px`, minHeight: "168px" }}>
       <QuizVideo videoUrl={videoSrc} />
+      {!isLoaded && (
+        <Skeleton
+          sx={{ position: "absolute", inset: 0, width: "100%", height: "100%", borderRadius: "8px", zIndex: 1000, backgroundColor: 'rgba(255,255,255,0.8)' }}
+          variant="rounded"
+        />
+      )}
       <IconButton
         onClick={onDeleteClick}
         sx={{

src/ui_kit/MediaSelectionAndDisplay.tsx

@@ -68,14 +68,17 @@ export const MediaSelectionAndDisplay: FC<Iprops> = ({
   }
 
   async function handleVideoUpload(videoUrl: string) {
+    console.log("[QuestionMedia] Video upload start", { videoUrl });
     setBackgroundUploading(true);
 
     if (videoUrl.startsWith("blob:")) {
       const videoBlob = await (await fetch(videoUrl)).blob();
+      console.log("[QuestionMedia] Uploading blob to backend", { size: videoBlob.size, type: videoBlob.type });
       uploadQuestionImage(question.id, quizQid, videoBlob, (question, url) => {
         if (!("video" in question.content)) return;
 
         question.content.video = url;
+        console.log("[QuestionMedia] Backend returned video URL", { url });
       });
     } else {
       updateQuestion(question.id, (question) => {
@@ -83,9 +86,10 @@ export const MediaSelectionAndDisplay: FC<Iprops> = ({
 
         question.content.video = videoUrl;
       });
+      console.log("[QuestionMedia] Set external video URL", { videoUrl });
     }
 
-    setTimeout(() => {setBackgroundUploading(false)},7000);
+    setTimeout(() => { setBackgroundUploading(false); console.log("[QuestionMedia] Video upload end"); }, 7000);
   }
 
   return (