change searched item loading (#7913)

2025-09-23 20:37:42 +00:00 · 2025-06-10 09:55:55 +08:00
parent 34d4e8917c
commit 8cc63be9fd
2 changed files with 61 additions and 70 deletions
--- 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 (
-    <div className="searched-item-details">
-      <div
-        className="cur-view-detail"
-        style={{ width: 300 }}
-      >
-        <Header title={dirent?.name || ''} icon={Utils.getDirentIcon(dirent, true)}></Header>
-        <Body>
-          {Utils.imageCheck(dirent.name) && (
-            <div className="detail-image">
-              <img src={src} alt="" />
-            </div>
-          )}
-          <div className="detail-content">
-            {dirent.type !== 'file' ? (
-              <DirDetails
-                direntDetail={direntDetail}
-                readOnly={true}
-                tagsData={tagsData}
-              />
-            ) : (
-              <FileDetails
-                repoID={repoID}
-                dirent={dirent}
-                path={path}
-                direntDetail={direntDetail}
-                repoTags={[]}
-                fileTagList={dirent ? dirent.file_tags : []}
-                readOnly={true}
-                tagsData={tagsData}
-                onFileTagChanged={() => {}}
-              />
-            )}
-          </div>
-        </Body>
-      </div>
+    <div className="detail-content">
+      {dirent.type !== 'file' ?
+        <DirDetails
+          direntDetail={direntDetail}
+          readOnly={true}
+          tagsData={tagsData}
+        />
+        :
+        <FileDetails
+          repoID={repoID}
+          dirent={dirent}
+          path={path}
+          direntDetail={direntDetail}
+          repoTags={[]}
+          fileTagList={dirent ? dirent.file_tags : []}
+          readOnly={true}
+          tagsData={tagsData}
+          onFileTagChanged={() => {}}
+        />
+      }
    </div>
  );
 };

 Details.propTypes = {
  repoID: PropTypes.string.isRequired,
-  repoInfo: PropTypes.object.isRequired,
  path: PropTypes.string.isRequired,
  dirent: PropTypes.object.isRequired,
  direntDetail: PropTypes.object.isRequired,
--- 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 (
-    <MetadataStatusProvider key={repoID} repoID={repoID} repoInfo={repoInfo}>
-      <MetadataDetailsProvider
-        repoID={repoID}
-        repoInfo={repoInfo}
-        path={path !== '/' && path.endsWith('/') ? path.slice(0, -1) : path}
-        dirent={dirent}
-        direntDetail={direntDetail}
-        direntType={dirent?.type !== 'file' ? 'dir' : 'file'}
-        onErrMessage={(message) => setErrMessage(message)}
-      >
-        <Details
-          repoID={repoID}
-          repoInfo={repoInfo}
-          path={parentDir}
-          dirent={dirent}
-          direntDetail={direntDetail}
-          errMessage={errMessage}
-        />
-      </MetadataDetailsProvider>
-    </MetadataStatusProvider>
+    <div className="searched-item-details">
+      <div className="cur-view-detail" style={{ width: 300 }}>
+        <Header title={dirent?.name || ''} icon={Utils.getDirentIcon(dirent, true)}></Header>
+        <Body>
+          {Utils.imageCheck(dirent.name) && <div className="detail-image"><img src={src} alt="" /></div>}
+          <MetadataStatusProvider key={repoID} repoID={repoID} repoInfo={repoInfo}>
+            <MetadataDetailsProvider
+              repoID={repoID}
+              repoInfo={repoInfo}
+              path={path !== '/' && path.endsWith('/') ? path.slice(0, -1) : path}
+              dirent={dirent}
+              direntDetail={direntDetail}
+              direntType={dirent?.type !== 'file' ? 'dir' : 'file'}
+              onErrMessage={(message) => setErrMessage(message)}
+            >
+              <Details
+                repoID={repoID}
+                path={parentDir}
+                dirent={dirent}
+                direntDetail={direntDetail}
+                errMessage={errMessage}
+              />
+            </MetadataDetailsProvider>
+          </MetadataStatusProvider>
+        </Body>
+      </div>
+    </div>
  );
 };