fix: Language cache sight

2025-05-31 21:17:27 +03:00
parent 2e6917406e
commit 0d9bbb140f
28 changed files with 2760 additions and 1013 deletions
--- a/src/widgets/MediaViewer/index.tsx
+++ b/src/widgets/MediaViewer/index.tsx
@ -0,0 +1,107 @@
+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 }: Readonly<{ media?: MediaData }>) {
+  const token = localStorage.getItem("token");
+  return (
+    <Box
+      sx={{
+        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={{
+            margin: "auto 0",
+            height: "fit-content",
+            width: "fit-content",
+            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 && (
+        <ThreeView
+          fileUrl={`${import.meta.env.VITE_KRBL_MEDIA}${
+            media?.id
+          }/download?token=${token}`}
+          height="100%"
+        />
+      )}
+    </Box>
+  );
+}