Fix UI for GIFs in groups
This commit is contained in:
parent
a7799a74c1
commit
6c56d5a5f1
6 changed files with 137 additions and 76 deletions
|
@ -34,6 +34,8 @@ export type Props = {
|
|||
onClick?: (attachment: AttachmentType) => void;
|
||||
};
|
||||
|
||||
const GAP = 1;
|
||||
|
||||
export const ImageGrid = ({
|
||||
attachments,
|
||||
bottomOverlay,
|
||||
|
@ -113,8 +115,9 @@ export const ImageGrid = ({
|
|||
curveTopLeft={curveTopLeft}
|
||||
curveBottomLeft={curveBottomLeft}
|
||||
playIconOverlay={isVideoAttachment(attachments[0])}
|
||||
height={149}
|
||||
width={149}
|
||||
height={150}
|
||||
width={150}
|
||||
cropWidth={GAP}
|
||||
url={getThumbnailUrl(attachments[0])}
|
||||
onClick={onClick}
|
||||
onError={onError}
|
||||
|
@ -129,8 +132,8 @@ export const ImageGrid = ({
|
|||
curveTopRight={curveTopRight}
|
||||
curveBottomRight={curveBottomRight}
|
||||
playIconOverlay={isVideoAttachment(attachments[1])}
|
||||
height={149}
|
||||
width={149}
|
||||
height={150}
|
||||
width={150}
|
||||
attachment={attachments[1]}
|
||||
url={getThumbnailUrl(attachments[1])}
|
||||
onClick={onClick}
|
||||
|
@ -155,7 +158,8 @@ export const ImageGrid = ({
|
|||
attachment={attachments[0]}
|
||||
playIconOverlay={isVideoAttachment(attachments[0])}
|
||||
height={200}
|
||||
width={199}
|
||||
width={200}
|
||||
cropWidth={GAP}
|
||||
url={getUrl(attachments[0])}
|
||||
onClick={onClick}
|
||||
onError={onError}
|
||||
|
@ -167,8 +171,9 @@ export const ImageGrid = ({
|
|||
theme={theme}
|
||||
blurHash={attachments[1].blurHash}
|
||||
curveTopRight={curveTopRight}
|
||||
height={99}
|
||||
width={99}
|
||||
height={100}
|
||||
width={100}
|
||||
cropHeight={GAP}
|
||||
attachment={attachments[1]}
|
||||
playIconOverlay={isVideoAttachment(attachments[1])}
|
||||
url={getThumbnailUrl(attachments[1])}
|
||||
|
@ -183,8 +188,8 @@ export const ImageGrid = ({
|
|||
bottomOverlay={withBottomOverlay}
|
||||
noBorder={false}
|
||||
curveBottomRight={curveBottomRight}
|
||||
height={99}
|
||||
width={99}
|
||||
height={100}
|
||||
width={100}
|
||||
attachment={attachments[2]}
|
||||
playIconOverlay={isVideoAttachment(attachments[2])}
|
||||
url={getThumbnailUrl(attachments[2])}
|
||||
|
@ -210,8 +215,10 @@ export const ImageGrid = ({
|
|||
noBorder={false}
|
||||
attachment={attachments[0]}
|
||||
playIconOverlay={isVideoAttachment(attachments[0])}
|
||||
height={149}
|
||||
width={149}
|
||||
height={150}
|
||||
width={150}
|
||||
cropHeight={GAP}
|
||||
cropWidth={GAP}
|
||||
url={getThumbnailUrl(attachments[0])}
|
||||
onClick={onClick}
|
||||
onError={onError}
|
||||
|
@ -224,8 +231,9 @@ export const ImageGrid = ({
|
|||
curveTopRight={curveTopRight}
|
||||
playIconOverlay={isVideoAttachment(attachments[1])}
|
||||
noBorder={false}
|
||||
height={149}
|
||||
width={149}
|
||||
height={150}
|
||||
width={150}
|
||||
cropHeight={GAP}
|
||||
attachment={attachments[1]}
|
||||
url={getThumbnailUrl(attachments[1])}
|
||||
onClick={onClick}
|
||||
|
@ -242,8 +250,9 @@ export const ImageGrid = ({
|
|||
noBorder={false}
|
||||
curveBottomLeft={curveBottomLeft}
|
||||
playIconOverlay={isVideoAttachment(attachments[2])}
|
||||
height={149}
|
||||
width={149}
|
||||
height={150}
|
||||
width={150}
|
||||
cropWidth={GAP}
|
||||
attachment={attachments[2]}
|
||||
url={getThumbnailUrl(attachments[2])}
|
||||
onClick={onClick}
|
||||
|
@ -258,8 +267,8 @@ export const ImageGrid = ({
|
|||
noBorder={false}
|
||||
curveBottomRight={curveBottomRight}
|
||||
playIconOverlay={isVideoAttachment(attachments[3])}
|
||||
height={149}
|
||||
width={149}
|
||||
height={150}
|
||||
width={150}
|
||||
attachment={attachments[3]}
|
||||
url={getThumbnailUrl(attachments[3])}
|
||||
onClick={onClick}
|
||||
|
@ -288,8 +297,9 @@ export const ImageGrid = ({
|
|||
curveTopLeft={curveTopLeft}
|
||||
attachment={attachments[0]}
|
||||
playIconOverlay={isVideoAttachment(attachments[0])}
|
||||
height={149}
|
||||
width={149}
|
||||
height={150}
|
||||
width={150}
|
||||
cropWidth={GAP}
|
||||
url={getThumbnailUrl(attachments[0])}
|
||||
onClick={onClick}
|
||||
onError={onError}
|
||||
|
@ -301,8 +311,8 @@ export const ImageGrid = ({
|
|||
blurHash={attachments[1].blurHash}
|
||||
curveTopRight={curveTopRight}
|
||||
playIconOverlay={isVideoAttachment(attachments[1])}
|
||||
height={149}
|
||||
width={149}
|
||||
height={150}
|
||||
width={150}
|
||||
attachment={attachments[1]}
|
||||
url={getThumbnailUrl(attachments[1])}
|
||||
onClick={onClick}
|
||||
|
@ -319,8 +329,9 @@ export const ImageGrid = ({
|
|||
noBorder={isSticker}
|
||||
curveBottomLeft={curveBottomLeft}
|
||||
playIconOverlay={isVideoAttachment(attachments[2])}
|
||||
height={99}
|
||||
width={99}
|
||||
height={100}
|
||||
width={100}
|
||||
cropWidth={GAP}
|
||||
attachment={attachments[2]}
|
||||
url={getThumbnailUrl(attachments[2])}
|
||||
onClick={onClick}
|
||||
|
@ -334,8 +345,9 @@ export const ImageGrid = ({
|
|||
bottomOverlay={withBottomOverlay}
|
||||
noBorder={isSticker}
|
||||
playIconOverlay={isVideoAttachment(attachments[3])}
|
||||
height={99}
|
||||
width={98}
|
||||
height={100}
|
||||
width={100}
|
||||
cropWidth={GAP}
|
||||
attachment={attachments[3]}
|
||||
url={getThumbnailUrl(attachments[3])}
|
||||
onClick={onClick}
|
||||
|
@ -350,8 +362,8 @@ export const ImageGrid = ({
|
|||
noBorder={isSticker}
|
||||
curveBottomRight={curveBottomRight}
|
||||
playIconOverlay={isVideoAttachment(attachments[4])}
|
||||
height={99}
|
||||
width={99}
|
||||
height={100}
|
||||
width={100}
|
||||
darkOverlay={moreMessagesOverlay}
|
||||
overlayText={moreMessagesOverlayText}
|
||||
attachment={attachments[4]}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue