import { useState, useCallback } from 'react' import PropTypes from 'prop-types' import { useTranslation } from 'react-i18next' import FileViewHeader from './file-view-header' import FileViewImage from './file-view-image' import FileViewPdf from './file-view-pdf' import FileViewText from './file-view-text' import Icon from '../../../shared/components/icon' import getMeta from '@/utils/meta' const imageExtensions = ['png', 'jpg', 'jpeg', 'gif'] export default function FileView({ file }) { const [contentLoading, setContentLoading] = useState(true) const [hasError, setHasError] = useState(false) const { t } = useTranslation() const { textExtensions, editableFilenames } = getMeta('ol-ExposedSettings') const extension = file.name.split('.').pop().toLowerCase() const isEditableTextFile = textExtensions.includes(extension) || editableFilenames.includes(file.name.toLowerCase()) const isImageFile = imageExtensions.includes(extension) const isPdfFile = extension === 'pdf' const isUnpreviewableFile = !isEditableTextFile && !isImageFile && !isPdfFile const handleLoad = useCallback(() => { setContentLoading(false) }, []) const handleError = useCallback(() => { if (!hasError) { setContentLoading(false) setHasError(true) } }, [hasError]) const content = ( <> {isImageFile && ( )} {isEditableTextFile && ( )} {isPdfFile && ( )} ) return (
{!hasError && content} {!isUnpreviewableFile && contentLoading && } {(isUnpreviewableFile || hasError) && (

{t('no_preview_available')}

)}
) } function FileViewLoadingIndicator() { const { t } = useTranslation() return (
  {t('loading')}…
) } FileView.propTypes = { file: PropTypes.shape({ id: PropTypes.string, name: PropTypes.string, hash: PropTypes.string, }).isRequired, }