44 lines
1.4 KiB
TypeScript
44 lines
1.4 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) {
|
|
const { data: videoData, error, isLoading } = useSWR(["video", videoUrl], (params) => getVideo(params[1]));
|
|
|
|
return (
|
|
<Box
|
|
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 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>
|
|
);
|
|
}
|