optimize_file_details (#6868)

* optimize_file_details

* feat: optimize ui

* feat: optimize ui

* feat: optimize ui

---------

Co-authored-by: zheng.shen <zheng.shen@seafile.com>
Co-authored-by: 杨国璇 <ygx@Hello-word.local>

frontend/src/components/dirent-detail/dirent-details/file-details/collapse/index.css

@@ -0,0 +1,55 @@
+.file-details-collapse {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: auto;
+  margin-bottom: 10px;
+}
+
+.file-details-collapse .file-details-collapse-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 8px;
+  height: 28px;
+  width: 100%;
+  border-radius: 3px;
+  border: 1px solid rgba(69, 170, 242, 0);
+}
+
+.file-details-collapse .file-details-collapse-header:hover {
+  background-color: #F0F0F0;
+}
+
+.file-details-collapse .file-details-collapse-header .file-details-collapse-header-title {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: default;
+  color: #666;
+  font-size: 14px;
+}
+
+.file-details-collapse .file-details-collapse-header .file-details-collapse-header-operation {
+  height: 20px;
+  width: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 4px;
+}
+
+.file-details-collapse .file-details-collapse-header .file-details-collapse-header-operation:hover {
+  background-color: #DBDBDB;
+  cursor: pointer;
+  border-radius: 3px;
+}
+
+.file-details-collapse .file-details-collapse-header .sf3-font-down {
+  color: #666666;
+}
+
+.file-details-collapse .file-details-collapse-body {
+  padding: 0 4px;
+}

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

@@ -0,0 +1,38 @@
+import React, { useState, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+import './index.css';
+
+const Collapse = ({ className, title, children, isCollapse = true }) => {
+  const [showChildren, setShowChildren] = useState(isCollapse);
+
+  const toggleShowChildren = useCallback(() => {
+    setShowChildren(!showChildren);
+  }, [showChildren]);
+
+  return (
+    <div className={classnames('file-details-collapse', className)}>
+      <div className="file-details-collapse-header">
+        <div className="file-details-collapse-header-title">{title}</div>
+        <div className="file-details-collapse-header-operation" onClick={toggleShowChildren}>
+          <i className={`sf3-font sf3-font-down ${showChildren ? '' : 'rotate-90'}`}></i>
+        </div>
+      </div>
+      {showChildren && (
+        <div className="file-details-collapse-body">
+          {children}
+        </div>
+      )}
+    </div>
+  );
+};
+
+Collapse.propTypes = {
+  isCollapse: PropTypes.bool,
+  className: PropTypes.string,
+  title: PropTypes.string,
+  children: PropTypes.any,
+};
+
+export default Collapse;

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

@@ -0,0 +1,20 @@
+.sf-metadata-property-detail-capture-information-item .dirent-detail-item-name {
+  font-size: 12px;
+  min-height: 24px;
+  padding: 3px 6px;
+  word-break: break-all;
+}
+
+.sf-metadata-property-detail-capture-information-item .dirent-detail-item-value {
+  font-size: 12px;
+  min-height: 24px;
+  padding: 3px 6px;
+  display: block;
+  word-break: break-all;
+}
+
+.sf-metadata-property-detail-capture-information-item .dirent-detail-item-value:empty::before {
+  content: attr(placeholder);
+  color: #666;
+  font-size: 12px;
+}

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

@@ -3,19 +3,65 @@ 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 } 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, useMetadata } from '../../../metadata';
-import ObjectUtils from '../../../metadata/utils/object-utils';
+import { getDirentPath } from '../utils';
+import DetailItem from '../../detail-item';
+import { CellType, GEOLOCATION_FORMAT, 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, useMetadata } from '../../../../metadata';
+import ObjectUtils from '../../../../metadata/utils/object-utils';
+import { getCellValueByColumn, getDateDisplayString, getGeolocationDisplayString,
+  decimalToExposureTime,
+} from '../../../../metadata/utils/cell';
+import Collapse from './collapse';
+
+import './index.css';
+
+const getImageInfoName = (key) => {
+  switch (key) {
+    case 'Dimensions':
+      return gettext('Dimensions');
+    case 'Device make':
+      return gettext('Device make');
+    case 'Device model':
+      return gettext('Device model');
+    case 'Color space':
+      return gettext('Color space');
+    case 'Capture time':
+      return gettext('Capture time');
+    case 'Focal length':
+      return gettext('Focal length');
+    case 'F number':
+      return gettext('F number');
+    case 'Exposure time':
+      return gettext('Exposure time');
+    default:
+      return key;
+  }
+};
+
+const getImageInfoValue = (key, value) => {
+  if (!value) return value;
+  switch (key) {
+    case 'Dimensions':
+      return value.replace('x', ' x ');
+    case 'Capture time':
+      return getDateDisplayString(value, 'YYYY-MM-DD HH:mm:ss');
+    case 'Focal length':
+      return value.replace('mm', ' ' + gettext('mm'));
+    case 'Exposure time':
+      return decimalToExposureTime(value) + ' ' + gettext('s');
+    default:
+      return value;
+  }
+};
 
 const FileDetails = React.memo(({ repoID, repoInfo, dirent, path, direntDetail, onFileTagChanged, repoTags, fileTagList }) => {
   const [isEditFileTagShow, setEditFileTagShow] = useState(false);
   const { enableMetadata } = useMetadata();
+  const [record, setRecord] = useState(null);
 
   const direntPath = useMemo(() => getDirentPath(dirent, path), [dirent, path]);
   const tagListTitleID = useMemo(() => `detail-list-view-tags-${uuidV4()}`, []);
@@ -32,7 +78,11 @@ const FileDetails = React.memo(({ repoID, repoInfo, dirent, path, direntDetail,
     onFileTagChanged(dirent, direntPath);
   }, [dirent, direntPath, onFileTagChanged]);
 
-  return (
+  const updateRecord = useCallback((record) => {
+    setRecord(record);
+  }, []);
+
+  const dom = (
     <>
       <DetailItem field={sizeField} className="sf-metadata-property-detail-formatter">
         <Formatter field={sizeField} value={Utils.bytesToSize(direntDetail.size)} />
@@ -68,8 +118,47 @@ const FileDetails = React.memo(({ repoID, repoInfo, dirent, path, direntDetail,
         </DetailItem>
       )}
       {window.app.pageOptions.enableMetadataManagement && enableMetadata && (
-        <MetadataDetails repoID={repoID} filePath={direntPath} repoInfo={repoInfo} direntType="file" />
+        <MetadataDetails repoID={repoID} filePath={direntPath} repoInfo={repoInfo} direntType="file" updateRecord={updateRecord} />
       )}
+    </>
+  );
+
+  let component = dom;
+  if (Utils.imageCheck(dirent.name)) {
+    const fileDetails = getCellValueByColumn(record, { key: PRIVATE_COLUMN_KEY.FILE_DETAILS });
+    const fileDetailsJson = JSON.parse(fileDetails?.slice(9, -7) || '{}');
+    const fileLocation = getCellValueByColumn(record, { key: PRIVATE_COLUMN_KEY.LOCATION });
+
+    component = (
+      <>
+        <Collapse title={gettext('General information')}>
+          {dom}
+        </Collapse>
+        <Collapse title={gettext('Capture information')}>
+          {Object.entries(fileDetailsJson).map(item => {
+            return (
+              <div className="dirent-detail-item sf-metadata-property-detail-capture-information-item" key={item[0]}>
+                <div className="dirent-detail-item-name">{getImageInfoName(item[0])}</div>
+                <div className="dirent-detail-item-value" placeholder={gettext('Empty')}>{getImageInfoValue(item[0], item[1])}</div>
+              </div>
+            );
+          })}
+          {fileLocation && (
+            <div className="dirent-detail-item sf-metadata-property-detail-capture-information-item" key={'location'}>
+              <div className="dirent-detail-item-name">{gettext('Location')}</div>
+              <div className="dirent-detail-item-value" placeholder={gettext('Empty')}>
+                {getGeolocationDisplayString(fileLocation, { geo_format: GEOLOCATION_FORMAT.LNG_LAT })}
+              </div>
+            </div>
+          )}
+        </Collapse>
+      </>
+    );
+  }
+
+  return (
+    <>
+      {component}
       {isEditFileTagShow &&
         <EditFileTagPopover
           repoID={repoID}

frontend/src/components/tree-section/index.js

@@ -45,7 +45,7 @@ const TreeSection = ({ title, children, moreKey, moreOperations, moreOperationCl
   }, []);
 
   return (
-    <div className={classnames('tree-section', { [className]: className })}>
+    <div className={classnames('tree-section', className)}>
       <div
         className={classnames('tree-section-header', { 'tree-section-header-hover': highlight })}
         onMouseEnter={onMouseEnter}

frontend/src/metadata/components/metadata-details/constants.js

@@ -17,6 +17,8 @@ export const NOT_DISPLAY_COLUMN_KEYS = [
   PRIVATE_COLUMN_KEY.OBJ_ID,
   PRIVATE_COLUMN_KEY.SIZE,
   PRIVATE_COLUMN_KEY.SUFFIX,
+  PRIVATE_COLUMN_KEY.FILE_DETAILS,
+  PRIVATE_COLUMN_KEY.LOCATION
 ];
 
 export const SYSTEM_FOLDERS = [

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

@@ -16,7 +16,7 @@ import { SYSTEM_FOLDERS } from './constants';
 
 import './index.css';
 
-const MetadataDetails = ({ repoID, filePath, repoInfo, direntType }) => {
+const MetadataDetails = ({ repoID, filePath, repoInfo, direntType, updateRecord }) => {
   const [isLoading, setLoading] = useState(true);
   const [metadata, setMetadata] = useState({ record: {}, fields: [] });
   const permission = useMemo(() => repoInfo.permission !== 'admin' && repoInfo.permission !== 'rw' ? 'r' : 'rw', [repoInfo]);
@@ -37,10 +37,8 @@ const MetadataDetails = ({ repoID, filePath, repoInfo, direntType }) => {
     metadataAPI.getMetadataRecordInfo(repoID, parentDir, fileName).then(res => {
       const { results, metadata } = res.data;
       const record = Array.isArray(results) && results.length > 0 ? results[0] : {};
-      let fields = normalizeFields(metadata).map(field => new Column(field));
-      if (!Utils.imageCheck(fileName)) {
-        fields = fields.filter(filed => filed.key !== PRIVATE_COLUMN_KEY.LOCATION);
-      }
+      const fields = normalizeFields(metadata).map(field => new Column(field));
+      updateRecord && updateRecord(record);
       setMetadata({ record, fields });
       setLoading(false);
     }).catch(error => {
@@ -48,7 +46,7 @@ const MetadataDetails = ({ repoID, filePath, repoInfo, direntType }) => {
       toaster.danger(errMessage);
       setLoading(false);
     });
-  }, [repoID, filePath, direntType]);
+  }, [repoID, filePath, direntType, updateRecord]);
 
   const onChange = useCallback((fieldKey, newValue) => {
     const { record, fields } = metadata;
@@ -132,6 +130,7 @@ MetadataDetails.propTypes = {
   repoInfo: PropTypes.object,
   direntType: PropTypes.string,
   direntDetail: PropTypes.object,
+  updateRecord: PropTypes.func,
 };
 
 export default MetadataDetails;

frontend/src/metadata/utils/cell/column/geolocation.js

@@ -1,6 +1,32 @@
 import { GROUP_GEOLOCATION_GRANULARITY, GEOLOCATION_FORMAT } from '../../../constants';
 import { isValidPosition } from '../../validate';
 
+const _convertLatitudeDecimalToDMS = (latitudeDecimal) => {
+  if (!latitudeDecimal && latitudeDecimal !== 0) return '';
+  if (latitudeDecimal < -90 || latitudeDecimal > 90) {
+    return '';
+  }
+  const degrees = Math.floor(Math.abs(latitudeDecimal));
+  const minutesDecimal = (Math.abs(latitudeDecimal) - degrees) * 60;
+  const minutes = Math.floor(minutesDecimal);
+  const seconds = Math.round((minutesDecimal - minutes) * 60);
+  const latitudeNS = latitudeDecimal >= 0 ? 'N' : 'S';
+  return `${latitudeNS}${degrees}°${minutes}'${seconds}"`;
+};
+
+const _convertLongitudeDecimalToDMS = (longitudeDecimal) => {
+  if (!longitudeDecimal && longitudeDecimal !== 0) return '';
+  if (longitudeDecimal < -180 || longitudeDecimal > 180) {
+    return '';
+  }
+  const degrees = Math.floor(Math.abs(longitudeDecimal));
+  const minutesDecimal = (Math.abs(longitudeDecimal) - degrees) * 60;
+  const minutes = Math.floor(minutesDecimal);
+  const seconds = Math.round((minutesDecimal - minutes) * 60);
+  const longitudeNS = longitudeDecimal >= 0 ? 'E' : 'W';
+  return `${longitudeNS}${degrees}°${minutes}'${seconds}"`;
+};
+
 /**
  * Get formatted geolocation
  * @param {object} loc
@@ -16,7 +42,9 @@ const getGeolocationDisplayString = (loc, formats, { isBaiduMap = true, hyphen =
     case GEOLOCATION_FORMAT.LNG_LAT: {
       const { lng, lat } = loc;
       if (!isValidPosition(lng, lat)) return '';
-      return isBaiduMap ? `${lng}, ${lat}` : `${lat}, ${lng}`;
+      const lngDMS = _convertLongitudeDecimalToDMS(lng);
+      const latDMS = _convertLatitudeDecimalToDMS(lat);
+      return `${latDMS}, ${lngDMS}`;
     }
     case GEOLOCATION_FORMAT.COUNTRY_REGION: {
       const { country_region } = loc;

frontend/src/metadata/utils/cell/column/index.js

@@ -6,6 +6,7 @@ export {
   formatStringToNumber,
   formatTextToNumber,
   getFloatNumber,
+  decimalToExposureTime,
 } from './number';
 export {
   checkIsPredefinedOption,

frontend/src/metadata/utils/cell/column/number.js

@@ -281,6 +281,15 @@ const formatTextToNumber = (value) => {
   return isNaN(newData) ? null : newData;
 };
 
+const decimalToExposureTime = (decimal) => {
+  if (!decimal) return 0;
+  const integerPart = Math.floor(decimal);
+  const decimalPart = decimal - integerPart;
+  if (integerPart > 0) return integerPart;
+  const denominator = Math.round(1 / decimalPart);
+  return '1/' + denominator;
+};
+
 export {
   getPrecisionNumber,
   getNumberDisplayString,
@@ -288,4 +297,5 @@ export {
   formatStringToNumber,
   formatTextToNumber,
   getFloatNumber,
+  decimalToExposureTime,
 };

frontend/src/metadata/utils/cell/index.js

@@ -32,6 +32,7 @@ export {
   getFloatNumber,
   getColumnOptionNamesByIds,
   getColumnOptionIdsByNames,
+  decimalToExposureTime,
 } from './column';
 
 export { isCellValueChanged } from './cell-comparer';