@social-mail/social-mail-client 1.2.87 → 1.2.88

package/src/web/page/mails/mini-compose/MiniComposeBox.tsx

@@ -29,6 +29,7 @@ import Insert from "./Insert";
 import TimeSpan from "@web-atoms/date-time/dist/TimeSpan";
 import ToggleEmoji from "./ToggleEmoji";
 import Attach from "./Atttach";
+import PopupService from "@web-atoms/core/dist/web/services/PopupService";
 
 const css = styled.css `
     display: grid;
@@ -143,6 +144,7 @@ export default class MiniComposeBox extends AtomControl {
                 presenter={Bind.presenter((c) => this.editor = c )}
                 content={this.typedMessage}
                 style-min-height="50px"
+                attachments={Bind.oneWay(() => this.draft.attachments)}
                 />
             <i
                 data-element="send"
@@ -174,11 +176,57 @@ export default class MiniComposeBox extends AtomControl {
     }
 
     @Action({ onEvent: "filesAvailable"})
-    async filesAvailable({ files, extra }) {
+    async filesAvailable({ files, extra }: { files: IUploadedFile[], extra: any }) {
+
+        if (extra.stream) {
+            await this.streamFiles({ files, extra });
+            return;
+        }
+
+        const size = files.reduce((pv, cv) => pv + cv.file.size , 0);
+        if (size > 20*1024*1024) {
+            if (!extra.stream) {
+                throw new Error(`Total size of attachments cannot be more than 20MB.`);
+            }
+        }
+
         if (extra.insert) {
+            this.ensureDraft();
             // insert into the email..
+            const firstChild = this.editor.editor.firstElementChild;
+            for (const iterator of files) {
+                if (/^image\//.test(iterator.contentType)) {
+                    const af = this.createAppFile(iterator);
+                    const img = firstChild.ownerDocument.createElement("img");
+                    img.src = iterator.url;
+                    img.setAttribute("data-content-id", af.contentID);
+                    this.draft.attachments.add(af);
+                    firstChild.appendChild(img);
+                    const newLine = document.createElement("div");
+                    newLine.appendChild(document.createElement("br"));
+                    firstChild.appendChild(newLine);
+                    continue;
+                }
+                if (/^(video|audio)\//.test(iterator.contentType)) {
+                    const af = this.createAppFile(iterator);
+                    const img = firstChild.ownerDocument.createElement("video");
+                    img.src = iterator.url;
+                    img.setAttribute("data-content-id", af.contentID);
+                    this.draft.attachments.add(af);
+                    firstChild.appendChild(img);
+                    const newLine = document.createElement("div");
+                    newLine.appendChild(document.createElement("br"));
+                    firstChild.appendChild(newLine);
+                    continue;
+                }
+            }
+            return;
         }
-        this.addFiles(... files);
+        await this.addFiles(... files);
+    }
+
+    async streamFiles({ files, extra }: { files: IUploadedFile[], extra: any }) {
+        // do nothing...
     }
 
     @Action({
@@ -191,10 +239,13 @@ export default class MiniComposeBox extends AtomControl {
     }
 
     @Action({ onEvent: CommonEvents.onDraftDeleted })
-    async refreshDraft() {
+    async recreateDraft() {
+        this.draft = null;
         this.draft ??= Email.create({
+            subject: "",
             attachments: []
         });
+        this.draft.attachments ??= [];
     }
 
     @Action({ onEvent: "input", defer: 500, blockMultipleExecution: true })
@@ -250,28 +301,38 @@ export default class MiniComposeBox extends AtomControl {
     @Action({})
     async sendAudioMessage() {
         const uploadedFile = await AudioRecorder.show<IUploadedFile>();
-        this.draft ??= Email.create({
-            attachments: []
-        });
+        this.ensureDraft();
         this.draft.mdBody = this.typedMessage;
-        this.addFiles(uploadedFile);
+        await this.addFiles(uploadedFile);
         await this.save();
     }
 
-    private addFiles(... files: IUploadedFile[]) {
-        const attachments = this.draft.attachments ??= [];
-        AtomBinder.refreshValue(this, "draft");
-        for (const { appFileID, url, file } of files) {
-            attachments.add(AppFile.create({
-                appFileID,
-                contentType: file.type,
-                name: file.name,
-                contentID: appFileID.toString(36),
-                url
-            }));
+    private async addFiles(... files: IUploadedFile[]) {
+        this.ensureDraft();
+        const attachments = this.draft.attachments;
+        for (const file of files) {
+            attachments.add(this.createAppFile(file));
         }
     }
 
+    private createAppFile(file: IUploadedFile): IAppFile {
+        return AppFile.create({
+            appFileID: file.appFileID,
+            contentType: file.file.type,
+            name: file.file.name,
+            contentID: file.appFileID.toString(36),
+            url: file.url
+        });
+    }
+
+    private ensureDraft() {
+        this.draft ??= Email.create({
+            subject: "",
+            attachments: []
+        });
+        this.draft.attachments ??= [];
+    }
+
     private async save() {
         this.draft = await this.conversationService.draft({ ... this.mailboxContact, email: this.draft }, true);
     }

package/src/web/page/mails/service/ConversationService.tsx

@@ -34,11 +34,19 @@ export const renderMail = AtomControl.registerProperty("data-html", "html", (c,
     }
     msg.innerHTML = html;
     for (const iterator of descendentElementIterator(msg)) {
-        if(iterator.tagName === "IMG") {
+        let cid = iterator.getAttribute("data-content-id");
+        if (cid) {
+            const a = mail.attachments.find((x) => x.contentID === cid);
+            if (a) {
+                iterator.setAttribute("src", a.url);
+                continue;
+            }
+        }
+        if(/^(IMG|VIDEO)$/.test(iterator.tagName)) {
             const src = iterator.getAttribute("src");
             if (src) {
                 if (src.startsWith("cid:")) {
-                    const cid = src.substring(4);
+                    cid = src.substring(4);
                     const a = mail.attachments.find((x) => x.contentID === cid);
                     if (a) {
                         iterator.setAttribute("src", `/api/files/${a.appFileID}/${a.fileContentID}/${a.name}`);