haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-16 23:29:49 +00:00
Code Issues Releases Wiki Activity

optimize thumbnail size in gallery (#7486)

Browse Source 
Co-authored-by: zhouwenxuan <aries@Mac.local>
This commit is contained in:
Aries
2025-02-19 13:46:24 +08:00
committed by GitHub
parent c957dd238f
commit 9692c5e398
5 changed files with 17 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/metadata/views/gallery/content.js
View File

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

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

@@ -55,8 +55,8 @@ const ImagesGrid = ({ images, selectedImageIds, size, imgEvents }) => {
return ( 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={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} style={style[0]} {...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) => { {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} />); 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 ( return (
<> <>
<Image key={firstImg.id} isSelected={selectedImageIds.includes(firstImg.id)} img={firstImg} size={size.middle} style={style[0]} {...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} style={style[1]} {...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) => { {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} />); return (<Image key={image.id} isSelected={selectedImageIds.includes(image.id)} img={image} size={size.small} style={style[index + 2] || {}} {...imgEvents} />);
})} })}

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

@@ -8,12 +8,12 @@ const DayImages = ({ size, selectedImageIds, images, imgEvents }) => {
if (imagesCount === 0) return null; if (imagesCount === 0) return null;
if (imagesCount === 1) { if (imagesCount === 1) {
const img = images[0]; 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) { if (imagesCount < 7) {
const imgs = images.slice(0, 2); 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} />); return (<ImagesGrid selectedImageIds={selectedImageIds} images={images} size={size} imgEvents={imgEvents} />);

4
frontend/src/metadata/views/gallery/image.js
View File

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

9
frontend/src/metadata/views/gallery/main.js
View File

@@ -7,7 +7,7 @@ import ModalPortal from '../../../components/modal-portal';
import { useMetadataView } from '../../hooks/metadata-view'; import { useMetadataView } from '../../hooks/metadata-view';
import { Utils } from '../../../utils/utils'; import { Utils } from '../../../utils/utils';
import { getDateDisplayString, getFileNameFromRecord, getParentDirFromRecord, getRecordIdFromRecord } from '../../utils/cell'; 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 { 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 { getRowById } from '../../utils/table';
import { getEventClassName } from '../../utils/common'; import { getEventClassName } from '../../utils/common';
@@ -45,7 +45,12 @@ const Main = ({ isLoadingMore, metadata, onDelete, onLoadMore, duplicateRecord,
const id = getRecordIdFromRecord(record); const id = getRecordIdFromRecord(record);
const fileName = getFileNameFromRecord(record); const fileName = getFileNameFromRecord(record);
const parentDir = getParentDirFromRecord(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 path = Utils.encodePath(Utils.joinPath(parentDir, fileName));
const date = getDateDisplayString(record[firstSort.column_key], 'YYYY-MM-DD'); const date = getDateDisplayString(record[firstSort.column_key], 'YYYY-MM-DD');
const year = date.slice(0, 4); const year = date.slice(0, 4);