diff --git a/src/components/views/messages/MFileBody.js b/src/components/views/messages/MFileBody.js index 8f464e08bd..5be4468a28 100644 --- a/src/components/views/messages/MFileBody.js +++ b/src/components/views/messages/MFileBody.js @@ -89,6 +89,35 @@ function computedStyle(element) { 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") export default class MFileBody extends React.Component { static propTypes = { @@ -119,35 +148,6 @@ export default class MFileBody extends React.Component { this._dummyLink = createRef(); } - /** - * 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. - */ - 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; - } - _getContentUrl() { const media = mediaFromContent(this.props.mxEvent.getContent()); return media.srcHttp; @@ -161,7 +161,7 @@ export default class MFileBody extends React.Component { render() { const content = this.props.mxEvent.getContent(); - const text = this.presentableTextForFile(content); + const text = presentableTextForFile(content); const isEncrypted = content.file !== undefined; const fileName = content.body && content.body.length > 0 ? content.body : _t("Attachment"); const contentUrl = this._getContentUrl(); @@ -173,7 +173,7 @@ export default class MFileBody extends React.Component { placeholder = (
- {this.presentableTextForFile(content, false)} + {presentableTextForFile(content, false)}
); } diff --git a/src/components/views/messages/MImageReplyBody.js b/src/components/views/messages/MImageReplyBody.js index cdc78e46e8..5ace22a560 100644 --- a/src/components/views/messages/MImageReplyBody.js +++ b/src/components/views/messages/MImageReplyBody.js @@ -1,5 +1,5 @@ /* -Copyright 2020 Tulir Asokan +Copyright 2020-2021 Tulir Asokan Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -15,10 +15,10 @@ limitations under the License. */ import React from "react"; -import { _td } from "../../../languageHandler"; +import {_td} from "../../../languageHandler"; import * as sdk from "../../../index"; import MImageBody from './MImageBody'; -import MFileBody from "./MFileBody"; +import {presentableTextForFile} from "./MFileBody"; export default class MImageReplyBody extends MImageBody { onClick(ev) { @@ -31,7 +31,7 @@ export default class MImageReplyBody extends MImageBody { // Don't show "Download this_file.png ..." getFileBody() { - return MFileBody.prototype.presentableTextForFile.call(this, this.props.mxEvent.getContent()); + return presentableTextForFile(this.props.mxEvent.getContent()); } render() { @@ -45,15 +45,17 @@ export default class MImageReplyBody extends MImageBody { const thumbnail = this._messageContent(contentUrl, this._getThumbUrl(), content); const fileBody = this.getFileBody(); const SenderProfile = sdk.getComponent('messages.SenderProfile'); - const sender = ; + const sender = ; return
-
{ thumbnail }
-
{ sender }
-
{ fileBody }
+
{thumbnail}
+
{sender}
+
{fileBody}
; } } diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index 19c5a7acaa..4411f94f02 100644 --- a/src/components/views/rooms/EventTile.tsx +++ b/src/components/views/rooms/EventTile.tsx @@ -247,7 +247,7 @@ interface IProps { // It could also be done by subclassing EventTile, but that'd be quite // boiilerplatey. So just make the necessary render decisions conditional // for now. - tileShape?: 'notif' | 'file_grid' | 'reply' | 'reply_preview'; + tileShape?: 'notif' | 'file_grid'; // show twelve hour timestamps isTwelveHour?: boolean; @@ -940,7 +940,7 @@ export default class EventTile extends React.Component { } if (needsSenderProfile) { - if (!this.props.tileShape || this.props.tileShape === 'reply' || this.props.tileShape === 'reply_preview') { + if (!this.props.tileShape) { sender = { ); } - case 'reply': - case 'reply_preview': { - let thread; - if (this.props.tileShape === 'reply_preview') { - thread = ReplyThread.makeThread( - this.props.mxEvent, - this.props.onHeightChanged, - this.props.permalinkCreator, - this.replyThread, - ); - } - return ( -
- { ircTimestamp } - { avatar } - { sender } - { ircPadlock } -
- { groupTimestamp } - { groupPadlock } - { thread } - -
-
- ); - } default: { const thread = ReplyThread.makeThread( this.props.mxEvent, diff --git a/src/components/views/rooms/ReplyPreview.js b/src/components/views/rooms/ReplyPreview.js index 56a6609cc7..222fcea552 100644 --- a/src/components/views/rooms/ReplyPreview.js +++ b/src/components/views/rooms/ReplyPreview.js @@ -87,9 +87,11 @@ export default class ReplyPreview extends React.Component {
- +
; diff --git a/src/components/views/rooms/ReplyTile.js b/src/components/views/rooms/ReplyTile.js index 95503493f7..336c5a721b 100644 --- a/src/components/views/rooms/ReplyTile.js +++ b/src/components/views/rooms/ReplyTile.js @@ -1,5 +1,5 @@ /* -Copyright 2020 Tulir Asokan +Copyright 2020-2021 Tulir Asokan Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -25,42 +25,8 @@ import dis from '../../../dispatcher/dispatcher'; import SettingsStore from "../../../settings/SettingsStore"; import {MatrixClient} from 'matrix-js-sdk'; -import { objectHasDiff } from '../../../utils/objects'; - -const eventTileTypes = { - 'm.room.message': 'messages.MessageEvent', - 'm.sticker': 'messages.MessageEvent', - 'm.call.invite': 'messages.TextualEvent', - 'm.call.answer': 'messages.TextualEvent', - 'm.call.hangup': 'messages.TextualEvent', -}; - -const stateEventTileTypes = { - 'm.room.aliases': 'messages.TextualEvent', - // 'm.room.aliases': 'messages.RoomAliasesEvent', // too complex - 'm.room.canonical_alias': 'messages.TextualEvent', - 'm.room.create': 'messages.RoomCreate', - 'm.room.member': 'messages.TextualEvent', - 'm.room.name': 'messages.TextualEvent', - 'm.room.avatar': 'messages.RoomAvatarEvent', - 'm.room.third_party_invite': 'messages.TextualEvent', - 'm.room.history_visibility': 'messages.TextualEvent', - 'm.room.encryption': 'messages.TextualEvent', - 'm.room.topic': 'messages.TextualEvent', - 'm.room.power_levels': 'messages.TextualEvent', - 'm.room.pinned_events': 'messages.TextualEvent', - 'm.room.server_acl': 'messages.TextualEvent', - 'im.vector.modular.widgets': 'messages.TextualEvent', - 'm.room.tombstone': 'messages.TextualEvent', - 'm.room.join_rules': 'messages.TextualEvent', - 'm.room.guest_access': 'messages.TextualEvent', - 'm.room.related_groups': 'messages.TextualEvent', -}; - -function getHandlerTile(ev) { - const type = ev.getType(); - return ev.isState() ? stateEventTileTypes[type] : eventTileTypes[type]; -} +import {objectHasDiff} from '../../../utils/objects'; +import {getHandlerTile} from "./EventTile"; class ReplyTile extends React.Component { static contextTypes = { @@ -94,7 +60,7 @@ class ReplyTile extends React.Component { return true; } - return !this._propsEqual(this.props, nextProps); + return objectHasDiff(this.props, nextProps); } componentWillUnmount() { @@ -108,28 +74,6 @@ class ReplyTile extends React.Component { } } - _propsEqual(objA, objB) { - const keysA = Object.keys(objA); - const keysB = Object.keys(objB); - - if (keysA.length !== keysB.length) { - return false; - } - - for (let i = 0; i < keysA.length; i++) { - const key = keysA[i]; - - if (!objB.hasOwnProperty(key)) { - return false; - } - - if (objA[key] !== objB[key]) { - return false; - } - } - return true; - } - onClick(e) { // This allows the permalink to be opened in a new tab/window or copied as // matrix.to, but also for it to enable routing within Riot when clicked.