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.
|
|
|
|
*/
|
|
|
|
|
|
|
|
'use strict';
|
|
|
|
|
2019-07-31 14:19:29 +03:00
|
|
|
import React from 'react';
|
|
|
|
import PropTypes from 'prop-types';
|
2018-04-12 01:58:04 +03:00
|
|
|
|
2018-10-27 06:50:35 +03:00
|
|
|
const MatrixClientPeg = require('../../../MatrixClientPeg');
|
2018-04-12 01:58:04 +03:00
|
|
|
|
2018-04-13 02:43:44 +03:00
|
|
|
import {formatDate} from '../../../DateUtils';
|
2018-10-27 06:50:35 +03:00
|
|
|
const filesize = require('filesize');
|
|
|
|
const AccessibleButton = require('../../../components/views/elements/AccessibleButton');
|
2018-04-13 02:43:44 +03:00
|
|
|
const Modal = require('../../../Modal');
|
|
|
|
const sdk = require('../../../index');
|
|
|
|
import { _t } from '../../../languageHandler';
|
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,
|
2019-03-30 09:31:15 +03:00
|
|
|
};
|
|
|
|
|
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
2019-04-04 18:36:45 +03:00
|
|
|
this.state = { rotationDegrees: 0 };
|
2019-03-30 09:31:15 +03:00
|
|
|
}
|
2018-04-12 01:58:04 +03:00
|
|
|
|
|
|
|
// XXX: keyboard shortcuts for managing dialogs should be done by the modal
|
|
|
|
// dialog base class somehow, surely...
|
2019-03-30 09:31:15 +03:00
|
|
|
componentDidMount() {
|
2018-04-12 01:58:04 +03:00
|
|
|
document.addEventListener("keydown", this.onKeyDown);
|
2019-03-30 09:31:15 +03:00
|
|
|
}
|
2018-04-12 01:58:04 +03:00
|
|
|
|
2019-03-30 09:31:15 +03:00
|
|
|
componentWillUnmount() {
|
2018-04-12 01:58:04 +03:00
|
|
|
document.removeEventListener("keydown", this.onKeyDown);
|
2019-03-30 09:31:15 +03:00
|
|
|
}
|
2018-04-12 01:58:04 +03:00
|
|
|
|
2019-03-30 09:31:15 +03:00
|
|
|
onKeyDown = (ev) => {
|
2019-07-06 12:42:14 +03:00
|
|
|
if (ev.keyCode === 27) { // 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
|
|
|
|
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;
|
|
|
|
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-12 14:51:23 +03:00
|
|
|
}).then();
|
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
|
|
|
|
2019-04-04 12:26:58 +03:00
|
|
|
getName() {
|
2018-10-27 06:50:35 +03:00
|
|
|
let name = this.props.name;
|
2018-04-12 01:58:04 +03:00
|
|
|
if (name && this.props.link) {
|
|
|
|
name = <a href={ this.props.link } target="_blank" rel="noopener">{ name }</a>;
|
|
|
|
}
|
|
|
|
return name;
|
2019-04-04 12:26:58 +03:00
|
|
|
}
|
2019-03-30 09:31:15 +03:00
|
|
|
|
|
|
|
rotateCounterClockwise = () => {
|
|
|
|
const cur = this.state.rotationDegrees;
|
|
|
|
const rotationDegrees = (cur - 90) % 360;
|
|
|
|
this.setState({ rotationDegrees });
|
|
|
|
};
|
2018-04-12 01:58:04 +03:00
|
|
|
|
2019-03-30 09:31:15 +03:00
|
|
|
rotateClockwise = () => {
|
|
|
|
const cur = this.state.rotationDegrees;
|
|
|
|
const rotationDegrees = (cur + 90) % 360;
|
|
|
|
this.setState({ rotationDegrees });
|
|
|
|
};
|
|
|
|
|
|
|
|
render() {
|
2018-04-12 01:58:04 +03:00
|
|
|
/*
|
|
|
|
// 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
|
|
|
|
};
|
|
|
|
*/
|
2019-03-30 09:31:15 +03:00
|
|
|
let style = {};
|
|
|
|
let res;
|
2018-04-12 01:58:04 +03:00
|
|
|
|
|
|
|
if (this.props.width && this.props.height) {
|
|
|
|
style = {
|
|
|
|
width: this.props.width,
|
|
|
|
height: this.props.height,
|
|
|
|
};
|
|
|
|
res = style.width + "x" + style.height + "px";
|
|
|
|
}
|
|
|
|
|
2018-10-27 06:50:35 +03:00
|
|
|
let size;
|
2018-04-12 01:58:04 +03:00
|
|
|
if (this.props.fileSize) {
|
|
|
|
size = filesize(this.props.fileSize);
|
|
|
|
}
|
|
|
|
|
2019-07-06 12:42:14 +03:00
|
|
|
let sizeRes;
|
2018-04-12 01:58:04 +03:00
|
|
|
if (size && res) {
|
2019-07-06 12:42:14 +03:00
|
|
|
sizeRes = size + ", " + res;
|
2018-10-27 06:50:35 +03:00
|
|
|
} else {
|
2019-07-06 12:42:14 +03:00
|
|
|
sizeRes = size || res;
|
2018-04-12 01:58:04 +03:00
|
|
|
}
|
|
|
|
|
2019-07-06 12:42:14 +03:00
|
|
|
let mayRedact = false;
|
2018-10-27 06:50:35 +03:00
|
|
|
const showEventMeta = !!this.props.mxEvent;
|
2018-04-12 01:58:04 +03:00
|
|
|
|
2018-10-27 06:50:35 +03:00
|
|
|
let eventMeta;
|
|
|
|
if (showEventMeta) {
|
2018-04-12 01:58:04 +03:00
|
|
|
// Figure out the sender, defaulting to mxid
|
|
|
|
let sender = this.props.mxEvent.getSender();
|
2019-07-06 12:42:14 +03:00
|
|
|
const cli = MatrixClientPeg.get();
|
|
|
|
const room = cli.getRoom(this.props.mxEvent.getRoomId());
|
2018-04-12 01:58:04 +03:00
|
|
|
if (room) {
|
2019-07-06 12:42:14 +03:00
|
|
|
mayRedact = room.currentState.maySendRedactionForEvent(this.props.mxEvent, cli.credentials.userId);
|
2018-04-12 01:58:04 +03:00
|
|
|
const member = room.getMember(sender);
|
|
|
|
if (member) sender = member.name;
|
|
|
|
}
|
|
|
|
|
|
|
|
eventMeta = (<div className="mx_ImageView_metadata">
|
2019-07-06 12:42:14 +03:00
|
|
|
{ _t('Uploaded on %(date)s by %(user)s', {
|
|
|
|
date: formatDate(new Date(this.props.mxEvent.getTs())),
|
|
|
|
user: sender,
|
|
|
|
}) }
|
2018-04-12 01:58:04 +03:00
|
|
|
</div>);
|
|
|
|
}
|
|
|
|
|
2018-10-27 06:50:35 +03:00
|
|
|
let eventRedact;
|
2019-07-06 12:42:14 +03:00
|
|
|
if (mayRedact) {
|
2018-04-12 01:58:04 +03:00
|
|
|
eventRedact = (<div className="mx_ImageView_button" onClick={this.onRedactClick}>
|
|
|
|
{ _t('Remove') }
|
|
|
|
</div>);
|
|
|
|
}
|
|
|
|
|
2019-03-30 09:31:15 +03:00
|
|
|
const rotationDegrees = this.state.rotationDegrees;
|
|
|
|
const effectiveStyle = {transform: `rotate(${rotationDegrees}deg)`, ...style};
|
|
|
|
|
2018-04-12 01:58:04 +03:00
|
|
|
return (
|
|
|
|
<div className="mx_ImageView">
|
|
|
|
<div className="mx_ImageView_lhs">
|
|
|
|
</div>
|
|
|
|
<div className="mx_ImageView_content">
|
2019-03-30 09:31:15 +03:00
|
|
|
<img src={this.props.src} title={this.props.name} style={effectiveStyle} className="mainImage" />
|
2018-04-12 01:58:04 +03:00
|
|
|
<div className="mx_ImageView_labelWrapper">
|
|
|
|
<div className="mx_ImageView_label">
|
2019-05-16 06:11:47 +03:00
|
|
|
<AccessibleButton className="mx_ImageView_rotateCounterClockwise" title={_t("Rotate Left")} onClick={ this.rotateCounterClockwise }>
|
2019-04-04 12:26:58 +03:00
|
|
|
<img src={require("../../../../res/img/rotate-ccw.svg")} alt={ _t('Rotate counter-clockwise') } width="18" height="18" />
|
2019-03-30 09:31:15 +03:00
|
|
|
</AccessibleButton>
|
2019-05-16 06:11:47 +03:00
|
|
|
<AccessibleButton className="mx_ImageView_rotateClockwise" title={_t("Rotate Right")} onClick={ this.rotateClockwise }>
|
2019-04-04 12:26:58 +03:00
|
|
|
<img src={require("../../../../res/img/rotate-cw.svg")} alt={ _t('Rotate clockwise') } width="18" height="18" />
|
2019-03-30 09:31:15 +03:00
|
|
|
</AccessibleButton>
|
2019-05-16 06:11:47 +03:00
|
|
|
<AccessibleButton className="mx_ImageView_cancel" title={_t("Close")} onClick={ this.props.onFinished }>
|
2019-03-30 09:31:15 +03:00
|
|
|
<img src={require("../../../../res/img/cancel-white.svg")} width="18" height="18" alt={ _t('Close') } />
|
|
|
|
</AccessibleButton>
|
2018-04-12 01:58:04 +03:00
|
|
|
<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">
|
2018-10-27 06:50:35 +03:00
|
|
|
{ _t('Download this file') }<br />
|
2019-07-06 12:42:14 +03:00
|
|
|
<span className="mx_ImageView_size">{ sizeRes }</span>
|
2018-04-12 01:58:04 +03:00
|
|
|
</div>
|
|
|
|
</a>
|
|
|
|
{ eventRedact }
|
|
|
|
<div className="mx_ImageView_shim">
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="mx_ImageView_rhs">
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
2019-03-30 09:31:15 +03:00
|
|
|
}
|
|
|
|
}
|