loader для видео на стартовой
This commit is contained in:
parent
70cc2e4e5b
commit
9ffde777af
@ -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 _ особые условия для вывода картинок
|
||||
|
||||
@ -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",
|
||||
height: "48px",
|
||||
width: "300px",
|
||||
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;
|
||||
|
||||
@ -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={{
|
||||
|
||||
@ -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 (
|
||||
|
||||
Loading…
Reference in New Issue
Block a user