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 FileViewText from './file-view-text' import Icon from '../../../shared/components/icon' const imageExtensions = ['png', 'jpg', 'jpeg', 'gif'] const textExtensions = window.ExposedSettings.textExtensions export default function FileView({ file, storeReferencesKeys }) { const [contentLoading, setContentLoading] = useState(true) const [hasError, setHasError] = useState(false) const { t } = useTranslation() const extension = file.name.split('.').pop().toLowerCase() const isUnpreviewableFile = !imageExtensions.includes(extension) && !textExtensions.includes(extension) const handleLoad = useCallback(() => { setContentLoading(false) }, []) const handleError = useCallback(() => { if (!hasError) { setContentLoading(false) setHasError(true) } }, [hasError]) const content = ( <> {imageExtensions.includes(extension) && ( )} {textExtensions.includes(extension) && ( )} ) 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, }).isRequired, storeReferencesKeys: PropTypes.func.isRequired, }