66 lines
2.1 KiB
TypeScript
66 lines
2.1 KiB
TypeScript
import { Box } from "@mui/material";
|
|
import { getVideo } from "./helper";
|
|
import type { SxProps } from "@mui/material";
|
|
import useSWR from "swr";
|
|
import LoadingSkeleton from "../LoadingSkeleton";
|
|
import { ApologyPage } from "@/components/ViewPublicationPage/ApologyPage";
|
|
|
|
type VideoIframeProps = {
|
|
videoUrl: string;
|
|
containerSX?: SxProps;
|
|
};
|
|
|
|
export default function QuizVideo({ videoUrl, containerSX }: VideoIframeProps) {
|
|
console.log("=== QuizVideo component called ===");
|
|
console.log("QuizVideo component called with URL:", videoUrl);
|
|
console.log("ContainerSX:", containerSX);
|
|
|
|
const { data: videoData, error, isLoading } = useSWR(["video", videoUrl], (params) => getVideo(params[1]));
|
|
|
|
console.log("Video data:", videoData);
|
|
console.log("Error:", error);
|
|
console.log("Is loading:", isLoading);
|
|
console.log("=== End QuizVideo component ===");
|
|
|
|
return (
|
|
<Box
|
|
id="test-video-container"
|
|
sx={{
|
|
width: "100%",
|
|
height: "100%",
|
|
minHeight: videoData?.sourceName === "tiktok" ? "740px" : 0,
|
|
"& iframe": { width: "100%", height: "100%" },
|
|
...containerSX,
|
|
}}
|
|
>
|
|
{isLoading ? (
|
|
<LoadingSkeleton />
|
|
) : !videoData || error ? (
|
|
<ApologyPage error={error ?? new Error()} />
|
|
) : videoData.sourceName === "custom" || videoData.sourceName === "yandex" ? (
|
|
<Box
|
|
component="video"
|
|
sx={{ width: "100%", height: "100%" }}
|
|
autoPlay
|
|
controls
|
|
muted
|
|
loop
|
|
playsInline
|
|
onError={(e) => console.error("Video error:", e)}
|
|
onLoadStart={() => console.log("Video load started")}
|
|
onCanPlay={() => console.log("Video can play")}
|
|
src={videoData.url}
|
|
/>
|
|
) : (
|
|
<Box
|
|
component="iframe"
|
|
src={videoData.url}
|
|
title={videoData.sourceName}
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
|
{...{ allowFullScreen: true, frameBorder: 0 }}
|
|
/>
|
|
)}
|
|
</Box>
|
|
);
|
|
}
|