From 82901467217e39231aa0e56b938e328fd90f538f Mon Sep 17 00:00:00 2001 From: Scott Nonnenberg Date: Wed, 5 Sep 2018 12:07:53 -0700 Subject: [PATCH] Show generic attachment for non-loading/too-large images/videos --- _locales/en/messages.json | 9 - stylesheets/_modules.scss | 32 -- ts/components/conversation/EmbeddedContact.md | 37 ++ ts/components/conversation/Message.md | 413 ++++++++++++++++-- ts/components/conversation/Message.tsx | 58 +-- ts/components/conversation/Quote.md | 20 + .../media-gallery/types/AttachmentType.ts | 3 - .../{ItemClickEvent.tsx => ItemClickEvent.ts} | 3 - .../types/{Message.tsx => Message.ts} | 0 9 files changed, 469 insertions(+), 106 deletions(-) rename ts/components/conversation/media-gallery/types/{ItemClickEvent.tsx => ItemClickEvent.ts} (88%) rename ts/components/conversation/media-gallery/types/{Message.tsx => Message.ts} (100%) diff --git a/_locales/en/messages.json b/_locales/en/messages.json index d16eb2606..7a2232fe5 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -880,15 +880,6 @@ "description": "Used in alt tag of thumbnail images inside of an embedded message quote" }, - "imageFailedToLoad": { - "message": "Image failed to load", - "description": "When an image attachment is missing, this message is shown" - }, - "videoScreenshotFailedToLoad": { - "message": "Video screenshot failed to load", - "description": - "When a attachment video screenshot is missing, this message is shown" - }, "imageAttachmentAlt": { "message": "Image attached to message", "description": "Used in alt tag of image attachment" diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index ee702899f..e76af0045 100644 --- a/stylesheets/_modules.scss +++ b/stylesheets/_modules.scss @@ -293,21 +293,6 @@ border-bottom-right-radius: 16px; } -.module-message__broken-image { - font-size: 11px; - line-height: 16px; - letter-spacing: 0.3px; - - padding: 10px; - text-align: center; - text-transform: uppercase; - color: $color-light-90; -} - -.module-message__broken-image--incoming { - color: $color-white; -} - .module-message__video-overlay__circle { position: absolute; top: 50%; @@ -331,23 +316,6 @@ @include color-svg('../images/play.svg', $color-signal-blue); } -.module-message__broken-video-screenshot { - font-size: 11px; - line-height: 16px; - letter-spacing: 0.3px; - - padding: 10px; - text-align: center; - text-transform: uppercase; - color: $color-light-90; - - cursor: pointer; -} - -.module-message__broken-video-screenshot--incoming { - color: $color-white; -} - .module-message__audio-attachment { margin-top: 2px; } diff --git a/ts/components/conversation/EmbeddedContact.md b/ts/components/conversation/EmbeddedContact.md index db2840091..b1e3f2b9a 100644 --- a/ts/components/conversation/EmbeddedContact.md +++ b/ts/components/conversation/EmbeddedContact.md @@ -28,6 +28,7 @@ const contact = { authorColor="green" direction="incoming" i18n={util.i18n} + timestamp={Date.now()} contact={contact} /> @@ -36,6 +37,7 @@ const contact = { direction="outgoing" status="delivered" i18n={util.i18n} + timestamp={Date.now()} contact={contact} /> @@ -45,6 +47,7 @@ const contact = { direction="incoming" collapseMetadata i18n={util.i18n} + timestamp={Date.now()} contact={contact} /> @@ -54,6 +57,7 @@ const contact = { collapseMetadata status="delivered" i18n={util.i18n} + timestamp={Date.now()} contact={contact} /> @@ -85,11 +89,13 @@ const contact = { authorColor="green" direction="incoming" i18n={util.i18n} + timestamp={Date.now()} contact={contact}/>
    • ; ``` @@ -123,6 +129,7 @@ const contact = { authorAvatarPath={util.gifObjectUrl} direction="incoming" i18n={util.i18n} + timestamp={Date.now()} contact={contact} /> @@ -134,6 +141,7 @@ const contact = { conversationType="group" collapseMetadata i18n={util.i18n} + timestamp={Date.now()} contact={contact} /> @@ -144,6 +152,7 @@ const contact = { authorName="Mr. Fire" status="delivered" i18n={util.i18n} + timestamp={Date.now()} contact={contact} /> @@ -176,6 +185,7 @@ const contact = { authorColor="green" direction="incoming" i18n={util.i18n} + timestamp={Date.now()} contact={contact} /> @@ -184,6 +194,7 @@ const contact = { direction="outgoing" status="delivered" i18n={util.i18n} + timestamp={Date.now()} contact={contact} /> @@ -193,6 +204,7 @@ const contact = { direction="incoming" collapseMetadata i18n={util.i18n} + timestamp={Date.now()} contact={contact} /> @@ -202,6 +214,7 @@ const contact = { collapseMetadata status="delivered" i18n={util.i18n} + timestamp={Date.now()} contact={contact} /> @@ -232,6 +245,7 @@ const contact = { authorColor="green" direction="incoming" i18n={util.i18n} + timestamp={Date.now()} contact={contact} /> @@ -240,6 +254,7 @@ const contact = { direction="outgoing" status="delivered" i18n={util.i18n} + timestamp={Date.now()} contact={contact} /> @@ -249,6 +264,7 @@ const contact = { direction="incoming" collapseMetadata i18n={util.i18n} + timestamp={Date.now()} contact={contact} /> @@ -258,6 +274,7 @@ const contact = { collapseMetadata status="delivered" i18n={util.i18n} + timestamp={Date.now()} contact={contact} /> @@ -290,6 +307,7 @@ const contact = { authorColor="green" direction="incoming" i18n={util.i18n} + timestamp={Date.now()} contact={contact} /> @@ -298,6 +316,7 @@ const contact = { direction="outgoing" status="delivered" i18n={util.i18n} + timestamp={Date.now()} contact={contact} /> @@ -307,6 +326,7 @@ const contact = { direction="incoming" collapseMetadata i18n={util.i18n} + timestamp={Date.now()} contact={contact} /> @@ -316,6 +336,7 @@ const contact = { collapseMetadata status="delivered" i18n={util.i18n} + timestamp={Date.now()} contact={contact} /> @@ -343,6 +364,7 @@ const contact = { authorColor="green" direction="incoming" i18n={util.i18n} + timestamp={Date.now()} contact={contact} /> @@ -351,6 +373,7 @@ const contact = { direction="outgoing" status="delivered" i18n={util.i18n} + timestamp={Date.now()} contact={contact} /> @@ -360,6 +383,7 @@ const contact = { direction="incoming" collapseMetadata i18n={util.i18n} + timestamp={Date.now()} contact={contact} /> @@ -369,6 +393,7 @@ const contact = { collapseMetadata status="delivered" i18n={util.i18n} + timestamp={Date.now()} contact={contact} /> @@ -385,6 +410,7 @@ const contact = {}; authorColor="green" direction="incoming" i18n={util.i18n} + timestamp={Date.now()} contact={contact} /> @@ -393,6 +419,7 @@ const contact = {}; direction="outgoing" status="delivered" i18n={util.i18n} + timestamp={Date.now()} contact={contact} /> @@ -402,6 +429,7 @@ const contact = {}; direction="incoming" collapseMetadata i18n={util.i18n} + timestamp={Date.now()} contact={contact} /> @@ -411,6 +439,7 @@ const contact = {}; collapseMetadata status="delivered" i18n={util.i18n} + timestamp={Date.now()} contact={contact} /> @@ -461,6 +490,7 @@ const contactWithoutAccount = { authorColor="green" direction="incoming" i18n={util.i18n} + timestamp={Date.now()} contact={contactWithAccount} /> @@ -470,6 +500,7 @@ const contactWithoutAccount = { direction="outgoing" status="delivered" i18n={util.i18n} + timestamp={Date.now()} contact={contactWithAccount} /> @@ -479,6 +510,7 @@ const contactWithoutAccount = { authorColor="green" direction="incoming" i18n={util.i18n} + timestamp={Date.now()} contact={contactWithAccount} /> @@ -488,6 +520,7 @@ const contactWithoutAccount = { direction="outgoing" status="delivered" i18n={util.i18n} + timestamp={Date.now()} contact={contactWithAccount} /> @@ -498,6 +531,7 @@ const contactWithoutAccount = { direction="incoming" collapseMetadata i18n={util.i18n} + timestamp={Date.now()} contact={contactWithoutAccount} /> @@ -508,6 +542,7 @@ const contactWithoutAccount = { collapseMetadata status="delivered" i18n={util.i18n} + timestamp={Date.now()} contact={contactWithoutAccount} /> @@ -518,6 +553,7 @@ const contactWithoutAccount = { direction="incoming" collapseMetadata i18n={util.i18n} + timestamp={Date.now()} contact={contactWithoutAccount} /> @@ -528,6 +564,7 @@ const contactWithoutAccount = { collapseMetadata status="delivered" i18n={util.i18n} + timestamp={Date.now()} contact={contactWithoutAccount} /> diff --git a/ts/components/conversation/Message.md b/ts/components/conversation/Message.md index dd4aac4ab..e159899ff 100644 --- a/ts/components/conversation/Message.md +++ b/ts/components/conversation/Message.md @@ -283,6 +283,7 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean authorColor="cyan" direction="incoming" text="A really long link https://app.zeplin.io/project/5b2136b8e490ad6a54399857/screen/5b3bd068e03b763a0ee4c3e9" + timestamp={Date.now()} i18n={util.i18n} /> @@ -291,6 +292,7 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean direction="outgoing" status="delivered" text="A really long link https://app.zeplin.io/project/5b2136b8e490ad6a54399857/screen/5b3bd068e03b763a0ee4c3e9" + timestamp={Date.now()} i18n={util.i18n} /> @@ -305,6 +307,7 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean Etiam ultricies tortor eget mi sollicitudin suscipit. Nullam non ligula lacinia, ornare tortor in, tempor enim. Nullam nec ullamcorper enim. Vestibulum aliquet leo eget nisl aliquet vulputate. Duis quis nisl ligula. Nunc pulvinar lacus urna. Morbi imperdiet tortor eu finibus dictum. Cras ullamcorper aliquet eros, non malesuada tellus cursus eget. Cras sagittis, sapien vel gravida pellentesque, sem sem semper velit, vel congue ligula leo aliquet massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur eros diam, tempor sed lacus non, commodo imperdiet quam. Praesent eget tristique lectus, sit amet iaculis felis. Morbi molestie dui blandit augue vulputate tempus. Nulla facilisi. Nulla dictum felis eu nulla rhoncus, sed ultricies est scelerisque. Nam risus arcu, sodales at nisl eget, volutpat elementum lacus. Morbi dictum condimentum lorem, at placerat nulla eleifend a. Vestibulum hendrerit diam vulputate, sollicitudin urna vel, luctus nisl. Mauris semper sem quam, sed venenatis quam convallis in. Donec hendrerit, nibh ut mattis congue, quam nibh consectetur magna, eu posuere urna orci et turpis. Integer vitae arcu vitae est varius maximus. Sed ultrices tortor lacus, venenatis pulvinar nibh ullamcorper sit amet. Nulla vehicula metus sed diam gravida auctor sed cursus enim. Curabitur viverra non erat et mollis.`} + timestamp={Date.now()} i18n={util.i18n} /> @@ -319,6 +322,7 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean Etiam ultricies tortor eget mi sollicitudin suscipit. Nullam non ligula lacinia, ornare tortor in, tempor enim. Nullam nec ullamcorper enim. Vestibulum aliquet leo eget nisl aliquet vulputate. Duis quis nisl ligula. Nunc pulvinar lacus urna. Morbi imperdiet tortor eu finibus dictum. Cras ullamcorper aliquet eros, non malesuada tellus cursus eget. Cras sagittis, sapien vel gravida pellentesque, sem sem semper velit, vel congue ligula leo aliquet massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur eros diam, tempor sed lacus non, commodo imperdiet quam. Praesent eget tristique lectus, sit amet iaculis felis. Morbi molestie dui blandit augue vulputate tempus. Nulla facilisi. Nulla dictum felis eu nulla rhoncus, sed ultricies est scelerisque. Nam risus arcu, sodales at nisl eget, volutpat elementum lacus. Morbi dictum condimentum lorem, at placerat nulla eleifend a. Vestibulum hendrerit diam vulputate, sollicitudin urna vel, luctus nisl. Mauris semper sem quam, sed venenatis quam convallis in. Donec hendrerit, nibh ut mattis congue, quam nibh consectetur magna, eu posuere urna orci et turpis. Integer vitae arcu vitae est varius maximus. Sed ultrices tortor lacus, venenatis pulvinar nibh ullamcorper sit amet. Nulla vehicula metus sed diam gravida auctor sed cursus enim. Curabitur viverra non erat et mollis.`} + timestamp={Date.now()} i18n={util.i18n} /> @@ -336,8 +340,14 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean authorColor="cyan" direction="incoming" text="I am pretty confused about Pi." + timestamp={Date.now()} i18n={util.i18n} - attachment={{ url: util.gifObjectUrl, contentType: 'image/gif' }} + attachment={{ + url: util.gifObjectUrl, + contentType: 'image/gif', + width: 320, + height: 240, + }} onClickAttachment={() => console.log('onClickAttachment')} onDownload={() => console.log('onDownload')} onReply={() => console.log('onReply')} @@ -348,8 +358,14 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean direction="outgoing" status="delivered" text="I am pretty confused about Pi." + timestamp={Date.now()} i18n={util.i18n} - attachment={{ url: util.gifObjectUrl, contentType: 'image/gif' }} + attachment={{ + url: util.gifObjectUrl, + contentType: 'image/gif', + width: 320, + height: 240, + }} onClickAttachment={() => console.log('onClickAttachment')} onDownload={() => console.log('onDownload')} onReply={() => console.log('onReply')} @@ -361,8 +377,14 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean direction="incoming" text="I am pretty confused about Pi." collapseMetadata + timestamp={Date.now()} i18n={util.i18n} - attachment={{ url: util.gifObjectUrl, contentType: 'image/gif' }} + attachment={{ + url: util.gifObjectUrl, + contentType: 'image/gif', + width: 320, + height: 240, + }} onClickAttachment={() => console.log('onClickAttachment')} onDownload={() => console.log('onDownload')} onReply={() => console.log('onReply')} @@ -373,8 +395,14 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean direction="outgoing" text="I am pretty confused about Pi." collapseMetadata + timestamp={Date.now()} i18n={util.i18n} - attachment={{ url: util.gifObjectUrl, contentType: 'image/gif' }} + attachment={{ + url: util.gifObjectUrl, + contentType: 'image/gif', + width: 320, + height: 240, + }} onClickAttachment={() => console.log('onClickAttachment')} onDownload={() => console.log('onDownload')} onReply={() => console.log('onReply')} @@ -393,10 +421,16 @@ First, showing the metadata overlay on dark and light images, then a message wit console.log('onClickAttachment')} /> @@ -404,10 +438,16 @@ First, showing the metadata overlay on dark and light images, then a message wit console.log('onClickAttachment')} /> @@ -415,8 +455,14 @@ First, showing the metadata overlay on dark and light images, then a message wit console.log('onClickAttachment')} /> @@ -424,8 +470,14 @@ First, showing the metadata overlay on dark and light images, then a message wit console.log('onClickAttachment')} /> @@ -434,8 +486,14 @@ First, showing the metadata overlay on dark and light images, then a message wit authorColor="purple" direction="incoming" collapseMetadata + timestamp={Date.now()} i18n={util.i18n} - attachment={{ url: util.pngObjectUrl, contentType: 'image/png' }} + attachment={{ + url: util.pngObjectUrl, + contentType: 'image/png', + width: 800, + height: 1200, + }} onClickAttachment={() => console.log('onClickAttachment')} /> @@ -444,8 +502,14 @@ First, showing the metadata overlay on dark and light images, then a message wit direction="outgoing" collapseMetadata status="sent" + timestamp={Date.now()} i18n={util.i18n} - attachment={{ url: util.pngObjectUrl, contentType: 'image/png' }} + attachment={{ + url: util.pngObjectUrl, + contentType: 'image/png', + width: 800, + height: 1200, + }} onClickAttachment={() => console.log('onClickAttachment')} /> @@ -465,7 +529,12 @@ Note that the delivered indicator is always Signal Blue, not the conversation co authorColor="pink" timestamp={Date.now()} i18n={util.i18n} - attachment={{ url: util.pngObjectUrl, contentType: 'image/png' }} + attachment={{ + url: util.pngObjectUrl, + contentType: 'image/png', + width: 800, + height: 1200, + }} onClickAttachment={() => console.log('onClickAttachment')} /> @@ -476,7 +545,12 @@ Note that the delivered indicator is always Signal Blue, not the conversation co authorColor="red" timestamp={Date.now()} i18n={util.i18n} - attachment={{ url: util.pngObjectUrl, contentType: 'image/png' }} + attachment={{ + url: util.pngObjectUrl, + contentType: 'image/png', + width: 800, + height: 1200, + }} onClickAttachment={() => console.log('onClickAttachment')} /> @@ -487,7 +561,12 @@ Note that the delivered indicator is always Signal Blue, not the conversation co authorColor="blue" timestamp={Date.now()} i18n={util.i18n} - attachment={{ url: util.pngObjectUrl, contentType: 'image/png' }} + attachment={{ + url: util.pngObjectUrl, + contentType: 'image/png', + width: 800, + height: 1200, + }} onClickAttachment={() => console.log('onClickAttachment')} /> @@ -498,7 +577,12 @@ Note that the delivered indicator is always Signal Blue, not the conversation co authorColor="purple" timestamp={Date.now()} i18n={util.i18n} - attachment={{ url: util.pngObjectUrl, contentType: 'image/png' }} + attachment={{ + url: util.pngObjectUrl, + contentType: 'image/png', + width: 800, + height: 1200, + }} onClickAttachment={() => console.log('onClickAttachment')} /> @@ -514,9 +598,12 @@ Note that the delivered indicator is always Signal Blue, not the conversation co authorColor="green" direction="incoming" i18n={util.i18n} + timestamp={Date.now()} attachment={{ url: util.portraitYellowObjectUrl, contentType: 'image/gif', + width: 20, + height: 200, }} onClickAttachment={() => console.log('onClickAttachment')} /> @@ -526,9 +613,12 @@ Note that the delivered indicator is always Signal Blue, not the conversation co direction="outgoing" status="delivered" i18n={util.i18n} + timestamp={Date.now()} attachment={{ url: util.portraitYellowObjectUrl, contentType: 'image/gif', + width: 20, + height: 200, }} onClickAttachment={() => console.log('onClickAttachment')} /> @@ -539,9 +629,12 @@ Note that the delivered indicator is always Signal Blue, not the conversation co direction="incoming" collapseMetadata i18n={util.i18n} + timestamp={Date.now()} attachment={{ url: util.portraitYellowObjectUrl, contentType: 'image/gif', + width: 20, + height: 200, }} onClickAttachment={() => console.log('onClickAttachment')} /> @@ -551,9 +644,12 @@ Note that the delivered indicator is always Signal Blue, not the conversation co direction="outgoing" collapseMetadata i18n={util.i18n} + timestamp={Date.now()} attachment={{ url: util.portraitYellowObjectUrl, contentType: 'image/gif', + width: 20, + height: 200, }} onClickAttachment={() => console.log('onClickAttachment')} /> @@ -571,9 +667,12 @@ Note that the delivered indicator is always Signal Blue, not the conversation co text="This is an odd yellow bar. Cool, huh?" direction="incoming" i18n={util.i18n} + timestamp={Date.now()} attachment={{ url: util.portraitYellowObjectUrl, contentType: 'image/gif', + width: 20, + height: 200, }} onClickAttachment={() => console.log('onClickAttachment')} /> @@ -584,9 +683,12 @@ Note that the delivered indicator is always Signal Blue, not the conversation co status="delivered" text="This is an odd yellow bar. Cool, huh?" i18n={util.i18n} + timestamp={Date.now()} attachment={{ url: util.portraitYellowObjectUrl, contentType: 'image/gif', + width: 20, + height: 200, }} onClickAttachment={() => console.log('onClickAttachment')} /> @@ -598,9 +700,12 @@ Note that the delivered indicator is always Signal Blue, not the conversation co direction="incoming" collapseMetadata i18n={util.i18n} + timestamp={Date.now()} attachment={{ url: util.portraitYellowObjectUrl, contentType: 'image/gif', + width: 20, + height: 200, }} onClickAttachment={() => console.log('onClickAttachment')} /> @@ -611,9 +716,12 @@ Note that the delivered indicator is always Signal Blue, not the conversation co text="This is an odd yellow bar. Cool, huh?" collapseMetadata i18n={util.i18n} + timestamp={Date.now()} attachment={{ url: util.portraitYellowObjectUrl, contentType: 'image/gif', + width: 20, + height: 200, }} onClickAttachment={() => console.log('onClickAttachment')} /> @@ -630,9 +738,12 @@ Note that the delivered indicator is always Signal Blue, not the conversation co authorColor="green" direction="incoming" i18n={util.i18n} + timestamp={Date.now()} attachment={{ url: util.landscapePurpleObjectUrl, contentType: 'image/gif', + width: 200, + height: 50, }} onClickAttachment={() => console.log('onClickAttachment')} /> @@ -641,10 +752,13 @@ Note that the delivered indicator is always Signal Blue, not the conversation co console.log('onClickAttachment')} /> @@ -655,9 +769,12 @@ Note that the delivered indicator is always Signal Blue, not the conversation co direction="incoming" collapseMetadata i18n={util.i18n} + timestamp={Date.now()} attachment={{ url: util.landscapePurpleObjectUrl, contentType: 'image/gif', + width: 200, + height: 50, }} onClickAttachment={() => console.log('onClickAttachment')} /> @@ -667,9 +784,12 @@ Note that the delivered indicator is always Signal Blue, not the conversation co direction="outgoing" collapseMetadata i18n={util.i18n} + timestamp={Date.now()} attachment={{ url: util.landscapePurpleObjectUrl, contentType: 'image/gif', + width: 200, + height: 50, }} onClickAttachment={() => console.log('onClickAttachment')} /> @@ -687,9 +807,12 @@ Note that the delivered indicator is always Signal Blue, not the conversation co text="An interesting horizontal bar. It's art." direction="incoming" i18n={util.i18n} + timestamp={Date.now()} attachment={{ url: util.landscapePurpleObjectUrl, contentType: 'image/gif', + width: 200, + height: 50, }} onClickAttachment={() => console.log('onClickAttachment')} /> @@ -699,10 +822,13 @@ Note that the delivered indicator is always Signal Blue, not the conversation co direction="outgoing" text="An interesting horizontal bar. It's art." i18n={util.i18n} + timestamp={Date.now()} status="delivered" attachment={{ url: util.landscapePurpleObjectUrl, contentType: 'image/gif', + width: 200, + height: 50, }} onClickAttachment={() => console.log('onClickAttachment')} /> @@ -714,9 +840,12 @@ Note that the delivered indicator is always Signal Blue, not the conversation co direction="incoming" collapseMetadata i18n={util.i18n} + timestamp={Date.now()} attachment={{ url: util.landscapePurpleObjectUrl, contentType: 'image/gif', + width: 200, + height: 50, }} onClickAttachment={() => console.log('onClickAttachment')} /> @@ -727,9 +856,12 @@ Note that the delivered indicator is always Signal Blue, not the conversation co text="An interesting horizontal bar. It's art." collapseMetadata i18n={util.i18n} + timestamp={Date.now()} attachment={{ url: util.landscapePurpleObjectUrl, contentType: 'image/gif', + width: 200, + height: 50, }} onClickAttachment={() => console.log('onClickAttachment')} /> @@ -747,11 +879,14 @@ Note that the delivered indicator is always Signal Blue, not the conversation co text="Beautiful, isn't it?" direction="incoming" i18n={util.i18n} + timestamp={Date.now()} attachment={{ screenshot: { url: util.gifObjectUrl, }, contentType: 'video/mp4', + width: 320, + height: 240, }} onClickAttachment={() => console.log('onClickAttachment')} /> @@ -762,11 +897,14 @@ Note that the delivered indicator is always Signal Blue, not the conversation co text="Beautiful, isn't it?" status="delivered" i18n={util.i18n} + timestamp={Date.now()} attachment={{ screenshot: { url: util.gifObjectUrl, }, contentType: 'video/mp4', + width: 320, + height: 240, }} onClickAttachment={() => console.log('onClickAttachment')} /> @@ -778,11 +916,16 @@ Note that the delivered indicator is always Signal Blue, not the conversation co collapseMetadata direction="incoming" i18n={util.i18n} + timestamp={Date.now()} attachment={{ screenshot: { url: util.pngObjectUrl, + width: 800, + height: 1200, }, contentType: 'video/mp4', + width: 800, + height: 1200, }} onClickAttachment={() => console.log('onClickAttachment')} /> @@ -793,11 +936,16 @@ Note that the delivered indicator is always Signal Blue, not the conversation co text="Beautiful, isn't it?" collapseMetadata i18n={util.i18n} + timestamp={Date.now()} attachment={{ screenshot: { url: util.pngObjectUrl, + width: 800, + height: 1200, }, contentType: 'video/mp4', + width: 800, + height: 1200, }} onClickAttachment={() => console.log('onClickAttachment')} /> @@ -815,11 +963,16 @@ Note that the delivered indicator is always Signal Blue, not the conversation co direction="incoming" status="delivered" i18n={util.i18n} + timestamp={Date.now()} attachment={{ screenshot: { url: util.pngObjectUrl, + width: 800, + height: 1200, }, contentType: 'video/mp4', + width: 800, + height: 1200, }} onClickAttachment={() => console.log('onClickAttachment')} /> @@ -828,12 +981,17 @@ Note that the delivered indicator is always Signal Blue, not the conversation co console.log('onClickAttachment')} /> @@ -844,11 +1002,17 @@ Note that the delivered indicator is always Signal Blue, not the conversation co direction="incoming" status="delivered" i18n={util.i18n} + timestamp={Date.now()} + collapseMetadata attachment={{ screenshot: { url: util.pngObjectUrl, + width: 800, + height: 1200, }, contentType: 'video/mp4', + width: 800, + height: 1200, }} onClickAttachment={() => console.log('onClickAttachment')} /> @@ -858,11 +1022,17 @@ Note that the delivered indicator is always Signal Blue, not the conversation co direction="outgoing" status="delivered" i18n={util.i18n} + timestamp={Date.now()} + collapseMetadata attachment={{ screenshot: { url: util.pngObjectUrl, + width: 800, + height: 1200, }, contentType: 'video/mp4', + width: 800, + height: 1200, }} onClickAttachment={() => console.log('onClickAttachment')} /> @@ -879,10 +1049,15 @@ Note that the delivered indicator is always Signal Blue, not the conversation co authorColor="green" direction="incoming" status="delivered" + timestamp={Date.now()} i18n={util.i18n} attachment={{ url: null, contentType: 'image/gif', + fileName: 'image.gif', + fileSize: '3.05 KB', + width: 320, + height: 240, }} onClickAttachment={() => console.log('onClickAttachment')} /> @@ -891,10 +1066,15 @@ Note that the delivered indicator is always Signal Blue, not the conversation co console.log('onClickAttachment')} /> @@ -905,10 +1085,15 @@ Note that the delivered indicator is always Signal Blue, not the conversation co authorColor="green" direction="incoming" status="delivered" + timestamp={Date.now()} i18n={util.i18n} attachment={{ url: null, contentType: 'image/gif', + fileName: 'image.gif', + fileSize: '3.05 KB', + width: 320, + height: 240, }} onClickAttachment={() => console.log('onClickAttachment')} /> @@ -918,10 +1103,15 @@ Note that the delivered indicator is always Signal Blue, not the conversation co text="Did something go wrong?" direction="outgoing" status="delivered" + timestamp={Date.now()} i18n={util.i18n} attachment={{ url: null, contentType: 'image/gif', + fileName: 'image.gif', + fileSize: '3.05 KB', + width: 320, + height: 240, }} onClickAttachment={() => console.log('onClickAttachment')} /> @@ -931,12 +1121,17 @@ Note that the delivered indicator is always Signal Blue, not the conversation co authorColor="green" direction="incoming" status="delivered" + timestamp={Date.now()} i18n={util.i18n} attachment={{ screenshot: { url: null, }, contentType: 'video/mp4', + fileName: 'video.mp4', + fileSize: '3.05 KB', + width: 320, + height: 240, }} onClickAttachment={() => console.log('onClickAttachment')} /> @@ -944,6 +1139,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
  • console.log('onClickAttachment')} /> @@ -961,12 +1161,17 @@ Note that the delivered indicator is always Signal Blue, not the conversation co authorColor="green" direction="incoming" status="delivered" + timestamp={Date.now()} i18n={util.i18n} attachment={{ screenshot: { url: null, }, contentType: 'video/mp4', + fileName: 'video.mp4', + fileSize: '3.05 KB', + width: 320, + height: 240, }} onClickAttachment={() => console.log('onClickAttachment')} /> @@ -975,6 +1180,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co console.log('onClickAttachment')} /> @@ -998,49 +1208,114 @@ Note that the delivered indicator is always Signal Blue, not the conversation co authorColor="green" direction="incoming" status="delivered" + timestamp={Date.now()} i18n={util.i18n} attachment={{ url: 'nonexistent', contentType: 'image/gif', + fileName: 'image.gif', + fileSize: '3.05 KB', + width: 320, + height: 240, }} onClickAttachment={() => console.log('onClickAttachment')} />
  • console.log('onClickAttachment')} />
  • console.log('onClickAttachment')} + /> +
    • +
  • + console.log('onClickAttachment')} + /> +
    • + +``` + +#### Image/video which is too big + +```jsx + +
  • + console.log('onClickAttachment')} />
  • console.log('onClickAttachment')} /> @@ -1050,12 +1325,17 @@ Note that the delivered indicator is always Signal Blue, not the conversation co authorColor="green" direction="incoming" status="delivered" + timestamp={Date.now()} i18n={util.i18n} attachment={{ + height: 4096, + width: 4097, screenshot: { - url: 'nonexistent', + url: util.gifObjectUrl, }, contentType: 'video/mp4', + fileName: 'video.mp4', + fileSize: '3.05 KB', }} onClickAttachment={() => console.log('onClickAttachment')} /> @@ -1063,44 +1343,95 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
  • console.log('onClickAttachment')} />
    • +     +``` + +#### Image/video missing height/width + +```jsx +
  • console.log('onClickAttachment')} + /> +
    • +
  • + console.log('onClickAttachment')} + /> +
    • +
  • + console.log('onClickAttachment')} />
  • console.log('onClickAttachment')} /> @@ -1117,6 +1448,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co authorColor="green" text="This is a nice song" direction="incoming" + timestamp={Date.now()} i18n={util.i18n} attachment={{ url: util.mp3ObjectUrl, @@ -1131,6 +1463,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co status="sent" text="This is a nice song" i18n={util.i18n} + timestamp={Date.now()} attachment={{ url: util.mp3ObjectUrl, contentType: 'audio/mp3', @@ -1145,6 +1478,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co collapseMetadata direction="incoming" i18n={util.i18n} + timestamp={Date.now()} attachment={{ url: util.mp3ObjectUrl, contentType: 'audio/mp3', @@ -1158,6 +1492,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co text="This is a nice song" collapseMetadata i18n={util.i18n} + timestamp={Date.now()} attachment={{ url: util.mp3ObjectUrl, contentType: 'audio/mp3', @@ -1177,6 +1512,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co authorColor="green" direction="incoming" i18n={util.i18n} + timestamp={Date.now()} attachment={{ url: util.mp3ObjectUrl, contentType: 'audio/mp3', @@ -1189,6 +1525,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co direction="outgoing" status="sent" i18n={util.i18n} + timestamp={Date.now()} attachment={{ url: util.mp3ObjectUrl, contentType: 'audio/mp3', @@ -1202,6 +1539,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co direction="incoming" collapseMetadata i18n={util.i18n} + timestamp={Date.now()} attachment={{ url: util.mp3ObjectUrl, contentType: 'audio/mp3', @@ -1213,6 +1551,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co console.log('onClickAttachment')} authorAvatarPath={util.gifObjectUrl} /> @@ -1484,11 +1840,16 @@ Note that the author avatar goes away if `collapseMetadata` is set. authorName="Mr. Fire" direction="incoming" i18n={util.i18n} + timestamp={Date.now()} attachment={{ screenshot: { url: util.pngObjectUrl, + width: 800, + height: 1200, }, contentType: 'video/mp4', + width: 800, + height: 1200, }} onClickAttachment={() => console.log('onClickAttachment')} authorAvatarPath={util.gifObjectUrl} @@ -1501,6 +1862,7 @@ Note that the author avatar goes away if `collapseMetadata` is set. authorName="Mr. Fire" direction="incoming" i18n={util.i18n} + timestamp={Date.now()} attachment={{ url: util.mp3ObjectUrl, contentType: 'audio/mp3', @@ -1517,6 +1879,7 @@ Note that the author avatar goes away if `collapseMetadata` is set. authorName="Mr. Fire" text="My manifesto is now complete!" i18n={util.i18n} + timestamp={Date.now()} attachment={{ url: util.txtObjectUrl, contentType: 'text/plain', diff --git a/ts/components/conversation/Message.tsx b/ts/components/conversation/Message.tsx index c3fe2a72c..88e399dda 100644 --- a/ts/components/conversation/Message.tsx +++ b/ts/components/conversation/Message.tsx @@ -128,6 +128,12 @@ function isAudio(attachment?: Attachment) { ); } +function canDisplayImage(attachment?: Attachment) { + const { height, width } = attachment || { height: 0, width: 0 }; + + return height > 0 && height <= 4096 && width > 0 && width <= 4096; +} + function getInitial(name: string): string { return name.trim()[0] || '#'; } @@ -267,8 +273,10 @@ export class Message extends React.Component { return null; } + const canDisplayAttachment = canDisplayImage(attachment); const withImageNoCaption = Boolean( !text && + canDisplayAttachment && !imageBroken && ((isImage(attachment) && hasImage(attachment)) || (isVideo(attachment) && hasVideoScreenshot(attachment))) @@ -382,23 +390,11 @@ export class Message extends React.Component { const withContentBelow = withCaption || !collapseMetadata; const withContentAbove = quote || (conversationType === 'group' && direction === 'incoming'); + const displayImage = canDisplayImage(attachment); - if (isImage(attachment)) { - if (imageBroken || !attachment.url) { - return ( -
    - {i18n('imageFailedToLoad')} -
    - ); - } - + if (isImage(attachment) && displayImage && !imageBroken && attachment.url) { // Calculating height to prevent reflow when image loads - const height = Math.max(MINIMUM_IMG_HEIGHT, attachment.height || 0); + const imageHeight = Math.max(MINIMUM_IMG_HEIGHT, attachment.height || 0); return (
    { {i18n('imageAttachmentAlt')} @@ -437,25 +433,19 @@ export class Message extends React.Component { ) : null}
    ); - } else if (isVideo(attachment)) { + } else if ( + isVideo(attachment) && + displayImage && + !imageBroken && + attachment.screenshot && + attachment.screenshot.url + ) { const { screenshot } = attachment; - if (imageBroken || !screenshot || !screenshot.url) { - return ( -
    - {i18n('videoScreenshotFailedToLoad')} -
    - ); - } - // Calculating height to prevent reflow when image loads - const height = Math.max(MINIMUM_IMG_HEIGHT, screenshot.height || 0); + const imageHeight = Math.max( + MINIMUM_IMG_HEIGHT, + attachment.screenshot.height || 0 + ); return (
    { onError={this.handleImageErrorBound} className="module-message__img-attachment" alt={i18n('videoAttachmentAlt')} - height={Math.min(MAXIMUM_IMG_HEIGHT, height)} + height={Math.min(MAXIMUM_IMG_HEIGHT, imageHeight)} src={screenshot.url} />