fetching data from api for route preview

src/pages/media/show.tsx

@@ -43,35 +43,51 @@ export const MediaShow = () => {
         )}
 
         {record && record.media_type === 2 && (
-          <Box
-            sx={{
-              p: 2,
-              border: "1px solid text.pimary",
-              borderRadius: 2,
-              bgcolor: "primary.light",
-              width: "fit-content",
-            }}
-          >
-            <Typography
-              variant="body1"
-              gutterBottom
-              sx={{
-                color: "#FFFFFF",
-              }}
-            >
-              Видео доступно для скачивания по ссылке:
-            </Typography>
-            <Button
-              variant="contained"
-              href={`${import.meta.env.VITE_KRBL_MEDIA}${
+          <>
+            <video
+              src={`${import.meta.env.VITE_KRBL_MEDIA}${
                 record?.id
               }/download?token=${token}`}
-              target="_blank"
-              sx={{ mt: 1, width: "100%" }}
+              style={{
+                maxWidth: "50%",
+
+                objectFit: "contain",
+                borderRadius: 30,
+              }}
+              controls
+              autoPlay
+              muted
+            />
+            <Box
+              sx={{
+                p: 2,
+                border: "1px solid text.pimary",
+                borderRadius: 2,
+                bgcolor: "primary.light",
+                width: "fit-content",
+              }}
             >
-              Скачать видео
-            </Button>
-          </Box>
+              <Typography
+                variant="body1"
+                gutterBottom
+                sx={{
+                  color: "#FFFFFF",
+                }}
+              >
+                Видео доступно для скачивания по ссылке:
+              </Typography>
+              <Button
+                variant="contained"
+                href={`${import.meta.env.VITE_KRBL_MEDIA}${
+                  record?.id
+                }/download?token=${token}`}
+                target="_blank"
+                sx={{ mt: 1, width: "100%" }}
+              >
+                Скачать видео
+              </Button>
+            </Box>
+          </>
         )}
 
         {fields.map(({ label, data, render }) => (