From 144e7cb00ce2da7b6f35859ffe9163767e385cdf Mon Sep 17 00:00:00 2001
From: itoshi <kkzemeow@gmail.com>
Date: Mon, 2 Feb 2026 11:06:33 +0300
Subject: [PATCH] fix: update 3d models

---
 src/widgets/MediaArea/index.tsx       |  4 +-
 src/widgets/MediaViewer/ThreeView.tsx |  2 +-
 src/widgets/MediaViewer/index.tsx     | 77 ++++++++++++++++++---------
 3 files changed, 55 insertions(+), 28 deletions(-)

diff --git a/src/widgets/MediaArea/index.tsx b/src/widgets/MediaArea/index.tsx
index 6aaeb48..d0938d6 100644
--- a/src/widgets/MediaArea/index.tsx
+++ b/src/widgets/MediaArea/index.tsx
@@ -123,7 +123,7 @@ export const MediaArea = observer(
             <div className="w-full flex flex-start flex-wrap gap-2 mt-4 py-10">
               {mediaIds.map((m) => (
                 <button
-                  className="relative w-20 h-20"
+                  className="relative w-[100px] h-[80px]"
                   key={m.id}
                   onClick={() => handleMediaModal(m.id)}
                   type="button"
@@ -134,7 +134,7 @@ export const MediaArea = observer(
                       media_type: m.media_type,
                       filename: m.filename,
                     }}
-                    height="40px"
+                    compact
                   />
                   <button
                     className="absolute top-2 right-2 bg-white rounded-full p-1 shadow-md hover:shadow-lg transition-shadow"
diff --git a/src/widgets/MediaViewer/ThreeView.tsx b/src/widgets/MediaViewer/ThreeView.tsx
index 699e770..9383be6 100644
--- a/src/widgets/MediaViewer/ThreeView.tsx
+++ b/src/widgets/MediaViewer/ThreeView.tsx
@@ -129,7 +129,7 @@ export const ThreeView = ({
         >
           <ambientLight />
           <directionalLight />
-          <Stage environment="city" intensity={0.6} adjustCamera={false}>
+          <Stage environment={null} intensity={0.6} adjustCamera={false}>
             <Model fileUrl={fileUrl} />
           </Stage>
           <OrbitControls />
diff --git a/src/widgets/MediaViewer/index.tsx b/src/widgets/MediaViewer/index.tsx
index f1de454..b2448b2 100644
--- a/src/widgets/MediaViewer/index.tsx
+++ b/src/widgets/MediaViewer/index.tsx
@@ -1,5 +1,6 @@
-import { Box } from "@mui/material";
+import { Box, Typography } from "@mui/material";
 import { useState, useEffect } from "react";
+import { Cuboid } from "lucide-react";
 
 import { ReactPhotoSphereViewer } from "react-photo-sphere-viewer";
 import { ThreeView } from "./ThreeView";
@@ -19,6 +20,7 @@ export function MediaViewer({
   width,
   fullWidth,
   fullHeight,
+  compact,
 }: Readonly<{
   media?: MediaData;
   className?: string;
@@ -26,6 +28,8 @@ export function MediaViewer({
   width?: string;
   fullWidth?: boolean;
   fullHeight?: boolean;
+  /** В компактном режиме (миниатюры) 3D модели не рендерятся — показывается placeholder */
+  compact?: boolean;
 }>) {
   const token = localStorage.getItem("token");
   const [resetKey, setResetKey] = useState(0);
@@ -76,8 +80,9 @@ export function MediaViewer({
           }/download?token=${token}`}
           alt={media?.filename}
           style={{
-            height: fullHeight ? "100%" : height ? height : "auto",
-            width: fullWidth ? "100%" : width ? width : "auto",
+            height: compact ? "80px" : fullHeight ? "100%" : height ? height : "auto",
+            width: compact ? "100px" : fullWidth ? "100%" : width ? width : "auto",
+            objectFit: "cover",
           }}
         />
       )}
@@ -88,8 +93,8 @@ export function MediaViewer({
             media?.id
           }/download?token=${token}`}
           style={{
-            width: width ? width : "100%",
-            height: height ? height : "100%",
+            width: compact ? "100px" : width ? width : "100%",
+            height: compact ? "80px" : height ? height : "100%",
             objectFit: "cover",
             borderRadius: 8,
           }}
@@ -105,8 +110,9 @@ export function MediaViewer({
           }/download?token=${token}`}
           alt={media?.filename}
           style={{
-            height: fullHeight ? "100%" : height ? height : "auto",
-            width: fullWidth ? "100%" : width ? width : "auto",
+            height: compact ? "80px" : fullHeight ? "100%" : height ? height : "auto",
+            width: compact ? "100px" : fullWidth ? "100%" : width ? width : "auto",
+            objectFit: "cover",
           }}
         />
       )}
@@ -117,7 +123,8 @@ export function MediaViewer({
           }/download?token=${token}`}
           alt={media?.filename}
           style={{
-            width: "100%",
+            width: compact ? "100px" : "100%",
+            height: compact ? "80px" : undefined,
             objectFit: "cover",
           }}
         />
@@ -128,26 +135,46 @@ export function MediaViewer({
           src={`${import.meta.env.VITE_KRBL_MEDIA}${
             media?.id
           }/download?token=${token}`}
-          width={fullWidth ? "100%" : width ? width : "500px"}
-          height={fullHeight ? "100%" : height ? height : "300px"}
+          width={compact ? "100px" : fullWidth ? "100%" : width ? width : "500px"}
+          height={compact ? "80px" : fullHeight ? "100%" : height ? height : "300px"}
         />
       )}
 
-      {media?.media_type === 6 && (
-        <ThreeViewErrorBoundary
-          onReset={handleReset}
-          resetKey={`${media?.id}-${resetKey}`}
-        >
-          <ThreeView
-            key={`3d-model-${media?.id}-${resetKey}`}
-            fileUrl={`${import.meta.env.VITE_KRBL_MEDIA}${
-              media?.id
-            }/download?token=${token}`}
-            height={height ? height : "500px"}
-            width={width ? width : "500px"}
-          />
-        </ThreeViewErrorBoundary>
-      )}
+      {media?.media_type === 6 &&
+        (compact ? (
+          <Box
+            sx={{
+              width: "100px",
+              height: "80px",
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
+              backgroundColor: "action.hover",
+              borderRadius: 5,
+              color: "text.secondary",
+            }}
+          >
+            <Cuboid size={24} />
+            <Typography variant="caption" sx={{ mt: 0.5 }}>
+              3D
+            </Typography>
+          </Box>
+        ) : (
+          <ThreeViewErrorBoundary
+            onReset={handleReset}
+            resetKey={`${media?.id}-${resetKey}`}
+          >
+            <ThreeView
+              key={`3d-model-${media?.id}-${resetKey}`}
+              fileUrl={`${import.meta.env.VITE_KRBL_MEDIA}${
+                media?.id
+              }/download?token=${token}`}
+              height={height ? height : "500px"}
+              width={width ? width : "500px"}
+            />
+          </ThreeViewErrorBoundary>
+        ))}
     </Box>
   );
 }