From 8cc63be9fd6da7c271edba0927fbf533d41556ee Mon Sep 17 00:00:00 2001 From: Michael An <2331806369@qq.com> Date: Tue, 10 Jun 2025 09:55:55 +0800 Subject: [PATCH] change searched item loading (#7913) --- .../src/components/search/details/details.js | 68 ++++++------------- .../src/components/search/details/index.js | 63 ++++++++++------- 2 files changed, 61 insertions(+), 70 deletions(-) diff --git a/frontend/src/components/search/details/details.js b/frontend/src/components/search/details/details.js index 9a5be7973e..7c82320ff9 100644 --- a/frontend/src/components/search/details/details.js +++ b/frontend/src/components/search/details/details.js @@ -1,10 +1,8 @@ +import { useEffect, useState } from 'react'; import PropTypes from 'prop-types'; -import { Body, Header } from '../../dirent-detail/detail'; -import { siteRoot, thumbnailSizeForGrid } from '../../../utils/constants'; import { Utils } from '../../../utils/utils'; import FileDetails from '../../dirent-detail/dirent-details/file-details'; import DirDetails from '../../dirent-detail/dirent-details/dir-details'; -import { useEffect, useState } from 'react'; import { useMetadataStatus } from '../../../hooks'; import tagsAPI from '../../../tag/api'; import { PER_LOAD_NUMBER } from '../../../metadata/constants'; @@ -13,7 +11,7 @@ import { TAGS_DEFAULT_SORT } from '../../../tag/constants/sort'; import TagsData from '../../../tag/model/tagsData'; import toaster from '../../toast'; -const Details = ({ repoID, repoInfo, path, dirent, direntDetail }) => { +const Details = ({ repoID, path, dirent, direntDetail }) => { const [tagsData, setTagsData] = useState(null); const { enableMetadata, enableTags } = useMetadataStatus(); @@ -33,55 +31,33 @@ const Details = ({ repoID, repoInfo, path, dirent, direntDetail }) => { } }, [repoID, enableMetadata, enableTags]); - let src = ''; - if (repoInfo.encrypted) { - src = `${siteRoot}repo/${repoID}/raw` + Utils.encodePath(`${path === '/' ? '' : path}/${dirent.name}`); - } else { - src = `${siteRoot}thumbnail/${repoID}/${thumbnailSizeForGrid}` + Utils.encodePath(`${path === '/' ? '' : path}/${dirent.name}`) + '?mtime=' + direntDetail.mtime; - } return ( -
-
-
- - {Utils.imageCheck(dirent.name) && ( -
- -
- )} -
- {dirent.type !== 'file' ? ( - - ) : ( - {}} - /> - )} -
- -
+
+ {dirent.type !== 'file' ? + + : + {}} + /> + }
); }; Details.propTypes = { repoID: PropTypes.string.isRequired, - repoInfo: PropTypes.object.isRequired, path: PropTypes.string.isRequired, dirent: PropTypes.object.isRequired, direntDetail: PropTypes.object.isRequired, diff --git a/frontend/src/components/search/details/index.js b/frontend/src/components/search/details/index.js index 18ec030b99..d38c78df32 100644 --- a/frontend/src/components/search/details/index.js +++ b/frontend/src/components/search/details/index.js @@ -2,14 +2,14 @@ import { useEffect, useState } from 'react'; import PropTypes from 'prop-types'; import { Utils } from '../../../utils/utils'; import { seafileAPI } from '../../../utils/seafile-api'; -import toaster from '../../toast'; -import { MetadataDetailsProvider } from '../../../metadata'; import { Repo } from '../../../models'; -import { MetadataStatusProvider } from '../../../hooks'; +import toaster from '../../toast'; import Details from './details'; +import { MetadataDetailsProvider } from '../../../metadata'; +import { MetadataStatusProvider } from '../../../hooks'; import LibDetail from '../../dirent-detail/lib-details'; import { Body, Header } from '../../dirent-detail/detail'; -import { gettext, mediaUrl } from '../../../utils/constants'; +import { gettext, mediaUrl, siteRoot, thumbnailSizeForGrid } from '../../../utils/constants'; import './index.css'; @@ -138,27 +138,42 @@ const SearchedItemDetails = ({ repoID, path, dirent }) => { let parentDir = path !== '/' && path.endsWith('/') ? path.slice(0, -1) : path; // deal with folder path comes from search results, eg: /folder/ parentDir = Utils.getDirName(parentDir); + + let src = ''; + if (repoInfo.encrypted) { + src = `${siteRoot}repo/${repoID}/raw` + Utils.encodePath(`${path === '/' ? '' : path}/${dirent.name}`); + } else { + src = `${siteRoot}thumbnail/${repoID}/${thumbnailSizeForGrid}` + Utils.encodePath(`${path === '/' ? '' : path}/${dirent.name}`) + '?mtime=' + direntDetail.mtime; + } + return ( - - setErrMessage(message)} - > -
- - +
+
+
+ + {Utils.imageCheck(dirent.name) &&
} + + setErrMessage(message)} + > +
+ + + +
+
); };