107 lines
2.5 KiB
TypeScript
107 lines
2.5 KiB
TypeScript
import { Box } from "@mui/material";
|
|
|
|
import { ReactPhotoSphereViewer } from "react-photo-sphere-viewer";
|
|
import { ThreeView } from "./ThreeView";
|
|
|
|
export interface MediaData {
|
|
id: string | number;
|
|
media_type: number;
|
|
filename?: string;
|
|
}
|
|
|
|
export function MediaViewer({
|
|
media,
|
|
className,
|
|
}: Readonly<{ media?: MediaData; className?: string }>) {
|
|
const token = localStorage.getItem("token");
|
|
return (
|
|
<Box
|
|
sx={{
|
|
width: "100%",
|
|
height: "100%",
|
|
display: "flex",
|
|
flexGrow: 1,
|
|
justifyContent: "center",
|
|
}}
|
|
className={className}
|
|
>
|
|
{media?.media_type === 1 && (
|
|
<img
|
|
src={`${import.meta.env.VITE_KRBL_MEDIA}${
|
|
media?.id
|
|
}/download?token=${token}`}
|
|
alt={media?.filename}
|
|
style={{
|
|
width: "100%",
|
|
height: "100%",
|
|
objectFit: "cover",
|
|
}}
|
|
/>
|
|
)}
|
|
|
|
{media?.media_type === 2 && (
|
|
<video
|
|
src={`${import.meta.env.VITE_KRBL_MEDIA}${
|
|
media?.id
|
|
}/download?token=${token}`}
|
|
style={{
|
|
height: "100%",
|
|
objectFit: "contain",
|
|
borderRadius: 30,
|
|
}}
|
|
controls
|
|
autoPlay
|
|
muted
|
|
/>
|
|
)}
|
|
{media?.media_type === 3 && (
|
|
<img
|
|
src={`${import.meta.env.VITE_KRBL_MEDIA}${
|
|
media?.id
|
|
}/download?token=${token}`}
|
|
alt={media?.filename}
|
|
style={{
|
|
width: "100%",
|
|
height: "100%",
|
|
objectFit: "contain",
|
|
borderRadius: 8,
|
|
}}
|
|
/>
|
|
)}
|
|
{media?.media_type === 4 && (
|
|
<img
|
|
src={`${import.meta.env.VITE_KRBL_MEDIA}${
|
|
media?.id
|
|
}/download?token=${token}`}
|
|
alt={media?.filename}
|
|
style={{
|
|
width: "100%",
|
|
height: "100%",
|
|
objectFit: "contain",
|
|
borderRadius: 8,
|
|
}}
|
|
/>
|
|
)}
|
|
|
|
{media?.media_type === 5 && (
|
|
<ReactPhotoSphereViewer
|
|
src={`${import.meta.env.VITE_KRBL_MEDIA}${
|
|
media?.id
|
|
}/download?token=${token}`}
|
|
width={"100%"}
|
|
height={"100%"}
|
|
/>
|
|
)}
|
|
|
|
{media?.media_type === 6 && (
|
|
<ThreeView
|
|
fileUrl={`${import.meta.env.VITE_KRBL_MEDIA}${
|
|
media?.id
|
|
}/download?token=${token}`}
|
|
height="100%"
|
|
/>
|
|
)}
|
|
</Box>
|
|
);
|
|
}
|