fix preview url for media entity

src/components/LinkedItems.tsx

@@ -4,10 +4,12 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 import {axiosInstance} from '../providers/data'
 import {BACKEND_URL} from '../lib/constants'
 import {Link} from 'react-router'
+import {TOKEN_KEY} from '../authProvider'
 
 type Field<T> = {
   label: string
   data: keyof T
+  render?: (value: any) => React.ReactNode
 }
 
 type ExtraFieldConfig = {
@@ -163,7 +165,7 @@ export const LinkedItems = <T extends {id: number; [key: string]: any}>({parentI
                   <Stack gap={0.25}>
                     {childResource === 'media' && item.id && (
                       <img
-                        src={`https://wn.krbl.ru/media/${item.id}/download`}
+                        src={`https://wn.krbl.ru/media/${item.id}/download?token=${localStorage.getItem(TOKEN_KEY)}`}
                         alt={String(item.media_name)}
                         style={{
                           width: '100%',
@@ -174,9 +176,9 @@ export const LinkedItems = <T extends {id: number; [key: string]: any}>({parentI
                         }}
                       />
                     )}
-                    {fields.map(({label, data}) => (
+                    {fields.map(({label, data, render}) => (
                       <Typography variant="body2" color="textSecondary" key={String(data)}>
-                        <strong>{label}:</strong> {item[data]}
+                        <strong>{label}:</strong> {render ? render(item[data]) : item[data]}
                       </Typography>
                     ))}
                     {type === 'edit' && (

src/pages/article/types.ts

@@ -1,3 +1,5 @@
+import {MEDIA_TYPES} from '../../lib/constants'
+
 export type MediaItem = {
   id: number
   filename: string
@@ -25,5 +27,9 @@ export const articleFields: Array<FieldType<ArticleItem>> = [
 
 export const mediaFields: Array<FieldType<MediaItem>> = [
   {label: 'Название', data: 'media_name'},
-  {label: 'Тип', data: 'media_type'},
+  {
+    label: 'Тип',
+    data: 'media_type',
+    render: (value: number) => MEDIA_TYPES.find((type) => type.value === value)?.label || value,
+  },
 ]

src/pages/carrier/show.tsx

@@ -1,6 +1,7 @@
 import {Box, Stack, Typography} from '@mui/material'
 import {useShow} from '@refinedev/core'
 import {Show, TextFieldComponent as TextField} from '@refinedev/mui'
+import {TOKEN_KEY} from '../../authProvider'
 
 export type FieldType = {
   label: string
@@ -34,7 +35,11 @@ export const CarrierShow = () => {
       render: (value: string) => <Box sx={{display: 'grid', placeItems: 'center', width: 'fit-content', paddingInline: '6px', height: '100%', backgroundColor: `${value}20`, borderRadius: 1}}>{value}</Box>,
     },
     {label: 'Слоган', data: 'slogan'},
-    {label: 'Логотип', data: 'logo', render: (value: number) => <img src={`https://wn.krbl.ru/media/${value}/download`} alt={String(value)} style={{maxWidth: '10%', objectFit: 'contain', borderRadius: 8}} />},
+    {
+      label: 'Логотип',
+      data: 'logo',
+      render: (value: number) => <img src={`https://wn.krbl.ru/media/${value}/download?token=${localStorage.getItem(TOKEN_KEY)}`} alt={String(value)} style={{maxWidth: '10%', objectFit: 'contain', borderRadius: 8}} />,
+    },
   ]
 
   return (

src/pages/city/show.tsx

@@ -1,6 +1,7 @@
 import {Stack, Typography} from '@mui/material'
 import {useShow} from '@refinedev/core'
 import {Show, TextFieldComponent as TextField} from '@refinedev/mui'
+import {TOKEN_KEY} from '../../authProvider'
 
 export const CityShow = () => {
   const {query} = useShow({})
@@ -13,7 +14,7 @@ export const CityShow = () => {
     {label: 'Название', data: 'name'},
     // {label: 'Код страны', data: 'country_code'},
     {label: 'Страна', data: 'country'},
-    {label: 'Герб', data: 'arms', render: (value: number) => <img src={`https://wn.krbl.ru/media/${value}/download`} alt={String(value)} style={{maxWidth: '10%', objectFit: 'contain', borderRadius: 8}} />},
+    {label: 'Герб', data: 'arms', render: (value: number) => <img src={`https://wn.krbl.ru/media/${value}/download?token=${localStorage.getItem(TOKEN_KEY)}`} alt={String(value)} style={{maxWidth: '10%', objectFit: 'contain', borderRadius: 8}} />},
   ]
 
   return (

src/pages/media/edit.tsx

@@ -7,6 +7,7 @@ import {Controller} from 'react-hook-form'
 
 import {MEDIA_TYPES} from '../../lib/constants'
 import {ALLOWED_IMAGE_TYPES, ALLOWED_VIDEO_TYPES, useMediaFileUpload} from '../../components/media/MediaFormUtils'
+import {TOKEN_KEY} from '../../authProvider'
 
 type MediaFormValues = {
   media_name: string
@@ -49,7 +50,7 @@ export const MediaEdit = () => {
 
   useEffect(() => {
     if (record?.id) {
-      setPreviewUrl(`https://wn.krbl.ru/media/${record.id}/download`)
+      setPreviewUrl(`https://wn.krbl.ru/media/${record.id}/download?token=${localStorage.getItem(TOKEN_KEY)}`)
       setValue('media_name', record?.media_name || '')
       setValue('media_type', record?.media_type)
     }

src/pages/media/show.tsx

@@ -1,14 +1,16 @@
-import {Stack, Typography} from '@mui/material'
+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'
 
 export const MediaShow = () => {
   const {query} = useShow({})
   const {data, isLoading} = query
 
   const record = data?.data
+  const token = localStorage.getItem(TOKEN_KEY)
 
   const fields = [
     // {label: 'Название файла', data: 'filename'},
@@ -24,7 +26,43 @@ export const MediaShow = () => {
   return (
     <Show isLoading={isLoading}>
       <Stack gap={4}>
-        {record && <img src={`https://wn.krbl.ru/media/${record?.id}/download`} alt={record?.filename} style={{maxWidth: '100%', height: '40vh', objectFit: 'contain', borderRadius: 8}} />}
+        {record && record.media_type === 1 && (
+          <img
+            src={`https://wn.krbl.ru/media/${record?.id}/download?token=${token}`}
+            alt={record?.filename}
+            style={{
+              maxWidth: '100%',
+              height: '40vh',
+              objectFit: 'contain',
+              borderRadius: 8,
+            }}
+          />
+        )}
+
+        {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={`https://wn.krbl.ru/media/${record?.id}/download?token=${token}`} target="_blank" sx={{mt: 1, width: '100%'}}>
+              Скачать видео
+            </Button>
+          </Box>
+        )}
 
         {fields.map(({label, data, render}) => (
           <Stack key={data} gap={1}>