metadata table image use thumbnail

haiwen · Oct 14, 2024 · 60ef9a7 · 60ef9a7
1 parent 71ddac5
commit 60ef9a7
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 4 deletions.
diff --git a/frontend/src/metadata/components/cell-formatter/index.js b/frontend/src/metadata/components/cell-formatter/index.js
@@ -3,9 +3,22 @@ import PropTypes from 'prop-types';
 import { Formatter } from '@seafile/sf-metadata-ui-component';
 import { useCollaborators } from '../../hooks';
 import { Utils } from '../../../utils/utils';
+import { siteRoot, thumbnailDefaultSize } from '../../../utils/constants';
 
-const CellFormatter = ({ readonly, value, field, ...params }) => {
+const CellFormatter = ({ readonly, value, field, record, ...params }) => {
   const { collaborators, collaboratorsCache, updateCollaboratorsCache, queryUser } = useCollaborators();
+
+  const getFileIconUrl = useMemo((filename) => {
+    if (Utils.imageCheck(filename)) {
+      const path = Utils.encodePath(Utils.joinPath(record._parent_dir, filename));
+      const repoID = window.sfMetadataStore.repoId;
+      const thumbnail = `${siteRoot}thumbnail/${repoID}/${thumbnailDefaultSize}${path}`;
+      return thumbnail;
+    } else {
+      return Utils.getFileIconUrl(filename);
+    }
+  }, [record]);
+
   const props = useMemo(() => {
     return {
       collaborators,
@@ -15,10 +28,10 @@ const CellFormatter = ({ readonly, value, field, ...params }) => {
       value,
       field,
       queryUserAPI: queryUser,
-      getFileIconUrl: Utils.getFileIconUrl,
+      getFileIconUrl,
       getFolderIconUrl: Utils.getFolderIconUrl,
     };
-  }, [readonly, value, field, collaborators, collaboratorsCache, updateCollaboratorsCache, queryUser]);
+  }, [readonly, value, field, collaborators, collaboratorsCache, updateCollaboratorsCache, queryUser, getFileIconUrl]);
 
   return (
     <Formatter { ...props } { ...params } />
@@ -29,6 +42,7 @@ CellFormatter.propTypes = {
   readonly: PropTypes.bool,
   value: PropTypes.any,
   field: PropTypes.object.isRequired,
+  record: PropTypes.object.isRequired,
 };
 
 export default CellFormatter;
diff --git a/frontend/src/metadata/views/table/table-main/records/record/cell/formatter.js b/frontend/src/metadata/views/table/table-main/records/record/cell/formatter.js
@@ -15,7 +15,7 @@ const Formatter = ({ isCellSelected, isDir, field, value, onChange, record }) =>
   if (type === CellType.RATE && cellEditAble) {
     return (<RateEditor isCellSelected={isCellSelected} value={value} field={field} onChange={onChange} />);
   }
-  return (<CellFormatter readonly={true} value={value} field={field} isDir={isDir} />);
+  return (<CellFormatter readonly={true} value={value} field={field} isDir={isDir} record={record} />);
 };
 
 Formatter.propTypes = {