2021-07-27 04:45:24 -04:00
|
|
|
import { useState, useCallback } from 'react'
|
2021-04-28 07:41:20 -04:00
|
|
|
import PropTypes from 'prop-types'
|
2021-05-21 07:32:42 -04:00
|
|
|
import { useTranslation } from 'react-i18next'
|
|
|
|
|
2021-06-10 07:26:04 -04:00
|
|
|
import FileViewHeader from './file-view-header'
|
|
|
|
import FileViewImage from './file-view-image'
|
2023-11-03 07:11:33 -04:00
|
|
|
import FileViewPdf from './file-view-pdf'
|
2021-06-10 07:26:04 -04:00
|
|
|
import FileViewText from './file-view-text'
|
2021-04-28 07:41:20 -04:00
|
|
|
import Icon from '../../../shared/components/icon'
|
2024-06-18 06:01:37 -04:00
|
|
|
import getMeta from '@/utils/meta'
|
2021-04-28 07:41:20 -04:00
|
|
|
|
|
|
|
const imageExtensions = ['png', 'jpg', 'jpeg', 'gif']
|
|
|
|
|
2023-09-28 09:42:31 -04:00
|
|
|
export default function FileView({ file }) {
|
2021-04-28 07:41:20 -04:00
|
|
|
const [contentLoading, setContentLoading] = useState(true)
|
|
|
|
const [hasError, setHasError] = useState(false)
|
2021-05-21 07:32:42 -04:00
|
|
|
|
2021-04-28 07:41:20 -04:00
|
|
|
const { t } = useTranslation()
|
2021-05-21 07:32:42 -04:00
|
|
|
|
2024-06-18 06:01:37 -04:00
|
|
|
const { textExtensions, editableFilenames } = getMeta('ol-ExposedSettings')
|
2022-05-16 05:38:20 -04:00
|
|
|
|
2021-05-21 07:32:42 -04:00
|
|
|
const extension = file.name.split('.').pop().toLowerCase()
|
2023-10-04 13:12:09 -04:00
|
|
|
|
|
|
|
const isEditableTextFile =
|
|
|
|
textExtensions.includes(extension) ||
|
|
|
|
editableFilenames.includes(file.name.toLowerCase())
|
|
|
|
|
|
|
|
const isImageFile = imageExtensions.includes(extension)
|
2023-11-03 07:11:33 -04:00
|
|
|
const isPdfFile = extension === 'pdf'
|
|
|
|
const isUnpreviewableFile = !isEditableTextFile && !isImageFile && !isPdfFile
|
2021-04-28 07:41:20 -04:00
|
|
|
|
2021-07-27 04:45:24 -04:00
|
|
|
const handleLoad = useCallback(() => {
|
|
|
|
setContentLoading(false)
|
|
|
|
}, [])
|
2021-04-28 07:41:20 -04:00
|
|
|
|
2021-07-27 04:45:24 -04:00
|
|
|
const handleError = useCallback(() => {
|
2021-04-28 07:41:20 -04:00
|
|
|
if (!hasError) {
|
|
|
|
setContentLoading(false)
|
|
|
|
setHasError(true)
|
|
|
|
}
|
2021-07-27 04:45:24 -04:00
|
|
|
}, [hasError])
|
2021-04-28 07:41:20 -04:00
|
|
|
|
|
|
|
const content = (
|
|
|
|
<>
|
2023-09-28 09:42:31 -04:00
|
|
|
<FileViewHeader file={file} />
|
2023-10-04 13:12:09 -04:00
|
|
|
{isImageFile && (
|
2024-08-21 07:28:21 -04:00
|
|
|
<FileViewImage file={file} onLoad={handleLoad} onError={handleError} />
|
2021-04-28 07:41:20 -04:00
|
|
|
)}
|
2023-10-04 13:12:09 -04:00
|
|
|
{isEditableTextFile && (
|
2021-07-27 04:45:24 -04:00
|
|
|
<FileViewText file={file} onLoad={handleLoad} onError={handleError} />
|
2021-04-28 07:41:20 -04:00
|
|
|
)}
|
2023-11-03 07:11:33 -04:00
|
|
|
{isPdfFile && (
|
|
|
|
<FileViewPdf
|
|
|
|
fileId={file.id}
|
|
|
|
onLoad={handleLoad}
|
|
|
|
onError={handleError}
|
|
|
|
/>
|
|
|
|
)}
|
2021-04-28 07:41:20 -04:00
|
|
|
</>
|
|
|
|
)
|
|
|
|
|
|
|
|
return (
|
2021-06-10 07:26:04 -04:00
|
|
|
<div className="file-view full-size">
|
2021-04-28 07:41:20 -04:00
|
|
|
{!hasError && content}
|
2021-06-10 07:26:04 -04:00
|
|
|
{!isUnpreviewableFile && contentLoading && <FileViewLoadingIndicator />}
|
2021-04-28 07:41:20 -04:00
|
|
|
{(isUnpreviewableFile || hasError) && (
|
|
|
|
<p className="no-preview">{t('no_preview_available')}</p>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2021-06-10 07:26:04 -04:00
|
|
|
function FileViewLoadingIndicator() {
|
2021-04-28 07:41:20 -04:00
|
|
|
const { t } = useTranslation()
|
|
|
|
return (
|
2021-06-10 07:26:04 -04:00
|
|
|
<div className="loading-panel loading-panel-file-view">
|
2021-04-28 07:41:20 -04:00
|
|
|
<span>
|
2022-01-19 06:56:57 -05:00
|
|
|
<Icon type="refresh" spin />
|
2021-04-28 07:41:20 -04:00
|
|
|
{t('loading')}…
|
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2021-06-10 07:26:04 -04:00
|
|
|
FileView.propTypes = {
|
2021-04-28 07:41:20 -04:00
|
|
|
file: PropTypes.shape({
|
|
|
|
id: PropTypes.string,
|
|
|
|
name: PropTypes.string,
|
2024-08-21 07:28:21 -04:00
|
|
|
hash: PropTypes.string,
|
2021-04-28 07:41:20 -04:00
|
|
|
}).isRequired,
|
|
|
|
}
|