show metadata in image previewer (#7525)

Co-authored-by: zhouwenxuan <aries@Mac.local>

frontend/package-lock.json

@@ -14,12 +14,12 @@
         "@emoji-mart/data": "^1.2.1",
         "@emoji-mart/react": "^1.1.1",
         "@gatsbyjs/reach-router": "2.0.1",
-        "@seafile/react-image-lightbox": "^4.0.1",
+        "@seafile/react-image-lightbox": "4.0.2",
         "@seafile/resumablejs": "1.1.16",
         "@seafile/sdoc-editor": "^2.0.8",
         "@seafile/seafile-calendar": "0.0.28",
         "@seafile/seafile-editor": "2.0.0",
-        "@seafile/sf-metadata-ui-component": "^1.0.1",
+        "@seafile/sf-metadata-ui-component": "^1.0.2",
         "@seafile/stldraw-editor": "1.0.0",
         "@uiw/codemirror-extensions-langs": "^4.19.4",
         "@uiw/codemirror-themes": "^4.23.5",
@@ -5213,10 +5213,9 @@
       "license": "MIT"
     },
     "node_modules/@seafile/react-image-lightbox": {
-      "version": "4.0.1",
+      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/@seafile/react-image-lightbox/-/react-image-lightbox-4.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/@seafile/react-image-lightbox/-/react-image-lightbox-4.0.2.tgz",
-      "integrity": "sha512-4m1fMJWVertsvn4o7WqEfvMT8dW2hlm2Qp0CIxDPchRirIMcLQlHRWkMygWmU9m+FDOAw58YZr+9GJ3xbGn/4w==",
+      "integrity": "sha512-rQy2X1JDltLE9hLcOQIee6dxW3UwUtWhjgbcOt/aq1BkqWG3mWzGdnHBUmFGfJMvwdbMgEPbDD3yDErBYy6P3w==",
-      "license": "MIT",
       "dependencies": {
         "prop-types": "^15.8.1",
         "react-modal": "^3.16.1"
@@ -5569,9 +5568,9 @@
       }
     },
     "node_modules/@seafile/sf-metadata-ui-component": {
-      "version": "1.0.1",
+      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@seafile/sf-metadata-ui-component/-/sf-metadata-ui-component-1.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/@seafile/sf-metadata-ui-component/-/sf-metadata-ui-component-1.0.2.tgz",
-      "integrity": "sha512-8uIfcVJMXz1pMe3dKcQOjlN5GB3gGX+dreTDgmLBJ8PyJgkLEGV0n3KdiQJMKLoLsHAj4uer8xZpSoKuf3LEiw==",
+      "integrity": "sha512-soyDV9z1E1wAeW1qFcLmSIRZucX60b1czFcth9yZX5TwPXYA51y07xeXBEPS6URQPQ+0Mx7fQ4eSCkssa/ZNkg==",
       "dependencies": {
         "@seafile/seafile-calendar": "0.0.28",
         "@seafile/seafile-editor": "2.0.0",

frontend/package.json

@@ -9,12 +9,12 @@
     "@emoji-mart/data": "^1.2.1",
     "@emoji-mart/react": "^1.1.1",
     "@gatsbyjs/reach-router": "2.0.1",
-    "@seafile/react-image-lightbox": "4.0.1",
+    "@seafile/react-image-lightbox": "4.0.2",
     "@seafile/resumablejs": "1.1.16",
     "@seafile/sdoc-editor": "^2.0.8",
     "@seafile/seafile-calendar": "0.0.28",
     "@seafile/seafile-editor": "2.0.0",
-    "@seafile/sf-metadata-ui-component": "^1.0.1",
+    "@seafile/sf-metadata-ui-component": "^1.0.2",
     "@seafile/stldraw-editor": "1.0.0",
     "@uiw/codemirror-extensions-langs": "^4.19.4",
     "@uiw/codemirror-themes": "^4.23.5",

frontend/src/assets/icons/left_arrow.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414" xmlns="http://www.w3.org/2000/svg" aria-labelledby="title" viewBox="0 0 32 32" preserveAspectRatio="xMidYMid meet" fill="currentColor" width="48" height="48" title="view-back"><title id="title">view-back</title><g><path d="M19.768,23.89c0.354,-0.424 0.296,-1.055 -0.128,-1.408c-1.645,-1.377 -5.465,-4.762 -6.774,-6.482c1.331,-1.749 5.1,-5.085 6.774,-6.482c0.424,-0.353 0.482,-0.984 0.128,-1.408c-0.353,-0.425 -0.984,-0.482 -1.409,-0.128c-1.839,1.532 -5.799,4.993 -7.2,6.964c-0.219,0.312 -0.409,0.664 -0.409,1.054c0,0.39 0.19,0.742 0.409,1.053c1.373,1.932 5.399,5.462 7.2,6.964l0.001,0.001c0.424,0.354 1.055,0.296 1.408,-0.128Z"></path></g></svg>

frontend/src/assets/icons/right_arrow.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414" xmlns="http://www.w3.org/2000/svg" aria-labelledby="title" viewBox="0 0 32 32" preserveAspectRatio="xMidYMid meet" fill="currentColor" width="48" height="48" title="view-forward"><title id="title">view-forward</title><g><path d="M12.982,23.89c-0.354,-0.424 -0.296,-1.055 0.128,-1.408c1.645,-1.377 5.465,-4.762 6.774,-6.482c-1.331,-1.749 -5.1,-5.085 -6.774,-6.482c-0.424,-0.353 -0.482,-0.984 -0.128,-1.408c0.353,-0.425 0.984,-0.482 1.409,-0.128c1.839,1.532 5.799,4.993 7.2,6.964c0.219,0.312 0.409,0.664 0.409,1.054c0,0.39 -0.19,0.742 -0.409,1.053c-1.373,1.932 -5.399,5.462 -7.2,6.964l-0.001,0.001c-0.424,0.354 -1.055,0.296 -1.408,-0.128Z"></path></g></svg>

frontend/src/components/dialog/image-dialog/index.css

@@ -0,0 +1,101 @@
+.lightbox-side-panel {
+  width: 10px;
+  height: calc(100% - 100px);
+  display: flex;
+  flex-direction: column;
+  top: 50px;
+  right: 0;
+  position: absolute;
+  font-size: 1rem;
+  color: #fff;
+  background-color: #333;
+  border: 1px solid #666;
+  transition: width 0.3s ease;
+}
+
+.lightbox-side-panel .cur-view-detail {
+  background-color: inherit;
+  border: none;
+}
+
+.lightbox-side-panel .side-panel-controller {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  top: 30px;
+  left: -40px;
+  width: 40px;
+  height: 48px;
+  background-color: #333;
+  color: #fff;
+  border: 1px solid #666;
+  border-right: none;
+  border-top-left-radius: 50%;
+  border-bottom-left-radius: 50%;
+  margin-right: -1px;
+  cursor: pointer;
+}
+
+.lightbox-side-panel .side-panel-controller .expand-button {
+  width: 32px;
+  height: 32px;
+  opacity: 0.7;
+  border: none;
+}
+
+.lightbox-side-panel .side-panel-controller:hover .expand-button {
+  opacity: 1;
+}
+
+.lightbox-side-panel .detail-header {
+  width: 100%;
+  height: fit-content;
+  display: flex;
+  padding: 26px 16px;
+  border: none;
+  font-size: 1rem;
+}
+
+.lightbox-side-panel .detail-header .detail-title .name,
+.lightbox-side-panel .file-details-collapse .file-details-collapse-header .file-details-collapse-header-title,
+.lightbox-side-panel .dirent-detail-item .dirent-detail-item-name,
+.lightbox-side-panel .sf-metadata-number-property-detail-editor {
+  color: #fff;
+}
+
+.lightbox-side-panel .detail-body {
+  scrollbar-color: #666 #333;
+  padding: 0 16px 8px;
+}
+
+.lightbox-side-panel .file-details-collapse+.dirent-detail-people {
+  margin-top: 20px;
+}
+
+.lightbox-side-panel .sf-metadata-ui.collaborator-item,
+.lightbox-side-panel .sf-metadata-text-property-detail-editor:not(.formatter),
+.lightbox-side-panel .sf-metadata-number-property-detail-editor:focus {
+  color: #212529;
+}
+
+.lightbox-side-panel .sf-metadata-text-property-detail-editor:not(.formatter) {
+  cursor: text;
+}
+
+.lightbox-side-panel .dirent-detail-item .dirent-detail-item-value:not(.editable) .sf-metadata-record-cell-empty:empty::before,
+.lightbox-side-panel .sf-metadata-property-detail-editor:empty::before,
+.lightbox-side-panel .sf-metadata-property-detail-capture-information-item .dirent-detail-item-value:empty::before,
+.lightbox-side-panel .file-details-collapse .file-details-collapse-header .sf3-font-down,
+.lightbox-side-panel .sf-metadata-number-property-detail-editor::placeholder {
+  color: #999;
+}
+
+.lightbox-side-panel .file-details-collapse .file-details-collapse-header .file-details-collapse-header-operation:hover,
+.lightbox-side-panel .dirent-detail-item .dirent-detail-item-value:hover {
+  background-color: #666;
+}
+
+.lightbox-side-panel .dirent-detail-people {
+  border-top: 1px solid #999;
+}

frontend/src/components/dialog/image-dialog/index.js

@@ -1,13 +1,22 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useState } from 'react';
 import PropTypes from 'prop-types';
-import { gettext } from '../../utils/constants';
+import { gettext } from '../../../utils/constants';
 import Lightbox from '@seafile/react-image-lightbox';
-import { useMetadataAIOperations } from '../../hooks/metadata-ai-operation';
+import { useMetadataAIOperations } from '../../../hooks/metadata-ai-operation';
-import { SYSTEM_FOLDERS } from '../../constants';
+import EmbeddedFileDetails from '../../dirent-detail/embedded-file-details';
+import { SYSTEM_FOLDERS } from '../../../constants';
+import { Utils } from '../../../utils/utils';
+import Icon from '../../icon';
 
 import '@seafile/react-image-lightbox/style.css';
+import './index.css';
+
+const SIDE_PANEL_COLLAPSED_WIDTH = 10;
+const SIDE_PANEL_EXPANDED_WIDTH = 300;
+
+const ImageDialog = ({ repoID, repoInfo, enableRotate: oldEnableRotate = true, imageItems, imageIndex, closeImagePopup, moveToPrevImage, moveToNextImage, onDeleteImage, onRotateImage, isCustomPermission }) => {
+  const [expanded, setExpanded] = useState(false);
 
-const ImageDialog = ({ enableRotate: oldEnableRotate = true, imageItems, imageIndex, closeImagePopup, moveToPrevImage, moveToNextImage, onDeleteImage, onRotateImage }) => {
   const { enableOCR, enableMetadata, canModify, onOCR: onOCRAPI, OCRSuccessCallBack } = useMetadataAIOperations();
 
   const downloadImage = useCallback((url) => {
@@ -18,8 +27,13 @@ const ImageDialog = ({ enableRotate: oldEnableRotate = true, imageItems, imageIn
     window.open(imageItems[imageIndex].url, '_blank');
   }, [imageItems, imageIndex]);
 
+  const onToggleSidePanel = useCallback(() => {
+    setExpanded(!expanded);
+  }, [expanded]);
+
   const imageItemsLength = imageItems.length;
   if (imageItemsLength === 0) return null;
+  const id = imageItems[imageIndex].id;
   const name = imageItems[imageIndex].name;
   const mainImg = imageItems[imageIndex];
   const nextImg = imageItems[(imageIndex + 1) % imageItemsLength];
@@ -39,6 +53,25 @@ const ImageDialog = ({ enableRotate: oldEnableRotate = true, imageItems, imageIn
     onOCR = () => onOCRAPI({ parentDir: mainImg.parentDir, fileName: mainImg.name }, { success_callback: OCRSuccessCallBack });
   }
 
+  const renderSidePanel = () => {
+    const dirent = { id, name, type: 'file' };
+    const path = Utils.joinPath(mainImg.parentDir, name);
+
+    return (
+      <div
+        className="lightbox-side-panel"
+        style={{ width: expanded ? SIDE_PANEL_EXPANDED_WIDTH : SIDE_PANEL_COLLAPSED_WIDTH }}
+        aria-expanded={expanded}
+      >
+        <div className="side-panel-controller" onClick={onToggleSidePanel}>
+          <Icon className="expand-button" symbol={expanded ? 'right_arrow' : 'left_arrow'} />
+        </div>
+        {expanded && (<EmbeddedFileDetails repoID={repoID} repoInfo={repoInfo} path={path} dirent={dirent} />)}
+      </div>
+
+    );
+  };
+
   return (
     <Lightbox
       wrapperClassName='custom-image-previewer'
@@ -64,6 +97,10 @@ const ImageDialog = ({ enableRotate: oldEnableRotate = true, imageItems, imageIn
       onRotateImage={(onRotateImage && enableRotate) ? (angle) => onRotateImage(imageIndex, angle) : null}
       onOCR={onOCR}
       OCRLabel={gettext('OCR')}
+      sidePanel={!isCustomPermission ? {
+        render: renderSidePanel,
+        width: expanded ? SIDE_PANEL_EXPANDED_WIDTH : SIDE_PANEL_COLLAPSED_WIDTH,
+      } : null}
     />
   );
 };

frontend/src/components/dialog/lib-settings.js

@@ -46,8 +46,8 @@ const LibSettingsDialog = ({ repoID, currentRepoInfo, toggleDialog, tab }) => {
 
   const { encrypted, is_admin } = currentRepoInfo;
   const { enableMetadataManagement } = window.app.pageOptions;
-  const { enableFaceRecognition, updateEnableFaceRecognition } = useMetadata();
+  const { updateEnableFaceRecognition } = useMetadata();
-  const { enableMetadata, updateEnableMetadata, enableTags, tagsLang, updateEnableTags, enableOCR, updateEnableOCR } = useMetadataStatus();
+  const { enableMetadata, updateEnableMetadata, enableTags, tagsLang, updateEnableTags, enableOCR, updateEnableOCR, enableFaceRecognition } = useMetadataStatus();
   const enableHistorySetting = is_admin; // repo owner, admin of the department which the repo belongs to, and ...
   const enableAutoDelSetting = is_admin && enableRepoAutoDel;
   const enableExtendedPropertiesSetting = !encrypted && is_admin && enableMetadataManagement;

frontend/src/components/dir-view-mode/dir-files.js

@@ -257,6 +257,7 @@ class DirFiles extends React.Component {
         thumbnail = `${siteRoot}thumbnail/${repoID}/${thumbnailSizeForOriginal}${path}`;
       }
       return {
+        id: item.object.id,
         name,
         parentDir: node.parentNode.path,
         src,
@@ -364,12 +365,11 @@ class DirFiles extends React.Component {
   render() {
     const { repoID, currentRepoInfo, userPerm } = this.props;
     const { encrypted: repoEncrypted } = currentRepoInfo;
-
+    const { isCustomPermission, customPermission } = Utils.getUserPermission(userPerm);
     let canModifyFile = false;
     if (['rw', 'cloud-edit'].indexOf(userPerm) != -1) {
       canModifyFile = true;
     } else {
-      const { isCustomPermission, customPermission } = Utils.getUserPermission(userPerm);
       if (isCustomPermission) {
         const { modify } = customPermission.permission;
         canModifyFile = modify;
@@ -461,6 +461,8 @@ class DirFiles extends React.Component {
         {this.state.isNodeImagePopupOpen && (
           <ModalPortal>
             <ImageDialog
+              repoID={repoID}
+              repoInfo={currentRepoInfo}
               imageItems={this.state.imageNodeItems}
               imageIndex={this.state.imageIndex}
               closeImagePopup={this.closeNodeImagePopup}
@@ -469,6 +471,7 @@ class DirFiles extends React.Component {
               onDeleteImage={this.deleteImage}
               onRotateImage={this.rotateImage}
               enableRotate={canModifyFile}
+              isCustomPermission={isCustomPermission}
             />
           </ModalPortal>
         )}

frontend/src/components/dirent-detail/detail/header/index.js

@@ -10,12 +10,16 @@ const Header = ({ title, icon, iconSize = 32, onClose, children, component = {}
   return (
     <div className="detail-header">
       <Title title={title} icon={icon} iconSize={iconSize} />
-      <div className="detail-control-container">
+      {(children || onClose) && (
-        {children}
+        <div className="detail-control-container">
-        <div className="detail-control" onClick={onClose}>
+          {children}
-          {closeIcon ? closeIcon : <Icon symbol="close" className="detail-control-close" />}
+          {onClose && (
+            <div className="detail-control" onClick={onClose}>
+              {closeIcon ? closeIcon : <Icon symbol="close" className="detail-control-close" />}
+            </div>
+          )}
         </div>
-      </div>
+      )}
     </div>
   );
 };
@@ -26,7 +30,7 @@ Header.propTypes = {
   iconSize: PropTypes.number,
   component: PropTypes.object,
   children: PropTypes.any,
-  onClose: PropTypes.func.isRequired,
+  onClose: PropTypes.func,
 };
 
 export default Header;

frontend/src/components/dirent-detail/dirent-details/file-details/file-tag.js

@@ -0,0 +1,61 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import PropTypes from 'prop-types';
+import { v4 as uuidV4 } from 'uuid';
+import classnames from 'classnames';
+import { getDirentPath } from '../utils';
+import { gettext } from '../../../../utils/constants';
+import EditFileTagPopover from '../../../popover/edit-filetag-popover';
+import FileTagList from '../../../file-tag-list';
+
+const FileTag = ({ repoID, dirent, path, repoTags, fileTagList, onFileTagChanged }) => {
+  const [isEditFileTagShow, setEditFileTagShow] = useState(false);
+  const direntPath = useMemo(() => getDirentPath(dirent, path), [dirent, path]);
+  const tagListTitleID = useMemo(() => `detail-list-view-tags-${uuidV4()}`, []);
+
+  const onEditFileTagToggle = useCallback(() => {
+    setEditFileTagShow(!isEditFileTagShow);
+  }, [isEditFileTagShow]);
+
+  const fileTagChanged = useCallback(() => {
+    onFileTagChanged(dirent, direntPath);
+  }, [dirent, direntPath, onFileTagChanged]);
+
+  return (
+    <>
+      <div
+        className={classnames('sf-metadata-property-detail-tags', { 'tags-empty': !Array.isArray(fileTagList) || fileTagList.length === 0 })}
+        id={tagListTitleID}
+        onClick={onEditFileTagToggle}
+      >
+        {Array.isArray(fileTagList) && fileTagList.length > 0 ? (
+          <FileTagList fileTagList={fileTagList} />
+        ) : (
+          <span className="empty-tip-text">{gettext('Empty')}</span>
+        )}
+      </div>
+      {isEditFileTagShow &&
+        <EditFileTagPopover
+          repoID={repoID}
+          repoTags={repoTags}
+          filePath={direntPath}
+          fileTagList={fileTagList}
+          toggleCancel={onEditFileTagToggle}
+          onFileTagChanged={fileTagChanged}
+          target={tagListTitleID}
+        />
+      }
+    </>
+  );
+};
+
+FileTag.propTypes = {
+  repoID: PropTypes.string,
+  dirent: PropTypes.object,
+  path: PropTypes.string,
+  direntDetail: PropTypes.object,
+  repoTags: PropTypes.array,
+  fileTagList: PropTypes.array,
+  onFileTagChanged: PropTypes.func,
+};
+
+export default FileTag;

frontend/src/components/dirent-detail/dirent-details/file-details/index.js

@@ -1,14 +1,9 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
-import { v4 as uuidV4 } from 'uuid';
 import { Formatter } from '@seafile/sf-metadata-ui-component';
-import classnames from 'classnames';
-import { getDirentPath } from '../utils';
 import DetailItem from '../../detail-item';
 import { CellType, PRIVATE_COLUMN_KEY } from '../../../../metadata/constants';
 import { gettext } from '../../../../utils/constants';
-import EditFileTagPopover from '../../../popover/edit-filetag-popover';
-import FileTagList from '../../../file-tag-list';
 import { Utils } from '../../../../utils/utils';
 import { MetadataDetails, useMetadataDetails } from '../../../../metadata';
 import ObjectUtils from '../../../../metadata/utils/object-utils';
@@ -16,6 +11,8 @@ import { getCellValueByColumn, getDateDisplayString, decimalToExposureTime } fro
 import Collapse from './collapse';
 import { useMetadataStatus } from '../../../../hooks';
 import { CAPTURE_INFO_SHOW_KEY } from '../../../../constants';
+import People from '../../people';
+import FileTag from './file-tag';
 
 import './index.css';
 
@@ -58,14 +55,11 @@ const getImageInfoValue = (key, value) => {
   }
 };
 
-const FileDetails = React.memo(({ repoID, dirent, path, direntDetail, onFileTagChanged, repoTags, fileTagList }) => {
+const FileDetails = React.memo(({ repoID, dirent, path, direntDetail, isShowRepoTags = true, repoTags, fileTagList, onFileTagChanged }) => {
-  const [isEditFileTagShow, setEditFileTagShow] = useState(false);
   const [isCaptureInfoShow, setCaptureInfoShow] = useState(false);
-  const { enableMetadataManagement, enableMetadata } = useMetadataStatus();
+  const { enableFaceRecognition, enableMetadata } = useMetadataStatus();
   const { record } = useMetadataDetails();
 
-  const direntPath = useMemo(() => getDirentPath(dirent, path), [dirent, path]);
-  const tagListTitleID = useMemo(() => `detail-list-view-tags-${uuidV4()}`, []);
   const sizeField = useMemo(() => ({ type: 'size', name: gettext('Size') }), []);
   const lastModifierField = useMemo(() => ({ type: CellType.LAST_MODIFIER, name: gettext('Last modifier') }), []);
   const lastModifiedTimeField = useMemo(() => ({ type: CellType.MTIME, name: gettext('Last modified time') }), []);
@@ -76,14 +70,6 @@ const FileDetails = React.memo(({ repoID, dirent, path, direntDetail, onFileTagC
     setCaptureInfoShow(savedValue);
   }, []);
 
-  const onEditFileTagToggle = useCallback(() => {
-    setEditFileTagShow(!isEditFileTagShow);
-  }, [isEditFileTagShow]);
-
-  const fileTagChanged = useCallback(() => {
-    onFileTagChanged(dirent, direntPath);
-  }, [dirent, direntPath, onFileTagChanged]);
-
   const dom = (
     <>
       <DetailItem field={sizeField} className="sf-metadata-property-detail-formatter">
@@ -104,22 +90,12 @@ const FileDetails = React.memo(({ repoID, dirent, path, direntDetail, onFileTagC
       <DetailItem field={lastModifiedTimeField} className="sf-metadata-property-detail-formatter">
         <Formatter field={lastModifiedTimeField} value={direntDetail.last_modified}/>
       </DetailItem>
-      {window.app.pageOptions.enableFileTags && !enableMetadata && (
+      {isShowRepoTags && window.app.pageOptions.enableFileTags && !enableMetadata && (
         <DetailItem field={tagsField} className="sf-metadata-property-detail-formatter">
-          <div
+          <FileTag repoID={repoID} dirent={dirent} path={path} repoTags={repoTags} fileTagList={fileTagList} onFileTagChanged={onFileTagChanged} />
-            className={classnames('sf-metadata-property-detail-tags', { 'tags-empty': !Array.isArray(fileTagList) || fileTagList.length === 0 })}
-            id={tagListTitleID}
-            onClick={onEditFileTagToggle}
-          >
-            {Array.isArray(fileTagList) && fileTagList.length > 0 ? (
-              <FileTagList fileTagList={fileTagList} />
-            ) : (
-              <span className="empty-tip-text">{gettext('Empty')}</span>
-            )}
-          </div>
         </DetailItem>
       )}
-      {enableMetadataManagement && enableMetadata && (
+      {enableMetadata && (
         <MetadataDetails />
       )}
     </>
@@ -154,22 +130,15 @@ const FileDetails = React.memo(({ repoID, dirent, path, direntDetail, onFileTagC
   return (
     <>
       {component}
-      {isEditFileTagShow &&
+      {enableFaceRecognition && Utils.imageCheck(dirent.name) && (
-        <EditFileTagPopover
+        <People repoID={repoID} record={record} />
-          repoID={repoID}
+      )}
-          repoTags={repoTags}
-          filePath={direntPath}
-          fileTagList={fileTagList}
-          toggleCancel={onEditFileTagToggle}
-          onFileTagChanged={fileTagChanged}
-          target={tagListTitleID}
-        />
-      }
     </>
   );
 }, (props, nextProps) => {
-  const { repoID, repoInfo, dirent, path, direntDetail, repoTags, fileTagList } = props;
+  const { repoID, repoInfo, dirent, path, direntDetail, isShowRepoTags, repoTags, fileTagList } = props;
   const isChanged = (
+    isShowRepoTags !== nextProps.isShowRepoTags ||
     repoID !== nextProps.repoID ||
     path !== nextProps.path ||
     !ObjectUtils.isSameObject(repoInfo, nextProps.repoInfo) ||
@@ -182,11 +151,14 @@ const FileDetails = React.memo(({ repoID, dirent, path, direntDetail, onFileTagC
 });
 
 FileDetails.propTypes = {
+  isShowRepoTags: PropTypes.bool,
   repoID: PropTypes.string,
   repoInfo: PropTypes.object,
   dirent: PropTypes.object,
   path: PropTypes.string,
   direntDetail: PropTypes.object,
+  repoTags: PropTypes.array,
+  fileTagList: PropTypes.array,
   onFileTagChanged: PropTypes.func,
 };
 

frontend/src/components/dirent-detail/embedded-file-details/file-details.js

@@ -1,49 +0,0 @@
-import React, { useMemo } from 'react';
-import PropTypes from 'prop-types';
-import { Formatter } from '@seafile/sf-metadata-ui-component';
-import DetailItem from '../detail-item';
-import { CellType } from '../../../metadata/constants';
-import { gettext } from '../../../utils/constants';
-import { Utils } from '../../../utils/utils';
-import { MetadataDetails } from '../../../metadata';
-import { useMetadataStatus } from '../../../hooks';
-
-const FileDetails = ({ direntDetail }) => {
-  const { enableMetadata } = useMetadataStatus();
-
-  const sizeField = useMemo(() => ({ type: 'size', name: gettext('Size') }), []);
-  const lastModifierField = useMemo(() => ({ type: CellType.LAST_MODIFIER, name: gettext('Last modifier') }), []);
-  const lastModifiedTimeField = useMemo(() => ({ type: CellType.MTIME, name: gettext('Last modified time') }), []);
-
-  return (
-    <>
-      <DetailItem field={sizeField} className="sf-metadata-property-detail-formatter">
-        <Formatter field={sizeField} value={Utils.bytesToSize(direntDetail.size)} />
-      </DetailItem>
-      <DetailItem field={lastModifierField} className="sf-metadata-property-detail-formatter">
-        <Formatter
-          field={lastModifierField}
-          value={direntDetail.last_modifier_email}
-          collaborators={[{
-            name: direntDetail.last_modifier_name,
-            contact_email: direntDetail.last_modifier_contact_email,
-            email: direntDetail.last_modifier_email,
-            avatar_url: direntDetail.last_modifier_avatar,
-          }]}
-        />
-      </DetailItem >
-      <DetailItem field={lastModifiedTimeField} className="sf-metadata-property-detail-formatter">
-        <Formatter field={lastModifiedTimeField} value={direntDetail.last_modified}/>
-      </DetailItem>
-      {enableMetadata && (
-        <MetadataDetails />
-      )}
-    </>
-  );
-};
-
-FileDetails.propTypes = {
-  direntDetail: PropTypes.object,
-};
-
-export default FileDetails;

frontend/src/components/dirent-detail/embedded-file-details/index.js

@@ -1,11 +1,11 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { seafileAPI } from '../../../utils/seafile-api';
 import { Utils } from '../../../utils/utils';
 import toaster from '../../toast';
 import { Header, Body } from '../detail';
-import FileDetails from './file-details';
+import FileDetails from '../dirent-details/file-details';
 import { MetadataContext } from '../../../metadata';
 import { MetadataDetailsProvider } from '../../../metadata/hooks';
 import { AI, Settings } from '../../../metadata/components/metadata-details';
@@ -16,20 +16,38 @@ const EmbeddedFileDetails = ({ repoID, repoInfo, dirent, path, onClose, width =
   const { headerComponent } = component;
   const [direntDetail, setDirentDetail] = useState('');
 
+  const isView = useMemo(() => {
+    const urlParams = new URLSearchParams(window.location.search);
+    return urlParams.has('view');
+  }, []);
+
+  const isTag = useMemo(() => {
+    const urlParams = new URLSearchParams(window.location.search);
+    return urlParams.has('tag');
+  }, []);
+
   useEffect(() => {
-    // init context
-    const context = new MetadataContext();
-    window.sfMetadataContext = context;
-    window.sfMetadataContext.init({ repoID, repoInfo });
     seafileAPI.getFileInfo(repoID, path).then(res => {
       setDirentDetail(res.data);
     }).catch(error => {
       const errMessage = Utils.getErrorMsg(error);
       toaster.danger(errMessage);
     });
+  }, [repoID, path]);
+
+  useEffect(() => {
+    if (isView || isTag) return;
+
+    let isExistContext = true;
+    if (!window.sfMetadataContext) {
+      const context = new MetadataContext();
+      window.sfMetadataContext = context;
+      window.sfMetadataContext.init({ repoID, repoInfo });
+      isExistContext = false;
+    }
 
     return () => {
-      if (window.sfMetadataContext) {
+      if (window.sfMetadataContext && !isExistContext) {
         window.sfMetadataContext.destroy();
         delete window['sfMetadataContext'];
       }
@@ -53,14 +71,18 @@ const EmbeddedFileDetails = ({ repoID, repoInfo, dirent, path, onClose, width =
         })}
         style={{ width }}
       >
-        <Header title={dirent?.name || ''} icon={Utils.getDirentIcon(dirent, true)} onClose={onClose} component={headerComponent} >
+        <Header title={dirent?.name || ''} icon={Utils.getDirentIcon(dirent, true)} onClose={onClose} component={headerComponent}>
-          <AI />
+          {onClose && (
-          <Settings />
+            <>
+              <AI />
+              <Settings />
+            </>
+          )}
         </Header>
         <Body>
           {dirent && direntDetail && (
             <div className="detail-content">
-              <FileDetails direntDetail={direntDetail} />
+              <FileDetails repoID={repoID} isShowRepoTags={false} dirent={dirent} direntDetail={direntDetail} />
             </div>
           )}
         </Body>
@@ -75,7 +97,7 @@ EmbeddedFileDetails.propTypes = {
   path: PropTypes.string.isRequired,
   repoInfo: PropTypes.object.isRequired,
   component: PropTypes.object,
-  onClose: PropTypes.func.isRequired,
+  onClose: PropTypes.func,
 };
 
 export default EmbeddedFileDetails;

frontend/src/components/dirent-detail/people/index.css

@@ -0,0 +1,15 @@
+.dirent-detail-people {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-bottom: 20px;
+  border-top: 1px solid #eee;
+  padding-top: 20px;
+}
+
+.dirent-detail-people .dirent-detail-people-item {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  overflow: hidden;
+}

frontend/src/components/dirent-detail/people/index.js

@@ -0,0 +1,36 @@
+import React, { useCallback, useMemo } from 'react';
+import { PRIVATE_COLUMN_KEY } from '../../../metadata/constants';
+import { gettext, mediaUrl, siteRoot, thumbnailDefaultSize } from '../../../utils/constants';
+import { getCellValueByColumn } from '../../../metadata/utils/cell';
+
+import './index.css';
+
+const People = ({ repoID, record }) => {
+  const images = useMemo(() => {
+    if (!record) return [];
+    const faceLinks = getCellValueByColumn(record, { key: PRIVATE_COLUMN_KEY.FACE_LINKS });
+    if (!faceLinks) return [];
+    return faceLinks.map(item => ({
+      ...item,
+      url: `${siteRoot}thumbnail/${repoID}/${thumbnailDefaultSize}/_Internal/Faces/${item.row_id}.jpg`
+    }));
+  }, [repoID, record]);
+
+  const onImgLoadError = useCallback((e) => {
+    e.target.src = `${mediaUrl}avatars/default.png`;
+  }, []);
+
+  if (!images.length) return null;
+
+  return (
+    <div className="dirent-detail-people">
+      {images.map(img => (
+        <div className="dirent-detail-people-item" key={img.row_id} title={img.display_value || gettext('Unknown people')}>
+          <img src={img.url} alt={img.display_value || gettext('Unknown people')} onError={onImgLoadError} height={32} width={32} />
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default People;

frontend/src/components/dirent-grid-view/dirent-grid-view.js

@@ -6,7 +6,7 @@ import { seafileAPI } from '../../utils/seafile-api';
 import URLDecorator from '../../utils/url-decorator';
 import Loading from '../loading';
 import ModalPortal from '../modal-portal';
-import ImageDialog from '../../components/dialog/image-dialog';
+import ImageDialog from '../dialog/image-dialog';
 import DirentGridItem from '../../components/dirent-grid-view/dirent-grid-item';
 import ContextMenu from '../context-menu/context-menu';
 import { hideMenu, showMenu } from '../context-menu/actions';
@@ -618,6 +618,7 @@ class DirentGridView extends React.Component {
     }
 
     return {
+      id: item.id,
       name,
       thumbnail,
       src,
@@ -860,11 +861,11 @@ class DirentGridView extends React.Component {
 
     let canModifyFile = false;
     let canDeleteFile = false;
+    const { isCustomPermission, customPermission } = Utils.getUserPermission(userPerm);
     if (['rw', 'cloud-edit'].indexOf(userPerm) != -1) {
       canModifyFile = true;
       canDeleteFile = true;
     } else {
-      const { isCustomPermission, customPermission } = Utils.getUserPermission(userPerm);
       if (isCustomPermission) {
         const { modify, delete: canDelete } = customPermission.permission;
         canModifyFile = modify;
@@ -1042,6 +1043,8 @@ class DirentGridView extends React.Component {
         {this.state.isImagePopupOpen && this.state.imageItems.length && (
           <ModalPortal>
             <ImageDialog
+              repoID={this.props.repoID}
+              repoInfo={this.props.currentRepoInfo}
               imageItems={this.state.imageItems}
               imageIndex={this.state.imageIndex}
               closeImagePopup={this.closeImagePopup}
@@ -1050,6 +1053,7 @@ class DirentGridView extends React.Component {
               onDeleteImage={(canDeleteFile && this.deleteImage) ? this.deleteImage : null}
               onRotateImage={this.rotateImage}
               enableRotate={canModifyFile}
+              isCustomPermission={isCustomPermission}
             />
           </ModalPortal>
         )}

frontend/src/components/dirent-list-view/dirent-list-view.js

@@ -205,6 +205,7 @@ class DirentListView extends React.Component {
     }
 
     return {
+      id: item.id,
       name,
       thumbnail,
       src,
@@ -765,11 +766,11 @@ class DirentListView extends React.Component {
 
     let canModifyFile = false;
     let canDeleteFile = false;
+    const { isCustomPermission, customPermission } = Utils.getUserPermission(userPerm);
     if (['rw', 'cloud-edit'].indexOf(userPerm) != -1) {
       canModifyFile = true;
       canDeleteFile = true;
     } else {
-      const { isCustomPermission, customPermission } = Utils.getUserPermission(userPerm);
       if (isCustomPermission) {
         const { modify, delete: canDelete } = customPermission.permission;
         canModifyFile = modify;
@@ -872,6 +873,8 @@ class DirentListView extends React.Component {
           {this.state.isImagePopupOpen && (
             <ModalPortal>
               <ImageDialog
+                repoID={this.props.repoID}
+                repoInfo={this.props.currentRepoInfo}
                 imageItems={this.state.imageItems}
                 imageIndex={this.state.imageIndex}
                 closeImagePopup={this.closeImagePopup}
@@ -880,6 +883,7 @@ class DirentListView extends React.Component {
                 onDeleteImage={(canDeleteFile && this.deleteImage) ? this.deleteImage : null}
                 onRotateImage={this.rotateImage}
                 enableRotate={canModifyFile}
+                isCustomPermission={isCustomPermission}
               />
             </ModalPortal>
           )}

frontend/src/hooks/metadata-status.js

@@ -21,6 +21,7 @@ export const MetadataStatusProvider = ({ repoID, repoInfo, hideMetadataView, chi
   const [enableOCR, setEnableOCR] = useState(false);
   const [detailsSettings, setDetailsSettings] = useState({});
   const [isBeingBuilt, setIsBeingBuilt] = useState(false);
+  const [enableFaceRecognition, setEnableFaceRecognition] = useState(false);
 
   const cancelMetadataURL = useCallback((isSetRoot = false) => {
     // If attribute extension is turned off, unmark the URL
@@ -39,6 +40,7 @@ export const MetadataStatusProvider = ({ repoID, repoInfo, hideMetadataView, chi
     setEnableMetadata(false);
     setEnableTags(false);
     setEnableOCR(false);
+    setEnableFaceRecognition(false);
     setDetailsSettings({});
     setIsBeingBuilt(false);
     if (!enableMetadataManagement) {
@@ -52,7 +54,8 @@ export const MetadataStatusProvider = ({ repoID, repoInfo, hideMetadataView, chi
         tags_enabled: enableTags,
         tags_lang: tagsLang,
         details_settings: detailsSettings,
-        ocr_enabled: enableOCR
+        ocr_enabled: enableOCR,
+        face_recognition_enabled: enableFaceRecognition,
       } = res.data;
       if (!enableMetadata) {
         cancelMetadataURL();
@@ -61,6 +64,7 @@ export const MetadataStatusProvider = ({ repoID, repoInfo, hideMetadataView, chi
       setTagsLang(tagsLang || 'en');
       setDetailsSettings(JSON.parse(detailsSettings));
       setEnableOCR(enableOCR);
+      setEnableFaceRecognition(enableFaceRecognition);
       setEnableMetadata(enableMetadata);
       setLoading(false);
     }).catch(error => {
@@ -97,6 +101,11 @@ export const MetadataStatusProvider = ({ repoID, repoInfo, hideMetadataView, chi
     setEnableOCR(newValue);
   }, [enableOCR]);
 
+  const updateEnableFaceRecognition = useCallback((newValue) => {
+    if (newValue === enableFaceRecognition) return;
+    setEnableFaceRecognition(newValue);
+  }, [enableFaceRecognition]);
+
   const modifyDetailsSettings = useCallback((update) => {
     metadataAPI.modifyMetadataDetailsSettings(repoID, update).then(res => {
       const newDetailsSettings = { ...detailsSettings, ...update };
@@ -122,6 +131,8 @@ export const MetadataStatusProvider = ({ repoID, repoInfo, hideMetadataView, chi
         modifyDetailsSettings,
         enableOCR,
         updateEnableOCR,
+        enableFaceRecognition,
+        updateEnableFaceRecognition,
       }}
     >
       {!isLoading && (

frontend/src/metadata/components/cell-editors/long-text-editor/index.css

@@ -1,3 +0,0 @@
-.sf-metadata-long-text-editor-dialog {
-  z-index: 1049 !important;
-}

frontend/src/metadata/components/cell-editors/long-text-editor/index.js

@@ -9,8 +9,6 @@ import { lang, serviceURL } from '../../../../utils/constants';
 import { LONG_TEXT_EXCEED_LIMIT_MESSAGE, LONG_TEXT_EXCEED_LIMIT_SUGGEST } from '../../../constants';
 import i18n from '../../../../_i18n/i18n-seafile-editor';
 
-import './index.css';
-
 class LongTextEditor extends React.PureComponent {
 
   constructor(props) {

frontend/src/metadata/components/cell-formatter/image-previewer.js

@@ -98,6 +98,8 @@ const ImagePreviewer = ({ record, table, repoID, repoInfo, closeImagePopup, dele
   return (
     <ModalPortal>
       <ImageDialog
+        repoID={repoID}
+        repoInfo={repoInfo}
         imageItems={imageItems}
         imageIndex={imageIndex}
         closeImagePopup={closeImagePopup}

frontend/src/metadata/components/metadata-details/location/index.js

@@ -104,7 +104,7 @@ class Location extends React.Component {
       const gcPosition = wgs84_to_gcj02(position.lng, position.lat);
       const bdPosition = gcj02_to_bd09(gcPosition.lng, gcPosition.lat);
       const { lng, lat } = bdPosition;
-      this.map = new window.BMapGL.Map('sf-geolocation-map-container', { enableMapClick: false });
+      this.map = new window.BMapGL.Map(this.ref, { enableMapClick: false });
       const point = new window.BMapGL.Point(lng, lat);
       this.map.centerAndZoom(point, 16);
       this.map.enableScrollWheelZoom(true);

frontend/src/metadata/hooks/metadata-details.js

@@ -72,6 +72,7 @@ export const MetadataDetailsProvider = ({ repoID, repoInfo, path, dirent, dirent
       setRecord({ ...record, ...update });
       if (window?.sfMetadataContext?.eventBus) {
         window.sfMetadataContext.eventBus.dispatch(EVENT_BUS_TYPE.LOCAL_RECORD_CHANGED, { recordId }, update);
+        window.sfMetadataContext.eventBus.dispatch(EVENT_BUS_TYPE.LOCAL_RECORD_DETAIL_CHANGED, recordId, update);
       }
     }).catch(error => {
       const errorMsg = Utils.getErrorMsg(error);

frontend/src/metadata/hooks/metadata.js

@@ -17,14 +17,13 @@ const MetadataContext = React.createContext(null);
 
 export const MetadataProvider = ({ repoID, currentPath, repoInfo, selectMetadataView, children }) => {
   const [isLoading, setLoading] = useState(true);
-  const [enableFaceRecognition, setEnableFaceRecognition] = useState(false);
   const [navigation, setNavigation] = useState([]);
   const [idViewMap, setIdViewMap] = useState({});
 
   const collapsedFoldersIds = useRef([]);
   const originalTitleRef = useRef(document.title);
 
-  const { enableMetadata, isBeingBuilt, setIsBeingBuilt } = useMetadataStatus();
+  const { enableMetadata, enableFaceRecognition, isBeingBuilt, setIsBeingBuilt, updateEnableFaceRecognition: updateEnableFaceRecognitionAPI } = useMetadataStatus();
 
   const getCollapsedFolders = useCallback(() => {
     const strFoldedFolders = window.localStorage.getItem(`${CACHED_COLLAPSED_FOLDERS_PREFIX}-${repoID}`);
@@ -70,27 +69,12 @@ export const MetadataProvider = ({ repoID, currentPath, repoInfo, selectMetadata
       });
       return;
     }
-    setEnableFaceRecognition(false);
     setNavigation([]);
     setIdViewMap({});
     setLoading(false);
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [enableMetadata]);
 
-  useEffect(() => {
-    if (!enableMetadata) {
-      setEnableFaceRecognition(false);
-      return;
-    }
-    metadataAPI.getFaceRecognitionStatus(repoID).then(res => {
-      setEnableFaceRecognition(res.data.enabled);
-    }).catch(error => {
-      const errorMsg = Utils.getErrorMsg(error);
-      toaster.danger(errorMsg);
-    });
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [enableMetadata]);
-
   const getFirstView = useCallback(() => {
     const firstViewNav = navigation.find(item => item.type === VIEWS_TYPE_VIEW);
     const firstView = firstViewNav ? idViewMap[firstViewNav._id] : null;
@@ -394,8 +378,8 @@ export const MetadataProvider = ({ repoID, currentPath, repoInfo, selectMetadata
         deleteView({ folderId, viewId: FACE_RECOGNITION_VIEW_ID, isSelected });
       }
     }
-    setEnableFaceRecognition(newValue);
+    updateEnableFaceRecognitionAPI(newValue);
-  }, [enableFaceRecognition, currentPath, idViewMap, navigation, addView, deleteView]);
+  }, [enableFaceRecognition, currentPath, idViewMap, navigation, addView, deleteView, updateEnableFaceRecognitionAPI]);
 
   const modifyViewType = useCallback((viewId, update) => {
     metadataAPI.modifyView(repoID, viewId, update).then(res => {

frontend/src/metadata/views/gallery/main.js

@@ -35,6 +35,7 @@ const Main = ({ isLoadingMore, metadata, onDelete, onLoadMore, duplicateRecord,
   const lastState = useRef({ scrollPos: 0 });
 
   const { repoID, updateCurrentDirent } = useMetadataView();
+  const repoInfo = window.sfMetadataContext.getSetting('repoInfo');
 
   const images = useMemo(() => {
     if (isFirstLoading) return [];
@@ -424,6 +425,8 @@ const Main = ({ isLoadingMore, metadata, onDelete, onLoadMore, duplicateRecord,
       {isImagePopupOpen && (
         <ModalPortal>
           <ImageDialog
+            repoID={repoID}
+            repoInfo={repoInfo}
             imageItems={images}
             imageIndex={imageIndex}
             closeImagePopup={closeImagePopup}

frontend/src/shared-dir-view.js

@@ -922,12 +922,15 @@ class SharedDirView extends React.Component {
         {this.state.isImagePopupOpen &&
         <ModalPortal>
           <ImageDialog
+            repoID={repoID}
+            repoInfo={{ 'permission': 'r' }}
             imageItems={this.state.imageItems}
             imageIndex={this.state.imageIndex}
             closeImagePopup={this.closeImagePopup}
             moveToPrevImage={this.moveToPrevImage}
             moveToNextImage={this.moveToNextImage}
             enableRotate={false}
+            isCustomPermission={true}
           />
         </ModalPortal>
         }

seahub/repo_metadata/apis.py

@@ -52,6 +52,7 @@ class MetadataManage(APIView):
         tags_lang = ''
         details_settings = '{}'
         is_ocr_enabled = False
+        face_recognition_enabled = False
 
         try:
             record = RepoMetadata.objects.filter(repo_id=repo_id).first()
@@ -65,6 +66,8 @@ class MetadataManage(APIView):
                     tags_lang = record.tags_lang
                 if record.ocr_enabled:
                     is_ocr_enabled = True
+                if record.face_recognition_enabled:
+                    face_recognition_enabled = True
         except Exception as e:
             logger.error(e)
             error_msg = 'Internal Server Error'
@@ -73,9 +76,10 @@ class MetadataManage(APIView):
         return Response({
             'enabled': is_enabled,
             'tags_enabled': is_tags_enabled,
+            'ocr_enabled': is_ocr_enabled,
+            'face_recognition_enabled': face_recognition_enabled,
             'tags_lang': tags_lang,
             'details_settings': details_settings,
-            'ocr_enabled': is_ocr_enabled
         })
 
     def put(self, request, repo_id):