mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-10-23 03:05:45 +03:00
Code Issues Projects Releases Packages Wiki Activity

Apply PR Suggestions

Browse source
This commit is contained in:
Jaiwanth 2021-08-13 08:30:50 +05:30
parent d32f945e24
commit edfc8af6cf
8 changed files with 143 additions and 144 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
src/components/views/dialogs/ExportDialog.tsx
View file

@ -24,8 +24,8 @@ import Field from "../elements/Field";
import StyledRadioGroup from "../elements/StyledRadioGroup";
import StyledCheckbox from "../elements/StyledCheckbox";
import {
ExportFormats,
ExportTypes,
ExportFormat,
ExportType,
textForFormat,
textForType,
} from "../../../utils/exportUtils/exportUtils";
@ -42,8 +42,8 @@ interface IProps extends IDialogProps {
}
const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
const [exportFormat, setExportFormat] = useState(ExportFormats.HTML);
const [exportType, setExportType] = useState(ExportTypes.TIMELINE);
const [exportFormat, setExportFormat] = useState(ExportFormat.Html);
const [exportType, setExportType] = useState(ExportType.Timeline);
const [includeAttachments, setAttachments] = useState(false);
const [isExporting, setExporting] = useState(false);
const [numberOfMessages, setNumberOfMessages] = useState<number>(100);
@ -70,31 +70,31 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
maxSize: sizeLimit * 1024 * 1024,
};
switch (exportFormat) {
case ExportFormats.HTML:
case ExportFormat.Html:
setExporter(
new HTMLExporter(
room,
ExportTypes[exportType],
ExportType[exportType],
exportOptions,
exportProgressRef,
),
);
break;
case ExportFormats.JSON:
case ExportFormat.Json:
setExporter(
new JSONExporter(
room,
ExportTypes[exportType],
ExportType[exportType],
exportOptions,
exportProgressRef,
),
);
break;
case ExportFormats.PLAIN_TEXT:
case ExportFormat.PlainText:
setExporter(
new PlainTextExporter(
room,
ExportTypes[exportType],
ExportType[exportType],
exportOptions,
exportProgressRef,
),
@ -114,7 +114,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
sizeLimitRef.current.validate({ focused: true });
return;
}
if (exportType === ExportTypes.LAST_N_MESSAGES) {
if (exportType === ExportType.LastNMessages) {
const isValidNumberOfMessages =
await messageCountRef.current.validate({ focused: false });
if (!isValidNumberOfMessages) {
@ -202,12 +202,12 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
});
};
const exportFormatOptions = Object.keys(ExportFormats).map((format) => ({
const exportFormatOptions = Object.keys(ExportFormat).map((format) => ({
value: format,
label: textForFormat(format),
}));
const exportTypeOptions = Object.keys(ExportTypes).map((type) => {
const exportTypeOptions = Object.keys(ExportType).map((type) => {
return (
<option key={type} value={type}>
{ textForType(type) }
@ -216,7 +216,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
});
let messageCount = null;
if (exportType === ExportTypes.LAST_N_MESSAGES) {
if (exportType === ExportType.LastNMessages) {
messageCount = (
<Field
element="input"
@ -322,7 +322,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
<StyledRadioGroup
name="exportFormat"
value={exportFormat}
onChange={(key) => setExportFormat(ExportFormats[key])}
onChange={(key) => setExportFormat(ExportFormat[key])}
definitions={exportFormatOptions}
/>
@ -334,7 +334,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
element="select"
value={exportType}
onChange={(e) => {
setExportType(ExportTypes[e.target.value]);
setExportType(ExportType[e.target.value]);
}}
>
{ exportTypeOptions }

182
src/components/views/messages/MFileBody.tsx
View file

@ -222,125 +222,125 @@ export default class MFileBody extends React.Component<IProps, IState> {
{ placeholder }
</a>
</span>;
} else {
const showDownloadLink = this.props.tileShape || !this.props.showGenericPlaceholder;
}
if (isEncrypted) {
if (!this.state.decryptedBlob) {
const showDownloadLink = this.props.tileShape || !this.props.showGenericPlaceholder;
if (isEncrypted) {
if (!this.state.decryptedBlob) {
// Need to decrypt the attachment
// Wait for the user to click on the link before downloading
// and decrypting the attachment.
// This button should actually Download because usercontent/ will try to click itself
// but it is not guaranteed between various browsers' settings.
return (
<span className="mx_MFileBody">
{ placeholder }
{ showDownloadLink && <div className="mx_MFileBody_download">
<AccessibleButton onClick={this.decryptFile}>
{ _t("Decrypt %(text)s", { text: this.linkText }) }
</AccessibleButton>
</div> }
</span>
);
}
const url = "usercontent/"; // XXX: this path should probably be passed from the skin
// If the attachment is encrypted then put the link inside an iframe.
// This button should actually Download because usercontent/ will try to click itself
// but it is not guaranteed between various browsers' settings.
return (
<span className="mx_MFileBody">
{ placeholder }
{ showDownloadLink && <div className="mx_MFileBody_download">
<div style={{ display: "none" }}>
{ /*
<AccessibleButton onClick={this.decryptFile}>
{ _t("Decrypt %(text)s", { text: this.linkText }) }
</AccessibleButton>
</div> }
</span>
);
}
const url = "usercontent/"; // XXX: this path should probably be passed from the skin
// If the attachment is encrypted then put the link inside an iframe.
return (
<span className="mx_MFileBody">
{ placeholder }
{ showDownloadLink && <div className="mx_MFileBody_download">
<div style={{ display: "none" }}>
{ /*
* Add dummy copy of the "a" tag
* We'll use it to learn how the download link
* would have been styled if it was rendered inline.
*/ }
<a ref={this.dummyLink} />
</div>
{ /*
<a ref={this.dummyLink} />
</div>
{ /*
TODO: Move iframe (and dummy link) into FileDownloader.
We currently have it set up this way because of styles applied to the iframe
itself which cannot be easily handled/overridden by the FileDownloader. In
future, the download link may disappear entirely at which point it could also
be suitable to just remove this bit of code.
*/ }
<iframe
src={url}
onLoad={() => this.downloadFile(this.fileName, this.linkText)}
ref={this.iframe}
sandbox="allow-scripts allow-downloads allow-downloads-without-user-activation" />
</div> }
</span>
);
} else if (contentUrl) {
const downloadProps = {
target: "_blank",
rel: "noreferrer noopener",
<iframe
src={url}
onLoad={() => this.downloadFile(this.fileName, this.linkText)}
ref={this.iframe}
sandbox="allow-scripts allow-downloads allow-downloads-without-user-activation" />
</div> }
</span>
);
} else if (contentUrl) {
const downloadProps = {
target: "_blank",
rel: "noreferrer noopener",
// We set the href regardless of whether or not we intercept the download
// because we don't really want to convert the file to a blob eagerly, and
// still want "open in new tab" and "save link as" to work.
href: contentUrl,
};
// We set the href regardless of whether or not we intercept the download
// because we don't really want to convert the file to a blob eagerly, and
// still want "open in new tab" and "save link as" to work.
href: contentUrl,
};
// Blobs can only have up to 500mb, so if the file reports as being too large then
// we won't try and convert it. Likewise, if the file size is unknown then we'll assume
// it is too big. There is the risk of the reported file size and the actual file size
// being different, however the user shouldn't normally run into this problem.
const fileTooBig = typeof(fileSize) === 'number' ? fileSize > 524288000 : true;
// Blobs can only have up to 500mb, so if the file reports as being too large then
// we won't try and convert it. Likewise, if the file size is unknown then we'll assume
// it is too big. There is the risk of the reported file size and the actual file size
// being different, however the user shouldn't normally run into this problem.
const fileTooBig = typeof(fileSize) === 'number' ? fileSize > 524288000 : true;
if (["application/pdf"].includes(fileType) && !fileTooBig) {
if (["application/pdf"].includes(fileType) && !fileTooBig) {
// We want to force a download on this type, so use an onClick handler.
downloadProps["onClick"] = (e) => {
console.log(`Downloading ${fileType} as blob (unencrypted)`);
downloadProps["onClick"] = (e) => {
console.log(`Downloading ${fileType} as blob (unencrypted)`);
// Avoid letting the <a> do its thing
e.preventDefault();
e.stopPropagation();
// Avoid letting the <a> do its thing
e.preventDefault();
e.stopPropagation();
// Start a fetch for the download
// Based upon https://stackoverflow.com/a/49500465
this.props.mediaEventHelper.sourceBlob.value.then((blob) => {
const blobUrl = URL.createObjectURL(blob);
// Start a fetch for the download
// Based upon https://stackoverflow.com/a/49500465
this.props.mediaEventHelper.sourceBlob.value.then((blob) => {
const blobUrl = URL.createObjectURL(blob);
// We have to create an anchor to download the file
const tempAnchor = document.createElement('a');
tempAnchor.download = this.fileName;
tempAnchor.href = blobUrl;
document.body.appendChild(tempAnchor); // for firefox: https://stackoverflow.com/a/32226068
tempAnchor.click();
tempAnchor.remove();
});
};
} else {
// Else we are hoping the browser will do the right thing
downloadProps["download"] = this.fileName;
}
return (
<span className="mx_MFileBody">
{ placeholder }
{ showDownloadLink && <div className="mx_MFileBody_download">
<a {...downloadProps}>
<span className="mx_MFileBody_download_icon" />
{ _t("Download %(text)s", { text: this.linkText }) }
</a>
{ this.props.tileShape === TileShape.FileGrid && <div className="mx_MImageBody_size">
{ this.content.info && this.content.info.size ? filesize(this.content.info.size) : "" }
</div> }
</div> }
</span>
);
// We have to create an anchor to download the file
const tempAnchor = document.createElement('a');
tempAnchor.download = this.fileName;
tempAnchor.href = blobUrl;
document.body.appendChild(tempAnchor); // for firefox: https://stackoverflow.com/a/32226068
tempAnchor.click();
tempAnchor.remove();
});
};
} else {
const extra = this.linkText ? (': ' + this.linkText) : '';
return <span className="mx_MFileBody">
{ placeholder }
{ _t("Invalid file%(extra)s", { extra: extra }) }
</span>;
// Else we are hoping the browser will do the right thing
downloadProps["download"] = this.fileName;
}
return (
<span className="mx_MFileBody">
{ placeholder }
{ showDownloadLink && <div className="mx_MFileBody_download">
<a {...downloadProps}>
<span className="mx_MFileBody_download_icon" />
{ _t("Download %(text)s", { text: this.linkText }) }
</a>
{ this.props.tileShape === TileShape.FileGrid && <div className="mx_MImageBody_size">
{ this.content.info && this.content.info.size ? filesize(this.content.info.size) : "" }
</div> }
</div> }
</span>
);
} else {
const extra = this.linkText ? (': ' + this.linkText) : '';
return <span className="mx_MFileBody">
{ placeholder }
{ _t("Invalid file%(extra)s", { extra: extra }) }
</span>;
}
}
}

17
src/utils/exportUtils/Exporter.ts
View file

@ -17,7 +17,7 @@ limitations under the License.
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { Room } from "matrix-js-sdk/src/models/room";
import { MatrixClientPeg } from "../../MatrixClientPeg";
import { IExportOptions, ExportTypes } from "./exportUtils";
import { IExportOptions, ExportType } from "./exportUtils";
import { decryptFile } from "../DecryptFile";
import { mediaFromContent } from "../../customisations/Media";
import { formatFullDateNoDay } from "../../DateUtils";
@ -38,13 +38,14 @@ export default abstract class Exporter {
protected constructor(
protected room: Room,
protected exportType: ExportTypes,
protected exportType: ExportType,
protected exportOptions: IExportOptions,
protected exportProgressRef: MutableRefObject<HTMLParagraphElement>,
) {
if (exportOptions.maxSize < 1 * 1024 * 1024||
exportOptions.maxSize > 2000 * 1024 * 1024||
exportOptions.numberOfMessages > 10**8) {
if (exportOptions.maxSize < 1 * 1024 * 1024|| // Less than 1 MB
exportOptions.maxSize > 2000 * 1024 * 1024|| // More than ~ 2 GB
exportOptions.numberOfMessages > 10**8
) {
throw new Error("Invalid export options");
}
this.cancelled = false;
@ -118,10 +119,10 @@ export default abstract class Exporter {
public getLimit(): number {
let limit: number;
switch (this.exportType) {
case ExportTypes.LAST_N_MESSAGES:
case ExportType.LastNMessages:
limit = this.exportOptions.numberOfMessages;
break;
case ExportTypes.TIMELINE:
case ExportType.Timeline:
limit = 40;
break;
default:
@ -166,7 +167,7 @@ export default abstract class Exporter {
events.push(mxEv);
}
this.updateProgress(
("Fetched " + events.length + " events ") + (this.exportType === ExportTypes.LAST_N_MESSAGES
("Fetched " + events.length + " events ") + (this.exportType === ExportType.LastNMessages
? `out of ${this.exportOptions.numberOfMessages}`
: "so far"),
);

4
src/utils/exportUtils/HtmlExport.tsx
View file

@ -32,7 +32,7 @@ import DateSeparator from "../../components/views/messages/DateSeparator";
import BaseAvatar from "../../components/views/avatars/BaseAvatar";
import exportJS from "!!raw-loader!./exportJS";
import exportIcons from "./exportIcons";
import { ExportTypes } from "./exportUtils";
import { ExportType } from "./exportUtils";
import { IExportOptions } from "./exportUtils";
import MatrixClientContext from "../../contexts/MatrixClientContext";
import getExportCSS from "./exportCSS";
@ -46,7 +46,7 @@ export default class HTMLExporter extends Exporter {
constructor(
room: Room,
exportType: ExportTypes,
exportType: ExportType,
exportOptions: IExportOptions,
exportProgressRef: MutableRefObject<HTMLParagraphElement>,
) {

10
src/utils/exportUtils/JSONExport.ts
View file

@ -19,24 +19,22 @@ import { Room } from "matrix-js-sdk/src/models/room";
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { formatFullDateNoDay, formatFullDateNoDayNoTime } from "../../DateUtils";
import { haveTileForEvent } from "../../components/views/rooms/EventTile";
import { ExportTypes } from "./exportUtils";
import { ExportType } from "./exportUtils";
import { IExportOptions } from "./exportUtils";
import { EventType } from "matrix-js-sdk/src/@types/event";
import { MutableRefObject } from "react";
export default class JSONExporter extends Exporter {
protected totalSize: number;
protected messages: any[];
protected totalSize = 0;
protected messages: any[] = [];
constructor(
room: Room,
exportType: ExportTypes,
exportType: ExportType,
exportOptions: IExportOptions,
exportProgressRef: MutableRefObject<HTMLParagraphElement>,
) {
super(room, exportType, exportOptions, exportProgressRef);
this.totalSize = 0;
this.messages = [];
}
protected createJSONString(): string {

4
src/utils/exportUtils/PlainTextExport.ts
View file

@ -20,7 +20,7 @@ import { IContent, MatrixEvent } from "matrix-js-sdk/src/models/event";
import { formatFullDateNoDay } from "../../DateUtils";
import { _t } from "../../languageHandler";
import { haveTileForEvent } from "../../components/views/rooms/EventTile";
import { ExportTypes } from "./exportUtils";
import { ExportType } from "./exportUtils";
import { IExportOptions } from "./exportUtils";
import { textForEvent } from "../../TextForEvent";
import { MutableRefObject } from "react";
@ -31,7 +31,7 @@ export default class PlainTextExporter extends Exporter {
constructor(
room: Room,
exportType: ExportTypes,
exportType: ExportType,
exportOptions: IExportOptions,
exportProgressRef: MutableRefObject<HTMLParagraphElement>,
) {

28
src/utils/exportUtils/exportUtils.ts
View file

@ -16,26 +16,26 @@ limitations under the License.
import { _t } from "../../languageHandler";
export enum ExportFormats {
HTML = "HTML",
PLAIN_TEXT = "PLAIN_TEXT",
JSON = "JSON",
export enum ExportFormat {
Html = "HTML",
PlainText = "PLAIN_TEXT",
Json = "JSON",
}
export enum ExportTypes {
TIMELINE = "TIMELINE",
BEGINNING = "BEGINNING",
LAST_N_MESSAGES = "LAST_N_MESSAGES",
export enum ExportType {
Timeline = "TIMELINE",
Beginning = "BEGINNING",
LastNMessages = "LAST_N_MESSAGES",
// START_DATE = "START_DATE",
}
export const textForFormat = (format: string): string => {
switch (format) {
case ExportFormats.HTML:
case ExportFormat.Html:
return _t("HTML");
case ExportFormats.JSON:
case ExportFormat.Json:
return _t("JSON");
case ExportFormats.PLAIN_TEXT:
case ExportFormat.PlainText:
return _t("Plain Text");
default:
throw new Error("Unknown format");
@ -44,11 +44,11 @@ export const textForFormat = (format: string): string => {
export const textForType = (type: string): string => {
switch (type) {
case ExportTypes.BEGINNING:
case ExportType.Beginning:
return _t("From the beginning");
case ExportTypes.LAST_N_MESSAGES:
case ExportType.LastNMessages:
return _t("Specify a number of messages");
case ExportTypes.TIMELINE:
case ExportType.Timeline:
return _t("Current Timeline");
default:
throw new Error("Unknown type: " + type);

10
test/utils/export-test.tsx
View file

@ -16,7 +16,7 @@ limitations under the License.
import { IContent, MatrixClient, MatrixEvent, Room } from "matrix-js-sdk";
import { MatrixClientPeg } from "../../src/MatrixClientPeg";
import { textForFormat, IExportOptions, ExportTypes } from "../../src/utils/exportUtils/exportUtils";
import { textForFormat, IExportOptions, ExportType } from "../../src/utils/exportUtils/exportUtils";
import '../skinned-sdk';
import PlainTextExporter from "../../src/utils/exportUtils/PlainTextExport";
import HTMLExporter from "../../src/utils/exportUtils/HtmlExport";
@ -179,7 +179,7 @@ describe('export', function() {
it('checks if the export options are valid', function() {
for (const exportOption of invalidExportOptions) {
try {
new PlainTextExporter(mockRoom, ExportTypes.BEGINNING, exportOption, null);
new PlainTextExporter(mockRoom, ExportType.Beginning, exportOption, null);
throw new Error("Expected to throw an error");
} catch (e) {
expect(e.message).toBe("Invalid export options");
@ -188,7 +188,7 @@ describe('export', function() {
});
it('tests the file extension splitter', function() {
const exporter = new PlainTextExporter(mockRoom, ExportTypes.BEGINNING, mockExportOptions, null);
const exporter = new PlainTextExporter(mockRoom, ExportType.Beginning, mockExportOptions, null);
const fileNameWithExtensions = {
"": ["", ""],
"name": ["name", ""],
@ -225,14 +225,14 @@ describe('export', function() {
"expectedText": "<@me:here \"This\"> Reply",
},
];
const exporter = new PlainTextExporter(mockRoom, ExportTypes.BEGINNING, mockExportOptions, null);
const exporter = new PlainTextExporter(mockRoom, ExportType.Beginning, mockExportOptions, null);
for (const content of eventContents) {
expect(exporter.textForReplyEvent(content)).toBe(content.expectedText);
}
});
it("checks if the render to string doesn't throw any error for different types of events", function() {
const exporter = new HTMLExporter(mockRoom, ExportTypes.BEGINNING, mockExportOptions, null);
const exporter = new HTMLExporter(mockRoom, ExportType.Beginning, mockExportOptions, null);
for (const event of events) {
expect(renderToString(exporter.getEventTile(event, false))).toBeTruthy();
}