Use thumbnails for smaller cells in image grids

This commit is contained in:
Scott Nonnenberg 2019-01-11 16:41:39 -08:00
parent ba711d8985
commit a900792a06

View file

@ -93,7 +93,7 @@ export class ImageGrid extends React.Component<Props> {
playIconOverlay={isVideoAttachment(attachments[0])} playIconOverlay={isVideoAttachment(attachments[0])}
height={149} height={149}
width={149} width={149}
url={getUrl(attachments[0])} url={getThumbnailUrl(attachments[0])}
onClick={onClickAttachment} onClick={onClickAttachment}
onError={onError} onError={onError}
/> />
@ -107,7 +107,7 @@ export class ImageGrid extends React.Component<Props> {
height={149} height={149}
width={149} width={149}
attachment={attachments[1]} attachment={attachments[1]}
url={getUrl(attachments[1])} url={getThumbnailUrl(attachments[1])}
onClick={onClickAttachment} onClick={onClickAttachment}
onError={onError} onError={onError}
/> />
@ -141,7 +141,7 @@ export class ImageGrid extends React.Component<Props> {
width={99} width={99}
attachment={attachments[1]} attachment={attachments[1]}
playIconOverlay={isVideoAttachment(attachments[1])} playIconOverlay={isVideoAttachment(attachments[1])}
url={getUrl(attachments[1])} url={getThumbnailUrl(attachments[1])}
onClick={onClickAttachment} onClick={onClickAttachment}
onError={onError} onError={onError}
/> />
@ -154,7 +154,7 @@ export class ImageGrid extends React.Component<Props> {
width={99} width={99}
attachment={attachments[2]} attachment={attachments[2]}
playIconOverlay={isVideoAttachment(attachments[2])} playIconOverlay={isVideoAttachment(attachments[2])}
url={getUrl(attachments[2])} url={getThumbnailUrl(attachments[2])}
onClick={onClickAttachment} onClick={onClickAttachment}
onError={onError} onError={onError}
/> />
@ -176,7 +176,7 @@ export class ImageGrid extends React.Component<Props> {
playIconOverlay={isVideoAttachment(attachments[0])} playIconOverlay={isVideoAttachment(attachments[0])}
height={149} height={149}
width={149} width={149}
url={getUrl(attachments[0])} url={getThumbnailUrl(attachments[0])}
onClick={onClickAttachment} onClick={onClickAttachment}
onError={onError} onError={onError}
/> />
@ -188,7 +188,7 @@ export class ImageGrid extends React.Component<Props> {
height={149} height={149}
width={149} width={149}
attachment={attachments[1]} attachment={attachments[1]}
url={getUrl(attachments[1])} url={getThumbnailUrl(attachments[1])}
onClick={onClickAttachment} onClick={onClickAttachment}
onError={onError} onError={onError}
/> />
@ -203,7 +203,7 @@ export class ImageGrid extends React.Component<Props> {
height={149} height={149}
width={149} width={149}
attachment={attachments[2]} attachment={attachments[2]}
url={getUrl(attachments[2])} url={getThumbnailUrl(attachments[2])}
onClick={onClickAttachment} onClick={onClickAttachment}
onError={onError} onError={onError}
/> />
@ -216,7 +216,7 @@ export class ImageGrid extends React.Component<Props> {
height={149} height={149}
width={149} width={149}
attachment={attachments[3]} attachment={attachments[3]}
url={getUrl(attachments[3])} url={getThumbnailUrl(attachments[3])}
onClick={onClickAttachment} onClick={onClickAttachment}
onError={onError} onError={onError}
/> />
@ -238,7 +238,7 @@ export class ImageGrid extends React.Component<Props> {
playIconOverlay={isVideoAttachment(attachments[0])} playIconOverlay={isVideoAttachment(attachments[0])}
height={149} height={149}
width={149} width={149}
url={getUrl(attachments[0])} url={getThumbnailUrl(attachments[0])}
onClick={onClickAttachment} onClick={onClickAttachment}
onError={onError} onError={onError}
/> />
@ -250,7 +250,7 @@ export class ImageGrid extends React.Component<Props> {
height={149} height={149}
width={149} width={149}
attachment={attachments[1]} attachment={attachments[1]}
url={getUrl(attachments[1])} url={getThumbnailUrl(attachments[1])}
onClick={onClickAttachment} onClick={onClickAttachment}
onError={onError} onError={onError}
/> />
@ -265,7 +265,7 @@ export class ImageGrid extends React.Component<Props> {
height={99} height={99}
width={99} width={99}
attachment={attachments[2]} attachment={attachments[2]}
url={getUrl(attachments[2])} url={getThumbnailUrl(attachments[2])}
onClick={onClickAttachment} onClick={onClickAttachment}
onError={onError} onError={onError}
/> />
@ -277,7 +277,7 @@ export class ImageGrid extends React.Component<Props> {
height={99} height={99}
width={98} width={98}
attachment={attachments[3]} attachment={attachments[3]}
url={getUrl(attachments[3])} url={getThumbnailUrl(attachments[3])}
onClick={onClickAttachment} onClick={onClickAttachment}
onError={onError} onError={onError}
/> />
@ -296,7 +296,7 @@ export class ImageGrid extends React.Component<Props> {
: undefined : undefined
} }
attachment={attachments[4]} attachment={attachments[4]}
url={getUrl(attachments[4])} url={getThumbnailUrl(attachments[4])}
onClick={onClickAttachment} onClick={onClickAttachment}
onError={onError} onError={onError}
/> />
@ -307,6 +307,14 @@ export class ImageGrid extends React.Component<Props> {
} }
} }
function getThumbnailUrl(attachment: AttachmentType) {
if (attachment.thumbnail) {
return attachment.thumbnail.url;
}
return getUrl(attachment);
}
function getUrl(attachment: AttachmentType) { function getUrl(attachment: AttachmentType) {
if (attachment.screenshot) { if (attachment.screenshot) {
return attachment.screenshot.url; return attachment.screenshot.url;