107 lines
2.6 KiB
TypeScript
107 lines
2.6 KiB
TypeScript
import { Box } from "@mui/material";
|
|
import { TOKEN_KEY } from "@providers";
|
|
import { ReactPhotoSphereViewer } from "react-photo-sphere-viewer";
|
|
import { ModelViewer } from "./ModelViewer";
|
|
|
|
export interface MediaData {
|
|
id: string | number;
|
|
media_type: number;
|
|
filename?: string;
|
|
}
|
|
|
|
export function MediaView({ media }: Readonly<{ media?: MediaData }>) {
|
|
const token = localStorage.getItem(TOKEN_KEY);
|
|
return (
|
|
<Box
|
|
sx={{
|
|
maxHeight: "300px",
|
|
width: "80%",
|
|
height: "100%",
|
|
maxWidth: "600px",
|
|
display: "flex",
|
|
flexGrow: 1,
|
|
justifyContent: "center",
|
|
margin: "0 auto",
|
|
}}
|
|
>
|
|
{media?.media_type === 1 && (
|
|
<img
|
|
src={`${import.meta.env.VITE_KRBL_MEDIA}${
|
|
media?.id
|
|
}/download?token=${token}`}
|
|
alt={media?.filename}
|
|
style={{
|
|
maxWidth: "100%",
|
|
height: "auto",
|
|
objectFit: "contain",
|
|
borderRadius: 8,
|
|
}}
|
|
/>
|
|
)}
|
|
|
|
{media?.media_type === 2 && (
|
|
<video
|
|
src={`${import.meta.env.VITE_KRBL_MEDIA}${
|
|
media?.id
|
|
}/download?token=${token}`}
|
|
style={{
|
|
maxWidth: "100%",
|
|
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={{
|
|
maxWidth: "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={{
|
|
maxWidth: "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 && (
|
|
<ModelViewer
|
|
fileUrl={`${import.meta.env.VITE_KRBL_MEDIA}${
|
|
media?.id
|
|
}/download?token=${token}`}
|
|
/>
|
|
)}
|
|
</Box>
|
|
);
|
|
}
|