optimize

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

@@ -61,9 +61,8 @@ const ImageDialog = ({ repoID, repoInfo, enableRotate: oldEnableRotate, imageIte
         className="lightbox-side-panel"
         style={{ width: expanded ? `${SIDE_PANEL_EXPANDED_WIDTH}px` : `${SIDE_PANEL_COLLAPSED_WIDTH}px` }}
         aria-expanded={expanded}
-        onClick={onToggleSidePanel}
       >
-        <div className="side-panel-controller">
+        <div className="side-panel-controller" onClick={onToggleSidePanel}>
           <Icon className="expand-button" symbol={expanded ? 'right_arrow' : 'left_arrow'} />
         </div>
         {expanded && (

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { seafileAPI } from '../../../utils/seafile-api';
@@ -16,6 +16,16 @@ 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(() => {
     seafileAPI.getFileInfo(repoID, path).then(res => {
       setDirentDetail(res.data);
@@ -26,7 +36,7 @@ const EmbeddedFileDetails = ({ repoID, repoInfo, dirent, path, onClose, width =
   }, [repoID, path]);
 
   useEffect(() => {
-    if (withinImageDialog) return;
+    if (isView || isTag) return;
     // init context
     const context = new MetadataContext();
     window.sfMetadataContext = context;