Files
dify/web/app/components/workflow/skill/editor/media-file-preview.tsx
2026-01-15 14:53:00 +08:00

44 lines
1003 B
TypeScript

import type { FC } from 'react'
import * as React from 'react'
import { useTranslation } from 'react-i18next'
type MediaFilePreviewProps = {
type: 'image' | 'video'
src: string
}
const MediaFilePreview: FC<MediaFilePreviewProps> = ({ type, src }) => {
const { t } = useTranslation('workflow')
if (!src) {
return (
<div className="flex h-full w-full items-center justify-center text-text-tertiary">
<span className="system-sm-regular">
{t('skillEditor.previewUnavailable')}
</span>
</div>
)
}
return (
<div className="flex h-full w-full items-center justify-center p-6">
{type === 'image' && (
<img
src={src}
alt=""
className="max-h-full max-w-full object-contain"
/>
)}
{type === 'video' && (
<video
src={src}
controls
className="max-h-full max-w-full"
/>
)}
</div>
)
}
export default React.memo(MediaFilePreview)