97 lines
2.0 KiB
TypeScript
97 lines
2.0 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 {
|
|
filename?: string;
|
|
id: string | number;
|
|
media_name?: string;
|
|
media_type: number;
|
|
}
|
|
|
|
export function MediaView({media} : Readonly<{media?: MediaData}>) {
|
|
const token = localStorage.getItem(TOKEN_KEY);
|
|
return (
|
|
<Box
|
|
sx={{maxHeight: "50vh", height: "100%", width: "100%", display: "flex", justifyContent: "center"}}
|
|
>
|
|
{media?.media_type === 1 && (
|
|
<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 === 2 && (
|
|
<video
|
|
src={`${import.meta.env.VITE_KRBL_MEDIA}${
|
|
media?.id
|
|
}/download?token=${token}`}
|
|
style={{
|
|
|
|
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>
|
|
)
|
|
} |