From 9d9a41b263a12da7b456c8f85224c6defdd3fd8a Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Mon, 13 May 2019 18:00:52 +0100 Subject: [PATCH 1/3] Save `content.info` as a local for readability --- src/components/views/messages/MImageBody.js | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js index 9fd42fb31d..cb12259c9b 100644 --- a/src/components/views/messages/MImageBody.js +++ b/src/components/views/messages/MImageBody.js @@ -198,9 +198,11 @@ export default class MImageBody extends React.Component { // so we'll need to download the original image for this to work // well for now. First, let's try a few cases that let us avoid // downloading the original: - if (pixelRatio === 1.0 || - (!content.info || !content.info.w || - !content.info.h || !content.info.size)) { + const info = content.info; + if ( + pixelRatio === 1.0 || + (!info || !info.w || !info.h || !info.size) + ) { // always thumbnail. it may look a bit worse, but it'll save bandwidth. // which is probably desirable on a lo-dpi device anyway. return this.context.matrixClient.mxcUrlToHttp(content.url, thumbWidth, thumbHeight); @@ -215,10 +217,10 @@ export default class MImageBody extends React.Component { // timeline (e.g. >1MB). const isLargerThanThumbnail = ( - content.info.w > thumbWidth || - content.info.h > thumbHeight + info.w > thumbWidth || + info.h > thumbHeight ); - const isLargeFileSize = content.info.size > 1*1024*1024; + const isLargeFileSize = info.size > 1*1024*1024; if (isLargeFileSize && isLargerThanThumbnail) { // image is too large physically and bytewise to clutter our timeline so From 7881369b985119866737f50d64b4f622c2bdcabf Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Mon, 13 May 2019 18:28:57 +0100 Subject: [PATCH 2/3] Always thumbnail for GIFs When displaying a GIF, we always want to thumbnail so that we can properly respect the user's GIF autoplay setting (which relies on thumbnailing to produce the static preview image). Fixes https://github.com/vector-im/riot-web/issues/9658 --- src/components/views/messages/MImageBody.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js index cb12259c9b..4b5e1c20fa 100644 --- a/src/components/views/messages/MImageBody.js +++ b/src/components/views/messages/MImageBody.js @@ -200,6 +200,7 @@ export default class MImageBody extends React.Component { // downloading the original: const info = content.info; if ( + this._isGif() || pixelRatio === 1.0 || (!info || !info.w || !info.h || !info.size) ) { From f19e70c219ecd8b3c7d07ffa394ef6333f79a7dc Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Tue, 14 May 2019 13:55:38 +0100 Subject: [PATCH 3/3] Add comment about thumbnailing for GIFs --- src/components/views/messages/MImageBody.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js index 4b5e1c20fa..2f12022140 100644 --- a/src/components/views/messages/MImageBody.js +++ b/src/components/views/messages/MImageBody.js @@ -197,15 +197,18 @@ export default class MImageBody extends React.Component { // synapse only supports 800x600 thumbnails for now though, // so we'll need to download the original image for this to work // well for now. First, let's try a few cases that let us avoid - // downloading the original: + // downloading the original, including: + // - When displaying a GIF, we always want to thumbnail so that we can + // properly respect the user's GIF autoplay setting (which relies on + // thumbnailing to produce the static preview image) + // - On a low DPI device, always thumbnail to save bandwidth + // - If there's no sizing info in the event, default to thumbnail const info = content.info; if ( this._isGif() || pixelRatio === 1.0 || (!info || !info.w || !info.h || !info.size) ) { - // always thumbnail. it may look a bit worse, but it'll save bandwidth. - // which is probably desirable on a lo-dpi device anyway. return this.context.matrixClient.mxcUrlToHttp(content.url, thumbWidth, thumbHeight); } else { // we should only request thumbnails if the image is bigger than 800x600