+ {fileDropTarget}
{topUnreadMessagesBar}
{jumpToBottom}
{messagePanel}
diff --git a/src/components/structures/UploadBar.js b/src/components/structures/UploadBar.js
deleted file mode 100644
index 16cc4cb987..0000000000
--- a/src/components/structures/UploadBar.js
+++ /dev/null
@@ -1,109 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2019 The Matrix.org Foundation C.I.C.
-
-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 ContentMessages from '../../ContentMessages';
-import dis from "../../dispatcher/dispatcher";
-import filesize from "filesize";
-import { _t } from '../../languageHandler';
-
-export default class UploadBar extends React.Component {
- static propTypes = {
- room: PropTypes.object,
- };
-
- componentDidMount() {
- this.dispatcherRef = dis.register(this.onAction);
- this.mounted = true;
- }
-
- componentWillUnmount() {
- this.mounted = false;
- dis.unregister(this.dispatcherRef);
- }
-
- onAction = payload => {
- switch (payload.action) {
- case 'upload_progress':
- case 'upload_finished':
- case 'upload_canceled':
- case 'upload_failed':
- if (this.mounted) this.forceUpdate();
- break;
- }
- };
-
- render() {
- const uploads = ContentMessages.sharedInstance().getCurrentUploads();
-
- // for testing UI... - also fix up the ContentMessages.getCurrentUploads().length
- // check in RoomView
- //
- // uploads = [{
- // roomId: this.props.room.roomId,
- // loaded: 123493,
- // total: 347534,
- // fileName: "testing_fooble.jpg",
- // }];
-
- if (uploads.length == 0) {
- return
;
- }
-
- let upload;
- for (let i = 0; i < uploads.length; ++i) {
- if (uploads[i].roomId == this.props.room.roomId) {
- upload = uploads[i];
- break;
- }
- }
- if (!upload) {
- return
;
- }
-
- const innerProgressStyle = {
- width: ((upload.loaded / (upload.total || 1)) * 100) + '%',
- };
- let uploadedSize = filesize(upload.loaded);
- const totalSize = filesize(upload.total);
- if (uploadedSize.replace(/^.* /, '') === totalSize.replace(/^.* /, '')) {
- uploadedSize = uploadedSize.replace(/ .*/, '');
- }
-
- // MUST use var name 'count' for pluralization to kick in
- const uploadText = _t(
- "Uploading %(filename)s and %(count)s others", {filename: upload.fileName, count: (uploads.length - 1)},
- );
-
- return (
-
-
-
![]({require("../../../res/img/fileicon.png")})
-
![]({require("../../../res/img/cancel.svg")})
-
- { uploadedSize } / { totalSize }
-
-
{ uploadText }
-
- );
- }
-}
diff --git a/src/components/structures/UploadBar.tsx b/src/components/structures/UploadBar.tsx
new file mode 100644
index 0000000000..b9d157ee00
--- /dev/null
+++ b/src/components/structures/UploadBar.tsx
@@ -0,0 +1,100 @@
+/*
+Copyright 2015, 2016, 2019, 2021 The Matrix.org Foundation C.I.C.
+
+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 { Room } from "matrix-js-sdk/src/models/room";
+import ContentMessages from '../../ContentMessages';
+import dis from "../../dispatcher/dispatcher";
+import filesize from "filesize";
+import { _t } from '../../languageHandler';
+import { ActionPayload } from "../../dispatcher/payloads";
+import { Action } from "../../dispatcher/actions";
+import ProgressBar from "../views/elements/ProgressBar";
+import AccessibleButton from "../views/elements/AccessibleButton";
+import { IUpload } from "../../models/IUpload";
+
+interface IProps {
+ room: Room;
+}
+
+interface IState {
+ currentUpload?: IUpload;
+ uploadsHere: IUpload[];
+}
+
+export default class UploadBar extends React.Component
{
+ private dispatcherRef: string;
+ private mounted: boolean;
+
+ constructor(props) {
+ super(props);
+ this.state = {uploadsHere: []};
+ }
+
+ componentDidMount() {
+ this.dispatcherRef = dis.register(this.onAction);
+ this.mounted = true;
+ }
+
+ componentWillUnmount() {
+ this.mounted = false;
+ dis.unregister(this.dispatcherRef);
+ }
+
+ private onAction = (payload: ActionPayload) => {
+ switch (payload.action) {
+ case Action.UploadStarted:
+ case Action.UploadProgress:
+ case Action.UploadFinished:
+ case Action.UploadCanceled:
+ case Action.UploadFailed: {
+ if (!this.mounted) return;
+ const uploads = ContentMessages.sharedInstance().getCurrentUploads();
+ const uploadsHere = uploads.filter(u => u.roomId === this.props.room.roomId);
+ this.setState({currentUpload: uploadsHere[0], uploadsHere});
+ break;
+ }
+ }
+ };
+
+ private onCancelClick = (ev) => {
+ ev.preventDefault();
+ ContentMessages.sharedInstance().cancelUpload(this.state.currentUpload.promise);
+ };
+
+ render() {
+ if (!this.state.currentUpload) {
+ return null;
+ }
+
+ // MUST use var name 'count' for pluralization to kick in
+ const uploadText = _t(
+ "Uploading %(filename)s and %(count)s others", {
+ filename: this.state.currentUpload.fileName,
+ count: this.state.uploadsHere.length - 1,
+ },
+ );
+
+ const uploadSize = filesize(this.state.currentUpload.total);
+ return (
+
+
{uploadText} ({uploadSize})
+
+
+
@@ -338,7 +342,7 @@ export default class AppTile extends React.Component {
// only possible for room widgets, can assert this.props.room here
const isEncrypted = MatrixClientPeg.get().isRoomEncrypted(this.props.room.roomId);
appTileBody = (
-
+
+
{ loadingElement }
);
} else {
if (this.isMixedContent()) {
appTileBody = (
-
+
);
} else {
appTileBody = (
-
+
{ this.state.loading && loadingElement }