mirror of https://github.com/vector-im/riot-web
Better labeling of images and stickers
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>pull/21833/head
parent
28f5827884
commit
5d5b9f6022
|
@ -25,6 +25,7 @@ import { replaceableComponent } from "../../../utils/replaceableComponent";
|
||||||
import { mediaFromContent } from "../../../customisations/Media";
|
import { mediaFromContent } from "../../../customisations/Media";
|
||||||
import ErrorDialog from "../dialogs/ErrorDialog";
|
import ErrorDialog from "../dialogs/ErrorDialog";
|
||||||
import { TileShape } from "../rooms/EventTile";
|
import { TileShape } from "../rooms/EventTile";
|
||||||
|
import { presentableTextForFile } from "../../../utils/FileUtils";
|
||||||
|
|
||||||
let downloadIconUrl; // cached copy of the download.svg asset for the sandboxed iframe later on
|
let downloadIconUrl; // cached copy of the download.svg asset for the sandboxed iframe later on
|
||||||
|
|
||||||
|
@ -90,35 +91,6 @@ function computedStyle(element) {
|
||||||
return cssText;
|
return cssText;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Extracts a human readable label for the file attachment to use as
|
|
||||||
* link text.
|
|
||||||
*
|
|
||||||
* @param {Object} content The "content" key of the matrix event.
|
|
||||||
* @param {boolean} withSize Whether to include size information. Default true.
|
|
||||||
* @return {string} the human readable link text for the attachment.
|
|
||||||
*/
|
|
||||||
export function presentableTextForFile(content, withSize = true) {
|
|
||||||
let linkText = _t("Attachment");
|
|
||||||
if (content.body && content.body.length > 0) {
|
|
||||||
// The content body should be the name of the file including a
|
|
||||||
// file extension.
|
|
||||||
linkText = content.body;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (content.info && content.info.size && withSize) {
|
|
||||||
// If we know the size of the file then add it as human readable
|
|
||||||
// string to the end of the link text so that the user knows how
|
|
||||||
// big a file they are downloading.
|
|
||||||
// The content.info also contains a MIME-type but we don't display
|
|
||||||
// it since it is "ugly", users generally aren't aware what it
|
|
||||||
// means and the type of the attachment can usually be inferrered
|
|
||||||
// from the file extension.
|
|
||||||
linkText += ' (' + filesize(content.info.size) + ')';
|
|
||||||
}
|
|
||||||
return linkText;
|
|
||||||
}
|
|
||||||
|
|
||||||
@replaceableComponent("views.messages.MFileBody")
|
@replaceableComponent("views.messages.MFileBody")
|
||||||
export default class MFileBody extends React.Component {
|
export default class MFileBody extends React.Component {
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
|
|
|
@ -451,7 +451,7 @@ export default class MImageBody extends React.Component<IProps, IState> {
|
||||||
}
|
}
|
||||||
|
|
||||||
// Overidden by MStickerBody
|
// Overidden by MStickerBody
|
||||||
protected getFileBody(): JSX.Element {
|
protected getFileBody(): string | JSX.Element {
|
||||||
return <MFileBody {...this.props} decryptedBlob={this.state.decryptedBlob} showGenericPlaceholder={false} />;
|
return <MFileBody {...this.props} decryptedBlob={this.state.decryptedBlob} showGenericPlaceholder={false} />;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -16,9 +16,11 @@ limitations under the License.
|
||||||
|
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import MImageBody from "./MImageBody";
|
import MImageBody from "./MImageBody";
|
||||||
import { presentableTextForFile } from "./MFileBody";
|
import { presentableTextForFile } from "../../../utils/FileUtils";
|
||||||
import { IMediaEventContent } from "../../../customisations/models/IMediaEventContent";
|
import { IMediaEventContent } from "../../../customisations/models/IMediaEventContent";
|
||||||
import SenderProfile from "./SenderProfile";
|
import SenderProfile from "./SenderProfile";
|
||||||
|
import { EventType } from "matrix-js-sdk/src/@types/event";
|
||||||
|
import { _t } from "../../../languageHandler";
|
||||||
|
|
||||||
const FORCED_IMAGE_HEIGHT = 44;
|
const FORCED_IMAGE_HEIGHT = 44;
|
||||||
|
|
||||||
|
@ -32,8 +34,9 @@ export default class MImageReplyBody extends MImageBody {
|
||||||
}
|
}
|
||||||
|
|
||||||
// Don't show "Download this_file.png ..."
|
// Don't show "Download this_file.png ..."
|
||||||
public getFileBody(): JSX.Element {
|
public getFileBody(): string {
|
||||||
return presentableTextForFile(this.props.mxEvent.getContent());
|
const sticker = this.props.mxEvent.getType() === EventType.Sticker;
|
||||||
|
return presentableTextForFile(this.props.mxEvent.getContent(), sticker ? _t("Sticker") : _t("Image"), !sticker);
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
|
Loading…
Reference in New Issue