Show file name and size on images on hover (#6511)

* Show simple file name and size on images/videos

Fixes https://github.com/vector-im/element-web/issues/18197

* i18n

* Fix bad merge

* Add hover state tracking

* Only show on timeline-like objects

* Match new design requirements

* Remove video support (deemed not needed)

* Colouring and sizing from design

* Include file name in lightbox

* Revert changes to videos since we don't need them

* i18n

* Iterate PR

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>

src/components/views/elements/ImageView.tsx

@@ -38,6 +38,7 @@ import UIStore from '../../../stores/UIStore';
 import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
 import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
 import { getKeyBindingsManager } from "../../../KeyBindingsManager";
+import { presentableTextForFile } from "../../../utils/FileUtils";
 
 // Max scale to keep gaps around the image
 const MAX_SCALE = 0.95;
@@ -546,6 +547,9 @@ export default class ImageView extends React.Component<IProps, IState> {
             >
                 <div className="mx_ImageView_panel">
                     { info }
+                    <div className="mx_ImageView_title">
+                        { presentableTextForFile(this.props.mxEvent.getContent(), _t("Image"), true) }
+                    </div>
                     <div className="mx_ImageView_toolbar">
                         { zoomOutButton }
                         { zoomInButton }