From 59b29e4a7f88d5ceca141e9b179310404c5fd54f Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Fri, 27 Sep 2019 21:08:31 -0600 Subject: [PATCH] Add an option to hide image previews Applies to images, stickers, and URL previews. Fixes https://github.com/vector-im/riot-web/issues/10735 --- res/css/views/messages/_MImageBody.scss | 15 +++++ res/css/views/messages/_MStickerBody.scss | 11 ++++ src/components/views/messages/MImageBody.js | 62 ++++++++++++++----- src/components/views/messages/MStickerBody.js | 17 ++++- .../views/rooms/LinkPreviewWidget.js | 4 ++ .../settings/tabs/user/LabsUserSettingsTab.js | 1 + src/i18n/strings/en_EN.json | 3 + src/settings/Settings.js | 5 ++ 8 files changed, 102 insertions(+), 16 deletions(-) diff --git a/res/css/views/messages/_MImageBody.scss b/res/css/views/messages/_MImageBody.scss index 86bc022829..e5c29ba9e0 100644 --- a/res/css/views/messages/_MImageBody.scss +++ b/res/css/views/messages/_MImageBody.scss @@ -19,6 +19,21 @@ limitations under the License. margin-right: 34px; } +.mx_MImageBody_hidden { + position: absolute; + left: 0; + top: 0; + bottom: 0; + right: 0; + text-align: center; + border: 1px dashed $input-border-color; + + // To center the text in the middle of the frame + display: flex; + align-items: center; + justify-content: center; +} + .mx_MImageBody_thumbnail { position: absolute; width: 100%; diff --git a/res/css/views/messages/_MStickerBody.scss b/res/css/views/messages/_MStickerBody.scss index e4977bcc34..162ee7da86 100644 --- a/res/css/views/messages/_MStickerBody.scss +++ b/res/css/views/messages/_MStickerBody.scss @@ -22,3 +22,14 @@ limitations under the License. position: absolute; top: 50%; } + +.mx_MStickerBody_hidden { + max-width: 220px; + text-decoration: none; + text-align: center; + + // To center the text in the middle of the frame + display: flex; + align-items: center; + justify-content: center; +} diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js index de19d0026f..4f165ea7bd 100644 --- a/src/components/views/messages/MImageBody.js +++ b/src/components/views/messages/MImageBody.js @@ -64,6 +64,7 @@ export default class MImageBody extends React.Component { imgLoaded: false, loadedImageDimensions: null, hover: false, + showImage: SettingsStore.getValue("showImages"), }; } @@ -86,9 +87,19 @@ export default class MImageBody extends React.Component { } } + showImage() { + localStorage.setItem("mx_ShowImage_" + this.props.mxEvent.getId(), "true"); + this.setState({showImage: true}); + } + onClick(ev) { if (ev.button === 0 && !ev.metaKey) { ev.preventDefault(); + if (!this.state.showImage) { + this.showImage(); + return; + } + const content = this.props.mxEvent.getContent(); const httpUrl = this._getContentUrl(); const ImageView = sdk.getComponent("elements.ImageView"); @@ -120,7 +131,7 @@ export default class MImageBody extends React.Component { onImageEnter(e) { this.setState({ hover: true }); - if (!this._isGif() || SettingsStore.getValue("autoplayGifsAndVideos")) { + if (!this.state.showImage || !this._isGif() || SettingsStore.getValue("autoplayGifsAndVideos")) { return; } const imgElement = e.target; @@ -130,7 +141,7 @@ export default class MImageBody extends React.Component { onImageLeave(e) { this.setState({ hover: false }); - if (!this._isGif() || SettingsStore.getValue("autoplayGifsAndVideos")) { + if (!this.state.showImage || !this._isGif() || SettingsStore.getValue("autoplayGifsAndVideos")) { return; } const imgElement = e.target; @@ -280,6 +291,12 @@ export default class MImageBody extends React.Component { }); }).done(); } + + // Remember that the user wanted to show this particular image + if (!this.state.showImage && localStorage.getItem("mx_ShowImage_" + this.props.mxEvent.getId()) === "true") { + this.setState({showImage: true}); + } + this._afterComponentDidMount(); } @@ -321,13 +338,21 @@ export default class MImageBody extends React.Component { // By doing this, the image "pops" into the timeline, but is still restricted // by the same width and height logic below. if (!this.state.loadedImageDimensions) { - return this.wrapImage(contentUrl, + let imageElement = ( {content.body}, + alt={content.body} + onError={this.onImageError} + onLoad={this.onImageLoad} + /> ); + if (!this.state.showImage) { + imageElement = ( +
+ {_t("Click to show image")} +
+ ); + } + return this.wrapImage(contentUrl, imageElement); } infoWidth = this.state.loadedImageDimensions.naturalWidth; infoHeight = this.state.loadedImageDimensions.naturalHeight; @@ -362,13 +387,22 @@ export default class MImageBody extends React.Component { // Restrict the width of the thumbnail here, otherwise it will fill the container // which has the same width as the timeline // mx_MImageBody_thumbnail resizes img to exactly container size - img = {content.body}; + img = ( + {content.body} + ); + if (!this.state.showImage) { + img = ( +
+ {_t("Click to show image")} +
+ ); + } } if (this._isGif() && !SettingsStore.getValue("autoplayGifsAndVideos") && !this.state.hover) { diff --git a/src/components/views/messages/MStickerBody.js b/src/components/views/messages/MStickerBody.js index 6a4128dfa7..c3e734a385 100644 --- a/src/components/views/messages/MStickerBody.js +++ b/src/components/views/messages/MStickerBody.js @@ -19,10 +19,15 @@ limitations under the License. import React from 'react'; import MImageBody from './MImageBody'; import sdk from '../../../index'; +import {_t} from "../../../languageHandler"; export default class MStickerBody extends MImageBody { - // Empty to prevent default behaviour of MImageBody - onClick() { + // Mostly empty to prevent default behaviour of MImageBody + onClick(ev) { + ev.preventDefault(); + if (!this.state.showImage) { + this.showImage(); + } } // MStickerBody doesn't need a wrapping ``, but it does need extra padding @@ -34,6 +39,14 @@ export default class MStickerBody extends MImageBody { // Placeholder to show in place of the sticker image if // img onLoad hasn't fired yet. getPlaceholder() { + if (!this.state.showImage) { + return ( + + {_t("Click to show sticker")} + + ); + } + const TintableSVG = sdk.getComponent('elements.TintableSvg'); return ; } diff --git a/src/components/views/rooms/LinkPreviewWidget.js b/src/components/views/rooms/LinkPreviewWidget.js index cfa096a763..d93fe76b46 100644 --- a/src/components/views/rooms/LinkPreviewWidget.js +++ b/src/components/views/rooms/LinkPreviewWidget.js @@ -18,6 +18,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import createReactClass from 'create-react-class'; import { linkifyElement } from '../../../HtmlUtils'; +import SettingsStore from "../../../settings/SettingsStore"; const sdk = require('../../../index'); const MatrixClientPeg = require('../../../MatrixClientPeg'); @@ -102,6 +103,9 @@ module.exports = createReactClass({ // FIXME: do we want to factor out all image displaying between this and MImageBody - especially for lightboxing? let image = p["og:image"]; + if (!SettingsStore.getValue("showImages")) { + image = null; // Don't render a button to show the image, just hide it outright + } const imageMaxWidth = 100; const imageMaxHeight = 100; if (image && image.startsWith("mxc://")) { image = MatrixClientPeg.get().mxcUrlToHttp(image, imageMaxWidth, imageMaxHeight); diff --git a/src/components/views/settings/tabs/user/LabsUserSettingsTab.js b/src/components/views/settings/tabs/user/LabsUserSettingsTab.js index 07a2bf722a..55bd821f95 100644 --- a/src/components/views/settings/tabs/user/LabsUserSettingsTab.js +++ b/src/components/views/settings/tabs/user/LabsUserSettingsTab.js @@ -55,6 +55,7 @@ export default class LabsUserSettingsTab extends React.Component { + ); diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index c23cd6d324..2f496eef00 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -369,6 +369,7 @@ "Low bandwidth mode": "Low bandwidth mode", "Allow fallback call assist server turn.matrix.org when your homeserver does not offer one (your IP address would be shared during a call)": "Allow fallback call assist server turn.matrix.org when your homeserver does not offer one (your IP address would be shared during a call)", "Send read receipts for messages (requires compatible homeserver to disable)": "Send read receipts for messages (requires compatible homeserver to disable)", + "Show previews/thumbnails for images": "Show previews/thumbnails for images", "Collecting app version information": "Collecting app version information", "Collecting logs": "Collecting logs", "Uploading report": "Uploading report", @@ -1032,7 +1033,9 @@ "Decrypt %(text)s": "Decrypt %(text)s", "Download %(text)s": "Download %(text)s", "Invalid file%(extra)s": "Invalid file%(extra)s", + "Click to show image": "Click to show image", "Error decrypting image": "Error decrypting image", + "Click to show sticker": "Click to show sticker", "Error decrypting video": "Error decrypting video", "Agree": "Agree", "Disagree": "Disagree", diff --git a/src/settings/Settings.js b/src/settings/Settings.js index e0ff16c538..efbbcf214f 100644 --- a/src/settings/Settings.js +++ b/src/settings/Settings.js @@ -409,4 +409,9 @@ export const SETTINGS = { ), default: true, }, + "showImages": { + supportedLevels: LEVELS_ACCOUNT_SETTINGS, + displayName: _td("Show previews/thumbnails for images"), + default: true, + }, };