fix preview url for media entity
This commit is contained in:
maxim
parent
a052338dbf
commit
d83277af5f
@ -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' && (
|
||||
|
||||
@ -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,
|
||||
},
|
||||
]
|
||||
|
||||
@ -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 (
|
||||
|
||||
@ -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 (
|
||||
|
||||
@ -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)
|
||||
}
|
||||
|
||||
@ -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}>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user