2018-04-12 01:58:04 +03:00
|
|
|
/*
|
|
|
|
Copyright 2015, 2016 OpenMarket Ltd
|
2019-07-06 12:42:14 +03:00
|
|
|
Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
|
2021-04-09 09:01:14 +03:00
|
|
|
Copyright 2020, 2021 Šimon Brandner <simon.bra.ag@gmail.com>
|
2018-04-12 01:58:04 +03:00
|
|
|
|
|
|
|
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.
|
|
|
|
*/
|
|
|
|
|
2021-02-24 21:17:33 +03:00
|
|
|
import React, { createRef } from 'react';
|
2018-04-13 02:43:44 +03:00
|
|
|
import { _t } from '../../../languageHandler';
|
2021-02-24 16:43:33 +03:00
|
|
|
import AccessibleTooltipButton from "./AccessibleTooltipButton";
|
2021-06-07 16:43:43 +03:00
|
|
|
import { Key } from "../../../Keyboard";
|
2020-05-29 03:44:09 +03:00
|
|
|
import FocusLock from "react-focus-lock";
|
2021-02-24 16:43:33 +03:00
|
|
|
import MemberAvatar from "../avatars/MemberAvatar";
|
2021-06-07 16:43:43 +03:00
|
|
|
import { ContextMenuTooltipButton } from "../../../accessibility/context_menu/ContextMenuTooltipButton";
|
2021-02-24 21:17:33 +03:00
|
|
|
import MessageContextMenu from "../context_menus/MessageContextMenu";
|
2021-07-06 21:59:12 +03:00
|
|
|
import { aboveLeftOf } from '../../structures/ContextMenu';
|
2021-02-24 22:04:25 +03:00
|
|
|
import MessageTimestamp from "../messages/MessageTimestamp";
|
2021-02-24 22:07:41 +03:00
|
|
|
import SettingsStore from "../../../settings/SettingsStore";
|
2021-06-07 16:43:43 +03:00
|
|
|
import { formatFullDate } from "../../../DateUtils";
|
2021-02-24 22:14:12 +03:00
|
|
|
import dis from '../../../dispatcher/dispatcher';
|
2021-06-07 16:43:43 +03:00
|
|
|
import { replaceableComponent } from "../../../utils/replaceableComponent";
|
2021-06-29 15:11:58 +03:00
|
|
|
import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
|
2021-06-07 16:43:43 +03:00
|
|
|
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
|
|
|
|
import { normalizeWheelEvent } from "../../../utils/Mouse";
|
2021-07-13 09:20:17 +03:00
|
|
|
import { IDialogProps } from '../dialogs/IDialogProps';
|
2018-04-12 01:58:04 +03:00
|
|
|
|
2021-04-24 09:03:39 +03:00
|
|
|
// Max scale to keep gaps around the image
|
|
|
|
const MAX_SCALE = 0.95;
|
2021-03-15 21:28:21 +03:00
|
|
|
// This is used for the buttons
|
2021-04-24 11:35:25 +03:00
|
|
|
const ZOOM_STEP = 0.10;
|
2021-03-15 21:28:21 +03:00
|
|
|
// This is used for mouse wheel events
|
2021-04-24 11:35:25 +03:00
|
|
|
const ZOOM_COEFFICIENT = 0.0025;
|
2021-04-03 17:19:22 +03:00
|
|
|
// If we have moved only this much we can zoom
|
|
|
|
const ZOOM_DISTANCE = 10;
|
2021-02-25 13:19:50 +03:00
|
|
|
|
2021-07-13 09:20:17 +03:00
|
|
|
interface IProps extends IDialogProps {
|
2021-07-02 01:23:03 +03:00
|
|
|
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
|
2021-04-03 16:06:27 +03:00
|
|
|
|
|
|
|
// 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.
|
2021-07-02 01:23:03 +03:00
|
|
|
mxEvent: MatrixEvent;
|
|
|
|
permalinkCreator: RoomPermalinkCreator;
|
2021-04-03 16:06:27 +03:00
|
|
|
}
|
2019-03-30 09:31:15 +03:00
|
|
|
|
2021-04-03 16:06:27 +03:00
|
|
|
interface IState {
|
2021-07-02 01:23:03 +03:00
|
|
|
zoom: number;
|
|
|
|
minZoom: number;
|
|
|
|
maxZoom: number;
|
|
|
|
rotation: number;
|
|
|
|
translationX: number;
|
|
|
|
translationY: number;
|
|
|
|
moving: boolean;
|
|
|
|
contextMenuDisplayed: boolean;
|
2021-04-03 16:06:27 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
@replaceableComponent("views.elements.ImageView")
|
|
|
|
export default class ImageView extends React.Component<IProps, IState> {
|
2019-03-30 09:31:15 +03:00
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
2020-12-19 12:20:15 +03:00
|
|
|
this.state = {
|
2021-04-24 09:03:39 +03:00
|
|
|
zoom: 0,
|
2021-04-24 09:32:28 +03:00
|
|
|
minZoom: MAX_SCALE,
|
2021-04-24 10:24:25 +03:00
|
|
|
maxZoom: MAX_SCALE,
|
2020-12-20 19:40:16 +03:00
|
|
|
rotation: 0,
|
|
|
|
translationX: 0,
|
|
|
|
translationY: 0,
|
|
|
|
moving: false,
|
2021-02-25 13:16:40 +03:00
|
|
|
contextMenuDisplayed: false,
|
2020-12-19 12:20:15 +03:00
|
|
|
};
|
2019-03-30 09:31:15 +03:00
|
|
|
}
|
2018-04-12 01:58:04 +03:00
|
|
|
|
2021-04-09 09:03:10 +03:00
|
|
|
// XXX: Refs to functional components
|
2021-04-09 09:02:38 +03:00
|
|
|
private contextMenuButton = createRef<any>();
|
|
|
|
private focusLock = createRef<any>();
|
2021-04-26 14:11:41 +03:00
|
|
|
private imageWrapper = createRef<HTMLDivElement>();
|
2021-04-26 14:30:14 +03:00
|
|
|
private image = createRef<HTMLImageElement>();
|
2021-04-03 16:06:27 +03:00
|
|
|
|
2021-04-09 09:02:38 +03:00
|
|
|
private initX = 0;
|
|
|
|
private initY = 0;
|
|
|
|
private previousX = 0;
|
|
|
|
private previousY = 0;
|
2020-12-20 19:40:16 +03:00
|
|
|
|
2020-12-19 15:30:56 +03:00
|
|
|
componentDidMount() {
|
2021-02-25 09:51:38 +03:00
|
|
|
// We have to use addEventListener() because the listener
|
|
|
|
// needs to be passive in order to work with Chromium
|
2021-04-03 16:06:27 +03:00
|
|
|
this.focusLock.current.addEventListener('wheel', this.onWheel, { passive: false });
|
2021-04-26 14:49:29 +03:00
|
|
|
// We want to recalculate zoom whenever the window's size changes
|
2021-06-07 16:39:11 +03:00
|
|
|
window.addEventListener("resize", this.recalculateZoom);
|
2021-04-26 14:30:14 +03:00
|
|
|
// After the image loads for the first time we want to calculate the zoom
|
2021-06-07 16:39:11 +03:00
|
|
|
this.image.current.addEventListener("load", this.recalculateZoom);
|
2020-12-19 15:30:56 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
componentWillUnmount() {
|
2021-04-03 16:06:27 +03:00
|
|
|
this.focusLock.current.removeEventListener('wheel', this.onWheel);
|
2021-06-07 16:39:11 +03:00
|
|
|
window.removeEventListener("resize", this.recalculateZoom);
|
|
|
|
this.image.current.removeEventListener("load", this.recalculateZoom);
|
2020-12-19 15:30:56 +03:00
|
|
|
}
|
|
|
|
|
2021-06-07 16:39:11 +03:00
|
|
|
private recalculateZoom = () => {
|
|
|
|
this.setZoomAndRotation();
|
2021-06-29 15:11:58 +03:00
|
|
|
};
|
2021-06-07 16:39:11 +03:00
|
|
|
|
|
|
|
private setZoomAndRotation = (inputRotation?: number) => {
|
2021-04-26 14:30:14 +03:00
|
|
|
const image = this.image.current;
|
2021-04-26 14:11:41 +03:00
|
|
|
const imageWrapper = this.imageWrapper.current;
|
2021-04-24 10:41:46 +03:00
|
|
|
|
2021-07-03 22:18:47 +03:00
|
|
|
const rotation = inputRotation ?? this.state.rotation;
|
2021-06-07 16:39:11 +03:00
|
|
|
|
2021-06-07 16:46:03 +03:00
|
|
|
const imageIsNotFlipped = rotation % 180 === 0;
|
2021-06-06 09:51:07 +03:00
|
|
|
|
|
|
|
// If the image is rotated take it into account
|
2021-06-07 16:46:03 +03:00
|
|
|
const width = imageIsNotFlipped ? image.naturalWidth : image.naturalHeight;
|
|
|
|
const height = imageIsNotFlipped ? image.naturalHeight : image.naturalWidth;
|
2021-06-06 09:51:07 +03:00
|
|
|
|
|
|
|
const zoomX = imageWrapper.clientWidth / width;
|
|
|
|
const zoomY = imageWrapper.clientHeight / height;
|
2021-04-26 14:47:06 +03:00
|
|
|
|
|
|
|
// If the image is smaller in both dimensions set its the zoom to 1 to
|
|
|
|
// display it in its original size
|
|
|
|
if (zoomX >= 1 && zoomY >= 1) {
|
|
|
|
this.setState({
|
|
|
|
zoom: 1,
|
|
|
|
minZoom: 1,
|
|
|
|
maxZoom: 1,
|
2021-06-07 16:39:11 +03:00
|
|
|
rotation: rotation,
|
2021-04-26 14:47:06 +03:00
|
|
|
});
|
|
|
|
return;
|
|
|
|
}
|
2021-04-24 10:41:46 +03:00
|
|
|
// We set minZoom to the min of the zoomX and zoomY to avoid overflow in
|
|
|
|
// any direction. We also multiply by MAX_SCALE to get a gap around the
|
|
|
|
// image by default
|
2021-04-24 09:32:28 +03:00
|
|
|
const minZoom = Math.min(zoomX, zoomY) * MAX_SCALE;
|
2021-04-24 09:03:39 +03:00
|
|
|
|
2021-06-07 16:26:54 +03:00
|
|
|
// If zoom is smaller than minZoom don't go below that value
|
2021-06-06 09:56:12 +03:00
|
|
|
const zoom = (this.state.zoom <= this.state.minZoom) ? minZoom : this.state.zoom;
|
|
|
|
|
2021-04-24 09:32:28 +03:00
|
|
|
this.setState({
|
|
|
|
minZoom: minZoom,
|
2021-04-26 14:47:06 +03:00
|
|
|
maxZoom: 1,
|
2021-06-07 16:39:11 +03:00
|
|
|
rotation: rotation,
|
2021-06-06 09:56:12 +03:00
|
|
|
zoom: zoom,
|
2021-04-24 09:32:28 +03:00
|
|
|
});
|
2021-06-29 15:11:58 +03:00
|
|
|
};
|
2021-04-24 09:03:39 +03:00
|
|
|
|
2021-07-21 09:13:30 +03:00
|
|
|
private zoomDelta(delta: number, zoomX?: number, zoomY?: number) {
|
|
|
|
this.zoom(this.state.zoom + delta, zoomX, zoomY);
|
|
|
|
}
|
|
|
|
|
|
|
|
private zoom(zoomLevel: number, zoomX?: number, zoomY?: number) {
|
|
|
|
const oldZoom = this.state.zoom;
|
|
|
|
const newZoom = Math.min(zoomLevel, this.state.maxZoom);
|
2020-12-20 19:40:16 +03:00
|
|
|
|
2021-04-24 09:32:28 +03:00
|
|
|
if (newZoom <= this.state.minZoom) {
|
2021-07-21 09:13:30 +03:00
|
|
|
// Zoom out fully
|
2020-12-19 12:20:15 +03:00
|
|
|
this.setState({
|
2021-04-24 09:32:28 +03:00
|
|
|
zoom: this.state.minZoom,
|
2020-12-20 22:09:01 +03:00
|
|
|
translationX: 0,
|
|
|
|
translationY: 0,
|
2020-12-19 12:20:15 +03:00
|
|
|
});
|
2021-07-21 09:13:30 +03:00
|
|
|
} else if (zoomX === undefined && zoomY === undefined) {
|
|
|
|
// Zoom relative to the center of the view
|
|
|
|
this.setState({
|
|
|
|
zoom: newZoom,
|
|
|
|
translationX: this.state.translationX * newZoom / oldZoom,
|
|
|
|
translationY: this.state.translationY * newZoom / oldZoom,
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
// Zoom relative to the given point on the image.
|
|
|
|
// First we need to figure out the offset of the anchor point
|
|
|
|
// relative to the center of the image, accounting for rotation.
|
|
|
|
let offsetX;
|
|
|
|
let offsetY;
|
|
|
|
switch (((this.state.rotation % 360) + 360) % 360) {
|
|
|
|
case 0:
|
|
|
|
offsetX = this.image.current.clientWidth / 2 - zoomX;
|
|
|
|
offsetY = this.image.current.clientHeight / 2 - zoomY;
|
|
|
|
break;
|
|
|
|
case 90:
|
|
|
|
offsetX = zoomY - this.image.current.clientHeight / 2;
|
|
|
|
offsetY = this.image.current.clientWidth / 2 - zoomX;
|
|
|
|
break;
|
|
|
|
case 180:
|
|
|
|
offsetX = zoomX - this.image.current.clientWidth / 2;
|
|
|
|
offsetY = zoomY - this.image.current.clientHeight / 2;
|
|
|
|
break;
|
|
|
|
case 270:
|
|
|
|
offsetX = this.image.current.clientHeight / 2 - zoomY;
|
|
|
|
offsetY = zoomX - this.image.current.clientWidth / 2;
|
|
|
|
}
|
|
|
|
|
|
|
|
// Apply the zoom and offset
|
|
|
|
this.setState({
|
|
|
|
zoom: newZoom,
|
|
|
|
translationX: this.state.translationX + (newZoom - oldZoom) * offsetX,
|
|
|
|
translationY: this.state.translationY + (newZoom - oldZoom) * offsetY,
|
|
|
|
});
|
2020-12-20 22:28:19 +03:00
|
|
|
}
|
2021-04-24 11:36:53 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
private onWheel = (ev: WheelEvent) => {
|
|
|
|
ev.stopPropagation();
|
|
|
|
ev.preventDefault();
|
2021-06-07 16:43:43 +03:00
|
|
|
const { deltaY } = normalizeWheelEvent(ev);
|
2021-07-21 09:13:30 +03:00
|
|
|
|
|
|
|
if (ev.target === this.image.current) {
|
|
|
|
// Zoom in on the point on the image targeted by the cursor
|
|
|
|
this.zoomDelta(-deltaY * ZOOM_COEFFICIENT, ev.offsetX, ev.offsetY);
|
|
|
|
} else {
|
|
|
|
// The user is scrolling outside of the image, so we can't really
|
|
|
|
// get a targeted point. Instead, we'll just zoom in on the center.
|
|
|
|
this.zoomDelta(-deltaY * ZOOM_COEFFICIENT);
|
|
|
|
}
|
2021-04-24 11:36:53 +03:00
|
|
|
};
|
|
|
|
|
2021-07-21 09:42:30 +03:00
|
|
|
private onZoomInClick = () => {
|
2021-07-21 09:13:30 +03:00
|
|
|
this.zoomDelta(ZOOM_STEP);
|
2021-04-24 11:36:53 +03:00
|
|
|
};
|
|
|
|
|
2021-07-21 09:42:30 +03:00
|
|
|
private onZoomOutClick = () => {
|
2021-07-21 09:13:30 +03:00
|
|
|
this.zoomDelta(-ZOOM_STEP);
|
2021-04-24 11:36:53 +03:00
|
|
|
};
|
|
|
|
|
|
|
|
private onKeyDown = (ev: KeyboardEvent) => {
|
|
|
|
if (ev.key === Key.ESCAPE) {
|
|
|
|
ev.stopPropagation();
|
|
|
|
ev.preventDefault();
|
|
|
|
this.props.onFinished();
|
|
|
|
}
|
2021-04-03 16:06:27 +03:00
|
|
|
};
|
2020-12-19 12:20:15 +03:00
|
|
|
|
2021-04-03 16:06:27 +03:00
|
|
|
private onRotateCounterClockwiseClick = () => {
|
2020-12-20 19:40:16 +03:00
|
|
|
const cur = this.state.rotation;
|
2021-06-07 16:39:11 +03:00
|
|
|
this.setZoomAndRotation(cur - 90);
|
2019-03-30 09:31:15 +03:00
|
|
|
};
|
2018-04-12 01:58:04 +03:00
|
|
|
|
2021-04-03 16:06:27 +03:00
|
|
|
private onRotateClockwiseClick = () => {
|
2020-12-20 19:40:16 +03:00
|
|
|
const cur = this.state.rotation;
|
2021-06-07 16:39:11 +03:00
|
|
|
this.setZoomAndRotation(cur + 90);
|
2019-03-30 09:31:15 +03:00
|
|
|
};
|
|
|
|
|
2021-04-03 16:06:27 +03:00
|
|
|
private onDownloadClick = () => {
|
2021-02-24 18:28:12 +03:00
|
|
|
const a = document.createElement("a");
|
|
|
|
a.href = this.props.src;
|
|
|
|
a.download = this.props.name;
|
2021-04-13 09:15:42 +03:00
|
|
|
a.target = "_blank";
|
2021-05-14 05:55:14 +03:00
|
|
|
a.rel = "noreferrer noopener";
|
2021-02-24 18:28:12 +03:00
|
|
|
a.click();
|
2021-04-03 16:06:27 +03:00
|
|
|
};
|
2021-02-24 18:28:12 +03:00
|
|
|
|
2021-04-03 16:06:27 +03:00
|
|
|
private onOpenContextMenu = () => {
|
2021-02-24 21:17:33 +03:00
|
|
|
this.setState({
|
2021-02-25 13:16:40 +03:00
|
|
|
contextMenuDisplayed: true,
|
2021-02-24 21:17:33 +03:00
|
|
|
});
|
2021-04-03 16:06:27 +03:00
|
|
|
};
|
2021-02-24 21:17:33 +03:00
|
|
|
|
2021-04-03 16:06:27 +03:00
|
|
|
private onCloseContextMenu = () => {
|
2021-02-24 21:17:33 +03:00
|
|
|
this.setState({
|
2021-02-25 13:16:40 +03:00
|
|
|
contextMenuDisplayed: false,
|
2021-02-24 21:17:33 +03:00
|
|
|
});
|
2021-04-03 16:06:27 +03:00
|
|
|
};
|
2021-02-24 21:17:33 +03:00
|
|
|
|
2021-04-03 16:06:27 +03:00
|
|
|
private onPermalinkClicked = (ev: React.MouseEvent) => {
|
2021-02-24 22:14:12 +03:00
|
|
|
// 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.
|
2021-02-25 13:23:14 +03:00
|
|
|
ev.preventDefault();
|
2021-02-24 22:14:12 +03:00
|
|
|
dis.dispatch({
|
|
|
|
action: 'view_room',
|
|
|
|
event_id: this.props.mxEvent.getId(),
|
|
|
|
highlighted: true,
|
|
|
|
room_id: this.props.mxEvent.getRoomId(),
|
|
|
|
});
|
2021-02-25 10:13:27 +03:00
|
|
|
this.props.onFinished();
|
2021-02-24 22:14:12 +03:00
|
|
|
};
|
|
|
|
|
2021-04-03 16:06:27 +03:00
|
|
|
private onStartMoving = (ev: React.MouseEvent) => {
|
2020-12-20 19:40:16 +03:00
|
|
|
ev.stopPropagation();
|
|
|
|
ev.preventDefault();
|
2018-04-12 01:58:04 +03:00
|
|
|
|
2021-04-15 09:10:03 +03:00
|
|
|
// Don't do anything if we pressed any
|
|
|
|
// other button than the left one
|
|
|
|
if (ev.button !== 0) return;
|
|
|
|
|
2021-04-02 11:37:42 +03:00
|
|
|
// Zoom in if we are completely zoomed out
|
2021-04-24 09:32:28 +03:00
|
|
|
if (this.state.zoom === this.state.minZoom) {
|
2021-07-21 09:13:30 +03:00
|
|
|
this.zoom(this.state.maxZoom, ev.nativeEvent.offsetX, ev.nativeEvent.offsetY);
|
2021-04-02 11:37:42 +03:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2021-06-07 16:43:43 +03:00
|
|
|
this.setState({ moving: true });
|
2021-04-02 11:01:41 +03:00
|
|
|
this.previousX = this.state.translationX;
|
|
|
|
this.previousY = this.state.translationY;
|
2021-06-06 09:14:43 +03:00
|
|
|
this.initX = ev.pageX - this.state.translationX;
|
|
|
|
this.initY = ev.pageY - this.state.translationY;
|
2021-04-03 16:06:27 +03:00
|
|
|
};
|
2018-04-12 01:58:04 +03:00
|
|
|
|
2021-04-03 16:06:27 +03:00
|
|
|
private onMoving = (ev: React.MouseEvent) => {
|
2020-12-20 19:40:16 +03:00
|
|
|
ev.stopPropagation();
|
|
|
|
ev.preventDefault();
|
2018-04-12 01:58:04 +03:00
|
|
|
|
2021-04-02 11:22:10 +03:00
|
|
|
if (!this.state.moving) return;
|
2018-04-12 01:58:04 +03:00
|
|
|
|
2020-12-20 19:40:16 +03:00
|
|
|
this.setState({
|
2021-06-06 09:14:43 +03:00
|
|
|
translationX: ev.pageX - this.initX,
|
|
|
|
translationY: ev.pageY - this.initY,
|
2020-12-20 19:40:16 +03:00
|
|
|
});
|
2021-04-03 16:06:27 +03:00
|
|
|
};
|
2020-12-20 19:40:16 +03:00
|
|
|
|
2021-04-03 16:06:27 +03:00
|
|
|
private onEndMoving = () => {
|
2021-04-02 11:37:42 +03:00
|
|
|
// Zoom out if we haven't moved much
|
2021-04-02 11:01:41 +03:00
|
|
|
if (
|
|
|
|
this.state.moving === true &&
|
2021-04-03 17:19:22 +03:00
|
|
|
Math.abs(this.state.translationX - this.previousX) < ZOOM_DISTANCE &&
|
|
|
|
Math.abs(this.state.translationY - this.previousY) < ZOOM_DISTANCE
|
2021-04-02 11:01:41 +03:00
|
|
|
) {
|
2021-07-21 09:13:30 +03:00
|
|
|
this.zoom(this.state.minZoom);
|
2021-06-06 09:09:41 +03:00
|
|
|
this.initX = 0;
|
|
|
|
this.initY = 0;
|
2021-04-02 11:01:41 +03:00
|
|
|
}
|
2021-06-07 16:43:43 +03:00
|
|
|
this.setState({ moving: false });
|
2021-04-03 16:06:27 +03:00
|
|
|
};
|
2020-12-20 19:40:16 +03:00
|
|
|
|
2021-04-03 16:06:27 +03:00
|
|
|
private renderContextMenu() {
|
2021-02-24 21:17:33 +03:00
|
|
|
let contextMenu = null;
|
2021-02-25 13:16:40 +03:00
|
|
|
if (this.state.contextMenuDisplayed) {
|
2021-02-24 21:17:33 +03:00
|
|
|
contextMenu = (
|
2021-07-06 21:59:12 +03:00
|
|
|
<MessageContextMenu
|
2021-02-24 21:17:33 +03:00
|
|
|
{...aboveLeftOf(this.contextMenuButton.current.getBoundingClientRect())}
|
2021-07-06 21:59:12 +03:00
|
|
|
mxEvent={this.props.mxEvent}
|
|
|
|
permalinkCreator={this.props.permalinkCreator}
|
2021-02-24 21:17:33 +03:00
|
|
|
onFinished={this.onCloseContextMenu}
|
2021-07-06 21:59:12 +03:00
|
|
|
onCloseDialog={this.props.onFinished}
|
|
|
|
/>
|
2021-02-24 21:17:33 +03:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<React.Fragment>
|
|
|
|
{ contextMenu }
|
|
|
|
</React.Fragment>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2020-12-20 19:40:16 +03:00
|
|
|
render() {
|
|
|
|
const showEventMeta = !!this.props.mxEvent;
|
2021-04-26 16:47:58 +03:00
|
|
|
const zoomingDisabled = this.state.maxZoom === this.state.minZoom;
|
2018-04-12 01:58:04 +03:00
|
|
|
|
2021-04-02 11:01:41 +03:00
|
|
|
let cursor;
|
|
|
|
if (this.state.moving) {
|
|
|
|
cursor= "grabbing";
|
2021-04-26 16:47:58 +03:00
|
|
|
} else if (zoomingDisabled) {
|
2021-04-26 16:01:06 +03:00
|
|
|
cursor = "default";
|
2021-04-24 09:32:28 +03:00
|
|
|
} else if (this.state.zoom === this.state.minZoom) {
|
2021-04-02 11:01:41 +03:00
|
|
|
cursor = "zoom-in";
|
|
|
|
} else {
|
|
|
|
cursor = "zoom-out";
|
|
|
|
}
|
2020-12-20 19:40:16 +03:00
|
|
|
const rotationDegrees = this.state.rotation + "deg";
|
2021-04-24 09:35:45 +03:00
|
|
|
const zoom = this.state.zoom;
|
2020-12-20 19:40:16 +03:00
|
|
|
const translatePixelsX = this.state.translationX + "px";
|
|
|
|
const translatePixelsY = this.state.translationY + "px";
|
2021-02-25 09:51:38 +03:00
|
|
|
// 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.
|
2020-12-20 19:40:16 +03:00
|
|
|
const style = {
|
2021-04-02 11:01:41 +03:00
|
|
|
cursor: cursor,
|
2021-04-02 11:09:53 +03:00
|
|
|
transition: this.state.moving ? null : "transform 200ms ease 0s",
|
2020-12-20 22:00:11 +03:00
|
|
|
transform: `translateX(${translatePixelsX})
|
|
|
|
translateY(${translatePixelsY})
|
2021-04-24 09:35:45 +03:00
|
|
|
scale(${zoom})
|
2020-12-20 22:00:11 +03:00
|
|
|
rotate(${rotationDegrees})`,
|
2020-12-20 19:40:16 +03:00
|
|
|
};
|
2019-03-30 09:31:15 +03:00
|
|
|
|
2021-02-24 20:24:44 +03:00
|
|
|
let info;
|
2021-02-24 22:04:25 +03:00
|
|
|
if (showEventMeta) {
|
|
|
|
const mxEvent = this.props.mxEvent;
|
2021-02-24 22:07:41 +03:00
|
|
|
const showTwelveHour = SettingsStore.getValue("showTwelveHourTimestamps");
|
2021-02-24 22:14:12 +03:00
|
|
|
let permalink = "#";
|
|
|
|
if (this.props.permalinkCreator) {
|
|
|
|
permalink = this.props.permalinkCreator.forEvent(this.props.mxEvent.getId());
|
|
|
|
}
|
2021-02-24 22:04:25 +03:00
|
|
|
|
|
|
|
const senderName = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender();
|
2021-04-02 09:31:42 +03:00
|
|
|
const sender = (
|
|
|
|
<div className="mx_ImageView_info_sender">
|
2021-06-07 17:12:06 +03:00
|
|
|
{ senderName }
|
2021-04-02 09:31:42 +03:00
|
|
|
</div>
|
|
|
|
);
|
2021-02-24 22:04:25 +03:00
|
|
|
const messageTimestamp = (
|
2021-02-24 22:14:12 +03:00
|
|
|
<a
|
|
|
|
href={permalink}
|
|
|
|
onClick={this.onPermalinkClicked}
|
2021-04-03 16:06:27 +03:00
|
|
|
aria-label={formatFullDate(new Date(this.props.mxEvent.getTs()), showTwelveHour, false)}
|
2021-02-24 22:14:12 +03:00
|
|
|
>
|
2021-04-03 16:06:27 +03:00
|
|
|
<MessageTimestamp
|
|
|
|
showFullDate={true}
|
|
|
|
showTwelveHour={showTwelveHour}
|
|
|
|
ts={mxEvent.getTs()}
|
|
|
|
showSeconds={false}
|
|
|
|
/>
|
2021-02-24 22:14:12 +03:00
|
|
|
</a>
|
2021-02-24 22:04:25 +03:00
|
|
|
);
|
|
|
|
const avatar = (
|
|
|
|
<MemberAvatar
|
|
|
|
member={mxEvent.sender}
|
|
|
|
width={32} height={32}
|
|
|
|
viewUserOnClick={true}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
|
2021-02-24 20:24:44 +03:00
|
|
|
info = (
|
|
|
|
<div className="mx_ImageView_info_wrapper">
|
2021-06-07 17:12:06 +03:00
|
|
|
{ avatar }
|
2021-02-24 20:24:44 +03:00
|
|
|
<div className="mx_ImageView_info">
|
2021-06-07 17:12:06 +03:00
|
|
|
{ sender }
|
|
|
|
{ messageTimestamp }
|
2021-02-24 20:24:44 +03:00
|
|
|
</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>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2021-04-13 09:11:09 +03:00
|
|
|
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}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2021-04-26 16:47:58 +03:00
|
|
|
let zoomOutButton;
|
|
|
|
let zoomInButton;
|
|
|
|
if (!zoomingDisabled) {
|
|
|
|
zoomOutButton = (
|
|
|
|
<AccessibleTooltipButton
|
|
|
|
className="mx_ImageView_button mx_ImageView_button_zoomOut"
|
|
|
|
title={_t("Zoom out")}
|
|
|
|
onClick={this.onZoomOutClick}>
|
|
|
|
</AccessibleTooltipButton>
|
|
|
|
);
|
|
|
|
zoomInButton = (
|
|
|
|
<AccessibleTooltipButton
|
|
|
|
className="mx_ImageView_button mx_ImageView_button_zoomIn"
|
|
|
|
title={_t("Zoom in")}
|
2021-06-07 17:12:06 +03:00
|
|
|
onClick={this.onZoomInClick}>
|
2021-04-26 16:47:58 +03:00
|
|
|
</AccessibleTooltipButton>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2018-04-12 01:58:04 +03:00
|
|
|
return (
|
2020-05-29 03:44:09 +03:00
|
|
|
<FocusLock
|
|
|
|
returnFocus={true}
|
|
|
|
lockProps={{
|
|
|
|
onKeyDown: this.onKeyDown,
|
|
|
|
role: "dialog",
|
|
|
|
}}
|
|
|
|
className="mx_ImageView"
|
2021-04-03 16:06:27 +03:00
|
|
|
ref={this.focusLock}
|
2020-05-29 03:44:09 +03:00
|
|
|
>
|
2021-04-03 16:06:27 +03:00
|
|
|
<div className="mx_ImageView_panel">
|
2021-06-07 17:12:06 +03:00
|
|
|
{ info }
|
2021-04-03 16:06:27 +03:00
|
|
|
<div className="mx_ImageView_toolbar">
|
2021-07-13 21:28:49 +03:00
|
|
|
{ zoomOutButton }
|
|
|
|
{ zoomInButton }
|
2021-04-03 16:06:27 +03:00
|
|
|
<AccessibleTooltipButton
|
|
|
|
className="mx_ImageView_button mx_ImageView_button_rotateCCW"
|
|
|
|
title={_t("Rotate Left")}
|
2021-07-20 00:43:11 +03:00
|
|
|
onClick={this.onRotateCounterClockwiseClick}>
|
2021-04-03 16:06:27 +03:00
|
|
|
</AccessibleTooltipButton>
|
2021-05-14 05:50:07 +03:00
|
|
|
<AccessibleTooltipButton
|
|
|
|
className="mx_ImageView_button mx_ImageView_button_rotateCW"
|
|
|
|
title={_t("Rotate Right")}
|
|
|
|
onClick={this.onRotateClockwiseClick}>
|
|
|
|
</AccessibleTooltipButton>
|
2021-04-03 16:06:27 +03:00
|
|
|
<AccessibleTooltipButton
|
|
|
|
className="mx_ImageView_button mx_ImageView_button_download"
|
|
|
|
title={_t("Download")}
|
2021-07-20 00:43:11 +03:00
|
|
|
onClick={this.onDownloadClick}>
|
2021-04-03 16:06:27 +03:00
|
|
|
</AccessibleTooltipButton>
|
2021-06-07 17:12:06 +03:00
|
|
|
{ contextMenuButton }
|
2021-04-03 16:06:27 +03:00
|
|
|
<AccessibleTooltipButton
|
|
|
|
className="mx_ImageView_button mx_ImageView_button_close"
|
|
|
|
title={_t("Close")}
|
2021-07-20 00:43:11 +03:00
|
|
|
onClick={this.props.onFinished}>
|
2021-04-03 16:06:27 +03:00
|
|
|
</AccessibleTooltipButton>
|
2021-06-07 17:12:06 +03:00
|
|
|
{ this.renderContextMenu() }
|
2021-02-24 13:15:59 +03:00
|
|
|
</div>
|
2021-04-03 16:06:27 +03:00
|
|
|
</div>
|
2021-04-26 14:11:41 +03:00
|
|
|
<div
|
|
|
|
className="mx_ImageView_image_wrapper"
|
2021-06-06 04:08:44 +03:00
|
|
|
ref={this.imageWrapper}
|
|
|
|
onMouseDown={this.props.onFinished}
|
|
|
|
onMouseMove={this.onMoving}
|
|
|
|
onMouseUp={this.onEndMoving}
|
|
|
|
onMouseLeave={this.onEndMoving}
|
|
|
|
>
|
2021-04-03 16:06:27 +03:00
|
|
|
<img
|
|
|
|
src={this.props.src}
|
|
|
|
style={style}
|
2021-07-17 09:21:46 +03:00
|
|
|
alt={this.props.name}
|
2021-04-26 14:30:14 +03:00
|
|
|
ref={this.image}
|
2021-04-03 16:06:27 +03:00
|
|
|
className="mx_ImageView_image"
|
|
|
|
draggable={true}
|
|
|
|
onMouseDown={this.onStartMoving}
|
|
|
|
/>
|
|
|
|
</div>
|
2020-05-29 03:44:09 +03:00
|
|
|
</FocusLock>
|
2018-04-12 01:58:04 +03:00
|
|
|
);
|
2019-03-30 09:31:15 +03:00
|
|
|
}
|
|
|
|
}
|