imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Apply prettier formatting

Browse source
This commit is contained in:
Michael Weimann 2022-12-12 12:24:14 +01:00
parent 1cac306093
commit 526645c791
No known key found for this signature in database
GPG key ID: 53F535A266BB9584
1576 changed files with 65385 additions and 62478 deletions
Download patch file Download diff file Expand all files Collapse all files

85
src/components/views/elements/ImageView.tsx
View file

@ -16,25 +16,25 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React, { createRef } from 'react';
import React, { createRef } from "react";
import FocusLock from "react-focus-lock";
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { _t } from '../../../languageHandler';
import { _t } from "../../../languageHandler";
import AccessibleTooltipButton from "./AccessibleTooltipButton";
import MemberAvatar from "../avatars/MemberAvatar";
import { ContextMenuTooltipButton } from "../../../accessibility/context_menu/ContextMenuTooltipButton";
import MessageContextMenu from "../context_menus/MessageContextMenu";
import { aboveLeftOf } from '../../structures/ContextMenu';
import { aboveLeftOf } from "../../structures/ContextMenu";
import MessageTimestamp from "../messages/MessageTimestamp";
import SettingsStore from "../../../settings/SettingsStore";
import { formatFullDate } from "../../../DateUtils";
import dis from '../../../dispatcher/dispatcher';
import { Action } from '../../../dispatcher/actions';
import dis from "../../../dispatcher/dispatcher";
import { Action } from "../../../dispatcher/actions";
import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
import { normalizeWheelEvent } from "../../../utils/Mouse";
import { IDialogProps } from '../dialogs/IDialogProps';
import UIStore from '../../../stores/UIStore';
import { IDialogProps } from "../dialogs/IDialogProps";
import UIStore from "../../../stores/UIStore";
import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
import { getKeyBindingsManager } from "../../../KeyBindingsManager";
@ -43,7 +43,7 @@ import { presentableTextForFile } from "../../../utils/FileUtils";
// Max scale to keep gaps around the image
const MAX_SCALE = 0.95;
// This is used for the buttons
const ZOOM_STEP = 0.10;
const ZOOM_STEP = 0.1;
// This is used for mouse wheel events
const ZOOM_COEFFICIENT = 0.0025;
// If we have moved only this much we can zoom
@ -101,17 +101,12 @@ export default class ImageView extends React.Component<IProps, IState> {
minZoom: MAX_SCALE,
maxZoom: MAX_SCALE,
rotation: 0,
translationX: (
thumbnailInfo?.positionX +
(thumbnailInfo?.width / 2) -
(UIStore.instance.windowWidth / 2)
) ?? 0,
translationY: (
translationX: thumbnailInfo?.positionX + thumbnailInfo?.width / 2 - UIStore.instance.windowWidth / 2 ?? 0,
translationY:
thumbnailInfo?.positionY +
(thumbnailInfo?.height / 2) -
(UIStore.instance.windowHeight / 2) -
(getPanelHeight() / 2)
) ?? 0,
thumbnailInfo?.height / 2 -
UIStore.instance.windowHeight / 2 -
getPanelHeight() / 2 ?? 0,
moving: false,
contextMenuDisplayed: false,
};
@ -134,7 +129,7 @@ export default class ImageView extends React.Component<IProps, IState> {
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 });
this.focusLock.current.addEventListener("wheel", this.onWheel, { passive: false });
// We want to recalculate zoom whenever the window's size changes
window.addEventListener("resize", this.recalculateZoom);
// After the image loads for the first time we want to calculate the zoom
@ -142,7 +137,7 @@ export default class ImageView extends React.Component<IProps, IState> {
}
componentWillUnmount() {
this.focusLock.current.removeEventListener('wheel', this.onWheel);
this.focusLock.current.removeEventListener("wheel", this.onWheel);
window.removeEventListener("resize", this.recalculateZoom);
this.image.current.removeEventListener("load", this.imageLoaded);
}
@ -205,7 +200,7 @@ export default class ImageView extends React.Component<IProps, IState> {
const minZoom = Math.min(zoomX, zoomY) * MAX_SCALE;
// If zoom is smaller than minZoom don't go below that value
const zoom = (this.state.zoom <= this.state.minZoom) ? minZoom : this.state.zoom;
const zoom = this.state.zoom <= this.state.minZoom ? minZoom : this.state.zoom;
this.setState({
minZoom: minZoom,
@ -234,8 +229,8 @@ export default class ImageView extends React.Component<IProps, IState> {
// Zoom relative to the center of the view
this.setState({
zoom: newZoom,
translationX: this.state.translationX * newZoom / oldZoom,
translationY: this.state.translationY * newZoom / oldZoom,
translationX: (this.state.translationX * newZoom) / oldZoom,
translationY: (this.state.translationY * newZoom) / oldZoom,
});
} else {
// Zoom relative to the given point on the image.
@ -358,9 +353,11 @@ export default class ImageView extends React.Component<IProps, IState> {
// Zoom in if we are completely zoomed out and increase the zoom factor for images
// smaller than the viewport size
if (this.state.zoom === this.state.minZoom) {
this.zoom(this.state.maxZoom === this.state.minZoom
? 2 * this.state.maxZoom
: this.state.maxZoom, ev.nativeEvent.offsetX, ev.nativeEvent.offsetY);
this.zoom(
this.state.maxZoom === this.state.minZoom ? 2 * this.state.maxZoom : this.state.maxZoom,
ev.nativeEvent.offsetX,
ev.nativeEvent.offsetY,
);
return;
}
@ -411,11 +408,7 @@ export default class ImageView extends React.Component<IProps, IState> {
);
}
return (
<React.Fragment>
{ contextMenu }
</React.Fragment>
);
return <React.Fragment>{contextMenu}</React.Fragment>;
}
render() {
@ -457,11 +450,7 @@ export default class ImageView extends React.Component<IProps, IState> {
}
const senderName = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender();
const sender = (
<div className="mx_ImageView_info_sender">
{ senderName }
</div>
);
const sender = <div className="mx_ImageView_info_sender">{senderName}</div>;
const messageTimestamp = (
<a
href={permalink}
@ -488,10 +477,10 @@ export default class ImageView extends React.Component<IProps, IState> {
info = (
<div className="mx_ImageView_info_wrapper">
{ avatar }
{avatar}
<div className="mx_ImageView_info">
{ sender }
{ messageTimestamp }
{sender}
{messageTimestamp}
</div>
</div>
);
@ -499,9 +488,7 @@ export default class ImageView extends React.Component<IProps, IState> {
// 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 />
);
info = <div />;
}
let contextMenuButton;
@ -536,7 +523,7 @@ export default class ImageView extends React.Component<IProps, IState> {
if (this.props.mxEvent?.getContent()) {
title = (
<div className="mx_ImageView_title">
{ presentableTextForFile(this.props.mxEvent?.getContent(), _t("Image"), true) }
{presentableTextForFile(this.props.mxEvent?.getContent(), _t("Image"), true)}
</div>
);
}
@ -552,11 +539,11 @@ export default class ImageView extends React.Component<IProps, IState> {
ref={this.focusLock}
>
<div className="mx_ImageView_panel">
{ info }
{ title }
{info}
{title}
<div className="mx_ImageView_toolbar">
{ zoomOutButton }
{ zoomInButton }
{zoomOutButton}
{zoomInButton}
<AccessibleTooltipButton
className="mx_ImageView_button mx_ImageView_button_rotateCCW"
title={_t("Rotate Left")}
@ -572,13 +559,13 @@ export default class ImageView extends React.Component<IProps, IState> {
title={_t("Download")}
onClick={this.onDownloadClick}
/>
{ contextMenuButton }
{contextMenuButton}
<AccessibleTooltipButton
className="mx_ImageView_button mx_ImageView_button_close"
title={_t("Close")}
onClick={this.props.onFinished}
/>
{ this.renderContextMenu() }
{this.renderContextMenu()}
</div>
</div>
<div