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>
|
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';
|
2019-07-31 14:19:29 +03:00
|
|
|
import PropTypes from 'prop-types';
|
2019-12-21 00:13:46 +03:00
|
|
|
import {MatrixClientPeg} from "../../../MatrixClientPeg";
|
2018-04-13 02:43:44 +03:00
|
|
|
import { _t } from '../../../languageHandler';
|
2021-02-24 16:43:33 +03:00
|
|
|
import AccessibleTooltipButton from "./AccessibleTooltipButton";
|
2019-12-21 00:41:07 +03:00
|
|
|
import Modal from "../../../Modal";
|
|
|
|
import * as sdk from "../../../index";
|
2019-12-16 20:14:03 +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-02-24 21:17:33 +03:00
|
|
|
import {ContextMenuTooltipButton} from "../../../accessibility/context_menu/ContextMenuTooltipButton";
|
|
|
|
import MessageContextMenu from "../context_menus/MessageContextMenu";
|
|
|
|
import {aboveLeftOf, ContextMenu} 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";
|
2018-04-12 01:58:04 +03:00
|
|
|
|
2019-03-30 09:31:15 +03:00
|
|
|
export default class ImageView extends React.Component {
|
|
|
|
static propTypes = {
|
2019-07-31 14:19:29 +03:00
|
|
|
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
|
2018-04-12 01:58:04 +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.
|
2019-07-31 14:19:29 +03:00
|
|
|
mxEvent: PropTypes.object,
|
2021-02-24 21:11:08 +03:00
|
|
|
permalinkCreator: PropTypes.object,
|
2019-03-30 09:31:15 +03:00
|
|
|
};
|
|
|
|
|
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
2020-12-19 12:20:15 +03:00
|
|
|
this.state = {
|
2020-12-20 19:40:16 +03:00
|
|
|
rotation: 0,
|
2020-12-19 12:20:15 +03:00
|
|
|
zoom: 100,
|
2020-12-20 19:40:16 +03:00
|
|
|
translationX: 0,
|
|
|
|
translationY: 0,
|
|
|
|
moving: false,
|
2021-02-24 21:17:33 +03:00
|
|
|
contextMenuDisplay: 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-02-24 21:17:33 +03:00
|
|
|
contextMenuButton = createRef();
|
2020-12-20 19:40:16 +03:00
|
|
|
initX = 0;
|
|
|
|
initY = 0;
|
|
|
|
lastX = 0;
|
|
|
|
lastY = 0;
|
2020-12-20 22:37:31 +03:00
|
|
|
minZoom = 100;
|
|
|
|
maxZoom = 300;
|
2020-12-20 19:40:16 +03:00
|
|
|
|
2020-12-19 15:30:56 +03:00
|
|
|
componentDidMount() {
|
2020-12-20 22:05:27 +03:00
|
|
|
/* We have to use addEventListener() because the listener
|
|
|
|
* needs to be passive in order to work with Chromium */
|
2020-12-19 15:30:56 +03:00
|
|
|
this.focusLock.addEventListener('wheel', this.onWheel, { passive: false });
|
|
|
|
}
|
|
|
|
|
|
|
|
componentWillUnmount() {
|
|
|
|
this.focusLock.removeEventListener('wheel', this.onWheel);
|
|
|
|
}
|
|
|
|
|
2019-03-30 09:31:15 +03:00
|
|
|
onKeyDown = (ev) => {
|
2019-12-16 20:14:03 +03:00
|
|
|
if (ev.key === Key.ESCAPE) {
|
2018-04-12 01:58:04 +03:00
|
|
|
ev.stopPropagation();
|
|
|
|
ev.preventDefault();
|
|
|
|
this.props.onFinished();
|
|
|
|
}
|
2019-03-30 09:31:15 +03:00
|
|
|
};
|
2018-04-12 01:58:04 +03:00
|
|
|
|
2020-12-19 12:20:15 +03:00
|
|
|
onWheel = (ev) => {
|
2020-12-20 22:09:01 +03:00
|
|
|
ev.stopPropagation();
|
|
|
|
ev.preventDefault();
|
|
|
|
const newZoom =this.state.zoom - ev.deltaY;
|
2020-12-20 19:40:16 +03:00
|
|
|
|
2020-12-20 22:37:31 +03:00
|
|
|
if (newZoom <= this.minZoom) {
|
2020-12-19 12:20:15 +03:00
|
|
|
this.setState({
|
2020-12-20 22:37:31 +03:00
|
|
|
zoom: this.minZoom,
|
2020-12-20 22:09:01 +03:00
|
|
|
translationX: 0,
|
|
|
|
translationY: 0,
|
2020-12-19 12:20:15 +03:00
|
|
|
});
|
2020-12-20 22:09:01 +03:00
|
|
|
return;
|
2020-12-19 12:20:15 +03:00
|
|
|
}
|
2020-12-20 22:37:31 +03:00
|
|
|
if (newZoom >= this.maxZoom) {
|
|
|
|
this.setState({zoom: this.maxZoom});
|
2020-12-20 22:28:19 +03:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2020-12-20 22:09:01 +03:00
|
|
|
this.setState({
|
|
|
|
zoom: newZoom,
|
|
|
|
});
|
2020-12-19 12:20:15 +03:00
|
|
|
}
|
|
|
|
|
2019-03-30 09:31:15 +03:00
|
|
|
onRedactClick = () => {
|
2018-04-12 01:58:04 +03:00
|
|
|
const ConfirmRedactDialog = sdk.getComponent("dialogs.ConfirmRedactDialog");
|
|
|
|
Modal.createTrackedDialog('Confirm Redact Dialog', 'Image View', ConfirmRedactDialog, {
|
|
|
|
onFinished: (proceed) => {
|
|
|
|
if (!proceed) return;
|
2020-05-08 02:15:48 +03:00
|
|
|
this.props.onFinished();
|
2018-04-12 01:58:04 +03:00
|
|
|
MatrixClientPeg.get().redactEvent(
|
2018-10-27 06:50:35 +03:00
|
|
|
this.props.mxEvent.getRoomId(), this.props.mxEvent.getId(),
|
2018-04-12 01:58:04 +03:00
|
|
|
).catch(function(e) {
|
2018-10-27 06:50:35 +03:00
|
|
|
const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
|
2018-04-12 01:58:04 +03:00
|
|
|
// display error message stating you couldn't delete this.
|
2018-10-27 06:50:35 +03:00
|
|
|
const code = e.errcode || e.statusCode;
|
2018-04-12 01:58:04 +03:00
|
|
|
Modal.createTrackedDialog('You cannot delete this image.', '', ErrorDialog, {
|
|
|
|
title: _t('Error'),
|
2018-10-27 06:50:35 +03:00
|
|
|
description: _t('You cannot delete this image. (%(code)s)', {code: code}),
|
2018-04-12 01:58:04 +03:00
|
|
|
});
|
2019-11-18 13:03:05 +03:00
|
|
|
});
|
2018-10-27 06:50:35 +03:00
|
|
|
},
|
2018-04-12 01:58:04 +03:00
|
|
|
});
|
2019-03-30 09:31:15 +03:00
|
|
|
};
|
2018-04-12 01:58:04 +03:00
|
|
|
|
2021-02-24 15:02:25 +03:00
|
|
|
onRotateCounterClockwiseClick = (ev) => {
|
2020-12-20 19:40:16 +03:00
|
|
|
const cur = this.state.rotation;
|
2019-03-30 09:31:15 +03:00
|
|
|
const rotationDegrees = (cur - 90) % 360;
|
2020-12-20 19:40:16 +03:00
|
|
|
this.setState({ rotation: rotationDegrees });
|
2019-03-30 09:31:15 +03:00
|
|
|
};
|
2018-04-12 01:58:04 +03:00
|
|
|
|
2021-02-24 15:02:25 +03:00
|
|
|
onRotateClockwiseClick = (ev) => {
|
2020-12-20 19:40:16 +03:00
|
|
|
const cur = this.state.rotation;
|
2019-03-30 09:31:15 +03:00
|
|
|
const rotationDegrees = (cur + 90) % 360;
|
2020-12-20 19:40:16 +03:00
|
|
|
this.setState({ rotation: rotationDegrees });
|
2019-03-30 09:31:15 +03:00
|
|
|
};
|
|
|
|
|
2021-02-24 15:02:25 +03:00
|
|
|
onZoomInClick = (ev) => {
|
2020-12-20 22:37:31 +03:00
|
|
|
if (this.state.zoom >= this.maxZoom) {
|
|
|
|
this.setState({zoom: this.maxZoom});
|
2020-12-20 22:28:19 +03:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2020-12-19 12:20:15 +03:00
|
|
|
this.setState({
|
|
|
|
zoom: this.state.zoom + 10,
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
2021-02-24 15:02:25 +03:00
|
|
|
onZoomOutClick = (ev) => {
|
2020-12-20 22:37:31 +03:00
|
|
|
if (this.state.zoom <= this.minZoom) {
|
2020-12-20 19:40:16 +03:00
|
|
|
this.setState({
|
2020-12-20 22:37:31 +03:00
|
|
|
zoom: this.minZoom,
|
2020-12-20 19:40:16 +03:00
|
|
|
translationX: 0,
|
|
|
|
translationY: 0,
|
|
|
|
});
|
|
|
|
return;
|
|
|
|
}
|
2020-12-19 12:20:15 +03:00
|
|
|
this.setState({
|
|
|
|
zoom: this.state.zoom - 10,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2021-02-24 18:28:12 +03:00
|
|
|
onDownloadClick = (ev) => {
|
|
|
|
const a = document.createElement("a");
|
|
|
|
a.href = this.props.src;
|
|
|
|
a.download = this.props.name;
|
|
|
|
a.click();
|
|
|
|
}
|
|
|
|
|
2021-02-24 21:17:33 +03:00
|
|
|
onOpenContextMenu = (ev) => {
|
|
|
|
this.setState({
|
|
|
|
contextMenuDisplay: true,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
onCloseContextMenu = () => {
|
|
|
|
this.setState({
|
|
|
|
contextMenuDisplay: false,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2020-12-20 19:40:16 +03:00
|
|
|
onStartMoving = ev => {
|
|
|
|
ev.stopPropagation();
|
|
|
|
ev.preventDefault();
|
2018-04-12 01:58:04 +03:00
|
|
|
|
2020-12-20 19:40:16 +03:00
|
|
|
this.setState({moving: true});
|
|
|
|
this.initX = ev.pageX - this.lastX;
|
|
|
|
this.initY = ev.pageY - this.lastY;
|
|
|
|
}
|
2018-04-12 01:58:04 +03:00
|
|
|
|
2020-12-20 19:40:16 +03:00
|
|
|
onMoving = ev => {
|
|
|
|
ev.stopPropagation();
|
|
|
|
ev.preventDefault();
|
2018-04-12 01:58:04 +03:00
|
|
|
|
2020-12-20 19:40:16 +03:00
|
|
|
if (!this.state.moving) return false;
|
2018-04-12 01:58:04 +03:00
|
|
|
|
2020-12-20 19:40:16 +03:00
|
|
|
this.lastX = ev.pageX - this.initX;
|
|
|
|
this.lastY = ev.pageY - this.initY;
|
|
|
|
this.setState({
|
|
|
|
translationX: this.lastX,
|
|
|
|
translationY: this.lastY,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
onEndMoving = ev => {
|
|
|
|
this.setState({moving: false});
|
|
|
|
}
|
|
|
|
|
2021-02-24 21:17:33 +03:00
|
|
|
renderContextMenu() {
|
|
|
|
let contextMenu = null;
|
|
|
|
if (this.state.contextMenuDisplay) {
|
|
|
|
contextMenu = (
|
|
|
|
<ContextMenu
|
|
|
|
{...aboveLeftOf(this.contextMenuButton.current.getBoundingClientRect())}
|
|
|
|
onFinished={this.onCloseContextMenu}
|
|
|
|
>
|
|
|
|
<MessageContextMenu
|
|
|
|
mxEvent={this.props.mxEvent}
|
|
|
|
permalinkCreator={this.props.permalinkCreator}
|
|
|
|
onFinished={this.onCloseContextMenu}
|
|
|
|
/>
|
|
|
|
</ContextMenu>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<React.Fragment>
|
|
|
|
{ contextMenu }
|
|
|
|
</React.Fragment>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2020-12-20 19:40:16 +03:00
|
|
|
render() {
|
|
|
|
const showEventMeta = !!this.props.mxEvent;
|
2018-04-12 01:58:04 +03:00
|
|
|
|
2020-12-20 19:40:16 +03:00
|
|
|
const rotationDegrees = this.state.rotation + "deg";
|
|
|
|
const zoomPercentage = this.state.zoom/100;
|
|
|
|
const translatePixelsX = this.state.translationX + "px";
|
|
|
|
const translatePixelsY = this.state.translationY + "px";
|
2020-12-20 22:00:11 +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 = {
|
2020-12-20 22:00:11 +03:00
|
|
|
transform: `translateX(${translatePixelsX})
|
|
|
|
translateY(${translatePixelsY})
|
2020-12-20 19:40:16 +03:00
|
|
|
scale(${zoomPercentage})
|
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:04:25 +03:00
|
|
|
|
|
|
|
const senderName = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender();
|
|
|
|
const messageTimestamp = (
|
2021-02-24 22:07:41 +03:00
|
|
|
<MessageTimestamp showTwelveHour={showTwelveHour} ts={mxEvent.getTs()} />
|
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-02-24 22:04:25 +03:00
|
|
|
{avatar}
|
2021-02-24 20:24:44 +03:00
|
|
|
<div className="mx_ImageView_info">
|
2021-02-24 22:04:25 +03:00
|
|
|
{senderName}
|
|
|
|
{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>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
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"
|
2020-12-19 15:30:56 +03:00
|
|
|
ref={ref => this.focusLock = ref}
|
2020-05-29 03:44:09 +03:00
|
|
|
>
|
2018-04-12 01:58:04 +03:00
|
|
|
<div className="mx_ImageView_content">
|
2021-02-24 21:33:17 +03:00
|
|
|
<div className="mx_ImageView_panel">
|
2021-02-24 20:24:44 +03:00
|
|
|
{info}
|
2021-02-24 09:47:59 +03:00
|
|
|
<div className="mx_ImageView_toolbar">
|
2021-02-24 10:11:53 +03:00
|
|
|
<div className="mx_ImageView_toolbar_buttons">
|
2021-02-24 16:43:33 +03:00
|
|
|
<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>
|
2021-02-24 18:28:12 +03:00
|
|
|
<AccessibleTooltipButton
|
2021-02-24 16:43:33 +03:00
|
|
|
className="mx_ImageView_button mx_ImageView_button_download"
|
|
|
|
title={_t("Download")}
|
2021-02-24 18:28:12 +03:00
|
|
|
onClick={ this.onDownloadClick }>
|
|
|
|
</AccessibleTooltipButton>
|
2021-02-24 20:13:12 +03:00
|
|
|
<ContextMenuTooltipButton
|
|
|
|
className="mx_ImageView_button mx_ImageView_button_more"
|
|
|
|
title={_t("Options")}
|
2021-02-24 21:17:33 +03:00
|
|
|
onClick={this.onOpenContextMenu}
|
|
|
|
inputRef={this.contextMenuButton}
|
2021-02-24 20:13:12 +03:00
|
|
|
/>
|
2021-02-24 16:43:33 +03:00
|
|
|
<AccessibleTooltipButton
|
|
|
|
className="mx_ImageView_button mx_ImageView_button_close"
|
|
|
|
title={_t("Close")}
|
|
|
|
onClick={ this.props.onFinished }>
|
|
|
|
</AccessibleTooltipButton>
|
2021-02-24 21:17:33 +03:00
|
|
|
{this.renderContextMenu()}
|
2021-02-24 10:11:53 +03:00
|
|
|
</div>
|
2021-02-24 09:47:59 +03:00
|
|
|
</div>
|
2018-04-12 01:58:04 +03:00
|
|
|
</div>
|
2021-02-24 13:15:59 +03:00
|
|
|
<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>
|
2018-04-12 01:58:04 +03:00
|
|
|
</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
|
|
|
}
|
|
|
|
}
|