Show simple file name and size on images/videos

Fixes element-hq/element-web#18197
matrix-org · Jul 30, 2021 · 4a2892b · 4a2892b
1 parent a7c15b2
commit 4a2892b
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 8 deletions.
diff --git a/res/css/views/messages/_MImageBody.scss b/res/css/views/messages/_MImageBody.scss
@@ -16,6 +16,28 @@ limitations under the License.
 
 $timelineImageBorderRadius: 4px;
 
+.mx_MImageBody_banner {
+    position: absolute;
+    top: 0;
+    left: 0;
+    line-height: 20px;
+    padding: 4px;
+
+    // Trying to match the width of the image is surprisingly difficult, so arbitrarily
+    // break it off early.
+    max-width: min(100%, 350px);
+
+    border-top-left-radius: $timelineImageBorderRadius;
+
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+
+    // Hardcoded colours because it's the same on all themes
+    background-color: #1A1D2399;
+    color: #ffffff;
+}
+
 .mx_MImageBody_thumbnail {
     object-fit: contain;
     border-radius: $timelineImageBorderRadius;

diff --git a/res/css/views/messages/_MVideoBody.scss b/res/css/views/messages/_MVideoBody.scss
@@ -14,7 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-span.mx_MVideoBody {
+div.mx_MVideoBody {
+    position: relative;
+
     video.mx_MVideoBody {
         max-width: 100%;
         height: auto;

diff --git a/src/components/views/messages/MImageBody.tsx b/src/components/views/messages/MImageBody.tsx
@@ -31,6 +31,7 @@ import { IMediaEventContent } from '../../../customisations/models/IMediaEventCo
 import ImageView from '../elements/ImageView';
 import { SyncState } from 'matrix-js-sdk/src/sync.api';
 import { IBodyProps } from "./IBodyProps";
+import { presentableTextForFile } from "../../../utils/FileUtils";
 
 interface IState {
     decryptedUrl?: string;
@@ -365,6 +366,15 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
             gifLabel = <p className="mx_MImageBody_gifLabel">GIF</p>;
         }
 
+        let banner;
+        if (this.state.showImage) {
+            banner = (
+                <span className='mx_MImageBody_banner'>
+                    { presentableTextForFile(content, _t("Image"), true) }
+                </span>
+            );
+        }
+
         const thumbnail = (
             <div className="mx_MImageBody_thumbnail_container" style={{ maxHeight: maxHeight + "px", maxWidth: maxWidth + "px" }}>
                 { showPlaceholder &&
@@ -382,6 +392,7 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
                 <div style={{ display: !showPlaceholder ? undefined : 'none' }}>
                     { img }
                     { gifLabel }
+                    { banner }
                 </div>
 
                 { this.state.hover && this.getTooltip() }
@@ -391,14 +402,14 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
         return this.wrapImage(contentUrl, thumbnail);
     }
 
-    // Overidden by MStickerBody
+    // Overridden by MStickerBody
     protected wrapImage(contentUrl: string, children: JSX.Element): JSX.Element {
         return <a href={contentUrl} onClick={this.onClick}>
             { children }
         </a>;
     }
 
-    // Overidden by MStickerBody
+    // Overridden by MStickerBody
     protected getPlaceholder(width: number, height: number): JSX.Element {
         const blurhash = this.props.mxEvent.getContent().info[BLURHASH_FIELD];
         if (blurhash) return <Blurhash hash={blurhash} width={width} height={height} />;
@@ -407,12 +418,12 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
         );
     }
 
-    // Overidden by MStickerBody
+    // Overridden by MStickerBody
     protected getTooltip(): JSX.Element {
         return null;
     }
 
-    // Overidden by MStickerBody
+    // Overridden by MStickerBody
     protected getFileBody(): string | JSX.Element {
         // We only ever need the download bar if we're appearing outside of the timeline
         if (this.props.tileShape) {

diff --git a/src/components/views/messages/MVideoBody.tsx b/src/components/views/messages/MVideoBody.tsx
@@ -26,6 +26,7 @@ import { BLURHASH_FIELD } from "../../../ContentMessages";
 import { IMediaEventContent } from "../../../customisations/models/IMediaEventContent";
 import { IBodyProps } from "./IBodyProps";
 import MFileBody from "./MFileBody";
+import { presentableTextForFile } from "../../../utils/FileUtils";
 
 interface IState {
     decryptedUrl?: string;
@@ -208,7 +209,7 @@ export default class MVideoBody extends React.PureComponent<IBodyProps, IState>
     };
 
     render() {
-        const content = this.props.mxEvent.getContent();
+        const content = this.props.mxEvent.getContent<IMediaEventContent>();
         const autoplay = SettingsStore.getValue("autoplayGifsAndVideos");
 
         if (this.state.error !== null) {
@@ -234,6 +235,13 @@ export default class MVideoBody extends React.PureComponent<IBodyProps, IState>
             );
         }
 
+        const banner = (
+            // XXX: Class abuse (so we can have context on the border radius)
+            <span className='mx_MImageBody_banner'>
+                { presentableTextForFile(content, _t("Video"), true) }
+            </span>
+        );
+
         const contentUrl = this.getContentUrl();
         const thumbUrl = this.getThumbUrl();
         let height = null;
@@ -253,7 +261,7 @@ export default class MVideoBody extends React.PureComponent<IBodyProps, IState>
             }
         }
         return (
-            <span className="mx_MVideoBody">
+            <div className="mx_MVideoBody">
                 <video
                     className="mx_MVideoBody"
                     ref={this.videoRef}
@@ -269,7 +277,8 @@ export default class MVideoBody extends React.PureComponent<IBodyProps, IState>
                     onPlay={this.videoOnPlay}
                 />
                 { this.props.tileShape && <MFileBody {...this.props} showGenericPlaceholder={false} /> }
-            </span>
+                { banner }
+            </div>
         );
     }
 }