diff --git a/package-lock.json b/package-lock.json index a3fe23c..beb2548 100644 --- a/package-lock.json +++ b/package-lock.json @@ -28,7 +28,7 @@ "jszip": "^3.9.1", "linkify-html": "^4.1.0", "linkifyjs": "^4.1.0", - "material-design-icons-iconfont": "^6.1", + "material-design-icons-iconfont": "^6.7.0", "matrix-js-sdk": "^23.4.0", "md-gum-polyfill": "^1.0.0", "mic-recorder-to-mp3": "^2.2.2", @@ -9936,9 +9936,9 @@ } }, "node_modules/material-design-icons-iconfont": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/material-design-icons-iconfont/-/material-design-icons-iconfont-6.1.0.tgz", - "integrity": "sha512-wRJtOo1v1ch+gN8PRsj0IGJznk+kQ8mz13ds/nuhLI+Qyf/931ZlRpd92oq0IRPpZIb+bhX8pRjzIVdcPDKmiQ==" + "version": "6.7.0", + "resolved": "https://registry.npmjs.org/material-design-icons-iconfont/-/material-design-icons-iconfont-6.7.0.tgz", + "integrity": "sha512-lSj71DgVv20kO0kGbs42icDzbRot61gEDBLQACzkUuznRQBUYmbxzEkGU6dNBb5fRWHMaScYlAXX96HQ4/cJWA==" }, "node_modules/matrix-events-sdk": { "version": "0.0.1", @@ -24023,9 +24023,9 @@ } }, "material-design-icons-iconfont": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/material-design-icons-iconfont/-/material-design-icons-iconfont-6.1.0.tgz", - "integrity": "sha512-wRJtOo1v1ch+gN8PRsj0IGJznk+kQ8mz13ds/nuhLI+Qyf/931ZlRpd92oq0IRPpZIb+bhX8pRjzIVdcPDKmiQ==" + "version": "6.7.0", + "resolved": "https://registry.npmjs.org/material-design-icons-iconfont/-/material-design-icons-iconfont-6.7.0.tgz", + "integrity": "sha512-lSj71DgVv20kO0kGbs42icDzbRot61gEDBLQACzkUuznRQBUYmbxzEkGU6dNBb5fRWHMaScYlAXX96HQ4/cJWA==" }, "matrix-events-sdk": { "version": "0.0.1", diff --git a/package.json b/package.json index ee3deaa..86de8c5 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,7 @@ "jszip": "^3.9.1", "linkify-html": "^4.1.0", "linkifyjs": "^4.1.0", - "material-design-icons-iconfont": "^6.1", + "material-design-icons-iconfont": "^6.7.0", "matrix-js-sdk": "^23.4.0", "md-gum-polyfill": "^1.0.0", "mic-recorder-to-mp3": "^2.2.2", diff --git a/src/assets/css/chat.scss b/src/assets/css/chat.scss index 984a969..acd71e7 100644 --- a/src/assets/css/chat.scss +++ b/src/assets/css/chat.scss @@ -783,12 +783,23 @@ body { width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); - align-items: center; display: flex; + flex-direction: column; + align-items: center; + justify-content: center; .download-text { width: 100%; color: white; } + .download-size { + font-size: 70%; + color: white; + } + .download-icon { + width: 32px; + height: 32px; + color: white; + } } .room-name, diff --git a/src/components/Chat.vue b/src/components/Chat.vue index a49466e..a34378b 100644 --- a/src/components/Chat.vue +++ b/src/components/Chat.vue @@ -213,7 +213,7 @@ + accept="image/*,audio/*,video/*,.pdf,application/pdf,.apk,application/vnd.android.package-archive,.ipa,.zip,application/zip,application/x-zip-compressed,multipart/x-zip" class="d-none" multiple/>
@@ -1545,6 +1545,7 @@ export default { }, download(event) { + console.error("DOWNLOAD!!!"); if ((event.isThreadRoot || event.isMxThread) && this.timelineSet) { const children = this.timelineSet.relations.getAllChildEventsForEvent(event.getId()).filter(e => util.downloadableTypes().includes(e.getContent().msgtype)); children.forEach(child => util.download(this.$matrix.matrixClient, child)); diff --git a/src/components/RoomExport.vue b/src/components/RoomExport.vue index 769af2a..6f7b872 100644 --- a/src/components/RoomExport.vue +++ b/src/components/RoomExport.vue @@ -287,6 +287,7 @@ export default { var imageFolder = zip.folder("images"); var audioFolder = zip.folder("audio"); var videoFolder = zip.folder("video"); + var filesFolder = zip.folder("files"); var downloadPromises = []; let components = this.$refs.exportedEvent; @@ -321,7 +322,8 @@ export default { for (let imageIndex = 0; imageIndex < images.length; imageIndex++) { const img = images[imageIndex]; img.onerror = undefined; - img.src = './avatars/' + fileName; + img.removeAttribute("src"); + img.setAttribute("data-exported-src", './avatars/' + fileName); } } } @@ -421,13 +423,15 @@ export default { var extension = ".mp3"; let fileName = comp.event.getId() + extension; audioFolder.file(fileName, blob); // TODO calc bytes + //this.$nextTick(() => { let elements = comp.$el.getElementsByTagName("audio"); let element = elements && elements[0]; if (element) { - element.src = "./audio/" + fileName; + element.setAttribute("data-exported-src", "./audio/" + fileName); } this.processedEvents += 1; resolve(true); + //}); }); } }) @@ -449,13 +453,36 @@ export default { var extension = ".mp4"; let fileName = comp.event.getId() + extension; videoFolder.file(fileName, blob); // TODO calc bytes +// comp.src = "./video/" + fileName; let elements = comp.$el.getElementsByTagName("video"); let element = elements && elements[0]; if (element) { - element.src = "./video/" + fileName; + element.setAttribute("data-exported-src", "./video/" + fileName); } this.processedEvents += 1; - + resolve(true); + }); + } + }) + .catch((ignoredErr) => { + this.processedEvents += 1; + }) + ); + break; + case "MessageIncomingFileExport": + case "MessageOutgoingFileExport": + downloadPromises.push( + util + .getAttachment(this.$matrix.matrixClient, comp.event, null, true) + .then((blob) => { + if (currentMediaSize + blob.size <= maxMediaSize) { + currentMediaSize += blob.size; + return new Promise((resolve, ignoredReject) => { + var extension = util.getFileExtension(comp.event); + let fileName = comp.event.getId() + extension; + filesFolder.file(fileName, blob); + comp.href="./files/" + fileName; + this.processedEvents += 1; resolve(true); }); } @@ -504,7 +531,8 @@ export default { getCssRules(root); this.$nextTick(() => { - doc += this.$refs.exportRoot.outerHTML; + const contentHtml = this.$refs.exportRoot.outerHTML; + doc += contentHtml.replaceAll("data-exported-src=", "src="); doc += "
"; zip.file("chat.html", doc); diff --git a/src/components/chatMixin.js b/src/components/chatMixin.js index c5a4c2a..ce4b85b 100644 --- a/src/components/chatMixin.js +++ b/src/components/chatMixin.js @@ -19,10 +19,12 @@ import MessageIncomingImageExport from "./messages/export/MessageIncomingImageEx import MessageIncomingAudioExport from "./messages/export/MessageIncomingAudioExport"; import MessageIncomingVideoExport from "./messages/export/MessageIncomingVideoExport"; import MessageIncomingThreadExport from "./messages/export/MessageIncomingThreadExport"; +import MessageIncomingFileExport from "./messages/export/MessageIncomingFileExport"; import MessageOutgoingImageExport from "./messages/export/MessageOutgoingImageExport"; import MessageOutgoingAudioExport from "./messages/export/MessageOutgoingAudioExport"; import MessageOutgoingVideoExport from "./messages/export/MessageOutgoingVideoExport"; import MessageOutgoingThreadExport from "./messages/export/MessageOutgoingThreadExport"; +import MessageOutgoingFileExport from "./messages/export/MessageOutgoingFileExport"; import ContactJoin from "./messages/ContactJoin.vue"; import ContactLeave from "./messages/ContactLeave.vue"; import ContactInvited from "./messages/ContactInvited.vue"; @@ -172,6 +174,9 @@ export default { event.getContent().info.mimetype && event.getContent().info.mimetype.startsWith("image/svg") ) { + if (isForExport) { + return MessageIncomingFileExport; + } return MessageIncomingFile; } if (isForExport) { @@ -189,6 +194,9 @@ export default { } return MessageIncomingVideo; } else if (event.getContent().msgtype == "m.file") { + if (isForExport) { + return MessageIncomingFileExport; + } return MessageIncomingFile; } else if (stickers.isStickerShortcode(event.getContent().body)) { return MessageIncomingSticker; @@ -223,6 +231,9 @@ export default { } return MessageOutgoingVideo; } else if (event.getContent().msgtype == "m.file") { + if (isForExport) { + return MessageOutgoingFileExport; + } return MessageOutgoingFile; } else if (stickers.isStickerShortcode(event.getContent().body)) { return MessageOutgoingSticker; diff --git a/src/components/file_mode/ThumbnailView.vue b/src/components/file_mode/ThumbnailView.vue index 59a5e76..12003b9 100644 --- a/src/components/file_mode/ThumbnailView.vue +++ b/src/components/file_mode/ThumbnailView.vue @@ -1,19 +1,22 @@ diff --git a/src/components/messages/MessageIncomingFile.vue b/src/components/messages/MessageIncomingFile.vue index 81b25c4..ef34564 100644 --- a/src/components/messages/MessageIncomingFile.vue +++ b/src/components/messages/MessageIncomingFile.vue @@ -10,12 +10,7 @@
- {{ $t('message.file_prefix') }} - + {{ $t('message.edited') }} @@ -25,11 +20,12 @@ diff --git a/src/components/messages/MessageIncomingVideo.vue b/src/components/messages/MessageIncomingVideo.vue index 180d53d..c7af6d8 100644 --- a/src/components/messages/MessageIncomingVideo.vue +++ b/src/components/messages/MessageIncomingVideo.vue @@ -10,6 +10,15 @@ {{ $t('message.download_progress',{percentage: downloadProgress}) }}
+
+
+ {{ fileName }} +
+
+ {{ fileSize }} +
+ download +
diff --git a/src/components/messages/MessageOutgoingFile.vue b/src/components/messages/MessageOutgoingFile.vue index cb13085..87e8e6d 100644 --- a/src/components/messages/MessageOutgoingFile.vue +++ b/src/components/messages/MessageOutgoingFile.vue @@ -11,12 +11,7 @@
- {{ $t('message.file_prefix') }} - + {{ $t('message.edited') }} @@ -26,11 +21,12 @@ diff --git a/src/components/messages/export/MessageIncomingVideoExport.vue b/src/components/messages/export/MessageIncomingVideoExport.vue index 3727ae8..1716a36 100644 --- a/src/components/messages/export/MessageIncomingVideoExport.vue +++ b/src/components/messages/export/MessageIncomingVideoExport.vue @@ -2,7 +2,7 @@
- @@ -11,14 +11,14 @@ diff --git a/src/components/messages/export/MessageOutgoingAudioExport.vue b/src/components/messages/export/MessageOutgoingAudioExport.vue index b0f6906..f32c19a 100644 --- a/src/components/messages/export/MessageOutgoingAudioExport.vue +++ b/src/components/messages/export/MessageOutgoingAudioExport.vue @@ -1,18 +1,18 @@ diff --git a/src/components/messages/export/MessageOutgoingFileExport.vue b/src/components/messages/export/MessageOutgoingFileExport.vue new file mode 100644 index 0000000..0bcaa6f --- /dev/null +++ b/src/components/messages/export/MessageOutgoingFileExport.vue @@ -0,0 +1,51 @@ + + + + + diff --git a/src/components/messages/export/MessageOutgoingVideoExport.vue b/src/components/messages/export/MessageOutgoingVideoExport.vue index be07c5d..8faf38f 100644 --- a/src/components/messages/export/MessageOutgoingVideoExport.vue +++ b/src/components/messages/export/MessageOutgoingVideoExport.vue @@ -2,7 +2,7 @@
- @@ -11,14 +11,14 @@ diff --git a/src/components/messages/export/exportedAttachmentMixin.js b/src/components/messages/export/exportedAttachmentMixin.js new file mode 100644 index 0000000..e3b72b6 --- /dev/null +++ b/src/components/messages/export/exportedAttachmentMixin.js @@ -0,0 +1,17 @@ +import util from "../../../plugins/utils"; + +export default { + data() { + return { + src: null, + } + }, + computed: { + fileName() { + return util.getFileName(this.event); + }, + fileSize() { + return util.getFileSizeFormatted(this.event); + } + }, +} \ No newline at end of file diff --git a/src/components/sendAttachmentsMixin.js b/src/components/sendAttachmentsMixin.js index 3503a11..25b603b 100644 --- a/src/components/sendAttachmentsMixin.js +++ b/src/components/sendAttachmentsMixin.js @@ -74,7 +74,7 @@ export default { if (item.status !== this.sendStatuses.INITIAL) { return getItemPromise(++index); } - const itemPromise = util.sendImage(this.$matrix.matrixClient, this.room.roomId, item.attachment, ({ loaded, total }) => { + const itemPromise = util.sendFile(this.$matrix.matrixClient, this.room.roomId, item.attachment, ({ loaded, total }) => { if (loaded == total) { item.progress = 100; } else if (total > 0) { diff --git a/src/plugins/utils.js b/src/plugins/utils.js index f5dcf15..5e5d3e4 100644 --- a/src/plugins/utils.js +++ b/src/plugins/utils.js @@ -4,6 +4,7 @@ import dataUriToBuffer from "data-uri-to-buffer"; import ImageResize from "image-resize"; import { AutoDiscovery } from 'matrix-js-sdk'; import User from '../models/user'; +const prettyBytes = require("pretty-bytes"); export const STATE_EVENT_ROOM_DELETION_NOTICE = "im.keanu.room_deletion_notice"; export const STATE_EVENT_ROOM_DELETED = "im.keanu.room_deleted"; @@ -159,7 +160,7 @@ class Util { // true // ); url = matrixClient.mxcUrlToHttp(file.url); - } else if (content.file && content.file.url) { + } else if (content.file && content.file.url && this.getMimeType(event).startsWith("image/")) { // No thumb, use real url file = content.file; url = matrixClient.mxcUrlToHttp(file.url); @@ -348,7 +349,7 @@ class Util { }); } - sendImage(matrixClient, roomId, file, onUploadProgress, threadRoot) { + sendFile(matrixClient, roomId, file, onUploadProgress, threadRoot) { const uploadPromise = new UploadPromise(undefined); uploadPromise.wrappedPromise = new Promise((resolve, reject) => { var reader = new FileReader(); @@ -371,13 +372,13 @@ class Util { } var description = file.name; - var msgtype = 'm.image'; - if (file.type.startsWith("audio/")) { + var msgtype = 'm.file'; + if (file.type.startsWith("image/")) { + msgtype = 'm.image'; + } else if (file.type.startsWith("audio/")) { msgtype = 'm.audio'; } else if (file.type.startsWith("video/")) { msgtype = 'm.video'; - } else if (file.type.startsWith("application/pdf")) { - msgtype = 'm.file'; } const opts = { @@ -913,7 +914,6 @@ class Util { link.download = event.getContent().body || this.$t("fallbacks.download_name"); document.body.appendChild(link); link.click(); - setTimeout(function () { document.body.removeChild(link); URL.revokeObjectURL(url); @@ -951,6 +951,68 @@ class Util { } return Promise.resolve(config.defaultBaseUrl); } + + getMimeType(event) { + const content = event.getContent(); + return (content.info && content.info.mimetype) ? content.info.mimetype : (content.file && content.file.mimetype) ? content.file.mimetype : ""; + } + + getFileName(event) { + const content = event.getContent(); + return (content.body || content.filename || "").toLowerCase(); + } + + getFileExtension(event) { + const fileName = this.getFileName(event); + const parts = fileName.split("."); + if (parts.length > 1) { + return "." + parts[parts.length - 1].toLowerCase(); + } + return ""; + } + + getFileSize(event) { + const content = event.getContent(); + if (content.info) { + return content.info.size; + } + return 0; + } + + getFileSizeFormatted(event) { + return prettyBytes(this.getFileSize(event)); + } + + isFileTypeAPK(event) { + const mime = this.getMimeType(event); + if (mime === "application/vnd.android.package-archive" || this.getFileName(event).endsWith(".apk")) { + return true; + } + return false; + } + + isFileTypeIPA(event) { + if (this.getFileName(event).endsWith(".ipa")) { + return true; + } + return false; + } + + isFileTypePDF(event) { + const mime = this.getMimeType(event); + if (mime === "application/pdf" || this.getFileName(event).endsWith(".pdf")) { + return true; + } + return false; + } + + isFileTypeZip(event) { + const mime = this.getMimeType(event); + if (["application/zip", "application/x-zip-compressed", "multipart/x-zip"].includes(mime) || this.getFileName(event).endsWith(".zip")) { + return true; + } + return false; + } } export default new Util();