optimize thumbnail size in gallery (#7486)

Co-authored-by: zhouwenxuan <[email protected]>

Author: Aries-0331

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

@@ -169,6 +169,7 @@ const Content = ({
                       isSelected={isSelected}
                       img={img}
                       size={size.large}
+                      useOriginalThumbnail={children.length === 1}
                       style={mode !== GALLERY_DATE_MODE.ALL && newChildren.length === 1 ? { width: '100%' } : {}}
                       { ...imgEvents }
                     />

frontend/src/metadata/views/gallery/day-images/images-grid.js

@@ -55,8 +55,8 @@ const ImagesGrid = ({ images, selectedImageIds, size, imgEvents }) => {
 
     return (
       <>
-        <Image key={firstImg.id} isSelected={selectedImageIds.includes(firstImg.id)} img={firstImg} size={size.large} style={{ gridRow: 1 / 3, gridColumn: `${1 + firstImgOffset} / ${3 + firstImgOffset}` }} {...imgEvents} />
-        <Image key={secondImg.id} isSelected={selectedImageIds.includes(secondImg.id)} img={secondImg} size={size.middle} style={style[0]} {...imgEvents} />
+        <Image key={firstImg.id} isSelected={selectedImageIds.includes(firstImg.id)} img={firstImg} size={size.large} useOriginalThumbnail={true} style={{ gridRow: 1 / 3, gridColumn: `${1 + firstImgOffset} / ${3 + firstImgOffset}` }} {...imgEvents} />
+        <Image key={secondImg.id} isSelected={selectedImageIds.includes(secondImg.id)} img={secondImg} size={size.middle} useOriginalThumbnail={true} style={style[0]} {...imgEvents} />
         {others.slice(0, 5).map((image, index) => {
           return (<Image key={image.id} isSelected={selectedImageIds.includes(image.id)} img={image} size={size.small} style={style[index + 1] || {}} {...imgEvents} />);
         })}
@@ -194,8 +194,8 @@ const ImagesGrid = ({ images, selectedImageIds, size, imgEvents }) => {
 
   return (
     <>
-      <Image key={firstImg.id} isSelected={selectedImageIds.includes(firstImg.id)} img={firstImg} size={size.middle} style={style[0]} {...imgEvents} />
-      <Image key={secondImg.id} isSelected={selectedImageIds.includes(secondImg.id)} img={secondImg} size={size.middle} style={style[1]} {...imgEvents} />
+      <Image key={firstImg.id} isSelected={selectedImageIds.includes(firstImg.id)} img={firstImg} size={size.middle} useOriginalThumbnail={true} style={style[0]} {...imgEvents} />
+      <Image key={secondImg.id} isSelected={selectedImageIds.includes(secondImg.id)} img={secondImg} size={size.middle} useOriginalThumbnail={true} style={style[1]} {...imgEvents} />
       {others.slice(0, 10).map((image, index) => {
         return (<Image key={image.id} isSelected={selectedImageIds.includes(image.id)} img={image} size={size.small} style={style[index + 2] || {}} {...imgEvents} />);
       })}

frontend/src/metadata/views/gallery/day-images/index.js

@@ -8,12 +8,12 @@ const DayImages = ({ size, selectedImageIds, images, imgEvents }) => {
   if (imagesCount === 0) return null;
   if (imagesCount === 1) {
     const img = images[0];
-    return (<Image isSelected={selectedImageIds.includes(img.id)} img={img} size={size.large} style={{ width: '100%' }} {...imgEvents} />);
+    return (<Image isSelected={selectedImageIds.includes(img.id)} img={img} size={size.large} useOriginalThumbnail={true} style={{ width: '100%' }} {...imgEvents} />);
   }
 
   if (imagesCount < 7) {
     const imgs = images.slice(0, 2);
-    return imgs.map(img => (<Image key={img.id} isSelected={selectedImageIds.includes(img.id)} img={img} size={size.large} {...imgEvents} />));
+    return imgs.map(img => (<Image key={img.id} isSelected={selectedImageIds.includes(img.id)} img={img} size={size.large} useOriginalThumbnail={true} {...imgEvents} />));
   }
 
   return (<ImagesGrid selectedImageIds={selectedImageIds} images={images} size={size} imgEvents={imgEvents} />);

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

@@ -6,6 +6,7 @@ const Image = ({
   isSelected,
   img,
   size,
+  useOriginalThumbnail,
   style,
   onClick,
   onDoubleClick,
@@ -31,7 +32,7 @@ const Image = ({
     >
       <img
         className="metadata-gallery-grid-image"
-        src={img.src}
+        src={useOriginalThumbnail ? img.thumbnail : img.src}
         alt={img.name}
         draggable="false"
         onLoad={onLoad}
@@ -45,6 +46,7 @@ Image.propTypes = {
   img: PropTypes.object,
   size: PropTypes.number,
   style: PropTypes.object,
+  useOriginalThumbnail: PropTypes.bool,
   onClick: PropTypes.func,
   onDoubleClick: PropTypes.func,
   onContextMenu: PropTypes.func,

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

@@ -7,7 +7,7 @@ import ModalPortal from '../../../components/modal-portal';
 import { useMetadataView } from '../../hooks/metadata-view';
 import { Utils } from '../../../utils/utils';
 import { getDateDisplayString, getFileNameFromRecord, getParentDirFromRecord, getRecordIdFromRecord } from '../../utils/cell';
-import { siteRoot, fileServerRoot, thumbnailSizeForGrid, thumbnailSizeForOriginal } from '../../../utils/constants';
+import { siteRoot, fileServerRoot, thumbnailSizeForGrid, thumbnailSizeForOriginal, thumbnailDefaultSize } from '../../../utils/constants';
 import { EVENT_BUS_TYPE, GALLERY_DATE_MODE, DATE_TAG_HEIGHT, STORAGE_GALLERY_DATE_MODE_KEY, STORAGE_GALLERY_ZOOM_GEAR_KEY } from '../../constants';
 import { getRowById } from '../../utils/table';
 import { getEventClassName } from '../../utils/common';
@@ -45,7 +45,12 @@ const Main = ({ isLoadingMore, metadata, onDelete, onLoadMore, duplicateRecord,
         const id = getRecordIdFromRecord(record);
         const fileName = getFileNameFromRecord(record);
         const parentDir = getParentDirFromRecord(record);
-        const size = mode === GALLERY_DATE_MODE.YEAR ? thumbnailSizeForOriginal : thumbnailSizeForGrid;
+        let size = thumbnailDefaultSize;
+        if (mode === GALLERY_DATE_MODE.YEAR) {
+          size = thumbnailSizeForOriginal;
+        } else if (mode === GALLERY_DATE_MODE.MONTH || mode === GALLERY_DATE_MODE.DAY) {
+          size = thumbnailSizeForGrid;
+        }
         const path = Utils.encodePath(Utils.joinPath(parentDir, fileName));
         const date = getDateDisplayString(record[firstSort.column_key], 'YYYY-MM-DD');
         const year = date.slice(0, 4);