abstract urls

src/pages/media/show.tsx

@@ -1,39 +1,42 @@
-import {Stack, Typography, Box, Button} from '@mui/material'
-import {useShow} from '@refinedev/core'
-import {Show, TextFieldComponent as TextField} from '@refinedev/mui'
+import { Stack, Typography, Box, Button } from "@mui/material";
+import { useShow } from "@refinedev/core";
+import { Show, TextFieldComponent as TextField } from "@refinedev/mui";
 
-import {MEDIA_TYPES} from '../../lib/constants'
-import {TOKEN_KEY} from '../../authProvider'
+import { MEDIA_TYPES } from "../../lib/constants";
+import { TOKEN_KEY } from "../../authProvider";
 
 export const MediaShow = () => {
-  const {query} = useShow({})
-  const {data, isLoading} = query
+  const { query } = useShow({});
+  const { data, isLoading } = query;
 
-  const record = data?.data
-  const token = localStorage.getItem(TOKEN_KEY)
+  const record = data?.data;
+  const token = localStorage.getItem(TOKEN_KEY);
 
   const fields = [
     // {label: 'Название файла', data: 'filename'},
-    {label: 'Название', data: 'media_name'},
+    { label: "Название", data: "media_name" },
     {
-      label: 'Тип',
-      data: 'media_type',
-      render: (value: number) => MEDIA_TYPES.find((type) => type.value === value)?.label || value,
+      label: "Тип",
+      data: "media_type",
+      render: (value: number) =>
+        MEDIA_TYPES.find((type) => type.value === value)?.label || value,
     },
     // {label: 'ID', data: 'id'},
-  ]
+  ];
 
   return (
     <Show isLoading={isLoading}>
       <Stack gap={4}>
         {record && record.media_type === 1 && (
           <img
-            src={`https://wn.krbl.ru/media/${record?.id}/download?token=${token}`}
+            src={`${import.meta.env.VITE_KRBL_MEDIA}${
+              record?.id
+            }/download?token=${token}`}
             alt={record?.filename}
             style={{
-              maxWidth: '100%',
-              height: '40vh',
-              objectFit: 'contain',
+              maxWidth: "100%",
+              height: "40vh",
+              objectFit: "contain",
               borderRadius: 8,
             }}
           />
@@ -43,36 +46,45 @@ export const MediaShow = () => {
           <Box
             sx={{
               p: 2,
-              border: '1px solid text.pimary',
+              border: "1px solid text.pimary",
               borderRadius: 2,
-              bgcolor: 'primary.light',
-              width: 'fit-content',
+              bgcolor: "primary.light",
+              width: "fit-content",
             }}
           >
             <Typography
               variant="body1"
               gutterBottom
               sx={{
-                color: '#FFFFFF',
+                color: "#FFFFFF",
               }}
             >
               Видео доступно для скачивания по ссылке:
             </Typography>
-            <Button variant="contained" href={`https://wn.krbl.ru/media/${record?.id}/download?token=${token}`} target="_blank" sx={{mt: 1, width: '100%'}}>
+            <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}) => (
+        {fields.map(({ label, data, render }) => (
           <Stack key={data} gap={1}>
             <Typography variant="body1" fontWeight="bold">
               {label}
             </Typography>
-            <TextField value={render ? render(record?.[data]) : record?.[data]} />
+            <TextField
+              value={render ? render(record?.[data]) : record?.[data]}
+            />
           </Stack>
         ))}
       </Stack>
     </Show>
-  )
-}
+  );
+};