diff --git a/_locales/en/messages.json b/_locales/en/messages.json index d16eb2606c..7a2232fe50 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 ee702899f1..e76af00459 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 db2840091d..b1e3f2b9ab 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 dd4aac4ab6..e159899ff6 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,36 +1208,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: 'nonexistent', contentType: 'image/gif', - }} - onClickAttachment={() => console.log('onClickAttachment')} - /> -
    • -
  • - console.log('onClickAttachment')} - /> -
    • -
  • - console.log('onClickAttachment')} /> @@ -1037,10 +1226,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: 'nonexistent', contentType: 'image/gif', + fileName: 'image.gif', + fileSize: '3.05 KB', + width: 320, + height: 240, }} onClickAttachment={() => console.log('onClickAttachment')} /> @@ -1050,12 +1244,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: 'nonexistent', }, contentType: 'video/mp4', + fileName: 'video.mp4', + fileSize: '3.05 KB', + width: 320, + height: 240, }} onClickAttachment={() => console.log('onClickAttachment')} /> @@ -1063,6 +1262,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
  • console.log('onClickAttachment')} />
    • + +``` + +#### Image/video which is too big + +```jsx +
  • console.log('onClickAttachment')} />
  • console.log('onClickAttachment')} + /> +
    • +
  • + console.log('onClickAttachment')} + /> +
    • +
  • + 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} - /> -
    • -
  • - console.log('onClickAttachment')} authorAvatarPath={util.gifObjectUrl} @@ -1501,6 +1840,29 @@ 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} + /> +
    • +
  • + 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} />