Merge pull request #5521 from SimonBrandner/improve-image-view

Improve image view

src/DateUtils.ts

@@ -97,7 +97,7 @@ export function formatFullDateNoTime(date: Date): string {
     });
 }
 
-export function formatFullDate(date: Date, showTwelveHour = false): string {
+export function formatFullDate(date: Date, showTwelveHour = false, showSeconds = true): string {
     const days = getDaysArray();
     const months = getMonthsArray();
     return _t('%(weekDayName)s, %(monthName)s %(day)s %(fullYear)s %(time)s', {
@@ -105,7 +105,7 @@ export function formatFullDate(date: Date, showTwelveHour = false): string {
         monthName: months[date.getMonth()],
         day: date.getDate(),
         fullYear: date.getFullYear(),
-        time: formatFullTime(date, showTwelveHour),
+        time: showSeconds ? formatFullTime(date, showTwelveHour) : formatTime(date, showTwelveHour),
     });
 }
 

src/components/views/avatars/RoomAvatar.tsx

@@ -129,7 +129,7 @@ export default class RoomAvatar extends React.Component<IProps, IState> {
             name: this.props.room.name,
         };
 
-        Modal.createDialog(ImageView, params, "mx_Dialog_lightbox");
+        Modal.createDialog(ImageView, params, "mx_Dialog_lightbox", null, true);
     };
 
     public render() {

src/components/views/context_menus/MessageContextMenu.js

@@ -52,6 +52,9 @@ export default class MessageContextMenu extends React.Component {
 
         /* callback called when the menu is dismissed */
         onFinished: PropTypes.func,
+
+        /* if the menu is inside a dialog, we sometimes need to close that dialog after click (forwarding) */
+        onCloseDialog: PropTypes.func,
     };
 
     state = {
@@ -141,6 +144,7 @@ export default class MessageContextMenu extends React.Component {
 
                 const cli = MatrixClientPeg.get();
                 try {
+                    if (this.props.onCloseDialog) this.props.onCloseDialog();
                     await cli.redactEvent(
                         this.props.mxEvent.getRoomId(),
                         this.props.mxEvent.getId(),
@@ -190,6 +194,7 @@ export default class MessageContextMenu extends React.Component {
     };
 
     onForwardClick = () => {
+        if (this.props.onCloseDialog) this.props.onCloseDialog();
         dis.dispatch({
             action: 'forward_event',
             event: this.props.mxEvent,

src/components/views/elements/ImageView.js

@@ -1,235 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import {MatrixClientPeg} from "../../../MatrixClientPeg";
-import {formatDate} from '../../../DateUtils';
-import { _t } from '../../../languageHandler';
-import filesize from "filesize";
-import AccessibleButton from "./AccessibleButton";
-import Modal from "../../../Modal";
-import * as sdk from "../../../index";
-import {Key} from "../../../Keyboard";
-import FocusLock from "react-focus-lock";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
-
-@replaceableComponent("views.elements.ImageView")
-export default class ImageView extends React.Component {
-    static propTypes = {
-        src: PropTypes.string.isRequired, // the source of the image being displayed
-        name: PropTypes.string, // the main title ('name') for the image
-        link: PropTypes.string, // the link (if any) applied to the name of the image
-        width: PropTypes.number, // width of the image src in pixels
-        height: PropTypes.number, // height of the image src in pixels
-        fileSize: PropTypes.number, // size of the image src in bytes
-        onFinished: PropTypes.func.isRequired, // callback when the lightbox is dismissed
-
-        // the event (if any) that the Image is displaying. Used for event-specific stuff like
-        // redactions, senders, timestamps etc.  Other descriptors are taken from the explicit
-        // properties above, which let us use lightboxes to display images which aren't associated
-        // with events.
-        mxEvent: PropTypes.object,
-    };
-
-    constructor(props) {
-        super(props);
-        this.state = { rotationDegrees: 0 };
-    }
-
-    onKeyDown = (ev) => {
-        if (ev.key === Key.ESCAPE) {
-            ev.stopPropagation();
-            ev.preventDefault();
-            this.props.onFinished();
-        }
-    };
-
-    onRedactClick = () => {
-        const ConfirmRedactDialog = sdk.getComponent("dialogs.ConfirmRedactDialog");
-        Modal.createTrackedDialog('Confirm Redact Dialog', 'Image View', ConfirmRedactDialog, {
-            onFinished: (proceed) => {
-                if (!proceed) return;
-                this.props.onFinished();
-                MatrixClientPeg.get().redactEvent(
-                    this.props.mxEvent.getRoomId(), this.props.mxEvent.getId(),
-                ).catch(function(e) {
-                    const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-                    // display error message stating you couldn't delete this.
-                    const code = e.errcode || e.statusCode;
-                    Modal.createTrackedDialog('You cannot delete this image.', '', ErrorDialog, {
-                        title: _t('Error'),
-                        description: _t('You cannot delete this image. (%(code)s)', {code: code}),
-                    });
-                });
-            },
-        });
-    };
-
-    getName() {
-        let name = this.props.name;
-        if (name && this.props.link) {
-            name = <a href={ this.props.link } target="_blank" rel="noreferrer noopener">{ name }</a>;
-        }
-        return name;
-    }
-
-    rotateCounterClockwise = () => {
-        const cur = this.state.rotationDegrees;
-        const rotationDegrees = (cur - 90) % 360;
-        this.setState({ rotationDegrees });
-    };
-
-    rotateClockwise = () => {
-        const cur = this.state.rotationDegrees;
-        const rotationDegrees = (cur + 90) % 360;
-        this.setState({ rotationDegrees });
-    };
-
-    render() {
-/*
-        // In theory max-width: 80%, max-height: 80% on the CSS should work
-        // but in practice, it doesn't, so do it manually:
-
-        var width = this.props.width || 500;
-        var height = this.props.height || 500;
-
-        var maxWidth = document.documentElement.clientWidth * 0.8;
-        var maxHeight = document.documentElement.clientHeight * 0.8;
-
-        var widthFrac = width / maxWidth;
-        var heightFrac = height / maxHeight;
-
-        var displayWidth;
-        var displayHeight;
-        if (widthFrac > heightFrac) {
-            displayWidth = Math.min(width, maxWidth);
-            displayHeight = (displayWidth / width) * height;
-        } else {
-            displayHeight = Math.min(height, maxHeight);
-            displayWidth = (displayHeight / height) * width;
-        }
-
-        var style = {
-            width: displayWidth,
-            height: displayHeight
-        };
-*/
-        let style = {};
-        let res;
-
-        if (this.props.width && this.props.height) {
-            style = {
-                width: this.props.width,
-                height: this.props.height,
-            };
-            res = style.width + "x" + style.height + "px";
-        }
-
-        let size;
-        if (this.props.fileSize) {
-            size = filesize(this.props.fileSize);
-        }
-
-        let sizeRes;
-        if (size && res) {
-            sizeRes = size + ", " + res;
-        } else {
-            sizeRes = size || res;
-        }
-
-        let mayRedact = false;
-        const showEventMeta = !!this.props.mxEvent;
-
-        let eventMeta;
-        if (showEventMeta) {
-            // Figure out the sender, defaulting to mxid
-            let sender = this.props.mxEvent.getSender();
-            const cli = MatrixClientPeg.get();
-            const room = cli.getRoom(this.props.mxEvent.getRoomId());
-            if (room) {
-                mayRedact = room.currentState.maySendRedactionForEvent(this.props.mxEvent, cli.credentials.userId);
-                const member = room.getMember(sender);
-                if (member) sender = member.name;
-            }
-
-            eventMeta = (<div className="mx_ImageView_metadata">
-                { _t('Uploaded on %(date)s by %(user)s', {
-                    date: formatDate(new Date(this.props.mxEvent.getTs())),
-                    user: sender,
-                }) }
-            </div>);
-        }
-
-        let eventRedact;
-        if (mayRedact) {
-            eventRedact = (<div className="mx_ImageView_button" onClick={this.onRedactClick}>
-                { _t('Remove') }
-            </div>);
-        }
-
-        const rotationDegrees = this.state.rotationDegrees;
-        const effectiveStyle = {transform: `rotate(${rotationDegrees}deg)`, ...style};
-
-        return (
-            <FocusLock
-                returnFocus={true}
-                lockProps={{
-                    onKeyDown: this.onKeyDown,
-                    role: "dialog",
-                }}
-                className="mx_ImageView"
-            >
-                <div className="mx_ImageView_lhs">
-                </div>
-                <div className="mx_ImageView_content">
-                    <img src={this.props.src} title={this.props.name} style={effectiveStyle} className="mainImage" />
-                    <div className="mx_ImageView_labelWrapper">
-                        <div className="mx_ImageView_label">
-                            <AccessibleButton className="mx_ImageView_rotateCounterClockwise" title={_t("Rotate Left")} onClick={ this.rotateCounterClockwise }>
-                                <img src={require("../../../../res/img/rotate-ccw.svg")} alt={ _t('Rotate counter-clockwise') } width="18" height="18" />
-                            </AccessibleButton>
-                            <AccessibleButton className="mx_ImageView_rotateClockwise" title={_t("Rotate Right")} onClick={ this.rotateClockwise }>
-                                <img src={require("../../../../res/img/rotate-cw.svg")} alt={ _t('Rotate clockwise') } width="18" height="18" />
-                            </AccessibleButton>
-                            <AccessibleButton className="mx_ImageView_cancel" title={_t("Close")} onClick={ this.props.onFinished }>
-                              <img src={require("../../../../res/img/cancel-white.svg")} width="18" height="18" alt={ _t('Close') } />
-                            </AccessibleButton>
-                            <div className="mx_ImageView_shim">
-                            </div>
-                            <div className="mx_ImageView_name">
-                                { this.getName() }
-                            </div>
-                            { eventMeta }
-                            <a className="mx_ImageView_link" href={ this.props.src } download={ this.props.name } target="_blank" rel="noopener">
-                                <div className="mx_ImageView_download">
-                                        { _t('Download this file') }<br />
-                                         <span className="mx_ImageView_size">{ sizeRes }</span>
-                                </div>
-                            </a>
-                            { eventRedact }
-                            <div className="mx_ImageView_shim">
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div className="mx_ImageView_rhs">
-                </div>
-            </FocusLock>
-        );
-    }
-}

src/components/views/elements/ImageView.tsx

@@ -0,0 +1,439 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
+Copyright 2020, 2021 Šimon Brandner <simon.bra.ag@gmail.com>
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { createRef } from 'react';
+import { _t } from '../../../languageHandler';
+import AccessibleTooltipButton from "./AccessibleTooltipButton";
+import {Key} from "../../../Keyboard";
+import FocusLock from "react-focus-lock";
+import MemberAvatar from "../avatars/MemberAvatar";
+import {ContextMenuTooltipButton} from "../../../accessibility/context_menu/ContextMenuTooltipButton";
+import MessageContextMenu from "../context_menus/MessageContextMenu";
+import {aboveLeftOf, ContextMenu} from '../../structures/ContextMenu';
+import MessageTimestamp from "../messages/MessageTimestamp";
+import SettingsStore from "../../../settings/SettingsStore";
+import {formatFullDate} from "../../../DateUtils";
+import dis from '../../../dispatcher/dispatcher';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+import {RoomPermalinkCreator} from "../../../utils/permalinks/Permalinks"
+import {MatrixEvent} from "matrix-js-sdk/src/models/event";
+
+const MIN_ZOOM = 100;
+const MAX_ZOOM = 300;
+// This is used for the buttons
+const ZOOM_STEP = 10;
+// This is used for mouse wheel events
+const ZOOM_COEFFICIENT = 10;
+// If we have moved only this much we can zoom
+const ZOOM_DISTANCE = 10;
+
+
+interface IProps {
+    src: string, // the source of the image being displayed
+    name?: string, // the main title ('name') for the image
+    link?: string, // the link (if any) applied to the name of the image
+    width?: number, // width of the image src in pixels
+    height?: number, // height of the image src in pixels
+    fileSize?: number, // size of the image src in bytes
+    onFinished(): void, // callback when the lightbox is dismissed
+
+    // the event (if any) that the Image is displaying. Used for event-specific stuff like
+    // redactions, senders, timestamps etc.  Other descriptors are taken from the explicit
+    // properties above, which let us use lightboxes to display images which aren't associated
+    // with events.
+    mxEvent: MatrixEvent,
+    permalinkCreator: RoomPermalinkCreator,
+}
+
+interface IState {
+    rotation: number,
+    zoom: number,
+    translationX: number,
+    translationY: number,
+    moving: boolean,
+    contextMenuDisplayed: boolean,
+}
+
+@replaceableComponent("views.elements.ImageView")
+export default class ImageView extends React.Component<IProps, IState> {
+    constructor(props) {
+        super(props);
+        this.state = {
+            rotation: 0,
+            zoom: MIN_ZOOM,
+            translationX: 0,
+            translationY: 0,
+            moving: false,
+            contextMenuDisplayed: false,
+        };
+    }
+
+    // XXX: Refs to functional components
+    private contextMenuButton = createRef<any>();
+    private focusLock = createRef<any>();
+
+    private initX = 0;
+    private initY = 0;
+    private lastX = 0;
+    private lastY = 0;
+    private previousX = 0;
+    private previousY = 0;
+
+    componentDidMount() {
+        // We have to use addEventListener() because the listener
+        // needs to be passive in order to work with Chromium
+        this.focusLock.current.addEventListener('wheel', this.onWheel, { passive: false });
+    }
+
+    componentWillUnmount() {
+        this.focusLock.current.removeEventListener('wheel', this.onWheel);
+    }
+
+    private onKeyDown = (ev: KeyboardEvent) => {
+        if (ev.key === Key.ESCAPE) {
+            ev.stopPropagation();
+            ev.preventDefault();
+            this.props.onFinished();
+        }
+    };
+
+    private onWheel = (ev: WheelEvent) => {
+        ev.stopPropagation();
+        ev.preventDefault();
+        const newZoom = this.state.zoom - (ev.deltaY * ZOOM_COEFFICIENT);
+
+        if (newZoom <= MIN_ZOOM) {
+            this.setState({
+                zoom: MIN_ZOOM,
+                translationX: 0,
+                translationY: 0,
+            });
+            return;
+        }
+        if (newZoom >= MAX_ZOOM) {
+            this.setState({zoom: MAX_ZOOM});
+            return;
+        }
+
+        this.setState({
+            zoom: newZoom,
+        });
+    };
+
+    private onRotateCounterClockwiseClick = () => {
+        const cur = this.state.rotation;
+        const rotationDegrees = cur - 90;
+        this.setState({ rotation: rotationDegrees });
+    };
+
+    private onRotateClockwiseClick = () => {
+        const cur = this.state.rotation;
+        const rotationDegrees = cur + 90;
+        this.setState({ rotation: rotationDegrees });
+    };
+
+    private onZoomInClick = () => {
+        if (this.state.zoom >= MAX_ZOOM) {
+            this.setState({zoom: MAX_ZOOM});
+            return;
+        }
+
+        this.setState({
+            zoom: this.state.zoom + ZOOM_STEP,
+        });
+    };
+
+    private onZoomOutClick = () => {
+        if (this.state.zoom <= MIN_ZOOM) {
+            this.setState({
+                zoom: MIN_ZOOM,
+                translationX: 0,
+                translationY: 0,
+            });
+            return;
+        }
+        this.setState({
+            zoom: this.state.zoom - ZOOM_STEP,
+        });
+    };
+
+    private onDownloadClick = () => {
+        const a = document.createElement("a");
+        a.href = this.props.src;
+        a.download = this.props.name;
+        a.target = "_blank";
+        a.click();
+    };
+
+    private onOpenContextMenu = () => {
+        this.setState({
+            contextMenuDisplayed: true,
+        });
+    };
+
+    private onCloseContextMenu = () => {
+        this.setState({
+            contextMenuDisplayed: false,
+        });
+    };
+
+    private onPermalinkClicked = (ev: React.MouseEvent) => {
+        // 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 Element when clicked.
+        ev.preventDefault();
+        dis.dispatch({
+            action: 'view_room',
+            event_id: this.props.mxEvent.getId(),
+            highlighted: true,
+            room_id: this.props.mxEvent.getRoomId(),
+        });
+        this.props.onFinished();
+    };
+
+    private onStartMoving = (ev: React.MouseEvent) => {
+        ev.stopPropagation();
+        ev.preventDefault();
+
+        // Zoom in if we are completely zoomed out
+        if (this.state.zoom === MIN_ZOOM) {
+            this.setState({zoom: MAX_ZOOM});
+            return;
+        }
+
+        this.setState({moving: true});
+        this.previousX = this.state.translationX;
+        this.previousY = this.state.translationY;
+        this.initX = ev.pageX - this.lastX;
+        this.initY = ev.pageY - this.lastY;
+    };
+
+    private onMoving = (ev: React.MouseEvent) => {
+        ev.stopPropagation();
+        ev.preventDefault();
+
+        if (!this.state.moving) return;
+
+        this.lastX = ev.pageX - this.initX;
+        this.lastY = ev.pageY - this.initY;
+        this.setState({
+            translationX: this.lastX,
+            translationY: this.lastY,
+        });
+    };
+
+    private onEndMoving = () => {
+        // Zoom out if we haven't moved much
+        if (
+            this.state.moving === true &&
+            Math.abs(this.state.translationX - this.previousX) < ZOOM_DISTANCE &&
+            Math.abs(this.state.translationY - this.previousY) < ZOOM_DISTANCE
+        ) {
+            this.setState({
+                zoom: MIN_ZOOM,
+                translationX: 0,
+                translationY: 0,
+            });
+        }
+        this.setState({moving: false});
+    };
+
+    private renderContextMenu() {
+        let contextMenu = null;
+        if (this.state.contextMenuDisplayed) {
+            contextMenu = (
+                <ContextMenu
+                    {...aboveLeftOf(this.contextMenuButton.current.getBoundingClientRect())}
+                    onFinished={this.onCloseContextMenu}
+                >
+                    <MessageContextMenu
+                        mxEvent={this.props.mxEvent}
+                        permalinkCreator={this.props.permalinkCreator}
+                        onFinished={this.onCloseContextMenu}
+                        onCloseDialog={this.props.onFinished}
+                    />
+                </ContextMenu>
+            );
+        }
+
+        return (
+            <React.Fragment>
+                { contextMenu }
+            </React.Fragment>
+        );
+    }
+
+    render() {
+        const showEventMeta = !!this.props.mxEvent;
+
+        let cursor;
+        if (this.state.moving) {
+            cursor= "grabbing";
+        } else if (this.state.zoom === MIN_ZOOM) {
+            cursor = "zoom-in";
+        } else {
+            cursor = "zoom-out";
+        }
+        const rotationDegrees = this.state.rotation + "deg";
+        const zoomPercentage = this.state.zoom/100;
+        const translatePixelsX = this.state.translationX + "px";
+        const translatePixelsY = this.state.translationY + "px";
+        // The order of the values is important!
+        // First, we translate and only then we rotate, otherwise
+        // we would apply the translation to an already rotated
+        // image causing it translate in the wrong direction.
+        const style = {
+            cursor: cursor,
+            transition: this.state.moving ? null : "transform 200ms ease 0s",
+            transform: `translateX(${translatePixelsX})
+                        translateY(${translatePixelsY})
+                        scale(${zoomPercentage})
+                        rotate(${rotationDegrees})`,
+        };
+
+        let info;
+        if (showEventMeta) {
+            const mxEvent = this.props.mxEvent;
+            const showTwelveHour = SettingsStore.getValue("showTwelveHourTimestamps");
+            let permalink = "#";
+            if (this.props.permalinkCreator) {
+                permalink = this.props.permalinkCreator.forEvent(this.props.mxEvent.getId());
+            }
+
+            const senderName = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender();
+            const sender = (
+                <div className="mx_ImageView_info_sender">
+                    {senderName}
+                </div>
+            );
+            const messageTimestamp = (
+                <a
+                    href={permalink}
+                    onClick={this.onPermalinkClicked}
+                    aria-label={formatFullDate(new Date(this.props.mxEvent.getTs()), showTwelveHour, false)}
+                >
+                    <MessageTimestamp
+                        showFullDate={true}
+                        showTwelveHour={showTwelveHour}
+                        ts={mxEvent.getTs()}
+                        showSeconds={false}
+                    />
+                </a>
+            );
+            const avatar = (
+                <MemberAvatar
+                    member={mxEvent.sender}
+                    width={32} height={32}
+                    viewUserOnClick={true}
+                />
+            );
+
+            info = (
+                <div className="mx_ImageView_info_wrapper">
+                    {avatar}
+                    <div className="mx_ImageView_info">
+                        {sender}
+                        {messageTimestamp}
+                    </div>
+                </div>
+            );
+        } else {
+            // If there is no event - we're viewing an avatar, we set
+            // an empty div here, since the panel uses space-between
+            // and we want the same placement of elements
+            info = (
+                <div></div>
+            );
+        }
+
+        let contextMenuButton;
+        if (this.props.mxEvent) {
+            contextMenuButton = (
+                <ContextMenuTooltipButton
+                    className="mx_ImageView_button mx_ImageView_button_more"
+                    title={_t("Options")}
+                    onClick={this.onOpenContextMenu}
+                    inputRef={this.contextMenuButton}
+                    isExpanded={this.state.contextMenuDisplayed}
+                />
+            );
+        }
+
+        return (
+            <FocusLock
+                returnFocus={true}
+                lockProps={{
+                    onKeyDown: this.onKeyDown,
+                    role: "dialog",
+                }}
+                className="mx_ImageView"
+                ref={this.focusLock}
+            >
+                <div className="mx_ImageView_panel">
+                    {info}
+                    <div className="mx_ImageView_toolbar">
+                        <AccessibleTooltipButton
+                            className="mx_ImageView_button mx_ImageView_button_rotateCW"
+                            title={_t("Rotate Right")}
+                            onClick={this.onRotateClockwiseClick}>
+                        </AccessibleTooltipButton>
+                        <AccessibleTooltipButton
+                            className="mx_ImageView_button mx_ImageView_button_rotateCCW"
+                            title={_t("Rotate Left")}
+                            onClick={ this.onRotateCounterClockwiseClick }>
+                        </AccessibleTooltipButton>
+                        <AccessibleTooltipButton
+                            className="mx_ImageView_button mx_ImageView_button_zoomOut"
+                            title={_t("Zoom out")}
+                            onClick={ this.onZoomOutClick }>
+                        </AccessibleTooltipButton>
+                        <AccessibleTooltipButton
+                            className="mx_ImageView_button mx_ImageView_button_zoomIn"
+                            title={_t("Zoom in")}
+                            onClick={ this.onZoomInClick }>
+                        </AccessibleTooltipButton>
+                        <AccessibleTooltipButton
+                            className="mx_ImageView_button mx_ImageView_button_download"
+                            title={_t("Download")}
+                            onClick={ this.onDownloadClick }>
+                        </AccessibleTooltipButton>
+                        {contextMenuButton}
+                        <AccessibleTooltipButton
+                            className="mx_ImageView_button mx_ImageView_button_close"
+                            title={_t("Close")}
+                            onClick={ this.props.onFinished }>
+                        </AccessibleTooltipButton>
+                        {this.renderContextMenu()}
+                    </div>
+                </div>
+                <div className="mx_ImageView_image_wrapper">
+                    <img
+                        src={this.props.src}
+                        title={this.props.name}
+                        style={style}
+                        className="mx_ImageView_image"
+                        draggable={true}
+                        onMouseDown={this.onStartMoving}
+                        onMouseMove={this.onMoving}
+                        onMouseUp={this.onEndMoving}
+                        onMouseLeave={this.onEndMoving}
+                    />
+                </div>
+            </FocusLock>
+        );
+    }
+}

src/components/views/messages/MImageBody.js

@@ -41,6 +41,9 @@ export default class MImageBody extends React.Component {
 
         /* the maximum image height to use */
         maxImageHeight: PropTypes.number,
+
+        /* the permalinkCreator */
+        permalinkCreator: PropTypes.object,
     };
 
     static contextType = MatrixClientContext;
@@ -106,6 +109,7 @@ export default class MImageBody extends React.Component {
                 src: httpUrl,
                 name: content.body && content.body.length > 0 ? content.body : _t('Attachment'),
                 mxEvent: this.props.mxEvent,
+                permalinkCreator: this.props.permalinkCreator,
             };
 
             if (content.info) {
@@ -114,7 +118,7 @@ export default class MImageBody extends React.Component {
                 params.fileSize = content.info.size;
             }
 
-            Modal.createDialog(ImageView, params, "mx_Dialog_lightbox");
+            Modal.createDialog(ImageView, params, "mx_Dialog_lightbox", null, true);
         }
     }
 

src/components/views/messages/MessageEvent.js

@@ -46,6 +46,9 @@ export default class MessageEvent extends React.Component {
 
         /* the maximum image height to use, if the event is an image */
         maxImageHeight: PropTypes.number,
+
+        /* the permalinkCreator */
+        permalinkCreator: PropTypes.object,
     };
 
     constructor(props) {
@@ -126,6 +129,7 @@ export default class MessageEvent extends React.Component {
             editState={this.props.editState}
             onHeightChanged={this.props.onHeightChanged}
             onMessageAllowed={this.onTileUpdate}
+            permalinkCreator={this.props.permalinkCreator}
         />;
     }
 }

src/components/views/messages/MessageTimestamp.js

@@ -17,7 +17,7 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import {formatFullDate, formatTime} from '../../../DateUtils';
+import {formatFullDate, formatTime, formatFullTime} from '../../../DateUtils';
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 
 @replaceableComponent("views.messages.MessageTimestamp")
@@ -25,13 +25,24 @@ export default class MessageTimestamp extends React.Component {
     static propTypes = {
         ts: PropTypes.number.isRequired,
         showTwelveHour: PropTypes.bool,
+        showFullDate: PropTypes.bool,
+        showSeconds: PropTypes.bool,
     };
 
     render() {
         const date = new Date(this.props.ts);
+        let timestamp;
+        if (this.props.showFullDate) {
+            timestamp = formatFullDate(date, this.props.showTwelveHour, this.props.showSeconds);
+        } else if (this.props.showSeconds) {
+            timestamp = formatFullTime(date, this.props.showTwelveHour);
+        } else {
+            timestamp = formatTime(date, this.props.showTwelveHour);
+        }
+
         return (
             <span className="mx_MessageTimestamp" title={formatFullDate(date, this.props.showTwelveHour)} aria-hidden={true}>
-                { formatTime(date, this.props.showTwelveHour) }
+                {timestamp}
             </span>
         );
     }

src/components/views/messages/RoomAvatarEvent.js

@@ -49,7 +49,7 @@ export default class RoomAvatarEvent extends React.Component {
             src: httpUrl,
             name: text,
         };
-        Modal.createDialog(ImageView, params, "mx_Dialog_lightbox");
+        Modal.createDialog(ImageView, params, "mx_Dialog_lightbox", null, true);
     };
 
     render() {

src/components/views/right_panel/UserInfo.tsx

@@ -1432,7 +1432,7 @@ const UserInfoHeader: React.FC<{
             name: member.name,
         };
 
-        Modal.createDialog(ImageView, params, "mx_Dialog_lightbox");
+        Modal.createDialog(ImageView, params, "mx_Dialog_lightbox", null, true);
     }, [member]);
 
     const avatarElement = (

src/components/views/rooms/EventTile.js

@@ -1101,6 +1101,7 @@ export default class EventTile extends React.Component {
                                            highlights={this.props.highlights}
                                            highlightLink={this.props.highlightLink}
                                            showUrlPreview={this.props.showUrlPreview}
+                                           permalinkCreator={this.props.permalinkCreator}
                                            onHeightChanged={this.props.onHeightChanged} />
                             { keyRequestInfo }
                             { reactionsRow }

src/components/views/rooms/LinkPreviewWidget.js

@@ -96,7 +96,7 @@ export default class LinkPreviewWidget extends React.Component {
             link: this.props.link,
         };
 
-        Modal.createDialog(ImageView, params, "mx_Dialog_lightbox");
+        Modal.createDialog(ImageView, params, "mx_Dialog_lightbox", null, true);
     };
 
     render() {

src/i18n/strings/en_EN.json

@@ -1915,14 +1915,11 @@
     "collapse": "collapse",
     "expand": "expand",
     "%(count)s people you know have already joined|other": "%(count)s people you know have already joined",
-    "%(count)s people you know have already joined|one": "%(count)s person you know has already joined",
-    "You cannot delete this image. (%(code)s)": "You cannot delete this image. (%(code)s)",
-    "Uploaded on %(date)s by %(user)s": "Uploaded on %(date)s by %(user)s",
-    "Rotate Left": "Rotate Left",
-    "Rotate counter-clockwise": "Rotate counter-clockwise",
     "Rotate Right": "Rotate Right",
-    "Rotate clockwise": "Rotate clockwise",
-    "Download this file": "Download this file",
+    "Rotate Left": "Rotate Left",
+    "Zoom out": "Zoom out",
+    "Zoom in": "Zoom in",
+    "Download": "Download",
     "Information": "Information",
     "View message": "View message",
     "Language Dropdown": "Language Dropdown",
@@ -2800,7 +2797,6 @@
     "Your Security Key is a safety net - you can use it to restore access to your encrypted messages if you forget your Security Phrase.": "Your Security Key is a safety net - you can use it to restore access to your encrypted messages if you forget your Security Phrase.",
     "Keep a copy of it somewhere secure, like a password manager or even a safe.": "Keep a copy of it somewhere secure, like a password manager or even a safe.",
     "Your Security Key": "Your Security Key",
-    "Download": "Download",
     "Your Security Key has been <b>copied to your clipboard</b>, paste it to:": "Your Security Key has been <b>copied to your clipboard</b>, paste it to:",
     "Your Security Key is in your <b>Downloads</b> folder.": "Your Security Key is in your <b>Downloads</b> folder.",
     "<b>Print it</b> and store it somewhere safe": "<b>Print it</b> and store it somewhere safe",